Hugging Face's logo

Spaces:
7Zeux
/
webdaw
Running

App Files Community
7Zeux commited on
Commit
1dd34bd
·
verified ·
1 Parent(s): 9cb03af

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +681 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Webdaw
3
- emoji: 🏃
4
- colorFrom: purple
5
- colorTo: green
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: webdaw
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,681 @@
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>WebDAW - Browser-Based Digital Audio Workstation</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 scrollbar */
11
+ ::-webkit-scrollbar {
12
+ width: 8px;
13
+ height: 8px;
14
+ }
15
+ ::-webkit-scrollbar-track {
16
+ background: #1a202c;
17
+ }
18
+ ::-webkit-scrollbar-thumb {
19
+ background: #4a5568;
20
+ border-radius: 4px;
21
+ }
22
+ ::-webkit-scrollbar-thumb:hover {
23
+ background: #718096;
24
+ }
25
+
26
+ /* Custom waveform styling */
27
+ .waveform {
28
+ background: linear-gradient(to bottom, #2d3748, #1a202c);
29
+ height: 60px;
30
+ border-radius: 4px;
31
+ position: relative;
32
+ overflow: hidden;
33
+ }
34
+
35
+ /* Piano roll keys */
36
+ .piano-key {
37
+ border: 1px solid #4a5568;
38
+ height: 24px;
39
+ position: relative;
40
+ }
41
+ .piano-key.white {
42
+ background-color: #f7fafc;
43
+ }
44
+ .piano-key.black {
45
+ background-color: #1a202c;
46
+ height: 16px;
47
+ margin: 0 -10px;
48
+ z-index: 2;
49
+ }
50
+
51
+ /* Custom knob styling */
52
+ .knob {
53
+ width: 40px;
54
+ height: 40px;
55
+ border-radius: 50%;
56
+ background: linear-gradient(135deg, #2d3748, #4a5568);
57
+ position: relative;
58
+ cursor: pointer;
59
+ }
60
+ .knob::after {
61
+ content: '';
62
+ position: absolute;
63
+ top: 5px;
64
+ left: 50%;
65
+ width: 4px;
66
+ height: 12px;
67
+ background: #e2e8f0;
68
+ transform-origin: bottom center;
69
+ transform: translateX(-50%) rotate(0deg);
70
+ border-radius: 2px;
71
+ }
72
+
73
+ /* Custom fader styling */
74
+ .fader {
75
+ width: 24px;
76
+ height: 120px;
77
+ background: #2d3748;
78
+ border-radius: 4px;
79
+ position: relative;
80
+ }
81
+ .fader-handle {
82
+ width: 100%;
83
+ height: 8px;
84
+ background: #e2e8f0;
85
+ border-radius: 2px;
86
+ position: absolute;
87
+ cursor: pointer;
88
+ }
89
+
90
+ /* Custom transport controls */
91
+ .transport-btn {
92
+ transition: all 0.2s ease;
93
+ }
94
+ .transport-btn:hover {
95
+ transform: scale(1.1);
96
+ }
97
+ .transport-btn:active {
98
+ transform: scale(0.95);
99
+ }
100
+
101
+ /* Custom clip styling */
102
+ .audio-clip {
103
+ background: linear-gradient(135deg, #4299e1, #3182ce);
104
+ border-left: 2px solid #ebf8ff;
105
+ border-right: 2px solid #ebf8ff;
106
+ border-radius: 2px;
107
+ cursor: pointer;
108
+ transition: all 0.2s ease;
109
+ }
110
+ .audio-clip:hover {
111
+ filter: brightness(1.1);
112
+ }
113
+ .audio-clip.selected {
114
+ box-shadow: 0 0 0 2px #ebf8ff;
115
+ }
116
+ .midi-clip {
117
+ background: linear-gradient(135deg, #9f7aea, #805ad5);
118
+ border-radius: 2px;
119
+ cursor: pointer;
120
+ }
121
+
122
+ /* Custom timeline grid */
123
+ .timeline-grid {
124
+ background-image:
125
+ linear-gradient(to right, #4a5568 1px, transparent 1px),
126
+ linear-gradient(to bottom, #4a5568 1px, transparent 1px);
127
+ background-size: 20px 20px;
128
+ }
129
+
130
+ /* Custom EQ curve */
131
+ .eq-curve {
132
+ background: linear-gradient(to bottom, #1a202c, #2d3748);
133
+ border-radius: 4px;
134
+ position: relative;
135
+ overflow: hidden;
136
+ }
137
+ .eq-line {
138
+ position: absolute;
139
+ bottom: 0;
140
+ left: 0;
141
+ width: 100%;
142
+ height: 2px;
143
+ background: #4299e1;
144
+ transform-origin: left center;
145
+ }
146
+ </style>
147
+ </head>
148
+ <body class="bg-gray-900 text-gray-200 font-sans overflow-hidden">
149
+ <div class="flex flex-col h-screen">
150
+ <!-- Top Menu Bar -->
151
+ <div class="bg-gray-800 px-4 py-2 flex items-center justify-between border-b border-gray-700">
152
+ <div class="flex items-center space-x-4">
153
+ <h1 class="text-xl font-bold text-blue-400">WebDAW</h1>
154
+ <div class="flex space-x-2">
155
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">File</button>
156
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">Edit</button>
157
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">View</button>
158
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">Help</button>
159
+ </div>
160
+ </div>
161
+ <div class="flex items-center space-x-4">
162
+ <div class="flex items-center space-x-2">
163
+ <span class="text-sm">Tempo:</span>
164
+ <input type="number" value="120" class="w-16 px-2 py-1 bg-gray-700 rounded text-sm">
165
+ <span class="text-sm">BPM</span>
166
+ </div>
167
+ <div class="flex items-center space-x-2">
168
+ <span class="text-sm">Time Signature:</span>
169
+ <select class="bg-gray-700 rounded text-sm px-2 py-1">
170
+ <option>4/4</option>
171
+ <option>3/4</option>
172
+ <option>6/8</option>
173
+ </select>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Main Content Area -->
179
+ <div class="flex flex-1 overflow-hidden">
180
+ <!-- Left Sidebar - Tracks and Instruments -->
181
+ <div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
182
+ <div class="p-3 border-b border-gray-700">
183
+ <h2 class="font-semibold text-blue-400 mb-2">Tracks</h2>
184
+ <div class="space-y-2">
185
+ <div class="flex items-center justify-between bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600">
186
+ <span>Audio 1</span>
187
+ <i class="fas fa-volume-up text-blue-400"></i>
188
+ </div>
189
+ <div class="flex items-center justify-between bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600">
190
+ <span>MIDI 1</span>
191
+ <i class="fas fa-music text-purple-400"></i>
192
+ </div>
193
+ <div class="flex items-center justify-between bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600">
194
+ <span>Drum Machine</span>
195
+ <i class="fas fa-drum text-green-400"></i>
196
+ </div>
197
+ <div class="flex items-center justify-between bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600">
198
+ <span>Synth 1</span>
199
+ <i class="fas fa-wave-square text-yellow-400"></i>
200
+ </div>
201
+ </div>
202
+ <button class="mt-3 w-full py-1 bg-blue-600 hover:bg-blue-500 rounded text-sm">
203
+ <i class="fas fa-plus mr-1"></i> Add Track
204
+ </button>
205
+ </div>
206
+
207
+ <div class="p-3 border-b border-gray-700 flex-1 overflow-y-auto">
208
+ <h2 class="font-semibold text-blue-400 mb-2">Instruments</h2>
209
+ <div class="grid grid-cols-2 gap-2">
210
+ <div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center">
211
+ <i class="fas fa-piano text-2xl mb-1 text-purple-400"></i>
212
+ <p class="text-xs">Grand Piano</p>
213
+ </div>
214
+ <div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center">
215
+ <i class="fas fa-guitar text-2xl mb-1 text-red-400"></i>
216
+ <p class="text-xs">Electric Guitar</p>
217
+ </div>
218
+ <div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center">
219
+ <i class="fas fa-drum text-2xl mb-1 text-green-400"></i>
220
+ <p class="text-xs">Drum Kit</p>
221
+ </div>
222
+ <div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center">
223
+ <i class="fas fa-vial text-2xl mb-1 text-yellow-400"></i>
224
+ <p class="text-xs">Synth</p>
225
+ </div>
226
+ <div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center">
227
+ <i class="fas fa-violin text-2xl mb-1 text-indigo-400"></i>
228
+ <p class="text-xs">Strings</p>
229
+ </div>
230
+ <div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center">
231
+ <i class="fas fa-trumpet text-2xl mb-1 text-pink-400"></i>
232
+ <p class="text-xs">Brass</p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="p-3 border-t border-gray-700">
238
+ <h2 class="font-semibold text-blue-400 mb-2">Effects</h2>
239
+ <div class="space-y-2">
240
+ <div class="bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600">
241
+ <span>Reverb</span>
242
+ </div>
243
+ <div class="bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600">
244
+ <span>Delay</span>
245
+ </div>
246
+ <div class="bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600">
247
+ <span>EQ</span>
248
+ </div>
249
+ <div class="bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600">
250
+ <span>Compressor</span>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Main Timeline Area -->
257
+ <div class="flex-1 flex flex-col overflow-hidden">
258
+ <!-- Timeline Header -->
259
+ <div class="bg-gray-800 border-b border-gray-700 flex">
260
+ <div class="w-16 border-r border-gray-700 flex items-center justify-center">
261
+ <span class="text-xs text-gray-400">Time</span>
262
+ </div>
263
+ <div class="flex-1 overflow-x-auto">
264
+ <div class="h-8 flex items-center timeline-grid" style="min-width: 2000px;">
265
+ <div class="h-full flex items-center" style="width: 100px;">
266
+ <div class="w-full text-center text-xs text-gray-400">1.1.00</div>
267
+ </div>
268
+ <div class="h-full flex items-center" style="width: 100px;">
269
+ <div class="w-full text-center text-xs text-gray-400">1.2.00</div>
270
+ </div>
271
+ <div class="h-full flex items-center" style="width: 100px;">
272
+ <div class="w-full text-center text-xs text-gray-400">1.3.00</div>
273
+ </div>
274
+ <div class="h-full flex items-center" style="width: 100px;">
275
+ <div class="w-full text-center text-xs text-gray-400">1.4.00</div>
276
+ </div>
277
+ <div class="h-full flex items-center" style="width: 100px;">
278
+ <div class="w-full text-center text-xs text-gray-400">2.1.00</div>
279
+ </div>
280
+ <div class="h-full flex items-center" style="width: 100px;">
281
+ <div class="w-full text-center text-xs text-gray-400">2.2.00</div>
282
+ </div>
283
+ <div class="h-full flex items-center" style="width: 100px;">
284
+ <div class="w-full text-center text-xs text-gray-400">2.3.00</div>
285
+ </div>
286
+ <div class="h-full flex items-center" style="width: 100px;">
287
+ <div class="w-full text-center text-xs text-gray-400">2.4.00</div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Track Rows -->
294
+ <div class="flex-1 overflow-y-auto">
295
+ <!-- Audio Track -->
296
+ <div class="h-20 border-b border-gray-700 flex">
297
+ <div class="w-16 border-r border-gray-700 flex flex-col items-center justify-center">
298
+ <div class="flex items-center space-x-1 mb-1">
299
+ <i class="fas fa-volume-up text-blue-400"></i>
300
+ <span class="text-xs">Audio 1</span>
301
+ </div>
302
+ <div class="knob"></div>
303
+ </div>
304
+ <div class="flex-1 relative timeline-grid" style="min-width: 2000px;">
305
+ <div class="absolute top-1/2 transform -translate-y-1/2 left-20 w-40 h-16 audio-clip">
306
+ <div class="waveform"></div>
307
+ <div class="absolute bottom-0 left-0 right-0 h-2 bg-blue-300 opacity-50"></div>
308
+ </div>
309
+ <div class="absolute top-1/2 transform -translate-y-1/2 left-200 w-60 h-16 audio-clip">
310
+ <div class="waveform"></div>
311
+ <div class="absolute bottom-0 left-0 right-0 h-2 bg-blue-300 opacity-50"></div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- MIDI Track -->
317
+ <div class="h-20 border-b border-gray-700 flex">
318
+ <div class="w-16 border-r border-gray-700 flex flex-col items-center justify-center">
319
+ <div class="flex items-center space-x-1 mb-1">
320
+ <i class="fas fa-music text-purple-400"></i>
321
+ <span class="text-xs">MIDI 1</span>
322
+ </div>
323
+ <div class="knob"></div>
324
+ </div>
325
+ <div class="flex-1 relative timeline-grid" style="min-width: 2000px;">
326
+ <div class="absolute top-1/4 left-40 w-80 h-8 midi-clip"></div>
327
+ <div class="absolute top-1/2 left-40 w-80 h-8 midi-clip"></div>
328
+ <div class="absolute top-3/4 left-40 w-80 h-8 midi-clip"></div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Drum Track -->
333
+ <div class="h-20 border-b border-gray-700 flex">
334
+ <div class="w-16 border-r border-gray-700 flex flex-col items-center justify-center">
335
+ <div class="flex items-center space-x-1 mb-1">
336
+ <i class="fas fa-drum text-green-400"></i>
337
+ <span class="text-xs">Drums</span>
338
+ </div>
339
+ <div class="knob"></div>
340
+ </div>
341
+ <div class="flex-1 relative timeline-grid" style="min-width: 2000px;">
342
+ <div class="absolute top-1/4 left-60 w-20 h-8 midi-clip bg-red-400"></div>
343
+ <div class="absolute top-1/2 left-100 w-20 h-8 midi-clip bg-red-400"></div>
344
+ <div class="absolute top-1/2 left-140 w-20 h-8 midi-clip bg-red-400"></div>
345
+ <div class="absolute top-3/4 left-180 w-20 h-8 midi-clip bg-red-400"></div>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- More tracks would go here -->
350
+ </div>
351
+
352
+ <!-- Piano Roll -->
353
+ <div class="h-64 border-t border-gray-700 flex">
354
+ <div class="w-16 bg-gray-800 border-r border-gray-700 overflow-y-auto">
355
+ <div class="piano-key white">C5</div>
356
+ <div class="piano-key black"></div>
357
+ <div class="piano-key white">B4</div>
358
+ <div class="piano-key black"></div>
359
+ <div class="piano-key white">A4</div>
360
+ <div class="piano-key white">G4</div>
361
+ <div class="piano-key black"></div>
362
+ <div class="piano-key white">F4</div>
363
+ <div class="piano-key black"></div>
364
+ <div class="piano-key white">E4</div>
365
+ <div class="piano-key white">D4</div>
366
+ <div class="piano-key black"></div>
367
+ <div class="piano-key white">C4</div>
368
+ </div>
369
+ <div class="flex-1 bg-gray-800 timeline-grid overflow-auto" style="min-width: 2000px;">
370
+ <!-- Piano roll content would go here -->
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- Right Sidebar - Mixer -->
376
+ <div class="w-64 bg-gray-800 border-l border-gray-700 overflow-y-auto">
377
+ <div class="p-3 border-b border-gray-700">
378
+ <h2 class="font-semibold text-blue-400 mb-3">Mixer</h2>
379
+ <div class="flex justify-between items-center mb-4">
380
+ <div class="flex items-center">
381
+ <i class="fas fa-sliders-h mr-2"></i>
382
+ <span>Master</span>
383
+ </div>
384
+ <div class="flex items-center">
385
+ <span class="text-xs mr-2">-6dB</span>
386
+ <div class="fader">
387
+ <div class="fader-handle" style="top: 40%;"></div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="space-y-4">
393
+ <!-- Audio 1 Channel -->
394
+ <div class="bg-gray-700 p-3 rounded">
395
+ <div class="flex justify-between items-center mb-2">
396
+ <span class="text-sm">Audio 1</span>
397
+ <div class="flex space-x-2">
398
+ <button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-mute"></i></button>
399
+ <button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-solo"></i></button>
400
+ </div>
401
+ </div>
402
+ <div class="flex justify-between items-center">
403
+ <div class="knob"></div>
404
+ <div class="fader">
405
+ <div class="fader-handle" style="top: 60%;"></div>
406
+ </div>
407
+ <div class="flex flex-col items-center">
408
+ <span class="text-xs mb-1">-12dB</span>
409
+ <div class="w-6 h-2 bg-green-400 rounded-full"></div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- MIDI 1 Channel -->
415
+ <div class="bg-gray-700 p-3 rounded">
416
+ <div class="flex justify-between items-center mb-2">
417
+ <span class="text-sm">MIDI 1</span>
418
+ <div class="flex space-x-2">
419
+ <button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-mute"></i></button>
420
+ <button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-solo"></i></button>
421
+ </div>
422
+ </div>
423
+ <div class="flex justify-between items-center">
424
+ <div class="knob"></div>
425
+ <div class="fader">
426
+ <div class="fader-handle" style="top: 50%;"></div>
427
+ </div>
428
+ <div class="flex flex-col items-center">
429
+ <span class="text-xs mb-1">-9dB</span>
430
+ <div class="w-6 h-2 bg-green-400 rounded-full"></div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <!-- Drum Channel -->
436
+ <div class="bg-gray-700 p-3 rounded">
437
+ <div class="flex justify-between items-center mb-2">
438
+ <span class="text-sm">Drums</span>
439
+ <div class="flex space-x-2">
440
+ <button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-mute"></i></button>
441
+ <button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-solo"></i></button>
442
+ </div>
443
+ </div>
444
+ <div class="flex justify-between items-center">
445
+ <div class="knob"></div>
446
+ <div class="fader">
447
+ <div class="fader-handle" style="top: 45%;"></div>
448
+ </div>
449
+ <div class="flex flex-col items-center">
450
+ <span class="text-xs mb-1">-3dB</span>
451
+ <div class="w-6 h-2 bg-yellow-400 rounded-full"></div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <div class="p-3 border-t border-gray-700">
459
+ <h2 class="font-semibold text-blue-400 mb-3">Effects</h2>
460
+ <div class="bg-gray-700 p-3 rounded mb-3">
461
+ <div class="flex justify-between items-center mb-2">
462
+ <span class="text-sm">Reverb</span>
463
+ <button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-power-off"></i></button>
464
+ </div>
465
+ <div class="grid grid-cols-3 gap-2">
466
+ <div class="flex flex-col items-center">
467
+ <span class="text-xs mb-1">Mix</span>
468
+ <div class="knob"></div>
469
+ </div>
470
+ <div class="flex flex-col items-center">
471
+ <span class="text-xs mb-1">Decay</span>
472
+ <div class="knob"></div>
473
+ </div>
474
+ <div class="flex flex-col items-center">
475
+ <span class="text-xs mb-1">Size</span>
476
+ <div class="knob"></div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+
481
+ <div class="bg-gray-700 p-3 rounded">
482
+ <div class="flex justify-between items-center mb-2">
483
+ <span class="text-sm">EQ</span>
484
+ <button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-power-off"></i></button>
485
+ </div>
486
+ <div class="eq-curve h-20 mb-2">
487
+ <div class="eq-line" style="transform: scaleY(0.8)"></div>
488
+ <div class="eq-line" style="transform: scaleY(0.6) translateX(25%)"></div>
489
+ <div class="eq-line" style="transform: scaleY(0.4) translateX(50%)"></div>
490
+ <div class="eq-line" style="transform: scaleY(0.7) translateX(75%)"></div>
491
+ </div>
492
+ <div class="grid grid-cols-4 gap-2">
493
+ <div class="flex flex-col items-center">
494
+ <span class="text-xs mb-1">Low</span>
495
+ <div class="knob"></div>
496
+ </div>
497
+ <div class="flex flex-col items-center">
498
+ <span class="text-xs mb-1">Mid</span>
499
+ <div class="knob"></div>
500
+ </div>
501
+ <div class="flex flex-col items-center">
502
+ <span class="text-xs mb-1">High</span>
503
+ <div class="knob"></div>
504
+ </div>
505
+ <div class="flex flex-col items-center">
506
+ <span class="text-xs mb-1">Q</span>
507
+ <div class="knob"></div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+
515
+ <!-- Transport Controls -->
516
+ <div class="bg-gray-800 border-t border-gray-700 px-4 py-2 flex items-center justify-between">
517
+ <div class="flex items-center space-x-4">
518
+ <div class="flex items-center space-x-2">
519
+ <button class="transport-btn w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
520
+ <i class="fas fa-step-backward"></i>
521
+ </button>
522
+ <button class="transport-btn w-10 h-10 rounded-full bg-blue-600 hover:bg-blue-500 flex items-center justify-center">
523
+ <i class="fas fa-play"></i>
524
+ </button>
525
+ <button class="transport-btn w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
526
+ <i class="fas fa-stop"></i>
527
+ </button>
528
+ <button class="transport-btn w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
529
+ <i class="fas fa-step-forward"></i>
530
+ </button>
531
+ <button class="transport-btn w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
532
+ <i class="fas fa-redo"></i>
533
+ </button>
534
+ </div>
535
+ <div class="flex items-center space-x-2">
536
+ <span class="text-sm">1.1.00</span>
537
+ <div class="w-24 h-2 bg-gray-700 rounded-full overflow-hidden">
538
+ <div class="h-full bg-blue-500" style="width: 30%;"></div>
539
+ </div>
540
+ <span class="text-sm">4.4.00</span>
541
+ </div>
542
+ </div>
543
+ <div class="flex items-center space-x-4">
544
+ <div class="flex items-center space-x-2">
545
+ <i class="fas fa-microphone"></i>
546
+ <div class="w-24 h-2 bg-gray-700 rounded-full overflow-hidden">
547
+ <div class="h-full bg-red-500" style="width: 60%;"></div>
548
+ </div>
549
+ </div>
550
+ <div class="flex items-center space-x-2">
551
+ <i class="fas fa-volume-up"></i>
552
+ <div class="w-24 h-2 bg-gray-700 rounded-full overflow-hidden">
553
+ <div class="h-full bg-green-500" style="width: 80%;"></div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </div>
559
+
560
+ <script>
561
+ // Basic functionality for the DAW
562
+ document.addEventListener('DOMContentLoaded', function() {
563
+ // Make clips selectable
564
+ const clips = document.querySelectorAll('.audio-clip, .midi-clip');
565
+ clips.forEach(clip => {
566
+ clip.addEventListener('click', function(e) {
567
+ // Prevent multiple selections if clicking on a child element
568
+ e.stopPropagation();
569
+
570
+ // Remove selection from all clips
571
+ clips.forEach(c => c.classList.remove('selected'));
572
+
573
+ // Add selection to clicked clip
574
+ this.classList.add('selected');
575
+ });
576
+ });
577
+
578
+ // Play button functionality
579
+ const playButton = document.querySelector('.fa-play').parentElement;
580
+ const stopButton = document.querySelector('.fa-stop').parentElement;
581
+ const progressBar = document.querySelector('.bg-blue-500');
582
+ let isPlaying = false;
583
+ let progressInterval;
584
+
585
+ playButton.addEventListener('click', function() {
586
+ if (!isPlaying) {
587
+ isPlaying = true;
588
+ this.innerHTML = '<i class="fas fa-pause"></i>';
589
+
590
+ // Simulate playback progress
591
+ let progress = 0;
592
+ progressInterval = setInterval(() => {
593
+ progress += 0.5;
594
+ if (progress > 100) progress = 0;
595
+ progressBar.style.width = `${progress}%`;
596
+ }, 100);
597
+ } else {
598
+ isPlaying = false;
599
+ this.innerHTML = '<i class="fas fa-play"></i>';
600
+ clearInterval(progressInterval);
601
+ }
602
+ });
603
+
604
+ stopButton.addEventListener('click', function() {
605
+ isPlaying = false;
606
+ playButton.innerHTML = '<i class="fas fa-play"></i>';
607
+ clearInterval(progressInterval);
608
+ progressBar.style.width = '0%';
609
+ });
610
+
611
+ // Simple knob rotation
612
+ const knobs = document.querySelectorAll('.knob');
613
+ knobs.forEach(knob => {
614
+ let isDragging = false;
615
+ let startY = 0;
616
+ let rotation = 0;
617
+
618
+ knob.addEventListener('mousedown', function(e) {
619
+ isDragging = true;
620
+ startY = e.clientY;
621
+ document.addEventListener('mousemove', onMouseMove);
622
+ document.addEventListener('mouseup', onMouseUp);
623
+ });
624
+
625
+ function onMouseMove(e) {
626
+ if (!isDragging) return;
627
+ const deltaY = e.clientY - startY;
628
+ rotation = Math.min(Math.max(-90, rotation + deltaY * 0.5), 90);
629
+ knob.style.transform = `rotate(${rotation}deg)`;
630
+ startY = e.clientY;
631
+ }
632
+
633
+ function onMouseUp() {
634
+ isDragging = false;
635
+ document.removeEventListener('mousemove', onMouseMove);
636
+ document.removeEventListener('mouseup', onMouseUp);
637
+ }
638
+ });
639
+
640
+ // Simple fader movement
641
+ const faders = document.querySelectorAll('.fader-handle');
642
+ faders.forEach(fader => {
643
+ let isDragging = false;
644
+ let startY = 0;
645
+
646
+ fader.addEventListener('mousedown', function(e) {
647
+ isDragging = true;
648
+ startY = e.clientY;
649
+ document.addEventListener('mousemove', onFaderMove);
650
+ document.addEventListener('mouseup', onFaderUp);
651
+ });
652
+
653
+ function onFaderMove(e) {
654
+ if (!isDragging) return;
655
+ const faderParent = fader.parentElement;
656
+ const parentRect = faderParent.getBoundingClientRect();
657
+ const newTop = e.clientY - parentRect.top - (fader.offsetHeight / 2);
658
+
659
+ // Constrain to fader height
660
+ const constrainedTop = Math.max(0, Math.min(parentRect.height - fader.offsetHeight, newTop));
661
+ fader.style.top = `${constrainedTop}px`;
662
+
663
+ // Update dB value display if available
664
+ const dBDisplay = fader.closest('.bg-gray-700')?.querySelector('.text-xs');
665
+ if (dBDisplay) {
666
+ const percent = 100 - (constrainedTop / (parentRect.height - fader.offsetHeight)) * 100;
667
+ const dB = Math.round((percent / 100) * 24 - 12);
668
+ dBDisplay.textContent = `${dB}dB`;
669
+ }
670
+ }
671
+
672
+ function onFaderUp() {
673
+ isDragging = false;
674
+ document.removeEventListener('mousemove', onFaderMove);
675
+ document.removeEventListener('mouseup', onFaderUp);
676
+ }
677
+ });
678
+ });
679
+ </script>
680
+ <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=7Zeux/webdaw" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
681
+ </html>