Hugging Face's logo

Spaces:
akhaliq
/
Dramabox
Running on Zero

App Files Community
akhaliq HF Staff commited on
Commit
73395a8
·
1 Parent(s): 6d2fc97

style: redesign frontend to clean light interface with Resemble AI teal-green accents

Browse files
Files changed (1) hide show
  1. index.html +1079 -953
index.html CHANGED
@@ -16,24 +16,22 @@
16
 
17
  <style>
18
  :root {
19
- --bg-color: #07090e;
20
- --sidebar-bg: #0b0e16;
21
- --panel-bg: #10141f;
22
- --panel-border: #1e2638;
23
- --panel-border-focus: #ff7235;
24
- --text-primary: #f8fafc;
25
- --text-secondary: #8a99ad;
26
- --text-muted: #52637a;
27
- --accent-copper: #ff7235;
28
- --accent-copper-hover: #ff8954;
29
- --accent-copper-glow: rgba(255, 114, 53, 0.15);
30
- --accent-cyan: #00ebd4;
31
- --accent-cyan-hover: #22ffe7;
32
- --accent-cyan-glow: rgba(0, 235, 212, 0.12);
33
- --accent-green: #00d58a;
34
- --radius-lg: 8px;
35
- --radius-md: 6px;
36
- --radius-sm: 4px;
37
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
38
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
39
  }
@@ -46,11 +44,6 @@
46
 
47
  body {
48
  background-color: var(--bg-color);
49
- background-image:
50
- radial-gradient(rgba(255, 114, 53, 0.04) 1px, transparent 1px),
51
- radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
52
- background-size: 24px 24px, 12px 12px;
53
- background-position: 0 0, 6px 6px;
54
  color: var(--text-primary);
55
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
56
  min-height: 100vh;
@@ -59,590 +52,342 @@
59
  position: relative;
60
  }
61
 
62
- body::before {
63
- content: '';
64
- position: absolute;
65
- top: 16px;
66
- left: 16px;
67
- width: 24px;
68
- height: 24px;
69
- border-top: 2px solid rgba(255, 114, 53, 0.35);
70
- border-left: 2px solid rgba(255, 114, 53, 0.35);
71
- z-index: 1000;
72
- pointer-events: none;
73
- }
74
-
75
- body::after {
76
- content: '';
77
- position: absolute;
78
- bottom: 16px;
79
- right: 16px;
80
- width: 24px;
81
- height: 24px;
82
- border-bottom: 2px solid rgba(255, 114, 53, 0.35);
83
- border-right: 2px solid rgba(255, 114, 53, 0.35);
84
- z-index: 1000;
85
- pointer-events: none;
86
- }
87
-
88
  .app-layout {
89
  display: flex;
90
  width: 100vw;
91
  height: 100vh;
92
  position: relative;
93
  overflow: hidden;
 
94
  }
95
 
96
- .sidebar {
97
- width: 350px;
 
98
  height: 100%;
99
  background-color: var(--sidebar-bg);
100
  border-right: 1px solid var(--panel-border);
101
  display: flex;
102
  flex-direction: column;
103
- position: relative;
104
- z-index: 100;
105
- transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
106
- box-shadow: 6px 0 24px rgba(0, 0, 0, 0.3);
107
  flex-shrink: 0;
 
 
108
  }
109
 
110
- .sidebar.collapsed {
111
- margin-left: -350px;
112
- transform: translateX(-100%);
113
- }
114
-
115
- .sidebar-header {
116
- padding: 16px 20px;
117
  display: flex;
118
  align-items: center;
119
- justify-content: space-between;
120
- border-bottom: 1px solid var(--panel-border);
121
- background: rgba(0, 0, 0, 0.15);
122
  }
123
 
124
- .sidebar-title {
125
- font-family: var(--font-mono);
126
- font-size: 0.8rem;
 
 
 
 
127
  font-weight: 700;
128
  color: var(--text-primary);
129
- letter-spacing: 1.5px;
 
 
 
 
 
 
 
 
 
 
130
  text-transform: uppercase;
 
 
 
 
 
131
  display: flex;
132
- align-items: center;
133
- gap: 8px;
134
  }
135
 
136
- .sidebar-close-btn {
137
- background: none;
138
- border: none;
 
 
139
  color: var(--text-secondary);
140
  font-size: 0.9rem;
 
 
141
  cursor: pointer;
142
  transition: var(--transition);
143
- display: flex;
144
- align-items: center;
145
- justify-content: center;
146
- padding: 4px;
147
- border-radius: var(--radius-sm);
148
  }
149
 
150
- .sidebar-close-btn:hover {
151
- color: var(--accent-copper);
152
- background: rgba(255, 255, 255, 0.03);
153
  }
154
 
155
- .sidebar-scrollable {
156
- flex: 1;
157
- overflow-y: auto;
158
- padding: 20px;
159
- display: flex;
160
- flex-direction: column;
161
- gap: 20px;
162
  }
163
 
164
- .sidebar-scrollable::-webkit-scrollbar {
165
- width: 4px;
 
 
 
166
  }
167
 
168
- .sidebar-scrollable::-webkit-scrollbar-track {
169
- background: transparent;
 
 
170
  }
171
 
172
- .sidebar-scrollable::-webkit-scrollbar-thumb {
173
- background: var(--panel-border);
174
- border-radius: 2px;
 
 
 
 
 
175
  }
176
 
177
- .sidebar-scrollable::-webkit-scrollbar-thumb:hover {
178
- background: var(--text-muted);
 
 
 
 
 
179
  }
180
 
181
- .content-area {
 
 
182
  flex: 1;
183
  height: 100%;
184
  display: flex;
185
  flex-direction: column;
186
  overflow-y: auto;
187
- position: relative;
188
- transition: var(--transition);
189
- }
190
-
191
- .content-container {
192
- width: 100%;
193
- max-width: 800px;
194
- margin: 0 auto;
195
- padding: 24px 24px 60px 24px;
196
- display: flex;
197
- flex-direction: column;
198
- gap: 20px;
199
  }
200
 
201
- header {
202
- display: flex;
203
- flex-direction: column;
204
- align-items: flex-start;
205
- text-align: left;
206
- padding: 12px 0 20px 0;
207
- gap: 8px;
208
- position: relative;
209
  border-bottom: 1px solid var(--panel-border);
 
 
 
 
 
210
  }
211
 
212
- .logo-area {
213
  display: flex;
214
  align-items: center;
215
- gap: 12px;
216
- flex-wrap: wrap;
217
  }
218
 
219
- .logo-emoji {
220
- font-size: 1.6rem;
221
- color: var(--accent-copper);
222
  }
223
 
224
- h1 {
225
- font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
226
- font-size: 1.8rem;
227
- font-weight: 800;
228
- color: #ffffff;
229
- letter-spacing: 0.5px;
230
- text-transform: uppercase;
231
  }
232
 
233
- .brand-badge {
234
- font-family: var(--font-mono);
235
- font-size: 0.65rem;
236
  font-weight: 600;
237
- background: rgba(255, 114, 53, 0.08);
238
- color: var(--accent-copper);
239
- border: 1px solid rgba(255, 114, 53, 0.2);
240
- padding: 2px 6px;
241
- border-radius: var(--radius-sm);
242
- text-transform: uppercase;
243
- letter-spacing: 0.5px;
244
  }
245
 
246
- .subtitle {
247
- font-size: 0.88rem;
248
- color: var(--text-secondary);
249
- font-weight: 400;
250
  }
251
 
252
- .ltx-banner {
253
- background: #0f131d;
254
  border: 1px solid var(--panel-border);
255
- border-left: 3px solid var(--accent-copper);
256
- border-radius: var(--radius-md);
257
- padding: 12px 16px;
258
- color: #cbd5e1;
259
  font-size: 0.8rem;
260
- line-height: 1.5;
261
- text-align: left;
262
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
263
- width: 100%;
264
- }
265
-
266
- .ltx-banner a {
267
- color: var(--accent-copper);
268
- font-weight: 600;
269
- text-decoration: none;
270
  transition: var(--transition);
271
  }
272
 
273
- .ltx-banner a:hover {
274
- color: #ffffff;
275
- text-decoration: underline;
276
  }
277
 
278
- .btn-toggle-sidebar {
279
- background: #111520;
280
- border: 1px solid var(--panel-border);
281
- color: #ffffff;
282
- font-family: var(--font-mono);
283
- font-size: 0.72rem;
284
- font-weight: 600;
285
- padding: 8px 14px;
286
- border-radius: var(--radius-sm);
287
- cursor: pointer;
288
  display: flex;
289
- align-items: center;
290
- gap: 8px;
291
- transition: var(--transition);
292
- outline: none;
293
- letter-spacing: 0.5px;
294
- text-transform: uppercase;
295
- }
296
-
297
- .btn-toggle-sidebar:hover {
298
- background: rgba(255, 114, 53, 0.05);
299
- border-color: var(--accent-copper);
300
  }
301
 
302
- .main-panel {
303
- background: var(--panel-bg);
 
304
  border: 1px solid var(--panel-border);
305
  border-radius: var(--radius-lg);
306
- padding: 20px;
307
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
308
  display: flex;
309
  flex-direction: column;
310
  gap: 16px;
311
  }
312
 
313
- .form-group {
314
  display: flex;
315
  flex-direction: column;
316
- gap: 6px;
317
  }
318
 
319
- .form-label {
320
- font-family: var(--font-mono);
321
- font-size: 0.72rem;
322
- font-weight: 700;
323
- text-transform: uppercase;
324
- letter-spacing: 0.8px;
325
- color: var(--text-secondary);
326
- display: flex;
327
- justify-content: space-between;
328
- align-items: center;
329
  }
330
 
331
- .label-badge {
332
- font-family: var(--font-mono);
333
- font-size: 0.65rem;
334
- color: var(--text-muted);
335
- text-transform: uppercase;
336
- font-weight: 500;
337
- letter-spacing: 0.3px;
338
  }
339
 
340
  .textarea-custom {
341
  width: 100%;
342
- background: #090c13;
343
  border: 1px solid var(--panel-border);
344
  border-radius: var(--radius-md);
345
- padding: 14px;
346
  color: var(--text-primary);
347
  font-family: 'Inter', sans-serif;
348
- font-size: 0.92rem;
349
- line-height: 1.55;
350
  resize: vertical;
351
- min-height: 120px;
352
  outline: none;
353
  transition: var(--transition);
354
  }
355
 
356
  .textarea-custom:focus {
357
- border-color: var(--accent-copper);
358
- box-shadow: 0 0 0 2px var(--accent-copper-glow);
359
  }
360
 
361
- .upload-zone {
362
- border: 1px dashed var(--panel-border);
363
- border-radius: var(--radius-md);
364
- padding: 16px;
365
- text-align: center;
366
- cursor: pointer;
367
- background: rgba(255, 255, 255, 0.01);
368
  display: flex;
369
- flex-direction: column;
370
  align-items: center;
371
- gap: 6px;
372
- transition: var(--transition);
373
- min-height: 80px;
374
- justify-content: center;
375
  }
376
 
377
- .upload-zone:hover, .upload-zone.dragover {
378
- border-color: var(--accent-copper);
379
- background: rgba(255, 114, 53, 0.02);
380
  }
381
 
382
- .upload-icon {
383
- font-size: 1.3rem;
384
- color: var(--accent-copper);
 
 
 
 
 
 
 
 
 
 
 
 
385
  }
386
 
387
- .upload-text {
388
- font-size: 0.76rem;
389
- color: var(--text-secondary);
390
  }
391
 
392
- .upload-text strong {
393
- color: #ffffff;
394
- font-weight: 600;
395
  }
396
 
397
- .hidden-input {
398
- display: none !important;
 
 
 
 
399
  }
400
 
401
- .file-capsule {
 
 
 
 
 
 
 
402
  display: flex;
 
 
403
  align-items: center;
404
- justify-content: space-between;
405
- background: rgba(255, 114, 53, 0.05);
406
- border: 1px solid rgba(255, 114, 53, 0.2);
407
- padding: 8px 12px;
408
- border-radius: var(--radius-md);
409
- width: 100%;
410
  }
411
 
412
- .file-info {
 
 
413
  display: flex;
 
414
  align-items: center;
415
  gap: 8px;
416
- font-size: 0.78rem;
417
- font-family: var(--font-mono);
418
- font-weight: 500;
419
- overflow: hidden;
420
- white-space: nowrap;
421
- text-overflow: ellipsis;
422
  }
