Hugging Face's logo

Spaces:
ninjacricket
/
cute-synth-no-audio
Running

App Files Community
ninjacricket commited on
Commit
8a2b2a9
·
verified ·
1 Parent(s): 06ff08f

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +727 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cute Synth No Audio
3
- emoji: 🌖
4
- colorFrom: yellow
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cute-synth-no-audio
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
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,727 @@
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>Advanced Synth UI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ .knob-indicator {
10
+ transform-origin: center;
11
+ transition: transform 0.1s ease;
12
+ }
13
+ .waveform-canvas {
14
+ background: linear-gradient(to bottom, #1a1a1a, #2d2d2d);
15
+ }
16
+ .spectrum-canvas {
17
+ background: linear-gradient(to bottom, #1a1a1a, #2d2d2d);
18
+ }
19
+ .glass-effect {
20
+ backdrop-filter: blur(10px);
21
+ -webkit-backdrop-filter: blur(10px);
22
+ }
23
+ .knob-glow {
24
+ box-shadow: 0 0 15px rgba(34, 211, 238, 0.5);
25
+ }
26
+ .knob-glow-purple {
27
+ box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
28
+ }
29
+ .knob-glow-orange {
30
+ box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
31
+ }
32
+ .knob-glow-green {
33
+ box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
34
+ }
35
+ .knob-tick {
36
+ position: absolute;
37
+ width: 2px;
38
+ height: 8px;
39
+ background: rgba(255, 255, 255, 0.7);
40
+ transform-origin: bottom center;
41
+ }
42
+ .key-white {
43
+ background: linear-gradient(to bottom, #fff, #f3f3f3);
44
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
45
+ }
46
+ .key-black {
47
+ background: linear-gradient(to bottom, #333, #222);
48
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
49
+ }
50
+ .key-white.active {
51
+ background: linear-gradient(to bottom, #e0e0e0, #d0d0d0);
52
+ transform: translateY(1px);
53
+ }
54
+ .key-black.active {
55
+ background: linear-gradient(to bottom, #222, #111);
56
+ transform: translateY(1px);
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 min-h-screen text-gray-200">
61
+ <!-- Top Navigation Bar -->
62
+ <div class="bg-black/50 glass-effect border-b border-gray-700 p-4">
63
+ <div class="flex items-center justify-between">
64
+ <div class="flex items-center gap-4">
65
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
66
+ Deep PolySynth
67
+ </h1>
68
+ <div class="flex gap-2">
69
+ <button class="px-3 py-1.5 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg text-sm font-medium shadow hover:from-cyan-600 hover:to-blue-600 transition-all flex items-center gap-1">
70
+ <span>▶</span> Play
71
+ </button>
72
+ <button class="px-3 py-1.5 bg-gray-700 text-gray-200 border border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all flex items-center gap-1">
73
+ <span>⏹</span> Stop
74
+ </button>
75
+ <button class="px-3 py-1.5 bg-gray-700 text-gray-200 border border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all flex items-center gap-1">
76
+ <span>⏺</span> Rec
77
+ </button>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="flex items-center gap-4">
82
+ <div class="text-sm text-gray-400">BPM: 120</div>
83
+ <div class="text-sm text-gray-400">CPU: 23%</div>
84
+ <button class="px-3 py-1.5 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-lg text-sm font-medium shadow hover:from-green-600 hover:to-emerald-600 transition-all">
85
+ Save
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Main Content Area -->
92
+ <div class="flex h-[calc(100vh-80px)]">
93
+ <!-- Left Sidebar -->
94
+ <div class="w-64 bg-gray-900/50 glass-effect border-r border-gray-700 p-4 overflow-y-auto">
95
+ <!-- Browser Panel -->
96
+ <div class="rounded-lg border-2 border-cyan-500 bg-cyan-500/10 bg-gray-900/50 mb-4">
97
+ <div class="bg-gradient-to-r from-cyan-600 to-cyan-700 px-4 py-2">
98
+ <h3 class="font-semibold text-white text-sm uppercase tracking-wide">Browser</h3>
99
+ </div>
100
+ <div class="p-4">
101
+ <div class="space-y-2">
102
+ <div class="text-sm text-gray-300">📁 Presets</div>
103
+ <div class="text-sm text-gray-300">🎵 Samples</div>
104
+ <div class="text-sm text-gray-300">⚡ Effects</div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- History Panel -->
110
+ <div class="rounded-lg border-2 border-purple-500 bg-purple-500/10 bg-gray-900/50 mb-4">
111
+ <div class="bg-gradient-to-r from-purple-600 to-purple-700 px-4 py-2">
112
+ <h3 class="font-semibold text-white text-sm uppercase tracking-wide">History</h3>
113
+ </div>
114
+ <div class="p-4">
115
+ <div class="flex gap-2">
116
+ <button class="px-3 py-1.5 bg-gray-700 text-gray-200 border border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">
117
+ ↶ Undo
118
+ </button>
119
+ <button class="px-3 py-1.5 bg-gray-700 text-gray-200 border border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">
120
+ ↷ Redo
121
+ </button>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Randomizer Panel -->
127
+ <div class="rounded-lg border-2 border-orange-500 bg-orange-500/10 bg-gray-900/50">
128
+ <div class="bg-gradient-to-r from-orange-600 to-orange-700 px-4 py-2">
129
+ <h3 class="font-semibold text-white text-sm uppercase tracking-wide">Randomizer</h3>
130
+ </div>
131
+ <div class="p-4">
132
+ <div class="space-y-3">
133
+ <div class="flex items-center gap-3">
134
+ <span class="text-sm text-gray-300 min-w-16">Intensity</span>
135
+ <div class="relative w-32 h-6 bg-gray-700 rounded-full cursor-pointer">
136
+ <div class="absolute left-0 top-0 h-full bg-orange-500 rounded-full" style="width: 70%"></div>
137
+ <div class="absolute w-6 h-6 bg-orange-500 rounded-full shadow-lg border-2 border-white transform -translate-y-1/2 top-1/2 hover:scale-105 transition-all" style="left: 70%"></div>
138
+ </div>
139
+ <span class="text-xs text-gray-400 min-w-12 text-right">0.70</span>
140
+ </div>
141
+ <button class="px-3 py-1.5 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg text-sm font-medium shadow hover:from-cyan-600 hover:to-blue-600 transition-all w-full">
142
+ 🎲 Randomize
143
+ </button>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Center Panel -->
150
+ <div class="flex-1 p-6 overflow-y-auto">
151
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
152
+ <!-- Oscillator Panel -->
153
+ <div class="rounded-lg border-2 border-cyan-500 bg-cyan-500/10 bg-gray-900/50">
154
+ <div class="bg-gradient-to-r from-cyan-600 to-cyan-700 px-4 py-2">
155
+ <h3 class="font-semibold text-white text-sm uppercase tracking-wide">Oscillators</h3>
156
+ </div>
157
+ <div class="p-4">
158
+ <div class="grid grid-cols-3 gap-4">
159
+ <!-- Frequency Knob -->
160
+ <div class="flex flex-col items-center gap-2 relative">
161
+ <div class="w-16 h-16 relative cursor-pointer select-none knob-glow">
162
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
163
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(-45deg);">
164
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
165
+ </div>
166
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
167
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
168
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,211,238)" stroke-width="3" stroke-linecap="round" stroke-dasharray="113 283" class="transition-all duration-300"></circle>
169
+ </svg>
170
+ </div>
171
+ </div>
172
+ <div class="text-center">
173
+ <div class="text-xs text-gray-300 font-medium">Frequency</div>
174
+ <div class="text-xs text-gray-400">440Hz</div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Detune Knob -->
179
+ <div class="flex flex-col items-center gap-2 relative">
180
+ <div class="w-16 h-16 relative cursor-pointer select-none knob-glow">
181
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
182
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(0deg);">
183
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
184
+ </div>
185
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
186
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
187
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,211,238)" stroke-width="3" stroke-linecap="round" stroke-dasharray="141.5 283" class="transition-all duration-300"></circle>
188
+ </svg>
189
+ </div>
190
+ </div>
191
+ <div class="text-center">
192
+ <div class="text-xs text-gray-300 font-medium">Detune</div>
193
+ <div class="text-xs text-gray-400">0¢</div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Level Knob -->
198
+ <div class="flex flex-col items-center gap-2 relative">
199
+ <div class="w-16 h-16 relative cursor-pointer select-none knob-glow">
200
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
201
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(81deg);">
202
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
203
+ </div>
204
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
205
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
206
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,211,238)" stroke-width="3" stroke-linecap="round" stroke-dasharray="226.4 283" class="transition-all duration-300"></circle>
207
+ </svg>
208
+ </div>
209
+ </div>
210
+ <div class="text-center">
211
+ <div class="text-xs text-gray-300 font-medium">Level</div>
212
+ <div class="text-xs text-gray-400">80%</div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- Filter Panel -->
220
+ <div class="rounded-lg border-2 border-purple-500 bg-purple-500/10 bg-gray-900/50">
221
+ <div class="bg-gradient-to-r from-purple-600 to-purple-700 px-4 py-2">
222
+ <h3 class="font-semibold text-white text-sm uppercase tracking-wide">Filter</h3>
223
+ </div>
224
+ <div class="p-4">
225
+ <div class="grid grid-cols-3 gap-4">
226
+ <!-- Cutoff Knob -->
227
+ <div class="flex flex-col items-center gap-2 relative">
228
+ <div class="w-16 h-16 relative cursor-pointer select-none knob-glow-purple">
229
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
230
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(45deg);">
231
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
232
+ </div>
233
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
234
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
235
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(168,85,247)" stroke-width="3" stroke-linecap="round" stroke-dasharray="141.5 283" class="transition-all duration-300"></circle>
236
+ </svg>
237
+ </div>
238
+ </div>
239
+ <div class="text-center">
240
+ <div class="text-xs text-gray-300 font-medium">Cutoff</div>
241
+ <div class="text-xs text-gray-400">1000Hz</div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Resonance Knob -->
246
+ <div class="flex flex-col items-center gap-2 relative">
247
+ <div class="w-16 h-16 relative cursor-pointer select-none knob-glow-purple">
248
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
249
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(90deg);">
250
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
251
+ </div>
252
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
253
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
254
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(168,85,247)" stroke-width="3" stroke-linecap="round" stroke-dasharray="70.75 283" class="transition-all duration-300"></circle>
255
+ </svg>
256
+ </div>
257
+ </div>
258
+ <div class="text-center">
259
+ <div class="text-xs text-gray-300 font-medium">Resonance</div>
260
+ <div class="text-xs text-gray-400">5.00</div>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Drive Knob -->
265
+ <div class="flex flex-col items-center gap-2 relative">
266
+ <div class="w-16 h-16 relative cursor-pointer select-none knob-glow-purple">
267
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
268
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(0deg);">
269
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
270
+ </div>
271
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
272
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
273
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(168,85,247)" stroke-width="3" stroke-linecap="round" stroke-dasharray="141.5 283" class="transition-all duration-300"></circle>
274
+ </svg>
275
+ </div>
276
+ </div>
277
+ <div class="text-center">
278
+ <div class="text-xs text-gray-300 font-medium">Drive</div>
279
+ <div class="text-xs text-gray-400">0dB</div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Envelope Panel -->
287
+ <div class="rounded-lg border-2 border-green-500 bg-green-500/10 bg-gray-900/50">
288
+ <div class="bg-gradient-to-r from-green-600 to-green-700 px-4 py-2">
289
+ <h3 class="font-semibold text-white text-sm uppercase tracking-wide">Envelope</h3>
290
+ </div>
291
+ <div class="p-4">
292
+ <div class="grid grid-cols-4 gap-3">
293
+ <!-- Attack Knob -->
294
+ <div class="flex flex-col items-center gap-2 relative">
295
+ <div class="w-12 h-12 relative cursor-pointer select-none knob-glow-green">
296
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
297
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(0deg);">
298
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
299
+ </div>
300
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
301
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
302
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,197,94)" stroke-width="3" stroke-linecap="round" stroke-dasharray="28.3 283" class="transition-all duration-300"></circle>
303
+ </svg>
304
+ </div>
305
+ </div>
306
+ <div class="text-center">
307
+ <div class="text-xs text-gray-300 font-medium">Attack</div>
308
+ <div class="text-xs text-gray-400">0.10s</div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Decay Knob -->
313
+ <div class="flex flex-col items-center gap-2 relative">
314
+ <div class="w-12 h-12 relative cursor-pointer select-none knob-glow-green">
315
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
316
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(45deg);">
317
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
318
+ </div>
319
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
320
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
321
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,197,94)" stroke-width="3" stroke-linecap="round" stroke-dasharray="84.9 283" class="transition-all duration-300"></circle>
322
+ </svg>
323
+ </div>
324
+ </div>
325
+ <div class="text-center">
326
+ <div class="text-xs text-gray-300 font-medium">Decay</div>
327
+ <div class="text-xs text-gray-400">0.30s</div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Sustain Knob -->
332
+ <div class="flex flex-col items-center gap-2 relative">
333
+ <div class="w-12 h-12 relative cursor-pointer select-none knob-glow-green">
334
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
335
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(135deg);">
336
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
337
+ </div>
338
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
339
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
340
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,197,94)" stroke-width="3" stroke-linecap="round" stroke-dasharray="198.1 283" class="transition-all duration-300"></circle>
341
+ </svg>
342
+ </div>
343
+ </div>
344
+ <div class="text-center">
345
+ <div class="text-xs text-gray-300 font-medium">Sustain</div>
346
+ <div class="text-xs text-gray-400">0.70</div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Release Knob -->
351
+ <div class="flex flex-col items-center gap-2 relative">
352
+ <div class="w-12 h-12 relative cursor-pointer select-none knob-glow-green">
353
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
354
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(90deg);">
355
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
356
+ </div>
357
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
358
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
359
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,197,94)" stroke-width="3" stroke-linecap="round" stroke-dasharray="169.8 283" class="transition-all duration-300"></circle>
360
+ </svg>
361
+ </div>
362
+ </div>
363
+ <div class="text-center">
364
+ <div class="text-xs text-gray-300 font-medium">Release</div>
365
+ <div class="text-xs text-gray-400">1.20s</div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Effects Panel -->
373
+ <div class="rounded-lg border-2 border-orange-500 bg-orange-500/10 bg-gray-900/50">
374
+ <div class="bg-gradient-to-r from-orange-600 to-orange-700 px-4 py-2">
375
+ <h3 class="font-semibold text-white text-sm uppercase tracking-wide">Effects</h3>
376
+ </div>
377
+ <div class="p-4">
378
+ <div class="grid grid-cols-3 gap-3">
379
+ <!-- Reverb Knob -->
380
+ <div class="flex flex-col items-center gap-2 relative">
381
+ <div class="w-12 h-12 relative cursor-pointer select-none knob-glow-orange">
382
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
383
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(45deg);">
384
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
385
+ </div>
386
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
387
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
388
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(249,115,22)" stroke-width="3" stroke-linecap="round" stroke-dasharray="84.9 283" class="transition-all duration-300"></circle>
389
+ </svg>
390
+ </div>
391
+ </div>
392
+ <div class="text-center">
393
+ <div class="text-xs text-gray-300 font-medium">Reverb</div>
394
+ <div class="text-xs text-gray-400">0.30</div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Delay Knob -->
399
+ <div class="flex flex-col items-center gap-2 relative">
400
+ <div class="w-12 h-12 relative cursor-pointer select-none knob-glow-orange">
401
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
402
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(22.5deg);">
403
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
404
+ </div>
405
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
406
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
407
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(249,115,22)" stroke-width="3" stroke-linecap="round" stroke-dasharray="56.6 283" class="transition-all duration-300"></circle>
408
+ </svg>
409
+ </div>
410
+ </div>
411
+ <div class="text-center">
412
+ <div class="text-xs text-gray-300 font-medium">Delay</div>
413
+ <div class="text-xs text-gray-400">0.20</div>
414
+ </div>
415
+ </div>
416
+
417
+ <!-- Distortion Knob -->
418
+ <div class="flex flex-col items-center gap-2 relative">
419
+ <div class="w-12 h-12 relative cursor-pointer select-none knob-glow-orange">
420
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150">
421
+ <div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(11.25deg);">
422
+ <div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div>
423
+ </div>
424
+ <svg class="absolute inset-0 w-full h-full -rotate-90">
425
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle>
426
+ <circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(249,115,22)" stroke-width="3" stroke-linecap="round" stroke-dasharray="28.3 283" class="transition-all duration-300"></circle>
427
+ </svg>
428
+ </div>
429
+ </div>
430
+ <div class="text-center">
431
+ <div class="text-xs text-gray-300 font-medium">Distortion</div>
432
+ <div class="text-xs text-gray-400">0.10</div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Visualizers -->
441
+ <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
442
+ <div class="bg-gray-900/50 glass-effect rounded-lg p-4 border border-gray-700">
443
+ <div class="relative">
444
+ <canvas width="300" height="100" class="waveform-canvas rounded border border-gray-600"></canvas>
445
+ <div class="absolute top-2 left-2 text-xs text-gray-400">WAVEFORM</div>
446
+ </div>
447
+ </div>
448
+ <div class="bg-gray-900/50 glass-effect rounded-lg p-4 border border-gray-700">
449
+ <div class="relative">
450
+ <canvas width="300" height="150" class="spectrum-canvas rounded border border-gray-600"></canvas>
451
+ <div class="absolute top-2 left-2 text-xs text-gray-400">SPECTRUM</div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <!-- Right Sidebar -->
458
+ <div class="w-80 bg-gray-900/50 glass-effect border-l border-gray-700 p-4 overflow-y-auto">
459
+ <!-- Preset Morpher Panel -->
460
+ <div class="rounded-lg border-2 border-purple-500 bg-purple-500/10 bg-gray-900/50 mb-4">
461
+ <div class="bg-gradient-to-r from-purple-600 to-purple-700 px-4 py-2 flex items-center justify-between">
462
+ <h3 class="font-semibold text-white text-sm uppercase tracking-wide">Preset Morpher</h3>
463
+ <button class="text-white hover:text-gray-200 transition-colors">▼</button>
464
+ </div>
465
+ <div class="p-4">
466
+ <div class="space-y-4">
467
+ <div class="grid grid-cols-2 gap-2">
468
+ <select class="bg-gray-700 rounded px-2 py-1 text-sm">
469
+ <option>Bass</option>
470
+ <option>Lead</option>
471
+ <option>Pad</option>
472
+ </select>
473
+ <select class="bg-gray-700 rounded px-2 py-1 text-sm">
474
+ <option>Pluck</option>
475
+ <option>Trance</option>
476
+ <option>Ambient</option>
477
+ </select>
478
+ </div>
479
+ <div class="flex items-center gap-3">
480
+ <span class="text-sm text-gray-300 min-w-16">Morph</span>
481
+ <div class="relative w-32 h-6 bg-gray-700 rounded-full cursor-pointer">
482
+ <div class="absolute left-0 top-0 h-full bg-purple-500 rounded-full" style="width: 50%"></div>
483
+ <div class="absolute w-6 h-6 bg-purple-500 rounded-full shadow-lg border-2 border-white transform -translate-y-1/2 top-1/2 hover:scale-105 transition-all" style="left: 50%"></div>
484
+ </div>
485
+ <span class="text-xs text-gray-400 min-w-12 text-right">0.50</span>
486
+ </div>
487
+ <button class="px-3 py-1.5 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg text-sm font-medium shadow hover:from-cyan-600 hover:to-blue-600 transition-all w-full">
488
+ Apply
489
+ </button>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <!-- Sequencer Panel -->
495
+ <div class="rounded-lg border-2 border-cyan-500 bg-cyan-500/10 bg-gray-900/50">
496
+ <div class="bg-gradient-to-r from-cyan-600 to-cyan-700 px-4 py-2">
497
+ <h3 class="font-semibold text-white text-sm uppercase tracking-wide">Sequencer</h3>
498
+ </div>
499
+ <div class="p-4">
500
+ <div class="space-y-3">
501
+ <div class="flex gap-2">
502
+ <button class="px-3 py-1.5 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg text-sm font-medium shadow hover:from-cyan-600 hover:to-blue-600 transition-all ring-2 ring-cyan-400">
503
+ Drums
504
+ </button>
505
+ <button class="px-3 py-1.5 bg-gray-700 text-gray-200 border border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">
506
+ Piano
507
+ </button>
508
+ </div>
509
+
510
+ <!-- Step Grid -->
511
+ <div class="grid grid-cols-8 gap-1">
512
+ <button class="w-6 h-6 rounded border-2 border-cyan-400 bg-cyan-400/20 transition-all"></button>
513
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
514
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
515
+ <button class="w-6 h-6 rounded border-2 border-cyan-400 bg-cyan-400/20 transition-all"></button>
516
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
517
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
518
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
519
+ <button class="w-6 h-6 rounded border-2 border-cyan-400 bg-cyan-400/20 transition-all"></button>
520
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
521
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
522
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
523
+ <button class="w-6 h-6 rounded border-2 border-cyan-400 bg-cyan-400/20 transition-all"></button>
524
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
525
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
526
+ <button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button>
527
+ <button class="w-6 h-6 rounded border-2 border-cyan-400 bg-cyan-400/20 transition-all"></button>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <!-- Bottom Panel - Keyboard -->
536
+ <div class="bg-black/50 glass-effect border-t border-gray-700 p-4">
537
+ <div class="flex items-center justify-center">
538
+ <div class="flex gap-1 relative">
539
+ <!-- White Keys -->
540
+ <button class="key-white px-4 py-8 rounded transition-all w-12 text-black">C</button>
541
+ <button class="key-white px-4 py-8 rounded transition-all w-12 text-black">D</button>
542
+ <button class="key-white px-4 py-8 rounded transition-all w-12 text-black">E</button>
543
+ <button class="key-white px-4 py-8 rounded transition-all w-12 text-black">F</button>
544
+ <button class="key-white px-4 py-8 rounded transition-all w-12 text-black">G</button>
545
+ <button class="key-white px-4 py-8 rounded transition-all w-12 text-black">A</button>
546
+ <button class="key-white px-4 py-8 rounded transition-all w-12 text-black">B</button>
547
+
548
+ <!-- Black Keys -->
549
+ <button class="key-black px-4 py-8 rounded transition-all w-8 -mx-2 z-10 text-white absolute left-9">C#</button>
550
+ <button class="key-black px-4 py-8 rounded transition-all w-8 -mx-2 z-10 text-white absolute left-21">D#</button>
551
+ <button class="key-black px-4 py-8 rounded transition-all w-8 -mx-2 z-10 text-white absolute left-45">F#</button>
552
+ <button class="key-black px-4 py-8 rounded transition-all w-8 -mx-2 z-10 text-white absolute left-57">G#</button>
553
+ <button class="key-black px-4 py-8 rounded transition-all w-8 -mx-2 z-10 text-white absolute left-69">A#</button>
554
+ </div>
555
+ </div>
556
+ </div>
557
+
558
+ <script>
559
+ // Initialize waveform canvas
560
+ const waveformCanvas = document.querySelector('.waveform-canvas');
561
+ const waveformCtx = waveformCanvas.getContext('2d');
562
+
563
+ // Generate random waveform data
564
+ const waveformData = new Float32Array(300);
565
+ for (let i = 0; i < waveformData.length; i++) {
566
+ waveformData[i] = Math.sin(i / 10) * 0.8 + (Math.random() * 0.2 - 0.1);
567
+ }
568
+
569
+ // Draw waveform
570
+ function drawWaveform() {
571
+ waveformCtx.fillStyle = '#1a1a1a';
572
+ waveformCtx.fillRect(0, 0, 300, 100);
573
+
574
+ // Draw grid
575
+ waveformCtx.strokeStyle = '#333';
576
+ waveformCtx.lineWidth = 1;
577
+
578
+ // Horizontal lines
579
+ for (let i = 0; i <= 4; i++) {
580
+ const y = (100 / 4) * i;
581
+ waveformCtx.beginPath();
582
+ waveformCtx.moveTo(0, y);
583
+ waveformCtx.lineTo(300, y);
584
+ waveformCtx.stroke();
585
+ }
586
+
587
+ // Vertical lines
588
+ for (let i = 0; i <= 8; i++) {
589
+ const x = (300 / 8) * i;
590
+ waveformCtx.beginPath();
591
+ waveformCtx.moveTo(x, 0);
592
+ waveformCtx.lineTo(x, 100);
593
+ waveformCtx.stroke();
594
+ }
595
+
596
+ // Draw waveform
597
+ waveformCtx.strokeStyle = '#00bcd4';
598
+ waveformCtx.lineWidth = 2;
599
+ waveformCtx.beginPath();
600
+
601
+ const sliceWidth = 300 / waveformData.length;
602
+ let x = 0;
603
+
604
+ for (let i = 0; i < waveformData.length; i++) {
605
+ const v = waveformData[i] * 0.5;
606
+ const y = (v + 1) * 100 / 2;
607
+
608
+ if (i === 0) {
609
+ waveformCtx.moveTo(x, y);
610
+ } else {
611
+ waveformCtx.lineTo(x, y);
612
+ }
613
+
614
+ x += sliceWidth;
615
+ }
616
+
617
+ waveformCtx.stroke();
618
+
619
+ // Add glow effect
620
+ waveformCtx.shadowColor = '#00bcd4';
621
+ waveformCtx.shadowBlur = 10;
622
+ waveformCtx.stroke();
623
+ waveformCtx.shadowBlur = 0;
624
+ }
625
+
626
+ // Initialize spectrum analyzer canvas
627
+ const spectrumCanvas = document.querySelector('.spectrum-canvas');
628
+ const spectrumCtx = spectrumCanvas.getContext('2d');
629
+
630
+ // Draw spectrum analyzer
631
+ function drawSpectrum() {
632
+ spectrumCtx.fillStyle = '#1a1a1a';
633
+ spectrumCtx.fillRect(0, 0, 300, 150);
634
+
635
+ // Generate random spectrum data
636
+ const bufferLength = 32;
637
+ const dataArray = new Uint8Array(bufferLength);
638
+ for (let i = 0; i < bufferLength; i++) {
639
+ dataArray[i] = Math.floor(Math.random() * 150) * (1 - i/bufferLength);
640
+ }
641
+
642
+ const barWidth = 300 / bufferLength * 2.5;
643
+ let x = 0;
644
+
645
+ for (let i = 0; i < bufferLength; i++) {
646
+ const barHeight = (dataArray[i] / 255) * 150;
647
+
648
+ // Create gradient
649
+ const gradient = spectrumCtx.createLinearGradient(0, 150 - barHeight, 0, 150);
650
+ gradient.addColorStop(0, '#ff6b6b');
651
+ gradient.addColorStop(0.5, '#4ecdc4');
652
+ gradient.addColorStop(1, '#45b7d1');
653
+
654
+ spectrumCtx.fillStyle = gradient;
655
+ spectrumCtx.fillRect(x, 150 - barHeight, barWidth, barHeight);
656
+
657
+ x += barWidth + 1;
658
+ }
659
+ }
660
+
661
+ // Animate both visualizers
662
+ function animate() {
663
+ // Randomly modify waveform data for animation
664
+ for (let i = 0; i < waveformData.length; i++) {
665
+ waveformData[i] = waveformData[i] * 0.9 + (Math.random() * 0.2 - 0.1);
666
+ }
667
+
668
+ drawWaveform();
669
+ drawSpectrum();
670
+
671
+ requestAnimationFrame(animate);
672
+ }
673
+
674
+ // Start animation
675
+ animate();
676
+
677
+ // Add keyboard interaction
678
+ const keys = document.querySelectorAll('.key-white, .key-black');
679
+ keys.forEach(key => {
680
+ key.addEventListener('mousedown', () => {
681
+ key.classList.add('active');
682
+ });
683
+
684
+ key.addEventListener('mouseup', () => {
685
+ key.classList.remove('active');
686
+ });
687
+
688
+ key.addEventListener('mouseleave', () => {
689
+ key.classList.remove('active');
690
+ });
691
+ });
692
+
693
+ // Add knob interaction
694
+ const knobs = document.querySelectorAll('.knob-indicator');
695
+ knobs.forEach(knob => {
696
+ let isDragging = false;
697
+ let startY = 0;
698
+ let startRotation = 0;
699
+
700
+ knob.parentElement.addEventListener('mousedown', (e) => {
701
+ isDragging = true;
702
+ startY = e.clientY;
703
+ const transform = knob.style.transform.match(/rotate\(([^)]+)deg\)/);
704
+ startRotation = transform ? parseFloat(transform[1]) : 0;
705
+ knob.parentElement.classList.add('shadow-xl', 'scale-105');
706
+ knob.parentElement.querySelector('.knob-glow, .knob-glow-purple, .knob-glow-orange, .knob-glow-green').classList.add('shadow-lg');
707
+ });
708
+
709
+ document.addEventListener('mousemove', (e) => {
710
+ if (!isDragging) return;
711
+
712
+ const deltaY = startY - e.clientY;
713
+ const newRotation = Math.max(-135, Math.min(135, startRotation + deltaY * 0.5));
714
+ knob.style.transform = `translate(-50%, -50%) rotate(${newRotation}deg)`;
715
+ });
716
+
717
+ document.addEventListener('mouseup', () => {
718
+ if (isDragging) {
719
+ isDragging = false;
720
+ knob.parentElement.classList.remove('shadow-xl', 'scale-105');
721
+ knob.parentElement.querySelector('.knob-glow, .knob-glow-purple, .knob-glow-orange, .knob-glow-green').classList.remove('shadow-lg');
722
+ }
723
+ });
724
+ });
725
+ </script>
726
+ <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=ninjacricket/cute-synth-no-audio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
727
+ </html>