Skip to content

Commit a175368

Browse files
BustaBitBotScriptBustaBitBotScript
authored
Merge pull request #1 from BustaBitBotScript/codex/upgrade-gui-with-3d-waveforms-and-metallic-look
Upgrade GUI with premium metallic styling and 3D waveform visuals
2 parents a71d08b + 968f664 commit a175368

2 files changed

Lines changed: 100 additions & 63 deletions

File tree

‎web/styles.css‎

Lines changed: 84 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,13 @@
55
}
66

77
:root {
8-
--theme-background: #080808;
9-
--theme-accent: #BCB1E7;
10-
--theme-accent-secondary: #9A8FD1;
8+
--theme-background: #06070a;
9+
--theme-accent: #d7ccff;
10+
--theme-accent-secondary: #a89be8;
11+
--steel-1: #eff3fb;
12+
--steel-2: #a8b3c7;
13+
--steel-3: #4d5667;
14+
--steel-4: #1e2430;
1115
--bg-card: rgba(255, 255, 255, 0.05);
1216
--bg-card-hover: rgba(255, 255, 255, 0.08);
1317
--bg-elevated: rgba(255, 255, 255, 0.1);
@@ -31,6 +35,28 @@ body {
3135
user-select: none;
3236
}
3337

38+
39+
body::before {
40+
content: '';
41+
position: fixed;
42+
inset: 0;
43+
background:
44+
radial-gradient(circle at 15% 10%, rgba(215, 204, 255, 0.16), transparent 45%),
45+
radial-gradient(circle at 85% 20%, rgba(130, 215, 255, 0.14), transparent 40%),
46+
linear-gradient(165deg, #0e1118 0%, #06070a 45%, #05060a 100%);
47+
z-index: -2;
48+
}
49+
50+
body::after {
51+
content: '';
52+
position: fixed;
53+
inset: 0;
54+
background: repeating-linear-gradient(120deg, rgba(255,255,255,0.01) 0 2px, transparent 2px 11px);
55+
opacity: 0.3;
56+
pointer-events: none;
57+
z-index: -1;
58+
}
59+
3460
::selection {
3561
background: var(--theme-accent);
3662
color: var(--theme-background);
@@ -167,13 +193,13 @@ body {
167193
align-items: center;
168194
gap: 8px;
169195
font-size: 12px;
170-
color: var(--text-secondary);
196+
color: #090d15;
171197
cursor: pointer;
172198
}
173199

174200
.tips-toggle input {
175-
width: 14px;
176-
height: 14px;
201+
width: 16px;
202+
height: 16px;
177203
accent-color: var(--theme-accent);
178204
cursor: pointer;
179205
}
@@ -246,7 +272,7 @@ body {
246272
}
247273

248274
.file-zone p {
249-
color: var(--text-secondary);
275+
color: #090d15;
250276
font-size: 14px;
251277
}
252278

@@ -326,7 +352,7 @@ body {
326352

327353
.btn-change {
328354
background: var(--bg-card);
329-
color: var(--text-secondary);
355+
color: #090d15;
330356
border: 1px solid var(--border);
331357
padding: 8px 16px;
332358
border-radius: 8px;
@@ -351,12 +377,12 @@ body {
351377

352378
/* Transport Controls */
353379
.transport-btn {
354-
width: 40px;
355-
height: 40px;
356-
background: rgba(255, 255, 255, 0.1);
357-
border: none;
358-
border-radius: 8px;
359-
color: var(--text-secondary);
380+
width: 42px;
381+
height: 42px;
382+
background: linear-gradient(160deg, var(--steel-1) 0%, var(--steel-2) 36%, var(--steel-3) 72%, var(--steel-4) 100%);
383+
border: 1px solid rgba(255,255,255,0.22);
384+
border-radius: 11px;
385+
color: #090d15;
360386
cursor: pointer;
361387
display: flex;
362388
align-items: center;
@@ -366,9 +392,9 @@ body {
366392
}
367393

368394
.transport-btn:hover:not(:disabled) {
369-
background: rgba(255, 255, 255, 0.15);
370-
color: var(--text-primary);
371-
transform: scale(1.05);
395+
filter: brightness(1.08);
396+
transform: translateY(-1px) scale(1.04);
397+
box-shadow: 0 8px 16px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.55);
372398
}
373399

374400
.transport-btn:disabled {
@@ -388,8 +414,8 @@ body {
388414
}
389415

390416
#playBtn {
391-
background: var(--theme-accent);
392-
color: var(--theme-background);
417+
background: linear-gradient(165deg, #f0e5ff 0%, #d7ccff 45%, #8a74d7 100%);
418+
color: #130d23;
393419
}
394420

395421
#playBtn:hover:not(:disabled) {
@@ -424,8 +450,8 @@ body {
424450
.seek-bar::-webkit-slider-thumb {
425451
-webkit-appearance: none;
426452
appearance: none;
427-
width: 14px;
428-
height: 14px;
453+
width: 16px;
454+
height: 16px;
429455
background: var(--theme-accent);
430456
border-radius: 50%;
431457
cursor: pointer;
@@ -434,9 +460,11 @@ body {
434460

435461
.waveform-container {
436462
width: 100%;
437-
height: 80px;
438-
background: rgba(255, 255, 255, 0.03);
439-
border-radius: 6px;
463+
height: 94px;
464+
background: radial-gradient(circle at 50% -40%, rgba(255,255,255,0.25), rgba(255,255,255,0.02) 45%), linear-gradient(180deg, #141923 0%, #0b1018 100%);
465+
border-radius: 10px;
466+
border: 1px solid rgba(255,255,255,0.16);
467+
box-shadow: inset 0 2px 7px rgba(255,255,255,0.08), inset 0 -12px 16px rgba(0,0,0,0.45);
440468
overflow: hidden;
441469
cursor: pointer;
442470
}
@@ -482,7 +510,7 @@ body {
482510
align-items: center;
483511
gap: 6px;
484512
font-size: 11px;
485-
color: var(--text-secondary);
513+
color: #090d15;
486514
cursor: pointer;
487515
margin-right: 12px;
488516
user-select: none;
@@ -510,17 +538,19 @@ body {
510538
}
511539

512540
.settings-card {
513-
background: var(--bg-card);
514-
border-radius: 12px;
541+
background: linear-gradient(170deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
542+
border-radius: 14px;
515543
padding: 16px;
516-
border: 1px solid var(--border);
517-
transition: all 0.2s ease;
544+
border: 1px solid rgba(255, 255, 255, 0.16);
545+
box-shadow: inset 0 1px 1px rgba(255,255,255,0.25), inset 0 -10px 24px rgba(0,0,0,0.3), 0 10px 26px rgba(0,0,0,0.35);
546+
transition: all 0.25s ease;
518547
overflow: hidden;
519548
min-height: 120px;
520549
}
521550

522551
.settings-card:hover {
523-
background: var(--bg-card-hover);
552+
transform: translateY(-2px);
553+
box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -10px 24px rgba(0,0,0,0.45), 0 18px 30px rgba(0,0,0,0.45);
524554
}
525555

526556
.settings-card h3 {
@@ -605,7 +635,7 @@ body {
605635
justify-content: space-between;
606636
padding: 8px 0;
607637
font-size: 12px;
608-
color: var(--text-secondary);
638+
color: #090d15;
609639
cursor: pointer;
610640
border-bottom: 1px solid var(--border-subtle);
611641
transition: color 0.15s;
@@ -635,10 +665,11 @@ body {
635665
}
636666

637667
.toggle {
638-
width: 38px;
639-
height: 20px;
640-
background: rgba(255, 255, 255, 0.1);
641-
border-radius: 10px;
668+
width: 42px;
669+
height: 22px;
670+
background: linear-gradient(180deg, #adb8cb, #525f74);
671+
border-radius: 12px;
672+
box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.4);
642673
position: relative;
643674
transition: all 0.2s ease;
644675
flex-shrink: 0;
@@ -647,22 +678,23 @@ body {
647678
.toggle::after {
648679
content: '';
649680
position: absolute;
650-
width: 14px;
651-
height: 14px;
681+
width: 16px;
682+
height: 16px;
652683
background: var(--text-muted);
653684
border-radius: 50%;
654685
top: 3px;
655686
left: 3px;
687+
background: linear-gradient(180deg, #f5f7fc, #8d97aa);
656688
transition: all 0.2s ease;
657689
}
658690

659691
.toggle-row input:checked+.toggle {
660-
background: var(--theme-accent);
692+
background: linear-gradient(180deg, #f1ebff, #9a86eb);
661693
}
662694

663695
.toggle-row input:checked+.toggle::after {
664-
left: 21px;
665-
background: var(--theme-background);
696+
left: 23px;
697+
background: linear-gradient(180deg, #ffffff, #c9cfdb);
666698
}
667699

668700
/* Slider Rows */
@@ -672,13 +704,13 @@ body {
672704
gap: 10px;
673705
padding: 8px 0;
674706
font-size: 12px;
675-
color: var(--text-secondary);
707+
color: #090d15;
676708
}
677709

678710
.slider-row input[type="range"] {
679711
flex: 1;
680-
height: 4px;
681-
background: rgba(255, 255, 255, 0.1);
712+
height: 6px;
713+
background: linear-gradient(180deg, #2a3241, #121824);
682714
border-radius: 2px;
683715
-webkit-appearance: none;
684716
outline: none;
@@ -687,8 +719,8 @@ body {
687719

688720
.slider-row input[type="range"]::-webkit-slider-thumb {
689721
-webkit-appearance: none;
690-
width: 14px;
691-
height: 14px;
722+
width: 16px;
723+
height: 16px;
692724
background: var(--theme-accent);
693725
border-radius: 50%;
694726
cursor: pointer;
@@ -710,7 +742,7 @@ body {
710742
justify-content: space-between;
711743
padding: 8px 0;
712744
font-size: 12px;
713-
color: var(--text-secondary);
745+
color: #090d15;
714746
border-bottom: 1px solid var(--border-subtle);
715747
gap: 8px;
716748
}
@@ -923,7 +955,7 @@ body {
923955
.preset-btn {
924956
background: var(--bg-elevated);
925957
border: 1px solid var(--border);
926-
color: var(--text-secondary);
958+
color: #090d15;
927959
padding: 6px 14px;
928960
border-radius: 6px;
929961
font-size: 11px;
@@ -973,7 +1005,7 @@ body {
9731005
flex: 1;
9741006
background: var(--bg-elevated);
9751007
border: 1px solid var(--border);
976-
color: var(--text-secondary);
1008+
color: #090d15;
9771009
padding: 8px 12px;
9781010
border-radius: 6px;
9791011
font-size: 11px;
@@ -1055,7 +1087,7 @@ button:active:not(:disabled) {
10551087
}
10561088

10571089
.peak-display span {
1058-
color: var(--text-secondary);
1090+
color: #090d15;
10591091
}
10601092

10611093
.overload-indicator {
@@ -1154,7 +1186,7 @@ button:active:not(:disabled) {
11541186

11551187
.modal-percent {
11561188
font-size: 14px;
1157-
color: var(--text-secondary);
1189+
color: #090d15;
11581190
}
11591191

11601192
#modalCancelBtn {
@@ -1182,7 +1214,7 @@ button:active:not(:disabled) {
11821214
}
11831215

11841216
.btn-info:hover {
1185-
color: var(--text-secondary);
1217+
color: #090d15;
11861218
background: rgba(255, 255, 255, 0.05);
11871219
}
11881220

@@ -1216,7 +1248,7 @@ button:active:not(:disabled) {
12161248

12171249
.info-panel-content {
12181250
font-size: 12px;
1219-
color: var(--text-secondary);
1251+
color: #090d15;
12201252
line-height: 1.5;
12211253
}
12221254

‎web/ui/waveform.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,17 @@ export function initWaveSurfer(audioBuffer, originalBlob, callbacks = {}) {
4747
try {
4848
// Create gradient
4949
const ctx = document.createElement('canvas').getContext('2d');
50-
const waveGradient = ctx.createLinearGradient(0, 0, 0, 80);
51-
waveGradient.addColorStop(0, 'rgba(188, 177, 231, 0.8)');
52-
waveGradient.addColorStop(0.5, 'rgba(154, 143, 209, 0.6)');
53-
waveGradient.addColorStop(1, 'rgba(100, 90, 160, 0.3)');
54-
55-
const progressGradient = ctx.createLinearGradient(0, 0, 0, 80);
56-
progressGradient.addColorStop(0, '#BCB1E7');
57-
progressGradient.addColorStop(0.5, '#9A8FD1');
58-
progressGradient.addColorStop(1, '#7A6FB1');
50+
const waveGradient = ctx.createLinearGradient(0, 0, 0, 94);
51+
waveGradient.addColorStop(0, 'rgba(243, 237, 255, 0.95)');
52+
waveGradient.addColorStop(0.35, 'rgba(188, 177, 231, 0.88)');
53+
waveGradient.addColorStop(0.7, 'rgba(122, 111, 177, 0.7)');
54+
waveGradient.addColorStop(1, 'rgba(64, 74, 106, 0.45)');
55+
56+
const progressGradient = ctx.createLinearGradient(0, 0, 0, 94);
57+
progressGradient.addColorStop(0, '#ffffff');
58+
progressGradient.addColorStop(0.3, '#d8cfff');
59+
progressGradient.addColorStop(0.65, '#9986e8');
60+
progressGradient.addColorStop(1, '#5e4da7');
5961

6062
// Create blob URL for WaveSurfer (tracked for cleanup)
6163
// Store as both current and original so we can switch back on FX bypass
@@ -66,9 +68,12 @@ export function initWaveSurfer(audioBuffer, originalBlob, callbacks = {}) {
6668
container: '#waveform',
6769
waveColor: waveGradient,
6870
progressColor: progressGradient,
69-
cursorColor: '#ffffff',
71+
cursorColor: 'rgba(255,255,255,0.95)',
7072
cursorWidth: 2,
71-
height: 80,
73+
height: 94,
74+
barWidth: 3,
75+
barGap: 1,
76+
barRadius: 3,
7277
// Avoid misleading A/B comparisons: keep waveform amplitude true to the actual audio level.
7378
normalize: false,
7479
interact: true,

0 commit comments

Comments
 (0)