Hugging Face's logo

Spaces:
zamply
/
try-to-make-fun
Running

App Files Community
zamply commited on
Commit
3758af5
·
verified ·
1 Parent(s): e7b3b6c

Cultural Context: Imagine a 2110 underground jazz club in a cyberpunk city, where jazz musicians and trip hop producers collaborate, their music paired with visuals of flickering neon signs and retro-futuristic cityscapes, capturing the moody allure of 2025’s video trends.

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +420 -18
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Try To Make Fun
3
- emoji: 📉
4
  colorFrom: blue
5
- colorTo: yellow
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: try-to-make-fun
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: blue
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,421 @@
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>Neon Mirage | 2110 Cyberjazz Collective</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ body {
14
+ font-family: 'Space Grotesk', sans-serif;
15
+ background-color: #0a0a12;
16
+ color: #e0e0ff;
17
+ overflow-x: hidden;
18
+ }
19
+ .neon-text {
20
+ text-shadow: 0 0 8px #ff00ff, 0 0 16px #00ffff;
21
+ }
22
+ .neon-border {
23
+ box-shadow: 0 0 8px #ff00ff, 0 0 16px #00ffff, inset 0 0 8px #ff00ff, inset 0 0 16px #00ffff;
24
+ }
25
+ .scanlines {
26
+ position: fixed;
27
+ top: 0;
28
+ left: 0;
29
+ width: 100%;
30
+ height: 100%;
31
+ background: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
32
+ background-size: 100% 3px;
33
+ pointer-events: none;
34
+ z-index: 9999;
35
+ opacity: 0.3;
36
+ }
37
+ .glitch {
38
+ animation: glitch-effect 5s infinite linear alternate-reverse;
39
+ }
40
+ @keyframes glitch-effect {
41
+ 0% { transform: translate(0); }
42
+ 20% { transform: translate(-3px, 3px); }
43
+ 40% { transform: translate(-3px, -3px); }
44
+ 60% { transform: translate(3px, 3px); }
45
+ 80% { transform: translate(3px, -3px); }
46
+ 100% { transform: translate(0); }
47
+ }
48
+ .flicker {
49
+ animation: flicker 3s infinite alternate;
50
+ }
51
+ @keyframes flicker {
52
+ 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
53
+ 20%, 24%, 55% { opacity: 0.3; }
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="relative">
58
+ <div class="scanlines"></div>
59
+ <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/20 to-transparent opacity-30"></div>
60
+
61
+ <!-- Main Navigation -->
62
+ <nav class="fixed w-full z-50 backdrop-blur-md bg-black/70 border-b border-cyan-500/20">
63
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
64
+ <div class="text-2xl font-bold neon-text font-major" data-aos="fade-right">
65
+ NEON MIRAGE
66
+ </div>
67
+ <div class="hidden md:flex space-x-8">
68
+ <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all duration-300 flex items-center">
69
+ <i data-feather="home" class="mr-2"></i> Lounge
70
+ </a>
71
+ <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all duration-300 flex items-center">
72
+ <i data-feather="music" class="mr-2"></i> Sessions
73
+ </a>
74
+ <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all duration-300 flex items-center">
75
+ <i data-feather="users" class="mr-2"></i> Collective
76
+ </a>
77
+ <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all duration-300 flex items-center">
78
+ <i data-feather="calendar" class="mr-2"></i> 2110
79
+ </a>
80
+ </div>
81
+ <button class="md:hidden text-cyan-300">
82
+ <i data-feather="menu"></i>
83
+ </button>
84
+ </div>
85
+ </nav>
86
+
87
+ <!-- Hero Section -->
88
+ <section class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
89
+ <div class="absolute inset-0 z-0">
90
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div>
91
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-black"></div>
92
+ <div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-black to-transparent"></div>
93
+ </div>
94
+
95
+ <div class="container mx-auto px-6 relative z-10 text-center" data-aos="fade-up">
96
+ <h1 class="text-6xl md:text-8xl font-bold mb-6 neon-text font-major glitch">
97
+ 2110
98
+ </h1>
99
+ <p class="text-xl md:text-2xl max-w-2xl mx-auto mb-12 text-cyan-100">
100
+ Where jazz algorithms meet analog souls in the neon underbelly of Neo-Tokyo
101
+ </p>
102
+ <div class="flex justify-center space-x-6">
103
+ <button class="px-8 py-3 bg-transparent border-2 border-cyan-400 text-cyan-300 hover:bg-cyan-400/20 transition-all duration-500 rounded-full flex items-center neon-border flicker">
104
+ <i data-feather="play" class="mr-2"></i> Live Stream
105
+ </button>
106
+ <button class="px-8 py-3 bg-gradient-to-r from-purple-600 to-cyan-500 text-white hover:opacity-80 transition-all duration-500 rounded-full flex items-center">
107
+ <i data-feather="compass" class="mr-2"></i> Explore
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- About Section -->
114
+ <section class="py-20 relative">
115
+ <div class="container mx-auto px-6">
116
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
117
+ <div class="relative" data-aos="fade-right">
118
+ <div class="absolute -inset-4 bg-gradient-to-br from-purple-500/30 to-cyan-500/30 rounded-xl blur-lg opacity-70"></div>
119
+ <div class="relative bg-black/50 rounded-xl p-1 neon-border">
120
+ <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?q=80&w=2069&auto=format&fit=crop" alt="Cyberjazz" class="rounded-lg w-full h-auto">
121
+ </div>
122
+ </div>
123
+ <div data-aos="fade-left">
124
+ <h2 class="text-4xl font-bold mb-6 neon-text">The Underground Pulse</h2>
125
+ <p class="text-lg text-cyan-100 mb-6">
126
+ Beneath the megacorp towers, where the city's heartbeat syncs with analog synthesizers and brass instruments from another century, we craft the soundtrack to your neural uplink.
127
+ </p>
128
+ <p class="text-lg text-cyan-100 mb-8">
129
+ Our collective of rogue musicians, AI composers, and visual alchemists blend live jazz improvisation with glitchy trip-hop production, creating immersive experiences that defy temporal categorization.
130
+ </p>
131
+ <div class="flex space-x-4">
132
+ <div class="text-center">
133
+ <div class="text-3xl font-bold text-pink-400">47</div>
134
+ <div class="text-sm text-cyan-300">Artists</div>
135
+ </div>
136
+ <div class="text-center">
137
+ <div class="text-3xl font-bold text-cyan-400">2110</div>
138
+ <div class="text-sm text-cyan-300">Sessions</div>
139
+ </div>
140
+ <div class="text-center">
141
+ <div class="text-3xl font-bold text-purple-400">∞</div>
142
+ <div class="text-sm text-cyan-300">Possibilities</div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </section>
149
+
150
+ <!-- Live Sessions -->
151
+ <section class="py-20 bg-gradient-to-b from-black via-purple-900/10 to-black">
152
+ <div class="container mx-auto px-6">
153
+ <div class="text-center mb-16" data-aos="fade-up">
154
+ <h2 class="text-4xl font-bold mb-4 neon-text">Tonight's Sessions</h2>
155
+ <p class="text-xl text-cyan-200 max-w-2xl mx-auto">
156
+ Neural interfaces patched into vintage amplifiers. The future never sounded so analog.
157
+ </p>
158
+ </div>
159
+
160
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
161
+ <!-- Session 1 -->
162
+ <div class="bg-black/40 rounded-xl overflow-hidden border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-500" data-aos="zoom-in">
163
+ <div class="relative">
164
+ <img src="https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?q=80&w=2013&auto=format&fit=crop" alt="Session" class="w-full h-64 object-cover">
165
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
166
+ <div class="absolute bottom-4 left-4">
167
+ <span class="bg-pink-600/80 text-white text-xs px-2 py-1 rounded">LIVE NOW</span>
168
+ </div>
169
+ </div>
170
+ <div class="p-6">
171
+ <h3 class="text-xl font-bold mb-2 text-cyan-300">Neon Bebop</h3>
172
+ <p class="text-sm text-cyan-100 mb-4">Jazz quintet x AI drum machine</p>
173
+ <div class="flex justify-between items-center">
174
+ <div class="flex items-center">
175
+ <i data-feather="user" class="text-cyan-400 mr-2 w-4"></i>
176
+ <span class="text-xs text-cyan-300">Dr. Synth</span>
177
+ </div>
178
+ <div class="text-xs text-purple-300">21:10 - 23:30</div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Session 2 -->
184
+ <div class="bg-black/40 rounded-xl overflow-hidden border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-500" data-aos="zoom-in" data-aos-delay="200">
185
+ <div class="relative">
186
+ <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=2070&auto=format&fit=crop" alt="Session" class="w-full h-64 object-cover">
187
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
188
+ <div class="absolute bottom-4 left-4">
189
+ <span class="bg-cyan-600/80 text-white text-xs px-2 py-1 rounded">NEXT</span>
190
+ </div>
191
+ </div>
192
+ <div class="p-6">
193
+ <h3 class="text-xl font-bold mb-2 text-cyan-300">Glitch Noir</h3>
194
+ <p class="text-sm text-cyan-100 mb-4">Saxophone x modular synth</p>
195
+ <div class="flex justify-between items-center">
196
+ <div class="flex items-center">
197
+ <i data-feather="user" class="text-purple-400 mr-2 w-4"></i>
198
+ <span class="text-xs text-cyan-300">Lena Circuit</span>
199
+ </div>
200
+ <div class="text-xs text-purple-300">23:45 - 02:10</div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Session 3 -->
206
+ <div class="bg-black/40 rounded-xl overflow-hidden border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-500" data-aos="zoom-in" data-aos-delay="400">
207
+ <div class="relative">
208
+ <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=2070&auto=format&fit=crop" alt="Session" class="w-full h-64 object-cover">
209
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
210
+ <div class="absolute bottom-4 left-4">
211
+ <span class="bg-purple-600/80 text-white text-xs px-2 py-1 rounded">LATER</span>
212
+ </div>
213
+ </div>
214
+ <div class="p-6">
215
+ <h3 class="text-xl font-bold mb-2 text-cyan-300">Analog Dreams</h3>
216
+ <p class="text-sm text-cyan-100 mb-4">Piano trio x holographic visuals</p>
217
+ <div class="flex justify-between items-center">
218
+ <div class="flex items-center">
219
+ <i data-feather="user" class="text-pink-400 mr-2 w-4"></i>
220
+ <span class="text-xs text-cyan-300">The Ghost Keys</span>
221
+ </div>
222
+ <div class="text-xs text-purple-300">02:30 - ∞</div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </section>
229
+
230
+ <!-- Membership -->
231
+ <section class="py-20 relative">
232
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-10"></div>
233
+ <div class="container mx-auto px-6 relative">
234
+ <div class="text-center mb-16" data-aos="fade-up">
235
+ <h2 class="text-4xl font-bold mb-4 neon-text">Neural Access</h2>
236
+ <p class="text-xl text-cyan-200 max-w-2xl mx-auto">
237
+ Upgrade your sensory inputs. Membership includes direct neural patches to our underground sessions.
238
+ </p>
239
+ </div>
240
+
241
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
242
+ <!-- Tier 1 -->
243
+ <div class="bg-gradient-to-b from-black to-purple-900/20 rounded-xl p-8 border border-cyan-500/30 hover:border-cyan-400/70 transition-all duration-500" data-aos="fade-up">
244
+ <h3 class="text-2xl font-bold mb-4 text-cyan-300">Lurker</h3>
245
+ <div class="text-5xl font-bold mb-6 neon-text">₵29</div>
246
+ <ul class="space-y-3 mb-8">
247
+ <li class="flex items-center">
248
+ <i data-feather="check" class="text-green-400 mr-2 w-5"></i>
249
+ <span>Basic neural feed</span>
250
+ </li>
251
+ <li class="flex items-center">
252
+ <i data-feather="check" class="text-green-400 mr-2 w-5"></i>
253
+ <span>3 sessions/month</span>
254
+ </li>
255
+ <li class="flex items-center text-cyan-500">
256
+ <i data-feather="x" class="mr-2 w-5"></i>
257
+ <span>No backstage access</span>
258
+ </li>
259
+ </ul>
260
+ <button class="w-full py-3 bg-transparent border border-cyan-400 text-cyan-300 hover:bg-cyan-400/20 transition-all duration-500 rounded-full">
261
+ Ghost Mode
262
+ </button>
263
+ </div>
264
+
265
+ <!-- Tier 2 -->
266
+ <div class="bg-gradient-to-b from-black to-cyan-900/20 rounded-xl p-8 border border-cyan-500/50 hover:border-cyan-400 transition-all duration-500 transform hover:scale-105 relative" data-aos="fade-up" data-aos-delay="200">
267
+ <div class="absolute top-0 right-0 bg-cyan-500 text-black text-xs font-bold px-3 py-1 rounded-bl-lg">POPULAR</div>
268
+ <h3 class="text-2xl font-bold mb-4 text-cyan-300">Synth Seeker</h3>
269
+ <div class="text-5xl font-bold mb-6 neon-text">₵79</div>
270
+ <ul class="space-y-3 mb-8">
271
+ <li class="flex items-center">
272
+ <i data-feather="check" class="text-green-400 mr-2 w-5"></i>
273
+ <span>Enhanced neural feed</span>
274
+ </li>
275
+ <li class="flex items-center">
276
+ <i data-feather="check" class="text-green-400 mr-2 w-5"></i>
277
+ <span>Unlimited sessions</span>
278
+ </li>
279
+ <li class="flex items-center">
280
+ <i data-feather="check" class="text-green-400 mr-2 w-5"></i>
281
+ <span>Backstage neural patches</span>
282
+ </li>
283
+ </ul>
284
+ <button class="w-full py-3 bg-gradient-to-r from-cyan-500 to-purple-500 text-white hover:opacity-90 transition-all duration-500 rounded-full">
285
+ Upgrade Senses
286
+ </button>
287
+ </div>
288
+
289
+ <!-- Tier 3 -->
290
+ <div class="bg-gradient-to-b from-black to-pink-900/20 rounded-xl p-8 border border-cyan-500/30 hover:border-cyan-400/70 transition-all duration-500" data-aos="fade-up" data-aos-delay="400">
291
+ <h3 class="text-2xl font-bold mb-4 text-cyan-300">Cyber Shaman</h3>
292
+ <div class="text-5xl font-bold mb-6 neon-text">₵211</div>
293
+ <ul class="space-y-3 mb-8">
294
+ <li class="flex items-center">
295
+ <i data-feather="check" class="text-green-400 mr-2 w-5"></i>
296
+ <span>Full sensory immersion</span>
297
+ </li>
298
+ <li class="flex items-center">
299
+ <i data-feather="check" class="text-green-400 mr-2 w-5"></i>
300
+ <span>Artist neural sync</span>
301
+ </li>
302
+ <li class="flex items-center">
303
+ <i data-feather="check" class="text-green-400 mr-2 w-5"></i>
304
+ <span>Create with the collective</span>
305
+ </li>
306
+ </ul>
307
+ <button class="w-full py-3 bg-transparent border border-pink-400 text-pink-300 hover:bg-pink-400/20 transition-all duration-500 rounded-full">
308
+ Become One
309
+ </button>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </section>
314
+
315
+ <!-- Footer -->
316
+ <footer class="bg-black/80 border-t border-cyan-500/20 py-12">
317
+ <div class="container mx-auto px-6">
318
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
319
+ <div>
320
+ <h3 class="text-xl font-bold mb-4 neon-text">NEON MIRAGE</h3>
321
+ <p class="text-sm text-cyan-200 mb-4">
322
+ Underground jazz-trip-hop collective operating since 2089 in the neural networks of Neo-Tokyo.
323
+ </p>
324
+ <div class="flex space-x-4">
325
+ <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all">
326
+ <i data-feather="instagram"></i>
327
+ </a>
328
+ <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all">
329
+ <i data-feather="twitter"></i>
330
+ </a>
331
+ <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all">
332
+ <i data-feather="youtube"></i>
333
+ </a>
334
+ <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all">
335
+ <i data-feather="github"></i>
336
+ </a>
337
+ </div>
338
+ </div>
339
+ <div>
340
+ <h4 class="text-lg font-bold mb-4 text-cyan-300">Sessions</h4>
341
+ <ul class="space-y-2">
342
+ <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Live Streams</a></li>
343
+ <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Archives</a></li>
344
+ <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Neural Patches</a></li>
345
+ <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">VR Experiences</a></li>
346
+ </ul>
347
+ </div>
348
+ <div>
349
+ <h4 class="text-lg font-bold mb-4 text-cyan-300">Collective</h4>
350
+ <ul class="space-y-2">
351
+ <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Artists</a></li>
352
+ <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Collaborate</a></li>
353
+ <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Manifesto</a></li>
354
+ <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Neural API</a></li>
355
+ </ul>
356
+ </div>
357
+ <div>
358
+ <h4 class="text-lg font-bold mb-4 text-cyan-300">Reality Hacks</h4>
359
+ <p class="text-sm text-cyan-200 mb-4">
360
+ Subscribe to our neural newsletter for underground session alerts and reality distortion patches.
361
+ </p>
362
+ <div class="flex">
363
+ <input type="email" placeholder="Your neural address" class="bg-black/50 text-cyan-200 border border-cyan-500/50 px-4 py-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-cyan-400 w-full">
364
+ <button class="bg-cyan-500 text-black px-4 py-2 rounded-r-lg hover:bg-cyan-400 transition-all">
365
+ <i data-feather="send"></i>
366
+ </button>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ <div class="border-t border-cyan-500/20 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
371
+ <p class="text-xs text-cyan-500 mb-4 md:mb-0">
372
+ © 2110 NEON MIRAGE | All realities reserved
373
+ </p>
374
+ <div class="flex space-x-6">
375
+ <a href="#" class="text-xs text-cyan-500 hover:text-cyan-300 transition-all">Neural Terms</a>
376
+ <a href="#" class="text-xs text-cyan-500 hover:text-cyan-300 transition-all">Reality Policy</a>
377
+ <a href="#" class="text-xs text-cyan-500 hover:text-cyan-300 transition-all">Glitch Support</a>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </footer>
382
+
383
+ <!-- Audio Visualizer -->
384
+ <div class="fixed bottom-0 left-0 right-0 h-2 bg-gradient-to-r from-purple-500 via-cyan-500 to-pink-500 opacity-20 animate-pulse"></div>
385
+
386
+ <script>
387
+ // Initialize animations and icons
388
+ AOS.init({
389
+ duration: 800,
390
+ easing: 'ease-in-out-quad',
391
+ once: true
392
+ });
393
+
394
+ feather.replace();
395
+
396
+ // Audio visualizer animation
397
+ anime({
398
+ targets: '.animate-pulse',
399
+ opacity: [0.2, 0.8],
400
+ duration: 2000,
401
+ direction: 'alternate',
402
+ loop: true,
403
+ easing: 'easeInOutSine'
404
+ });
405
+
406
+ // Glitch effect on hover
407
+ document.querySelectorAll('.glitch').forEach(el => {
408
+ el.addEventListener('mouseenter', () => {
409
+ anime({
410
+ targets: el,
411
+ translateX: () => anime.random(-5, 5),
412
+ translateY: () => anime.random(-5, 5),
413
+ duration: 50,
414
+ loop: 5,
415
+ easing: 'easeInOutSine'
416
+ });
417
+ });
418
+ });
419
+ </script>
420
+ </body>
421
  </html>