Hugging Face's logo

Spaces:
djteeski
/
anycoder-b4c82417
Running

App Files Community
djteeski commited on
Commit
142652d
·
verified ·
1 Parent(s): ecd1b1a

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1232 -19
index.html CHANGED
@@ -1,19 +1,1232 @@
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>AnyCoder DAW - AI-Assisted Music Production</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #3498db;
11
+ --secondary: #2c3e50;
12
+ --accent: #e74c3c;
13
+ --dark: #1a1a1a;
14
+ --darker: #121212;
15
+ --light: #ecf0f1;
16
+ --success: #2ecc71;
17
+ --warning: #f39c12;
18
+ --channel-height: 80px;
19
+ --transport-height: 60px;
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
+ }
28
+
29
+ body {
30
+ background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
31
+ color: var(--light);
32
+ min-height: 100vh;
33
+ overflow-x: hidden;
34
+ }
35
+
36
+ .app-container {
37
+ display: grid;
38
+ grid-template-rows: auto 1fr auto;
39
+ height: 100vh;
40
+ }
41
+
42
+ /* Header Styles */
43
+ header {
44
+ background: var(--secondary);
45
+ padding: 15px 20px;
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ box-shadow: 0 2px 10px rgba(0,0,0,0.3);
50
+ border-bottom: 1px solid rgba(255,255,255,0.1);
51
+ }
52
+
53
+ .logo {
54
+ display: flex;
55
+ align-items: center;
56
+ gap: 15px;
57
+ }
58
+
59
+ .logo h1 {
60
+ font-size: 1.8rem;
61
+ background: linear-gradient(90deg, var(--primary), var(--accent));
62
+ -webkit-background-clip: text;
63
+ -webkit-text-fill-color: transparent;
64
+ font-weight: 700;
65
+ }
66
+
67
+ .logo i {
68
+ font-size: 2rem;
69
+ color: var(--primary);
70
+ }
71
+
72
+ .header-controls {
73
+ display: flex;
74
+ gap: 20px;
75
+ align-items: center;
76
+ }
77
+
78
+ .btn {
79
+ padding: 8px 16px;
80
+ border: none;
81
+ border-radius: 4px;
82
+ cursor: pointer;
83
+ font-weight: 600;
84
+ transition: all 0.3s ease;
85
+ display: flex;
86
+ align-items: center;
87
+ gap: 8px;
88
+ }
89
+
90
+ .btn-primary {
91
+ background: var(--primary);
92
+ color: white;
93
+ }
94
+
95
+ .btn-secondary {
96
+ background: var(--secondary);
97
+ color: var(--light);
98
+ border: 1px solid rgba(255,255,255,0.2);
99
+ }
100
+
101
+ .btn:hover {
102
+ transform: translateY(-2px);
103
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
104
+ }
105
+
106
+ /* Main Content Area */
107
+ .main-content {
108
+ display: grid;
109
+ grid-template-columns: 250px 1fr;
110
+ height: 100%;
111
+ }
112
+
113
+ /* Sidebar */
114
+ .sidebar {
115
+ background: var(--secondary);
116
+ padding: 20px;
117
+ overflow-y: auto;
118
+ border-right: 1px solid rgba(255,255,255,0.1);
119
+ }
120
+
121
+ .sidebar-section {
122
+ margin-bottom: 30px;
123
+ }
124
+
125
+ .sidebar-section h3 {
126
+ margin-bottom: 15px;
127
+ font-size: 1.1rem;
128
+ color: var(--primary);
129
+ border-bottom: 1px solid rgba(255,255,255,0.1);
130
+ padding-bottom: 8px;
131
+ }
132
+
133
+ .instrument-list, .effect-list {
134
+ display: flex;
135
+ flex-direction: column;
136
+ gap: 10px;
137
+ }
138
+
139
+ .instrument-item, .effect-item {
140
+ padding: 12px;
141
+ background: rgba(0,0,0,0.2);
142
+ border-radius: 6px;
143
+ cursor: pointer;
144
+ transition: all 0.2s ease;
145
+ display: flex;
146
+ align-items: center;
147
+ gap: 10px;
148
+ }
149
+
150
+ .instrument-item:hover, .effect-item:hover {
151
+ background: rgba(255,255,255,0.1);
152
+ transform: translateX(5px);
153
+ }
154
+
155
+ .instrument-item i, .effect-item i {
156
+ color: var(--primary);
157
+ }
158
+
159
+ /* Workspace */
160
+ .workspace {
161
+ display: grid;
162
+ grid-template-rows: 1fr auto;
163
+ overflow: hidden;
164
+ }
165
+
166
+ .channel-rack {
167
+ padding: 20px;
168
+ overflow-y: auto;
169
+ }
170
+
171
+ .channel {
172
+ display: flex;
173
+ align-items: center;
174
+ background: rgba(255,255,255,0.05);
175
+ border-radius: 8px;
176
+ margin-bottom: 10px;
177
+ padding: 15px;
178
+ transition: all 0.2s ease;
179
+ height: var(--channel-height);
180
+ }
181
+
182
+ .channel:hover {
183
+ background: rgba(255,255,255,0.08);
184
+ }
185
+
186
+ .channel.active {
187
+ background: rgba(52, 152, 219, 0.2);
188
+ border-left: 4px solid var(--primary);
189
+ }
190
+
191
+ .channel-icon {
192
+ width: 40px;
193
+ height: 40px;
194
+ background: var(--primary);
195
+ border-radius: 6px;
196
+ display: flex;
197
+ align-items: center;
198
+ justify-content: center;
199
+ margin-right: 15px;
200
+ }
201
+
202
+ .channel-info {
203
+ flex: 1;
204
+ }
205
+
206
+ .channel-name {
207
+ font-weight: 600;
208
+ margin-bottom: 5px;
209
+ }
210
+
211
+ .channel-controls {
212
+ display: flex;
213
+ gap: 10px;
214
+ }
215
+
216
+ .channel-control {
217
+ width: 30px;
218
+ height: 30px;
219
+ border-radius: 50%;
220
+ background: rgba(255,255,255,0.1);
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: center;
224
+ cursor: pointer;
225
+ transition: all 0.2s ease;
226
+ }
227
+
228
+ .channel-control:hover {
229
+ background: var(--primary);
230
+ }
231
+
232
+ .piano-roll {
233
+ background: var(--darker);
234
+ border-top: 1px solid rgba(255,255,255,0.1);
235
+ padding: 20px;
236
+ overflow-x: auto;
237
+ }
238
+
239
+ .piano-roll-header {
240
+ display: flex;
241
+ justify-content: space-between;
242
+ align-items: center;
243
+ margin-bottom: 15px;
244
+ }
245
+
246
+ .piano-roll-content {
247
+ background: rgba(0,0,0,0.3);
248
+ border-radius: 8px;
249
+ height: 300px;
250
+ position: relative;
251
+ overflow: hidden;
252
+ }
253
+
254
+ .piano-roll-grid {
255
+ position: absolute;
256
+ top: 0;
257
+ left: 0;
258
+ width: 100%;
259
+ height: 100%;
260
+ background:
261
+ repeating-linear-gradient(
262
+ 0deg,
263
+ transparent,
264
+ transparent 19px,
265
+ rgba(255,255,255,0.05) 19px,
266
+ rgba(255,255,255,0.05) 20px
267
+ ),
268
+ repeating-linear-gradient(
269
+ 90deg,
270
+ transparent,
271
+ transparent 19px,
272
+ rgba(255,255,255,0.05) 19px,
273
+ rgba(255,255,255,0.05) 20px
274
+ );
275
+ }
276
+
277
+ .piano-roll-notes {
278
+ position: absolute;
279
+ top: 0;
280
+ left: 0;
281
+ width: 100%;
282
+ height: 100%;
283
+ }
284
+
285
+ .note {
286
+ position: absolute;
287
+ background: var(--primary);
288
+ border-radius: 4px;
289
+ cursor: pointer;
290
+ transition: all 0.2s ease;
291
+ }
292
+
293
+ .note:hover {
294
+ background: var(--accent);
295
+ transform: scaleY(1.1);
296
+ }
297
+
298
+ /* Transport Controls */
299
+ .transport {
300
+ background: var(--secondary);
301
+ padding: 15px 20px;
302
+ display: flex;
303
+ justify-content: space-between;
304
+ align-items: center;
305
+ border-top: 1px solid rgba(255,255,255,0.1);
306
+ height: var(--transport-height);
307
+ }
308
+
309
+ .transport-controls {
310
+ display: flex;
311
+ align-items: center;
312
+ gap: 15px;
313
+ }
314
+
315
+ .transport-btn {
316
+ width: 40px;
317
+ height: 40px;
318
+ border-radius: 50%;
319
+ background: var(--primary);
320
+ display: flex;
321
+ align-items: center;
322
+ justify-content: center;
323
+ cursor: pointer;
324
+ transition: all 0.2s ease;
325
+ }
326
+
327
+ .transport-btn:hover {
328
+ background: var(--accent);
329
+ transform: scale(1.1);
330
+ }
331
+
332
+ .transport-btn.play {
333
+ width: 50px;
334
+ height: 50px;
335
+ background: var(--success);
336
+ }
337
+
338
+ .transport-info {
339
+ display: flex;
340
+ align-items: center;
341
+ gap: 20px;
342
+ }
343
+
344
+ .bpm-control {
345
+ display: flex;
346
+ align-items: center;
347
+ gap: 10px;
348
+ }
349
+
350
+ .bpm-control input {
351
+ width: 60px;
352
+ background: rgba(0,0,0,0.3);
353
+ border: 1px solid rgba(255,255,255,0.2);
354
+ border-radius: 4px;
355
+ padding: 5px 10px;
356
+ color: white;
357
+ }
358
+
359
+ .time-display {
360
+ font-family: 'Courier New', monospace;
361
+ font-size: 1.2rem;
362
+ }
363
+
364
+ /* Mixer */
365
+ .mixer {
366
+ background: var(--darker);
367
+ border-top: 1px solid rgba(255,255,255,0.1);
368
+ padding: 20px;
369
+ display: none;
370
+ }
371
+
372
+ .mixer.active {
373
+ display: block;
374
+ }
375
+
376
+ .mixer-header {
377
+ display: flex;
378
+ justify-content: space-between;
379
+ align-items: center;
380
+ margin-bottom: 20px;
381
+ }
382
+
383
+ .mixer-channels {
384
+ display: flex;
385
+ gap: 15px;
386
+ overflow-x: auto;
387
+ padding-bottom: 10px;
388
+ }
389
+
390
+ .mixer-channel {
391
+ width: 80px;
392
+ background: rgba(255,255,255,0.05);
393
+ border-radius: 8px;
394
+ padding: 15px 10px;
395
+ display: flex;
396
+ flex-direction: column;
397
+ align-items: center;
398
+ gap: 15px;
399
+ }
400
+
401
+ .mixer-fader {
402
+ flex: 1;
403
+ width: 30px;
404
+ background: rgba(0,0,0,0.3);
405
+ border-radius: 4px;
406
+ position: relative;
407
+ display: flex;
408
+ flex-direction: column;
409
+ justify-content: flex-end;
410
+ }
411
+
412
+ .fader-handle {
413
+ width: 100%;
414
+ height: 10px;
415
+ background: var(--primary);
416
+ border-radius: 2px;
417
+ position: absolute;
418
+ cursor: pointer;
419
+ }
420
+
421
+ .mixer-controls {
422
+ display: flex;
423
+ flex-direction: column;
424
+ gap: 10px;
425
+ width: 100%;
426
+ }
427
+
428
+ .mixer-control {
429
+ width: 100%;
430
+ height: 25px;
431
+ background: rgba(255,255,255,0.1);
432
+ border-radius: 4px;
433
+ display: flex;
434
+ align-items: center;
435
+ justify-content: center;
436
+ cursor: pointer;
437
+ }
438
+
439
+ /* File Upload */
440
+ .file-upload {
441
+ position: fixed;
442
+ top: 0;
443
+ left: 0;
444
+ width: 100%;
445
+ height: 100%;
446
+ background: rgba(0,0,0,0.8);
447
+ display: flex;
448
+ align-items: center;
449
+ justify-content: center;
450
+ z-index: 1000;
451
+ display: none;
452
+ }
453
+
454
+ .file-upload.active {
455
+ display: flex;
456
+ }
457
+
458
+ .upload-container {
459
+ background: var(--secondary);
460
+ border-radius: 12px;
461
+ padding: 30px;
462
+ width: 90%;
463
+ max-width: 500px;
464
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
465
+ }
466
+
467
+ .upload-header {
468
+ display: flex;
469
+ justify-content: space-between;
470
+ align-items: center;
471
+ margin-bottom: 20px;
472
+ }
473
+
474
+ .upload-close {
475
+ cursor: pointer;
476
+ font-size: 1.5rem;
477
+ color: var(--light);
478
+ }
479
+
480
+ .upload-area {
481
+ border: 2px dashed rgba(255,255,255,0.3);
482
+ border-radius: 8px;
483
+ padding: 40px 20px;
484
+ text-align: center;
485
+ margin-bottom: 20px;
486
+ cursor: pointer;
487
+ transition: all 0.3s ease;
488
+ }
489
+
490
+ .upload-area:hover {
491
+ border-color: var(--primary);
492
+ background: rgba(52, 152, 219, 0.1);
493
+ }
494
+
495
+ .upload-area i {
496
+ font-size: 3rem;
497
+ margin-bottom: 15px;
498
+ color: var(--primary);
499
+ }
500
+
501
+ .upload-files {
502
+ max-height: 200px;
503
+ overflow-y: auto;
504
+ }
505
+
506
+ .upload-file {
507
+ display: flex;
508
+ align-items: center;
509
+ gap: 10px;
510
+ padding: 10px;
511
+ background: rgba(0,0,0,0.2);
512
+ border-radius: 6px;
513
+ margin-bottom: 10px;
514
+ }
515
+
516
+ /* AI Assistant */
517
+ .ai-assistant {
518
+ position: fixed;
519
+ bottom: 20px;
520
+ right: 20px;
521
+ background: var(--secondary);
522
+ border-radius: 50%;
523
+ width: 60px;
524
+ height: 60px;
525
+ display: flex;
526
+ align-items: center;
527
+ justify-content: center;
528
+ cursor: pointer;
529
+ box-shadow: 0 4px 15px rgba(0,0,0,0.3);
530
+ z-index: 100;
531
+ transition: all 0.3s ease;
532
+ }
533
+
534
+ .ai-assistant:hover {
535
+ transform: scale(1.1);
536
+ background: var(--primary);
537
+ }
538
+
539
+ .ai-assistant i {
540
+ font-size: 1.5rem;
541
+ }
542
+
543
+ /* Responsive Design */
544
+ @media (max-width: 1024px) {
545
+ .main-content {
546
+ grid-template-columns: 200px 1fr;
547
+ }
548
+
549
+ .sidebar {
550
+ padding: 15px;
551
+ }
552
+ }
553
+
554
+ @media (max-width: 768px) {
555
+ .main-content {
556
+ grid-template-columns: 1fr;
557
+ grid-template-rows: auto 1fr;
558
+ }
559
+
560
+ .sidebar {
561
+ display: none;
562
+ }
563
+
564
+ .sidebar.mobile-open {
565
+ display: block;
566
+ position: fixed;
567
+ top: 0;
568
+ left: 0;
569
+ width: 80%;
570
+ height: 100%;
571
+ z-index: 500;
572
+ }
573
+
574
+ .mobile-menu-btn {
575
+ display: flex;
576
+ }
577
+
578
+ header {
579
+ padding: 10px 15px;
580
+ }
581
+
582
+ .logo h1 {
583
+ font-size: 1.5rem;
584
+ }
585
+
586
+ .transport {
587
+ padding: 10px 15px;
588
+ }
589
+ }
590
+
591
+ @media (max-width: 480px) {
592
+ .channel {
593
+ padding: 10px;
594
+ }
595
+
596
+ .channel-icon {
597
+ width: 30px;
598
+ height: 30px;
599
+ margin-right: 10px;
600
+ }
601
+
602
+ .transport-controls {
603
+ gap: 10px;
604
+ }
605
+
606
+ .transport-btn {
607
+ width: 35px;
608
+ height: 35px;
609
+ }
610
+
611
+ .transport-btn.play {
612
+ width: 45px;
613
+ height: 45px;
614
+ }
615
+ }
616
+
617
+ /* Animation for notes */
618
+ @keyframes pulse {
619
+ 0% { opacity: 0.7; }
620
+ 50% { opacity: 1; }
621
+ 100% { opacity: 0.7; }
622
+ }
623
+
624
+ .note.playing {
625
+ animation: pulse 0.5s infinite;
626
+ background: var(--accent);
627
+ }
628
+
629
+ /* Custom scrollbar */
630
+ ::-webkit-scrollbar {
631
+ width: 8px;
632
+ height: 8px;
633
+ }
634
+
635
+ ::-webkit-scrollbar-track {
636
+ background: rgba(255,255,255,0.05);
637
+ border-radius: 4px;
638
+ }
639
+
640
+ ::-webkit-scrollbar-thumb {
641
+ background: var(--primary);
642
+ border-radius: 4px;
643
+ }
644
+
645
+ ::-webkit-scrollbar-thumb:hover {
646
+ background: var(--accent);
647
+ }
648
+
649
+ .built-with {
650
+ font-size: 0.8rem;
651
+ color: rgba(255,255,255,0.5);
652
+ margin-top: 5px;
653
+ }
654
+
655
+ .built-with a {
656
+ color: var(--primary);
657
+ text-decoration: none;
658
+ }
659
+
660
+ .built-with a:hover {
661
+ text-decoration: underline;
662
+ }
663
+ </style>
664
+ </head>
665
+ <body>
666
+ <div class="app-container">
667
+ <header>
668
+ <div class="logo">
669
+ <i class="fas fa-music"></i>
670
+ <h1>AnyCoder DAW</h1>
671
+ </div>
672
+ <div class="header-controls">
673
+ <button class="btn btn-primary" id="newProject">
674
+ <i class="fas fa-plus"></i> New
675
+ </button>
676
+ <button class="btn btn-secondary" id="saveProject">
677
+ <i class="fas fa-save"></i> Save
678
+ </button>
679
+ <button class="btn btn-secondary" id="exportProject">
680
+ <i class="fas fa-file-export"></i> Export
681
+ </button>
682
+ <button class="btn btn-secondary" id="uploadFiles">
683
+ <i class="fas fa-upload"></i> Upload
684
+ </button>
685
+ <button class="btn btn-secondary mobile-menu-btn" id="mobileMenu">
686
+ <i class="fas fa-bars"></i>
687
+ </button>
688
+ </div>
689
+ </header>
690
+
691
+ <div class="main-content">
692
+ <div class="sidebar" id="sidebar">
693
+ <div class="sidebar-section">
694
+ <h3>Instruments</h3>
695
+ <div class="instrument-list">
696
+ <div class="instrument-item" data-instrument="piano">
697
+ <i class="fas fa-piano-keyboard"></i>
698
+ <span>Piano</span>
699
+ </div>
700
+ <div class="instrument-item" data-instrument="synth">
701
+ <i class="fas fa-wave-square"></i>
702
+ <span>Synth</span>
703
+ </div>
704
+ <div class="instrument-item" data-instrument="drums">
705
+ <i class="fas fa-drum"></i>
706
+ <span>Drum Kit</span>
707
+ </div>
708
+ <div class="instrument-item" data-instrument="bass">
709
+ <i class="fas fa-guitar"></i>
710
+ <span>Bass</span>
711
+ </div>
712
+ <div class="instrument-item" data-instrument="strings">
713
+ <i class="fas fa-violin"></i>
714
+ <span>Strings</span>
715
+ </div>
716
+ <div class="instrument-item" data-instrument="brass">
717
+ <i class="fas fa-trumpet"></i>
718
+ <span>Brass</span>
719
+ </div>
720
+ </div>
721
+ </div>
722
+
723
+ <div class="sidebar-section">
724
+ <h3>Effects</h3>
725
+ <div class="effect-list">
726
+ <div class="effect-item" data-effect="reverb">
727
+ <i class="fas fa-mountain"></i>
728
+ <span>Reverb</span>
729
+ </div>
730
+ <div class="effect-item" data-effect="delay">
731
+ <i class="fas fa-waveform"></i>
732
+ <span>Delay</span>
733
+ </div>
734
+ <div class="effect-item" data-effect="compressor">
735
+ <i class="fas fa-compress-alt"></i>
736
+ <span>Compressor</span>
737
+ </div>
738
+ <div class="effect-item" data-effect="eq">
739
+ <i class="fas fa-sliders-h"></i>
740
+ <span>EQ</span>
741
+ </div>
742
+ <div class="effect-item" data-effect="distortion">
743
+ <i class="fas fa-fire"></i>
744
+ <span>Distortion</span>
745
+ </div>
746
+ <div class="effect-item" data-effect="chorus">
747
+ <i class="fas fa-layer-group"></i>
748
+ <span>Chorus</span>
749
+ </div>
750
+ </div>
751
+ </div>
752
+
753
+ <div class="sidebar-section">
754
+ <h3>AI Assistant</h3>
755
+ <div class="ai-suggestions">
756
+ <div class="instrument-item" data-ai="generate-melody">
757
+ <i class="fas fa-brain"></i>
758
+ <span>Generate Melody</span>
759
+ </div>
760
+ <div class="instrument-item" data-ai="harmonize">
761
+ <i class="fas fa-magic"></i>
762
+ <span>Harmonize</span>
763
+ </div>
764
+ <div class="instrument-item" data-ai="arrange">
765
+ <i class="fas fa-project-diagram"></i>
766
+ <span>Auto Arrange</span>
767
+ </div>
768
+ </div>
769
+ </div>
770
+
771
+ <div class="built-with">
772
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
773
+ </div>
774
+ </div>
775
+
776
+ <div class="workspace">
777
+ <div class="channel-rack">
778
+ <div class="channel active">
779
+ <div class="channel-icon">
780
+ <i class="fas fa-piano-keyboard"></i>
781
+ </div>
782
+ <div class="channel-info">
783
+ <div class="channel-name">Grand Piano</div>
784
+ <div class="channel-volume">Volume: 80%</div>
785
+ </div>
786
+ <div class="channel-controls">
787
+ <div class="channel-control">
788
+ <i class="fas fa-sliders-h"></i>
789
+ </div>
790
+ <div class="channel-control">
791
+ <i class="fas fa-trash-alt"></i>
792
+ </div>
793
+ </div>
794
+ </div>
795
+
796
+ <div class="channel">
797
+ <div class="channel-icon">
798
+ <i class="fas fa-drum"></i>
799
+ </div>
800
+ <div class="channel-info">
801
+ <div class="channel-name">Drum Kit</div>
802
+ <div class="channel-volume">Volume: 90%</div>
803
+ </div>
804
+ <div class="channel-controls">
805
+ <div class="channel-control">
806
+ <i class="fas fa-sliders-h"></i>
807
+ </div>
808
+ <div class="channel-control">
809
+ <i class="fas fa-trash-alt"></i>
810
+ </div>
811
+ </div>
812
+ </div>
813
+
814
+ <div class="channel">
815
+ <div class="channel-icon">
816
+ <i class="fas fa-guitar"></i>
817
+ </div>
818
+ <div class="channel-info">
819
+ <div class="channel-name">Bass Guitar</div>
820
+ <div class="channel-volume">Volume: 75%</div>
821
+ </div>
822
+ <div class="channel-controls">
823
+ <div class="channel-control">
824
+ <i class="fas fa-sliders-h"></i>
825
+ </div>
826
+ <div class="channel-control">
827
+ <i class="fas fa-trash-alt"></i>
828
+ </div>
829
+ </div>
830
+ </div>
831
+ </div>
832
+
833
+ <div class="piano-roll">
834
+ <div class="piano-roll-header">
835
+ <h3>Piano Roll - Grand Piano</h3>
836
+ <div class="piano-roll-tools">
837
+ <button class="btn btn-secondary">
838
+ <i class="fas fa-pencil-alt"></i> Draw
839
+ </button>
840
+ <button class="btn btn-secondary">
841
+ <i class="fas fa-mouse-pointer"></i> Select
842
+ </button>
843
+ <button class="btn btn-secondary">
844
+ <i class="fas fa-eraser"></i> Erase
845
+ </button>
846
+ </div>
847
+ </div>
848
+ <div class="piano-roll-content">
849
+ <div class="piano-roll-grid"></div>
850
+ <div class="piano-roll-notes" id="pianoRollNotes">
851
+ <!-- Notes will be generated here -->
852
+ </div>
853
+ </div>
854
+ </div>
855
+ </div>
856
+ </div>
857
+
858
+ <div class="transport">
859
+ <div class="transport-controls">
860
+ <div class="transport-btn" id="rewind">
861
+ <i class="fas fa-step-backward"></i>
862
+ </div>
863
+ <div class="transport-btn play" id="playPause">
864
+ <i class="fas fa-play"></i>
865
+ </div>
866
+ <div class="transport-btn" id="stop">
867
+ <i class="fas fa-stop"></i>
868
+ </div>
869
+ <div class="transport-btn" id="record">
870
+ <i class="fas fa-circle"></i>
871
+ </div>
872
+ <div class="transport-btn" id="forward">
873
+ <i class="fas fa-step-forward"></i>
874
+ </div>
875
+ </div>
876
+ <div class="transport-info">
877
+ <div class="bpm-control">
878
+ <label for="bpm">BPM:</label>
879
+ <input type="number" id="bpm" value="120" min="60" max="240">
880
+ </div>
881
+ <div class="time-display">
882
+ 1:01:000
883
+ </div>
884
+ </div>
885
+ </div>
886
+
887
+ <div class="mixer" id="mixer">
888
+ <div class="mixer-header">
889
+ <h3>Mixer</h3>
890
+ <button class="btn btn-secondary" id="closeMixer">
891
+ <i class="fas fa-times"></i> Close
892
+ </button>
893
+ </div>
894
+ <div class="mixer-channels">
895
+ <!-- Mixer channels will be generated here -->
896
+ </div>
897
+ </div>
898
+ </div>
899
+
900
+ <!-- File Upload Modal -->
901
+ <div class="file-upload" id="fileUpload">
902
+ <div class="upload-container">
903
+ <div class="upload-header">
904
+ <h3>Upload Files</h3>
905
+ <div class="upload-close" id="closeUpload">
906
+ <i class="fas fa-times"></i>
907
+ </div>
908
+ </div>
909
+ <div class="upload-area" id="uploadArea">
910
+ <i class="fas fa-cloud-upload-alt"></i>
911
+ <h4>Drop files here or click to upload</h4>
912
+ <p>Supports WAV, MP3, FLAC, MIDI</p>
913
+ </div>
914
+ <div class="upload-files" id="uploadFilesList">
915
+ <!-- Uploaded files will appear here -->
916
+ </div>
917
+ <div style="display: flex; gap: 10px; margin-top: 20px;">
918
+ <button class="btn btn-secondary" style="flex: 1;" id="cancelUpload">
919
+ Cancel
920
+ </button>
921
+ <button class="btn btn-primary" style="flex: 1;">
922
+ Upload
923
+ </button>
924
+ </div>
925
+ </div>
926
+ </div>
927
+
928
+ <!-- AI Assistant -->
929
+ <div class="ai-assistant" id="aiAssistant">
930
+ <i class="fas fa-robot"></i>
931
+ </div>
932
+
933
+ <script>
934
+ // DOM Elements
935
+ const playPauseBtn = document.getElementById('playPause');
936
+ const stopBtn = document.getElementById('stop');
937
+ const recordBtn = document.getElementById('record');
938
+ const rewindBtn = document.getElementById('rewind');
939
+ const forwardBtn = document.getElementById('forward');
940
+ const bpmInput = document.getElementById('bpm');
941
+ const channels = document.querySelectorAll('.channel');
942
+ const instrumentItems = document.querySelectorAll('.instrument-item');
943
+ const effectItems = document.querySelectorAll('.effect-item');
944
+ const fileUploadModal = document.getElementById('fileUpload');
945
+ const uploadBtn = document.getElementById('uploadFiles');
946
+ const closeUploadBtn = document.getElementById('closeUpload');
947
+ const cancelUploadBtn = document.getElementById('cancelUpload');
948
+ const uploadArea = document.getElementById('uploadArea');
949
+ const pianoRollNotes = document.getElementById('pianoRollNotes');
950
+ const mixer = document.getElementById('mixer');
951
+ const closeMixerBtn = document.getElementById('closeMixer');
952
+ const mobileMenuBtn = document.getElementById('mobileMenu');
953
+ const sidebar = document.getElementById('sidebar');
954
+ const aiAssistantBtn = document.getElementById('aiAssistant');
955
+
956
+ // State Variables
957
+ let isPlaying = false;
958
+ let currentBPM = 120;
959
+ let activeChannel = 0;
960
+
961
+ // Initialize the app
962
+ function initApp() {
963
+ generatePianoRollNotes();
964
+ setupMixerChannels();
965
+ setupEventListeners();
966
+ }
967
+
968
+ // Generate sample piano roll notes
969
+ function generatePianoRollNotes() {
970
+ pianoRollNotes.innerHTML = '';
971
+
972
+ // Create some sample notes
973
+ const notes = [
974
+ { start: 50, duration: 100, pitch: 60 },
975
+ { start: 200, duration: 80, pitch: 64 },
976
+ { start: 350, duration: 120, pitch: 67 },
977
+ { start: 550, duration: 100, pitch: 72 },
978
+ { start: 750, duration: 150, pitch: 60 }
979
+ ];
980
+
981
+ notes.forEach(note => {
982
+ const noteElement = document.createElement('div');
983
+ noteElement.className = 'note';
984
+ noteElement.style.left = `${note.start}px`;
985
+ noteElement.style.width = `${note.duration}px`;
986
+ noteElement.style.top = `${(72 - note.pitch) * 20}px`;
987
+ noteElement.style.height = '20px';
988
+ noteElement.setAttribute('data-pitch', note.pitch);
989
+
990
+ noteElement.addEventListener('click', function() {
991
+ playNote(note.pitch);
992
+ this.classList.add('playing');
993
+ setTimeout(() => {
994
+ this.classList.remove('playing');
995
+ }, 500);
996
+ });
997
+
998
+ pianoRollNotes.appendChild(noteElement);
999
+ });
1000
+ }
1001
+
1002
+ // Setup mixer channels
1003
+ function setupMixerChannels() {
1004
+ const mixerChannels = document.querySelector('.mixer-channels');
1005
+ mixerChannels.innerHTML = '';
1006
+
1007
+ channels.forEach((channel, index) => {
1008
+ const mixerChannel = document.createElement('div');
1009
+ mixerChannel.className = 'mixer-channel';
1010
+
1011
+ const channelName = channel.querySelector('.channel-name').textContent;
1012
+ mixerChannel.innerHTML = `
1013
+ <div class="mixer-channel-name">${channelName}</div>
1014
+ <div class="mixer-fader">
1015
+ <div class="fader-handle" style="bottom: 30%;"></div>
1016
+ </div>
1017
+ <div class="mixer-controls">
1018
+ <div class="mixer-control">
1019
+ <i class="fas fa-volume-up"></i>
1020
+ </div>
1021
+ <div class="mixer-control">
1022
+ <i class="fas fa-sliders-h"></i>
1023
+ </div>
1024
+ <div class="mixer-control">
1025
+ <i class="fas fa-power-off"></i>
1026
+ </div>
1027
+ </div>
1028
+ `;
1029
+
1030
+ mixerChannels.appendChild(mixerChannel);
1031
+ });
1032
+ }
1033
+
1034
+ // Setup event listeners
1035
+ function setupEventListeners() {
1036
+ // Transport controls
1037
+ playPauseBtn.addEventListener('click', togglePlayPause);
1038
+ stopBtn.addEventListener('click', stopPlayback);
1039
+ recordBtn.addEventListener('click', toggleRecording);
1040
+ rewindBtn.addEventListener('click', rewind);
1041
+ forwardBtn.addEventListener('click', forward);
1042
+
1043
+ // BPM control
1044
+ bpmInput.addEventListener('change', function() {
1045
+ currentBPM = parseInt(this.value);
1046
+ updateTransportDisplay();
1047
+ });
1048
+
1049
+ // Channel selection
1050
+ channels.forEach((channel, index) => {
1051
+ channel.addEventListener('click', function() {
1052
+ channels.forEach(c => c.classList.remove('active'));
1053
+ this.classList.add('active');
1054
+ activeChannel = index;
1055
+ updatePianoRollForChannel(index);
1056
+ });
1057
+ });
1058
+
1059
+ // Instrument selection
1060
+ instrumentItems.forEach(item => {
1061
+ item.addEventListener('click', function() {
1062
+ const instrument = this.getAttribute('data-instrument');
1063
+ addInstrumentToChannel(activeChannel, instrument);
1064
+ });
1065
+ });
1066
+
1067
+ // Effect selection
1068
+ effectItems.forEach(item => {
1069
+ item.addEventListener('click', function() {
1070
+ const effect = this.getAttribute('data-effect');
1071
+ addEffectToChannel(activeChannel, effect);
1072
+ });
1073
+ });
1074
+
1075
+ // File upload
1076
+ uploadBtn.addEventListener('click', function() {
1077
+ fileUploadModal.classList.add('active');
1078
+ });
1079
+
1080
+ closeUploadBtn.addEventListener('click', closeUploadModal);
1081
+ cancelUploadBtn.addEventListener('click', closeUploadModal);
1082
+
1083
+ uploadArea.addEventListener('click', function() {
1084
+ // In a real app, this would trigger a file input
1085
+ alert('File upload dialog would open here');
1086
+ });
1087
+
1088
+ // Mixer controls
1089
+ closeMixerBtn.addEventListener('click', function() {
1090
+ mixer.classList.remove('active');
1091
+ });
1092
+
1093
+ // Mobile menu
1094
+ mobileMenuBtn.addEventListener('click', function() {
1095
+ sidebar.classList.toggle('mobile-open');
1096
+ });
1097
+
1098
+ // AI Assistant
1099
+ aiAssistantBtn.addEventListener('click', function() {
1100
+ showAIAssistant();
1101
+ });
1102
+ }
1103
+
1104
+ // Transport control functions
1105
+ function togglePlayPause() {
1106
+ isPlaying = !isPlaying;
1107
+ const icon = playPauseBtn.querySelector('i');
1108
+
1109
+ if (isPlaying) {
1110
+ icon.className = 'fas fa-pause';
1111
+ playPauseBtn.style.background = 'var(--warning)';
1112
+ startPlayback();
1113
+ } else {
1114
+ icon.className = 'fas fa-play';
1115
+ playPauseBtn.style.background = 'var(--success)';
1116
+ pausePlayback();
1117
+ }
1118
+ }
1119
+
1120
+ function stopPlayback() {
1121
+ isPlaying = false;
1122
+ const icon = playPauseBtn.querySelector('i');
1123
+ icon.className = 'fas fa-play';
1124
+ playPauseBtn.style.background = 'var(--success)';
1125
+ resetTransport();
1126
+ }
1127
+
1128
+ function toggleRecording() {
1129
+ recordBtn.style.background = recordBtn.style.background === 'var(--accent)' ? 'var(--secondary)' : 'var(--accent)';
1130
+ }
1131
+
1132
+ function rewind() {
1133
+ // Rewind logic would go here
1134
+ console.log('Rewind');
1135
+ }
1136
+
1137
+ function forward() {
1138
+ // Forward logic would go here
1139
+ console.log('Forward');
1140
+ }
1141
+
1142
+ function startPlayback() {
1143
+ console.log('Playback started');
1144
+ // In a real app, this would start the audio engine
1145
+ }
1146
+
1147
+ function pausePlayback() {
1148
+ console.log('Playback paused');
1149
+ // In a real app, this would pause the audio engine
1150
+ }
1151
+
1152
+ function resetTransport() {
1153
+ console.log('Transport reset');
1154
+ // In a real app, this would reset the playback position
1155
+ }
1156
+
1157
+ // Update transport display
1158
+ function updateTransportDisplay() {
1159
+ // In a real app, this would update the time display based on playback position
1160
+ }
1161
+
1162
+ // Play a note (simulated)
1163
+ function playNote(pitch) {
1164
+ console.log(`Playing note: ${pitch}`);
1165
+ // In a real app, this would trigger the Web Audio API to play the note
1166
+ }
1167
+
1168
+ // Add instrument to channel
1169
+ function addInstrumentToChannel(channelIndex, instrument) {
1170
+ const channel = channels[channelIndex];
1171
+ const channelIcon = channel.querySelector('.channel-icon i');
1172
+ const channelName = channel.querySelector('.channel-name');
1173
+
1174
+ // Update channel display based on instrument
1175
+ switch(instrument) {
1176
+ case 'piano':
1177
+ channelIcon.className = 'fas fa-piano-keyboard';
1178
+ channelName.textContent = 'Grand Piano';
1179
+ break;
1180
+ case 'synth':
1181
+ channelIcon.className = 'fas fa-wave-square';
1182
+ channelName.textContent = 'Synth Lead';
1183
+ break;
1184
+ case 'drums':
1185
+ channelIcon.className = 'fas fa-drum';
1186
+ channelName.textContent = 'Drum Kit';
1187
+ break;
1188
+ case 'bass':
1189
+ channelIcon.className = 'fas fa-guitar';
1190
+ channelName.textContent = 'Bass Guitar';
1191
+ break;
1192
+ case 'strings':
1193
+ channelIcon.className = 'fas fa-violin';
1194
+ channelName.textContent = 'String Ensemble';
1195
+ break;
1196
+ case 'brass':
1197
+ channelIcon.className = 'fas fa-trumpet';
1198
+ channelName.textContent = 'Brass Section';
1199
+ break;
1200
+ }
1201
+
1202
+ generatePianoRollNotes();
1203
+ }
1204
+
1205
+ // Add effect to channel
1206
+ function addEffectToChannel(channelIndex, effect) {
1207
+ console.log(`Adding ${effect} to channel ${channelIndex}`);
1208
+ // In a real app, this would add the effect to the channel's effect chain
1209
+ }
1210
+
1211
+ // Update piano roll for selected channel
1212
+ function updatePianoRollForChannel(channelIndex) {
1213
+ const channelName = channels[channelIndex].querySelector('.channel-name').textContent;
1214
+ const pianoRollHeader = document.querySelector('.piano-roll-header h3');
1215
+ pianoRollHeader.textContent = `Piano Roll - ${channelName}`;
1216
+ }
1217
+
1218
+ // File upload functions
1219
+ function closeUploadModal() {
1220
+ fileUploadModal.classList.remove('active');
1221
+ }
1222
+
1223
+ // AI Assistant functions
1224
+ function showAIAssistant() {
1225
+ alert('AI Assistant: I can help you generate melodies, harmonize your tracks, or arrange your song structure. What would you like me to do?');
1226
+ }
1227
+
1228
+ // Initialize the app when the page loads
1229
+ document.addEventListener('DOMContentLoaded', initApp);
1230
+ </script>
1231
+ </body>
1232
+ </html>