Hugging Face's logo

Spaces:
melromyeah
/
dj-console
Running

App Files Community
melromyeah commited on
Commit
2ef2c35
·
verified ·
1 Parent(s): d32be87

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +619 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dj Console
3
- emoji: 🐨
4
- colorFrom: purple
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: dj-console
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,619 @@
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>Virtual DJ Mixer</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
+ /* Custom styles for turntables and knobs */
11
+ .turntable {
12
+ background: radial-gradient(circle, #111 30%, #222 70%, #333 100%);
13
+ box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5);
14
+ }
15
+
16
+ .vinyl {
17
+ background: radial-gradient(circle, #111 10%, transparent 10.5%),
18
+ repeating-radial-gradient(circle, #111 0, #111 1px, #333 1px, #333 2px);
19
+ background-size: 100% 100%, 100% 100%;
20
+ animation: spin 5s linear infinite;
21
+ animation-play-state: paused;
22
+ }
23
+
24
+ .knob {
25
+ background: radial-gradient(circle at 30% 30%, #555, #222);
26
+ box-shadow: 0 2px 5px rgba(0,0,0,0.5);
27
+ }
28
+
29
+ .knob-mark {
30
+ background: linear-gradient(to bottom, #ff0, #f80);
31
+ box-shadow: 0 0 3px rgba(255,255,0,0.8);
32
+ }
33
+
34
+ .fader-track {
35
+ background: linear-gradient(to right, #333, #666, #333);
36
+ }
37
+
38
+ .fader-knob {
39
+ background: linear-gradient(to bottom, #555, #999, #555);
40
+ box-shadow: 0 2px 5px rgba(0,0,0,0.5);
41
+ }
42
+
43
+ .button {
44
+ transition: all 0.1s;
45
+ }
46
+
47
+ .button:active {
48
+ transform: translateY(2px);
49
+ box-shadow: 0 1px 2px rgba(0,0,0,0.3);
50
+ }
51
+
52
+ .active-effect {
53
+ background: linear-gradient(to bottom, #4ade80, #16a34a);
54
+ box-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
55
+ }
56
+
57
+ @keyframes spin {
58
+ from { transform: rotate(0deg); }
59
+ to { transform: rotate(360deg); }
60
+ }
61
+
62
+ /* Custom scrollbar for track list */
63
+ .track-list::-webkit-scrollbar {
64
+ width: 8px;
65
+ }
66
+
67
+ .track-list::-webkit-scrollbar-track {
68
+ background: #333;
69
+ }
70
+
71
+ .track-list::-webkit-scrollbar-thumb {
72
+ background: #666;
73
+ border-radius: 4px;
74
+ }
75
+
76
+ .track-list::-webkit-scrollbar-thumb:hover {
77
+ background: #888;
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center py-8 px-4">
82
+ <header class="text-center mb-8">
83
+ <h1 class="text-4xl font-bold bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-transparent">VIRTUAL DJ MIXER</h1>
84
+ <p class="text-gray-400 mt-2">Spin and mix like a pro</p>
85
+ </header>
86
+
87
+ <main class="w-full max-w-6xl bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
88
+ <!-- Main mixer section -->
89
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
90
+ <!-- Left deck -->
91
+ <div class="bg-gray-700 rounded-xl p-4 shadow-lg">
92
+ <div class="flex justify-between items-center mb-4">
93
+ <h2 class="text-xl font-bold text-purple-300">DECK A</h2>
94
+ <div class="flex space-x-2">
95
+ <button class="button bg-gray-600 hover:bg-gray-500 w-8 h-8 rounded-full flex items-center justify-center">
96
+ <i class="fas fa-sync-alt text-sm"></i>
97
+ </button>
98
+ <button class="button bg-gray-600 hover:bg-gray-500 w-8 h-8 rounded-full flex items-center justify-center">
99
+ <i class="fas fa-random text-sm"></i>
100
+ </button>
101
+ </div>
102
+ </div>
103
+
104
+ <div class="turntable relative w-full aspect-square rounded-full flex items-center justify-center mb-4">
105
+ <div class="vinyl absolute w-3/4 h-3/4 rounded-full" id="vinyl-a"></div>
106
+ <div class="absolute w-1/6 h-1/6 rounded-full bg-gray-900 z-10"></div>
107
+ </div>
108
+
109
+ <div class="flex justify-between mb-4">
110
+ <button class="button bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg font-medium" id="play-a">
111
+ <i class="fas fa-play mr-2"></i> Play
112
+ </button>
113
+ <button class="button bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-lg font-medium">
114
+ <i class="fas fa-folder-open mr-2"></i> Load
115
+ </button>
116
+ </div>
117
+
118
+ <div class="mb-4">
119
+ <div class="flex justify-between items-center mb-2">
120
+ <span class="text-sm font-medium">Tempo</span>
121
+ <span class="text-xs bg-gray-600 px-2 py-1 rounded" id="bpm-a">128 BPM</span>
122
+ </div>
123
+ <input type="range" min="80" max="160" value="128" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer" id="tempo-a">
124
+ </div>
125
+
126
+ <div class="grid grid-cols-3 gap-4 mb-4">
127
+ <div class="flex flex-col items-center">
128
+ <div class="knob relative w-12 h-12 rounded-full mb-2 flex items-center justify-center" id="high-a">
129
+ <div class="knob-mark absolute w-2 h-4 rounded-full top-0"></div>
130
+ </div>
131
+ <span class="text-xs">High</span>
132
+ </div>
133
+ <div class="flex flex-col items-center">
134
+ <div class="knob relative w-12 h-12 rounded-full mb-2 flex items-center justify-center" id="mid-a">
135
+ <div class="knob-mark absolute w-2 h-4 rounded-full top-0"></div>
136
+ </div>
137
+ <span class="text-xs">Mid</span>
138
+ </div>
139
+ <div class="flex flex-col items-center">
140
+ <div class="knob relative w-12 h-12 rounded-full mb-2 flex items-center justify-center" id="low-a">
141
+ <div class="knob-mark absolute w-2 h-4 rounded-full top-0"></div>
142
+ </div>
143
+ <span class="text-xs">Low</span>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="flex justify-between items-center">
148
+ <span class="text-sm font-medium">Volume</span>
149
+ <span class="text-xs bg-gray-600 px-2 py-1 rounded" id="volume-value-a">75%</span>
150
+ </div>
151
+ <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer mb-2" id="volume-a">
152
+
153
+ <div class="flex justify-between items-center">
154
+ <span class="text-sm font-medium">Filter</span>
155
+ <span class="text-xs bg-gray-600 px-2 py-1 rounded" id="filter-value-a">50%</span>
156
+ </div>
157
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer" id="filter-a">
158
+ </div>
159
+
160
+ <!-- Mixer section -->
161
+ <div class="bg-gray-700 rounded-xl p-4 shadow-lg flex flex-col">
162
+ <h2 class="text-xl font-bold text-center text-blue-300 mb-6">MIXER</h2>
163
+
164
+ <div class="flex-grow flex flex-col justify-between">
165
+ <div class="flex justify-center mb-8">
166
+ <div class="fader-track relative w-8 h-48 rounded-lg mx-4">
167
+ <div class="fader-knob absolute w-12 h-6 rounded-lg -left-2 cursor-pointer" id="fader-a" style="top: 30%;"></div>
168
+ </div>
169
+ <div class="fader-track relative w-8 h-48 rounded-lg mx-4">
170
+ <div class="fader-knob absolute w-12 h-6 rounded-lg -left-2 cursor-pointer" id="fader-b" style="top: 70%;"></div>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="mb-8">
175
+ <div class="flex justify-between items-center mb-2">
176
+ <span class="text-sm font-medium">Crossfader</span>
177
+ <span class="text-xs bg-gray-600 px-2 py-1 rounded" id="crossfader-value">Center</span>
178
+ </div>
179
+ <div class="fader-track relative w-full h-4 rounded-lg">
180
+ <div class="fader-knob absolute w-6 h-8 rounded-lg -top-2 cursor-pointer" id="crossfader" style="left: 50%;"></div>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="grid grid-cols-4 gap-2 mb-4">
185
+ <button class="button effect-btn bg-gray-600 hover:bg-gray-500 py-2 rounded-lg text-xs" data-effect="echo">
186
+ <i class="fas fa-wave-square mr-1"></i> Echo
187
+ </button>
188
+ <button class="button effect-btn bg-gray-600 hover:bg-gray-500 py-2 rounded-lg text-xs" data-effect="flanger">
189
+ <i class="fas fa-water mr-1"></i> Flanger
190
+ </button>
191
+ <button class="button effect-btn bg-gray-600 hover:bg-gray-500 py-2 rounded-lg text-xs" data-effect="reverb">
192
+ <i class="fas fa-mountain mr-1"></i> Reverb
193
+ </button>
194
+ <button class="button effect-btn bg-gray-600 hover:bg-gray-500 py-2 rounded-lg text-xs" data-effect="phaser">
195
+ <i class="fas fa-slash mr-1"></i> Phaser
196
+ </button>
197
+ </div>
198
+
199
+ <div class="flex justify-center">
200
+ <button class="button bg-yellow-500 hover:bg-yellow-600 px-4 py-2 rounded-lg font-medium">
201
+ <i class="fas fa-record-vinyl mr-2"></i> Record Mix
202
+ </button>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Right deck -->
208
+ <div class="bg-gray-700 rounded-xl p-4 shadow-lg">
209
+ <div class="flex justify-between items-center mb-4">
210
+ <h2 class="text-xl font-bold text-green-300">DECK B</h2>
211
+ <div class="flex space-x-2">
212
+ <button class="button bg-gray-600 hover:bg-gray-500 w-8 h-8 rounded-full flex items-center justify-center">
213
+ <i class="fas fa-sync-alt text-sm"></i>
214
+ </button>
215
+ <button class="button bg-gray-600 hover:bg-gray-500 w-8 h-8 rounded-full flex items-center justify-center">
216
+ <i class="fas fa-random text-sm"></i>
217
+ </button>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="turntable relative w-full aspect-square rounded-full flex items-center justify-center mb-4">
222
+ <div class="vinyl absolute w-3/4 h-3/4 rounded-full" id="vinyl-b"></div>
223
+ <div class="absolute w-1/6 h-1/6 rounded-full bg-gray-900 z-10"></div>
224
+ </div>
225
+
226
+ <div class="flex justify-between mb-4">
227
+ <button class="button bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg font-medium" id="play-b">
228
+ <i class="fas fa-play mr-2"></i> Play
229
+ </button>
230
+ <button class="button bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-lg font-medium">
231
+ <i class="fas fa-folder-open mr-2"></i> Load
232
+ </button>
233
+ </div>
234
+
235
+ <div class="mb-4">
236
+ <div class="flex justify-between items-center mb-2">
237
+ <span class="text-sm font-medium">Tempo</span>
238
+ <span class="text-xs bg-gray-600 px-2 py-1 rounded" id="bpm-b">125 BPM</span>
239
+ </div>
240
+ <input type="range" min="80" max="160" value="125" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer" id="tempo-b">
241
+ </div>
242
+
243
+ <div class="grid grid-cols-3 gap-4 mb-4">
244
+ <div class="flex flex-col items-center">
245
+ <div class="knob relative w-12 h-12 rounded-full mb-2 flex items-center justify-center" id="high-b">
246
+ <div class="knob-mark absolute w-2 h-4 rounded-full top-0"></div>
247
+ </div>
248
+ <span class="text-xs">High</span>
249
+ </div>
250
+ <div class="flex flex-col items-center">
251
+ <div class="knob relative w-12 h-12 rounded-full mb-2 flex items-center justify-center" id="mid-b">
252
+ <div class="knob-mark absolute w-2 h-4 rounded-full top-0"></div>
253
+ </div>
254
+ <span class="text-xs">Mid</span>
255
+ </div>
256
+ <div class="flex flex-col items-center">
257
+ <div class="knob relative w-12 h-12 rounded-full mb-2 flex items-center justify-center" id="low-b">
258
+ <div class="knob-mark absolute w-2 h-4 rounded-full top-0"></div>
259
+ </div>
260
+ <span class="text-xs">Low</span>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="flex justify-between items-center">
265
+ <span class="text-sm font-medium">Volume</span>
266
+ <span class="text-xs bg-gray-600 px-2 py-1 rounded" id="volume-value-b">65%</span>
267
+ </div>
268
+ <input type="range" min="0" max="100" value="65" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer mb-2" id="volume-b">
269
+
270
+ <div class="flex justify-between items-center">
271
+ <span class="text-sm font-medium">Filter</span>
272
+ <span class="text-xs bg-gray-600 px-2 py-1 rounded" id="filter-value-b">50%</span>
273
+ </div>
274
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer" id="filter-b">
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Track library section -->
279
+ <div class="bg-gray-900 p-6">
280
+ <h2 class="text-xl font-bold text-center text-pink-300 mb-4">TRACK LIBRARY</h2>
281
+ <div class="relative">
282
+ <input type="text" placeholder="Search tracks..." class="w-full bg-gray-800 text-white px-4 py-2 rounded-lg mb-4 focus:outline-none focus:ring-2 focus:ring-purple-500">
283
+ <i class="fas fa-search absolute right-4 top-3 text-gray-400"></i>
284
+ </div>
285
+
286
+ <div class="track-list h-48 overflow-y-auto bg-gray-800 rounded-lg p-2">
287
+ <div class="grid grid-cols-1 gap-2">
288
+ <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-lg cursor-pointer">
289
+ <div class="flex items-center">
290
+ <div class="w-10 h-10 bg-purple-900 rounded mr-3 flex items-center justify-center">
291
+ <i class="fas fa-music"></i>
292
+ </div>
293
+ <div>
294
+ <p class="font-medium">Summer Vibes</p>
295
+ <p class="text-xs text-gray-400">House • 128 BPM</p>
296
+ </div>
297
+ </div>
298
+ <span class="text-xs bg-gray-700 px-2 py-1 rounded">3:42</span>
299
+ </div>
300
+ <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-lg cursor-pointer">
301
+ <div class="flex items-center">
302
+ <div class="w-10 h-10 bg-blue-900 rounded mr-3 flex items-center justify-center">
303
+ <i class="fas fa-music"></i>
304
+ </div>
305
+ <div>
306
+ <p class="font-medium">Midnight Groove</p>
307
+ <p class="text-xs text-gray-400">Techno • 132 BPM</p>
308
+ </div>
309
+ </div>
310
+ <span class="text-xs bg-gray-700 px-2 py-1 rounded">4:15</span>
311
+ </div>
312
+ <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-lg cursor-pointer">
313
+ <div class="flex items-center">
314
+ <div class="w-10 h-10 bg-green-900 rounded mr-3 flex items-center justify-center">
315
+ <i class="fas fa-music"></i>
316
+ </div>
317
+ <div>
318
+ <p class="font-medium">Bass Drop</p>
319
+ <p class="text-xs text-gray-400">Drum & Bass • 174 BPM</p>
320
+ </div>
321
+ </div>
322
+ <span class="text-xs bg-gray-700 px-2 py-1 rounded">5:22</span>
323
+ </div>
324
+ <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-lg cursor-pointer">
325
+ <div class="flex items-center">
326
+ <div class="w-10 h-10 bg-yellow-900 rounded mr-3 flex items-center justify-center">
327
+ <i class="fas fa-music"></i>
328
+ </div>
329
+ <div>
330
+ <p class="font-medium">Disco Fever</p>
331
+ <p class="text-xs text-gray-400">Disco • 120 BPM</p>
332
+ </div>
333
+ </div>
334
+ <span class="text-xs bg-gray-700 px-2 py-1 rounded">3:58</span>
335
+ </div>
336
+ <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-lg cursor-pointer">
337
+ <div class="flex items-center">
338
+ <div class="w-10 h-10 bg-red-900 rounded mr-3 flex items-center justify-center">
339
+ <i class="fas fa-music"></i>
340
+ </div>
341
+ <div>
342
+ <p class="font-medium">Urban Flow</p>
343
+ <p class="text-xs text-gray-400">Hip Hop • 95 BPM</p>
344
+ </div>
345
+ </div>
346
+ <span class="text-xs bg-gray-700 px-2 py-1 rounded">4:30</span>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </main>
352
+
353
+ <footer class="mt-8 text-center text-gray-500 text-sm">
354
+ <p>Virtual DJ Mixer - Spin your favorite tracks</p>
355
+ <p class="mt-1">© 2023 DJ Web App. All rights reserved.</p>
356
+ </footer>
357
+
358
+ <script>
359
+ // DOM elements
360
+ const vinylA = document.getElementById('vinyl-a');
361
+ const vinylB = document.getElementById('vinyl-b');
362
+ const playButtonA = document.getElementById('play-a');
363
+ const playButtonB = document.getElementById('play-b');
364
+ const tempoSliderA = document.getElementById('tempo-a');
365
+ const tempoSliderB = document.getElementById('tempo-b');
366
+ const bpmDisplayA = document.getElementById('bpm-a');
367
+ const bpmDisplayB = document.getElementById('bpm-b');
368
+ const volumeSliderA = document.getElementById('volume-a');
369
+ const volumeSliderB = document.getElementById('volume-b');
370
+ const volumeDisplayA = document.getElementById('volume-value-a');
371
+ const volumeDisplayB = document.getElementById('volume-value-b');
372
+ const filterSliderA = document.getElementById('filter-a');
373
+ const filterSliderB = document.getElementById('filter-b');
374
+ const filterDisplayA = document.getElementById('filter-value-a');
375
+ const filterDisplayB = document.getElementById('filter-value-b');
376
+ const faderA = document.getElementById('fader-a');
377
+ const faderB = document.getElementById('fader-b');
378
+ const crossfader = document.getElementById('crossfader');
379
+ const crossfaderDisplay = document.getElementById('crossfader-value');
380
+ const effectButtons = document.querySelectorAll('.effect-btn');
381
+
382
+ // State
383
+ let isPlayingA = false;
384
+ let isPlayingB = false;
385
+ let activeEffect = null;
386
+
387
+ // Initialize knobs
388
+ function initKnob(knobId, initialValue = 50) {
389
+ const knob = document.getElementById(knobId);
390
+ let isDragging = false;
391
+ let startY = 0;
392
+ let startRotation = initialValue * 3.6; // Convert percentage to degrees
393
+
394
+ // Set initial rotation
395
+ knob.style.transform = `rotate(${startRotation}deg)`;
396
+
397
+ knob.addEventListener('mousedown', (e) => {
398
+ isDragging = true;
399
+ startY = e.clientY;
400
+ startRotation = parseInt(knob.style.transform.replace('rotate(', '').replace('deg)', '')) || 0;
401
+ e.preventDefault();
402
+ });
403
+
404
+ document.addEventListener('mousemove', (e) => {
405
+ if (!isDragging) return;
406
+
407
+ const deltaY = startY - e.clientY;
408
+ let newRotation = startRotation + deltaY;
409
+
410
+ // Limit rotation between 0 and 360 degrees
411
+ newRotation = Math.max(0, Math.min(360, newRotation));
412
+
413
+ knob.style.transform = `rotate(${newRotation}deg)`;
414
+ });
415
+
416
+ document.addEventListener('mouseup', () => {
417
+ isDragging = false;
418
+ });
419
+ }
420
+
421
+ // Initialize faders
422
+ function initFader(faderId, vertical = true, callback = null) {
423
+ const fader = document.getElementById(faderId);
424
+ let isDragging = false;
425
+ let startPos = 0;
426
+ let startTop = 0;
427
+
428
+ fader.addEventListener('mousedown', (e) => {
429
+ isDragging = true;
430
+ startPos = vertical ? e.clientY : e.clientX;
431
+ startTop = vertical ? parseInt(fader.style.top) || 0 : parseInt(fader.style.left) || 0;
432
+ e.preventDefault();
433
+ });
434
+
435
+ document.addEventListener('mousemove', (e) => {
436
+ if (!isDragging) return;
437
+
438
+ const delta = vertical ? e.clientY - startPos : e.clientX - startPos;
439
+ let newPos = vertical ? startTop + delta : startTop + delta;
440
+
441
+ // Limit position within track
442
+ if (vertical) {
443
+ const trackHeight = fader.parentElement.offsetHeight;
444
+ const faderHeight = fader.offsetHeight;
445
+ newPos = Math.max(0, Math.min(trackHeight - faderHeight, newPos));
446
+ fader.style.top = `${newPos}px`;
447
+
448
+ // Calculate percentage (0-100)
449
+ const percent = 100 - Math.round((newPos / (trackHeight - faderHeight)) * 100);
450
+ if (callback) callback(percent);
451
+ } else {
452
+ const trackWidth = fader.parentElement.offsetWidth;
453
+ const faderWidth = fader.offsetWidth;
454
+ newPos = Math.max(0, Math.min(trackWidth - faderWidth, newPos));
455
+ fader.style.left = `${newPos}px`;
456
+
457
+ // Calculate percentage (0-100)
458
+ const percent = Math.round((newPos / (trackWidth - faderWidth)) * 100);
459
+ if (callback) callback(percent);
460
+ }
461
+ });
462
+
463
+ document.addEventListener('mouseup', () => {
464
+ isDragging = false;
465
+ });
466
+ }
467
+
468
+ // Initialize all knobs
469
+ initKnob('high-a', 70);
470
+ initKnob('mid-a', 50);
471
+ initKnob('low-a', 60);
472
+ initKnob('high-b', 65);
473
+ initKnob('mid-b', 55);
474
+ initKnob('low-b', 70);
475
+
476
+ // Initialize faders
477
+ initFader('fader-a', true, (percent) => {
478
+ // Update volume based on fader position
479
+ console.log(`Deck A fader: ${percent}%`);
480
+ });
481
+
482
+ initFader('fader-b', true, (percent) => {
483
+ // Update volume based on fader position
484
+ console.log(`Deck B fader: ${percent}%`);
485
+ });
486
+
487
+ initFader('crossfader', false, (percent) => {
488
+ // Update crossfader position
489
+ let position;
490
+ if (percent < 40) {
491
+ position = "Left";
492
+ } else if (percent > 60) {
493
+ position = "Right";
494
+ } else {
495
+ position = "Center";
496
+ }
497
+ crossfaderDisplay.textContent = position;
498
+ });
499
+
500
+ // Play/pause functionality
501
+ playButtonA.addEventListener('click', () => {
502
+ isPlayingA = !isPlayingA;
503
+ if (isPlayingA) {
504
+ vinylA.style.animationPlayState = 'running';
505
+ playButtonA.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
506
+ playButtonA.classList.remove('bg-red-500', 'hover:bg-red-600');
507
+ playButtonA.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
508
+ } else {
509
+ vinylA.style.animationPlayState = 'paused';
510
+ playButtonA.innerHTML = '<i class="fas fa-play mr-2"></i> Play';
511
+ playButtonA.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
512
+ playButtonA.classList.add('bg-red-500', 'hover:bg-red-600');
513
+ }
514
+ });
515
+
516
+ playButtonB.addEventListener('click', () => {
517
+ isPlayingB = !isPlayingB;
518
+ if (isPlayingB) {
519
+ vinylB.style.animationPlayState = 'running';
520
+ playButtonB.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
521
+ playButtonB.classList.remove('bg-red-500', 'hover:bg-red-600');
522
+ playButtonB.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
523
+ } else {
524
+ vinylB.style.animationPlayState = 'paused';
525
+ playButtonB.innerHTML = '<i class="fas fa-play mr-2"></i> Play';
526
+ playButtonB.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
527
+ playButtonB.classList.add('bg-red-500', 'hover:bg-red-600');
528
+ }
529
+ });
530
+
531
+ // Tempo control
532
+ tempoSliderA.addEventListener('input', () => {
533
+ const bpm = tempoSliderA.value;
534
+ bpmDisplayA.textContent = `${bpm} BPM`;
535
+
536
+ // Adjust vinyl speed based on BPM
537
+ const speed = 128 / bpm; // Normalize to 128 BPM
538
+ vinylA.style.animationDuration = `${5 * speed}s`;
539
+ });
540
+
541
+ tempoSliderB.addEventListener('input', () => {
542
+ const bpm = tempoSliderB.value;
543
+ bpmDisplayB.textContent = `${bpm} BPM`;
544
+
545
+ // Adjust vinyl speed based on BPM
546
+ const speed = 128 / bpm; // Normalize to 128 BPM
547
+ vinylB.style.animationDuration = `${5 * speed}s`;
548
+ });
549
+
550
+ // Volume control
551
+ volumeSliderA.addEventListener('input', () => {
552
+ const volume = volumeSliderA.value;
553
+ volumeDisplayA.textContent = `${volume}%`;
554
+ });
555
+
556
+ volumeSliderB.addEventListener('input', () => {
557
+ const volume = volumeSliderB.value;
558
+ volumeDisplayB.textContent = `${volume}%`;
559
+ });
560
+
561
+ // Filter control
562
+ filterSliderA.addEventListener('input', () => {
563
+ const filter = filterSliderA.value;
564
+ filterDisplayA.textContent = `${filter}%`;
565
+ });
566
+
567
+ filterSliderB.addEventListener('input', () => {
568
+ const filter = filterSliderB.value;
569
+ filterDisplayB.textContent = `${filter}%`;
570
+ });
571
+
572
+ // Effect buttons
573
+ effectButtons.forEach(button => {
574
+ button.addEventListener('click', () => {
575
+ const effect = button.dataset.effect;
576
+
577
+ if (activeEffect === effect) {
578
+ // Turn off effect
579
+ button.classList.remove('active-effect');
580
+ button.classList.add('bg-gray-600', 'hover:bg-gray-500');
581
+ activeEffect = null;
582
+ } else {
583
+ // Turn off any active effect first
584
+ effectButtons.forEach(btn => {
585
+ btn.classList.remove('active-effect');
586
+ btn.classList.add('bg-gray-600', 'hover:bg-gray-500');
587
+ });
588
+
589
+ // Turn on this effect
590
+ button.classList.remove('bg-gray-600', 'hover:bg-gray-500');
591
+ button.classList.add('active-effect');
592
+ activeEffect = effect;
593
+ }
594
+
595
+ console.log(`Effect: ${activeEffect || 'None'}`);
596
+ });
597
+ });
598
+
599
+ // Track selection
600
+ const tracks = document.querySelectorAll('.track-list > div > div');
601
+ tracks.forEach(track => {
602
+ track.addEventListener('click', () => {
603
+ // Remove active class from all tracks
604
+ tracks.forEach(t => t.classList.remove('bg-gray-700', 'ring-2', 'ring-purple-500'));
605
+
606
+ // Add active class to clicked track
607
+ track.classList.add('bg-gray-700', 'ring-2', 'ring-purple-500');
608
+
609
+ // Get track info
610
+ const trackName = track.querySelector('p:first-child').textContent;
611
+ const bpmText = track.querySelector('p:last-child').textContent;
612
+ const bpm = bpmText.match(/\d+/)[0];
613
+
614
+ console.log(`Selected track: ${trackName} (${bpm} BPM)`);
615
+ });
616
+ });
617
+ </script>
618
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
619
+ </html>