chiminaca commited on
Commit
b22b011
·
verified ·
1 Parent(s): 96401ea

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +654 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: U Memecoin
3
- emoji: 👁
4
- colorFrom: pink
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: u-memecoin
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: green
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,654 @@
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>MEMEVERSE | The Next 20x SOL MemeCoin</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik+Mono+One&display=swap');
11
+
12
+ body {
13
+ background-color: #0f0e17;
14
+ font-family: 'Press Start 2P', cursive;
15
+ color: #fff;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .pixel-art {
20
+ image-rendering: pixelated;
21
+ image-rendering: -moz-crisp-edges;
22
+ image-rendering: crisp-edges;
23
+ }
24
+
25
+ .glow {
26
+ animation: glow 2s ease-in-out infinite alternate;
27
+ }
28
+
29
+ @keyframes glow {
30
+ from {
31
+ text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00f7ff, 0 0 20px #00f7ff;
32
+ }
33
+ to {
34
+ text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00f7ff, 0 0 40px #00f7ff;
35
+ }
36
+ }
37
+
38
+ .coin-spin {
39
+ animation: spin 4s linear infinite;
40
+ }
41
+
42
+ @keyframes spin {
43
+ 0% { transform: rotateY(0deg); }
44
+ 100% { transform: rotateY(360deg); }
45
+ }
46
+
47
+ .pixel-border {
48
+ border: 4px solid #fff;
49
+ box-shadow: 8px 8px 0 rgba(255,255,255,0.3);
50
+ position: relative;
51
+ }
52
+
53
+ .pixel-border::before {
54
+ content: "";
55
+ position: absolute;
56
+ top: -8px;
57
+ left: -8px;
58
+ right: -8px;
59
+ bottom: -8px;
60
+ border: 4px solid #ff00e6;
61
+ z-index: -1;
62
+ }
63
+
64
+ .btn-pixel {
65
+ position: relative;
66
+ display: inline-block;
67
+ padding: 15px 30px;
68
+ color: white;
69
+ text-transform: uppercase;
70
+ letter-spacing: 4px;
71
+ text-decoration: none;
72
+ font-size: 12px;
73
+ overflow: hidden;
74
+ transition: 0.2s;
75
+ border: none;
76
+ background: #ff00e6;
77
+ box-shadow: 5px 5px 0px #fff;
78
+ }
79
+
80
+ .btn-pixel:hover {
81
+ box-shadow: none;
82
+ transform: translate(5px, 5px);
83
+ transition: all 0.2s ease;
84
+ cursor: pointer;
85
+ }
86
+
87
+ .meme-char {
88
+ transition: all 0.3s ease;
89
+ }
90
+
91
+ .meme-char:hover {
92
+ transform: scale(1.1) rotate(5deg);
93
+ filter: drop-shadow(0 0 10px #ff00e6);
94
+ }
95
+
96
+ .roadmap-item {
97
+ position: relative;
98
+ padding-left: 40px;
99
+ margin-bottom: 30px;
100
+ }
101
+
102
+ .roadmap-item::before {
103
+ content: "";
104
+ position: absolute;
105
+ left: 0;
106
+ top: 0;
107
+ width: 30px;
108
+ height: 30px;
109
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff00e6"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
110
+ background-size: contain;
111
+ }
112
+
113
+ .countdown-box {
114
+ background: rgba(255,255,255,0.1);
115
+ border: 3px solid #fff;
116
+ padding: 10px;
117
+ margin: 0 5px;
118
+ min-width: 80px;
119
+ }
120
+
121
+ .tokenomics-item {
122
+ position: relative;
123
+ padding-left: 30px;
124
+ margin-bottom: 15px;
125
+ }
126
+
127
+ .tokenomics-item::before {
128
+ content: "■";
129
+ position: absolute;
130
+ left: 0;
131
+ color: #ff00e6;
132
+ font-size: 20px;
133
+ }
134
+ </style>
135
+ </head>
136
+ <body class="min-h-screen">
137
+ <!-- Header -->
138
+ <header class="py-6 px-4 md:px-10 lg:px-20 relative overflow-hidden">
139
+ <div class="container mx-auto flex justify-between items-center">
140
+ <div class="flex items-center">
141
+ <img src="https://i.imgur.com/JQ9w7X5.png" alt="MEMEVERSE Logo" class="h-16 w-16 pixel-art">
142
+ <h1 class="text-2xl md:text-3xl ml-4 glow">MEMEVERSE</h1>
143
+ </div>
144
+ <nav class="hidden md:block">
145
+ <ul class="flex space-x-8">
146
+ <li><a href="#about" class="hover:text-pink-400 transition">ABOUT</a></li>
147
+ <li><a href="#tokenomics" class="hover:text-pink-400 transition">TOKENOMICS</a></li>
148
+ <li><a href="#roadmap" class="hover:text-pink-400 transition">ROADMAP</a></li>
149
+ <li><a href="#buy" class="hover:text-pink-400 transition">HOW TO BUY</a></li>
150
+ </ul>
151
+ </nav>
152
+ <button class="md:hidden text-2xl">
153
+ <i class="fas fa-bars"></i>
154
+ </button>
155
+ </div>
156
+
157
+ <!-- Floating pixel characters -->
158
+ <img src="https://i.imgur.com/8QZqX9k.png" alt="Pixel character" class="absolute top-20 left-10 w-24 h-24 pixel-art meme-char" style="transform: rotate(-15deg);">
159
+ <img src="https://i.imgur.com/5t6sL9p.png" alt="Pixel character" class="absolute top-1/4 right-20 w-20 h-20 pixel-art meme-char" style="transform: rotate(10deg);">
160
+ <img src="https://i.imgur.com/3vQx7Yj.png" alt="Pixel character" class="absolute bottom-10 left-1/4 w-16 h-16 pixel-art meme-char" style="transform: rotate(-5deg);">
161
+ </header>
162
+
163
+ <!-- Hero Section -->
164
+ <section class="py-20 px-4 md:px-10 lg:px-20 relative overflow-hidden">
165
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
166
+ <div class="md:w-1/2 mb-10 md:mb-0 z-10">
167
+ <h2 class="text-3xl md:text-5xl lg:text-6xl mb-6 leading-tight">
168
+ THE NEXT <span class="text-pink-400">20x</span> MEME COIN ON <span class="text-green-400">SOLANA</span>
169
+ </h2>
170
+ <p class="text-lg mb-8 opacity-80">
171
+ Join the MEMEVERSE revolution! Our pixel-powered metaverse is taking over Solana.
172
+ Early investors become legends. Don't miss your chance to 20x your bag!
173
+ </p>
174
+ <div class="flex flex-col sm:flex-row gap-4">
175
+ <button class="btn-pixel">
176
+ BUY NOW <i class="fas fa-rocket ml-2"></i>
177
+ </button>
178
+ <button class="btn-pixel bg-blue-500">
179
+ JOIN TG <i class="fab fa-telegram ml-2"></i>
180
+ </button>
181
+ </div>
182
+
183
+ <div class="mt-10">
184
+ <h3 class="text-xl mb-4">PRESALE ENDS IN:</h3>
185
+ <div class="flex">
186
+ <div class="countdown-box text-center">
187
+ <div class="text-3xl font-bold" id="days">03</div>
188
+ <div class="text-sm">DAYS</div>
189
+ </div>
190
+ <div class="countdown-box text-center">
191
+ <div class="text-3xl font-bold" id="hours">12</div>
192
+ <div class="text-sm">HOURS</div>
193
+ </div>
194
+ <div class="countdown-box text-center">
195
+ <div class="text-3xl font-bold" id="minutes">45</div>
196
+ <div class="text-sm">MIN</div>
197
+ </div>
198
+ <div class="countdown-box text-center">
199
+ <div class="text-3xl font-bold" id="seconds">30</div>
200
+ <div class="text-sm">SEC</div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="md:w-1/2 flex justify-center z-10">
207
+ <div class="relative">
208
+ <img src="https://i.imgur.com/JQ9w7X5.png" alt="MEMEVERSE Coin" class="w-64 h-64 pixel-art coin-spin">
209
+ <div class="absolute -bottom-10 -right-10 bg-pink-500 text-white px-4 py-2 rotate-6 pixel-border">
210
+ <span class="text-xl">20x POTENTIAL!</span>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Animated background elements -->
217
+ <div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
218
+ <div class="absolute top-20 right-20 w-40 h-40 border-4 border-white opacity-10"></div>
219
+ <div class="absolute bottom-40 left-40 w-20 h-20 border-4 border-pink-500 opacity-10"></div>
220
+ <div class="absolute top-1/3 left-1/4 w-32 h-32 border-4 border-blue-400 opacity-10"></div>
221
+ </div>
222
+ </section>
223
+
224
+ <!-- About Section -->
225
+ <section id="about" class="py-20 px-4 md:px-10 lg:px-20 bg-gray-900 relative overflow-hidden">
226
+ <div class="container mx-auto">
227
+ <h2 class="text-3xl md:text-4xl text-center mb-16">
228
+ WELCOME TO <span class="text-pink-400">MEMEVERSE</span>
229
+ </h2>
230
+
231
+ <div class="flex flex-col lg:flex-row items-center gap-12">
232
+ <div class="lg:w-1/2">
233
+ <div class="p-8 pixel-border bg-gray-800">
234
+ <h3 class="text-2xl mb-6 text-pink-400">WHAT IS MEMEVERSE?</h3>
235
+ <p class="mb-4">
236
+ MEMEVERSE is the first pixel-art metaverse meme coin on Solana that combines the nostalgia of 2D gaming with the explosive potential of crypto.
237
+ </p>
238
+ <p class="mb-4">
239
+ We're building more than just a token - we're creating a universe where holders become citizens of a vibrant, ever-expanding pixel world.
240
+ </p>
241
+ <p>
242
+ Early investors don't just get rich - they become legends in the MEMEVERSE lore!
243
+ </p>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="lg:w-1/2 grid grid-cols-2 gap-4">
248
+ <div class="p-4 pixel-border bg-gray-800 flex flex-col items-center">
249
+ <img src="https://i.imgur.com/8QZqX9k.png" alt="Pixel character" class="w-24 h-24 pixel-art mb-4">
250
+ <h4 class="text-lg mb-2">PIXEL POWER</h4>
251
+ <p class="text-sm text-center">Our 2D metaverse brings back classic gaming vibes with a crypto twist</p>
252
+ </div>
253
+ <div class="p-4 pixel-border bg-gray-800 flex flex-col items-center">
254
+ <img src="https://i.imgur.com/5t6sL9p.png" alt="Pixel character" class="w-24 h-24 pixel-art mb-4">
255
+ <h4 class="text-lg mb-2">20X POTENTIAL</h4>
256
+ <p class="text-sm text-center">Carefully designed tokenomics to maximize growth potential</p>
257
+ </div>
258
+ <div class="p-4 pixel-border bg-gray-800 flex flex-col items-center">
259
+ <img src="https://i.imgur.com/3vQx7Yj.png" alt="Pixel character" class="w-24 h-24 pixel-art mb-4">
260
+ <h4 class="text-lg mb-2">COMMUNITY FIRST</h4>
261
+ <p class="text-sm text-center">Your voice shapes the MEMEVERSE future through DAO voting</p>
262
+ </div>
263
+ <div class="p-4 pixel-border bg-gray-800 flex flex-col items-center">
264
+ <img src="https://i.imgur.com/JQ9w7X5.png" alt="MEMEVERSE Coin" class="w-24 h-24 pixel-art mb-4">
265
+ <h4 class="text-lg mb-2">SOLANA SPEED</h4>
266
+ <p class="text-sm text-center">Lightning-fast transactions with near-zero fees</p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </section>
272
+
273
+ <!-- Tokenomics Section -->
274
+ <section id="tokenomics" class="py-20 px-4 md:px-10 lg:px-20 relative overflow-hidden">
275
+ <div class="container mx-auto">
276
+ <h2 class="text-3xl md:text-4xl text-center mb-16">
277
+ <span class="text-pink-400">TOKENOMICS</span> THAT MAKE SENSE
278
+ </h2>
279
+
280
+ <div class="flex flex-col lg:flex-row gap-12 items-center">
281
+ <div class="lg:w-1/2">
282
+ <div class="p-8 pixel-border bg-gray-900">
283
+ <h3 class="text-2xl mb-6 text-pink-400">TOKEN DISTRIBUTION</h3>
284
+
285
+ <div class="mb-6">
286
+ <div class="flex justify-between mb-2">
287
+ <span>Presale (40%)</span>
288
+ <span>40%</span>
289
+ </div>
290
+ <div class="w-full bg-gray-700 h-4">
291
+ <div class="bg-pink-500 h-4" style="width: 40%"></div>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="mb-6">
296
+ <div class="flex justify-between mb-2">
297
+ <span>Liquidity (30%)</span>
298
+ <span>30%</span>
299
+ </div>
300
+ <div class="w-full bg-gray-700 h-4">
301
+ <div class="bg-blue-500 h-4" style="width: 30%"></div>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="mb-6">
306
+ <div class="flex justify-between mb-2">
307
+ <span>Marketing (15%)</span>
308
+ <span>15%</span>
309
+ </div>
310
+ <div class="w-full bg-gray-700 h-4">
311
+ <div class="bg-green-500 h-4" style="width: 15%"></div>
312
+ </div>
313
+ </div>
314
+
315
+ <div class="mb-6">
316
+ <div class="flex justify-between mb-2">
317
+ <span>Team (10%)</span>
318
+ <span>10%</span>
319
+ </div>
320
+ <div class="w-full bg-gray-700 h-4">
321
+ <div class="bg-yellow-500 h-4" style="width: 10%"></div>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="mb-6">
326
+ <div class="flex justify-between mb-2">
327
+ <span>Community Rewards (5%)</span>
328
+ <span>5%</span>
329
+ </div>
330
+ <div class="w-full bg-gray-700 h-4">
331
+ <div class="bg-purple-500 h-4" style="width: 5%"></div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="lg:w-1/2">
338
+ <div class="p-8 pixel-border bg-gray-900">
339
+ <h3 class="text-2xl mb-6 text-pink-400">WHY INVEST?</h3>
340
+
341
+ <div class="tokenomics-item">
342
+ <h4 class="text-lg mb-2">LOW TAX, HIGH REWARDS</h4>
343
+ <p>Only 5% tax (3% liquidity, 2% marketing) ensures smooth trading while funding growth</p>
344
+ </div>
345
+
346
+ <div class="tokenomics-item">
347
+ <h4 class="text-lg mb-2">LOCKED LIQUIDITY</h4>
348
+ <p>Initial liquidity locked for 6 months, with plans to extend based on community vote</p>
349
+ </div>
350
+
351
+ <div class="tokenomics-item">
352
+ <h4 class="text-lg mb-2">CONTRACT RENOUNCED</h4>
353
+ <p>Full transparency with renounced contract after launch</p>
354
+ </div>
355
+
356
+ <div class="tokenomics-item">
357
+ <h4 class="text-lg mb-2">COMMUNITY DRIVEN</h4>
358
+ <p>Major decisions made by token holders through snapshot voting</p>
359
+ </div>
360
+
361
+ <div class="tokenomics-item">
362
+ <h4 class="text-lg mb-2">DEFLATIONARY MECHANICS</h4>
363
+ <p>Regular token burns from transaction fees increase scarcity over time</p>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Roadmap Section -->
372
+ <section id="roadmap" class="py-20 px-4 md:px-10 lg:px-20 bg-gray-900 relative overflow-hidden">
373
+ <div class="container mx-auto">
374
+ <h2 class="text-3xl md:text-4xl text-center mb-16">
375
+ OUR <span class="text-pink-400">PIXEL-POWERED</span> JOURNEY
376
+ </h2>
377
+
378
+ <div class="relative">
379
+ <!-- Timeline line -->
380
+ <div class="hidden md:block absolute left-1/2 top-0 h-full w-1 bg-pink-500 transform -translate-x-1/2"></div>
381
+
382
+ <div class="space-y-16">
383
+ <!-- Phase 1 -->
384
+ <div class="flex flex-col md:flex-row items-center">
385
+ <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 text-right">
386
+ <div class="p-6 pixel-border bg-gray-800">
387
+ <h3 class="text-2xl text-pink-400 mb-4">PHASE 1: LAUNCH</h3>
388
+ <ul class="space-y-2">
389
+ <li class="roadmap-item">Token creation & smart contract audit</li>
390
+ <li class="roadmap-item">Presale on PinkSale</li>
391
+ <li class="roadmap-item">DEX listing (Raydium)</li>
392
+ <li class="roadmap-item">Community building</li>
393
+ <li class="roadmap-item">First 1000 holders</li>
394
+ </ul>
395
+ </div>
396
+ </div>
397
+ <div class="md:w-1/2 flex justify-center">
398
+ <div class="relative">
399
+ <div class="w-40 h-40 bg-pink-500 rounded-full flex items-center justify-center pixel-border">
400
+ <span class="text-xl">Q1 2023</span>
401
+ </div>
402
+ <img src="https://i.imgur.com/8QZqX9k.png" alt="Pixel character" class="absolute -top-10 -right-10 w-20 h-20 pixel-art">
403
+ </div>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Phase 2 -->
408
+ <div class="flex flex-col md:flex-row items-center">
409
+ <div class="md:w-1/2 order-1 md:pl-16 mb-8 md:mb-0">
410
+ <div class="p-6 pixel-border bg-gray-800">
411
+ <h3 class="text-2xl text-pink-400 mb-4">PHASE 2: GROWTH</h3>
412
+ <ul class="space-y-2">
413
+ <li class="roadmap-item">CEX listings (Gate.io, MEXC)</li>
414
+ <li class="roadmap-item">Marketing push (influencers, AMAs)</li>
415
+ <li class="roadmap-item">First MEMEVERSE mini-game release</li>
416
+ <li class="roadmap-item">10,000+ holders</li>
417
+ <li class="roadmap-item">Merch store launch</li>
418
+ </ul>
419
+ </div>
420
+ </div>
421
+ <div class="md:w-1/2 order-0 md:order-2 flex justify-center">
422
+ <div class="relative">
423
+ <div class="w-40 h-40 bg-blue-500 rounded-full flex items-center justify-center pixel-border">
424
+ <span class="text-xl">Q2 2023</span>
425
+ </div>
426
+ <img src="https://i.imgur.com/5t6sL9p.png" alt="Pixel character" class="absolute -bottom-10 -left-10 w-20 h-20 pixel-art">
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <!-- Phase 3 -->
432
+ <div class="flex flex-col md:flex-row items-center">
433
+ <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 text-right">
434
+ <div class="p-6 pixel-border bg-gray-800">
435
+ <h3 class="text-2xl text-pink-400 mb-4">PHASE 3: EXPANSION</h3>
436
+ <ul class="space-y-2">
437
+ <li class="roadmap-item">MEMEVERSE metaverse alpha release</li>
438
+ <li class="roadmap-item">NFT character collection</li>
439
+ <li class="roadmap-item">Top 10 CEX listing</li>
440
+ <li class="roadmap-item">50,000+ holders</li>
441
+ <li class="roadmap-item">DAO governance implementation</li>
442
+ </ul>
443
+ </div>
444
+ </div>
445
+ <div class="md:w-1/2 flex justify-center">
446
+ <div class="relative">
447
+ <div class="w-40 h-40 bg-green-500 rounded-full flex items-center justify-center pixel-border">
448
+ <span class="text-xl">Q3 2023</span>
449
+ </div>
450
+ <img src="https://i.imgur.com/3vQx7Yj.png" alt="Pixel character" class="absolute -top-10 -right-10 w-20 h-20 pixel-art">
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <!-- Phase 4 -->
456
+ <div class="flex flex-col md:flex-row items-center">
457
+ <div class="md:w-1/2 order-1 md:pl-16 mb-8 md:mb-0">
458
+ <div class="p-6 pixel-border bg-gray-800">
459
+ <h3 class="text-2xl text-pink-400 mb-4">PHASE 4: DOMINATION</h3>
460
+ <ul class="space-y-2">
461
+ <li class="roadmap-item">Full MEMEVERSE game ecosystem</li>
462
+ <li class="roadmap-item">Play-to-earn mechanics</li>
463
+ <li class="roadmap-item">Binance/Kucoin listing</li>
464
+ <li class="roadmap-item">100,000+ holders</li>
465
+ <li class="roadmap-item">Top 100 market cap</li>
466
+ </ul>
467
+ </div>
468
+ </div>
469
+ <div class="md:w-1/2 order-0 md:order-2 flex justify-center">
470
+ <div class="relative">
471
+ <div class="w-40 h-40 bg-yellow-500 rounded-full flex items-center justify-center pixel-border">
472
+ <span class="text-xl">Q4 2023</span>
473
+ </div>
474
+ <img src="https://i.imgur.com/JQ9w7X5.png" alt="MEMEVERSE Coin" class="absolute -bottom-10 -left-10 w-20 h-20 pixel-art">
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </section>
482
+
483
+ <!-- How to Buy Section -->
484
+ <section id="buy" class="py-20 px-4 md:px-10 lg:px-20 relative overflow-hidden">
485
+ <div class="container mx-auto">
486
+ <h2 class="text-3xl md:text-4xl text-center mb-16">
487
+ HOW TO <span class="text-pink-400">BUY</span> $MEME
488
+ </h2>
489
+
490
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
491
+ <!-- Step 1 -->
492
+ <div class="p-6 pixel-border bg-gray-900 relative">
493
+ <div class="absolute -top-6 -left-6 w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center">
494
+ <span class="text-xl">1</span>
495
+ </div>
496
+ <h3 class="text-2xl mb-4 text-pink-400">GET SOLANA</h3>
497
+ <p class="mb-4">Buy SOL on any major exchange (Binance, Coinbase, Kraken) or use MoonPay/Ramp directly in Phantom wallet</p>
498
+ <div class="flex justify-center mt-6">
499
+ <img src="https://i.imgur.com/vhS4QZQ.png" alt="SOL Logo" class="w-16 h-16 pixel-art">
500
+ </div>
501
+ </div>
502
+
503
+ <!-- Step 2 -->
504
+ <div class="p-6 pixel-border bg-gray-900 relative">
505
+ <div class="absolute -top-6 -left-6 w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
506
+ <span class="text-xl">2</span>
507
+ </div>
508
+ <h3 class="text-2xl mb-4 text-pink-400">SET UP WALLET</h3>
509
+ <p class="mb-4">Download Phantom wallet (Chrome extension or mobile app). Send SOL to your wallet address</p>
510
+ <div class="flex justify-center mt-6">
511
+ <img src="https://i.imgur.com/7mQ5LqQ.png" alt="Phantom Logo" class="w-16 h-16 pixel-art">
512
+ </div>
513
+ </div>
514
+
515
+ <!-- Step 3 -->
516
+ <div class="p-6 pixel-border bg-gray-900 relative">
517
+ <div class="absolute -top-6 -left-6 w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
518
+ <span class="text-xl">3</span>
519
+ </div>
520
+ <h3 class="text-2xl mb-4 text-pink-400">BUY $MEME</h3>
521
+ <p class="mb-4">During presale: Connect wallet to PinkSale. After launch: Swap SOL for $MEME on Raydium or Jupiter</p>
522
+ <div class="flex justify-center mt-6">
523
+ <img src="https://i.imgur.com/JQ9w7X5.png" alt="MEMEVERSE Coin" class="w-16 h-16 pixel-art">
524
+ </div>
525
+ </div>
526
+ </div>
527
+
528
+ <div class="mt-16 text-center">
529
+ <h3 class="text-2xl mb-6">CONTRACT ADDRESS:</h3>
530
+ <div class="bg-gray-900 p-4 rounded-lg inline-block max-w-full overflow-x-auto">
531
+ <code class="text-sm md:text-base">7x8hZ... (coming soon)</code>
532
+ </div>
533
+ <p class="mt-4 text-sm opacity-70">Always verify contract address from official channels before buying</p>
534
+ </div>
535
+ </div>
536
+ </section>
537
+
538
+ <!-- Community Section -->
539
+ <section class="py-20 px-4 md:px-10 lg:px-20 bg-gray-900 relative overflow-hidden">
540
+ <div class="container mx-auto text-center">
541
+ <h2 class="text-3xl md:text-4xl mb-8">
542
+ JOIN THE <span class="text-pink-400">MEMEVERSE</span> COMMUNITY
543
+ </h2>
544
+ <p class="text-xl mb-12 max-w-3xl mx-auto">
545
+ Our community is the heart of MEMEVERSE. Join us to get the latest updates, memes, and alpha!
546
+ </p>
547
+
548
+ <div class="flex flex-wrap justify-center gap-6">
549
+ <a href="#" class="p-4 pixel-border bg-gray-800 hover:bg-pink-500 transition flex items-center">
550
+ <i class="fab fa-telegram text-3xl mr-3"></i>
551
+ <span>TELEGRAM</span>
552
+ </a>
553
+ <a href="#" class="p-4 pixel-border bg-gray-800 hover:bg-blue-400 transition flex items-center">
554
+ <i class="fab fa-twitter text-3xl mr-3"></i>
555
+ <span>TWITTER</span>
556
+ </a>
557
+ <a href="#" class="p-4 pixel-border bg-gray-800 hover:bg-purple-500 transition flex items-center">
558
+ <i class="fab fa-discord text-3xl mr-3"></i>
559
+ <span>DISCORD</span>
560
+ </a>
561
+ <a href="#" class="p-4 pixel-border bg-gray-800 hover:bg-red-500 transition flex items-center">
562
+ <i class="fab fa-youtube text-3xl mr-3"></i>
563
+ <span>YOUTUBE</span>
564
+ </a>
565
+ </div>
566
+
567
+ <div class="mt-16">
568
+ <h3 class="text-2xl mb-6">MEME OF THE DAY</h3>
569
+ <div class="p-6 pixel-border bg-gray-800 inline-block max-w-full">
570
+ <img src="https://i.imgur.com/LkZQq3G.png" alt="Meme" class="w-64 h-64 pixel-art">
571
+ <p class="mt-4">"When you buy $MEME at presale and check price after launch"</p>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </section>
576
+
577
+ <!-- Footer -->
578
+ <footer class="py-10 px-4 md:px-10 lg:px-20 bg-black text-center">
579
+ <div class="container mx-auto">
580
+ <div class="flex justify-center mb-6">
581
+ <img src="https://i.imgur.com/JQ9w7X5.png" alt="MEMEVERSE Logo" class="h-16 w-16 pixel-art">
582
+ </div>
583
+
584
+ <p class="mb-6">
585
+ MEMEVERSE is a community-driven meme token on Solana. Not financial advice. Do your own research.
586
+ </p>
587
+
588
+ <div class="flex justify-center space-x-6 mb-6">
589
+ <a href="#" class="text-xl hover:text-pink-400"><i class="fab fa-telegram"></i></a>
590
+ <a href="#" class="text-xl hover:text-pink-400"><i class="fab fa-twitter"></i></a>
591
+ <a href="#" class="text-xl hover:text-pink-400"><i class="fab fa-discord"></i></a>
592
+ <a href="#" class="text-xl hover:text-pink-400"><i class="fab fa-medium"></i></a>
593
+ </div>
594
+
595
+ <p class="text-sm opacity-70">
596
+ © 2023 MEMEVERSE. All rights reserved. Not affiliated with Minecraft or Roblox.
597
+ </p>
598
+ </div>
599
+ </footer>
600
+
601
+ <script>
602
+ // Countdown timer
603
+ function updateCountdown() {
604
+ const now = new Date();
605
+ const endDate = new Date();
606
+ endDate.setDate(now.getDate() + 3); // 3 days from now
607
+
608
+ const diff = endDate - now;
609
+
610
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
611
+ const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
612
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
613
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
614
+
615
+ document.getElementById('days').textContent = days.toString().padStart(2, '0');
616
+ document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
617
+ document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
618
+ document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
619
+ }
620
+
621
+ setInterval(updateCountdown, 1000);
622
+ updateCountdown();
623
+
624
+ // Animate meme characters on scroll
625
+ const memeChars = document.querySelectorAll('.meme-char');
626
+
627
+ function checkScroll() {
628
+ memeChars.forEach(char => {
629
+ const charPosition = char.getBoundingClientRect().top;
630
+ const screenPosition = window.innerHeight / 1.3;
631
+
632
+ if (charPosition < screenPosition) {
633
+ char.style.opacity = '1';
634
+ char.style.transform = 'translateY(0)';
635
+ }
636
+ });
637
+ }
638
+
639
+ window.addEventListener('scroll', checkScroll);
640
+ checkScroll();
641
+
642
+ // Smooth scrolling for navigation
643
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
644
+ anchor.addEventListener('click', function (e) {
645
+ e.preventDefault();
646
+
647
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
648
+ behavior: 'smooth'
649
+ });
650
+ });
651
+ });
652
+ </script>
653
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chiminaca/u-memecoin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
654
+ </html>