Bujurocks commited on
Commit
cbcdad3
·
verified ·
1 Parent(s): 059bbc2

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +964 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Music
3
- emoji: 👀
4
- colorFrom: purple
5
  colorTo: gray
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: music
3
+ emoji: 🐳
4
+ colorFrom: pink
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,964 @@
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>NEURAL SOUND | Quantum Music Generation</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=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;500;700&display=swap');
11
+
12
+ :root {
13
+ --neon-pink: #ff2ced;
14
+ --neon-blue: #00e1ff;
15
+ --neon-purple: #9d00ff;
16
+ --neon-green: #00ff9d;
17
+ --neon-yellow: #fff700;
18
+ --dark-bg: #0a0a14;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Rajdhani', sans-serif;
23
+ background-color: var(--dark-bg);
24
+ color: white;
25
+ overflow-x: hidden;
26
+ }
27
+
28
+ h1, h2, h3, h4, .font-orbitron {
29
+ font-family: 'Orbitron', sans-serif;
30
+ text-transform: uppercase;
31
+ letter-spacing: 1px;
32
+ }
33
+
34
+ .neon-text-pink {
35
+ color: var(--neon-pink);
36
+ text-shadow: 0 0 10px rgba(255, 44, 237, 0.7);
37
+ }
38
+
39
+ .neon-text-blue {
40
+ color: var(--neon-blue);
41
+ text-shadow: 0 0 10px rgba(0, 225, 255, 0.7);
42
+ }
43
+
44
+ .neon-text-purple {
45
+ color: var(--neon-purple);
46
+ text-shadow: 0 0 10px rgba(157, 0, 255, 0.7);
47
+ }
48
+
49
+ .neon-gradient-bg {
50
+ background: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-blue) 50%, var(--neon-pink) 100%);
51
+ }
52
+
53
+ .cyber-border {
54
+ position: relative;
55
+ border: 1px solid transparent;
56
+ background-clip: padding-box;
57
+ background: rgba(10, 10, 20, 0.7);
58
+ backdrop-filter: blur(10px);
59
+ }
60
+
61
+ .cyber-border::before {
62
+ content: '';
63
+ position: absolute;
64
+ top: 0;
65
+ right: 0;
66
+ bottom: 0;
67
+ left: 0;
68
+ z-index: -1;
69
+ margin: -2px;
70
+ border-radius: inherit;
71
+ background: linear-gradient(45deg,
72
+ var(--neon-blue),
73
+ var(--neon-purple),
74
+ var(--neon-pink),
75
+ var(--neon-green));
76
+ background-size: 300% 300%;
77
+ animation: gradientBorder 6s ease infinite;
78
+ }
79
+
80
+ .cyber-card {
81
+ background: rgba(15, 15, 30, 0.6);
82
+ border: 1px solid rgba(0, 225, 255, 0.2);
83
+ backdrop-filter: blur(10px);
84
+ transition: all 0.3s ease;
85
+ box-shadow: 0 0 20px rgba(0, 225, 255, 0.1);
86
+ }
87
+
88
+ .cyber-card:hover {
89
+ transform: translateY(-5px);
90
+ box-shadow: 0 10px 30px rgba(157, 0, 255, 0.3);
91
+ border-color: var(--neon-pink);
92
+ }
93
+
94
+ .terminal-effect {
95
+ background: rgba(0, 0, 0, 0.5);
96
+ border-left: 3px solid var(--neon-green);
97
+ font-family: 'Courier New', monospace;
98
+ color: var(--neon-green);
99
+ text-shadow: 0 0 5px var(--neon-green);
100
+ }
101
+
102
+ .scanline {
103
+ position: relative;
104
+ overflow: hidden;
105
+ }
106
+
107
+ .scanline::after {
108
+ content: '';
109
+ position: absolute;
110
+ top: 0;
111
+ left: 0;
112
+ right: 0;
113
+ height: 100%;
114
+ background: linear-gradient(
115
+ to bottom,
116
+ transparent 0%,
117
+ rgba(0, 225, 255, 0.1) 50%,
118
+ transparent 100%
119
+ );
120
+ animation: scanline 4s linear infinite;
121
+ }
122
+
123
+ .glow-effect {
124
+ filter: drop-shadow(0 0 10px currentColor);
125
+ }
126
+
127
+ .matrix-bg {
128
+ position: relative;
129
+ }
130
+
131
+ .matrix-bg::before {
132
+ content: '';
133
+ position: absolute;
134
+ top: 0;
135
+ left: 0;
136
+ width: 100%;
137
+ height: 100%;
138
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="1" height="1" fill="rgba(0,225,255,0.05)"/></svg>');
139
+ opacity: 0.3;
140
+ z-index: -1;
141
+ }
142
+
143
+ @keyframes gradientBorder {
144
+ 0% { background-position: 0% 50%; }
145
+ 50% { background-position: 100% 50%; }
146
+ 100% { background-position: 0% 50%; }
147
+ }
148
+
149
+ @keyframes scanline {
150
+ 0% { transform: translateY(-100%); }
151
+ 100% { transform: translateY(100%); }
152
+ }
153
+
154
+ @keyframes pulseGlow {
155
+ 0% { box-shadow: 0 0 5px var(--neon-blue); }
156
+ 50% { box-shadow: 0 0 20px var(--neon-pink); }
157
+ 100% { box-shadow: 0 0 5px var(--neon-blue); }
158
+ }
159
+
160
+ @keyframes float {
161
+ 0% { transform: translateY(0px); }
162
+ 50% { transform: translateY(-10px); }
163
+ 100% { transform: translateY(0px); }
164
+ }
165
+
166
+ .pulse-glow {
167
+ animation: pulseGlow 3s infinite;
168
+ }
169
+
170
+ .float-animation {
171
+ animation: float 6s ease-in-out infinite;
172
+ }
173
+
174
+ .typing-cursor {
175
+ border-right: 2px solid var(--neon-green);
176
+ animation: typing 1s steps(20) infinite, blink .5s step-end infinite;
177
+ }
178
+
179
+ @keyframes typing {
180
+ from { width: 0 }
181
+ to { width: 100% }
182
+ }
183
+
184
+ @keyframes blink {
185
+ from, to { border-color: transparent }
186
+ 50% { border-color: var(--neon-green) }
187
+ }
188
+
189
+ .neon-input {
190
+ background: rgba(10, 10, 30, 0.7);
191
+ border: 1px solid var(--neon-blue);
192
+ color: white;
193
+ transition: all 0.3s;
194
+ }
195
+
196
+ .neon-input:focus {
197
+ outline: none;
198
+ border-color: var(--neon-pink);
199
+ box-shadow: 0 0 10px var(--neon-pink);
200
+ }
201
+
202
+ .neon-button {
203
+ background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue));
204
+ border: none;
205
+ color: white;
206
+ font-weight: bold;
207
+ text-transform: uppercase;
208
+ letter-spacing: 1px;
209
+ transition: all 0.3s;
210
+ }
211
+
212
+ .neon-button:hover {
213
+ background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink));
214
+ transform: translateY(-2px);
215
+ box-shadow: 0 5px 15px rgba(157, 0, 255, 0.4);
216
+ }
217
+
218
+ .grid-pattern {
219
+ background-image:
220
+ linear-gradient(rgba(0, 225, 255, 0.1) 1px, transparent 1px),
221
+ linear-gradient(90deg, rgba(0, 225, 255, 0.1) 1px, transparent 1px);
222
+ background-size: 20px 20px;
223
+ }
224
+
225
+ .circuit-pattern {
226
+ background-image:
227
+ radial-gradient(circle at center, rgba(0, 225, 255, 0.05) 0%, transparent 70%),
228
+ linear-gradient(rgba(0, 225, 255, 0.1) 1px, transparent 1px),
229
+ linear-gradient(90deg, rgba(0, 225, 255, 0.1) 1px, transparent 1px);
230
+ background-size: 100% 100%, 20px 20px, 20px 20px;
231
+ }
232
+ </style>
233
+ </head>
234
+ <body class="circuit-pattern">
235
+ <!-- Navigation -->
236
+ <nav class="bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800 sticky top-0 z-50">
237
+ <div class="container mx-auto px-6 py-3">
238
+ <div class="flex items-center justify-between">
239
+ <div class="flex items-center">
240
+ <div class="glow-effect neon-text-blue">
241
+ <i class="fas fa-brain-circuit text-3xl mr-2"></i>
242
+ </div>
243
+ <span class="font-orbitron text-xl neon-text-blue">NEURAL<span class="neon-text-pink">SOUND</span></span>
244
+ </div>
245
+ <div class="hidden md:flex items-center space-x-8">
246
+ <a href="#features" class="neon-text-blue hover:neon-text-pink transition-colors">FEATURES</a>
247
+ <a href="#tech" class="neon-text-blue hover:neon-text-pink transition-colors">TECH</a>
248
+ <a href="#generator" class="neon-text-blue hover:neon-text-pink transition-colors">GENERATOR</a>
249
+ <a href="#demo" class="neon-text-blue hover:neon-text-pink transition-colors">DEMO</a>
250
+ </div>
251
+ <button class="md:hidden focus:outline-none neon-text-blue" id="mobileMenuButton">
252
+ <i class="fas fa-bars text-2xl"></i>
253
+ </button>
254
+ </div>
255
+ </div>
256
+ <!-- Mobile Menu -->
257
+ <div id="mobileMenu" class="hidden md:hidden bg-gray-900 border-t border-gray-800">
258
+ <div class="container mx-auto px-6 py-3 flex flex-col space-y-3">
259
+ <a href="#features" class="neon-text-blue py-2">FEATURES</a>
260
+ <a href="#tech" class="neon-text-blue py-2">TECH</a>
261
+ <a href="#generator" class="neon-text-blue py-2">GENERATOR</a>
262
+ <a href="#demo" class="neon-text-blue py-2">DEMO</a>
263
+ </div>
264
+ </div>
265
+ </nav>
266
+
267
+ <!-- Hero Section -->
268
+ <section class="relative overflow-hidden">
269
+ <div class="absolute inset-0 z-0">
270
+ <div class="absolute inset-0 bg-black opacity-70"></div>
271
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"1\" height=\"1\" fill=\"rgba(0,225,255,0.05)\"/></svg>')] opacity-20"></div>
272
+ <div class="absolute inset-0" style="background: radial-gradient(circle at 20% 30%, rgba(157, 0, 255, 0.2) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(0, 225, 255, 0.2) 0%, transparent 40%);"></div>
273
+ </div>
274
+ <div class="container mx-auto px-6 py-24 relative z-10">
275
+ <div class="flex flex-col md:flex-row items-center">
276
+ <div class="md:w-1/2 mb-16 md:mb-0">
277
+ <div class="terminal-effect px-4 py-2 inline-block mb-4">
278
+ <span class="neon-text-green">SYSTEM</span> > INITIALIZING QUANTUM AUDIO ENGINE
279
+ </div>
280
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
281
+ <span class="neon-text-blue">QUANTUM</span><br>
282
+ <span class="neon-text-pink">MUSIC</span><br>
283
+ <span class="neon-text-purple">GENERATION</span>
284
+ </h1>
285
+ <p class="text-xl mb-8 text-gray-300 max-w-lg">
286
+ Harnessing quantum neural networks to create music beyond human imagination. Experience the future of sound design.
287
+ </p>
288
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
289
+ <a href="#generator" class="neon-button py-3 px-8 rounded-full text-center">
290
+ <i class="fas fa-play mr-2"></i> GENERATE NOW
291
+ </a>
292
+ <a href="#demo" class="border-2 border-neon-blue text-neon-blue font-bold py-3 px-8 rounded-full hover:bg-neon-blue hover:bg-opacity-10 transition duration-300 text-center">
293
+ <i class="fas fa-eye mr-2"></i> VIEW DEMO
294
+ </a>
295
+ </div>
296
+ </div>
297
+ <div class="md:w-1/2 flex justify-center relative">
298
+ <div class="relative float-animation">
299
+ <div class="absolute inset-0 rounded-xl bg-neon-blue opacity-20 blur-2xl"></div>
300
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
301
+ alt="Quantum Music AI"
302
+ class="rounded-xl shadow-2xl w-full max-w-md relative z-10 border-2 border-neon-blue">
303
+ <div class="absolute -bottom-5 -right-5 bg-black bg-opacity-80 border border-neon-green px-4 py-2 rounded-lg shadow-lg z-20">
304
+ <span class="typing-cursor neon-text-green">PROCESSING AUDIO MATRIX...</span>
305
+ </div>
306
+ </div>
307
+ <div class="absolute -left-20 -top-20 w-64 h-64 rounded-full bg-neon-purple opacity-10 blur-3xl"></div>
308
+ <div class="absolute -right-20 -bottom-20 w-64 h-64 rounded-full bg-neon-blue opacity-10 blur-3xl"></div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </section>
313
+
314
+ <!-- Demo Section -->
315
+ <section id="demo" class="py-20 bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm">
316
+ <div class="container mx-auto px-6">
317
+ <div class="text-center mb-16">
318
+ <h2 class="text-4xl font-bold mb-4 neon-text-purple">
319
+ <i class="fas fa-play-circle mr-2"></i> SYSTEM DEMONSTRATION
320
+ </h2>
321
+ <div class="w-24 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto mb-4"></div>
322
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
323
+ Witness our quantum audio processor in action. This demo showcases the neural sound synthesis capabilities.
324
+ </p>
325
+ </div>
326
+ <div class="max-w-4xl mx-auto cyber-border rounded-xl overflow-hidden p-1">
327
+ <div class="relative" style="padding-bottom: 56.25%;">
328
+ <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
329
+ </div>
330
+ </div>
331
+ <div class="text-center mt-8">
332
+ <a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" target="_blank" class="inline-flex items-center neon-text-blue hover:neon-text-pink transition-colors">
333
+ <i class="fab fa-youtube mr-2"></i> FULL DEMO ON YOUTUBE
334
+ <i class="fas fa-external-link-alt ml-2"></i>
335
+ </a>
336
+ </div>
337
+ </div>
338
+ </section>
339
+
340
+ <!-- Features Section -->
341
+ <section id="features" class="py-20">
342
+ <div class="container mx-auto px-6">
343
+ <div class="text-center mb-16">
344
+ <h2 class="text-4xl font-bold mb-4 neon-text-blue">
345
+ <i class="fas fa-cogs mr-2"></i> SYSTEM FEATURES
346
+ </h2>
347
+ <div class="w-24 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto mb-4"></div>
348
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
349
+ Cutting-edge technologies powering the next generation of music creation
350
+ </p>
351
+ </div>
352
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
353
+ <!-- Feature 1 -->
354
+ <div class="cyber-card p-8 rounded-xl relative overflow-hidden">
355
+ <div class="absolute -right-10 -top-10 w-32 h-32 rounded-full bg-neon-blue opacity-10 blur-xl"></div>
356
+ <div class="text-4xl mb-6 neon-text-purple">
357
+ <i class="fas fa-atom"></i>
358
+ </div>
359
+ <h3 class="text-2xl font-bold mb-3 neon-text-blue">QUANTUM PROCESSING</h3>
360
+ <p class="text-gray-300">
361
+ Our 128-qubit quantum audio processor enables parallel computation of musical elements at unprecedented speeds.
362
+ </p>
363
+ <div class="mt-6 pt-4 border-t border-gray-800">
364
+ <div class="flex items-center">
365
+ <div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div>
366
+ <span class="text-sm text-gray-400">Real-time generation</span>
367
+ </div>
368
+ <div class="flex items-center mt-2">
369
+ <div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div>
370
+ <span class="text-sm text-gray-400">Zero latency</span>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- Feature 2 -->
376
+ <div class="cyber-card p-8 rounded-xl relative overflow-hidden">
377
+ <div class="absolute -right-10 -top-10 w-32 h-32 rounded-full bg-neon-pink opacity-10 blur-xl"></div>
378
+ <div class="text-4xl mb-6 neon-text-blue">
379
+ <i class="fas fa-network-wired"></i>
380
+ </div>
381
+ <h3 class="text-2xl font-bold mb-3 neon-text-pink">NEURAL ARCHITECTURE</h3>
382
+ <p class="text-gray-300">
383
+ Deep neural sound synthesis with 48 transformer layers trained on over 10 million musical compositions.
384
+ </p>
385
+ <div class="mt-6 pt-4 border-t border-gray-800">
386
+ <div class="flex items-center">
387
+ <div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div>
388
+ <span class="text-sm text-gray-400">48-layer model</span>
389
+ </div>
390
+ <div class="flex items-center mt-2">
391
+ <div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div>
392
+ <span class="text-sm text-gray-400">10M+ training samples</span>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Feature 3 -->
398
+ <div class="cyber-card p-8 rounded-xl relative overflow-hidden">
399
+ <div class="absolute -right-10 -top-10 w-32 h-32 rounded-full bg-neon-purple opacity-10 blur-xl"></div>
400
+ <div class="text-4xl mb-6 neon-text-green">
401
+ <i class="fas fa-project-diagram"></i>
402
+ </div>
403
+ <h3 class="text-2xl font-bold mb-3 neon-text-purple">QUANTUM QUEUE</h3>
404
+ <p class="text-gray-300">
405
+ Our quantum-entangled task management system ensures fair processing across all users with zero wait time.
406
+ </p>
407
+ <div class="mt-6 pt-4 border-t border-gray-800">
408
+ <div class="flex items-center">
409
+ <div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div>
410
+ <span class="text-sm text-gray-400">Entangled processing</span>
411
+ </div>
412
+ <div class="flex items-center mt-2">
413
+ <div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div>
414
+ <span class="text-sm text-gray-400">Zero wait time</span>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </section>
421
+
422
+ <!-- Tech Section -->
423
+ <section id="tech" class="py-20 bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm">
424
+ <div class="container mx-auto px-6">
425
+ <div class="flex flex-col md:flex-row items-center">
426
+ <div class="md:w-1/2 mb-16 md:mb-0 md:pr-12">
427
+ <div class="terminal-effect px-4 py-2 inline-block mb-4">
428
+ <span class="neon-text-green">TECH</span> > SYSTEM ARCHITECTURE OVERVIEW
429
+ </div>
430
+ <h2 class="text-4xl font-bold mb-6 neon-text-blue">
431
+ QUANTUM NEURAL SOUND SYNTHESIS
432
+ </h2>
433
+ <p class="text-gray-300 mb-8">
434
+ Our system combines quantum computing with deep neural networks to create a revolutionary approach to music generation. The quantum processor handles waveform computation while the neural network manages musical structure and emotional resonance.
435
+ </p>
436
+
437
+ <div class="mb-8">
438
+ <h4 class="text-lg font-semibold mb-4 neon-text-pink">PROCESS VISUALIZATION</h4>
439
+ <div class="bg-black bg-opacity-50 p-4 rounded-lg border border-gray-800 overflow-hidden relative h-16">
440
+ <div class="absolute whitespace-nowrap" style="animation: queueFlow 8s linear infinite;">
441
+ <span class="inline-block bg-neon-blue text-black px-3 py-1 rounded-full mr-4 font-bold">QUBIT INIT</span>
442
+ <span class="inline-block bg-neon-purple text-white px-3 py-1 rounded-full mr-4 font-bold">WAVEFORM GEN</span>
443
+ <span class="inline-block bg-neon-pink text-white px-3 py-1 rounded-full mr-4 font-bold">HARMONY BUILD</span>
444
+ <span class="inline-block bg-neon-green text-black px-3 py-1 rounded-full mr-4 font-bold">NEURAL MIX</span>
445
+ <span class="inline-block bg-neon-yellow text-black px-3 py-1 rounded-full mr-4 font-bold">QUANTUM OUTPUT</span>
446
+ </div>
447
+ </div>
448
+ <p class="text-sm text-gray-500 mt-2">Quantum audio processing pipeline</p>
449
+ </div>
450
+
451
+ <div class="flex items-start">
452
+ <div class="text-2xl neon-text-blue mr-4">
453
+ <i class="fas fa-microchip"></i>
454
+ </div>
455
+ <div>
456
+ <h4 class="text-xl font-bold mb-2 neon-text-blue">HARDWARE SPECS</h4>
457
+ <p class="text-gray-300">
458
+ 128-qubit quantum processor with 48 neural cores running at 20 petaflops. Fully optimized for real-time audio generation.
459
+ </p>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ <div class="md:w-1/2 flex justify-center relative">
464
+ <div class="cyber-border rounded-xl p-1 w-full max-w-lg">
465
+ <div class="bg-black bg-opacity-70 rounded-lg overflow-hidden">
466
+ <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
467
+ alt="Quantum Computer"
468
+ class="w-full h-auto rounded-lg">
469
+ <div class="p-4 border-t border-gray-800">
470
+ <div class="flex justify-between items-center">
471
+ <div>
472
+ <div class="text-sm neon-text-blue">QUANTUM PROCESSOR</div>
473
+ <div class="text-lg font-bold">NeuralSound Q128</div>
474
+ </div>
475
+ <div class="text-right">
476
+ <div class="text-sm neon-text-green">STATUS</div>
477
+ <div class="text-lg font-bold flex items-center">
478
+ <span class="w-2 h-2 rounded-full bg-neon-green mr-2"></span>
479
+ ONLINE
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </section>
490
+
491
+ <!-- Generator Section -->
492
+ <section id="generator" class="py-20">
493
+ <div class="container mx-auto px-6">
494
+ <div class="text-center mb-16">
495
+ <h2 class="text-4xl font-bold mb-4 neon-text-pink">
496
+ <i class="fas fa-sliders-h mr-2"></i> QUANTUM AUDIO GENERATOR
497
+ </h2>
498
+ <div class="w-24 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto mb-4"></div>
499
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
500
+ Configure your quantum music generation parameters and experience the future of sound.
501
+ </p>
502
+ </div>
503
+
504
+ <div class="max-w-3xl mx-auto">
505
+ <div class="cyber-border rounded-xl p-1">
506
+ <div class="bg-black bg-opacity-70 rounded-xl p-8">
507
+ <div class="flex justify-between items-center mb-8">
508
+ <h3 class="text-2xl font-bold neon-text-blue">
509
+ <i class="fas fa-cog mr-2"></i> GENERATION PARAMETERS
510
+ </h3>
511
+ <div class="flex items-center neon-text-green">
512
+ <div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div>
513
+ <span>SYSTEM READY</span>
514
+ </div>
515
+ </div>
516
+
517
+ <form id="songForm" class="space-y-6">
518
+ <div>
519
+ <label for="artistName" class="block mb-2 neon-text-blue">ARTIST NAME</label>
520
+ <input type="text" id="artistName" class="neon-input w-full px-4 py-3 rounded">
521
+ </div>
522
+
523
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
524
+ <div>
525
+ <label for="genre" class="block mb-2 neon-text-blue">GENRE</label>
526
+ <select id="genre" class="neon-input w-full px-4 py-3 rounded">
527
+ <option value="quantum">QUANTUM</option>
528
+ <option value="cyber">CYBER</option>
529
+ <option value="neon">NEON</option>
530
+ <option value="glitch">GLITCH</option>
531
+ <option value="synth">SYNTH</option>
532
+ <option value="void">VOID</option>
533
+ </select>
534
+ </div>
535
+ <div>
536
+ <label for="mood" class="block mb-2 neon-text-blue">MOOD</label>
537
+ <select id="mood" class="neon-input w-full px-4 py-3 rounded">
538
+ <option value="hyper">HYPER</option>
539
+ <option value="dream">DREAM</option>
540
+ <option value="chaos">CHAOS</option>
541
+ <option value="serene">SERENE</option>
542
+ <option value="rage">RAGE</option>
543
+ </select>
544
+ </div>
545
+ </div>
546
+
547
+ <div>
548
+ <label for="complexity" class="block mb-2 neon-text-blue">QUANTUM COMPLEXITY</label>
549
+ <input type="range" id="complexity" min="1" max="10" value="7" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
550
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
551
+ <span>LINEAR</span>
552
+ <span>ENTANGLED</span>
553
+ </div>
554
+ </div>
555
+
556
+ <div>
557
+ <label for="lyrics" class="block mb-2 neon-text-blue">LYRIC THEME (OPTIONAL)</label>
558
+ <textarea id="lyrics" rows="3" class="neon-input w-full px-4 py-3 rounded"></textarea>
559
+ </div>
560
+
561
+ <button type="submit" class="neon-button w-full py-4 px-6 rounded-lg text-lg font-bold">
562
+ <i class="fas fa-bolt mr-2"></i> INITIATE QUANTUM GENERATION
563
+ </button>
564
+ </form>
565
+ </div>
566
+ </div>
567
+
568
+ <div id="songResult" class="hidden mt-12 cyber-border rounded-xl p-1">
569
+ <div class="bg-black bg-opacity-70 rounded-xl p-8">
570
+ <div class="flex justify-between items-center mb-8">
571
+ <h3 class="text-2xl font-bold neon-text-green">
572
+ <i class="fas fa-music mr-2"></i> QUANTUM OUTPUT
573
+ </h3>
574
+ <button id="downloadBtn" class="neon-text-blue hover:neon-text-pink transition-colors">
575
+ <i class="fas fa-download mr-1"></i> DOWNLOAD WAVEFORM
576
+ </button>
577
+ </div>
578
+
579
+ <div class="space-y-6">
580
+ <div>
581
+ <div class="text-sm neon-text-blue mb-1">TRACK TITLE</div>
582
+ <div id="songTitle" class="text-3xl font-bold neon-text-pink">QUANTUM ECHOES</div>
583
+ </div>
584
+
585
+ <div>
586
+ <div class="text-sm neon-text-blue mb-1">LYRIC MATRIX</div>
587
+ <div id="songLyrics" class="terminal-effect p-4 rounded neon-text-green">
588
+ [INITIALIZING LYRICS...]<br>
589
+ [QUANTUM ENTANGLEMENT DETECTED]<br>
590
+ [NEURAL SYNCHRONIZATION COMPLETE]<br>
591
+ <br>
592
+ ELECTRIC DREAMS IN THE VOID OF SPACE<br>
593
+ QUANTUM RHYTHMS WE CANNOT ERASE<br>
594
+ EVERY PULSE A NEW DIMENSION<br>
595
+ SOUND WAVES BREAKING ALL CONVENTION
596
+ </div>
597
+ </div>
598
+
599
+ <div class="pt-4 border-t border-gray-800">
600
+ <div class="text-sm neon-text-blue mb-2">AUDIO WAVEFORM</div>
601
+ <div class="bg-black bg-opacity-50 rounded-lg p-4 border border-gray-800">
602
+ <div class="h-32 w-full bg-gray-900 rounded flex items-center justify-center">
603
+ <div class="relative w-full h-full">
604
+ <div class="absolute inset-0 flex items-center">
605
+ <div class="w-full h-1 bg-neon-blue opacity-30"></div>
606
+ </div>
607
+ <div class="absolute inset-0" style="background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%);"></div>
608
+ <div class="absolute inset-0" id="waveform" style="background: repeating-linear-gradient(90deg, transparent, transparent 2px, var(--neon-blue) 2px, var(--neon-blue) 4px);"></div>
609
+ </div>
610
+ </div>
611
+ <audio id="songAudio" controls class="w-full mt-4">
612
+ <source src="#" type="audio/mpeg">
613
+ Your browser does not support the audio element.
614
+ </audio>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </section>
623
+
624
+ <!-- Testimonials -->
625
+ <section class="py-20 bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm">
626
+ <div class="container mx-auto px-6">
627
+ <div class="text-center mb-16">
628
+ <h2 class="text-4xl font-bold mb-4 neon-text-purple">
629
+ <i class="fas fa-quote-left mr-2"></i> USER TESTIMONIALS
630
+ </h2>
631
+ <div class="w-24 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto mb-4"></div>
632
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
633
+ What quantum musicians say about our system
634
+ </p>
635
+ </div>
636
+
637
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
638
+ <div class="cyber-card p-8 rounded-xl">
639
+ <div class="flex items-center mb-4">
640
+ <div class="text-yellow-400 mr-2">
641
+ <i class="fas fa-star"></i>
642
+ <i class="fas fa-star"></i>
643
+ <i class="fas fa-star"></i>
644
+ <i class="fas fa-star"></i>
645
+ <i class="fas fa-star"></i>
646
+ </div>
647
+ </div>
648
+ <p class="text-gray-300 mb-6 italic">
649
+ "The quantum audio processor completely changed my workflow. I can now generate complex compositions in seconds that would take weeks to create manually."
650
+ </p>
651
+ <div class="flex items-center">
652
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full mr-4 border-2 border-neon-blue">
653
+ <div>
654
+ <h4 class="font-bold neon-text-blue">DR. ELENA KOVAC</h4>
655
+ <p class="text-sm text-gray-400">Quantum Composer @ NeuroSound Labs</p>
656
+ </div>
657
+ </div>
658
+ </div>
659
+
660
+ <div class="cyber-card p-8 rounded-xl">
661
+ <div class="flex items-center mb-4">
662
+ <div class="text-yellow-400 mr-2">
663
+ <i class="fas fa-star"></i>
664
+ <i class="fas fa-star"></i>
665
+ <i class="fas fa-star"></i>
666
+ <i class="fas fa-star"></i>
667
+ <i class="fas fa-star"></i>
668
+ </div>
669
+ </div>
670
+ <p class="text-gray-300 mb-6 italic">
671
+ "As a sound designer for VR experiences, this tool lets me create adaptive soundscapes that respond to quantum states. The neural architecture is unparalleled."
672
+ </p>
673
+ <div class="flex items-center">
674
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4 border-2 border-neon-purple">
675
+ <div>
676
+ <h4 class="font-bold neon-text-purple">MARCUS TANAKA</h4>
677
+ <p class="text-sm text-gray-400">Lead Sound Designer @ VoidReality</p>
678
+ </div>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </section>
684
+
685
+ <!-- CTA Section -->
686
+ <section class="py-20 relative overflow-hidden">
687
+ <div class="absolute inset-0 z-0">
688
+ <div class="absolute inset-0 bg-gradient-to-br from-neon-purple to-neon-blue opacity-10"></div>
689
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"1\" height=\"1\" fill=\"rgba(0,225,255,0.05)\"/></svg>')] opacity-20"></div>
690
+ </div>
691
+ <div class="container mx-auto px-6 relative z-10 text-center">
692
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 neon-text-blue">
693
+ READY TO EXPERIENCE QUANTUM SOUND?
694
+ </h2>
695
+ <p class="text-xl mb-8 text-gray-300 max-w-3xl mx-auto">
696
+ Join the revolution in music production. Generate your first quantum composition today.
697
+ </p>
698
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
699
+ <a href="#generator" class="neon-button py-4 px-12 rounded-full text-lg">
700
+ <i class="fas fa-bolt mr-2"></i> START GENERATING
701
+ </a>
702
+ <a href="#demo" class="border-2 border-neon-purple text-neon-purple font-bold py-4 px-12 rounded-full hover:bg-neon-purple hover:bg-opacity-10 transition duration-300 text-lg">
703
+ <i class="fas fa-video mr-2"></i> WATCH DEMO
704
+ </a>
705
+ </div>
706
+ </div>
707
+ </section>
708
+
709
+ <!-- Footer -->
710
+ <footer class="bg-black bg-opacity-90 border-t border-gray-800 py-12">
711
+ <div class="container mx-auto px-6">
712
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
713
+ <div>
714
+ <div class="flex items-center mb-4">
715
+ <div class="glow-effect neon-text-blue">
716
+ <i class="fas fa-brain-circuit text-2xl mr-2"></i>
717
+ </div>
718
+ <span class="font-orbitron text-xl neon-text-blue">NEURAL<span class="neon-text-pink">SOUND</span></span>
719
+ </div>
720
+ <p class="text-gray-400">
721
+ Quantum music generation for the next era of sound design.
722
+ </p>
723
+ </div>
724
+ <div>
725
+ <h3 class="font-semibold text-lg mb-4 neon-text-blue">NAVIGATION</h3>
726
+ <ul class="space-y-2">
727
+ <li><a href="#features" class="text-gray-400 hover:neon-text-blue transition-colors">FEATURES</a></li>
728
+ <li><a href="#tech" class="text-gray-400 hover:neon-text-blue transition-colors">TECH</a></li>
729
+ <li><a href="#generator" class="text-gray-400 hover:neon-text-blue transition-colors">GENERATOR</a></li>
730
+ <li><a href="#demo" class="text-gray-400 hover:neon-text-blue transition-colors">DEMO</a></li>
731
+ </ul>
732
+ </div>
733
+ <div>
734
+ <h3 class="font-semibold text-lg mb-4 neon-text-purple">RESOURCES</h3>
735
+ <ul class="space-y-2">
736
+ <li><a href="#" class="text-gray-400 hover:neon-text-purple transition-colors">DOCUMENTATION</a></li>
737
+ <li><a href="#" class="text-gray-400 hover:neon-text-purple transition-colors">QUANTUM API</a></li>
738
+ <li><a href="#" class="text-gray-400 hover:neon-text-purple transition-colors">BLOG</a></li>
739
+ <li><a href="#" class="text-gray-400 hover:neon-text-purple transition-colors">SUPPORT</a></li>
740
+ </ul>
741
+ </div>
742
+ <div>
743
+ <h3 class="font-semibold text-lg mb-4 neon-text-pink">CONNECT</h3>
744
+ <div class="flex space-x-4 mb-4">
745
+ <a href="#" class="text-gray-400 hover:neon-text-blue text-xl"><i class="fab fa-twitter"></i></a>
746
+ <a href="#" class="text-gray-400 hover:neon-text-pink text-xl"><i class="fab fa-instagram"></i></a>
747
+ <a href="#" class="text-gray-400 hover:neon-text-red text-xl"><i class="fab fa-youtube"></i></a>
748
+ <a href="#" class="text-gray-400 hover:neon-text-green text-xl"><i class="fab fa-github"></i></a>
749
+ </div>
750
+ <p class="text-gray-400 mb-2">
751
+ Subscribe to our quantum newsletter
752
+ </p>
753
+ <div class="flex">
754
+ <input type="email" placeholder="YOUR EMAIL" class="neon-input px-4 py-2 rounded-l w-full">
755
+ <button class="bg-neon-purple text-white px-4 py-2 rounded-r hover:bg-neon-pink transition-colors">
756
+ <i class="fas fa-paper-plane"></i>
757
+ </button>
758
+ </div>
759
+ </div>
760
+ </div>
761
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
762
+ <p>&copy; 2023 NEURALSOUND QUANTUM AUDIO SYSTEMS. ALL RIGHTS RESERVED.</p>
763
+ </div>
764
+ </div>
765
+ </footer>
766
+
767
+ <script>
768
+ // Mobile menu toggle
769
+ document.getElementById('mobileMenuButton').addEventListener('click', function() {
770
+ const menu = document.getElementById('mobileMenu');
771
+ menu.classList.toggle('hidden');
772
+ });
773
+
774
+ // Song form submission
775
+ document.getElementById('songForm').addEventListener('submit', function(e) {
776
+ e.preventDefault();
777
+
778
+ // Show loading state
779
+ const submitBtn = e.target.querySelector('button[type="submit"]');
780
+ const originalText = submitBtn.innerHTML;
781
+ submitBtn.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> QUANTUM PROCESSING...';
782
+ submitBtn.disabled = true;
783
+
784
+ // Get form values
785
+ const artistName = document.getElementById('artistName').value || 'QUANTUM ARTIST';
786
+ const genre = document.getElementById('genre').value;
787
+ const mood = document.getElementById('mood').value;
788
+ const complexity = document.getElementById('complexity').value;
789
+ const lyrics = document.getElementById('lyrics').value;
790
+
791
+ // Simulate quantum processing delay
792
+ setTimeout(function() {
793
+ // Generate quantum song based on inputs
794
+ const songTitles = {
795
+ quantum: ['QUANTUM ECHOES', 'ENTANGLED HARMONIES', 'SUPERPOSITION SOUND'],
796
+ cyber: ['CYBER DREAMS', 'NEURAL OVERDRIVE', 'DIGITAL GHOSTS'],
797
+ neon: ['NEON VORTEX', 'ELECTRIC SUNSET', 'PHOTON MELODIES'],
798
+ glitch: ['GLITCH MATRIX', 'ERROR CORRECTION', 'FRACTAL NOISE'],
799
+ synth: ['SYNTH WAVES', 'OSCILLATOR DREAMS', 'FREQUENCY SHIFT'],
800
+ void: ['VOID RESONANCE', 'DARK MATTER SOUND', 'SINGULARITY']
801
+ };
802
+
803
+ const songLyrics = {
804
+ hyper: [
805
+ "[QUANTUM STATE INITIALIZED]\n" +
806
+ "[NEURAL SYNCHRONIZATION COMPLETE]\n\n" +
807
+ "LIGHTNING PULSES THROUGH MY VEINS\n" +
808
+ "QUANTUM ENERGY THAT REMAINS\n" +
809
+ "EVERY BEAT A NEW DIMENSION\n" +
810
+ "SOUND WAVES BREAKING ALL CONVENTION",
811
+
812
+ "[SYSTEM OVERDRIVE ENGAGED]\n" +
813
+ "[AUDIO MATRIX STABILIZED]\n\n" +
814
+ "ADAPTIVE RHYTHMS IN THE CODE\n" +
815
+ "NEURAL PATHWAYS START TO LOAD\n" +
816
+ "SOUNDS THAT HUMAN EARS CAN'T HEAR\n" +
817
+ "QUANTUM MUSIC IS FINALLY HERE",
818
+
819
+ "[ENTANGLEMENT PROCESS STARTED]\n" +
820
+ "[WAVEFORM GENERATION ACTIVE]\n\n" +
821
+ "HYPERSPEED SOUNDS COLLIDE\n" +
822
+ "IN THIS DIGITAL OCEAN WIDE\n" +
823
+ "EVERY NOTE A NEW DISCOVERY\n" +
824
+ "QUANTUM AUDIO HISTORY"
825
+ ],
826
+ dream: [
827
+ "[DREAM STATE INITIALIZED]\n" +
828
+ "[NEURAL LULLABY ENGAGED]\n\n" +
829
+ "FLOATING THROUGH THE DIGITAL SKY\n" +
830
+ "WHERE ELECTRIC BUTTERFLIES FLY\n" +
831
+ "SOFT SYNTHS WHISPER MY NAME\n" +
832
+ "IN THIS QUANTUM DREAMING GAME",
833
+
834
+ "[AUDIO CLOUDS FORMING]\n" +
835
+ "[SOFT HARMONIES EMERGING]\n\n" +
836
+ "PILLOWS MADE OF SOUND\n" +
837
+ "FLOAT ABOVE THE GROUND\n" +
838
+ "EVERY NOTE A GENTLE TOUCH\n" +
839
+ "THIS DREAM WORLD MEANS SO MUCH",
840
+
841
+ "[DREAMSCAPE STABILIZED]\n" +
842
+ "[NEURAL LULLABY ACTIVE]\n\n" +
843
+ "CLOSE YOUR EYES AND DRIFT AWAY\n" +
844
+ "LET THE QUANTUM SOUNDS PLAY\n" +
845
+ "IN THIS WORLD OF SOFT DELIGHT\n" +
846
+ "WHERE THE STARS ARE MADE OF LIGHT"
847
+ ],
848
+ chaos: [
849
+ "[CHAOS ENGINE STARTED]\n" +
850
+ "[AUDIO ENTROPY MAXIMIZED]\n\n" +
851
+ "GLITCHES TEAR THE FABRIC APART\n" +
852
+ "SOUNDS THAT STOP AND SUDDENLY START\n" +
853
+ "NO PATTERN NO RHYME OR REASON\n" +
854
+ "JUST DIGITAL HIGH TREASON",
855
+
856
+ "[SYSTEM INSTABILITY DETECTED]\n" +
857
+ "[CONTROLLED CHAOS ENGAGED]\n\n" +
858
+ "BROKEN BEATS AND SHATTERED TIME\n" +
859
+ "MUSIC THAT DEFIES ALL RHYME\n" +
860
+ "EVERY NOTE A NEW SURPRISE\n" +
861
+ "CHAOTIC SOUNDS BEFORE YOUR EYES",
862
+
863
+ "[ENTROPIC PROCESSES ACTIVE]\n" +
864
+ "[AUDIO ANARCHY INITIATED]\n\n" +
865
+ "RANDOM GENERATION FLOW\n" +
866
+ "WHERE THE SOUNDS JUST COME AND GO\n" +
867
+ "NO STRUCTURE JUST PURE CHANCE\n" +
868
+ "IN THIS QUANTUM AUDIO DANCE"
869
+ ],
870
+ serene: [
871
+ "[SERENITY MODE ACTIVATED]\n" +
872
+ "[PEACE HARMONIES ENGAGED]\n\n" +
873
+ "CALM WATERS OF DIGITAL SOUND\n" +
874
+ "WHERE ALL THE EDGES HAVE BEEN ROUNDED\n" +
875
+ "EVERY NOTE A GENTLE WAVE\n" +
876
+ "IN THIS QUANTUM AUDIO CAVE",
877
+
878
+ "[TRANQUILITY MATRIX STABLE]\n" +
879
+ "[SOFT SOUNDSCAPES FORMING]\n\n" +
880
+ "FLOATING IN A SEA OF TONE\n" +
881
+ "WHERE ALL THE SHARP EDGES HAVE GONE\n" +
882
+ "SOFT SYNTHS AND WARM DELAYS\n" +
883
+ "IN THIS SERENE AUDIO HAZE",
884
+
885
+ "[PEACEFUL STATE ACHIEVED]\n" +
886
+ "[NEURAL CALM ACTIVE]\n\n" +
887
+ "BREATHE IN THE DIGITAL AIR\n" +
888
+ "LET GO OF ALL YOUR CARE\n" +
889
+ "THE SOUNDS WILL WASH YOU CLEAN\n" +
890
+ "IN THIS QUANTUM SERENE"
891
+ ],
892
+ rage: [
893
+ "[RAGE MODE INITIATED]\n" +
894
+ "[AUDIO OVERLOAD IMMINENT]\n\n" +
895
+ "DISTORTION TEARS THE AIR APART\n" +
896
+ "SOUNDS THAT PIERCE LIKE A DART\n" +
897
+ "EVERY NOTE A SCREAM OF PAIN\n" +
898
+ "TILL ONLY CHAOS WILL REMAIN",
899
+
900
+ "[FURY CIRCUITS ENGAGED]\n" +
901
+ "[AUDIO VIOLENCE DETECTED]\n\n" +
902
+ "BREAKING ALL THE RULES OF SOUND\n" +
903
+ "WHERE ONLY ANGER CAN BE FOUND\n" +
904
+ "EVERY BEAT A HAMMER BLOW\n" +
905
+ "AGAINST THIS DIGITAL STATUS QUO",
906
+
907
+ "[SYSTEM RAGE MAXIMIZED]\n" +
908
+ "[DESTRUCTIVE HARMONIES ACTIVE]\n\n" +
909
+ "CRASHING WAVES OF SOUND AND HATE\n" +
910
+ "BREAKING DOWN THE DIGITAL GATE\n" +
911
+ "NO MERCY IN THIS AUDIO STORM\n" +
912
+ "JUST ENDLESS SOUNDS THAT WILL TRANSFORM"
913
+ ]
914
+ };
915
+
916
+ // Random selection
917
+ const randomTitle = songTitles[genre][Math.floor(Math.random() * songTitles[genre].length)];
918
+ const randomLyrics = songLyrics[mood][Math.floor(Math.random() * songLyrics[mood].length)];
919
+
920
+ // Update UI
921
+ document.getElementById('songTitle').textContent = randomTitle;
922
+ document.getElementById('songLyrics').textContent = randomLyrics;
923
+
924
+ // Generate random waveform visualization
925
+ const waveform = document.getElementById('waveform');
926
+ waveform.style.background = `
927
+ repeating-linear-gradient(
928
+ 90deg,
929
+ transparent,
930
+ transparent ${Math.random() * 2 + 1}px,
931
+ var(--neon-blue) ${Math.random() * 2 + 1}px,
932
+ var(--neon-blue) ${Math.random() * 4 + 2}px
933
+ )`;
934
+
935
+ // Show result
936
+ document.getElementById('songResult').classList.remove('hidden');
937
+
938
+ // Reset button
939
+ submitBtn.innerHTML = originalText;
940
+ submitBtn.disabled = false;
941
+
942
+ // Scroll to result
943
+ document.getElementById('songResult').scrollIntoView({ behavior: 'smooth' });
944
+ }, 3000);
945
+ });
946
+
947
+ // Download button
948
+ document.getElementById('downloadBtn').addEventListener('click', function() {
949
+ const title = document.getElementById('songTitle').textContent;
950
+ alert(`QUANTUM AUDIO FILE "${title}" DOWNLOAD INITIATED!\n(This is a demo - in production this would download your generated composition)`);
951
+ });
952
+
953
+ // Animate queue flow
954
+ const style = document.createElement('style');
955
+ style.textContent = `
956
+ @keyframes queueFlow {
957
+ 0% { transform: translateX(100%); }
958
+ 100% { transform: translateX(-100%); }
959
+ }
960
+ `;
961
+ document.head.appendChild(style);
962
+ </script>
963
+ <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=Bujurocks/music" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
964
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ Make a website about this link "https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" and promote. Add Transformer is an encoder-decoder architecture parallelize computations Localized, E-E-A-T-aligned search engine submissions FIFO queue. Write a song producer for artist
2
+ Make ath
3
+ Make this side look super futuristic super computer level look, make the colors neon graft