From c3abe49e992129df1ffd5df96fb69c738f8485b7 Mon Sep 17 00:00:00 2001 From: Tyler Maginnis Date: Sun, 15 Sep 2024 00:38:28 -0400 Subject: [PATCH] Implement light mode toggle --- index.html | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) diff --git a/index.html b/index.html index b57f25e..13ca6f3 100644 --- a/index.html +++ b/index.html @@ -144,6 +144,65 @@ margin-bottom: 10px; color: #66ff66; } + body.light-mode label { color: #3e9c3e; font-weight: bold; } + body.light-mode .visual-section { color: #3e9c3e; font-weight:bold; } + body.light-mode .visual-section h3 { color: #3e9c3e; font-weight:bold; } + body.light-mode { + background-color: #ffffff; + color: #4b0082; /* Dark purple */ + } + body.light-mode h1 { + color: #4b0082; /* Dark purple */ + background-color: #f0f0f0; + border-bottom: 2px solid #4b0082; /* Dark purple */ + } + body.light-mode .controls, + body.light-mode .visual-feedback, + body.light-mode #console { + background-color: #f0f0f0; + border: 1px solid #4b0082; /* Dark purple */ + } + body.light-mode button { + background-color: #dddddd; + color: #4b0082; /* Dark purple */ + border: 1px solid #4b0082; /* Dark purple */ + } + body.light-mode button:hover:not(:disabled) { + background-color: #cccccc; + } + body.light-mode #visualizationCanvas { + background-color: #f0f0f0; + border: 1px solid #4b0082; /* Dark purple */ + } + body.light-mode .log-info { + color: #4b0082; /* Dark purple */ + } + body.light-mode .log-warn { + color: #ffcc00; /* Yellow */ + } + body.light-mode .log-error { + color: #ff0000; /* Red */ + } + body.light-mode .ascii-box { + border: 1px solid #4b0082; /* Dark purple */ + color: #3e9c3e; font-weight:bold; /* green */ + + } + body.light-mode .chord { + color: #ff66ff; font-weight: bold; /* Pink */ + } + body.light-mode .frequency { + color: #5192b3; font-weight:bold; /* blue */ + } + body.light-mode .rhythm { + color: #898939; font-weight:bold; /* Light yellow */ + } + body.light-mode .melody-strategy { + color: #3e9c3e; font-weight:bold; /* green */ + } + body.light-mode .frequency { + color: #4b626d; font-weight:bold; /* blue */ + } @@ -208,6 +267,11 @@

Advanced Organ Composition with Markov Chains

+ +
+ + +
@@ -822,6 +886,74 @@

Strategies

// Start visualization when audio context is initialized document.body.addEventListener('click', startVisualization, { once: true }); + const darkModeToggle = document.getElementById('darkModeToggle'); + + +// Load user preferences +document.addEventListener('DOMContentLoaded', () => { + const darkMode = localStorage.getItem('darkMode') === 'true'; + document.body.classList.toggle('light-mode', !darkMode); + darkModeToggle.checked = darkMode; + updateVisualizerColors(darkMode); + // Load other preferences... +}); + +// Save user preferences +darkModeToggle.addEventListener('change', () => { + const darkMode = darkModeToggle.checked; + document.body.classList.toggle('light-mode', !darkMode); + localStorage.setItem('darkMode', darkMode); + updateVisualizerColors(darkMode); + logToConsole(`Dark Mode ${darkMode ? 'Enabled' : 'Disabled'}`, 'info'); +}); + +// Function to update visualizer colors based on mode +function updateVisualizerColors(darkMode) { + if (darkMode) { + canvasContext.fillStyle = 'rgb(17, 17, 17)'; // Dark background + canvasContext.strokeStyle = 'rgb(0, 255, 0)'; // Green lines + } else { + canvasContext.fillStyle = 'rgb(240, 240, 240)'; // Light background + canvasContext.strokeStyle = 'rgb(75, 0, 130)'; // Dark purple lines + } +} + +// Ensure drawVisualization is called continuously +function drawVisualization() { + if (!analyser) return; + requestAnimationFrame(drawVisualization); + const bufferLength = analyser.frequencyBinCount; + const dataArray = new Uint8Array(bufferLength); + analyser.getByteTimeDomainData(dataArray); + + canvasContext.fillRect(0, 0, canvas.width, canvas.height); + + canvasContext.lineWidth = 2; + canvasContext.beginPath(); + + const sliceWidth = canvas.width * 1.0 / bufferLength; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i] / 128.0; + const y = v * canvas.height / 2; + + if (i === 0) { + canvasContext.moveTo(x, y); + } else { + canvasContext.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasContext.lineTo(canvas.width, canvas.height / 2); + canvasContext.stroke(); +} + +// Start visualization when audio context is initialized +document.body.addEventListener('click', startVisualization, { once: true }); +