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 });
+