Hugging Face's logo

Spaces:
ICExrp
/
mctemplate
Running

App Files Community
ICExrp commited on
Commit
dc80b21
·
verified ·
1 Parent(s): 1896173

Build me a memecoin website - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +289 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mctemplate
3
- emoji: 📈
4
- colorFrom: red
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mctemplate
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,290 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MoonDoge - The Next Meme Coin Sensation</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
16
+ * {
17
+ font-family: 'Comic Neue', cursive;
18
+ }
19
+ .vanta-bg {
20
+ position: absolute;
21
+ width: 100%;
22
+ height: 100%;
23
+ z-index: -1;
24
+ }
25
+ .coin-spin {
26
+ animation: spin 5s linear infinite;
27
+ }
28
+ @keyframes spin {
29
+ 0% { transform: rotateY(0deg); }
30
+ 100% { transform: rotateY(360deg); }
31
+ }
32
+ .meme-gradient {
33
+ background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);
34
+ background-size: 400% 400%;
35
+ animation: gradient 15s ease infinite;
36
+ }
37
+ @keyframes gradient {
38
+ 0% { background-position: 0% 50%; }
39
+ 50% { background-position: 100% 50%; }
40
+ 100% { background-position: 0% 50%; }
41
+ }
42
+ .pulse {
43
+ animation: pulse 2s infinite;
44
+ }
45
+ @keyframes pulse {
46
+ 0% { transform: scale(1); }
47
+ 50% { transform: scale(1.05); }
48
+ 100% { transform: scale(1); }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-900 text-white">
53
+ <div id="vanta-bg" class="vanta-bg"></div>
54
+
55
+ <!-- Navigation -->
56
+ <nav class="fixed w-full z-50 bg-black bg-opacity-70 backdrop-blur-sm">
57
+ <div class="container mx-auto px-6 py-4">
58
+ <div class="flex justify-between items-center">
59
+ <div class="flex items-center space-x-2">
60
+ <img src="http://static.photos/gaming/200x200/42" alt="MoonDoge Logo" class="w-10 h-10 rounded-full coin-spin">
61
+ <span class="text-2xl font-bold text-yellow-400">MoonDoge</span>
62
+ </div>
63
+ <div class="hidden md:flex space-x-8">
64
+ <a href="#about" class="hover:text-yellow-400 transition-colors">About</a>
65
+ <a href="#tokenomics" class="hover:text-yellow-400 transition-colors">Tokenomics</a>
66
+ <a href="#roadmap" class="hover:text-yellow-400 transition-colors">Roadmap</a>
67
+ <a href="#buy" class="hover:text-yellow-400 transition-colors">How to Buy</a>
68
+ <a href="#community" class="hover:text-yellow-400 transition-colors">Community</a>
69
+ </div>
70
+ <button class="bg-yellow-400 text-black px-6 py-2 rounded-full font-bold hover:bg-yellow-300 transition-colors">
71
+ Buy Now
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </nav>
76
+
77
+ <!-- Hero Section -->
78
+ <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
79
+ <div class="container mx-auto px-6 text-center z-10" data-aos="fade-up">
80
+ <div class="mb-8">
81
+ <img src="http://static.photos/gaming/320x240/42" alt="MoonDoge Coin" class="w-48 h-48 mx-auto rounded-full coin-spin pulse">
82
+ </div>
83
+ <h1 class="text-6xl md:text-8xl font-bold mb-6 meme-gradient bg-clip-text text-transparent">
84
+ TO THE MOON! 🚀
85
+ </h1>
86
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
87
+ The meme coin that's actually going to make it to the moon. Join the revolution and become part of crypto history!
88
+ </p>
89
+ <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6">
90
+ <button class="bg-yellow-400 text-black px-8 py-4 rounded-full text-xl font-bold hover:bg-yellow-300 transition-colors">
91
+ Buy MoonDoge
92
+ </button>
93
+ <button class="border-2 border-yellow-400 text-yellow-400 px-8 py-4 rounded-full text-xl font-bold hover:bg-yellow-400 hover:text-black transition-colors">
94
+ Join Community
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </section>
99
+
100
+ <!-- About Section -->
101
+ <section id="about" class="py-20 bg-black bg-opacity-50">
102
+ <div class="container mx-auto px-6">
103
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-yellow-400" data-aos="fade-up">What is MoonDoge?</h2>
104
+ <div class="grid md:grid-cols-2 gap-12 items-center">
105
+ <div data-aos="fade-right">
106
+ <img src="http://static.photos/technology/640x360/133" alt="MoonDoge Concept" class="rounded-3xl shadow-2xl">
107
+ </div>
108
+ <div data-aos="fade-left">
109
+ <p class="text-xl mb-6">
110
+ MoonDoge isn't just another meme coin - it's a movement! Born from the fusion of crypto enthusiasm and meme culture, we're here to prove that fun and profits can go hand in hand.
111
+ </p>
112
+ <p class="text-xl mb-6">
113
+ Our mission is simple: create the most engaging, community-driven cryptocurrency that actually delivers value to our holders while maintaining that classic meme coin charm.
114
+ </p>
115
+ <div class="grid grid-cols-2 gap-4">
116
+ <div class="bg-gray-800 p-4 rounded-xl text-center">
117
+ <i data-feather="users" class="w-8 h-8 mx-auto mb-2 text-yellow-400"></i>
118
+ <h3 class="font-bold">100K+ Holders</h3>
119
+ </div>
120
+ <div class="bg-gray-800 p-4 rounded-xl text-center">
121
+ <i data-feather="trending-up" class="w-8 h-8 mx-auto mb-2 text-yellow-400"></i>
122
+ <h3 class="font-bold">10M Market Cap</h3>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Tokenomics Section -->
131
+ <section id="tokenomics" class="py-20">
132
+ <div class="container mx-auto px-6">
133
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-yellow-400" data-aos="fade-up">Tokenomics</h2>
134
+ <div class="grid md:grid-cols-3 gap-8">
135
+ <div class="bg-gray-800 p-8 rounded-3xl text-center" data-aos="flip-left">
136
+ <div class="w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-6">
137
+ <i data-feather="dollar-sign" class="w-10 h-10 text-black"></i>
138
+ </div>
139
+ <h3 class="text-2xl font-bold mb-4">Total Supply</h3>
140
+ <p class="text-3xl font-bold text-yellow-400">1 Trillion</p>
141
+ <p class="text-gray-400">MOONDOGE tokens</p>
142
+ </div>
143
+ <div class="bg-gray-800 p-8 rounded-3xl text-center" data-aos="flip-left" data-aos-delay="200">
144
+ <div class="w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-6">
145
+ <i data-feather="percent" class="w-10 h-10 text-black"></i>
146
+ </div>
147
+ <h3 class="text-2xl font-bold mb-4">Tax</h3>
148
+ <p class="text-3xl font-bold text-yellow-400">4%</p>
149
+ <p class="text-gray-400">2% liquidity, 2% rewards</p>
150
+ </div>
151
+ <div class="bg-gray-800 p-8 rounded-3xl text-center" data-aos="flip-left" data-aos-delay="400">
152
+ <div class="w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-6">
153
+ <i data-feather="lock" class="w-10 h-10 text-black"></i>
154
+ </div>
155
+ <h3 class="text-2xl font-bold mb-4">Liquidity</h3>
156
+ <p class="text-3xl font-bold text-yellow-400">Locked</p>
157
+ <p class="text-gray-400">For 2 years</p>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- Roadmap Section -->
164
+ <section id="roadmap" class="py-20 bg-black bg-opacity-50">
165
+ <div class="container mx-auto px-6">
166
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-yellow-400" data-aos="fade-up">Roadmap to the Moon</h2>
167
+ <div class="space-y-12">
168
+ <div class="grid md:grid-cols-2 gap-8 items-center" data-aos="fade-right">
169
+ <div class="text-right">
170
+ <h3 class="text-2xl font-bold text-yellow-400 mb-4">Phase 1: Launch</h3>
171
+ <p class="text-gray-300">Fair launch, community building, initial marketing push</p>
172
+ </div>
173
+ <div class="bg-yellow-400 w-8 h-8 rounded-full mx-auto relative">
174
+ <div class="absolute inset-0 bg-yellow-400 rounded-full animate-ping"></div>
175
+ </div>
176
+ </div>
177
+ <div class="grid md:grid-cols-2 gap-8 items-center" data-aos="fade-left">
178
+ <div class="bg-yellow-400 w-8 h-8 rounded-full mx-auto relative"></div>
179
+ <div>
180
+ <h3 class="text-2xl font-bold text-yellow-400 mb-4">Phase 2: Growth</h3>
181
+ <p class="text-gray-300">CEX listings, NFT collection, merch store</p>
182
+ </div>
183
+ </div>
184
+ <div class="grid md:grid-cols-2 gap-8 items-center" data-aos="fade-right">
185
+ <div class="text-right">
186
+ <h3 class="text-2xl font-bold text-yellow-400 mb-4">Phase 3: Moon</h3>
187
+ <p class="text-gray-300">Mainstream adoption, charity initiatives, ecosystem expansion</p>
188
+ </div>
189
+ <div class="bg-yellow-400 w-8 h-8 rounded-full mx-auto relative"></div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </section>
194
+
195
+ <!-- How to Buy Section -->
196
+ <section id="buy" class="py-20">
197
+ <div class="container mx-auto px-6">
198
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-yellow-400" data-aos="fade-up">How to Buy MoonDoge</h2>
199
+ <div class="grid md:grid-cols-4 gap-6">
200
+ <div class="bg-gray-800 p-6 rounded-xl text-center" data-aos="zoom-in">
201
+ <div class="text-4xl mb-4">1</div>
202
+ <h3 class="text-xl font-bold mb-2">Get Wallet</h3>
203
+ <p class="text-gray-400">Download MetaMask or Trust Wallet</p>
204
+ </div>
205
+ <div class="bg-gray-800 p-6 rounded-xl text-center" data-aos="zoom-in" data-aos-delay="100">
206
+ <div class="text-4xl mb-4">2</div>
207
+ <h3 class="text-xl font-bold mb-2">Buy ETH</h3>
208
+ <p class="text-gray-400">Purchase Ethereum from any exchange</p>
209
+ </div>
210
+ <div class="bg-gray-800 p-6 rounded-xl text-center" data-aos="zoom-in" data-aos-delay="200">
211
+ <div class="text-4xl mb-4">3</div>
212
+ <h3 class="text-xl font-bold mb-2">Connect</h3>
213
+ <p class="text-gray-400">Connect to Uniswap/PancakeSwap</p>
214
+ </div>
215
+ <div class="bg-gray-800 p-6 rounded-xl text-center" data-aos="zoom-in" data-aos-delay="300">
216
+ <div class="text-4xl mb-4">4</div>
217
+ <h3 class="text-xl font-bold mb-2">Swap</h3>
218
+ <p class="text-gray-400">Swap ETH for MoonDoge tokens</p>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </section>
223
+
224
+ <!-- Community Section -->
225
+ <section id="community" class="py-20 bg-black bg-opacity-50">
226
+ <div class="container mx-auto px-6">
227
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-yellow-400" data-aos="fade-up">Join Our Community</h2>
228
+ <div class="grid md:grid-cols-4 gap-6">
229
+ <a href="#" class="bg-gray-800 p-8 rounded-3xl text-center hover:bg-yellow-400 hover:text-black transition-all" data-aos="flip-up">
230
+ <i data-feather="message-circle" class="w-12 h-12 mx-auto mb-4"></i>
231
+ <h3 class="text-xl font-bold">Telegram</h3>
232
+ </a>
233
+ <a href="#" class="bg-gray-800 p-8 rounded-3xl text-center hover:bg-yellow-400 hover:text-black transition-all" data-aos="flip-up" data-aos-delay="100">
234
+ <i data-feather="twitter" class="w-12 h-12 mx-auto mb-4"></i>
235
+ <h3 class="text-xl font-bold">Twitter</h3>
236
+ </a>
237
+ <a href="#" class="bg-gray-800 p-8 rounded-3xl text-center hover:bg-yellow-400 hover:text-black transition-all" data-aos="flip-up" data-aos-delay="200">
238
+ <i data-feather="instagram" class="w-12 h-12 mx-auto mb-4"></i>
239
+ <h3 class="text-xl font-bold">Instagram</h3>
240
+ </a>
241
+ <a href="#" class="bg-gray-800 p-8 rounded-3xl text-center hover:bg-yellow-400 hover:text-black transition-all" data-aos="flip-up" data-aos-delay="300">
242
+ <i data-feather="discord" class="w-12 h-12 mx-auto mb-4"></i>
243
+ <h3 class="text-xl font-bold">Discord</h3>
244
+ </a>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Footer -->
250
+ <footer class="py-12 bg-black">
251
+ <div class="container mx-auto px-6">
252
+ <div class="flex flex-col md:flex-row justify-between items-center">
253
+ <div class="flex items-center space-x-2 mb-6 md:mb-0">
254
+ <img src="http://static.photos/gaming/200x200/42" alt="MoonDoge Logo" class="w-8 h-8 rounded-full">
255
+ <span class="text-xl font-bold text-yellow-400">MoonDoge</span>
256
+ </div>
257
+ <div class="flex space-x-6">
258
+ <a href="#" class="text-gray-400 hover:text-yellow-400"><i data-feather="twitter"></i></a>
259
+ <a href="#" class="text-gray-400 hover:text-yellow-400"><i data-feather="message-circle"></i></a>
260
+ <a href="#" class="text-gray-400 hover:text-yellow-400"><i data-feather="instagram"></i></a>
261
+ <a href="#" class="text-gray-400 hover:text-yellow-400"><i data-feather="discord"></i></a>
262
+ </div>
263
+ </div>
264
+ <div class="text-center text-gray-400 mt-8">
265
+ <p>© 2024 MoonDoge. This is a meme coin. Invest at your own risk. Not financial advice.</p>
266
+ </div>
267
+ </div>
268
+ </footer>
269
+
270
+ <script>
271
+ AOS.init();
272
+ feather.replace();
273
+
274
+ // Vanta.js background
275
+ VANTA.GLOBE({
276
+ el: "#vanta-bg",
277
+ mouseControls: true,
278
+ touchControls: true,
279
+ gyroControls: false,
280
+ minHeight: 200.00,
281
+ minWidth: 200.00,
282
+ scale: 1.00,
283
+ scaleMobile: 1.00,
284
+ color: 0xffeaa7,
285
+ backgroundColor: 0x111827,
286
+ size: 0.8
287
+ });
288
+ </script>
289
+ </body>
290
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Build me a memecoin website