423
 
424
- .btn-clear {
425
- background: none;
426
- border: none;
427
- color: var(--text-secondary);
428
- font-size: 0.9rem;
429
- cursor: pointer;
430
- transition: var(--transition);
431
- padding: 2px;
432
- display: flex;
433
- align-items: center;
434
- justify-content: center;
435
- border-radius: var(--radius-sm);
436
  }
437
 
438
- .btn-clear:hover {
439
- color: #ffffff;
440
- background: rgba(255, 255, 255, 0.05);
441
  }
442
 
443
- .settings-block {
 
444
  display: flex;
445
  flex-direction: column;
446
- gap: 14px;
447
- background: rgba(0, 0, 0, 0.1);
448
- border: 1px solid var(--panel-border);
449
- padding: 14px;
450
- border-radius: var(--radius-md);
451
- }
452
-
453
- .settings-block-title {
454
- font-family: var(--font-mono);
455
- font-size: 0.75rem;
456
- font-weight: 700;
457
- letter-spacing: 0.8px;
458
- text-transform: uppercase;
459
- color: #ffffff;
460
- border-bottom: 1px solid var(--panel-border);
461
- padding-bottom: 6px;
462
- margin-bottom: 2px;
463
- }
464
-
465
- .slider-group {
466
- display: flex;
467
- flex-direction: column;
468
- gap: 4px;
469
- }
470
-
471
- .slider-meta {
472
- display: flex;
473
- justify-content: space-between;
474
- font-size: 0.75rem;
475
- color: var(--text-secondary);
476
- font-weight: 500;
477
- }
478
-
479
- .slider-value {
480
- color: var(--accent-copper);
481
- font-weight: 700;
482
- font-family: var(--font-mono);
483
- background: rgba(255, 114, 53, 0.05);
484
- padding: 1px 4px;
485
- border-radius: var(--radius-sm);
486
- border: 1px solid rgba(255, 114, 53, 0.15);
487
- }
488
-
489
- input[type="range"] {
490
- -webkit-appearance: none;
491
- width: 100%;
492
- height: 6px;
493
- background: #090c13;
494
- border: 1px solid var(--panel-border);
495
- border-radius: 3px;
496
- outline: none;
497
- cursor: pointer;
498
- }
499
-
500
- input[type="range"]::-webkit-slider-thumb {
501
- -webkit-appearance: none;
502
- width: 10px;
503
- height: 16px;
504
- border-radius: 2px;
505
- background: var(--accent-copper);
506
- border: 1px solid #ffffff;
507
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
508
- transition: var(--transition);
509
- }
510
-
511
- input[type="range"]::-webkit-slider-thumb:hover {
512
- background: #ffffff;
513
- transform: scale(1.1);
514
- }
515
-
516
- .seed-row {
517
- display: flex;
518
- gap: 6px;
519
- align-items: center;
520
- }
521
-
522
- .input-seed {
523
- flex: 1;
524
- background: #090c13;
525
- border: 1px solid var(--panel-border);
526
- border-radius: var(--radius-sm);
527
- padding: 6px 10px;
528
- color: var(--text-primary);
529
- font-family: var(--font-mono);
530
- outline: none;
531
- font-size: 0.8rem;
532
- transition: var(--transition);
533
- height: 32px;
534
- }
535
-
536
- .input-seed:focus {
537
- border-color: var(--accent-copper);
538
- }
539
-
540
- .btn-seed-random {
541
- background: #19202f;
542
- border: 1px solid var(--panel-border);
543
- border-radius: var(--radius-sm);
544
- color: var(--text-primary);
545
- height: 32px;
546
- width: 32px;
547
- display: flex;
548
- align-items: center;
549
- justify-content: center;
550
- cursor: pointer;
551
- transition: var(--transition);
552
- font-size: 0.8rem;
553
- }
554
-
555
- .btn-seed-random:hover {
556
- background: rgba(255, 114, 53, 0.05);
557
- border-color: var(--accent-copper);
558
- }
559
-
560
- .btn-generate {
561
- background: var(--accent-copper);
562
- border: none;
563
- border-radius: var(--radius-md);
564
- color: #07090e;
565
- font-family: var(--font-mono);
566
- font-size: 0.9rem;
567
- font-weight: 700;
568
- padding: 12px;
569
- cursor: pointer;
570
- transition: var(--transition);
571
- display: flex;
572
- align-items: center;
573
- justify-content: center;
574
- gap: 8px;
575
- box-shadow: 0 4px 12px var(--accent-copper-glow);
576
- min-height: 42px;
577
- letter-spacing: 1px;
578
- text-transform: uppercase;
579
- }
580
-
581
- .btn-generate:hover:not(:disabled) {
582
- transform: translateY(-1px);
583
- box-shadow: 0 6px 16px rgba(255, 114, 53, 0.35);
584
- background: var(--accent-copper-hover);
585
- }
586
-
587
- .btn-generate:active:not(:disabled) {
588
- transform: translateY(0);
589
- }
590
-
591
- .btn-generate:disabled {
592
- background: #19202f;
593
- color: var(--text-muted);
594
- border: 1px solid var(--panel-border);
595
- cursor: not-allowed;
596
- box-shadow: none;
597
- }
598
-
599
- .output-wrapper {
600
- background: #090c13;
601
- border: 1px solid var(--panel-border);
602
- border-radius: var(--radius-md);
603
- padding: 16px;
604
- display: flex;
605
- flex-direction: column;
606
- align-items: center;
607
- justify-content: center;
608
- min-height: 120px;
609
- position: relative;
610
- }
611
-
612
- .empty-placeholder {
613
- color: var(--text-secondary);
614
- text-align: center;
615
- display: flex;
616
- flex-direction: column;
617
- align-items: center;
618
- gap: 8px;
619
- }
620
-
621
- .empty-icon {
622
- font-size: 1.8rem;
623
- opacity: 0.5;
624
- color: var(--accent-copper);
625
- }
626
-
627
- .empty-text {
628
- font-family: var(--font-mono);
629
- font-size: 0.72rem;
630
- letter-spacing: 0.5px;
631
- text-transform: uppercase;
632
- }
633
-
634
- .audio-player {
635
- width: 100%;
636
- display: flex;
637
- flex-direction: column;
638
- gap: 12px;
639
  }
640
 
