Auto commit: 2026-02-15T17:43:07.899Z
This commit is contained in:
parent
ddfe0485c9
commit
b082b4946f
63
index.php
63
index.php
@ -234,14 +234,25 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
}
|
||||
|
||||
.track-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
font-size: 1.5rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: opacity 0.5s ease;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
|
||||
text-shadow: 0 0 15px var(--primary-color), 0 0 30px rgba(0,0,0,0.5);
|
||||
display: block;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.track-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: -5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -670,8 +681,9 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
<div class="now-playing">
|
||||
<i class="bi bi-broadcast"></i>
|
||||
<div class="track-info">
|
||||
<div class="track-status">EN VIVO</div>
|
||||
<span class="track-label">ESTÁS ESCUCHANDO:</span>
|
||||
<div id="track-title" class="track-title">Cargando stream...</div>
|
||||
<div class="track-status">EN VIVO</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -780,7 +792,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
let hue = 0;
|
||||
let colorOffset = 0;
|
||||
function draw() {
|
||||
if (audio.paused) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
@ -796,7 +808,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
const barCount = bufferLength / 1.5;
|
||||
const logicalWidth = canvas.width / window.devicePixelRatio;
|
||||
const logicalHeight = canvas.height / window.devicePixelRatio;
|
||||
const barWidth = (logicalWidth / barCount) * 0.8;
|
||||
const barWidth = (logicalWidth / barCount) * 0.7;
|
||||
let x = logicalWidth / 2;
|
||||
let xLeft = logicalWidth / 2;
|
||||
|
||||
@ -804,29 +816,40 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
for(let i=0; i<bufferLength; i++) sum += dataArray[i];
|
||||
const average = sum / bufferLength;
|
||||
|
||||
hue = (hue + 0.5 + (average / 50)) % 360;
|
||||
colorOffset += 0.5;
|
||||
|
||||
for (let i = 0; i < barCount; i++) {
|
||||
const barHeight = (dataArray[i] / 255) * logicalHeight;
|
||||
const barHue = (hue + (i * 3)) % 360;
|
||||
const saturation = 80 + (average / 255) * 20;
|
||||
const lightness = 50 + (dataArray[i] / 255) * 25;
|
||||
const barHeight = (dataArray[i] / 255) * logicalHeight * 0.9;
|
||||
|
||||
// Rainbow spectrum with flow
|
||||
const barHue = (colorOffset + (i / barCount) * 360) % 360;
|
||||
const saturation = 90;
|
||||
const lightness = 50 + (dataArray[i] / 255) * 20;
|
||||
|
||||
const gradient = ctx.createLinearGradient(0, logicalHeight, 0, logicalHeight - barHeight);
|
||||
gradient.addColorStop(0, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.2)`);
|
||||
gradient.addColorStop(0.5, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.8)`);
|
||||
gradient.addColorStop(1, `hsla(${(barHue + 40) % 360}, ${saturation}%, ${lightness + 10}%, 1)`);
|
||||
gradient.addColorStop(0, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.3)`);
|
||||
gradient.addColorStop(0.5, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.9)`);
|
||||
gradient.addColorStop(1, `hsla(${(barHue + 30) % 360}, ${saturation}%, ${lightness + 10}%, 1)`);
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
|
||||
// Draw mirror bars
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, logicalHeight - barHeight, barWidth, barHeight, 2);
|
||||
ctx.roundRect(x, logicalHeight - barHeight, barWidth, barHeight, 4);
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(xLeft - barWidth, logicalHeight - barHeight, barWidth, barHeight, 2);
|
||||
ctx.roundRect(xLeft - barWidth, logicalHeight - barHeight, barWidth, barHeight, 4);
|
||||
ctx.fill();
|
||||
x += barWidth + 2;
|
||||
xLeft -= barWidth + 2;
|
||||
|
||||
x += barWidth + 3;
|
||||
xLeft -= barWidth + 3;
|
||||
}
|
||||
|
||||
// Update dynamic glow colors based on music intensity
|
||||
const dominantHue = (average * 2) % 360;
|
||||
document.documentElement.style.setProperty('--dynamic-glow', `hsla(${dominantHue}, 100%, 60%, 0.8)`);
|
||||
document.documentElement.style.setProperty('--dynamic-glow-dim', `hsla(${dominantHue}, 100%, 60%, 0.3)`);
|
||||
}
|
||||
draw();
|
||||
}
|
||||
@ -879,8 +902,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
||||
if (data && data.title) {
|
||||
const title = data.title;
|
||||
const artist = data.artist || 'Lili Records';
|
||||
const fullDisplay = `${artist} - ${title}`;
|
||||
const coverUrl = data.cover || './assets/pasted-20260215-163754-def41f49.png';
|
||||
// Clean up title if it contains artist
|
||||
let fullDisplay = title.includes(artist) ? title : `${artist} - ${title}`;
|
||||
|
||||
if (trackTitle.textContent !== fullDisplay) {
|
||||
trackTitle.style.opacity = '0';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user