Skip to content

Upgrade GUI with premium metallic styling and 3D waveform visuals #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BustaBitBotScript merged 1 commit into from
May 7, 2026
Merged

Upgrade GUI with premium metallic styling and 3D waveform visuals #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 84 additions & 52 deletions web/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,13 @@
}

:root {
--theme-background: #080808;
--theme-accent: #BCB1E7;
--theme-accent-secondary: #9A8FD1;
--theme-background: #06070a;
--theme-accent: #d7ccff;
--theme-accent-secondary: #a89be8;
--steel-1: #eff3fb;
--steel-2: #a8b3c7;
--steel-3: #4d5667;
--steel-4: #1e2430;
--bg-card: rgba(255, 255, 255, 0.05);
--bg-card-hover: rgba(255, 255, 255, 0.08);
--bg-elevated: rgba(255, 255, 255, 0.1);
Expand All @@ -31,6 +35,28 @@ body {
user-select: none;
}


body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 15% 10%, rgba(215, 204, 255, 0.16), transparent 45%),
radial-gradient(circle at 85% 20%, rgba(130, 215, 255, 0.14), transparent 40%),
linear-gradient(165deg, #0e1118 0%, #06070a 45%, #05060a 100%);
z-index: -2;
}

body::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(120deg, rgba(255,255,255,0.01) 0 2px, transparent 2px 11px);
opacity: 0.3;
pointer-events: none;
z-index: -1;
}

::selection {
background: var(--theme-accent);
color: var(--theme-background);
Expand Down Expand Up @@ -167,13 +193,13 @@ body {
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-secondary);
color: #090d15;
cursor: pointer;
}

.tips-toggle input {
width: 14px;
height: 14px;
width: 16px;
height: 16px;
accent-color: var(--theme-accent);
cursor: pointer;
}
Expand Down Expand Up @@ -246,7 +272,7 @@ body {
}

.file-zone p {
color: var(--text-secondary);
color: #090d15;
font-size: 14px;
}

