GPUhead commited on
Commit
aa229e3
·
verified ·
1 Parent(s): 039b9b4

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +715 -19
index.html CHANGED
@@ -1,19 +1,715 @@
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>SoundLab - Transform Your Music</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ :root {
17
+ --primary: #8a2be2;
18
+ --secondary: #ff6b6b;
19
+ --accent: #00d4ff;
20
+ --dark: #121212;
21
+ --light: #f8f9fa;
22
+ --gray: #2d2d2d;
23
+ --transition: all 0.3s ease;
24
+ }
25
+
26
+ body {
27
+ background: linear-gradient(135deg, var(--dark), #1a1a2e);
28
+ color: var(--light);
29
+ min-height: 100vh;
30
+ line-height: 1.6;
31
+ }
32
+
33
+ .container {
34
+ max-width: 1200px;
35
+ margin: 0 auto;
36
+ padding: 0 20px;
37
+ }
38
+
39
+ /* Header */
40
+ header {
41
+ background: rgba(18, 18, 18, 0.95);
42
+ backdrop-filter: blur(10px);
43
+ position: sticky;
44
+ top: 0;
45
+ z-index: 100;
46
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
47
+ }
48
+
49
+ .header-content {
50
+ display: flex;
51
+ justify-content: space-between;
52
+ align-items: center;
53
+ padding: 15px 0;
54
+ }
55
+
56
+ .logo {
57
+ display: flex;
58
+ align-items: center;
59
+ gap: 10px;
60
+ font-size: 1.8rem;
61
+ font-weight: 700;
62
+ color: var(--primary);
63
+ }
64
+
65
+ .logo i {
66
+ color: var(--secondary);
67
+ }
68
+
69
+ .nav-links {
70
+ display: flex;
71
+ gap: 30px;
72
+ }
73
+
74
+ .nav-links a {
75
+ color: var(--light);
76
+ text-decoration: none;
77
+ font-weight: 500;
78
+ transition: var(--transition);
79
+ position: relative;
80
+ }
81
+
82
+ .nav-links a:hover {
83
+ color: var(--accent);
84
+ }
85
+
86
+ .nav-links a::after {
87
+ content: '';
88
+ position: absolute;
89
+ bottom: -5px;
90
+ left: 0;
91
+ width: 0;
92
+ height: 2px;
93
+ background: var(--accent);
94
+ transition: var(--transition);
95
+ }
96
+
97
+ .nav-links a:hover::after {
98
+ width: 100%;
99
+ }
100
+
101
+ .anycoder-link {
102
+ color: var(--secondary);
103
+ text-decoration: none;
104
+ font-weight: 600;
105
+ transition: var(--transition);
106
+ }
107
+
108
+ .anycoder-link:hover {
109
+ color: var(--accent);
110
+ }
111
+
112
+ /* Hero Section */
113
+ .hero {
114
+ padding: 80px 0;
115
+ text-align: center;
116
+ background: radial-gradient(circle at top right, rgba(138, 43, 226, 0.2), transparent 50%),
117
+ radial-gradient(circle at bottom left, rgba(255, 107, 107, 0.2), transparent 50%);
118
+ }
119
+
120
+ .hero h1 {
121
+ font-size: 3.5rem;
122
+ margin-bottom: 20px;
123
+ background: linear-gradient(to right, var(--primary), var(--secondary), var(--accent));
124
+ -webkit-background-clip: text;
125
+ background-clip: text;
126
+ color: transparent;
127
+ line-height: 1.2;
128
+ }
129
+
130
+ .hero p {
131
+ font-size: 1.2rem;
132
+ max-width: 700px;
133
+ margin: 0 auto 40px;
134
+ color: #ccc;
135
+ }
136
+
137
+ /* Upload Section */
138
+ .upload-section {
139
+ background: rgba(45, 45, 45, 0.5);
140
+ backdrop-filter: blur(10px);
141
+ border-radius: 20px;
142
+ padding: 40px;
143
+ margin: 40px auto;
144
+ max-width: 800px;
145
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
146
+ border: 1px solid rgba(255, 255, 255, 0.1);
147
+ }
148
+
149
+ .upload-area {
150
+ border: 3px dashed var(--primary);
151
+ border-radius: 15px;
152
+ padding: 50px 20px;
153
+ text-align: center;
154
+ cursor: pointer;
155
+ transition: var(--transition);
156
+ margin-bottom: 30px;
157
+ position: relative;
158
+ overflow: hidden;
159
+ }
160
+
161
+ .upload-area:hover {
162
+ border-color: var(--accent);
163
+ background: rgba(138, 43, 226, 0.05);
164
+ }
165
+
166
+ .upload-area i {
167
+ font-size: 4rem;
168
+ color: var(--primary);
169
+ margin-bottom: 20px;
170
+ }
171
+
172
+ .upload-area h3 {
173
+ font-size: 1.5rem;
174
+ margin-bottom: 10px;
175
+ }
176
+
177
+ .upload-area p {
178
+ color: #aaa;
179
+ }
180
+
181
+ #file-input {
182
+ position: absolute;
183
+ top: 0;
184
+ left: 0;
185
+ width: 100%;
186
+ height: 100%;
187
+ opacity: 0;
188
+ cursor: pointer;
189
+ }
190
+
191
+ /* Effects Section */
192
+ .effects-section {
193
+ margin: 60px 0;
194
+ }
195
+
196
+ .section-title {
197
+ text-align: center;
198
+ margin-bottom: 40px;
199
+ font-size: 2.2rem;
200
+ position: relative;
201
+ display: inline-block;
202
+ left: 50%;
203
+ transform: translateX(-50%);
204
+ }
205
+
206
+ .section-title::after {
207
+ content: '';
208
+ position: absolute;
209
+ bottom: -10px;
210
+ left: 10%;
211
+ width: 80%;
212
+ height: 3px;
213
+ background: linear-gradient(to right, transparent, var(--accent), transparent);
214
+ }
215
+
216
+ .effects-grid {
217
+ display: grid;
218
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
219
+ gap: 30px;
220
+ }
221
+
222
+ .effect-card {
223
+ background: rgba(45, 45, 45, 0.7);
224
+ border-radius: 15px;
225
+ padding: 25px;
226
+ transition: var(--transition);
227
+ cursor: pointer;
228
+ border: 1px solid rgba(255, 255, 255, 0.05);
229
+ }
230
+
231
+ .effect-card:hover {
232
+ transform: translateY(-10px);
233
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
234
+ border-color: var(--primary);
235
+ }
236
+
237
+ .effect-icon {
238
+ width: 60px;
239
+ height: 60px;
240
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
241
+ border-radius: 50%;
242
+ display: flex;
243
+ align-items: center;
244
+ justify-content: center;
245
+ margin-bottom: 20px;
246
+ }
247
+
248
+ .effect-icon i {
249
+ font-size: 1.8rem;
250
+ color: white;
251
+ }
252
+
253
+ .effect-card h3 {
254
+ font-size: 1.4rem;
255
+ margin-bottom: 10px;
256
+ }
257
+
258
+ .effect-card p {
259
+ color: #bbb;
260
+ margin-bottom: 20px;
261
+ }
262
+
263
+ .sliders {
264
+ margin-top: 15px;
265
+ }
266
+
267
+ .slider-container {
268
+ margin-bottom: 15px;
269
+ }
270
+
271
+ .slider-label {
272
+ display: flex;
273
+ justify-content: space-between;
274
+ margin-bottom: 5px;
275
+ }
276
+
277
+ .slider {
278
+ width: 100%;
279
+ height: 6px;
280
+ -webkit-appearance: none;
281
+ background: rgba(255, 255, 255, 0.1);
282
+ border-radius: 10px;
283
+ outline: none;
284
+ }
285
+
286
+ .slider::-webkit-slider-thumb {
287
+ -webkit-appearance: none;
288
+ width: 20px;
289
+ height: 20px;
290
+ border-radius: 50%;
291
+ background: var(--accent);
292
+ cursor: pointer;
293
+ }
294
+
295
+ /* Preview Section */
296
+ .preview-section {
297
+ background: rgba(45, 45, 45, 0.5);
298
+ border-radius: 20px;
299
+ padding: 40px;
300
+ margin: 60px auto;
301
+ max-width: 800px;
302
+ }
303
+
304
+ .audio-player {
305
+ width: 100%;
306
+ margin: 20px 0;
307
+ }
308
+
309
+ .player-controls {
310
+ display: flex;
311
+ justify-content: center;
312
+ gap: 20px;
313
+ margin-top: 20px;
314
+ }
315
+
316
+ .control-btn {
317
+ width: 50px;
318
+ height: 50px;
319
+ border-radius: 50%;
320
+ background: var(--primary);
321
+ border: none;
322
+ color: white;
323
+ font-size: 1.2rem;
324
+ cursor: pointer;
325
+ transition: var(--transition);
326
+ display: flex;
327
+ align-items: center;
328
+ justify-content: center;
329
+ }
330
+
331
+ .control-btn:hover {
332
+ background: var(--secondary);
333
+ transform: scale(1.1);
334
+ }
335
+
336
+ .download-btn {
337
+ background: linear-gradient(to right, var(--primary), var(--secondary));
338
+ color: white;
339
+ border: none;
340
+ padding: 12px 25px;
341
+ border-radius: 30px;
342
+ font-weight: 600;
343
+ cursor: pointer;
344
+ transition: var(--transition);
345
+ display: block;
346
+ margin: 30px auto 0;
347
+ font-size: 1rem;
348
+ }
349
+
350
+ .download-btn:hover {
351
+ transform: translateY(-3px);
352
+ box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
353
+ }
354
+
355
+ /* Footer */
356
+ footer {
357
+ background: rgba(18, 18, 18, 0.9);
358
+ padding: 40px 0;
359
+ margin-top: 60px;
360
+ text-align: center;
361
+ }
362
+
363
+ .footer-content {
364
+ display: flex;
365
+ flex-direction: column;
366
+ align-items: center;
367
+ gap: 20px;
368
+ }
369
+
370
+ .social-links {
371
+ display: flex;
372
+ gap: 20px;
373
+ }
374
+
375
+ .social-links a {
376
+ width: 40px;
377
+ height: 40px;
378
+ border-radius: 50%;
379
+ background: var(--gray);
380
+ display: flex;
381
+ align-items: center;
382
+ justify-content: center;
383
+ color: white;
384
+ text-decoration: none;
385
+ transition: var(--transition);
386
+ }
387
+
388
+ .social-links a:hover {
389
+ background: var(--primary);
390
+ transform: translateY(-5px);
391
+ }
392
+
393
+ .copyright {
394
+ color: #aaa;
395
+ font-size: 0.9rem;
396
+ }
397
+
398
+ /* Responsive Design */
399
+ @media (max-width: 768px) {
400
+ .header-content {
401
+ flex-direction: column;
402
+ gap: 15px;
403
+ }
404
+
405
+ .nav-links {
406
+ gap: 15px;
407
+ }
408
+
409
+ .hero h1 {
410
+ font-size: 2.5rem;
411
+ }
412
+
413
+ .upload-section, .preview-section {
414
+ padding: 25px;
415
+ }
416
+
417
+ .effects-grid {
418
+ grid-template-columns: 1fr;
419
+ }
420
+ }
421
+
422
+ /* Animation for processing */
423
+ @keyframes pulse {
424
+ 0% { transform: scale(1); }
425
+ 50% { transform: scale(1.05); }
426
+ 100% { transform: scale(1); }
427
+ }
428
+
429
+ .processing {
430
+ animation: pulse 1.5s infinite;
431
+ }
432
+
433
+ /* Hidden class for toggling */
434
+ .hidden {
435
+ display: none;
436
+ }
437
+ </style>
438
+ </head>
439
+ <body>
440
+ <header>
441
+ <div class="container">
442
+ <div class="header-content">
443
+ <div class="logo">
444
+ <i class="fas fa-wave-square"></i>
445
+ <span>SoundLab</span>
446
+ </div>
447
+ <div class="nav-links">
448
+ <a href="#">Home</a>
449
+ <a href="#">Effects</a>
450
+ <a href="#">Library</a>
451
+ <a href="#">About</a>
452
+ </div>
453
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
454
+ </div>
455
+ </div>
456
+ </header>
457
+
458
+ <section class="hero">
459
+ <div class="container">
460
+ <h1>Transform Your Music with Advanced Audio Effects</h1>
461
+ <p>Upload your tracks and instantly create slowed + reverb, 8D/16D, and speed-up versions. Customize every detail to make your perfect remix.</p>
462
+ </div>
463
+ </section>
464
+
465
+ <div class="container">
466
+ <section class="upload-section">
467
+ <h2 class="section-title">Upload Your Audio</h2>
468
+ <div class="upload-area" id="upload-area">
469
+ <i class="fas fa-cloud-upload-alt"></i>
470
+ <h3>Drag & Drop Your Audio File</h3>
471
+ <p>Supports MP3, WAV, FLAC, and other common formats</p>
472
+ <input type="file" id="file-input" accept="audio/*">
473
+ </div>
474
+ <div id="file-info" class="hidden">
475
+ <p>File selected: <span id="file-name"></span></p>
476
+ </div>
477
+ </section>
478
+
479
+ <section class="effects-section">
480
+ <h2 class="section-title">Audio Effects</h2>
481
+ <div class="effects-grid">
482
+ <div class="effect-card" id="slowed-reverb">
483
+ <div class="effect-icon">
484
+ <i class="fas fa-tachometer-alt"></i>
485
+ </div>
486
+ <h3>Slowed + Reverb</h3>
487
+ <p>Create dreamy, atmospheric versions of your tracks with pitch adjustment and reverb effects.</p>
488
+ <div class="sliders">
489
+ <div class="slider-container">
490
+ <div class="slider-label">
491
+ <span>Slowdown</span>
492
+ <span id="slow-value">20%</span>
493
+ </div>
494
+ <input type="range" min="0" max="100" value="20" class="slider" id="slow-slider">
495
+ </div>
496
+ <div class="slider-container">
497
+ <div class="slider-label">
498
+ <span>Reverb</span>
499
+ <span id="reverb-value">70%</span>
500
+ </div>
501
+ <input type="range" min="0" max="100" value="70" class="slider" id="reverb-slider">
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <div class="effect-card" id="spatial-audio">
507
+ <div class="effect-icon">
508
+ <i class="fas fa-compass"></i>
509
+ </div>
510
+ <h3>8D / 16D Audio</h3>
511
+ <p>Immersive spatial audio that moves around your head for a unique listening experience.</p>
512
+ <div class="sliders">
513
+ <div class="slider-container">
514
+ <div class="slider-label">
515
+ <span>Rotation Speed</span>
516
+ <span id="rotation-value">Medium</span>
517
+ </div>
518
+ <input type="range" min="0" max="100" value="50" class="slider" id="rotation-slider">
519
+ </div>
520
+ <div class="slider-container">
521
+ <div class="slider-label">
522
+ <span>Dimension</span>
523
+ <span id="dimension-value">8D</span>
524
+ </div>
525
+ <input type="range" min="0" max="100" value="0" class="slider" id="dimension-slider">
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+ <div class="effect-card" id="speed-control">
531
+ <div class="effect-icon">
532
+ <i class="fas fa-forward"></i>
533
+ </div>
534
+ <h3>Speed Control</h3>
535
+ <p>Adjust the playback speed of your audio without changing the pitch (or with pitch correction).</p>
536
+ <div class="sliders">
537
+ <div class="slider-container">
538
+ <div class="slider-label">
539
+ <span>Speed</span>
540
+ <span id="speed-value">100%</span>
541
+ </div>
542
+ <input type="range" min="50" max="200" value="100" class="slider" id="speed-slider">
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </section>
548
+
549
+ <section class="preview-section hidden" id="preview-section">
550
+ <h2 class="section-title">Preview & Download</h2>
551
+ <div class="audio-player">
552
+ <audio id="audio-player" controls></audio>
553
+ </div>
554
+ <div class="player-controls">
555
+ <button class="control-btn" id="play-btn">
556
+ <i class="fas fa-play"></i>
557
+ </button>
558
+ <button class="control-btn" id="pause-btn">
559
+ <i class="fas fa-pause"></i>
560
+ </button>
561
+ <button class="control-btn" id="stop-btn">
562
+ <i class="fas fa-stop"></i>
563
+ </button>
564
+ </div>
565
+ <button class="download-btn" id="download-btn">
566
+ <i class="fas fa-download"></i> Download Processed Audio
567
+ </button>
568
+ </section>
569
+ </div>
570
+
571
+ <footer>
572
+ <div class="container">
573
+ <div class="footer-content">
574
+ <div class="logo">
575
+ <i class="fas fa-wave-square"></i>
576
+ <span>SoundLab</span>
577
+ </div>
578
+ <div class="social-links">
579
+ <a href="#"><i class="fab fa-twitter"></i></a>
580
+ <a href="#"><i class="fab fa-instagram"></i></a>
581
+ <a href="#"><i class="fab fa-tiktok"></i></a>
582
+ <a href="#"><i class="fab fa-youtube"></i></a>
583
+ </div>
584
+ <p class="copyright">© 2023 SoundLab. All rights reserved.</p>
585
+ </div>
586
+ </div>
587
+ </footer>
588
+
589
+ <script>
590
+ document.addEventListener('DOMContentLoaded', function() {
591
+ // Elements
592
+ const fileInput = document.getElementById('file-input');
593
+ const uploadArea = document.getElementById('upload-area');
594
+ const fileInfo = document.getElementById('file-info');
595
+ const fileName = document.getElementById('file-name');
596
+ const previewSection = document.getElementById('preview-section');
597
+ const audioPlayer = document.getElementById('audio-player');
598
+ const playBtn = document.getElementById('play-btn');
599
+ const pauseBtn = document.getElementById('pause-btn');
600
+ const stopBtn = document.getElementById('stop-btn');
601
+ const downloadBtn = document.getElementById('download-btn');
602
+
603
+ // Slider elements
604
+ const slowSlider = document.getElementById('slow-slider');
605
+ const slowValue = document.getElementById('slow-value');
606
+ const reverbSlider = document.getElementById('reverb-slider');
607
+ const reverbValue = document.getElementById('reverb-value');
608
+ const rotationSlider = document.getElementById('rotation-slider');
609
+ const rotationValue = document.getElementById('rotation-value');
610
+ const dimensionSlider = document.getElementById('dimension-slider');
611
+ const dimensionValue = document.getElementById('dimension-value');
612
+ const speedSlider = document.getElementById('speed-slider');
613
+ const speedValue = document.getElementById('speed-value');
614
+
615
+ // File upload handling
616
+ fileInput.addEventListener('change', function(e) {
617
+ if (this.files && this.files[0]) {
618
+ const file = this.files[0];
619
+ fileName.textContent = file.name;
620
+ fileInfo.classList.remove('hidden');
621
+
622
+ // Create a URL for the file
623
+ const url = URL.createObjectURL(file);
624
+ audioPlayer.src = url;
625
+
626
+ // Show preview section
627
+ previewSection.classList.remove('hidden');
628
+
629
+ // Add processing animation
630
+ uploadArea.classList.add('processing');
631
+
632
+ // Simulate processing time
633
+ setTimeout(() => {
634
+ uploadArea.classList.remove('processing');
635
+ }, 2000);
636
+ }
637
+ });
638
+
639
+ // Drag and drop functionality
640
+ uploadArea.addEventListener('dragover', function(e) {
641
+ e.preventDefault();
642
+ this.style.borderColor = 'var(--accent)';
643
+ this.style.backgroundColor = 'rgba(0, 212, 255, 0.05)';
644
+ });
645
+
646
+ uploadArea.addEventListener('dragleave', function() {
647
+ this.style.borderColor = 'var(--primary)';
648
+ this.style.backgroundColor = 'transparent';
649
+ });
650
+
651
+ uploadArea.addEventListener('drop', function(e) {
652
+ e.preventDefault();
653
+ this.style.borderColor = 'var(--primary)';
654
+ this.style.backgroundColor = 'transparent';
655
+
656
+ if (e.dataTransfer.files && e.dataTransfer.files[0]) {
657
+ fileInput.files = e.dataTransfer.files;
658
+ const event = new Event('change');
659
+ fileInput.dispatchEvent(event);
660
+ }
661
+ });
662
+
663
+ // Player controls
664
+ playBtn.addEventListener('click', function() {
665
+ audioPlayer.play();
666
+ });
667
+
668
+ pauseBtn.addEventListener('click', function() {
669
+ audioPlayer.pause();
670
+ });
671
+
672
+ stopBtn.addEventListener('click', function() {
673
+ audioPlayer.pause();
674
+ audioPlayer.currentTime = 0;
675
+ });
676
+
677
+ // Download button
678
+ downloadBtn.addEventListener('click', function() {
679
+ alert('Your processed audio is being prepared for download. This would connect to a backend service in a real application.');
680
+ });
681
+
682
+ // Slider value updates
683
+ slowSlider.addEventListener('input', function() {
684
+ slowValue.textContent = `${this.value}%`;
685
+ });
686
+
687
+ reverbSlider.addEventListener('input', function() {
688
+ reverbValue.textContent = `${this.value}%`;
689
+ });
690
+
691
+ rotationSlider.addEventListener('input', function() {
692
+ const values = ['Slow', 'Medium', 'Fast'];
693
+ rotationValue.textContent = values[Math.floor(this.value / 33.4)];
694
+ });
695
+
696
+ dimensionSlider.addEventListener('input', function() {
697
+ dimensionValue.textContent = this.value < 50 ? '8D' : '16D';
698
+ });
699
+
700
+ speedSlider.addEventListener('input', function() {
701
+ speedValue.textContent = `${this.value}%`;
702
+ });
703
+
704
+ // Effect card selection
705
+ const effectCards = document.querySelectorAll('.effect-card');
706
+ effectCards.forEach(card => {
707
+ card.addEventListener('click', function() {
708
+ effectCards.forEach(c => c.style.borderColor = 'rgba(255, 255, 255, 0.05)';
709
+ this.style.borderColor = 'var(--accent)';
710
+ });
711
+ });
712
+ });
713
+ </script>
714
+ </body>
715
+ </html>