Hugging Face's logo

Spaces:
fluxthedev
/
daw
Running

App Files Community
fluxthedev commited on
Commit
1ba0821
·
verified ·
1 Parent(s): 1ec9dd6

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +626 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Daw
3
- emoji: 🐠
4
- colorFrom: gray
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: daw
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,626 @@
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>WebSynth - Browser-Based Music Production</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 CSS for audio-specific elements */
11
+ .knob {
12
+ width: 40px;
13
+ height: 40px;
14
+ border-radius: 50%;
15
+ background: linear-gradient(135deg, #2d3748, #4a5568);
16
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
17
+ position: relative;
18
+ cursor: pointer;
19
+ }
20
+ .knob:after {
21
+ content: '';
22
+ position: absolute;
23
+ top: 5px;
24
+ left: 50%;
25
+ width: 3px;
26
+ height: 15px;
27
+ background: #4299e1;
28
+ transform-origin: bottom center;
29
+ transform: translateX(-50%) rotate(0deg);
30
+ }
31
+ .sequencer-step {
32
+ transition: all 0.1s ease;
33
+ }
34
+ .sequencer-step.active {
35
+ background-color: #4299e1 !important;
36
+ }
37
+ .piano-key.white {
38
+ background-color: white;
39
+ border: 1px solid #ccc;
40
+ }
41
+ .piano-key.black {
42
+ background-color: black;
43
+ z-index: 2;
44
+ margin-left: -12px;
45
+ margin-right: -12px;
46
+ height: 60%;
47
+ }
48
+ .piano-key.active {
49
+ background-color: #4299e1;
50
+ }
51
+ .waveform-display {
52
+ background: linear-gradient(to bottom, #2d3748, #1a202c);
53
+ }
54
+ /* Custom scrollbar */
55
+ ::-webkit-scrollbar {
56
+ width: 8px;
57
+ height: 8px;
58
+ }
59
+ ::-webkit-scrollbar-track {
60
+ background: #2d3748;
61
+ }
62
+ ::-webkit-scrollbar-thumb {
63
+ background: #4a5568;
64
+ border-radius: 4px;
65
+ }
66
+ /* Drag and drop styling */
67
+ .dropzone {
68
+ border: 2px dashed #4a5568;
69
+ transition: all 0.3s ease;
70
+ }
71
+ .dropzone.active {
72
+ border-color: #4299e1;
73
+ background-color: rgba(66, 153, 225, 0.1);
74
+ }
75
+ </style>
76
+ </head>
77
+ <body class="bg-gray-900 text-gray-200 font-sans overflow-hidden">
78
+ <!-- Main App Container -->
79
+ <div class="flex flex-col h-screen">
80
+ <!-- Top Toolbar -->
81
+ <div class="bg-gray-800 p-2 flex items-center justify-between border-b border-gray-700">
82
+ <div class="flex items-center space-x-4">
83
+ <h1 class="text-xl font-bold text-blue-400 flex items-center">
84
+ <i class="fas fa-music mr-2"></i> WebSynth
85
+ </h1>
86
+ <div class="flex space-x-2">
87
+ <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm flex items-center">
88
+ <i class="fas fa-plus mr-1"></i> New
89
+ </button>
90
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm flex items-center">
91
+ <i class="fas fa-folder-open mr-1"></i> Open
92
+ </button>
93
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm flex items-center">
94
+ <i class="fas fa-save mr-1"></i> Save
95
+ </button>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="flex items-center space-x-4">
100
+ <div class="flex items-center">
101
+ <span class="mr-2 text-sm">BPM:</span>
102
+ <input type="number" value="120" min="40" max="300" class="w-16 bg-gray-700 rounded px-2 py-1 text-center">
103
+ </div>
104
+ <div class="flex items-center">
105
+ <button id="playButton" class="w-8 h-8 bg-blue-600 hover:bg-blue-700 rounded-full flex items-center justify-center">
106
+ <i class="fas fa-play"></i>
107
+ </button>
108
+ <button class="w-8 h-8 bg-gray-700 hover:bg-gray-600 rounded-full flex items-center justify-center ml-2">
109
+ <i class="fas fa-stop"></i>
110
+ </button>
111
+ <button class="w-8 h-8 bg-gray-700 hover:bg-gray-600 rounded-full flex items-center justify-center ml-2">
112
+ <i class="fas fa-redo"></i>
113
+ </button>
114
+ </div>
115
+ <div class="flex items-center">
116
+ <span class="mr-2 text-sm">Key:</span>
117
+ <select class="bg-gray-700 rounded px-2 py-1 text-sm">
118
+ <option>C</option>
119
+ <option>C#</option>
120
+ <option>D</option>
121
+ <option>D#</option>
122
+ <option>E</option>
123
+ <option>F</option>
124
+ <option>F#</option>
125
+ <option>G</option>
126
+ <option>G#</option>
127
+ <option>A</option>
128
+ <option>A#</option>
129
+ <option>B</option>
130
+ </select>
131
+ <select class="bg-gray-700 rounded px-2 py-1 text-sm ml-1">
132
+ <option>Major</option>
133
+ <option>Minor</option>
134
+ </select>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Main Content Area -->
140
+ <div class="flex flex-1 overflow-hidden">
141
+ <!-- Left Sidebar - Instruments & Presets -->
142
+ <div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
143
+ <div class="p-3 border-b border-gray-700">
144
+ <h2 class="font-semibold text-sm uppercase tracking-wider text-gray-400">Instruments</h2>
145
+ </div>
146
+ <div class="flex-1 overflow-y-auto">
147
+ <div class="p-3">
148
+ <div class="mb-4">
149
+ <h3 class="text-sm font-medium mb-2 flex justify-between items-center">
150
+ <span>Synth</span>
151
+ <button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600">+</button>
152
+ </h3>
153
+ <div class="space-y-1">
154
+ <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">Analog Lead</div>
155
+ <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">FM Bass</div>
156
+ <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">Wavetable Pad</div>
157
+ </div>
158
+ </div>
159
+ <div class="mb-4">
160
+ <h3 class="text-sm font-medium mb-2 flex justify-between items-center">
161
+ <span>Drum Machine</span>
162
+ <button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600">+</button>
163
+ </h3>
164
+ <div class="space-y-1">
165
+ <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">808 Kit</div>
166
+ <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">909 Kit</div>
167
+ <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">Glitch Kit</div>
168
+ </div>
169
+ </div>
170
+ <div class="mb-4">
171
+ <h3 class="text-sm font-medium mb-2 flex justify-between items-center">
172
+ <span>Sampler</span>
173
+ <button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600">+</button>
174
+ </h3>
175
+ <div class="space-y-1">
176
+ <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">Vocal Chops</div>
177
+ <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">Guitar Loops</div>
178
+ <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">FX Samples</div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ <div class="p-3 border-t border-gray-700">
184
+ <div class="dropzone p-4 rounded-lg text-center cursor-pointer">
185
+ <i class="fas fa-cloud-upload-alt text-2xl text-gray-500 mb-2"></i>
186
+ <p class="text-xs text-gray-400">Drag & drop samples or presets here</p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Main Workspace -->
192
+ <div class="flex-1 flex flex-col overflow-hidden">
193
+ <!-- Tab Navigation -->
194
+ <div class="bg-gray-800 border-b border-gray-700 flex">
195
+ <button class="px-4 py-2 border-b-2 border-blue-500 text-blue-400">Sequencer</button>
196
+ <button class="px-4 py-2 text-gray-400 hover:text-gray-200">Piano Roll</button>
197
+ <button class="px-4 py-2 text-gray-400 hover:text-gray-200">Mixer</button>
198
+ <button class="px-4 py-2 text-gray-400 hover:text-gray-200">Performance</button>
199
+ </div>
200
+
201
+ <!-- Sequencer Grid -->
202
+ <div class="flex-1 overflow-auto p-4">
203
+ <div class="mb-6">
204
+ <h3 class="text-sm font-medium mb-2">Kick Drum</h3>
205
+ <div class="flex space-x-1">
206
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
207
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
208
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
209
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
210
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
211
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
212
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
213
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
214
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
215
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
216
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
217
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
218
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
219
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
220
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
221
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="mb-6">
226
+ <h3 class="text-sm font-medium mb-2">Snare</h3>
227
+ <div class="flex space-x-1">
228
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
229
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
230
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
231
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
232
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
233
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
234
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
235
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
236
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
237
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
238
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
239
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
240
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
241
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
242
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
243
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="mb-6">
248
+ <h3 class="text-sm font-medium mb-2">Hi-Hat</h3>
249
+ <div class="flex space-x-1">
250
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
251
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
252
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
253
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
254
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
255
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
256
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
257
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
258
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
259
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
260
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
261
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
262
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
263
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
264
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
265
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="mb-6">
270
+ <h3 class="text-sm font-medium mb-2">Bass Synth</h3>
271
+ <div class="flex space-x-1">
272
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
273
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
274
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
275
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
276
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
277
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
278
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
279
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
280
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
281
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
282
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
283
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
284
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
285
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
286
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
287
+ <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Piano Roll (Hidden by default) -->
293
+ <div class="hidden flex-1 overflow-auto p-4">
294
+ <div class="mb-4">
295
+ <div class="flex">
296
+ <div class="w-16 h-16 bg-gray-800 border-r border-gray-700 flex items-center justify-center text-xs">
297
+ C4
298
+ </div>
299
+ <div class="flex-1 bg-gray-800 h-16 overflow-x-auto">
300
+ <div class="h-full min-w-full" style="min-width: 800px;"></div>
301
+ </div>
302
+ </div>
303
+ <div class="flex">
304
+ <div class="w-16 h-8 bg-gray-800 border-r border-gray-700 flex items-center justify-center text-xs">
305
+ C#4
306
+ </div>
307
+ <div class="flex-1 bg-gray-800 h-8 overflow-x-auto">
308
+ <div class="h-full min-w-full" style="min-width: 800px;"></div>
309
+ </div>
310
+ </div>
311
+ <!-- More piano keys would go here -->
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Mixer (Hidden by default) -->
316
+ <div class="hidden flex-1 overflow-auto p-4">
317
+ <div class="flex space-x-4">
318
+ <div class="w-24 bg-gray-800 p-3 rounded-lg">
319
+ <div class="text-center text-xs mb-2">Kick</div>
320
+ <div class="flex justify-center mb-2">
321
+ <div class="knob"></div>
322
+ </div>
323
+ <div class="h-24 bg-gray-700 rounded mb-2 relative overflow-hidden">
324
+ <div class="absolute bottom-0 left-0 right-0 bg-blue-500" style="height: 70%;"></div>
325
+ </div>
326
+ <div class="text-center text-xs">Pan</div>
327
+ <input type="range" class="w-full" min="-50" max="50" value="0">
328
+ </div>
329
+ <!-- More mixer channels would go here -->
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Performance Mode (Hidden by default) -->
334
+ <div class="hidden flex-1 overflow-auto p-4">
335
+ <div class="grid grid-cols-4 gap-4">
336
+ <div class="bg-gray-800 rounded-lg p-3 h-32 cursor-pointer hover:bg-gray-700 flex items-center justify-center">
337
+ <span>Clip 1</span>
338
+ </div>
339
+ <div class="bg-gray-800 rounded-lg p-3 h-32 cursor-pointer hover:bg-gray-700 flex items-center justify-center">
340
+ <span>Clip 2</span>
341
+ </div>
342
+ <div class="bg-gray-800 rounded-lg p-3 h-32 cursor-pointer hover:bg-gray-700 flex items-center justify-center">
343
+ <span>Clip 3</span>
344
+ </div>
345
+ <div class="bg-gray-800 rounded-lg p-3 h-32 cursor-pointer hover:bg-gray-700 flex items-center justify-center">
346
+ <span>Clip 4</span>
347
+ </div>
348
+ <!-- More performance clips would go here -->
349
+ </div>
350
+ <div class="mt-8">
351
+ <h3 class="text-sm font-medium mb-4">XY Pad</h3>
352
+ <div class="w-64 h-64 bg-gray-800 rounded-lg relative">
353
+ <div class="absolute w-8 h-8 bg-blue-500 rounded-full" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Right Sidebar - Synth Controls & Effects -->
360
+ <div class="w-80 bg-gray-800 border-l border-gray-700 flex flex-col">
361
+ <div class="p-3 border-b border-gray-700">
362
+ <h2 class="font-semibold text-sm uppercase tracking-wider text-gray-400">Synth Controls</h2>
363
+ </div>
364
+ <div class="flex-1 overflow-y-auto p-4">
365
+ <div class="mb-6">
366
+ <h3 class="text-sm font-medium mb-3">Oscillators</h3>
367
+ <div class="grid grid-cols-3 gap-4">
368
+ <div>
369
+ <div class="text-xs text-center mb-1">Wave</div>
370
+ <select class="w-full bg-gray-700 rounded px-2 py-1 text-xs mb-2">
371
+ <option>Sine</option>
372
+ <option>Square</option>
373
+ <option>Saw</option>
374
+ <option>Triangle</option>
375
+ <option>Noise</option>
376
+ </select>
377
+ </div>
378
+ <div>
379
+ <div class="text-xs text-center mb-1">Octave</div>
380
+ <select class="w-full bg-gray-700 rounded px-2 py-1 text-xs mb-2">
381
+ <option>-2</option>
382
+ <option>-1</option>
383
+ <option>0</option>
384
+ <option>+1</option>
385
+ <option>+2</option>
386
+ </select>
387
+ </div>
388
+ <div>
389
+ <div class="text-xs text-center mb-1">Detune</div>
390
+ <input type="range" class="w-full" min="-50" max="50" value="0">
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <div class="mb-6">
396
+ <h3 class="text-sm font-medium mb-3">Filter</h3>
397
+ <div class="grid grid-cols-3 gap-4">
398
+ <div>
399
+ <div class="text-xs text-center mb-1">Type</div>
400
+ <select class="w-full bg-gray-700 rounded px-2 py-1 text-xs mb-2">
401
+ <option>LPF</option>
402
+ <option>HPF</option>
403
+ <option>BPF</option>
404
+ <option>Notch</option>
405
+ </select>
406
+ </div>
407
+ <div>
408
+ <div class="text-xs text-center mb-1">Cutoff</div>
409
+ <input type="range" class="w-full" min="0" max="100" value="50">
410
+ </div>
411
+ <div>
412
+ <div class="text-xs text-center mb-1">Reso</div>
413
+ <input type="range" class="w-full" min="0" max="100" value="0">
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="mb-6">
419
+ <h3 class="text-sm font-medium mb-3">Envelope</h3>
420
+ <div class="grid grid-cols-4 gap-2">
421
+ <div>
422
+ <div class="text-xs text-center mb-1">Attack</div>
423
+ <input type="range" class="w-full" min="0" max="100" value="10">
424
+ </div>
425
+ <div>
426
+ <div class="text-xs text-center mb-1">Decay</div>
427
+ <input type="range" class="w-full" min="0" max="100" value="30">
428
+ </div>
429
+ <div>
430
+ <div class="text-xs text-center mb-1">Sustain</div>
431
+ <input type="range" class="w-full" min="0" max="100" value="70">
432
+ </div>
433
+ <div>
434
+ <div class="text-xs text-center mb-1">Release</div>
435
+ <input type="range" class="w-full" min="0" max="100" value="20">
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <div class="mb-6">
441
+ <h3 class="text-sm font-medium mb-3">Effects</h3>
442
+ <div class="space-y-3">
443
+ <div class="bg-gray-700 rounded p-2">
444
+ <div class="flex justify-between items-center mb-1">
445
+ <span class="text-xs">Reverb</span>
446
+ <label class="relative inline-flex items-center cursor-pointer">
447
+ <input type="checkbox" class="sr-only peer" checked>
448
+ <div class="w-7 h-4 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-3 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-500"></div>
449
+ </label>
450
+ </div>
451
+ <div class="grid grid-cols-2 gap-2">
452
+ <div>
453
+ <div class="text-xs mb-1">Size</div>
454
+ <input type="range" class="w-full" min="0" max="100" value="50">
455
+ </div>
456
+ <div>
457
+ <div class="text-xs mb-1">Mix</div>
458
+ <input type="range" class="w-full" min="0" max="100" value="30">
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="bg-gray-700 rounded p-2">
464
+ <div class="flex justify-between items-center mb-1">
465
+ <span class="text-xs">Delay</span>
466
+ <label class="relative inline-flex items-center cursor-pointer">
467
+ <input type="checkbox" class="sr-only peer">
468
+ <div class="w-7 h-4 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-3 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-500"></div>
469
+ </label>
470
+ </div>
471
+ <div class="grid grid-cols-2 gap-2">
472
+ <div>
473
+ <div class="text-xs mb-1">Time</div>
474
+ <input type="range" class="w-full" min="0" max="100" value="50">
475
+ </div>
476
+ <div>
477
+ <div class="text-xs mb-1">Feedback</div>
478
+ <input type="range" class="w-full" min="0" max="100" value="30">
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <div class="p-3 border-t border-gray-700">
487
+ <div class="text-xs text-gray-400 mb-1">Master Volume</div>
488
+ <input type="range" class="w-full" min="0" max="100" value="70">
489
+ </div>
490
+ </div>
491
+ </div>
492
+
493
+ <!-- Status Bar -->
494
+ <div class="bg-gray-800 border-t border-gray-700 p-2 text-xs flex justify-between">
495
+ <div>
496
+ <span class="text-gray-400">CPU:</span>
497
+ <span class="ml-1">12%</span>
498
+ <span class="text-gray-400 ml-3">Memory:</span>
499
+ <span class="ml-1">45MB</span>
500
+ </div>
501
+ <div>
502
+ <span class="text-gray-400">MIDI:</span>
503
+ <span class="ml-1">Not Connected</span>
504
+ <button class="ml-3 text-blue-400 hover:text-blue-300">Connect</button>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <script>
510
+ // Basic functionality for the app
511
+ document.addEventListener('DOMContentLoaded', function() {
512
+ // Tab switching
513
+ const tabs = document.querySelectorAll('.bg-gray-800.border-b.border-gray-700 button');
514
+ const tabContents = document.querySelectorAll('.flex-1.flex.flex-col > div');
515
+
516
+ tabs.forEach((tab, index) => {
517
+ tab.addEventListener('click', () => {
518
+ tabs.forEach(t => t.classList.remove('border-b-2', 'border-blue-500', 'text-blue-400'));
519
+ tabContents.forEach(c => c.classList.add('hidden'));
520
+
521
+ tab.classList.add('border-b-2', 'border-blue-500', 'text-blue-400');
522
+ tabContents[index].classList.remove('hidden');
523
+ });
524
+ });
525
+
526
+ // Sequencer step activation
527
+ const steps = document.querySelectorAll('.sequencer-step');
528
+ steps.forEach(step => {
529
+ step.addEventListener('click', () => {
530
+ step.classList.toggle('active');
531
+ });
532
+ });
533
+
534
+ // Play button functionality
535
+ const playButton = document.getElementById('playButton');
536
+ let isPlaying = false;
537
+
538
+ playButton.addEventListener('click', () => {
539
+ isPlaying = !isPlaying;
540
+ playButton.innerHTML = isPlaying ? '<i class="fas fa-pause"></i>' : '<i class="fas fa-play"></i>';
541
+
542
+ // This would be replaced with actual WebAudio API code
543
+ if (isPlaying) {
544
+ // Start sequencer
545
+ console.log('Playback started');
546
+ } else {
547
+ // Stop sequencer
548
+ console.log('Playback stopped');
549
+ }
550
+ });
551
+
552
+ // Drag and drop for samples
553
+ const dropzone = document.querySelector('.dropzone');
554
+
555
+ dropzone.addEventListener('dragover', (e) => {
556
+ e.preventDefault();
557
+ dropzone.classList.add('active');
558
+ });
559
+
560
+ dropzone.addEventListener('dragleave', () => {
561
+ dropzone.classList.remove('active');
562
+ });
563
+
564
+ dropzone.addEventListener('drop', (e) => {
565
+ e.preventDefault();
566
+ dropzone.classList.remove('active');
567
+
568
+ const files = e.dataTransfer.files;
569
+ if (files.length > 0) {
570
+ console.log('File dropped:', files[0].name);
571
+ // Here you would process the audio file with WebAudio API
572
+ }
573
+ });
574
+
575
+ // Simple piano keyboard
576
+ const pianoKeys = document.querySelectorAll('.piano-key');
577
+ pianoKeys.forEach(key => {
578
+ key.addEventListener('mousedown', () => {
579
+ key.classList.add('active');
580
+ // Play note with WebAudio API
581
+ });
582
+
583
+ key.addEventListener('mouseup', () => {
584
+ key.classList.remove('active');
585
+ // Stop note
586
+ });
587
+
588
+ key.addEventListener('mouseleave', () => {
589
+ if (key.classList.contains('active')) {
590
+ key.classList.remove('active');
591
+ // Stop note
592
+ }
593
+ });
594
+ });
595
+
596
+ // Knob rotation (visual only)
597
+ const knobs = document.querySelectorAll('.knob');
598
+ knobs.forEach(knob => {
599
+ let isDragging = false;
600
+ let startY = 0;
601
+ let rotation = 0;
602
+
603
+ knob.addEventListener('mousedown', (e) => {
604
+ isDragging = true;
605
+ startY = e.clientY;
606
+ knob.style.cursor = 'grabbing';
607
+ });
608
+
609
+ document.addEventListener('mousemove', (e) => {
610
+ if (isDragging) {
611
+ const deltaY = e.clientY - startY;
612
+ rotation = Math.min(Math.max(rotation + deltaY * 0.5, -135), 135);
613
+ knob.style.transform = `rotate(${rotation}deg)`;
614
+ startY = e.clientY;
615
+ }
616
+ });
617
+
618
+ document.addEventListener('mouseup', () => {
619
+ isDragging = false;
620
+ knob.style.cursor = 'pointer';
621
+ });
622
+ });
623
+ });
624
+ </script>
625
+ <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=fluxthedev/daw" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
626
+ </html>