Expand Down Expand Up @@ -326,7 +352,7 @@ body {

.btn-change {
background: var(--bg-card);
color: var(--text-secondary);
color: #090d15;
border: 1px solid var(--border);
padding: 8px 16px;
border-radius: 8px;
Expand All @@ -351,12 +377,12 @@ body {

/* Transport Controls */
.transport-btn {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 8px;
color: var(--text-secondary);
width: 42px;
height: 42px;
background: linear-gradient(160deg, var(--steel-1) 0%, var(--steel-2) 36%, var(--steel-3) 72%, var(--steel-4) 100%);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 11px;
color: #090d15;
cursor: pointer;
display: flex;
align-items: center;
Expand All @@ -366,9 +392,9 @@ body {
}

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

.transport-btn:disabled {
Expand All @@ -388,8 +414,8 @@ body {
}

#playBtn {
background: var(--theme-accent);
color: var(--theme-background);
background: linear-gradient(165deg, #f0e5ff 0%, #d7ccff 45%, #8a74d7 100%);
color: #130d23;
}

#playBtn:hover:not(:disabled) {
Expand Down Expand Up @@ -424,8 +450,8 @@ body {
.seek-bar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
width: 16px;
height: 16px;
background: var(--theme-accent);
border-radius: 50%;
cursor: pointer;
Expand All @@ -434,9 +460,11 @@ body {

.waveform-container {
width: 100%;
height: 80px;
background: rgba(255, 255, 255, 0.03);
border-radius: 6px;
height: 94px;
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%);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.16);
box-shadow: inset 0 2px 7px rgba(255,255,255,0.08), inset 0 -12px 16px rgba(0,0,0,0.45);
overflow: hidden;
cursor: pointer;
}
Expand Down Expand Up @@ -482,7 +510,7 @@ body {
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-secondary);
color: #090d15;
cursor: pointer;
margin-right: 12px;
user-select: none;
Expand Down Expand Up @@ -510,17 +538,19 @@ body {
}

.settings-card {
background: var(--bg-card);
border-radius: 12px;
background: linear-gradient(170deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
border-radius: 14px;
padding: 16px;
border: 1px solid var(--border);
transition: all 0.2s ease;
border: 1px solid rgba(255, 255, 255, 0.16);
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);
transition: all 0.25s ease;
overflow: hidden;
min-height: 120px;
}

.settings-card:hover {
background: var(--bg-card-hover);
transform: translateY(-2px);
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);
}

.settings-card h3 {
Expand Down Expand Up @@ -605,7 +635,7 @@ body {
justify-content: space-between;
padding: 8px 0;
font-size: 12px;
color: var(--text-secondary);
color: #090d15;
cursor: pointer;
border-bottom: 1px solid var(--border-subtle);
transition: color 0.15s;
Expand Down Expand Up @@ -635,10 +665,11 @@ body {
}

.toggle {
width: 38px;
height: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
width: 42px;
height: 22px;
background: linear-gradient(180deg, #adb8cb, #525f74);
border-radius: 12px;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.4);
position: relative;
transition: all 0.2s ease;
flex-shrink: 0;
Expand All @@ -647,22 +678,23 @@ body {
.toggle::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
width: 16px;
height: 16px;
background: var(--text-muted);
border-radius: 50%;
top: 3px;
left: 3px;
background: linear-gradient(180deg, #f5f7fc, #8d97aa);
transition: all 0.2s ease;
}

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

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

/* Slider Rows */
Expand All @@ -672,13 +704,13 @@ body {
gap: 10px;
padding: 8px 0;
font-size: 12px;
color: var(--text-secondary);
color: #090d15;
}

.slider-row input[type="range"] {
flex: 1;
height: 4px;
background: rgba(255, 255, 255, 0.1);
height: 6px;
background: linear-gradient(180deg, #2a3241, #121824);
border-radius: 2px;
-webkit-appearance: none;
outline: none;
Expand All @@ -687,8 +719,8 @@ body {

.slider-row input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
width: 16px;
height: 16px;
background: var(--theme-accent);
border-radius: 50%;
cursor: pointer;
Expand All @@ -710,7 +742,7 @@ body {
justify-content: space-between;
padding: 8px 0;
font-size: 12px;
color: var(--text-secondary);
color: #090d15;
border-bottom: 1px solid var(--border-subtle);
gap: 8px;
}
Expand Down Expand Up @@ -923,7 +955,7 @@ body {
.preset-btn {
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
color: #090d15;
padding: 6px 14px;
border-radius: 6px;
font-size: 11px;
Expand Down Expand Up @@ -973,7 +1005,7 @@ body {
flex: 1;
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
color: #090d15;
padding: 8px 12px;
border-radius: 6px;
font-size: 11px;
Expand Down Expand Up @@ -1055,7 +1087,7 @@ button:active:not(:disabled) {
}

.peak-display span {
color: var(--text-secondary);
color: #090d15;
}

.overload-indicator {
Expand Down Expand Up @@ -1154,7 +1186,7 @@ button:active:not(:disabled) {

.modal-percent {
font-size: 14px;
color: var(--text-secondary);
color: #090d15;
}

#modalCancelBtn {
Expand Down Expand Up @@ -1182,7 +1214,7 @@ button:active:not(:disabled) {
}

.btn-info:hover {
color: var(--text-secondary);
color: #090d15;
background: rgba(255, 255, 255, 0.05);
}

Expand Down Expand Up @@ -1216,7 +1248,7 @@ button:active:not(:disabled) {

.info-panel-content {
font-size: 12px;
color: var(--text-secondary);
color: #090d15;
line-height: 1.5;
}

Expand Down
27 changes: 16 additions & 11 deletions web/ui/waveform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,17 @@ export function initWaveSurfer(audioBuffer, originalBlob, callbacks = {}) {
try {
// Create gradient
const ctx = document.createElement('canvas').getContext('2d');
const waveGradient = ctx.createLinearGradient(0, 0, 0, 80);
waveGradient.addColorStop(0, 'rgba(188, 177, 231, 0.8)');
waveGradient.addColorStop(0.5, 'rgba(154, 143, 209, 0.6)');
waveGradient.addColorStop(1, 'rgba(100, 90, 160, 0.3)');

const progressGradient = ctx.createLinearGradient(0, 0, 0, 80);
progressGradient.addColorStop(0, '#BCB1E7');
progressGradient.addColorStop(0.5, '#9A8FD1');
progressGradient.addColorStop(1, '#7A6FB1');
const waveGradient = ctx.createLinearGradient(0, 0, 0, 94);
waveGradient.addColorStop(0, 'rgba(243, 237, 255, 0.95)');
waveGradient.addColorStop(0.35, 'rgba(188, 177, 231, 0.88)');
waveGradient.addColorStop(0.7, 'rgba(122, 111, 177, 0.7)');
waveGradient.addColorStop(1, 'rgba(64, 74, 106, 0.45)');

const progressGradient = ctx.createLinearGradient(0, 0, 0, 94);
progressGradient.addColorStop(0, '#ffffff');
progressGradient.addColorStop(0.3, '#d8cfff');
progressGradient.addColorStop(0.65, '#9986e8');
progressGradient.addColorStop(1, '#5e4da7');

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