kanara/onnx-voice-changer
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refactor frontend to Lime Light theme

Browse Source
This commit is contained in:
akukanara
2026-05-30 21:35:38 +07:00
Unverified
parent 68020c5990
commit 19e5138525
3 changed files with 39 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app.js
+4 -4
View File
@@ -121,9 +121,9 @@ function buildTimeSyncedOutputBuf() {
function startVisualizerLoop() {
if (rafHandle) return;
function frame() {
drawWaveform(inputDisplayBuf, inputCanvas, '#6366f1');
drawWaveform(inputDisplayBuf, inputCanvas, '#a3e635');
// Time-synced output: scrub through queued chunks using audioContext clock
drawWaveform(buildTimeSyncedOutputBuf(), outputCanvas, '#a855f7');
drawWaveform(buildTimeSyncedOutputBuf(), outputCanvas, '#22d3ee');
rafHandle = requestAnimationFrame(frame);
}
rafHandle = requestAnimationFrame(frame);
@@ -698,7 +698,7 @@ function drawWaveform(dataArray, canvas, strokeColor) {
const height = canvas.height;
// Dark transparent redraw for trace/motion-blur effect
ctx.fillStyle = 'rgba(11, 12, 19, 0.4)';
ctx.fillStyle = 'rgba(5, 7, 4, 0.4)';
ctx.fillRect(0, 0, width, height);
ctx.lineWidth = 2 * window.devicePixelRatio;
@@ -736,7 +736,7 @@ function drawWaveform(dataArray, canvas, strokeColor) {
function clearCanvas(canvas) {
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#0b0c13';
ctx.fillStyle = '#050704';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
frontend/index.html
+1 -1
View File
@@ -87,7 +87,7 @@
</select>
</div>
<div id="hardware_devices_panel" class="control-group" style="display: none; border: 1px solid rgba(99, 102, 241, 0.2); padding: 0.75rem; border-radius: 8px; background: rgba(11, 12, 19, 0.5); box-shadow: 0 0 10px rgba(99, 102, 241, 0.05);">
<div id="hardware_devices_panel" class="control-group" style="display: none; border: 1px solid rgba(163, 230, 53, 0.2); padding: 0.75rem; border-radius: 8px; background: rgba(10, 13, 8, 0.5); box-shadow: 0 0 10px rgba(163, 230, 53, 0.05);">
<div style="margin-bottom: 0.75rem;">
<label for="server_input_select" style="font-size: 0.75rem; margin-bottom: 0.25rem; color: var(--primary); text-transform: uppercase; font-weight: 600;">🎙️ Input Mikrofon Server</label>
<select id="server_input_select" class="custom-select" style="font-size: 0.8rem; padding: 0.4rem;"></select>
frontend/styles.css
+34 -33
View File
@@ -1,19 +1,19 @@
/* ==========================================================================
CSS GLOBAL TOKENS & RESET
CSS GLOBAL TOKENS & RESET (LIME LIGHT THEME)
========================================================================== */
:root {
--bg-dark: #07080e;
--bg-card: rgba(13, 17, 30, 0.7);
--border-color: rgba(99, 102, 241, 0.18);
--bg-dark: #0a0d08;
--bg-card: rgba(15, 20, 13, 0.7);
--border-color: rgba(163, 230, 53, 0.18);
--primary: #6366f1;
--primary-glow: rgba(99, 102, 241, 0.4);
--accent: #a855f7;
--accent-glow: rgba(168, 85, 247, 0.45);
--primary: #a3e635;
--primary-glow: rgba(163, 230, 53, 0.4);
--accent: #22d3ee;
--accent-glow: rgba(34, 211, 238, 0.45);
--emerald: #10b981;
--rose: #ef4444;
--rose: #f43f5e;
--text-main: #e2e8f0;
--text-main: #f8fafc;
--text-muted: #94a3b8;
--font-header: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -48,8 +48,8 @@ body {
bottom: 0;
z-index: -1;
background:
radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.09) 0%, transparent 45%);
radial-gradient(circle at 10% 20%, rgba(163, 230, 53, 0.08) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(34, 211, 238, 0.09) 0%, transparent 45%);
pointer-events: none;
}
@@ -75,8 +75,8 @@ body {
}
.glassmorphism:hover {
border-color: rgba(99, 102, 241, 0.3);
box-shadow: 0 10px 40px 0 rgba(99, 102, 241, 0.1);
border-color: rgba(163, 230, 53, 0.3);
box-shadow: 0 10px 40px 0 rgba(163, 230, 53, 0.1);
}
.card {
@@ -118,7 +118,7 @@ body {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 40px rgba(99, 102, 241, 0.2);
text-shadow: 0 0 40px rgba(163, 230, 53, 0.2);
}
.pulse-indicator {
@@ -189,7 +189,7 @@ label {
.custom-select {
width: 100%;
padding: 0.8rem 1rem;
background-color: rgba(20, 24, 45, 0.8);
background-color: rgba(14, 20, 13, 0.8);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-main);
@@ -211,7 +211,7 @@ label {
}
.input-group input {
background-color: rgba(20, 24, 45, 0.8);
background-color: rgba(14, 20, 13, 0.8);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-main);
@@ -251,7 +251,7 @@ label {
width: 100%;
height: 6px;
border-radius: 3px;
background: rgba(99, 102, 241, 0.15);
background: rgba(163, 230, 53, 0.15);
outline: none;
margin: 0.75rem 0;
}
@@ -299,25 +299,25 @@ label {
}
.btn-primary {
background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
color: white;
background: linear-gradient(135deg, var(--primary) 0%, #65a30d 100%);
color: #0c0f0a;
box-shadow: 0 4px 14px 0 var(--primary-glow);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.6);
box-shadow: 0 6px 20px 0 rgba(163, 230, 53, 0.6);
}
.btn-accent {
background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);
color: white;
background: linear-gradient(135deg, var(--accent) 0%, #0891b2 100%);
color: #0c0f0a;
box-shadow: 0 4px 14px 0 var(--accent-glow);
}
.btn-accent:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px 0 rgba(168, 85, 247, 0.65);
box-shadow: 0 6px 20px 0 rgba(34, 211, 238, 0.65);
}
.btn:active:not(:disabled) {
@@ -328,6 +328,7 @@ label {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
color: var(--text-muted);
}
/* ==========================================================================
@@ -387,9 +388,9 @@ label {
}
.status-badge.disconnected {
background-color: rgba(239, 68, 68, 0.15);
background-color: rgba(254, 63, 94, 0.15);
color: var(--rose);
border: 1px solid rgba(239, 68, 68, 0.3);
border: 1px solid rgba(254, 63, 94, 0.3);
}
.status-badge.disconnected::before {
@@ -398,9 +399,9 @@ label {
}
.status-badge.connecting {
background-color: rgba(168, 85, 247, 0.15);
background-color: rgba(34, 211, 238, 0.15);
color: var(--accent);
border: 1px solid rgba(168, 85, 247, 0.3);
border: 1px solid rgba(34, 211, 238, 0.3);
}
.status-badge.connecting::before {
@@ -438,7 +439,7 @@ label {
.tile-label {
display: block;
padding: 0.6rem;
background-color: rgba(20, 24, 45, 0.5);
background-color: rgba(15, 20, 13, 0.5);
border: 1px solid var(--border-color);
border-radius: 8px;
text-align: center;
@@ -449,14 +450,14 @@ label {
}
.radio-tile input:checked + .tile-label {
background-color: rgba(99, 102, 241, 0.12);
background-color: rgba(163, 230, 53, 0.12);
border-color: var(--primary);
color: var(--text-main);
box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
box-shadow: 0 0 10px rgba(163, 230, 53, 0.2);
}
.radio-tile:hover .tile-label {
border-color: rgba(99, 102, 241, 0.4);
border-color: rgba(163, 230, 53, 0.4);
}
/* ==========================================================================
@@ -504,7 +505,7 @@ label {
.waveform-canvas {
width: 100%;
height: 150px;
background-color: #0b0c13;
background-color: #050704;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.03);
}