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() { function startVisualizerLoop() {
if (rafHandle) return; if (rafHandle) return;
function frame() { function frame() {
drawWaveform(inputDisplayBuf, inputCanvas, '#6366f1'); drawWaveform(inputDisplayBuf, inputCanvas, '#a3e635');
// Time-synced output: scrub through queued chunks using audioContext clock // Time-synced output: scrub through queued chunks using audioContext clock
drawWaveform(buildTimeSyncedOutputBuf(), outputCanvas, '#a855f7'); drawWaveform(buildTimeSyncedOutputBuf(), outputCanvas, '#22d3ee');
rafHandle = requestAnimationFrame(frame); rafHandle = requestAnimationFrame(frame);
} }
rafHandle = requestAnimationFrame(frame); rafHandle = requestAnimationFrame(frame);
@@ -698,7 +698,7 @@ function drawWaveform(dataArray, canvas, strokeColor) {
const height = canvas.height; const height = canvas.height;
// Dark transparent redraw for trace/motion-blur effect // 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.fillRect(0, 0, width, height);
ctx.lineWidth = 2 * window.devicePixelRatio; ctx.lineWidth = 2 * window.devicePixelRatio;
@@ -736,7 +736,7 @@ function drawWaveform(dataArray, canvas, strokeColor) {
function clearCanvas(canvas) { function clearCanvas(canvas) {
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.fillStyle = '#0b0c13'; ctx.fillStyle = '#050704';
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
} }
frontend/index.html
+1 -1
View File
@@ -87,7 +87,7 @@
</select> </select>
</div> </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;"> <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> <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> <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 { :root {
--bg-dark: #07080e; --bg-dark: #0a0d08;
--bg-card: rgba(13, 17, 30, 0.7); --bg-card: rgba(15, 20, 13, 0.7);
--border-color: rgba(99, 102, 241, 0.18); --border-color: rgba(163, 230, 53, 0.18);
--primary: #6366f1; --primary: #a3e635;
--primary-glow: rgba(99, 102, 241, 0.4); --primary-glow: rgba(163, 230, 53, 0.4);
--accent: #a855f7; --accent: #22d3ee;
--accent-glow: rgba(168, 85, 247, 0.45); --accent-glow: rgba(34, 211, 238, 0.45);
--emerald: #10b981; --emerald: #10b981;
--rose: #ef4444; --rose: #f43f5e;
--text-main: #e2e8f0; --text-main: #f8fafc;
--text-muted: #94a3b8; --text-muted: #94a3b8;
--font-header: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-header: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -48,8 +48,8 @@ body {
bottom: 0; bottom: 0;
z-index: -1; z-index: -1;
background: background:
radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 40%), radial-gradient(circle at 10% 20%, rgba(163, 230, 53, 0.08) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.09) 0%, transparent 45%); radial-gradient(circle at 90% 80%, rgba(34, 211, 238, 0.09) 0%, transparent 45%);
pointer-events: none; pointer-events: none;
} }
@@ -75,8 +75,8 @@ body {
} }
.glassmorphism:hover { .glassmorphism:hover {
border-color: rgba(99, 102, 241, 0.3); border-color: rgba(163, 230, 53, 0.3);
box-shadow: 0 10px 40px 0 rgba(99, 102, 241, 0.1); box-shadow: 0 10px 40px 0 rgba(163, 230, 53, 0.1);
} }
.card { .card {
@@ -118,7 +118,7 @@ body {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -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 { .pulse-indicator {
@@ -189,7 +189,7 @@ label {
.custom-select { .custom-select {
width: 100%; width: 100%;
padding: 0.8rem 1rem; 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: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
color: var(--text-main); color: var(--text-main);
@@ -211,7 +211,7 @@ label {
} }
.input-group input { .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: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
color: var(--text-main); color: var(--text-main);
@@ -251,7 +251,7 @@ label {
width: 100%; width: 100%;
height: 6px; height: 6px;
border-radius: 3px; border-radius: 3px;
background: rgba(99, 102, 241, 0.15); background: rgba(163, 230, 53, 0.15);
outline: none; outline: none;
margin: 0.75rem 0; margin: 0.75rem 0;
} }
@@ -299,25 +299,25 @@ label {
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%); background: linear-gradient(135deg, var(--primary) 0%, #65a30d 100%);
color: white; color: #0c0f0a;
box-shadow: 0 4px 14px 0 var(--primary-glow); box-shadow: 0 4px 14px 0 var(--primary-glow);
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
transform: translateY(-2px); 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 { .btn-accent {
background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%); background: linear-gradient(135deg, var(--accent) 0%, #0891b2 100%);
color: white; color: #0c0f0a;
box-shadow: 0 4px 14px 0 var(--accent-glow); box-shadow: 0 4px 14px 0 var(--accent-glow);
} }
.btn-accent:hover:not(:disabled) { .btn-accent:hover:not(:disabled) {
transform: translateY(-2px); 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) { .btn:active:not(:disabled) {
@@ -328,6 +328,7 @@ label {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
box-shadow: none; box-shadow: none;
color: var(--text-muted);
} }
/* ========================================================================== /* ==========================================================================
@@ -387,9 +388,9 @@ label {
} }
.status-badge.disconnected { .status-badge.disconnected {
background-color: rgba(239, 68, 68, 0.15); background-color: rgba(254, 63, 94, 0.15);
color: var(--rose); 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 { .status-badge.disconnected::before {
@@ -398,9 +399,9 @@ label {
} }
.status-badge.connecting { .status-badge.connecting {
background-color: rgba(168, 85, 247, 0.15); background-color: rgba(34, 211, 238, 0.15);
color: var(--accent); 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 { .status-badge.connecting::before {
@@ -438,7 +439,7 @@ label {
.tile-label { .tile-label {
display: block; display: block;
padding: 0.6rem; 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: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
@@ -449,14 +450,14 @@ label {
} }
.radio-tile input:checked + .tile-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); border-color: var(--primary);
color: var(--text-main); 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 { .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 { .waveform-canvas {
width: 100%; width: 100%;
height: 150px; height: 150px;
background-color: #0b0c13; background-color: #050704;
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.03);
} }