641
  .visualizer-box {
642
  width: 100%;
643
- height: 38px;
644
- background: #06090e;
645
- border-radius: var(--radius-sm);
646
  display: flex;
647
  align-items: center;
648
  justify-content: center;
@@ -653,80 +398,106 @@
653
  .visualizer-wave {
654
  display: flex;
655
  align-items: center;
656
- gap: 2px;
657
  height: 100%;
 
 
658
  }
659
 
660
  .wave-bar {
661
- width: 3px;
662
- height: 4px;
663
- background: var(--accent-cyan);
664
- border-radius: 1px;
665
  transition: var(--transition);
666
  }
667
 
668
  .audio-player.playing .wave-bar {
669
- animation: playWave 1s infinite ease-in-out alternate;
670
  }
671
 
672
  @keyframes playWave {
673
- 0% { height: 4px; }
674
- 100% { height: 26px; }
675
  }
676
 
677
- .wave-bar:nth-child(2n) { background: #00d084; animation-delay: 0.1s; }
678
- .wave-bar:nth-child(3n) { background: #00ebd4; animation-delay: 0.2s; }
679
- .wave-bar:nth-child(4n) { background: #008aff; animation-delay: 0.3s; }
680
- .wave-bar:nth-child(5n) { background: var(--accent-cyan); animation-delay: 0.4s; }
681
 
682
  .player-row {
683
  display: flex;
684
  align-items: center;
685
- gap: 10px;
686
  width: 100%;
687
  }
688
 
689
  .btn-play {
690
- background: var(--accent-cyan);
691
  border: none;
692
- color: #07090e;
693
- width: 34px;
694
- height: 34px;
695
- border-radius: var(--radius-sm);
696
  display: flex;
697
  align-items: center;
698
  justify-content: center;
699
- font-size: 0.9rem;
700
  cursor: pointer;
701
  transition: var(--transition);
702
- box-shadow: 0 2px 8px var(--accent-cyan-glow);
703
  flex-shrink: 0;
704
  }
705
 
706
  .btn-play:hover {
707
- transform: scale(1.03);
708
- background: var(--accent-cyan-hover);
709
- box-shadow: 0 4px 12px rgba(0, 235, 212, 0.3);
710
  }
711
 
712
  .progress-box {
713
  flex: 1;
714
  display: flex;
715
  align-items: center;
716
- gap: 8px;
717
  }
718
 
719
  .time-lbl {
720
- font-size: 0.72rem;
721
  color: var(--text-secondary);
722
  font-family: var(--font-mono);
723
- min-width: 32px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
724
  }
725
 
726
  .progress-box input[type="range"]::-webkit-slider-thumb {
727
- background: var(--accent-cyan);
728
- border-color: #ffffff;
729
- box-shadow: 0 1px 4px rgba(0, 235, 212, 0.4);
730
  }
731
 
732
  .deck-footer {
@@ -735,496 +506,938 @@
735
  justify-content: space-between;
736
  width: 100%;
737
  border-top: 1px solid var(--panel-border);
738
- padding-top: 10px;
739
- gap: 10px;
740
- flex-wrap: wrap;
741
  }
742
 
743
  .vol-slider {
744
  display: flex;
745
  align-items: center;
746
- gap: 6px;
747
- max-width: 80px;
748
  flex-shrink: 0;
749
  }
750
 
751
  .vol-icon {
752
- font-size: 0.72rem;
753
  color: var(--text-secondary);
754
  }
755
 
756
- .vol-slider input[type="range"]::-webkit-slider-thumb {
757
- background: var(--text-secondary);
758
- }
759
-
760
  .speed-deck {
761
  display: flex;
762
  align-items: center;
763
- gap: 4px;
764
  }
765
 
766
  .btn-speed {
767
- background: #19202f;
768
  border: 1px solid var(--panel-border);
769
  border-radius: var(--radius-sm);
770
  color: var(--text-secondary);
771
- font-family: var(--font-mono);
772
- font-size: 0.65rem;
773
  font-weight: 600;
774
- padding: 3px 6px;
775
  cursor: pointer;
776
  transition: var(--transition);
777
  }
778
 
779
  .btn-speed.active, .btn-speed:hover {
780
- background: rgba(0, 235, 212, 0.08);
781
- color: var(--accent-cyan);
782
- border-color: rgba(0, 235, 212, 0.25);
783
  }
784
 
785
  .btn-download-wav {
786
- background: #19202f;
787
  border: 1px solid var(--panel-border);
788
  border-radius: var(--radius-sm);
789
- color: #ffffff;
790
- font-family: var(--font-mono);
791
- font-size: 0.7rem;
792
  font-weight: 600;
793
- padding: 4px 10px;
794
  text-decoration: none;
795
  display: flex;
796
  align-items: center;
797
- gap: 5px;
798
  transition: var(--transition);
799
- text-transform: uppercase;
800
- letter-spacing: 0.5px;
801
  }
802
 
803
  .btn-download-wav:hover {
804
- background: var(--accent-copper);
805
- color: #07090e;
806
- border-color: var(--accent-copper);
807
- transform: translateY(-0.5px);
808
- }
809
-
810
- @media (max-width: 480px) {
811
- .deck-footer {
812
- flex-direction: column;
813
- align-items: stretch;
814
- gap: 10px;
815
- }
816
- .vol-slider {
817
- max-width: 100%;
818
- }
819
- .speed-deck {
820
- justify-content: space-between;
821
- }
822
- .btn-download-wav {
823
- justify-content: center;
824
- }
825
  }
826
 
827
- .status-alert {
 
 
 
 
 
828
  display: flex;
829
- align-items: center;
830
- gap: 8px;
831
- font-family: var(--font-mono);
832
- font-size: 0.72rem;
833
- font-weight: 600;
834
- text-transform: uppercase;
835
- padding: 8px 12px;
836
- border-radius: var(--radius-md);
837
- border: 1px solid transparent;
838
- display: none;
839
- margin-bottom: 10px;
840
- width: 100%;
841
- letter-spacing: 0.5px;
842
  }
843
 
844
- .status-alert.success {
845
- background: rgba(0, 213, 138, 0.05);
846
- border-color: rgba(0, 213, 138, 0.2);
847
- color: var(--accent-green);
848
  }
849
 
850
- .status-alert.info {
851
- background: rgba(255, 114, 53, 0.05);
852
- border-color: rgba(255, 114, 53, 0.2);
853
- color: #ff854f;
 
 
 
854
  }
855
 
856
- .status-alert.error {
857
- background: rgba(239, 68, 68, 0.05);
858
- border-color: rgba(239, 68, 68, 0.2);
859
- color: #f87171;
 
 
 
 
 
 
 
 
860
  }
861
 
862
- .alert-spinner {
863
- width: 12px;
864
- height: 12px;
865
- border: 2px solid rgba(255, 255, 255, 0.1);
866
- border-top: 2px solid currentColor;
867
- border-radius: 50%;
868
- animation: spin 0.8s linear infinite;
869
  }
870
 
871
- @keyframes spin {
872
- 0% { transform: rotate(0deg); }
873
- 100% { transform: rotate(360deg); }
874
  }
875
 
876
- .demo-capsules {
877
  display: flex;
878
  flex-direction: column;
879
- gap: 6px;
 
880
  }
881
 
882
- .demo-pill {
883
- background: #111520;
884
  border: 1px solid var(--panel-border);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
885
  border-radius: var(--radius-md);
886
- padding: 8px 12px;
 
887
  cursor: pointer;
888
- transition: var(--transition);
889
  display: flex;
890
- justify-content: space-between;
891
  align-items: center;
892
- gap: 10px;
893
- text-align: left;
894
  }
895
 
896
- .demo-pill:hover {
897
- background: rgba(255, 114, 53, 0.02);
898
- border-color: rgba(255, 114, 53, 0.2);
899
- transform: translateX(1px);
900
  }
901
 
902
- .demo-pill.active {
903
- border-color: var(--accent-copper);
904
- background: rgba(255, 114, 53, 0.05);
905
  }
906
 
907
- .demo-pill-title {
908
- font-size: 0.76rem;
 
 
 
 
 
 
909
  font-weight: 600;
910
- color: #ffffff;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
911
  white-space: nowrap;
912
  overflow: hidden;
913
  text-overflow: ellipsis;
914
- max-width: 160px;
915
  }
916
 
917
- .pill-labels {
 
 
 
 
 
 
 
918
  display: flex;
919
- gap: 4px;
920
- flex-shrink: 0;
921
  }
922
 
923
- .pill-badge {
924
- font-family: var(--font-mono);
925
- font-size: 0.6rem;
926
- font-weight: 700;
927
- padding: 1px 4px;
 
 
 
 
 
928
  border-radius: var(--radius-sm);
929
- text-transform: uppercase;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
930
  }
931
 
932
- .pill-badge-male { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
933
- .pill-badge-female { background: rgba(236, 72, 153, 0.1); color: #f472b6; }
934
- .pill-badge-long { background: rgba(139, 92, 246, 0.1); color: #c084fc; }
935
 
936
- .guide-header {
 
 
937
  font-family: var(--font-mono);
 
 
 
 
 
 
 
 
 
 
 
 
938
  font-size: 0.75rem;
939
- font-weight: 700;
940
- color: #ffffff;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
941
  cursor: pointer;
 
942
  display: flex;
943
- justify-content: space-between;
944
  align-items: center;
945
- user-select: none;
946
- text-transform: uppercase;
947
- letter-spacing: 0.8px;
948
- border-bottom: 1px solid var(--panel-border);
949
- padding-bottom: 6px;
950
- margin-bottom: 2px;
951
  }
952
 
953
- .guide-body {
954
- max-height: 0;
955
- overflow: hidden;
956
- transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
957
- font-size: 0.74rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
958
  color: var(--text-secondary);
959
- display: flex;
960
- flex-direction: column;
961
- gap: 10px;
962
- line-height: 1.5;
963
  }
964
 
965
- .guide-body.open {
966
- max-height: 380px;
967
- margin-top: 10px;
968
  }
969
 
970
- .guide-block-title {
 
 
 
 
971
  color: #ffffff;
972
- font-family: var(--font-mono);
 
 
 
 
 
 
 
973
  font-weight: 700;
974
- margin-bottom: 2px;
975
- font-size: 0.74rem;
976
  text-transform: uppercase;
 
 
977
  }
978
 
979
- .guide-list {
980
- padding-left: 12px;
 
 
 
 
 
 
 
 
 
 
 
981
  display: flex;
982
  flex-direction: column;
983
- gap: 2px;
984
  }
985
 
986
- .sidebar-overlay {
987
- position: fixed;
988
- top: 0;
989
- left: 0;
990
- width: 100vw;
991
- height: 100vh;
992
- background: rgba(0, 0, 0, 0.65);
993
- z-index: 90;
994
- opacity: 0;
995
- pointer-events: none;
996
- transition: opacity 0.2s ease;
997
  }
998
 
999
- .sidebar-overlay.active {
1000
- opacity: 1;
1001
- pointer-events: auto;
 
 
 
 
 
1002
  }
1003
 
1004
- footer {
1005
- margin-top: auto;
1006
- text-align: left;
1007
- padding: 24px 0;
1008
- font-family: var(--font-mono);
1009
- font-size: 0.68rem;
1010
  color: var(--text-muted);
1011
- border-top: 1px solid var(--panel-border);
1012
- text-transform: uppercase;
1013
- letter-spacing: 0.3px;
1014
  }
1015
 
1016
- @media (max-width: 992px) {
1017
- .sidebar {
1018
- position: fixed;
1019
- top: 0;
1020
- left: 0;
1021
- height: 100%;
1022
- z-index: 1000;
1023
- }
1024
- .sidebar.collapsed {
1025
- margin-left: 0;
1026
- transform: translateX(-100%);
1027
- }
1028
- h1 {
1029
- font-size: 1.6rem;
1030
- }
1031
- .logo-emoji {
1032
- font-size: 1.4rem;
1033
- }
1034
  }
1035
 
1036
- @media (min-width: 993px) {
1037
- .sidebar-close-btn {
1038
- display: none;
1039
- }
1040
  }
1041
 
1042
- .audio-trimmer-container {
1043
  display: flex;
1044
- flex-direction: column;
1045
- gap: 10px;
1046
- background: rgba(0, 0, 0, 0.15);
 
 
 
 
1047
  border: 1px solid var(--panel-border);
1048
- border-left: 2px solid var(--accent-copper);
1049
- border-radius: var(--radius-md);
1050
- padding: 12px;
1051
- margin-top: 8px;
 
 
1052
  transition: var(--transition);
 
1053
  }
1054
 
1055
- .trimmer-header {
 
 
 
 
 
 
 
 
 
 
 
1056
  display: flex;
1057
- justify-content: space-between;
1058
  align-items: center;
1059
- border-bottom: 1px solid var(--panel-border);
1060
- padding-bottom: 6px;
 
 
1061
  }
1062
 
1063
- .trimmer-file-info {
 
 
 
 
 
 
 
 
 
 
1064
  display: flex;
 
1065
  align-items: center;
1066
- gap: 6px;
 
 
 
 
1067
  overflow: hidden;
 
 
 
 
 
 
 
1068
  }
1069
 
1070
- .trimmer-file-icon {
1071
- font-size: 0.95rem;
 
1072
  }
1073
 
1074
- .trimmer-filename {
1075
- font-family: var(--font-mono);
1076
- font-size: 0.74rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1077
  color: var(--text-primary);
1078
- font-weight: 500;
1079
  white-space: nowrap;
1080
  overflow: hidden;
1081
  text-overflow: ellipsis;
1082
- max-width: 160px;
1083
  }
1084
 
1085
- .btn-clear-trimmer {
1086
- background: transparent;
1087
- border: none;
1088
- color: var(--text-secondary);
1089
- cursor: pointer;
1090
- font-size: 0.8rem;
1091
- padding: 4px;
1092
- border-radius: var(--radius-sm);
1093
  display: flex;
1094
- align-items: center;
1095
- justify-content: center;
1096
- transition: var(--transition);
1097
  }
1098
 
1099
- .btn-clear-trimmer:hover {
1100
- color: #f87171;
1101
- background: rgba(239, 68, 68, 0.05);
 
 
 
1102
  }
1103
 
1104
- .trimmer-waveform-box {
1105
- position: relative;
 
 
 
 
 
 
 
 
 
 
 
 
 
1106
  width: 100%;
1107
- height: 52px;
1108
- background: #06090e;
1109
- border: 1px solid var(--panel-border);
1110
- border-radius: var(--radius-sm);
1111
- overflow: hidden;
1112
  }
1113
 
1114
- .trimmer-canvas {
1115
- width: 100%;
1116
- height: 100%;
1117
- display: block;
1118
  }
1119
 
1120
- .trimmer-duration-info {
1121
- display: flex;
1122
- justify-content: space-between;
1123
- align-items: center;
1124
- font-family: var(--font-mono);
1125
- font-size: 0.7rem;
1126
- text-transform: uppercase;
1127
- margin-bottom: -2px;
1128
  }
1129
 
1130
- .duration-title {
1131
- color: var(--text-secondary);
 
 
1132
  }
1133
 
1134
- .duration-val {
1135
- color: var(--accent-copper);
1136
- font-weight: 700;
 
 
 
 
1137
  }
1138
 
1139
- .trim-slider-group {
1140
- display: flex;
1141
- flex-direction: column;
1142
- gap: 2px;
1143
  }
1144
 
1145
- .trim-slider-meta {
1146
- display: flex;
1147
- justify-content: space-between;
 
 
 
 
 
 
 
 
1148
  align-items: center;
1149
- font-size: 0.7rem;
1150
- font-family: var(--font-mono);
1151
- text-transform: uppercase;
1152
- color: var(--text-secondary);
1153
  }
1154
 
1155
- .trim-value-label {
1156
- color: var(--accent-copper);
1157
- font-weight: 600;
1158
  }
1159
 
1160
- .trimmer-controls {
1161
- display: flex;
1162
- gap: 6px;
1163
- margin-top: 2px;
 
 
 
 
 
 
 
 
1164
  }
1165
 
1166
- .btn-trimmer-control {
1167
- flex: 1;
1168
- padding: 6px 10px;
1169
- font-family: var(--font-mono);
1170
- font-size: 0.7rem;
1171
- text-transform: uppercase;
1172
- font-weight: 700;
1173
- border-radius: var(--radius-sm);
 
 
 
 
 
 
1174
  cursor: pointer;
 
1175
  transition: var(--transition);
1176
- display: flex;
1177
- align-items: center;
1178
- justify-content: center;
1179
- gap: 4px;
1180
  }
1181
 
1182
- .btn-trimmer-play {
1183
- background: rgba(255, 114, 53, 0.05);
1184
- border: 1px solid var(--accent-copper);
1185
- color: var(--accent-copper);
1186
  }
1187
 
1188
- .btn-trimmer-play:hover {
1189
- background: var(--accent-copper);
1190
- color: #07090e;
1191
- box-shadow: 0 0 8px var(--accent-copper-glow);
 
 
 
 
 
 
 
 
 
1192
  }
1193
 
1194
- .btn-trimmer-play.playing {
1195
- background: #ef4444;
1196
- border-color: #ef4444;
1197
- color: #ffffff;
1198
- box-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
1199
  }
1200
 
1201
- .btn-trimmer-reset {
1202
- background: #19202f;
1203
- border: 1px solid var(--panel-border);
1204
- color: var(--text-secondary);
1205
  }
1206
 
1207
- .btn-trimmer-reset:hover {
1208
- background: rgba(255, 255, 255, 0.03);
1209
- color: var(--text-primary);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1210
  }
1211
- </style>
 
 
 
 
 
 
 
 
 
 
 
1212
  </head>
1213
  <body>
1214
-
1215
  <div class="app-layout">
1216
 
1217
- <!-- Left collapsing sidebar with configuration parameters & demos -->
1218
- <aside id="app-sidebar" class="sidebar">
1219
- <div class="sidebar-header">
1220
- <span class="sidebar-title">🎛️ Control Deck</span>
1221
- <button id="btn-close-sidebar" class="sidebar-close-btn" title="Close Panel">✕</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1222
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1223
 
1224
- <div class="sidebar-scrollable">
1225
- <!-- Reference Audio Uploader -->
1226
- <div class="form-group">
1227
- <span class="form-label">Voice Reference (Optional)</span>
 
 
 
 
 
 
1228
  <div id="dropzone" class="upload-zone">
1229
  <span class="upload-icon">📤</span>
1230
  <div class="upload-text">
@@ -1277,35 +1490,54 @@
1277
  </div>
1278
  </div>
1279
 
1280
- <!-- Settings Dashboard Parameters -->
1281
- <div class="settings-block">
1282
- <div class="settings-block-title">Synthesis Parameters</div>
1283
-
 
 
 
 
 
 
 
1284
  <!-- CFG Scale -->
1285
  <div class="slider-group">
1286
  <div class="slider-meta">
1287
- <span>CFG Scale</span>
1288
  <span class="slider-value" id="val-cfg">2.5</span>
1289
  </div>
1290
  <input type="range" id="cfg" min="1.0" max="10.0" step="0.5" value="2.5">
 
 
 
 
1291
  </div>
1292
 
1293
  <!-- STG Scale -->
1294
  <div class="slider-group">
1295
  <div class="slider-meta">
1296
- <span>STG Scale</span>
1297
  <span class="slider-value" id="val-stg">1.5</span>
1298
  </div>
1299
  <input type="range" id="stg" min="0.0" max="5.0" step="0.5" value="1.5">
 
 
 
 
1300
  </div>
1301
 
1302
  <!-- Duration Scale Factor -->
1303
  <div class="slider-group">
1304
  <div class="slider-meta">
1305
- <span>Breathing Factor</span>
1306
  <span class="slider-value" id="val-dur">1.10</span>
1307
  </div>
1308
  <input type="range" id="dur" min="0.8" max="2.0" step="0.05" value="1.1">
 
 
 
 
1309
  </div>
1310
 
1311
  <!-- Target Generation Time -->
@@ -1318,7 +1550,7 @@
1318
  </div>
1319
 
1320
  <!-- Reference Window -->
1321
- <div class="slider-group">
1322
  <div class="slider-meta">
1323
  <span>Reference Window (s)</span>
1324
  <span class="slider-value" id="val-refdur">10.0</span>
@@ -1327,8 +1559,8 @@
1327
  </div>
1328
 
1329
  <!-- Seed Controls -->
1330
- <div class="form-group">
1331
- <span class="form-label">Seed Value</span>
1332
  <div class="seed-row">
1333
  <input type="number" id="seed" class="input-seed" value="42">
1334
  <button type="button" id="btn-random-seed" class="btn-seed-random" title="Randomize Seed">🎲</button>
@@ -1336,16 +1568,8 @@
1336
  </div>
1337
  </div>
1338
 
1339
- <!-- Quick Examples Selector -->
1340
- <div class="form-group">
1341
- <span class="form-label">Quick Demos</span>
1342
- <div class="demo-capsules" id="examples-container">
1343
- <!-- Loaded dynamically -->
1344
- </div>
1345
- </div>
1346
-
1347
  <!-- Accordion Guide -->
1348
- <div class="form-group">
1349
  <div class="guide-header" id="guide-toggle">
1350
  <span>📖 Prompt Guide</span>
1351
  <span class="accordion-icon" id="guide-arrow">▼</span>
@@ -1373,137 +1597,17 @@
1373
  </div>
1374
  </div>
1375
  </div>
1376
- </aside>
1377
-
1378
- <!-- Sidebar backdrop overlay (mobile and smaller screen viewports) -->
1379
- <div id="sidebar-overlay" class="sidebar-overlay"></div>
1380
-
1381
- <!-- Main workspace containing editing space and glowing outputs -->
1382
- <div class="content-area">
1383
- <div class="content-container">
1384
- <header>
1385
- <div class="logo-area">
1386
- <span class="logo-emoji">🎭</span>
1387
- <h1>DramaBox</h1>
1388
- <span class="brand-badge">Resemble.AI</span>
1389
- </div>
1390
- <div class="subtitle">Expressive TTS with Voice Cloning</div>
1391
-
1392
- <!-- Sliding Collapsible Trigger -->
1393
- <button id="btn-toggle-sidebar" class="btn-toggle-sidebar" title="Toggle Dashboard Panel">
1394
- <span class="toggle-icon">🎛️</span>
1395
- <span class="toggle-text">Show Control Deck & Demos</span>
1396
- </button>
1397
- </header>
1398
-
1399
- <!-- State Alerts (Connecting / Queuing states) -->
1400
- <div id="status-box" class="status-alert">
1401
- <div class="alert-spinner"></div>
1402
- <span id="status-text">Connecting to DramaBox API...</span>
1403
- </div>
1404
 
1405
- <main class="main-panel">
1406
- <!-- Script Prompt Input -->
1407
- <div class="form-group">
1408
- <div class="form-label">
1409
- <span>Script Prompt</span>
1410
- <span class="label-badge">Double quotes for dialogue, standard text for style</span>
1411
- </div>
1412
- <textarea
1413
- id="scene-prompt"
1414
- class="textarea-custom"
1415
- placeholder='A shadowy villain speaks with cold menace, "You have entered my domain, mortal." He chuckles darkly, "Such arrogance will be your undoing."'
1416
- ></textarea>
1417
- </div>
1418
-
1419
- <!-- Synthesize Trigger -->
1420
- <button id="btn-generate" class="btn-generate">
1421
- <span>⚡</span> Generate Speech
1422
- </button>
1423
-
1424
- <!-- Output Deck -->
1425
- <div class="output-wrapper">
1426
- <audio id="audio-element" style="display:none;"></audio>
1427
-
1428
- <!-- Empty Placeholder -->
1429
- <div id="output-empty-state" class="empty-placeholder">
1430
- <span class="empty-icon">🎛️</span>
1431
- <span class="empty-text">Formulate a script above to voice speech</span>
1432
- </div>
1433
-
1434
- <!-- Elegant Audio Deck -->
1435
- <div id="custom-player" class="audio-player" style="display: none;">
1436
- <div class="visualizer-box">
1437
- <div class="visualizer-wave">
1438
- <span class="wave-bar"></span>
1439
- <span class="wave-bar"></span>
1440
- <span class="wave-bar"></span>
1441
- <span class="wave-bar"></span>
1442
- <span class="wave-bar"></span>
1443
- <span class="wave-bar"></span>
1444
- <span class="wave-bar"></span>
1445
- <span class="wave-bar"></span>
1446
- <span class="wave-bar"></span>
1447
- <span class="wave-bar"></span>
1448
- <span class="wave-bar"></span>
1449
- <span class="wave-bar"></span>
1450
- <span class="wave-bar"></span>
1451
- <span class="wave-bar"></span>
1452
- <span class="wave-bar"></span>
1453
- <span class="wave-bar"></span>
1454
- <span class="wave-bar"></span>
1455
- <span class="wave-bar"></span>
1456
- <span class="wave-bar"></span>
1457
- <span class="wave-bar"></span>
1458
- </div>
1459
- </div>
1460
-
1461
- <div class="player-row">
1462
- <button type="button" id="player-play" class="btn-play">▶</button>
1463
- <div class="progress-box">
1464
- <span id="player-current-time" class="time-lbl">00:00</span>
1465
- <input type="range" id="player-progress" min="0" max="100" value="0">
1466
- <span id="player-duration" class="time-lbl">00:00</span>
1467
- </div>
1468
- </div>
1469
-
1470
- <div class="deck-footer">
1471
- <!-- Volume -->
1472
- <div class="vol-slider">
1473
- <span class="vol-icon">🔊</span>
1474
- <input type="range" id="player-volume" min="0" max="1" step="0.1" value="0.8">
1475
- </div>
1476
-
1477
- <!-- Speed control indicators -->
1478
- <div class="speed-deck">
1479
- <button type="button" class="btn-speed" data-speed="0.8">0.8x</button>
1480
- <button type="button" class="btn-speed active" data-speed="1.0">1.0x</button>
1481
- <button type="button" class="btn-speed" data-speed="1.2">1.2x</button>
1482
- <button type="button" class="btn-speed" data-speed="1.5">1.5x</button>
1483
- </div>
1484
-
1485
- <!-- Downloader WAV -->
1486
- <a id="player-download" class="btn-download-wav" href="#" download="dramabox_audio.wav">
1487
- <span>📥</span> Download
1488
- </a>
1489
- </div>
1490
- </div>
1491
  </div>
1492
- </main>
1493
-
1494
- <div class="ltx-banner" style="margin-top: 12px;">
1495
- 🏗️&nbsp; Built on <a href="https://github.com/Lightricks/LTX-2" target="_blank">LTX-2</a> by
1496
- <a href="https://huggingface.co/Lightricks" target="_blank">Lightricks</a>.
1497
- <strong>DramaBox</strong> is <strong>Resemble AI's</strong> expressive TTS,
1498
- trained on top of the LTX-2.3 audio branch under the LTX-2 Community License.
1499
- Huge thanks to the Lightricks team for open-sourcing the base.
1500
  </div>
1501
-
1502
- <footer>
1503
- &copy; 2026 DramaBox. Audio output watermarked with Resemble Perth.
1504
- </footer>
1505
  </div>
1506
- </div>
1507
 
1508
  </div>
1509
 
@@ -1640,6 +1744,28 @@
1640
 
1641
  const inputSeed = document.getElementById("seed");
1642
  const btnRandomSeed = document.getElementById("btn-random-seed");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1643
 
1644
  // Player elements
1645
  const audioElement = document.getElementById("audio-element");
@@ -1865,7 +1991,7 @@
1865
  const isSelected = currentPercent >= startPercent && currentPercent <= endPercent;
1866
 
1867
  if (isSelected) {
1868
- ctx.fillStyle = "#ff7235"; // var(--accent-copper)
1869
  } else {
1870
  ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
1871
  }
 
16
 
17
  <style>
18
  :root {
19
+ --bg-color: #f8fafc;
20
+ --sidebar-bg: #ffffff;
21
+ --panel-bg: #ffffff;
22
+ --panel-border: #e2e8f0;
23
+ --panel-border-focus: #2cbd94;
24
+ --text-primary: #0f172a;
25
+ --text-secondary: #475569;
26
+ --text-muted: #94a3b8;
27
+ --accent-resemble: #2cbd94;
28
+ --accent-resemble-hover: #1fa480;
29
+ --accent-resemble-glow: rgba(44, 189, 148, 0.08);
30
+ --accent-blue: #3b82f6;
31
+ --accent-purple: #8b5cf6;
32
+ --radius-lg: 12px;
33
+ --radius-md: 8px;
34
+ --radius-sm: 6px;
 
 
35
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
36
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
37
  }
 
44
 
45
  body {
46
  background-color: var(--bg-color);
 
 
 
 
 
47
  color: var(--text-primary);
48
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
49
  min-height: 100vh;
 
52
  position: relative;
53
  }
54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  .app-layout {
56
  display: flex;
57
  width: 100vw;
58
  height: 100vh;
59
  position: relative;
60
  overflow: hidden;
61
+ background-color: var(--bg-color);
62
  }
63
 
64
+ /* 1. Left Navigation Sidebar */
65
+ .nav-sidebar {
66
+ width: 240px;
67
  height: 100%;
68
  background-color: var(--sidebar-bg);
69
  border-right: 1px solid var(--panel-border);
70
  display: flex;
71
  flex-direction: column;
72
+ padding: 24px 16px;
 
 
 
73
  flex-shrink: 0;
74
+ z-index: 101;
75
+ transition: var(--transition);
76
  }
77
 
78
+ .nav-logo {
 
 
 
 
 
 
79
  display: flex;
80
  align-items: center;
81
+ gap: 8px;
82
+ margin-bottom: 32px;
83
+ padding-left: 8px;
84
  }
85
 
86
+ .logo-emoji {
87
+ font-size: 1.5rem;
88
+ }
89
+
90
+ .logo-text {
91
+ font-family: 'Outfit', sans-serif;
92
+ font-size: 1.25rem;
93
  font-weight: 700;
94
  color: var(--text-primary);
95
+ letter-spacing: -0.2px;
96
+ }
97
+
98
+ .brand-badge-mini {
99
+ font-size: 0.65rem;
100
+ font-weight: 600;
101
+ background: var(--accent-resemble-glow);
102
+ color: var(--accent-resemble);
103
+ border: 1px solid rgba(44, 189, 148, 0.2);
104
+ padding: 1px 5px;
105
+ border-radius: var(--radius-sm);
106
  text-transform: uppercase;
107
+ letter-spacing: 0.2px;
108
+ margin-left: 2px;
109
+ }
110
+
111
+ .nav-menu {
112
  display: flex;
113
+ flex-direction: column;
114
+ gap: 4px;
115
  }
116
 
117
+ .nav-item {
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 12px;
121
+ padding: 10px 14px;
122
  color: var(--text-secondary);
123
  font-size: 0.9rem;
124
+ font-weight: 500;
125
+ border-radius: var(--radius-md);
126
  cursor: pointer;
127
  transition: var(--transition);
128
+ text-decoration: none;
 
 
 
 
129
  }
130
 
131
+ .nav-item:hover {
132
+ background-color: var(--bg-color);
133
+ color: var(--text-primary);
134
  }
135
 
136
+ .nav-item.active {
137
+ background-color: var(--accent-resemble-glow);
138
+ color: var(--accent-resemble);
139
+ font-weight: 600;
 
 
 
140
  }
141
 
142
+ .nav-icon {
143
+ font-size: 1.1rem;
144
+ display: inline-block;
145
+ width: 20px;
146
+ text-align: center;
147
  }
148
 
149
+ .nav-divider {
150
+ height: 1px;
151
+ background-color: var(--panel-border);
152
+ margin: 20px 8px;
153
  }
154
 
155
+ .nav-section-title {
156
+ font-size: 0.72rem;
157
+ font-weight: 700;
158
+ color: var(--text-muted);
159
+ text-transform: uppercase;
160
+ letter-spacing: 0.8px;
161
+ margin-bottom: 8px;
162
+ padding-left: 14px;
163
  }
164
 
165
+ .nav-item.active-pinned {
166
+ background-color: #f1f5f9;
167
+ color: var(--text-primary);
168
+ font-weight: 600;
169
+ border-left: 3px solid var(--accent-resemble);
170
+ border-radius: 0 var(--radius-md) var(--radius-md) 0;
171
+ padding-left: 11px;
172
  }
173
 
174
+
175
+ /* 2. Center Column - Workspace Area */
176
+ .workspace-area {
177
  flex: 1;
178
  height: 100%;
179
  display: flex;
180
  flex-direction: column;
181
  overflow-y: auto;
182
+ background-color: var(--bg-color);
 
 
 
 
 
 
 
 
 
 
 
183
  }
184
 
185
+ .workspace-header {
186
+ height: 64px;
187
+ padding: 0 32px;
 
 
 
 
 
188
  border-bottom: 1px solid var(--panel-border);
189
+ background-color: #ffffff;
190
+ display: flex;
191
+ align-items: center;
192
+ justify-content: space-between;
193
+ flex-shrink: 0;
194
  }
195
 
196
+ .header-left {
197
  display: flex;
198
  align-items: center;
199
+ gap: 8px;
200
+ font-size: 0.88rem;
201
  }
202
 
203
+ .header-breadcrumb {
204
+ color: var(--text-secondary);
205
+ font-weight: 500;
206
  }
207
 
208
+ .header-chevron {
209
+ color: var(--text-muted);
 
 
 
 
 
210
  }
211
 
212
+ .header-current {
213
+ color: var(--text-primary);
 
214
  font-weight: 600;
 
 
 
 
 
 
 
215
  }
216
 
217
+ .header-right {
218
+ display: flex;
219
+ align-items: center;
220
+ gap: 12px;
221
  }
222
 
223
+ .header-btn {
224
+ background: none;
225
  border: 1px solid var(--panel-border);
226
+ color: var(--text-secondary);
 
 
 
227
  font-size: 0.8rem;
228
+ font-weight: 500;
229
+ padding: 6px 12px;
230
+ border-radius: var(--radius-sm);
231
+ cursor: pointer;
 
 
 
 
 
 
232
  transition: var(--transition);
233
  }
234
 
235
+ .header-btn:hover {
236
+ border-color: var(--text-muted);
237
+ color: var(--text-primary);
238
  }
239
 
240
+ .workspace-main {
241
+ flex: 1;
242
+ padding: 32px;
243
+ max-width: 800px;
244
+ width: 100%;
245
+ margin: 0 auto;
 
 
 
 
246
  display: flex;
247
+ flex-direction: column;
248
+ gap: 24px;
 
 
 
 
 
 
 
 
 
249
  }
250
 
251
+ /* 3. Text Editor Card */
252
+ .editor-card {
253
+ background-color: var(--panel-bg);
254
  border: 1px solid var(--panel-border);
255
  border-radius: var(--radius-lg);
256
+ padding: 24px;
257
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
258
  display: flex;
259
  flex-direction: column;
260
  gap: 16px;
261
  }
262
 
263
+ .editor-header {
264
  display: flex;
265
  flex-direction: column;
266
+ gap: 4px;
267
  }
268
 
269
+ .editor-title {
270
+ font-size: 0.95rem;
271
+ font-weight: 600;
272
+ color: var(--text-primary);
 
 
 
 
 
 
273
  }
274
 
275
+ .editor-desc {
276
+ font-size: 0.8rem;
277
+ color: var(--text-secondary);
 
 
 
 
278
  }
279
 
280
  .textarea-custom {
281
  width: 100%;
282
+ background: #ffffff;
283
  border: 1px solid var(--panel-border);
284
  border-radius: var(--radius-md);
285
+ padding: 18px;
286
  color: var(--text-primary);
287
  font-family: 'Inter', sans-serif;
288
+ font-size: 0.95rem;
289
+ line-height: 1.6;
290
  resize: vertical;
291
+ min-height: 180px;
292
  outline: none;
293
  transition: var(--transition);
294
  }
295
 
296
  .textarea-custom:focus {
297
+ border-color: var(--accent-resemble);
298
+ box-shadow: 0 0 0 3px var(--accent-resemble-glow);
299
  }
300
 
301
+ .editor-footer {
 
 
 
 
 
 
302
  display: flex;
 
303
  align-items: center;
304
+ justify-content: space-between;
 
 
 
305
  }
306
 
307
+ .char-counter {
308
+ font-size: 0.8rem;
309
+ color: var(--text-secondary);
310
  }
311
 
312
+ .btn-generate {
313
+ background-color: #0f172a; /* Sleek dark slate button like ElevenLabs */
314
+ border: none;
315
+ border-radius: var(--radius-md);
316
+ color: #ffffff;
317
+ font-family: 'Inter', sans-serif;
318
+ font-size: 0.88rem;
319
+ font-weight: 600;
320
+ padding: 10px 20px;
321
+ cursor: pointer;
322
+ transition: var(--transition);
323
+ display: flex;
324
+ align-items: center;
325
+ gap: 8px;
326
+ box-shadow: 0 1px 2px rgba(0,0,0,0.05);
327
  }
328
 
329
+ .btn-generate:hover:not(:disabled) {
330
+ background-color: var(--accent-resemble);
331
+ transform: translateY(-0.5px);
332
  }
333
 
334
+ .btn-generate:active:not(:disabled) {
335
+ transform: translateY(0);
 
336
  }
337
 
338
+ .btn-generate:disabled {
339
+ background: #f1f5f9;
340
+ color: var(--text-muted);
341
+ border: 1px solid var(--panel-border);
342
+ cursor: not-allowed;
343
+ box-shadow: none;
344
  }
345
 
346
+ /* 4. Output Wrapper & Custom Audio Player */
347
+ .output-wrapper {
348
+ background-color: var(--panel-bg);
349
+ border: 1px solid var(--panel-border);
350
+ border-radius: var(--radius-lg);
351
+ padding: 24px;
352
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
353
+ min-height: 100px;
354
  display: flex;
355
+ flex-direction: column;
356
+ justify-content: center;
357
  align-items: center;
 
 
 
 
 
 
358
  }
359
 
360
+ .empty-placeholder {
361
+ color: var(--text-secondary);
362
+ text-align: center;
363
  display: flex;
364
+ flex-direction: column;
365
  align-items: center;
366
  gap: 8px;
 
 
 
 
 
 
367
  }
368
 
369
+ .empty-icon {
370
+ font-size: 1.75rem;
371
+ color: var(--text-muted);
 
 
 
 
 
 
 
 
 
372
  }
373
 
374
+ .empty-text {
375
+ font-size: 0.8rem;
376
+ font-weight: 500;
377
  }
378
 
379
+ .audio-player {
380
+ width: 100%;
381
  display: flex;
382
  flex-direction: column;
383
+ gap: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
384
  }
385
 
386
  .visualizer-box {
387
  width: 100%;
388
+ height: 48px;
389
+ background: #f8fafc;
390
+ border-radius: var(--radius-md);
391
  display: flex;
392
  align-items: center;
393
  justify-content: center;
 
398
  .visualizer-wave {
399
  display: flex;
400
  align-items: center;
401
+ gap: 3px;
402
  height: 100%;
403
+ width: 90%;
404
+ justify-content: center;
405
  }
406
 
407
  .wave-bar {
408
+ width: 4px;
409
+ height: 6px;
410
+ background: var(--accent-resemble);
411
+ border-radius: 2px;
412
  transition: var(--transition);
413
  }
414
 
415
  .audio-player.playing .wave-bar {
416
+ animation: playWave 0.8s infinite ease-in-out alternate;
417
  }
418
 
419
  @keyframes playWave {
420
+ 0% { height: 6px; }
421
+ 100% { height: 36px; }
422
  }
423
 
424
+ .wave-bar:nth-child(2n) { background: #3b82f6; animation-delay: 0.1s; }
425
+ .wave-bar:nth-child(3n) { background: #10b981; animation-delay: 0.2s; }
426
+ .wave-bar:nth-child(4n) { background: var(--accent-resemble); animation-delay: 0.3s; }
427
+ .wave-bar:nth-child(5n) { background: #6366f1; animation-delay: 0.4s; }
428
 
429
  .player-row {
430
  display: flex;
431
  align-items: center;
432
+ gap: 14px;
433
  width: 100%;
434
  }
435
 
436
  .btn-play {
437
+ background-color: var(--accent-resemble);
438
  border: none;
439
+ color: #ffffff;
440
+ width: 40px;
441
+ height: 40px;
442
+ border-radius: 50%;
443
  display: flex;
444
  align-items: center;
445
  justify-content: center;
446
+ font-size: 1rem;
447
  cursor: pointer;
448
  transition: var(--transition);
449
+ box-shadow: 0 2px 4px rgba(44, 189, 148, 0.2);
450
  flex-shrink: 0;
451
  }
452
 
453
  .btn-play:hover {
454
+ background-color: var(--accent-resemble-hover);
455
+ transform: scale(1.05);
 
456
  }
457
 
458
  .progress-box {
459
  flex: 1;
460
  display: flex;
461
  align-items: center;
462
+ gap: 12px;
463
  }
464
 
465
  .time-lbl {
466
+ font-size: 0.8rem;
467
  color: var(--text-secondary);
468
  font-family: var(--font-mono);
469
+ min-width: 38px;
470
+ }
471
+
472
+ /* 5. Custom Range Sliders */
473
+ input[type="range"] {
474
+ -webkit-appearance: none;
475
+ width: 100%;
476
+ height: 4px;
477
+ background: #e2e8f0;
478
+ border-radius: 2px;
479
+ outline: none;
480
+ cursor: pointer;
481
+ }
482
+
483
+ input[type="range"]::-webkit-slider-thumb {
484
+ -webkit-appearance: none;
485
+ width: 14px;
486
+ height: 14px;
487
+ border-radius: 50%;
488
+ background: #0f172a;
489
+ border: 2px solid #ffffff;
490
+ box-shadow: 0 1px 3px rgba(0,0,0,0.15);
491
+ transition: var(--transition);
492
+ }
493
+
494
+ input[type="range"]::-webkit-slider-thumb:hover {
495
+ background: var(--accent-resemble);
496
+ transform: scale(1.15);
497
  }
498
 
499
  .progress-box input[type="range"]::-webkit-slider-thumb {
500
+ background: var(--accent-resemble);
 
 
501
  }
502
 
503
  .deck-footer {
 
506
  justify-content: space-between;
507
  width: 100%;
508
  border-top: 1px solid var(--panel-border);
509
+ padding-top: 14px;
510
+ gap: 16px;
 
511
  }
512
 
513
  .vol-slider {
514
  display: flex;
515
  align-items: center;
516
+ gap: 8px;
517
+ max-width: 100px;
518
  flex-shrink: 0;
519
  }
520
 
521
  .vol-icon {
522
+ font-size: 0.9rem;
523
  color: var(--text-secondary);
524
  }
525
 
 
 
 
 
526
  .speed-deck {
527
  display: flex;
528
  align-items: center;
529
+ gap: 6px;
530
  }
531
 
532
  .btn-speed {
533
+ background: #f1f5f9;
534
  border: 1px solid var(--panel-border);
535
  border-radius: var(--radius-sm);
536
  color: var(--text-secondary);
537
+ font-size: 0.75rem;
 
538
  font-weight: 600;
539
+ padding: 4px 8px;
540
  cursor: pointer;
541
  transition: var(--transition);
542
  }
543
 
544
  .btn-speed.active, .btn-speed:hover {
545
+ background: var(--accent-resemble-glow);
546
+ color: var(--accent-resemble);
547
+ border-color: rgba(44, 189, 148, 0.3);
548
  }
549
 
550
  .btn-download-wav {
551
+ background: #f1f5f9;
552
  border: 1px solid var(--panel-border);
553
  border-radius: var(--radius-sm);
554
+ color: var(--text-primary);
555
+ font-size: 0.78rem;
 
556
  font-weight: 600;
557
+ padding: 5px 12px;
558
  text-decoration: none;
559
  display: flex;
560
  align-items: center;
561
+ gap: 6px;
562
  transition: var(--transition);
 
 
563
  }
564
 
565
  .btn-download-wav:hover {
566
+ background: var(--accent-resemble);
567
+ color: #ffffff;
568
+ border-color: var(--accent-resemble);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
569
  }
570
 
571
+ /* 6. Right Settings Sidebar */
572
+ .settings-sidebar {
573
+ width: 360px;
574
+ height: 100%;
575
+ background-color: var(--sidebar-bg);
576
+ border-left: 1px solid var(--panel-border);
577
  display: flex;
578
+ flex-direction: column;
579
+ flex-shrink: 0;
580
+ z-index: 100;
581
+ transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
582
+ overflow-y: auto;
583
+ position: relative;
 
 
 
 
 
 
 
584
  }
585
 
586
+ /* Toggling on mobile overlay */
587
+ .settings-sidebar.collapsed {
588
+ margin-right: -360px;
589
+ transform: translateX(100%);
590
  }
591
 
592
+ .settings-tabs {
593
+ display: flex;
594
+ border-bottom: 1px solid var(--panel-border);
595
+ background-color: #ffffff;
596
+ position: sticky;
597
+ top: 0;
598
+ z-index: 10;
599
  }
600
 
601
+ .tab-btn {
602
+ flex: 1;
603
+ background: none;
604
+ border: none;
605
+ padding: 16px;
606
+ font-size: 0.88rem;
607
+ font-weight: 600;
608
+ color: var(--text-secondary);
609
+ cursor: pointer;
610
+ transition: var(--transition);
611
+ text-align: center;
612
+ border-bottom: 2px solid transparent;
613
  }
614
 
615
+ .tab-btn:hover {
616
+ color: var(--text-primary);
 
 
 
 
 
617
  }
618
 
619
+ .tab-btn.active {
620
+ color: var(--accent-resemble);
621
+ border-bottom-color: var(--accent-resemble);
622
  }
623
 
624
+ .settings-pane {
625
  display: flex;
626
  flex-direction: column;
627
+ gap: 20px;
628
+ padding: 24px;
629
  }
630
 
631
+ .settings-card {
632
+ background-color: #ffffff;
633
  border: 1px solid var(--panel-border);
634
+ border-radius: var(--radius-lg);
635
+ padding: 20px;
636
+ box-shadow: 0 1px 2px rgba(0,0,0,0.03);
637
+ display: flex;
638
+ flex-direction: column;
639
+ gap: 16px;
640
+ }
641
+
642
+ .settings-card.flex-gap {
643
+ gap: 20px;
644
+ }
645
+
646
+ .card-label {
647
+ font-size: 0.85rem;
648
+ font-weight: 600;
649
+ color: var(--text-primary);
650
+ }
651
+
652
+ /* 7. Voice Reference & Audio Trimmer */
653
+ .upload-zone {
654
+ border: 2.5px dashed var(--panel-border);
655
  border-radius: var(--radius-md);
656
+ padding: 24px 16px;
657
+ text-align: center;
658
  cursor: pointer;
659
+ background: #f8fafc;
660
  display: flex;
661
+ flex-direction: column;
662
  align-items: center;
663
+ gap: 8px;
664
+ transition: var(--transition);
665
  }
666
 
667
+ .upload-zone:hover, .upload-zone.dragover {
668
+ border-color: var(--accent-resemble);
669
+ background-color: var(--accent-resemble-glow);
 
670
  }
671
 
672
+ .upload-icon {
673
+ font-size: 1.5rem;
674
+ color: var(--accent-resemble);
675
  }
676
 
677
+ .upload-text {
678
+ font-size: 0.8rem;
679
+ color: var(--text-secondary);
680
+ line-height: 1.4;
681
+ }
682
+
683
+ .upload-text strong {
684
+ color: var(--text-primary);
685
  font-weight: 600;
686
+ }
687
+
688
+ .audio-trimmer-container {
689
+ display: flex;
690
+ flex-direction: column;
691
+ gap: 12px;
692
+ background: #f8fafc;
693
+ border: 1px solid var(--panel-border);
694
+ border-radius: var(--radius-md);
695
+ padding: 14px;
696
+ margin-top: 4px;
697
+ transition: var(--transition);
698
+ }
699
+
700
+ .trimmer-header {
701
+ display: flex;
702
+ justify-content: space-between;
703
+ align-items: center;
704
+ border-bottom: 1px solid var(--panel-border);
705
+ padding-bottom: 8px;
706
+ }
707
+
708
+ .trimmer-file-info {
709
+ display: flex;
710
+ align-items: center;
711
+ gap: 8px;
712
+ }
713
+
714
+ .trimmer-filename {
715
+ font-size: 0.8rem;
716
+ color: var(--text-primary);
717
+ font-weight: 500;
718
  white-space: nowrap;
719
  overflow: hidden;
720
  text-overflow: ellipsis;
721
+ max-width: 180px;
722
  }
723
 
724
+ .btn-clear-trimmer {
725
+ background: transparent;
726
+ border: none;
727
+ color: var(--text-secondary);
728
+ cursor: pointer;
729
+ font-size: 0.85rem;
730
+ padding: 4px;
731
+ border-radius: var(--radius-sm);
732
  display: flex;
733
+ align-items: center;
734
+ justify-content: center;
735
  }
736
 
737
+ .btn-clear-trimmer:hover {
738
+ color: #ef4444;
739
+ background: #fee2e2;
740
+ }
741
+
742
+ .trimmer-waveform-box {
743
+ position: relative;
744
+ width: 100%;
745
+ height: 60px;
746
+ background: #0f172a; /* dark grid screen for waveform */
747
  border-radius: var(--radius-sm);
748
+ overflow: hidden;
749
+ }
750
+
751
+ .trimmer-canvas {
752
+ width: 100%;
753
+ height: 100%;
754
+ display: block;
755
+ }
756
+
757
+ .trimmer-duration-info {
758
+ display: flex;
759
+ justify-content: space-between;
760
+ align-items: center;
761
+ font-size: 0.75rem;
762
+ font-weight: 500;
763
  }
764
 
765
+ .duration-title {
766
+ color: var(--text-secondary);
767
+ }
768
 
769
+ .duration-val {
770
+ color: var(--accent-resemble);
771
+ font-weight: 700;
772
  font-family: var(--font-mono);
773
+ }
774
+
775
+ .trim-slider-group {
776
+ display: flex;
777
+ flex-direction: column;
778
+ gap: 4px;
779
+ }
780
+
781
+ .trim-slider-meta {
782
+ display: flex;
783
+ justify-content: space-between;
784
+ align-items: center;
785
  font-size: 0.75rem;
786
+ color: var(--text-secondary);
787
+ }
788
+
789
+ .trim-value-label {
790
+ color: var(--accent-resemble);
791
+ font-weight: 600;
792
+ font-family: var(--font-mono);
793
+ }
794
+
795
+ .trimmer-controls {
796
+ display: flex;
797
+ gap: 8px;
798
+ margin-top: 4px;
799
+ }
800
+
801
+ .btn-trimmer-control {
802
+ flex: 1;
803
+ padding: 8px 12px;
804
+ font-size: 0.78rem;
805
+ font-weight: 600;
806
+ border-radius: var(--radius-sm);
807
  cursor: pointer;
808
+ transition: var(--transition);
809
  display: flex;
 
810
  align-items: center;
811
+ justify-content: center;
812
+ gap: 6px;
 
 
 
 
813
  }
814
 
815
+ .btn-trimmer-play {
816
+ background-color: var(--accent-resemble-glow);
817
+ border: 1px solid var(--accent-resemble);
818
+ color: var(--accent-resemble);
819
+ }
820
+
821
+ .btn-trimmer-play:hover {
822
+ background-color: var(--accent-resemble);
823
+ color: #ffffff;
824
+ }
825
+
826
+ .btn-trimmer-play.playing {
827
+ background-color: #ef4444;
828
+ border-color: #ef4444;
829
+ color: #ffffff;
830
+ }
831
+
832
+ .btn-trimmer-reset {
833
+ background: #ffffff;
834
+ border: 1px solid var(--panel-border);
835
  color: var(--text-secondary);
 
 
 
 
836
  }
837
 
838
+ .btn-trimmer-reset:hover {
839
+ background: #f1f5f9;
840
+ color: var(--text-primary);
841
  }
842
 
843
+ /* Model banner card style */
844
+ .model-banner-card {
845
+ background: linear-gradient(135deg, #2cbd94 0%, #1fa480 100%);
846
+ border-radius: var(--radius-lg);
847
+ padding: 20px;
848
  color: #ffffff;
849
+ box-shadow: 0 4px 12px rgba(44, 189, 148, 0.15);
850
+ display: flex;
851
+ flex-direction: column;
852
+ gap: 6px;
853
+ }
854
+
855
+ .model-banner-title {
856
+ font-size: 0.72rem;
857
  font-weight: 700;
 
 
858
  text-transform: uppercase;
859
+ letter-spacing: 1px;
860
+ opacity: 0.85;
861
  }
862
 
863
+ .model-banner-name {
864
+ font-size: 1rem;
865
+ font-weight: 700;
866
+ }
867
+
868
+ .model-banner-desc {
869
+ font-size: 0.8rem;
870
+ opacity: 0.9;
871
+ line-height: 1.4;
872
+ }
873
+
874
+ /* 8. Sliders Details inside Settings */
875
+ .slider-group {
876
  display: flex;
877
  flex-direction: column;
878
+ gap: 6px;
879
  }
880
 
881
+ .slider-meta {
882
+ display: flex;
883
+ justify-content: space-between;
884
+ font-size: 0.82rem;
885
+ color: var(--text-secondary);
886
+ font-weight: 500;
 
 
 
 
 
887
  }
888
 
889
+ .slider-value {
890
+ color: var(--accent-resemble);
891
+ font-weight: 700;
892
+ font-family: var(--font-mono);
893
+ background: var(--accent-resemble-glow);
894
+ padding: 1px 6px;
895
+ border-radius: var(--radius-sm);
896
+ border: 1px solid rgba(44, 189, 148, 0.2);
897
  }
898
 
899
+ .slider-hints {
900
+ display: flex;
901
+ justify-content: space-between;
902
+ font-size: 0.72rem;
 
 
903
  color: var(--text-muted);
904
+ margin-top: -2px;
 
 
905
  }
906
 
907
+ .form-group-custom {
908
+ display: flex;
909
+ flex-direction: column;
910
+ gap: 6px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
911
  }
912
 
913
+ .custom-label {
914
+ font-size: 0.82rem;
915
+ font-weight: 500;
916
+ color: var(--text-secondary);
917
  }
918
 
919
+ .seed-row {
920
  display: flex;
921
+ gap: 8px;
922
+ align-items: center;
923
+ }
924
+
925
+ .input-seed {
926
+ flex: 1;
927
+ background: #ffffff;
928
  border: 1px solid var(--panel-border);
929
+ border-radius: var(--radius-sm);
930
+ padding: 6px 12px;
931
+ color: var(--text-primary);
932
+ font-family: var(--font-mono);
933
+ outline: none;
934
+ font-size: 0.88rem;
935
  transition: var(--transition);
936
+ height: 38px;
937
  }
938
 
939
+ .input-seed:focus {
940
+ border-color: var(--accent-resemble);
941
+ box-shadow: 0 0 0 2px var(--accent-resemble-glow);
942
+ }
943
+
944
+ .btn-seed-random {
945
+ background: #ffffff;
946
+ border: 1px solid var(--panel-border);
947
+ border-radius: var(--radius-sm);
948
+ color: var(--text-primary);
949
+ height: 38px;
950
+ width: 38px;
951
  display: flex;
 
952
  align-items: center;
953
+ justify-content: center;
954
+ cursor: pointer;
955
+ transition: var(--transition);
956
+ font-size: 1rem;
957
  }
958
 
959
+ .btn-seed-random:hover {
960
+ border-color: var(--accent-resemble);
961
+ background: var(--accent-resemble-glow);
962
+ }
963
+
964
+ /* 9. Prompt Guide accordion styling */
965
+ .guide-header {
966
+ font-size: 0.88rem;
967
+ font-weight: 600;
968
+ color: var(--text-primary);
969
+ cursor: pointer;
970
  display: flex;
971
+ justify-content: space-between;
972
  align-items: center;
973
+ user-select: none;
974
+ }
975
+
976
+ .guide-body {
977
+ max-height: 0;
978
  overflow: hidden;
979
+ transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
980
+ font-size: 0.8rem;
981
+ color: var(--text-secondary);
982
+ display: flex;
983
+ flex-direction: column;
984
+ gap: 12px;
985
+ line-height: 1.5;
986
  }
987
 
988
+ .guide-body.open {
989
+ max-height: 380px;
990
+ margin-top: 14px;
991
  }
992
 
993
+ .guide-block-title {
994
+ color: var(--text-primary);
995
+ font-weight: 600;
996
+ margin-bottom: 4px;
997
+ font-size: 0.8rem;
998
+ }
999
+
1000
+ .guide-list {
1001
+ padding-left: 16px;
1002
+ display: flex;
1003
+ flex-direction: column;
1004
+ gap: 4px;
1005
+ }
1006
+
1007
+ /* 10. Quick Demos & Pills */
1008
+ .demo-capsules {
1009
+ display: flex;
1010
+ flex-direction: column;
1011
+ gap: 8px;
1012
+ }
1013
+
1014
+ .demo-pill {
1015
+ background: #ffffff;
1016
+ border: 1px solid var(--panel-border);
1017
+ border-radius: var(--radius-md);
1018
+ padding: 10px 14px;
1019
+ cursor: pointer;
1020
+ transition: var(--transition);
1021
+ display: flex;
1022
+ justify-content: space-between;
1023
+ align-items: center;
1024
+ gap: 12px;
1025
+ text-align: left;
1026
+ }
1027
+
1028
+ .demo-pill:hover {
1029
+ border-color: var(--accent-resemble);
1030
+ background-color: var(--accent-resemble-glow);
1031
+ transform: translateX(1px);
1032
+ }
1033
+
1034
+ .demo-pill.active {
1035
+ border-color: var(--accent-resemble);
1036
+ background-color: var(--accent-resemble-glow);
1037
+ }
1038
+
1039
+ .demo-pill-title {
1040
+ font-size: 0.82rem;
1041
+ font-weight: 600;
1042
  color: var(--text-primary);
 
1043
  white-space: nowrap;
1044
  overflow: hidden;
1045
  text-overflow: ellipsis;
1046
+ max-width: 180px;
1047
  }
1048
 
1049
+ .pill-labels {
 
 
 
 
 
 
 
1050
  display: flex;
1051
+ gap: 6px;
1052
+ flex-shrink: 0;
 
1053
  }
1054
 
1055
+ .pill-badge {
1056
+ font-size: 0.65rem;
1057
+ font-weight: 700;
1058
+ padding: 2px 6px;
1059
+ border-radius: var(--radius-sm);
1060
+ text-transform: uppercase;
1061
  }
1062
 
1063
+ .pill-badge-male { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
1064
+ .pill-badge-female { background: rgba(236, 72, 153, 0.1); color: #db2777; }
1065
+ .pill-badge-long { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
1066
+
1067
+ /* 11. Alerts & Status Bar */
1068
+ .status-alert {
1069
+ display: flex;
1070
+ align-items: center;
1071
+ gap: 10px;
1072
+ font-size: 0.85rem;
1073
+ font-weight: 600;
1074
+ padding: 12px 18px;
1075
+ border-radius: var(--radius-md);
1076
+ border: 1px solid transparent;
1077
+ display: none;
1078
  width: 100%;
1079
+ box-shadow: 0 1px 2px rgba(0,0,0,0.03);
1080
+ margin-bottom: 8px;
 
 
 
1081
  }
1082
 
1083
+ .status-alert.success {
1084
+ background-color: #ecfdf5;
1085
+ border-color: #a7f3d0;
1086
+ color: #065f46;
1087
  }
1088
 
1089
+ .status-alert.info {
1090
+ background-color: #eff6ff;
1091
+ border-color: #bfdbfe;
1092
+ color: #1e40af;
 
 
 
 
1093
  }
1094
 
1095
+ .status-alert.error {
1096
+ background-color: #fef2f2;
1097
+ border-color: #fecaca;
1098
+ color: #991b1b;
1099
  }
1100
 
1101
+ .alert-spinner {
1102
+ width: 14px;
1103
+ height: 14px;
1104
+ border: 2px solid rgba(0, 0, 0, 0.05);
1105
+ border-top: 2px solid currentColor;
1106
+ border-radius: 50%;
1107
+ animation: spin 0.8s linear infinite;
1108
  }
1109
 
1110
+ @keyframes spin {
1111
+ 0% { transform: rotate(0deg); }
1112
+ 100% { transform: rotate(360deg); }
 
1113
  }
1114
 
1115
+ /* Mobile Collapsing Trigger inside Header */
1116
+ .btn-toggle-sidebar {
1117
+ background: #ffffff;
1118
+ border: 1px solid var(--panel-border);
1119
+ color: var(--text-primary);
1120
+ font-size: 0.8rem;
1121
+ font-weight: 600;
1122
+ padding: 8px 14px;
1123
+ border-radius: var(--radius-sm);
1124
+ cursor: pointer;
1125
+ display: none;
1126
  align-items: center;
1127
+ gap: 6px;
1128
+ transition: var(--transition);
1129
+ outline: none;
 
1130
  }
1131
 
1132
+ .btn-toggle-sidebar:hover {
1133
+ border-color: var(--text-muted);
1134
+ background-color: var(--bg-color);
1135
  }
1136
 
1137
+ .sidebar-overlay {
1138
+ position: fixed;
1139
+ top: 0;
1140
+ left: 0;
1141
+ width: 100vw;
1142
+ height: 100vh;
1143
+ background: rgba(15, 23, 42, 0.4);
1144
+ backdrop-filter: blur(2px);
1145
+ z-index: 99;
1146
+ opacity: 0;
1147
+ pointer-events: none;
1148
+ transition: opacity 0.25s ease;
1149
  }
1150
 
1151
+ .sidebar-overlay.active {
1152
+ opacity: 1;
1153
+ pointer-events: auto;
1154
+ }
1155
+
1156
+ /* Close button on mobile right sidebar */
1157
+ .settings-sidebar-close {
1158
+ position: absolute;
1159
+ right: 16px;
1160
+ top: 16px;
1161
+ background: none;
1162
+ border: none;
1163
+ font-size: 1.15rem;
1164
+ color: var(--text-secondary);
1165
  cursor: pointer;
1166
+ display: none;
1167
  transition: var(--transition);
1168
+ z-index: 20;
 
 
 
1169
  }
1170
 
1171
+ .settings-sidebar-close:hover {
1172
+ color: var(--text-primary);
 
 
1173
  }
1174
 
1175
+ /* Banner & Footer */
1176
+ .ltx-banner {
1177
+ background: #ffffff;
1178
+ border: 1px solid var(--panel-border);
1179
+ border-left: 4px solid var(--accent-resemble);
1180
+ border-radius: var(--radius-md);
1181
+ padding: 16px;
1182
+ color: var(--text-secondary);
1183
+ font-size: 0.82rem;
1184
+ line-height: 1.5;
1185
+ text-align: left;
1186
+ box-shadow: 0 1px 2px rgba(0,0,0,0.02);
1187
+ width: 100%;
1188
  }
1189
 
1190
+ .ltx-banner a {
1191
+ color: var(--accent-resemble);
1192
+ font-weight: 600;
1193
+ text-decoration: none;
 
1194
  }
1195
 
1196
+ .ltx-banner a:hover {
1197
+ text-decoration: underline;
 
 
1198
  }
1199
 
1200
+ footer {
1201
+ margin-top: auto;
1202
+ text-align: left;
1203
+ padding: 16px 0 0 0;
1204
+ font-size: 0.72rem;
1205
+ color: var(--text-muted);
1206
+ border-top: 1px solid var(--panel-border);
1207
+ font-weight: 500;
1208
+ }
1209
+
1210
+ /* Responsiveness adjustments */
1211
+ @media (max-width: 1100px) {
1212
+ .app-layout {
1213
+ flex-direction: row;
1214
+ }
1215
+ .btn-toggle-sidebar {
1216
+ display: flex;
1217
+ }
1218
+ .settings-sidebar {
1219
+ position: fixed;
1220
+ top: 0;
1221
+ right: 0;
1222
+ height: 100%;
1223
+ z-index: 1000;
1224
+ box-shadow: -4px 0 24px rgba(15, 23, 42, 0.1);
1225
+ }
1226
+ .settings-sidebar-close {
1227
+ display: block;
1228
+ }
1229
  }
1230
+
1231
+ @media (max-width: 768px) {
1232
+ .nav-sidebar {
1233
+ display: none; /* Hide nav sidebar on smaller mobile screens */
1234
+ }
1235
+ .workspace-header {
1236
+ padding: 0 20px;
1237
+ }
1238
+ .workspace-main {
1239
+ padding: 20px;
1240
+ }
1241
+ }</style>
1242
  </head>
1243
  <body>
 
1244
  <div class="app-layout">
1245
 
1246
+ <!-- Left Navigation Sidebar (ElevenLabs layout) -->
1247
+ <aside class="nav-sidebar">
1248
+ <div class="nav-logo">
1249
+ <span class="logo-emoji">🎭</span>
1250
+ <span class="logo-text">DramaBox</span>
1251
+ <span class="brand-badge-mini">by Resemble</span>
1252
+ </div>
1253
+
1254
+ <div class="nav-menu">
1255
+ <div class="nav-item">
1256
+ <span class="nav-icon">🏠</span> Home
1257
+ </div>
1258
+ <div class="nav-item">
1259
+ <span class="nav-icon">🎙️</span> Voices
1260
+ </div>
1261
+ <div class="nav-item active">
1262
+ <span class="nav-icon">🎨</span> Studio
1263
+ </div>
1264
+ <div class="nav-item">
1265
+ <span class="nav-icon">⚡</span> Flows
1266
+ </div>
1267
+ <div class="nav-item">
1268
+ <span class="nav-icon">📁</span> Files
1269
+ </div>
1270
+ </div>
1271
+
1272
+ <div class="nav-divider"></div>
1273
+
1274
+ <div class="nav-section-title">Pinned</div>
1275
+ <div class="nav-menu">
1276
+ <div class="nav-item active-pinned">
1277
+ <span class="nav-icon">🔊</span> Text to Speech
1278
+ </div>
1279
  </div>
1280
+ </aside>
1281
+
1282
+ <!-- Sidebar backdrop overlay (mobile viewports) -->
1283
+ <div id="sidebar-overlay" class="sidebar-overlay"></div>
1284
+
1285
+ <!-- Center Workspace Column -->
1286
+ <div class="workspace-area">
1287
+ <header class="workspace-header">
1288
+ <div class="header-left">
1289
+ <span class="header-breadcrumb">Studio</span>
1290
+ <span class="header-chevron">/</span>
1291
+ <span class="header-current">Text to Speech</span>
1292
+ </div>
1293
+
1294
+ <div class="header-right">
1295
+ <!-- Sliding Collapsible Trigger (for settings on mobile) -->
1296
+ <button id="btn-toggle-sidebar" class="btn-toggle-sidebar" title="Toggle Settings Panel">
1297
+ <span class="toggle-icon">🎛️</span>
1298
+ <span class="toggle-text">Show Settings</span>
1299
+ </button>
1300
+ <button class="header-btn">Feedback</button>
1301
+ <button class="header-btn">Docs</button>
1302
+ <button class="header-btn">Ask</button>
1303
+ </div>
1304
+ </header>
1305
+
1306
+ <main class="workspace-main">
1307
+ <!-- State Alerts (Connecting / Queuing states) -->
1308
+ <div id="status-box" class="status-alert">
1309
+ <div class="alert-spinner"></div>
1310
+ <span id="status-text">Connecting to DramaBox API...</span>
1311
+ </div>
1312
+
1313
+ <!-- Script Editor Card -->
1314
+ <div class="editor-card">
1315
+ <div class="editor-header">
1316
+ <span class="editor-title">Script Prompt</span>
1317
+ <span class="editor-desc">Double quotes for dialogue, standard style tags for pacing</span>
1318
+ </div>
1319
+
1320
+ <textarea
1321
+ id="scene-prompt"
1322
+ class="textarea-custom"
1323
+ placeholder='A shadowy villain speaks with cold menace, "You have entered my domain, mortal." He chuckles darkly, "Such arrogance will be your undoing."'
1324
+ ></textarea>
1325
+
1326
+ <div class="editor-footer">
1327
+ <span class="char-counter" id="char-counter-text">Expressive voice generator powered by LTX-2.3</span>
1328
+ <button id="btn-generate" class="btn-generate">
1329
+ <span>⚡</span> Generate speech
1330
+ </button>
1331
+ </div>
1332
+ </div>
1333
+
1334
+ <!-- Custom Audio Player Card -->
1335
+ <div class="output-wrapper">
1336
+ <audio id="audio-element" style="display:none;"></audio>
1337
+
1338
+ <!-- Empty Placeholder -->
1339
+ <div id="output-empty-state" class="empty-placeholder">
1340
+ <span class="empty-icon">🎛️</span>
1341
+ <span class="empty-text">Formulate a script above to voice speech</span>
1342
+ </div>
1343
+
1344
+ <!-- Custom Player -->
1345
+ <div id="custom-player" class="audio-player" style="display: none;">
1346
+ <div class="visualizer-box">
1347
+ <div class="visualizer-wave">
1348
+ <span class="wave-bar"></span>
1349
+ <span class="wave-bar"></span>
1350
+ <span class="wave-bar"></span>
1351
+ <span class="wave-bar"></span>
1352
+ <span class="wave-bar"></span>
1353
+ <span class="wave-bar"></span>
1354
+ <span class="wave-bar"></span>
1355
+ <span class="wave-bar"></span>
1356
+ <span class="wave-bar"></span>
1357
+ <span class="wave-bar"></span>
1358
+ <span class="wave-bar"></span>
1359
+ <span class="wave-bar"></span>
1360
+ <span class="wave-bar"></span>
1361
+ <span class="wave-bar"></span>
1362
+ <span class="wave-bar"></span>
1363
+ <span class="wave-bar"></span>
1364
+ <span class="wave-bar"></span>
1365
+ <span class="wave-bar"></span>
1366
+ <span class="wave-bar"></span>
1367
+ <span class="wave-bar"></span>
1368
+ <span class="wave-bar"></span>
1369
+ <span class="wave-bar"></span>
1370
+ <span class="wave-bar"></span>
1371
+ <span class="wave-bar"></span>
1372
+ <span class="wave-bar"></span>
1373
+ <span class="wave-bar"></span>
1374
+ <span class="wave-bar"></span>
1375
+ <span class="wave-bar"></span>
1376
+ <span class="wave-bar"></span>
1377
+ <span class="wave-bar"></span>
1378
+ </div>
1379
+ </div>
1380
+
1381
+ <div class="player-row">
1382
+ <button type="button" id="player-play" class="btn-play">▶</button>
1383
+ <div class="progress-box">
1384
+ <span id="player-current-time" class="time-lbl">00:00</span>
1385
+ <input type="range" id="player-progress" min="0" max="100" value="0">
1386
+ <span id="player-duration" class="time-lbl">00:00</span>
1387
+ </div>
1388
+ </div>
1389
+
1390
+ <div class="deck-footer">
1391
+ <!-- Volume -->
1392
+ <div class="vol-slider">
1393
+ <span class="vol-icon">🔊</span>
1394
+ <input type="range" id="player-volume" min="0" max="1" step="0.1" value="0.8">
1395
+ </div>
1396
+
1397
+ <!-- Speed control indicators -->
1398
+ <div class="speed-deck">
1399
+ <button type="button" class="btn-speed" data-speed="0.8">0.8x</button>
1400
+ <button type="button" class="btn-speed active" data-speed="1.0">1.0x</button>
1401
+ <button type="button" class="btn-speed" data-speed="1.2">1.2x</button>
1402
+ <button type="button" class="btn-speed" data-speed="1.5">1.5x</button>
1403
+ </div>
1404
+
1405
+ <!-- Downloader WAV -->
1406
+ <a id="player-download" class="btn-download-wav" href="#" download="dramabox_audio.wav">
1407
+ <span>📥</span> Download
1408
+ </a>
1409
+ </div>
1410
+ </div>
1411
+ </div>
1412
+
1413
+ <div class="ltx-banner">
1414
+ 🏗️&nbsp; Built on <a href="https://github.com/Lightricks/LTX-2" target="_blank">LTX-2</a> by
1415
+ <a href="https://huggingface.co/Lightricks" target="_blank">Lightricks</a>.
1416
+ <strong>DramaBox</strong> is <strong>Resemble AI's</strong> expressive TTS,
1417
+ trained on top of the LTX-2.3 audio branch under the LTX-2 Community License.
1418
+ Huge thanks to the Lightricks team for open-sourcing the base.
1419
+ </div>
1420
+
1421
+ <footer>
1422
+ &copy; 2026 DramaBox. Audio output watermarked with Resemble Perth.
1423
+ </footer>
1424
+ </main>
1425
+ </div>
1426
+
1427
+ <!-- Right Settings Sidebar Column -->
1428
+ <aside id="app-sidebar" class="settings-sidebar">
1429
+ <button id="btn-close-sidebar" class="settings-sidebar-close" title="Close Panel">✕</button>
1430
 
1431
+ <div class="settings-tabs">
1432
+ <button class="tab-btn active" id="tab-settings-btn">Settings</button>
1433
+ <button class="tab-btn" id="tab-demos-btn">Demos</button>
1434
+ </div>
1435
+
1436
+ <!-- Settings Tab Contents -->
1437
+ <div class="settings-pane" id="pane-settings">
1438
+ <!-- Voice Reference Optional Card -->
1439
+ <div class="settings-card">
1440
+ <span class="card-label">Voice Reference (Optional)</span>
1441
  <div id="dropzone" class="upload-zone">
1442
  <span class="upload-icon">📤</span>
1443
  <div class="upload-text">
 
1490
  </div>
1491
  </div>
1492
 
1493
+ <!-- Premium Model Card -->
1494
+ <div class="model-banner-card">
1495
+ <div class="model-banner-title">Model Choices</div>
1496
+ <div class="model-banner-body">
1497
+ <div class="model-banner-name">✨ LTX-2.3 Expressive TTS v3</div>
1498
+ <div class="model-banner-desc">Equipped with Resemble Perth watermarking & voice cloning.</div>
1499
+ </div>
1500
+ </div>
1501
+
1502
+ <!-- Sliders Deck Parameters -->
1503
+ <div class="settings-card flex-gap">
1504
  <!-- CFG Scale -->
1505
  <div class="slider-group">
1506
  <div class="slider-meta">
1507
+ <span>Stability / CFG Scale</span>
1508
  <span class="slider-value" id="val-cfg">2.5</span>
1509
  </div>
1510
  <input type="range" id="cfg" min="1.0" max="10.0" step="0.5" value="2.5">
1511
+ <div class="slider-hints">
1512
+ <span>More creative</span>
1513
+ <span>More stable</span>
1514
+ </div>
1515
  </div>
1516
 
1517
  <!-- STG Scale -->
1518
  <div class="slider-group">
1519
  <div class="slider-meta">
1520
+ <span>Similarity / STG Scale</span>
1521
  <span class="slider-value" id="val-stg">1.5</span>
1522
  </div>
1523
  <input type="range" id="stg" min="0.0" max="5.0" step="0.5" value="1.5">
1524
+ <div class="slider-hints">
1525
+ <span>More expressive</span>
1526
+ <span>High fidelity</span>
1527
+ </div>
1528
  </div>
1529
 
1530
  <!-- Duration Scale Factor -->
1531
  <div class="slider-group">
1532
  <div class="slider-meta">
1533
+ <span>Pacing / Breathing Factor</span>
1534
  <span class="slider-value" id="val-dur">1.10</span>
1535
  </div>
1536
  <input type="range" id="dur" min="0.8" max="2.0" step="0.05" value="1.1">
1537
+ <div class="slider-hints">
1538
+ <span>Slower</span>
1539
+ <span>Faster</span>
1540
+ </div>
1541
  </div>
1542
 
1543
  <!-- Target Generation Time -->
 
1550
  </div>
1551
 
1552
  <!-- Reference Window -->
1553
+ <div class="slider-group" style="display: none;">
1554
  <div class="slider-meta">
1555
  <span>Reference Window (s)</span>
1556
  <span class="slider-value" id="val-refdur">10.0</span>
 
1559
  </div>
1560
 
1561
  <!-- Seed Controls -->
1562
+ <div class="form-group-custom">
1563
+ <span class="custom-label">Seed Value</span>
1564
  <div class="seed-row">
1565
  <input type="number" id="seed" class="input-seed" value="42">
1566
  <button type="button" id="btn-random-seed" class="btn-seed-random" title="Randomize Seed">🎲</button>
 
1568
  </div>
1569
  </div>
1570
 
 
 
 
 
 
 
 
 
1571
  <!-- Accordion Guide -->
1572
+ <div class="settings-card flex-gap">
1573
  <div class="guide-header" id="guide-toggle">
1574
  <span>📖 Prompt Guide</span>
1575
  <span class="accordion-icon" id="guide-arrow">▼</span>
 
1597
  </div>
1598
  </div>
1599
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1600
 
1601
+ <!-- Demos Tab Contents -->
1602
+ <div class="settings-pane" id="pane-demos" style="display: none;">
1603
+ <div class="settings-card">
1604
+ <span class="card-label">Quick Demos</span>
1605
+ <div class="demo-capsules" id="examples-container">
1606
+ <!-- Loaded dynamically -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1607
  </div>
 
 
 
 
 
 
 
 
1608
  </div>
 
 
 
 
1609
  </div>
1610
+ </aside>
1611
 
1612
  </div>
1613
 
 
1744
 
1745
  const inputSeed = document.getElementById("seed");
1746
  const btnRandomSeed = document.getElementById("btn-random-seed");
1747
+ // --- Settings & Demos Tab Toggles ---
1748
+ const tabSettingsBtn = document.getElementById("tab-settings-btn");
1749
+ const tabDemosBtn = document.getElementById("tab-demos-btn");
1750
+ const paneSettings = document.getElementById("pane-settings");
1751
+ const paneDemos = document.getElementById("pane-demos");
1752
+
1753
+ if (tabSettingsBtn && tabDemosBtn && paneSettings && paneDemos) {
1754
+ tabSettingsBtn.addEventListener("click", () => {
1755
+ tabSettingsBtn.classList.add("active");
1756
+ tabDemosBtn.classList.remove("active");
1757
+ paneSettings.style.display = "flex";
1758
+ paneDemos.style.display = "none";
1759
+ });
1760
+
1761
+ tabDemosBtn.addEventListener("click", () => {
1762
+ tabDemosBtn.classList.add("active");
1763
+ tabSettingsBtn.classList.remove("active");
1764
+ paneDemos.style.display = "flex";
1765
+ paneSettings.style.display = "none";
1766
+ });
1767
+ }
1768
+
1769
 
1770
  // Player elements
1771
  const audioElement = document.getElementById("audio-element");
 
1991
  const isSelected = currentPercent >= startPercent && currentPercent <= endPercent;
1992
 
1993
  if (isSelected) {
1994
+ ctx.fillStyle = "#2cbd94"; // var(--accent-resemble)
1995
  } else {
1996
  ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
1997
  }