Hugging Face's logo

Spaces:
Groguru
/
eero
Running

App Files Community
Groguru commited on
Commit
1e183c0
·
verified ·
1 Parent(s): e367657

Tittle and artist name eeroEero make that obvious and title. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +521 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Eero
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: indigo
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: eero
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,521 @@
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>EERO - The Cutting Edge of Rap</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=Anton&family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ background-color: #000;
15
+ color: white;
16
+ overflow: hidden;
17
+ height: 100vh;
18
+ margin: 0;
19
+ perspective: 1000px;
20
+ }
21
+
22
+ .razor-font {
23
+ font-family: 'Anton', sans-serif;
24
+ letter-spacing: 2px;
25
+ }
26
+
27
+ .bebas-font {
28
+ font-family: 'Bebas Neue', cursive;
29
+ }
30
+
31
+ .page {
32
+ position: absolute;
33
+ width: 100%;
34
+ height: 100%;
35
+ transition: all 1s ease-in-out;
36
+ transform-origin: center center;
37
+ backface-visibility: hidden;
38
+ overflow: hidden;
39
+ }
40
+
41
+ .page.active {
42
+ transform: scale(1);
43
+ opacity: 1;
44
+ z-index: 10;
45
+ }
46
+
47
+ .page.inactive {
48
+ transform: scale(0.5);
49
+ opacity: 0;
50
+ z-index: 1;
51
+ }
52
+
53
+ .page.next {
54
+ transform: scale(1.5);
55
+ opacity: 0;
56
+ z-index: 1;
57
+ }
58
+
59
+ .razor-edge {
60
+ position: relative;
61
+ }
62
+
63
+ .razor-edge::after {
64
+ content: '';
65
+ position: absolute;
66
+ bottom: -5px;
67
+ left: 0;
68
+ width: 100%;
69
+ height: 3px;
70
+ background: linear-gradient(90deg, #ff0000, #ff6600, #ff0000);
71
+ transform: skewX(-45deg);
72
+ }
73
+
74
+ .razor-btn {
75
+ position: relative;
76
+ overflow: hidden;
77
+ transition: all 0.3s;
78
+ }
79
+
80
+ .razor-btn::before {
81
+ content: '';
82
+ position: absolute;
83
+ top: 0;
84
+ left: -100%;
85
+ width: 100%;
86
+ height: 100%;
87
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
88
+ transition: all 0.5s;
89
+ }
90
+
91
+ .razor-btn:hover::before {
92
+ left: 100%;
93
+ }
94
+
95
+ .vinyl {
96
+ animation: spin 5s linear infinite;
97
+ }
98
+
99
+ @keyframes spin {
100
+ 0% { transform: rotate(0deg); }
101
+ 100% { transform: rotate(360deg); }
102
+ }
103
+
104
+ .pulse {
105
+ animation: pulse 2s infinite;
106
+ }
107
+
108
+ @keyframes pulse {
109
+ 0% { transform: scale(1); }
110
+ 50% { transform: scale(1.05); }
111
+ 100% { transform: scale(1); }
112
+ }
113
+
114
+ .graffiti-bg {
115
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="50" font-family="Arial" font-size="20" fill="rgba(255,255,255,0.05)" transform="rotate(45)">RAZOR</text></svg>');
116
+ background-repeat: repeat;
117
+ }
118
+
119
+ .razor-cut {
120
+ clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
121
+ }
122
+
123
+ .scroll-hint {
124
+ animation: bounce 2s infinite;
125
+ }
126
+
127
+ @keyframes bounce {
128
+ 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
129
+ 40% {transform: translateY(-20px);}
130
+ 60% {transform: translateY(-10px);}
131
+ }
132
+ </style>
133
+ </head>
134
+ <body class="graffiti-bg">
135
+ <!-- Page 1: Hero Section -->
136
+ <div class="page active" id="page1">
137
+ <div class="h-full w-full flex flex-col justify-center items-center text-center px-4 relative razor-cut bg-gradient-to-b from-black to-red-900">
138
+ <div class="absolute top-4 right-4 text-red-500">
139
+ <span class="text-sm">COMING SOON</span>
140
+ </div>
141
+
142
+ <div class="mb-8 pulse">
143
+ <div class="w-40 h-40 md:w-60 md:h-60 bg-black rounded-full border-8 border-red-500 flex items-center justify-center relative overflow-hidden">
144
+ <div class="absolute w-full h-full bg-gradient-to-br from-transparent via-red-900 to-transparent opacity-50"></div>
145
+ <div class="w-16 h-16 md:w-24 md:h-24 bg-white rounded-full z-10"></div>
146
+ <div class="vinyl absolute w-32 h-32 md:w-48 md:h-48 rounded-full bg-black border-4 border-white flex items-center justify-center">
147
+ <div class="w-24 h-24 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-red-500 to-black"></div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <h1 class="text-6xl md:text-8xl font-bold mb-2 razor-font text-red-500">EERO</h1>
153
+ <p class="text-xl md:text-2xl mb-6 bebas-font">THE CUTTING EDGE OF RAP</p>
154
+
155
+ <div class="flex space-x-4 mb-12">
156
+ <a href="#" class="razor-btn bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold transition-all duration-300 transform hover:scale-105">
157
+ PRE-SAVE
158
+ </a>
159
+ <a href="#" class="razor-btn bg-transparent border-2 border-white hover:bg-white hover:text-black text-white px-6 py-3 rounded-full font-bold transition-all duration-300 transform hover:scale-105">
160
+ TOUR DATES
161
+ </a>
162
+ </div>
163
+
164
+ <div class="absolute bottom-8 left-0 right-0 flex justify-center scroll-hint">
165
+ <div class="text-center">
166
+ <p class="text-sm mb-2">ZOOM IN TO EXPLORE</p>
167
+ <i class="fas fa-chevron-down text-xl animate-bounce"></i>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Page 2: Bio Section -->
174
+ <div class="page inactive" id="page2">
175
+ <div class="h-full w-full bg-gradient-to-b from-black to-gray-900 p-8 md:p-12 flex flex-col md:flex-row items-center">
176
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
177
+ <h2 class="text-4xl md:text-6xl font-bold mb-6 razor-font text-red-500 razor-edge">THE STORY</h2>
178
+ <p class="text-lg md:text-xl mb-6 leading-relaxed">
179
+ Born in the concrete jungle, EERO cut his teeth on the streets, turning struggle into art.
180
+ His razor-sharp lyrics slice through the noise, delivering raw truth with a flow that cuts deep.
181
+ </p>
182
+ <p class="text-lg md:text-xl mb-6 leading-relaxed">
183
+ From underground battles to viral fame, EERO's journey is one of relentless hustle and undeniable talent.
184
+ His debut album "Cut Throat" is set to redefine the rap game.
185
+ </p>
186
+ <div class="flex space-x-4 mt-8">
187
+ <a href="#" class="razor-btn bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold transition-all duration-300 transform hover:scale-105">
188
+ FULL BIO
189
+ </a>
190
+ </div>
191
+ </div>
192
+ <div class="md:w-1/2 relative">
193
+ <div class="relative">
194
+ <div class="w-full h-96 bg-gray-800 rounded-lg overflow-hidden">
195
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
196
+ <div class="absolute inset-0 flex items-center justify-center">
197
+ <div class="text-center p-8">
198
+ <i class="fas fa-quote-left text-red-500 text-4xl mb-4"></i>
199
+ <p class="text-xl italic mb-4">"I don't rap, I perform audio surgery. Every bar is a scalpel, every hook is a suture."</p>
200
+ <p class="text-red-500 font-bold">- EERO</p>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-red-500 rounded-full flex items-center justify-center text-black font-bold razor-font">
205
+ EERO
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="absolute bottom-8 left-0 right-0 flex justify-center scroll-hint">
211
+ <div class="text-center">
212
+ <p class="text-sm mb-2">ZOOM IN TO EXPLORE</p>
213
+ <i class="fas fa-chevron-down text-xl animate-bounce"></i>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- Page 3: Music Section -->
220
+ <div class="page inactive" id="page3">
221
+ <div class="h-full w-full bg-gradient-to-b from-black to-blue-900 p-8 md:p-12">
222
+ <h2 class="text-4xl md:text-6xl font-bold mb-12 razor-font text-red-500 text-center razor-edge">THE SOUND</h2>
223
+
224
+ <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
225
+ <!-- Track 1 -->
226
+ <div class="bg-black bg-opacity-50 rounded-xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300">
227
+ <div class="relative">
228
+ <div class="h-48 bg-gradient-to-r from-red-900 to-blue-900 flex items-center justify-center">
229
+ <div class="w-32 h-32 bg-black rounded-full border-4 border-white flex items-center justify-center vinyl">
230
+ <div class="w-24 h-24 rounded-full bg-gradient-to-br from-red-500 to-blue-500"></div>
231
+ </div>
232
+ </div>
233
+ <div class="absolute top-4 left-4 bg-red-500 text-black px-3 py-1 rounded-full text-sm font-bold">
234
+ NEW
235
+ </div>
236
+ </div>
237
+ <div class="p-6">
238
+ <h3 class="text-2xl font-bold mb-2 razor-font">CUT THROAT</h3>
239
+ <p class="text-gray-400 mb-4">Lead single from the debut album</p>
240
+ <div class="flex justify-between items-center">
241
+ <div class="flex space-x-2">
242
+ <button class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center hover:bg-red-600">
243
+ <i class="fas fa-play"></i>
244
+ </button>
245
+ <button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600">
246
+ <i class="fas fa-plus"></i>
247
+ </button>
248
+ </div>
249
+ <span class="text-sm">2:45</span>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Track 2 -->
255
+ <div class="bg-black bg-opacity-50 rounded-xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300">
256
+ <div class="h-48 bg-gradient-to-r from-blue-900 to-purple-900 flex items-center justify-center">
257
+ <div class="w-32 h-32 bg-black rounded-full border-4 border-white flex items-center justify-center vinyl">
258
+ <div class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-500"></div>
259
+ </div>
260
+ </div>
261
+ <div class="p-6">
262
+ <h3 class="text-2xl font-bold mb-2 razor-font">STREET SURGERY</h3>
263
+ <p class="text-gray-400 mb-4">Feat. MC SCALPEL</p>
264
+ <div class="flex justify-between items-center">
265
+ <div class="flex space-x-2">
266
+ <button class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center hover:bg-red-600">
267
+ <i class="fas fa-play"></i>
268
+ </button>
269
+ <button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600">
270
+ <i class="fas fa-plus"></i>
271
+ </button>
272
+ </div>
273
+ <span class="text-sm">3:12</span>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Track 3 -->
279
+ <div class="bg-black bg-opacity-50 rounded-xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300">
280
+ <div class="h-48 bg-gradient-to-r from-purple-900 to-red-900 flex items-center justify-center">
281
+ <div class="w-32 h-32 bg-black rounded-full border-4 border-white flex items-center justify-center vinyl">
282
+ <div class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-red-500"></div>
283
+ </div>
284
+ </div>
285
+ <div class="p-6">
286
+ <h3 class="text-2xl font-bold mb-2 razor-font">RAZOR'S EDGE</h3>
287
+ <p class="text-gray-400 mb-4">Official Music Video</p>
288
+ <div class="flex justify-between items-center">
289
+ <div class="flex space-x-2">
290
+ <button class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center hover:bg-red-600">
291
+ <i class="fas fa-play"></i>
292
+ </button>
293
+ <button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600">
294
+ <i class="fas fa-plus"></i>
295
+ </button>
296
+ </div>
297
+ <span class="text-sm">4:20</span>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Track 4 -->
303
+ <div class="bg-black bg-opacity-50 rounded-xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300">
304
+ <div class="h-48 bg-gradient-to-r from-gray-900 to-yellow-600 flex items-center justify-center">
305
+ <div class="w-32 h-32 bg-black rounded-full border-4 border-white flex items-center justify-center vinyl">
306
+ <div class="w-24 h-24 rounded-full bg-gradient-to-br from-yellow-500 to-gray-700"></div>
307
+ </div>
308
+ </div>
309
+ <div class="p-6">
310
+ <h3 class="text-2xl font-bold mb-2 razor-font">GOLD CHAINZ</h3>
311
+ <p class="text-gray-400 mb-4">Prod. by DJ SLICE</p>
312
+ <div class="flex justify-between items-center">
313
+ <div class="flex space-x-2">
314
+ <button class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center hover:bg-red-600">
315
+ <i class="fas fa-play"></i>
316
+ </button>
317
+ <button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600">
318
+ <i class="fas fa-plus"></i>
319
+ </button>
320
+ </div>
321
+ <span class="text-sm">3:33</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="absolute bottom-8 left-0 right-0 flex justify-center scroll-hint">
328
+ <div class="text-center">
329
+ <p class="text-sm mb-2">ZOOM IN TO EXPLORE</p>
330
+ <i class="fas fa-chevron-down text-xl animate-bounce"></i>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Page 4: Contact Section -->
337
+ <div class="page inactive" id="page4">
338
+ <div class="h-full w-full bg-gradient-to-b from-black to-green-900 p-8 md:p-12 flex flex-col md:flex-row items-center">
339
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
340
+ <h2 class="text-4xl md:text-6xl font-bold mb-6 razor-font text-red-500 razor-edge">STAY SHARP</h2>
341
+ <p class="text-lg md:text-xl mb-6 leading-relaxed">
342
+ Join RAZOR's inner circle. Get exclusive content, early access to tracks, and VIP treatment.
343
+ </p>
344
+
345
+ <form class="space-y-4">
346
+ <div>
347
+ <input type="text" placeholder="Your Name" class="w-full bg-black bg-opacity-50 border-b-2 border-red-500 py-3 px-4 focus:outline-none focus:border-red-300">
348
+ </div>
349
+ <div>
350
+ <input type="email" placeholder="Your Email" class="w-full bg-black bg-opacity-50 border-b-2 border-red-500 py-3 px-4 focus:outline-none focus:border-red-300">
351
+ </div>
352
+ <div>
353
+ <select class="w-full bg-black bg-opacity-50 border-b-2 border-red-500 py-3 px-4 focus:outline-none focus:border-red-300">
354
+ <option>Select your city</option>
355
+ <option>New York</option>
356
+ <option>Los Angeles</option>
357
+ <option>Chicago</option>
358
+ <option>Houston</option>
359
+ <option>Other</option>
360
+ </select>
361
+ </div>
362
+ <button type="submit" class="razor-btn w-full bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold transition-all duration-300 transform hover:scale-105">
363
+ CUT TO THE FRONT
364
+ </button>
365
+ </form>
366
+
367
+ <div class="mt-8">
368
+ <h3 class="text-xl font-bold mb-4">FOLLOW THE BLADE</h3>
369
+ <div class="flex space-x-4">
370
+ <a href="#" class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-red-500 transition-all">
371
+ <i class="fab fa-instagram text-xl"></i>
372
+ </a>
373
+ <a href="#" class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-red-500 transition-all">
374
+ <i class="fab fa-twitter text-xl"></i>
375
+ </a>
376
+ <a href="#" class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-red-500 transition-all">
377
+ <i class="fab fa-tiktok text-xl"></i>
378
+ </a>
379
+ <a href="#" class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-red-500 transition-all">
380
+ <i class="fab fa-youtube text-xl"></i>
381
+ </a>
382
+ <a href="#" class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-red-500 transition-all">
383
+ <i class="fab fa-spotify text-xl"></i>
384
+ </a>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="md:w-1/2 relative">
390
+ <div class="bg-black bg-opacity-50 p-8 rounded-lg">
391
+ <h3 class="text-2xl font-bold mb-6 razor-font">UPCOMING SHOWS</h3>
392
+
393
+ <div class="space-y-6">
394
+ <div class="flex items-start">
395
+ <div class="bg-red-500 text-black px-4 py-2 rounded-full font-bold mr-4 razor-font">
396
+ OCT 13
397
+ </div>
398
+ <div>
399
+ <h4 class="font-bold text-lg">Brooklyn Steel</h4>
400
+ <p class="text-gray-400">New York, NY</p>
401
+ </div>
402
+ </div>
403
+
404
+ <div class="flex items-start">
405
+ <div class="bg-red-500 text-black px-4 py-2 rounded-full font-bold mr-4 razor-font">
406
+ OCT 20
407
+ </div>
408
+ <div>
409
+ <h4 class="font-bold text-lg">The Roxy</h4>
410
+ <p class="text-gray-400">Los Angeles, CA</p>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="flex items-start">
415
+ <div class="bg-red-500 text-black px-4 py-2 rounded-full font-bold mr-4 razor-font">
416
+ NOV 5
417
+ </div>
418
+ <div>
419
+ <h4 class="font-bold text-lg">House of Blues</h4>
420
+ <p class="text-gray-400">Chicago, IL</p>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="flex items-start">
425
+ <div class="bg-red-500 text-black px-4 py-2 rounded-full font-bold mr-4 razor-font">
426
+ NOV 18
427
+ </div>
428
+ <div>
429
+ <h4 class="font-bold text-lg">The Fillmore</h4>
430
+ <p class="text-gray-400">San Francisco, CA</p>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="flex items-start">
435
+ <div class="bg-red-500 text-black px-4 py-2 rounded-full font-bold mr-4 razor-font">
436
+ DEC 3
437
+ </div>
438
+ <div>
439
+ <h4 class="font-bold text-lg">The Masquerade</h4>
440
+ <p class="text-gray-400">Atlanta, GA</p>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <a href="#" class="razor-btn inline-block mt-8 bg-transparent border-2 border-white hover:bg-white hover:text-black text-white px-6 py-3 rounded-full font-bold transition-all duration-300 transform hover:scale-105">
446
+ VIEW ALL DATES
447
+ </a>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <script>
454
+ document.addEventListener('DOMContentLoaded', function() {
455
+ const pages = document.querySelectorAll('.page');
456
+ let currentPage = 0;
457
+
458
+ // Handle zoom in/out navigation
459
+ function navigateToPage(index) {
460
+ pages.forEach((page, i) => {
461
+ if (i === index) {
462
+ page.classList.remove('inactive', 'next');
463
+ page.classList.add('active');
464
+ } else if (i < index) {
465
+ page.classList.remove('active', 'next');
466
+ page.classList.add('inactive');
467
+ } else {
468
+ page.classList.remove('active', 'inactive');
469
+ page.classList.add('next');
470
+ }
471
+ });
472
+ currentPage = index;
473
+ }
474
+
475
+ // Mouse wheel zoom navigation
476
+ document.addEventListener('wheel', function(e) {
477
+ e.preventDefault();
478
+
479
+ if (e.deltaY > 0 && currentPage < pages.length - 1) {
480
+ navigateToPage(currentPage + 1);
481
+ } else if (e.deltaY < 0 && currentPage > 0) {
482
+ navigateToPage(currentPage - 1);
483
+ }
484
+ }, { passive: false });
485
+
486
+ // Touch events for mobile
487
+ let startY;
488
+
489
+ document.addEventListener('touchstart', function(e) {
490
+ startY = e.touches[0].clientY;
491
+ }, { passive: true });
492
+
493
+ document.addEventListener('touchmove', function(e) {
494
+ e.preventDefault();
495
+ const y = e.touches[0].clientY;
496
+ const diff = startY - y;
497
+
498
+ if (diff > 50 && currentPage < pages.length - 1) {
499
+ navigateToPage(currentPage + 1);
500
+ startY = y;
501
+ } else if (diff < -50 && currentPage > 0) {
502
+ navigateToPage(currentPage - 1);
503
+ startY = y;
504
+ }
505
+ }, { passive: false });
506
+
507
+ // Keyboard navigation
508
+ document.addEventListener('keydown', function(e) {
509
+ if (e.key === 'ArrowDown' && currentPage < pages.length - 1) {
510
+ navigateToPage(currentPage + 1);
511
+ } else if (e.key === 'ArrowUp' && currentPage > 0) {
512
+ navigateToPage(currentPage - 1);
513
+ }
514
+ });
515
+
516
+ // Initial setup
517
+ navigateToPage(0);
518
+ });
519
+ </script>
520
+ <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=Groguru/eero" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
521
+ </html>