Hugging Face's logo

Spaces:
vericudebuget
/
ok4231
Running

App Files Community
vericudebuget commited on
Commit
1f68e1f
·
verified ·
1 Parent(s): 5620f7b

Upload daw_icons_gallery.html

Browse files
Files changed (1) hide show
  1. daw_icons_gallery.html +1107 -0
daw_icons_gallery.html ADDED
@@ -0,0 +1,1107 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>DAW Icons Gallery - FL Studio Style</title>
7
+ <style>
8
+ body {
9
+ background: #2d2d30;
10
+ color: #ffffff;
11
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12
+ margin: 0;
13
+ padding: 20px;
14
+ }
15
+
16
+ .container {
17
+ max-width: 1200px;
18
+ margin: 0 auto;
19
+ }
20
+
21
+ h1 {
22
+ text-align: center;
23
+ color: #ffffff;
24
+ margin-bottom: 30px;
25
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
26
+ }
27
+
28
+ .section {
29
+ margin-bottom: 40px;
30
+ background: #383838;
31
+ border-radius: 8px;
32
+ padding: 20px;
33
+ box-shadow: 0 4px 8px rgba(0,0,0,0.3);
34
+ }
35
+
36
+ .section h2 {
37
+ color: #ffcc00;
38
+ margin-top: 0;
39
+ border-bottom: 2px solid #555;
40
+ padding-bottom: 10px;
41
+ }
42
+
43
+ .icon-grid {
44
+ display: grid;
45
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
46
+ gap: 20px;
47
+ margin-top: 20px;
48
+ }
49
+
50
+ .icon-item {
51
+ display: flex;
52
+ flex-direction: column;
53
+ align-items: center;
54
+ background: #404040;
55
+ padding: 15px;
56
+ border-radius: 6px;
57
+ border: 1px solid #555;
58
+ }
59
+
60
+ .icon-label {
61
+ margin-top: 10px;
62
+ font-size: 12px;
63
+ text-align: center;
64
+ color: #cccccc;
65
+ }
66
+
67
+ .state-container {
68
+ display: flex;
69
+ gap: 15px;
70
+ align-items: center;
71
+ }
72
+
73
+ .state-label {
74
+ font-size: 10px;
75
+ color: #999;
76
+ }
77
+
78
+ /* Transport controls specific styling */
79
+ .transport-grid {
80
+ display: grid;
81
+ grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
82
+ gap: 15px;
83
+ }
84
+
85
+ .transport-item {
86
+ display: flex;
87
+ flex-direction: column;
88
+ align-items: center;
89
+ background: #404040;
90
+ padding: 10px;
91
+ border-radius: 4px;
92
+ border: 1px solid #555;
93
+ }
94
+ </style>
95
+ </head>
96
+ <body>
97
+ <div class="container">
98
+ <h1>DAW Icons Gallery - FL Studio Style</h1>
99
+
100
+ <!-- Knobs Section -->
101
+ <div class="section">
102
+ <h2>Knobs (Lit & Non-lit)</h2>
103
+ <div class="icon-grid">
104
+ <div class="icon-item">
105
+ <div class="state-container">
106
+ <div>
107
+ <!-- Small Normal Knob - Non-lit -->
108
+ <svg width="40" height="40" viewBox="0 0 40 40">
109
+ <defs>
110
+ <radialGradient id="knob-normal-off" cx="0.3" cy="0.3" r="0.8">
111
+ <stop offset="0%" style="stop-color:#606060"/>
112
+ <stop offset="100%" style="stop-color:#2a2a2a"/>
113
+ </radialGradient>
114
+ <radialGradient id="knob-inner-off" cx="0.5" cy="0.5" r="0.6">
115
+ <stop offset="0%" style="stop-color:#404040"/>
116
+ <stop offset="100%" style="stop-color:#1a1a1a"/>
117
+ </radialGradient>
118
+ </defs>
119
+ <circle cx="20" cy="20" r="18" fill="url(#knob-normal-off)" stroke="#1a1a1a" stroke-width="1"/>
120
+ <circle cx="20" cy="20" r="12" fill="url(#knob-inner-off)"/>
121
+ <line x1="20" y1="8" x2="20" y2="14" stroke="#808080" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
122
+ </svg>
123
+ <div class="state-label">Off</div>
124
+ </div>
125
+ <div>
126
+ <!-- Small Normal Knob - Lit -->
127
+ <svg width="40" height="40" viewBox="0 0 40 40">
128
+ <defs>
129
+ <radialGradient id="knob-normal-on" cx="0.3" cy="0.3" r="0.8">
130
+ <stop offset="0%" style="stop-color:#8080a0"/>
131
+ <stop offset="100%" style="stop-color:#3a3a4a"/>
132
+ </radialGradient>
133
+ <radialGradient id="knob-inner-on" cx="0.5" cy="0.5" r="0.6">
134
+ <stop offset="0%" style="stop-color:#5050ff"/>
135
+ <stop offset="100%" style="stop-color:#2a2aaa"/>
136
+ </radialGradient>
137
+ </defs>
138
+ <circle cx="20" cy="20" r="18" fill="url(#knob-normal-on)" stroke="#1a1a1a" stroke-width="1"/>
139
+ <circle cx="20" cy="20" r="12" fill="url(#knob-inner-on)"/>
140
+ <line x1="20" y1="8" x2="20" y2="14" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.7"/>
141
+ </svg>
142
+ <div class="state-label">On</div>
143
+ </div>
144
+ </div>
145
+ <div class="icon-label">Small Normal Knob</div>
146
+ </div>
147
+
148
+ <div class="icon-item">
149
+ <div class="state-container">
150
+ <div>
151
+ <!-- Big Normal Knob - Non-lit -->
152
+ <svg width="60" height="60" viewBox="0 0 60 60">
153
+ <defs>
154
+ <radialGradient id="big-knob-normal-off" cx="0.3" cy="0.3" r="0.8">
155
+ <stop offset="0%" style="stop-color:#606060"/>
156
+ <stop offset="100%" style="stop-color:#2a2a2a"/>
157
+ </radialGradient>
158
+ <radialGradient id="big-knob-inner-off" cx="0.5" cy="0.5" r="0.6">
159
+ <stop offset="0%" style="stop-color:#404040"/>
160
+ <stop offset="100%" style="stop-color:#1a1a1a"/>
161
+ </radialGradient>
162
+ </defs>
163
+ <circle cx="30" cy="30" r="28" fill="url(#big-knob-normal-off)" stroke="#1a1a1a" stroke-width="1"/>
164
+ <circle cx="30" cy="30" r="18" fill="url(#big-knob-inner-off)"/>
165
+ <line x1="30" y1="10" x2="30" y2="18" stroke="#808080" stroke-width="3" stroke-linecap="round"/>
166
+ </svg>
167
+ <div class="state-label">Off</div>
168
+ </div>
169
+ <div>
170
+ <!-- Big Normal Knob - Lit -->
171
+ <svg width="60" height="60" viewBox="0 0 60 60">
172
+ <defs>
173
+ <radialGradient id="big-knob-normal-on" cx="0.3" cy="0.3" r="0.8">
174
+ <stop offset="0%" style="stop-color:#8080a0"/>
175
+ <stop offset="100%" style="stop-color:#3a3a4a"/>
176
+ </radialGradient>
177
+ <radialGradient id="big-knob-inner-on" cx="0.5" cy="0.5" r="0.6">
178
+ <stop offset="0%" style="stop-color:#5050ff"/>
179
+ <stop offset="100%" style="stop-color:#2a2aaa"/>
180
+ </radialGradient>
181
+ </defs>
182
+ <circle cx="30" cy="30" r="28" fill="url(#big-knob-normal-on)" stroke="#1a1a1a" stroke-width="1"/>
183
+ <circle cx="30" cy="30" r="18" fill="url(#big-knob-inner-on)"/>
184
+ <line x1="30" y1="10" x2="30" y2="18" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
185
+ </svg>
186
+ <div class="state-label">On</div>
187
+ </div>
188
+ </div>
189
+ <div class="icon-label">Big Normal Knob</div>
190
+ </div>
191
+
192
+ <div class="icon-item">
193
+ <div class="state-container">
194
+ <div>
195
+ <!-- Small Metal Knob - Non-lit -->
196
+ <svg width="40" height="40" viewBox="0 0 40 40">
197
+ <defs>
198
+ <radialGradient id="metal-knob-off" cx="0.3" cy="0.3" r="0.8">
199
+ <stop offset="0%" style="stop-color:#c0c0c0"/>
200
+ <stop offset="50%" style="stop-color:#808080"/>
201
+ <stop offset="100%" style="stop-color:#404040"/>
202
+ </radialGradient>
203
+ <radialGradient id="metal-inner-off" cx="0.5" cy="0.5" r="0.6">
204
+ <stop offset="0%" style="stop-color:#909090"/>
205
+ <stop offset="100%" style="stop-color:#505050"/>
206
+ </radialGradient>
207
+ </defs>
208
+ <circle cx="20" cy="20" r="18" fill="url(#metal-knob-off)" stroke="#2a2a2a" stroke-width="1"/>
209
+ <circle cx="20" cy="20" r="12" fill="url(#metal-inner-off)"/>
210
+ <!-- Metal ridges -->
211
+ <g stroke="#606060" stroke-width="0.5" opacity="0.6">
212
+ <line x1="8" y1="20" x2="12" y2="20"/>
213
+ <line x1="28" y1="20" x2="32" y2="20"/>
214
+ <line x1="20" y1="8" x2="20" y2="12"/>
215
+ <line x1="20" y1="28" x2="20" y2="32"/>
216
+ </g>
217
+ <line x1="20" y1="8" x2="20" y2="14" stroke="#a0a0a0" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
218
+ </svg>
219
+ <div class="state-label">Off</div>
220
+ </div>
221
+ <div>
222
+ <!-- Small Metal Knob - Lit -->
223
+ <svg width="40" height="40" viewBox="0 0 40 40">
224
+ <defs>
225
+ <radialGradient id="metal-knob-on" cx="0.3" cy="0.3" r="0.8">
226
+ <stop offset="0%" style="stop-color:#e0e0ff"/>
227
+ <stop offset="50%" style="stop-color:#a0a0ff"/>
228
+ <stop offset="100%" style="stop-color:#6060aa"/>
229
+ </radialGradient>
230
+ <radialGradient id="metal-inner-on" cx="0.5" cy="0.5" r="0.6">
231
+ <stop offset="0%" style="stop-color:#b0b0ff"/>
232
+ <stop offset="100%" style="stop-color:#7070bb"/>
233
+ </radialGradient>
234
+ </defs>
235
+ <circle cx="20" cy="20" r="18" fill="url(#metal-knob-on)" stroke="#2a2a2a" stroke-width="1"/>
236
+ <circle cx="20" cy="20" r="12" fill="url(#metal-inner-on)"/>
237
+ <!-- Metal ridges -->
238
+ <g stroke="#8080ff" stroke-width="0.5" opacity="0.8">
239
+ <line x1="8" y1="20" x2="12" y2="20"/>
240
+ <line x1="28" y1="20" x2="32" y2="20"/>
241
+ <line x1="20" y1="8" x2="20" y2="12"/>
242
+ <line x1="20" y1="28" x2="20" y2="32"/>
243
+ </g>
244
+ <line x1="20" y1="8" x2="20" y2="14" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.7"/>
245
+ </svg>
246
+ <div class="state-label">On</div>
247
+ </div>
248
+ </div>
249
+ <div class="icon-label">Small Metal Knob</div>
250
+ </div>
251
+
252
+ <div class="icon-item">
253
+ <div class="state-container">
254
+ <div>
255
+ <!-- Big Metal Knob - Non-lit -->
256
+ <svg width="60" height="60" viewBox="0 0 60 60">
257
+ <defs>
258
+ <radialGradient id="big-metal-knob-off" cx="0.3" cy="0.3" r="0.8">
259
+ <stop offset="0%" style="stop-color:#c0c0c0"/>
260
+ <stop offset="50%" style="stop-color:#808080"/>
261
+ <stop offset="100%" style="stop-color:#404040"/>
262
+ </radialGradient>
263
+ <radialGradient id="big-metal-inner-off" cx="0.5" cy="0.5" r="0.6">
264
+ <stop offset="0%" style="stop-color:#909090"/>
265
+ <stop offset="100%" style="stop-color:#505050"/>
266
+ </radialGradient>
267
+ </defs>
268
+ <circle cx="30" cy="30" r="28" fill="url(#big-metal-knob-off)" stroke="#2a2a2a" stroke-width="1"/>
269
+ <circle cx="30" cy="30" r="18" fill="url(#big-metal-inner-off)"/>
270
+ <!-- Metal ridges -->
271
+ <g stroke="#606060" stroke-width="0.8" opacity="0.6">
272
+ <line x1="8" y1="30" x2="14" y2="30"/>
273
+ <line x1="46" y1="30" x2="52" y2="30"/>
274
+ <line x1="30" y1="8" x2="30" y2="14"/>
275
+ <line x1="30" y1="46" x2="30" y2="52"/>
276
+ <line x1="13.5" y1="13.5" x2="17.9" y2="17.9"/>
277
+ <line x1="42.1" y1="42.1" x2="46.5" y2="46.5"/>
278
+ <line x1="46.5" y1="13.5" x2="42.1" y2="17.9"/>
279
+ <line x1="17.9" y1="42.1" x2="13.5" y2="46.5"/>
280
+ </g>
281
+ <line x1="30" y1="10" x2="30" y2="18" stroke="#a0a0a0" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
282
+ </svg>
283
+ <div class="state-label">Off</div>
284
+ </div>
285
+ <div>
286
+ <!-- Big Metal Knob - Lit -->
287
+ <svg width="60" height="60" viewBox="0 0 60 60">
288
+ <defs>
289
+ <radialGradient id="big-metal-knob-on" cx="0.3" cy="0.3" r="0.8">
290
+ <stop offset="0%" style="stop-color:#e0e0ff"/>
291
+ <stop offset="50%" style="stop-color:#a0a0ff"/>
292
+ <stop offset="100%" style="stop-color:#6060aa"/>
293
+ </radialGradient>
294
+ <radialGradient id="big-metal-inner-on" cx="0.5" cy="0.5" r="0.6">
295
+ <stop offset="0%" style="stop-color:#b0b0ff"/>
296
+ <stop offset="100%" style="stop-color:#7070bb"/>
297
+ </radialGradient>
298
+ </defs>
299
+ <circle cx="30" cy="30" r="28" fill="url(#big-metal-knob-on)" stroke="#2a2a2a" stroke-width="1"/>
300
+ <circle cx="30" cy="30" r="18" fill="url(#big-metal-inner-on)"/>
301
+ <!-- Metal ridges -->
302
+ <g stroke="#8080ff" stroke-width="0.8" opacity="0.8">
303
+ <line x1="8" y1="30" x2="14" y2="30"/>
304
+ <line x1="46" y1="30" x2="52" y2="30"/>
305
+ <line x1="30" y1="8" x2="30" y2="14"/>
306
+ <line x1="30" y1="46" x2="30" y2="52"/>
307
+ <line x1="13.5" y1="13.5" x2="17.9" y2="17.9"/>
308
+ <line x1="42.1" y1="42.1" x2="46.5" y2="46.5"/>
309
+ <line x1="46.5" y1="13.5" x2="42.1" y2="17.9"/>
310
+ <line x1="17.9" y1="42.1" x2="13.5" y2="46.5"/>
311
+ </g>
312
+ <line x1="30" y1="10" x2="30" y2="18" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
313
+ </svg>
314
+ <div class="state-label">On</div>
315
+ </div>
316
+ </div>
317
+ <div class="icon-label">Big Metal Knob</div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Slider Caps Section -->
323
+ <div class="section">
324
+ <h2>Slider Caps (Lit & Non-lit)</h2>
325
+ <div class="icon-grid">
326
+ <div class="icon-item">
327
+ <div class="state-container">
328
+ <div>
329
+ <!-- Slider Cap - Non-lit -->
330
+ <svg width="30" height="20" viewBox="0 0 30 20">
331
+ <defs>
332
+ <linearGradient id="slider-cap-off" x1="0%" y1="0%" x2="100%" y2="100%">
333
+ <stop offset="0%" style="stop-color:#505050"/>
334
+ <stop offset="50%" style="stop-color:#353535"/>
335
+ <stop offset="100%" style="stop-color:#202020"/>
336
+ </linearGradient>
337
+ </defs>
338
+ <rect x="2" y="2" width="26" height="16" rx="2" fill="url(#slider-cap-off)" stroke="#1a1a1a" stroke-width="1"/>
339
+ <rect x="4" y="4" width="22" height="12" rx="1" fill="#404040" opacity="0.5"/>
340
+ <line x1="8" y1="6" x2="8" y2="14" stroke="#606060" stroke-width="1"/>
341
+ <line x1="15" y1="6" x2="15" y2="14" stroke="#606060" stroke-width="1"/>
342
+ <line x1="22" y1="6" x2="22" y2="14" stroke="#606060" stroke-width="1"/>
343
+ </svg>
344
+ <div class="state-label">Off</div>
345
+ </div>
346
+ <div>
347
+ <!-- Slider Cap - Lit -->
348
+ <svg width="30" height="20" viewBox="0 0 30 20">
349
+ <defs>
350
+ <linearGradient id="slider-cap-on" x1="0%" y1="0%" x2="100%" y2="100%">
351
+ <stop offset="0%" style="stop-color:#7070ff"/>
352
+ <stop offset="50%" style="stop-color:#5555cc"/>
353
+ <stop offset="100%" style="stop-color:#404088"/>
354
+ </linearGradient>
355
+ </defs>
356
+ <rect x="2" y="2" width="26" height="16" rx="2" fill="url(#slider-cap-on)" stroke="#1a1a1a" stroke-width="1"/>
357
+ <rect x="4" y="4" width="22" height="12" rx="1" fill="#6060ff" opacity="0.3"/>
358
+ <line x1="8" y1="6" x2="8" y2="14" stroke="#a0a0ff" stroke-width="1"/>
359
+ <line x1="15" y1="6" x2="15" y2="14" stroke="#a0a0ff" stroke-width="1"/>
360
+ <line x1="22" y1="6" x2="22" y2="14" stroke="#a0a0ff" stroke-width="1"/>
361
+ </svg>
362
+ <div class="state-label">On</div>
363
+ </div>
364
+ </div>
365
+ <div class="icon-label">Slider Cap</div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Radio Buttons Section -->
371
+ <div class="section">
372
+ <h2>Radio Buttons (Lit & Non-lit)</h2>
373
+ <div class="icon-grid">
374
+ <div class="icon-item">
375
+ <div class="state-container">
376
+ <div>
377
+ <!-- Radio Button - Non-lit -->
378
+ <svg width="20" height="20" viewBox="0 0 20 20">
379
+ <defs>
380
+ <radialGradient id="radio-off" cx="0.3" cy="0.3" r="0.8">
381
+ <stop offset="0%" style="stop-color:#404040"/>
382
+ <stop offset="100%" style="stop-color:#202020"/>
383
+ </radialGradient>
384
+ </defs>
385
+ <circle cx="10" cy="10" r="9" fill="url(#radio-off)" stroke="#1a1a1a" stroke-width="1"/>
386
+ <circle cx="10" cy="10" r="6" fill="#2a2a2a"/>
387
+ </svg>
388
+ <div class="state-label">Off</div>
389
+ </div>
390
+ <div>
391
+ <!-- Radio Button - Lit -->
392
+ <svg width="20" height="20" viewBox="0 0 20 20">
393
+ <defs>
394
+ <radialGradient id="radio-on" cx="0.3" cy="0.3" r="0.8">
395
+ <stop offset="0%" style="stop-color:#6060ff"/>
396
+ <stop offset="100%" style="stop-color:#3030aa"/>
397
+ </radialGradient>
398
+ </defs>
399
+ <circle cx="10" cy="10" r="9" fill="url(#radio-on)" stroke="#1a1a1a" stroke-width="1"/>
400
+ <circle cx="10" cy="10" r="6" fill="#4040cc"/>
401
+ <circle cx="10" cy="10" r="3" fill="#ffffff"/>
402
+ </svg>
403
+ <div class="state-label">On</div>
404
+ </div>
405
+ </div>
406
+ <div class="icon-label">Radio Button</div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <!-- Transport Controls Section -->
412
+ <div class="section">
413
+ <h2>Transport Controls</h2>
414
+ <div class="transport-grid">
415
+ <div class="transport-item">
416
+ <!-- Play Button -->
417
+ <svg width="32" height="32" viewBox="0 0 32 32">
418
+ <defs>
419
+ <linearGradient id="play-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
420
+ <stop offset="0%" style="stop-color:#60ff60"/>
421
+ <stop offset="100%" style="stop-color:#30cc30"/>
422
+ </linearGradient>
423
+ </defs>
424
+ <rect x="2" y="2" width="28" height="28" rx="4" fill="#383838" stroke="#555" stroke-width="1"/>
425
+ <polygon points="12,8 12,24 22,16" fill="url(#play-gradient)"/>
426
+ </svg>
427
+ <div class="icon-label">Play</div>
428
+ </div>
429
+
430
+ <div class="transport-item">
431
+ <!-- Pause Button -->
432
+ <svg width="32" height="32" viewBox="0 0 32 32">
433
+ <defs>
434
+ <linearGradient id="pause-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
435
+ <stop offset="0%" style="stop-color:#ffff60"/>
436
+ <stop offset="100%" style="stop-color:#cccc30"/>
437
+ </linearGradient>
438
+ </defs>
439
+ <rect x="2" y="2" width="28" height="28" rx="4" fill="#383838" stroke="#555" stroke-width="1"/>
440
+ <rect x="10" y="8" width="4" height="16" fill="url(#pause-gradient)"/>
441
+ <rect x="18" y="8" width="4" height="16" fill="url(#pause-gradient)"/>
442
+ </svg>
443
+ <div class="icon-label">Pause</div>
444
+ </div>
445
+
446
+ <div class="transport-item">
447
+ <!-- Stop Button -->
448
+ <svg width="32" height="32" viewBox="0 0 32 32">
449
+ <defs>
450
+ <linearGradient id="stop-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
451
+ <stop offset="0%" style="stop-color:#ff6060"/>
452
+ <stop offset="100%" style="stop-color:#cc3030"/>
453
+ </linearGradient>
454
+ </defs>
455
+ <rect x="2" y="2" width="28" height="28" rx="4" fill="#383838" stroke="#555" stroke-width="1"/>
456
+ <rect x="10" y="10" width="12" height="12" fill="url(#stop-gradient)"/>
457
+ </svg>
458
+ <div class="icon-label">Stop</div>
459
+ </div>
460
+
461
+ <div class="transport-item">
462
+ <!-- Record Button -->
463
+ <svg width="32" height="32" viewBox="0 0 32 32">
464
+ <defs>
465
+ <radialGradient id="record-gradient" cx="0.3" cy="0.3" r="0.8">
466
+ <stop offset="0%" style="stop-color:#ff4040"/>
467
+ <stop offset="100%" style="stop-color:#cc2020"/>
468
+ </radialGradient>
469
+ </defs>
470
+ <rect x="2" y="2" width="28" height="28" rx="4" fill="#383838" stroke="#555" stroke-width="1"/>
471
+ <circle cx="16" cy="16" r="6" fill="url(#record-gradient)"/>
472
+ </svg>
473
+ <div class="icon-label">Record</div>
474
+ </div>
475
+
476
+ <div class="transport-item">
477
+ <!-- Fast Forward Button -->
478
+ <svg width="32" height="32" viewBox="0 0 32 32">
479
+ <defs>
480
+ <linearGradient id="ff-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
481
+ <stop offset="0%" style="stop-color:#60c0ff"/>
482
+ <stop offset="100%" style="stop-color:#3090cc"/>
483
+ </linearGradient>
484
+ </defs>
485
+ <rect x="2" y="2" width="28" height="28" rx="4" fill="#383838" stroke="#555" stroke-width="1"/>
486
+ <polygon points="8,8 8,24 16,16" fill="url(#ff-gradient)"/>
487
+ <polygon points="16,8 16,24 24,16" fill="url(#ff-gradient)"/>
488
+ </svg>
489
+ <div class="icon-label">Fast Forward</div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <!-- DAW Views Section -->
495
+ <div class="section">
496
+ <h2>DAW Views & Components</h2>
497
+ <div class="icon-grid">
498
+ <div class="icon-item">
499
+ <!-- Piano Roll -->
500
+ <svg width="50" height="40" viewBox="0 0 50 40">
501
+ <defs>
502
+ <linearGradient id="piano-bg" x1="0%" y1="0%" x2="100%" y2="0%">
503
+ <stop offset="0%" style="stop-color:#404040"/>
504
+ <stop offset="100%" style="stop-color:#353535"/>
505
+ </linearGradient>
506
+ </defs>
507
+ <rect x="2" y="2" width="46" height="36" rx="2" fill="url(#piano-bg)" stroke="#555" stroke-width="1"/>
508
+
509
+ <!-- Piano keys on left -->
510
+ <rect x="4" y="4" width="8" height="32" fill="#f0f0f0"/>
511
+ <rect x="4" y="6" width="5" height="4" fill="#2a2a2a"/>
512
+ <rect x="4" y="12" width="5" height="4" fill="#2a2a2a"/>
513
+ <rect x="4" y="20" width="5" height="4" fill="#2a2a2a"/>
514
+ <rect x="4" y="26" width="5" height="4" fill="#2a2a2a"/>
515
+ <rect x="4" y="32" width="5" height="4" fill="#2a2a2a"/>
516
+
517
+ <!-- Grid lines -->
518
+ <g stroke="#666" stroke-width="0.5" opacity="0.5">
519
+ <line x1="12" y1="4" x2="46" y2="4"/>
520
+ <line x1="12" y1="10" x2="46" y2="10"/>
521
+ <line x1="12" y1="16" x2="46" y2="16"/>
522
+ <line x1="12" y1="22" x2="46" y2="22"/>
523
+ <line x1="12" y1="28" x2="46" y2="28"/>
524
+ <line x1="12" y1="34" x2="46" y2="34"/>
525
+ <line x1="16" y1="4" x2="16" y2="36"/>
526
+ <line x1="22" y1="4" x2="22" y2="36"/>
527
+ <line x1="28" y1="4" x2="28" y2="36"/>
528
+ <line x1="34" y1="4" x2="34" y2="36"/>
529
+ <line x1="40" y1="4" x2="40" y2="36"/>
530
+ </g>
531
+
532
+ <!-- Note blocks -->
533
+ <rect x="16" y="10" width="8" height="4" rx="1" fill="#60ff60"/>
534
+ <rect x="28" y="16" width="6" height="4" rx="1" fill="#ff6060"/>
535
+ <rect x="22" y="22" width="10" height="4" rx="1" fill="#6060ff"/>
536
+ </svg>
537
+ <div class="icon-label">Piano Roll</div>
538
+ </div>
539
+
540
+ <div class="icon-item">
541
+ <!-- Playlist View -->
542
+ <svg width="50" height="40" viewBox="0 0 50 40">
543
+ <defs>
544
+ <linearGradient id="playlist-bg" x1="0%" y1="0%" x2="100%" y2="0%">
545
+ <stop offset="0%" style="stop-color:#383838"/>
546
+ <stop offset="100%" style="stop-color:#2d2d30"/>
547
+ </linearGradient>
548
+ </defs>
549
+ <rect x="2" y="2" width="46" height="36" rx="2" fill="url(#playlist-bg)" stroke="#555" stroke-width="1"/>
550
+
551
+ <!-- Timeline -->
552
+ <rect x="4" y="4" width="42" height="6" fill="#404040"/>
553
+ <g stroke="#666" stroke-width="0.5">
554
+ <line x1="8" y1="4" x2="8" y2="10"/>
555
+ <line x1="16" y1="4" x2="16" y2="10"/>
556
+ <line x1="24" y1="4" x2="24" y2="10"/>
557
+ <line x1="32" y1="4" x2="32" y2="10"/>
558
+ <line x1="40" y1="4" x2="40" y2="10"/>
559
+ </g>
560
+
561
+ <!-- Track lanes -->
562
+ <g fill="#606060" opacity="0.3">
563
+ <rect x="4" y="12" width="42" height="4"/>
564
+ <rect x="4" y="18" width="42" height="4"/>
565
+ <rect x="4" y="24" width="42" height="4"/>
566
+ <rect x="4" y="30" width="42" height="4"/>
567
+ </g>
568
+
569
+ <!-- Audio clips -->
570
+ <rect x="6" y="13" width="12" height="2" rx="1" fill="#40c040"/>
571
+ <rect x="20" y="13" width="8" height="2" rx="1" fill="#40c040"/>
572
+ <rect x="8" y="19" width="16" height="2" rx="1" fill="#c04040"/>
573
+ <rect x="12" y="25" width="10" height="2" rx="1" fill="#4040c0"/>
574
+ <rect x="26" y="25" width="14" height="2" rx="1" fill="#4040c0"/>
575
+ <rect x="16" y="31" width="12" height="2" rx="1" fill="#c0c040"/>
576
+ </svg>
577
+ <div class="icon-label">Playlist View</div>
578
+ </div>
579
+
580
+ <div class="icon-item">
581
+ <!-- Mixer -->
582
+ <svg width="50" height="40" viewBox="0 0 50 40">
583
+ <defs>
584
+ <linearGradient id="mixer-bg" x1="0%" y1="0%" x2="100%" y2="100%">
585
+ <stop offset="0%" style="stop-color:#404040"/>
586
+ <stop offset="100%" style="stop-color:#303030"/>
587
+ </linearGradient>
588
+ <linearGradient id="fader-track" x1="0%" y1="0%" x2="100%" y2="0%">
589
+ <stop offset="0%" style="stop-color:#2a2a2a"/>
590
+ <stop offset="100%" style="stop-color:#1a1a1a"/>
591
+ </linearGradient>
592
+ </defs>
593
+ <rect x="2" y="2" width="46" height="36" rx="2" fill="url(#mixer-bg)" stroke="#555" stroke-width="1"/>
594
+
595
+ <!-- Channel strips -->
596
+ <g>
597
+ <!-- Channel 1 -->
598
+ <rect x="6" y="6" width="8" height="28" fill="#353535" stroke="#555" stroke-width="0.5"/>
599
+ <circle cx="10" cy="10" r="2" fill="#404040"/>
600
+ <rect x="8" y="14" width="4" height="12" fill="url(#fader-track)"/>
601
+ <rect x="7" y="20" width="6" height="3" rx="1" fill="#808080"/>
602
+ <rect x="8" y="28" width="4" height="4" rx="1" fill="#606060"/>
603
+
604
+ <!-- Channel 2 -->
605
+ <rect x="16" y="6" width="8" height="28" fill="#353535" stroke="#555" stroke-width="0.5"/>
606
+ <circle cx="20" cy="10" r="2" fill="#404040"/>
607
+ <rect x="18" y="14" width="4" height="12" fill="url(#fader-track)"/>
608
+ <rect x="17" y="18" width="6" height="3" rx="1" fill="#808080"/>
609
+ <rect x="18" y="28" width="4" height="4" rx="1" fill="#606060"/>
610
+
611
+ <!-- Channel 3 -->
612
+ <rect x="26" y="6" width="8" height="28" fill="#353535" stroke="#555" stroke-width="0.5"/>
613
+ <circle cx="30" cy="10" r="2" fill="#404040"/>
614
+ <rect x="28" y="14" width="4" height="12" fill="url(#fader-track)"/>
615
+ <rect x="27" y="22" width="6" height="3" rx="1" fill="#808080"/>
616
+ <rect x="28" y="28" width="4" height="4" rx="1" fill="#606060"/>
617
+
618
+ <!-- Master Channel -->
619
+ <rect x="36" y="6" width="8" height="28" fill="#454545" stroke="#777" stroke-width="0.5"/>
620
+ <circle cx="40" cy="10" r="2" fill="#505050"/>
621
+ <rect x="38" y="14" width="4" height="12" fill="url(#fader-track)"/>
622
+ <rect x="37" y="16" width="6" height="3" rx="1" fill="#a0a0a0"/>
623
+ <rect x="38" y="28" width="4" height="4" rx="1" fill="#808080"/>
624
+ </g>
625
+ </svg>
626
+ <div class="icon-label">Mixer</div>
627
+ </div>
628
+
629
+ <div class="icon-item">
630
+ <!-- Keyboard to MIDI -->
631
+ <svg width="50" height="30" viewBox="0 0 50 30">
632
+ <defs>
633
+ <linearGradient id="kbd-bg" x1="0%" y1="0%" x2="100%" y2="0%">
634
+ <stop offset="0%" style="stop-color:#f0f0f0"/>
635
+ <stop offset="100%" style="stop-color:#e0e0e0"/>
636
+ </linearGradient>
637
+ </defs>
638
+ <!-- Keyboard -->
639
+ <rect x="2" y="8" width="30" height="20" rx="2" fill="url(#kbd-bg)" stroke="#ccc" stroke-width="1"/>
640
+
641
+ <!-- White keys -->
642
+ <g fill="#ffffff" stroke="#ccc" stroke-width="0.5">
643
+ <rect x="4" y="10" width="3" height="16"/>
644
+ <rect x="8" y="10" width="3" height="16"/>
645
+ <rect x="12" y="10" width="3" height="16"/>
646
+ <rect x="16" y="10" width="3" height="16"/>
647
+ <rect x="20" y="10" width="3" height="16"/>
648
+ <rect x="24" y="10" width="3" height="16"/>
649
+ <rect x="28" y="10" width="3" height="16"/>
650
+ </g>
651
+
652
+ <!-- Black keys -->
653
+ <g fill="#2a2a2a">
654
+ <rect x="6" y="10" width="2" height="10"/>
655
+ <rect x="10" y="10" width="2" height="10"/>
656
+ <rect x="17" y="10" width="2" height="10"/>
657
+ <rect x="21" y="10" width="2" height="10"/>
658
+ <rect x="25" y="10" width="2" height="10"/>
659
+ </g>
660
+
661
+ <!-- Arrow -->
662
+ <path d="M 34 18 L 40 18" stroke="#666" stroke-width="2" fill="none" marker-end="url(#arrow)"/>
663
+
664
+ <!-- MIDI connector -->
665
+ <rect x="42" y="14" width="6" height="8" rx="1" fill="#404040" stroke="#666" stroke-width="1"/>
666
+ <circle cx="45" cy="16" r="0.5" fill="#ccc"/>
667
+ <circle cx="45" cy="18" r="0.5" fill="#ccc"/>
668
+ <circle cx="45" cy="20" r="0.5" fill="#ccc"/>
669
+
670
+ <defs>
671
+ <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
672
+ <polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
673
+ </marker>
674
+ </defs>
675
+ </svg>
676
+ <div class="icon-label">Keyboard to MIDI</div>
677
+ </div>
678
+
679
+ <div class="icon-item">
680
+ <!-- Metronome -->
681
+ <svg width="40" height="50" viewBox="0 0 40 50">
682
+ <defs>
683
+ <linearGradient id="metro-body" x1="0%" y1="0%" x2="100%" y2="100%">
684
+ <stop offset="0%" style="stop-color:#606060"/>
685
+ <stop offset="100%" style="stop-color:#404040"/>
686
+ </linearGradient>
687
+ <radialGradient id="metro-face" cx="0.3" cy="0.3" r="0.8">
688
+ <stop offset="0%" style="stop-color:#f0f0f0"/>
689
+ <stop offset="100%" style="stop-color:#d0d0d0"/>
690
+ </radialGradient>
691
+ </defs>
692
+
693
+ <!-- Base -->
694
+ <rect x="8" y="40" width="24" height="8" rx="2" fill="#2a2a2a"/>
695
+
696
+ <!-- Main body -->
697
+ <path d="M 12 40 L 8 10 Q 8 6 12 6 L 28 6 Q 32 6 32 10 L 28 40 Z" fill="url(#metro-body)" stroke="#2a2a2a" stroke-width="1"/>
698
+
699
+ <!-- Face -->
700
+ <circle cx="20" cy="18" r="8" fill="url(#metro-face)" stroke="#999" stroke-width="1"/>
701
+
702
+ <!-- Tick marks -->
703
+ <g stroke="#333" stroke-width="1">
704
+ <line x1="20" y1="12" x2="20" y2="14"/>
705
+ <line x1="26" y1="18" x2="24" y2="18"/>
706
+ <line x1="20" y1="24" x2="20" y2="22"/>
707
+ <line x1="14" y1="18" x2="16" y2="18"/>
708
+ </g>
709
+
710
+ <!-- Pendulum -->
711
+ <line x1="20" y1="18" x2="22" y2="8" stroke="#333" stroke-width="2"/>
712
+ <circle cx="22" cy="8" r="2" fill="#ff6060"/>
713
+
714
+ <!-- Center -->
715
+ <circle cx="20" cy="18" r="1" fill="#333"/>
716
+
717
+ <!-- Tempo indicator -->
718
+ <rect x="14" y="30" width="12" height="4" rx="1" fill="#404040"/>
719
+ <rect x="15" y="31" width="4" height="2" rx="0.5" fill="#60ff60"/>
720
+ </svg>
721
+ <div class="icon-label">Metronome</div>
722
+ </div>
723
+ </div>
724
+ </div>
725
+
726
+ <!-- Window Controls Section -->
727
+ <div class="section">
728
+ <h2>Window Controls (Lit & Non-lit)</h2>
729
+ <div class="icon-grid">
730
+ <div class="icon-item">
731
+ <div class="state-container">
732
+ <div>
733
+ <!-- Close Button - Non-lit -->
734
+ <svg width="24" height="24" viewBox="0 0 24 24">
735
+ <defs>
736
+ <linearGradient id="close-off" x1="0%" y1="0%" x2="100%" y2="100%">
737
+ <stop offset="0%" style="stop-color:#505050"/>
738
+ <stop offset="100%" style="stop-color:#353535"/>
739
+ </linearGradient>
740
+ </defs>
741
+ <rect x="2" y="2" width="20" height="20" rx="2" fill="url(#close-off)" stroke="#2a2a2a" stroke-width="1"/>
742
+ <g stroke="#808080" stroke-width="2" stroke-linecap="round">
743
+ <line x1="8" y1="8" x2="16" y2="16"/>
744
+ <line x1="16" y1="8" x2="8" y2="16"/>
745
+ </g>
746
+ </svg>
747
+ <div class="state-label">Off</div>
748
+ </div>
749
+ <div>
750
+ <!-- Close Button - Lit -->
751
+ <svg width="24" height="24" viewBox="0 0 24 24">
752
+ <defs>
753
+ <linearGradient id="close-on" x1="0%" y1="0%" x2="100%" y2="100%">
754
+ <stop offset="0%" style="stop-color:#ff6060"/>
755
+ <stop offset="100%" style="stop-color:#cc3030"/>
756
+ </linearGradient>
757
+ </defs>
758
+ <rect x="2" y="2" width="20" height="20" rx="2" fill="url(#close-on)" stroke="#2a2a2a" stroke-width="1"/>
759
+ <g stroke="#ffffff" stroke-width="2" stroke-linecap="round">
760
+ <line x1="8" y1="8" x2="16" y2="16"/>
761
+ <line x1="16" y1="8" x2="8" y2="16"/>
762
+ </g>
763
+ </svg>
764
+ <div class="state-label">On</div>
765
+ </div>
766
+ </div>
767
+ <div class="icon-label">Close (X)</div>
768
+ </div>
769
+
770
+ <div class="icon-item">
771
+ <div class="state-container">
772
+ <div>
773
+ <!-- Minimize Button - Non-lit -->
774
+ <svg width="24" height="24" viewBox="0 0 24 24">
775
+ <defs>
776
+ <linearGradient id="min-off" x1="0%" y1="0%" x2="100%" y2="100%">
777
+ <stop offset="0%" style="stop-color:#505050"/>
778
+ <stop offset="100%" style="stop-color:#353535"/>
779
+ </linearGradient>
780
+ </defs>
781
+ <rect x="2" y="2" width="20" height="20" rx="2" fill="url(#min-off)" stroke="#2a2a2a" stroke-width="1"/>
782
+ <line x1="8" y1="12" x2="16" y2="12" stroke="#808080" stroke-width="2" stroke-linecap="round"/>
783
+ </svg>
784
+ <div class="state-label">Off</div>
785
+ </div>
786
+ <div>
787
+ <!-- Minimize Button - Lit -->
788
+ <svg width="24" height="24" viewBox="0 0 24 24">
789
+ <defs>
790
+ <linearGradient id="min-on" x1="0%" y1="0%" x2="100%" y2="100%">
791
+ <stop offset="0%" style="stop-color:#6060ff"/>
792
+ <stop offset="100%" style="stop-color:#3030cc"/>
793
+ </linearGradient>
794
+ </defs>
795
+ <rect x="2" y="2" width="20" height="20" rx="2" fill="url(#min-on)" stroke="#2a2a2a" stroke-width="1"/>
796
+ <line x1="8" y1="12" x2="16" y2="12" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
797
+ </svg>
798
+ <div class="state-label">On</div>
799
+ </div>
800
+ </div>
801
+ <div class="icon-label">Minimize</div>
802
+ </div>
803
+
804
+ <div class="icon-item">
805
+ <div class="state-container">
806
+ <div>
807
+ <!-- Trash - Non-lit (closed) -->
808
+ <svg width="24" height="30" viewBox="0 0 24 30">
809
+ <defs>
810
+ <linearGradient id="trash-body-off" x1="0%" y1="0%" x2="100%" y2="100%">
811
+ <stop offset="0%" style="stop-color:#606060"/>
812
+ <stop offset="100%" style="stop-color:#404040"/>
813
+ </linearGradient>
814
+ <linearGradient id="trash-lid-off" x1="0%" y1="0%" x2="100%" y2="100%">
815
+ <stop offset="0%" style="stop-color:#707070"/>
816
+ <stop offset="100%" style="stop-color:#505050"/>
817
+ </linearGradient>
818
+ </defs>
819
+ <!-- Body -->
820
+ <path d="M 6 12 L 7 26 Q 7 28 9 28 L 15 28 Q 17 28 17 26 L 18 12 Z" fill="url(#trash-body-off)" stroke="#2a2a2a" stroke-width="1"/>
821
+ <!-- Lid -->
822
+ <rect x="4" y="10" width="16" height="3" rx="1" fill="url(#trash-lid-off)" stroke="#2a2a2a" stroke-width="1"/>
823
+ <!-- Handle -->
824
+ <rect x="9" y="8" width="6" height="2" rx="1" fill="#505050" stroke="#2a2a2a" stroke-width="0.5"/>
825
+ <!-- Lines on body -->
826
+ <g stroke="#404040" stroke-width="1" opacity="0.5">
827
+ <line x1="10" y1="15" x2="10" y2="24"/>
828
+ <line x1="12" y1="15" x2="12" y2="24"/>
829
+ <line x1="14" y1="15" x2="14" y2="24"/>
830
+ </g>
831
+ </svg>
832
+ <div class="state-label">Closed</div>
833
+ </div>
834
+ <div>
835
+ <!-- Trash - Lit (open) -->
836
+ <svg width="24" height="30" viewBox="0 0 24 30">
837
+ <defs>
838
+ <linearGradient id="trash-body-on" x1="0%" y1="0%" x2="100%" y2="100%">
839
+ <stop offset="0%" style="stop-color:#ff8080"/>
840
+ <stop offset="100%" style="stop-color:#cc5050"/>
841
+ </linearGradient>
842
+ <linearGradient id="trash-lid-on" x1="0%" y1="0%" x2="100%" y2="100%">
843
+ <stop offset="0%" style="stop-color:#ff9090"/>
844
+ <stop offset="100%" style="stop-color:#dd6060"/>
845
+ </linearGradient>
846
+ </defs>
847
+ <!-- Body -->
848
+ <path d="M 6 12 L 7 26 Q 7 28 9 28 L 15 28 Q 17 28 17 26 L 18 12 Z" fill="url(#trash-body-on)" stroke="#2a2a2a" stroke-width="1"/>
849
+ <!-- Lid (tilted open) -->
850
+ <g transform="rotate(-25 12 11)">
851
+ <rect x="4" y="9" width="16" height="3" rx="1" fill="url(#trash-lid-on)" stroke="#2a2a2a" stroke-width="1"/>
852
+ <rect x="9" y="7" width="6" height="2" rx="1" fill="#dd6060" stroke="#2a2a2a" stroke-width="0.5"/>
853
+ </g>
854
+ <!-- Lines on body -->
855
+ <g stroke="#cc4040" stroke-width="1" opacity="0.7">
856
+ <line x1="10" y1="15" x2="10" y2="24"/>
857
+ <line x1="12" y1="15" x2="12" y2="24"/>
858
+ <line x1="14" y1="15" x2="14" y2="24"/>
859
+ </g>
860
+ </svg>
861
+ <div class="state-label">Open</div>
862
+ </div>
863
+ </div>
864
+ <div class="icon-label">Trash Can</div>
865
+ </div>
866
+ </div>
867
+ </div>
868
+
869
+ <!-- Static Tools Section -->
870
+ <div class="section">
871
+ <h2>Static Tools</h2>
872
+ <div class="icon-grid">
873
+ <div class="icon-item">
874
+ <!-- Razor Blade at 45 degrees -->
875
+ <svg width="30" height="30" viewBox="0 0 30 30">
876
+ <defs>
877
+ <linearGradient id="razor-blade" x1="0%" y1="0%" x2="100%" y2="100%">
878
+ <stop offset="0%" style="stop-color:#d0d0d0"/>
879
+ <stop offset="50%" style="stop-color:#a0a0a0"/>
880
+ <stop offset="100%" style="stop-color:#707070"/>
881
+ </linearGradient>
882
+ <linearGradient id="razor-handle" x1="0%" y1="0%" x2="100%" y2="100%">
883
+ <stop offset="0%" style="stop-color:#606060"/>
884
+ <stop offset="100%" style="stop-color:#404040"/>
885
+ </linearGradient>
886
+ </defs>
887
+ <g transform="rotate(45 15 15)">
888
+ <!-- Handle -->
889
+ <rect x="10" y="20" width="10" height="6" rx="1" fill="url(#razor-handle)" stroke="#2a2a2a" stroke-width="0.5"/>
890
+ <!-- Blade -->
891
+ <path d="M 15 4 L 13 20 L 17 20 Z" fill="url(#razor-blade)" stroke="#505050" stroke-width="0.5"/>
892
+ <!-- Cutting edge highlight -->
893
+ <line x1="15" y1="4" x2="15" y2="10" stroke="#ffffff" stroke-width="0.5" opacity="0.8"/>
894
+ </g>
895
+ </svg>
896
+ <div class="icon-label">Razor Blade</div>
897
+ </div>
898
+
899
+ <div class="icon-item">
900
+ <!-- Pencil -->
901
+ <svg width="30" height="30" viewBox="0 0 30 30">
902
+ <defs>
903
+ <linearGradient id="pencil-body" x1="0%" y1="0%" x2="100%" y2="100%">
904
+ <stop offset="0%" style="stop-color:#ffcc00"/>
905
+ <stop offset="100%" style="stop-color:#cc9900"/>
906
+ </linearGradient>
907
+ <linearGradient id="pencil-tip" x1="0%" y1="0%" x2="100%" y2="100%">
908
+ <stop offset="0%" style="stop-color:#d0a070"/>
909
+ <stop offset="100%" style="stop-color:#a07040"/>
910
+ </linearGradient>
911
+ </defs>
912
+ <g transform="rotate(45 15 15)">
913
+ <!-- Eraser -->
914
+ <rect x="13" y="4" width="4" height="3" rx="1" fill="#ff6060"/>
915
+ <!-- Metal ferrule -->
916
+ <rect x="13" y="7" width="4" height="2" fill="#c0c0c0"/>
917
+ <!-- Body -->
918
+ <rect x="13" y="9" width="4" height="14" fill="url(#pencil-body)" stroke="#aa8800" stroke-width="0.5"/>
919
+ <!-- Wood tip -->
920
+ <path d="M 13 23 L 15 26 L 17 23 Z" fill="url(#pencil-tip)" stroke="#906030" stroke-width="0.5"/>
921
+ <!-- Lead -->
922
+ <circle cx="15" cy="26" r="0.5" fill="#2a2a2a"/>
923
+ </g>
924
+ </svg>
925
+ <div class="icon-label">Pencil</div>
926
+ </div>
927
+
928
+ <div class="icon-item">
929
+ <!-- Paint Brush -->
930
+ <svg width="30" height="30" viewBox="0 0 30 30">
931
+ <defs>
932
+ <linearGradient id="brush-handle" x1="0%" y1="0%" x2="100%" y2="100%">
933
+ <stop offset="0%" style="stop-color:#8B4513"/>
934
+ <stop offset="100%" style="stop-color:#654321"/>
935
+ </linearGradient>
936
+ <linearGradient id="brush-ferrule" x1="0%" y1="0%" x2="100%" y2="100%">
937
+ <stop offset="0%" style="stop-color:#c0c0c0"/>
938
+ <stop offset="100%" style="stop-color:#808080"/>
939
+ </linearGradient>
940
+ </defs>
941
+ <g transform="rotate(45 15 15)">
942
+ <!-- Handle -->
943
+ <rect x="13" y="6" width="4" height="12" rx="0.5" fill="url(#brush-handle)" stroke="#4a2c17" stroke-width="0.5"/>
944
+ <!-- Ferrule -->
945
+ <rect x="12.5" y="18" width="5" height="4" fill="url(#brush-ferrule)" stroke="#606060" stroke-width="0.5"/>
946
+ <!-- Bristles -->
947
+ <g stroke="#404040" stroke-width="0.8" opacity="0.8">
948
+ <line x1="13" y1="22" x2="13" y2="26"/>
949
+ <line x1="14" y1="22" x2="14" y2="25"/>
950
+ <line x1="15" y1="22" x2="15" y2="26"/>
951
+ <line x1="16" y1="22" x2="16" y2="25"/>
952
+ <line x1="17" y1="22" x2="17" y2="26"/>
953
+ </g>
954
+ <!-- Paint on tip -->
955
+ <circle cx="15" cy="25" r="1" fill="#6060ff" opacity="0.7"/>
956
+ </g>
957
+ </svg>
958
+ <div class="icon-label">Paint Brush</div>
959
+ </div>
960
+
961
+ <div class="icon-item">
962
+ <!-- Selector (cursor arrow) -->
963
+ <svg width="24" height="24" viewBox="0 0 24 24">
964
+ <defs>
965
+ <linearGradient id="selector-arrow" x1="0%" y1="0%" x2="100%" y2="100%">
966
+ <stop offset="0%" style="stop-color:#ffffff"/>
967
+ <stop offset="100%" style="stop-color:#d0d0d0"/>
968
+ </linearGradient>
969
+ </defs>
970
+ <!-- Arrow body -->
971
+ <path d="M 4 4 L 4 18 L 9 13 L 13 13 L 16 16 L 18 14 L 15 11 L 15 7 Z" fill="url(#selector-arrow)" stroke="#2a2a2a" stroke-width="1"/>
972
+ <!-- Shadow -->
973
+ <path d="M 5 5 L 5 18 L 10 13 L 14 13 L 17 16 L 19 14 L 16 11 L 16 7 Z" fill="#808080" opacity="0.3"/>
974
+ </svg>
975
+ <div class="icon-label">Selector</div>
976
+ </div>
977
+
978
+ <div class="icon-item">
979
+ <!-- Search (magnifying glass) -->
980
+ <svg width="24" height="24" viewBox="0 0 24 24">
981
+ <defs>
982
+ <radialGradient id="search-lens" cx="0.3" cy="0.3" r="0.8">
983
+ <stop offset="0%" style="stop-color:#f0f0f0"/>
984
+ <stop offset="100%" style="stop-color:#c0c0c0"/>
985
+ </radialGradient>
986
+ <linearGradient id="search-handle" x1="0%" y1="0%" x2="100%" y2="100%">
987
+ <stop offset="0%" style="stop-color:#606060"/>
988
+ <stop offset="100%" style="stop-color:#404040"/>
989
+ </linearGradient>
990
+ </defs>
991
+ <!-- Lens -->
992
+ <circle cx="11" cy="11" r="7" fill="url(#search-lens)" stroke="#808080" stroke-width="2"/>
993
+ <circle cx="11" cy="11" r="5" fill="none" stroke="#a0a0a0" stroke-width="1"/>
994
+ <!-- Handle -->
995
+ <line x1="17" y1="17" x2="21" y2="21" stroke="url(#search-handle)" stroke-width="3" stroke-linecap="round"/>
996
+ <!-- Highlight on lens -->
997
+ <circle cx="9" cy="9" r="2" fill="#ffffff" opacity="0.6"/>
998
+ </svg>
999
+ <div class="icon-label">Search</div>
1000
+ </div>
1001
+
1002
+ <div class="icon-item">
1003
+ <!-- Magnet -->
1004
+ <svg width="24" height="24" viewBox="0 0 24 24">
1005
+ <defs>
1006
+ <linearGradient id="magnet-red" x1="0%" y1="0%" x2="100%" y2="100%">
1007
+ <stop offset="0%" style="stop-color:#ff4040"/>
1008
+ <stop offset="100%" style="stop-color:#cc2020"/>
1009
+ </linearGradient>
1010
+ <linearGradient id="magnet-blue" x1="0%" y1="0%" x2="100%" y2="100%">
1011
+ <stop offset="0%" style="stop-color:#4040ff"/>
1012
+ <stop offset="100%" style="stop-color:#2020cc"/>
1013
+ </linearGradient>
1014
+ </defs>
1015
+ <!-- Horseshoe magnet shape -->
1016
+ <path d="M 6 20 L 6 12 Q 6 6 12 6 Q 18 6 18 12 L 18 20" fill="none" stroke="#606060" stroke-width="8" stroke-linecap="round"/>
1017
+ <!-- North pole (red) -->
1018
+ <path d="M 6 20 L 6 12 Q 6 6 12 6" fill="none" stroke="url(#magnet-red)" stroke-width="6" stroke-linecap="round"/>
1019
+ <!-- South pole (blue) -->
1020
+ <path d="M 12 6 Q 18 6 18 12 L 18 20" fill="none" stroke="url(#magnet-blue)" stroke-width="6" stroke-linecap="round"/>
1021
+ <!-- Pole labels -->
1022
+ <text x="6" y="22" font-family="Arial" font-size="8" fill="#ffffff" text-anchor="middle">N</text>
1023
+ <text x="18" y="22" font-family="Arial" font-size="8" fill="#ffffff" text-anchor="middle">S</text>
1024
+ </svg>
1025
+ <div class="icon-label">Magnet</div>
1026
+ </div>
1027
+
1028
+ <div class="icon-item">
1029
+ <!-- Microphone -->
1030
+ <svg width="24" height="30" viewBox="0 0 24 30">
1031
+ <defs>
1032
+ <linearGradient id="mic-body" x1="0%" y1="0%" x2="100%" y2="100%">
1033
+ <stop offset="0%" style="stop-color:#808080"/>
1034
+ <stop offset="100%" style="stop-color:#505050"/>
1035
+ </linearGradient>
1036
+ <radialGradient id="mic-grille" cx="0.5" cy="0.5" r="0.8">
1037
+ <stop offset="0%" style="stop-color:#606060"/>
1038
+ <stop offset="100%" style="stop-color:#404040"/>
1039
+ </radialGradient>
1040
+ </defs>
1041
+ <!-- Mic body -->
1042
+ <rect x="8" y="4" width="8" height="12" rx="4" fill="url(#mic-body)" stroke="#2a2a2a" stroke-width="1"/>
1043
+ <!-- Grille -->
1044
+ <rect x="9" y="5" width="6" height="10" rx="3" fill="url(#mic-grille)"/>
1045
+ <!-- Grille holes -->
1046
+ <g fill="#2a2a2a">
1047
+ <circle cx="11" cy="7" r="0.5"/>
1048
+ <circle cx="13" cy="7" r="0.5"/>
1049
+ <circle cx="10" cy="9" r="0.5"/>
1050
+ <circle cx="12" cy="9" r="0.5"/>
1051
+ <circle cx="14" cy="9" r="0.5"/>
1052
+ <circle cx="11" cy="11" r="0.5"/>
1053
+ <circle cx="13" cy="11" r="0.5"/>
1054
+ <circle cx="10" cy="13" r="0.5"/>
1055
+ <circle cx="12" cy="13" r="0.5"/>
1056
+ <circle cx="14" cy="13" r="0.5"/>
1057
+ </g>
1058
+ <!-- Stand -->
1059
+ <rect x="11" y="16" width="2" height="8" fill="#404040"/>
1060
+ <rect x="8" y="24" width="8" height="3" rx="1" fill="#404040"/>
1061
+ <!-- XLR connector -->
1062
+ <circle cx="12" cy="20" r="1.5" fill="#2a2a2a" stroke="#606060" stroke-width="0.5"/>
1063
+ <g fill="#808080">
1064
+ <circle cx="11.2" cy="19.5" r="0.3"/>
1065
+ <circle cx="12.8" cy="19.5" r="0.3"/>
1066
+ <circle cx="12" cy="20.8" r="0.3"/>
1067
+ </g>
1068
+ </svg>
1069
+ <div class="icon-label">Microphone</div>
1070
+ </div>
1071
+
1072
+ <div class="icon-item">
1073
+ <!-- Speaker -->
1074
+ <svg width="30" height="24" viewBox="0 0 30 24">
1075
+ <defs>
1076
+ <linearGradient id="speaker-body" x1="0%" y1="0%" x2="100%" y2="100%">
1077
+ <stop offset="0%" style="stop-color:#404040"/>
1078
+ <stop offset="100%" style="stop-color:#2a2a2a"/>
1079
+ </linearGradient>
1080
+ <radialGradient id="speaker-cone" cx="0.3" cy="0.3" r="0.8">
1081
+ <stop offset="0%" style="stop-color:#606060"/>
1082
+ <stop offset="100%" style="stop-color:#353535"/>
1083
+ </radialGradient>
1084
+ </defs>
1085
+ <!-- Speaker cabinet -->
1086
+ <rect x="4" y="4" width="22" height="16" rx="2" fill="url(#speaker-body)" stroke="#1a1a1a" stroke-width="1"/>
1087
+ <!-- Main driver -->
1088
+ <circle cx="15" cy="12" r="6" fill="url(#speaker-cone)" stroke="#2a2a2a" stroke-width="1"/>
1089
+ <circle cx="15" cy="12" r="3" fill="#2a2a2a"/>
1090
+ <circle cx="15" cy="12" r="1" fill="#808080"/>
1091
+ <!-- Tweeter -->
1092
+ <circle cx="21" cy="8" r="2" fill="url(#speaker-cone)" stroke="#2a2a2a" stroke-width="0.5"/>
1093
+ <circle cx="21" cy="8" r="0.8" fill="#2a2a2a"/>
1094
+ <!-- Sound waves -->
1095
+ <g stroke="#60ff60" stroke-width="1" fill="none" opacity="0.6">
1096
+ <path d="M 2 8 Q 0 12 2 16"/>
1097
+ <path d="M 1 6 Q -2 12 1 18"/>
1098
+ <path d="M 0 4 Q -4 12 0 20"/>
1099
+ </g>
1100
+ </svg>
1101
+ <div class="icon-label">Speaker</div>
1102
+ </div>
1103
+ </div>
1104
+ </div>
1105
+ </div>
1106
+ </body>
1107
+ </html>