diff --git a/index.php b/index.php index 4bb5a45..0f60dce 100644 --- a/index.php +++ b/index.php @@ -785,6 +785,15 @@ $liveIndex = get_live_index($schedule); let source; let dataArray; let animationId; + let waveColor = "rgba(56, 189, 248, 0.8)"; // Default primary + let waveGlow = "rgba(56, 189, 248, 0.4)"; + + const programColors = { + "Amanecer Techno": { main: "rgba(0, 230, 118, 0.8)", glow: "rgba(0, 230, 118, 0.4)" }, + "Sesiones de House Vocal": { main: "rgba(244, 114, 182, 0.8)", glow: "rgba(244, 114, 182, 0.4)" }, + "Invitado Especial Lili": { main: "rgba(251, 191, 36, 0.8)", glow: "rgba(251, 191, 36, 0.4)" }, + "Vibras de la Noche": { main: "rgba(129, 140, 248, 0.8)", glow: "rgba(129, 140, 248, 0.4)" } + }; function initAudio() { if (!audioCtx) { @@ -804,8 +813,13 @@ $liveIndex = get_live_index($schedule); analyser.getByteTimeDomainData(dataArray); canvasCtx.clearRect(0, 0, canvas.width, canvas.height); - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = "rgba(56, 189, 248, 0.5)"; + + // Subtle glow effect + canvasCtx.shadowBlur = 15; + canvasCtx.shadowColor = waveGlow; + + canvasCtx.lineWidth = 3; + canvasCtx.strokeStyle = waveColor; canvasCtx.beginPath(); const sliceWidth = canvas.width * 1.0 / dataArray.length; @@ -823,6 +837,9 @@ $liveIndex = get_live_index($schedule); canvasCtx.lineTo(canvas.width, canvas.height / 2); canvasCtx.stroke(); + + // Reset shadow for performance + canvasCtx.shadowBlur = 0; } function togglePlay() { @@ -900,6 +917,15 @@ $liveIndex = get_live_index($schedule); document.querySelectorAll(".program-item").forEach((item, i) => { item.classList.toggle("is-live", i === idx); }); + + if (idx !== -1) { + const programName = schedule[idx].name; + if (programColors[programName]) { + waveColor = programColors[programName].main; + waveGlow = programColors[programName].glow; + } + } + const stName = document.getElementById("studio-program-name"); const stPhoto = document.getElementById("studio-photo"); if (stName && idx !== -1) {