Auto commit: 2026-02-15T03:00:52.882Z
This commit is contained in:
parent
e8cb01cdb7
commit
c7559d5109
75
index.php
75
index.php
@ -82,6 +82,20 @@ $liveIndex = get_live_index($schedule);
|
||||
--bg-dark: #0f172a;
|
||||
--glass-bg: rgba(255, 255, 255, 0.03);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--flash-color: #ffffff;
|
||||
}
|
||||
|
||||
.flash-effect {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
background-color: var(--flash-color);
|
||||
opacity: 0;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
body, html {
|
||||
@ -604,6 +618,7 @@ $liveIndex = get_live_index($schedule);
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flash-effect"></div>
|
||||
<div class="background-container"></div>
|
||||
<div class="background-overlay"></div>
|
||||
<div id="mics-background"></div>
|
||||
@ -707,6 +722,25 @@ $liveIndex = get_live_index($schedule);
|
||||
let waveColor = "rgba(56, 189, 248, 0.8)"; // Default primary
|
||||
let waveGlow = "rgba(56, 189, 248, 0.4)";
|
||||
|
||||
function hexToRgb(hex) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function getComplementaryColor(rgbaStr) {
|
||||
// Extract r, g, b from rgba(r, g, b, a)
|
||||
const match = rgbaStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
|
||||
if (!match) return "#ffffff";
|
||||
const r = 255 - parseInt(match[1]);
|
||||
const g = 255 - parseInt(match[2]);
|
||||
const b = 255 - parseInt(match[3]);
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
}
|
||||
|
||||
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)" },
|
||||
@ -741,6 +775,20 @@ $liveIndex = get_live_index($schedule);
|
||||
const average = sum / 30;
|
||||
const boost = (average / 128.0); // Factor between 0 and 2
|
||||
|
||||
// Flash Effect Detection (Drop detection)
|
||||
const flashEl = document.querySelector(".flash-effect");
|
||||
if (boost > 1.6 && Math.random() > 0.96) {
|
||||
const useWhite = Math.random() > 0.5;
|
||||
const flashColor = useWhite ? "#ffffff" : getComplementaryColor(waveColor);
|
||||
document.documentElement.style.setProperty("--flash-color", flashColor);
|
||||
flashEl.style.opacity = "0.3";
|
||||
setTimeout(() => {
|
||||
flashEl.style.transition = "opacity 0.4s ease-out";
|
||||
flashEl.style.opacity = "0";
|
||||
}, 40);
|
||||
setTimeout(() => { flashEl.style.transition = ""; }, 500);
|
||||
}
|
||||
|
||||
// Update CSS variables for background pulse
|
||||
document.body.style.setProperty("--pulse-intensity", (1 + boost * 0.15).toString());
|
||||
floatingMics.forEach(mic => {
|
||||
@ -749,12 +797,11 @@ $liveIndex = get_live_index($schedule);
|
||||
|
||||
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// --- Particle System (Fire/Sparks) ---
|
||||
if (boost > 1.2) { // Threshold for intense bass
|
||||
const particleCount = Math.floor(boost * 3);
|
||||
// --- Particle System (Fire/Sparks with Smoke Trail) ---
|
||||
if (boost > 1.2) {
|
||||
const particleCount = Math.floor(boost * 2);
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
const x = Math.random() * canvas.width;
|
||||
// Find approximate y of the wave at this x
|
||||
const dataIdx = Math.floor((x / canvas.width) * dataArray.length);
|
||||
const v = dataArray[dataIdx] / 128.0;
|
||||
const amplitude = (v - 1) * (1.5 + boost * 2) + 1;
|
||||
@ -767,7 +814,8 @@ $liveIndex = get_live_index($schedule);
|
||||
vy: -Math.random() * 6 - (boost * 4),
|
||||
alpha: 1,
|
||||
size: Math.random() * 3 + 1,
|
||||
color: waveColor.replace("0.8", "1") // More solid for sparks
|
||||
color: waveColor.replace("0.8", "1"),
|
||||
trail: []
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -775,16 +823,29 @@ $liveIndex = get_live_index($schedule);
|
||||
// Update and draw particles
|
||||
for (let i = particles.length - 1; i >= 0; i--) {
|
||||
const p = particles[i];
|
||||
|
||||
// Add to trail
|
||||
p.trail.push({ x: p.x, y: p.y, alpha: p.alpha });
|
||||
if (p.trail.length > 10) p.trail.shift();
|
||||
|
||||
p.x += p.vx;
|
||||
p.y += p.vy;
|
||||
p.vy += 0.2; // Gravity
|
||||
p.alpha -= 0.02; // Fade out
|
||||
p.vy += 0.22; // Gravity
|
||||
p.alpha -= 0.015; // Slower fade for smoke effect
|
||||
|
||||
if (p.alpha <= 0) {
|
||||
particles.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Draw Trail (Smoke)
|
||||
p.trail.forEach((point, idx) => {
|
||||
canvasCtx.beginPath();
|
||||
canvasCtx.arc(point.x, point.y, p.size * (idx / p.trail.length), 0, Math.PI * 2);
|
||||
canvasCtx.fillStyle = p.color.replace("1)", `${point.alpha * 0.2})`);
|
||||
canvasCtx.fill();
|
||||
});
|
||||
|
||||
canvasCtx.save();
|
||||
canvasCtx.globalAlpha = p.alpha;
|
||||
canvasCtx.fillStyle = p.color;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user