admin/38428-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto commit: 2026-02-15T17:29:16.769Z

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-15 17:29:16 +00:00
parent 4dcfef0593
commit ae58125458
1 changed files with 73 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
index.php
View File

@ -731,12 +731,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
</section> </section>
<!-- Right Section: Featured Image -->
<section class="image-section">
<div class="featured-img-container">
<img src="<?= htmlspecialchars($projectImageUrl) ?>" alt="Featured Image">
</div>
</section>
</div> </div>
<!-- Floating Social Links --> <!-- Floating Social Links -->
@ -776,16 +771,22 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
source.connect(analyzer); source.connect(analyzer);
analyzer.connect(audioCtx.destination); analyzer.connect(audioCtx.destination);
analyzer.fftSize = 128; analyzer.fftSize = 256;
const bufferLength = analyzer.frequencyBinCount; const bufferLength = analyzer.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength); const dataArray = new Uint8Array(bufferLength);
canvas.width = canvas.offsetWidth; function resizeCanvas() {
canvas.height = canvas.offsetHeight; canvas.width = canvas.offsetWidth * window.devicePixelRatio;
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
let hue = 0; let hue = 0;
function draw() { function draw() {
if (audio.paused) { if (audio.paused) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.documentElement.style.setProperty('--dynamic-glow', 'rgba(56, 189, 248, 0.7)'); document.documentElement.style.setProperty('--dynamic-glow', 'rgba(56, 189, 248, 0.7)');
document.documentElement.style.setProperty('--dynamic-glow-dim', 'rgba(56, 189, 248, 0.4)'); document.documentElement.style.setProperty('--dynamic-glow-dim', 'rgba(56, 189, 248, 0.4)');
document.documentElement.style.setProperty('--shake-offset-x', '0px'); document.documentElement.style.setProperty('--shake-offset-x', '0px');
@ -798,16 +799,17 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
const barWidth = (canvas.width / bufferLength) * 2.5; const barCount = bufferLength / 1.5;
let barHeight; const logicalWidth = canvas.width / window.devicePixelRatio;
let x = 0; const logicalHeight = canvas.height / window.devicePixelRatio;
const barWidth = (logicalWidth / barCount) * 0.8;
let x = logicalWidth / 2;
let xLeft = logicalWidth / 2;
// Calcular intensidad promedio para reactividad
let sum = 0; let sum = 0;
for(let i=0; i<bufferLength; i++) sum += dataArray[i]; for(let i=0; i<bufferLength; i++) sum += dataArray[i];
const average = sum / bufferLength; const average = sum / bufferLength;
// Detectar bajos para el efecto de sacudida (shake) y flash
const bassRange = 4; const bassRange = 4;
let bassSum = 0; let bassSum = 0;
for(let i=0; i<bassRange; i++) bassSum += dataArray[i]; for(let i=0; i<bassRange; i++) bassSum += dataArray[i];
@ -826,10 +828,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
document.documentElement.style.setProperty('--bass-flash-opacity', '0'); document.documentElement.style.setProperty('--bass-flash-opacity', '0');
} }
// Rotar el color base según el tiempo y la intensidad
hue = (hue + 0.5 + (average / 50)) % 360; hue = (hue + 0.5 + (average / 50)) % 360;
// Actualizar el resplandor de la imagen con el color actual y reactividad
const glowOpacity = 0.4 + (average / 255) * 0.5; const glowOpacity = 0.4 + (average / 255) * 0.5;
const currentGlow = `hsla(${hue}, 80%, 60%, ${glowOpacity})`; const currentGlow = `hsla(${hue}, 80%, 60%, ${glowOpacity})`;
const currentGlowDim = `hsla(${hue}, 80%, 60%, ${glowOpacity * 0.5})`; const currentGlowDim = `hsla(${hue}, 80%, 60%, ${glowOpacity * 0.5})`;
@ -837,28 +836,26 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
document.documentElement.style.setProperty('--dynamic-glow', currentGlow); document.documentElement.style.setProperty('--dynamic-glow', currentGlow);
document.documentElement.style.setProperty('--dynamic-glow-dim', currentGlowDim); document.documentElement.style.setProperty('--dynamic-glow-dim', currentGlowDim);
for (let i = 0; i < bufferLength; i++) { for (let i = 0; i < barCount; i++) {
barHeight = (dataArray[i] / 255) * canvas.height; const barHeight = (dataArray[i] / 255) * logicalHeight;
const barHue = (hue + (i * 3)) % 360;
// Color dinámico basado en hue, índice de barra e intensidad
const barHue = (hue + (i * 2)) % 360;
const saturation = 80 + (average / 255) * 20; const saturation = 80 + (average / 255) * 20;
const lightness = 50 + (dataArray[i] / 255) * 25; const lightness = 50 + (dataArray[i] / 255) * 25;
const gradient = ctx.createLinearGradient(0, canvas.height, 0, canvas.height - barHeight); const gradient = ctx.createLinearGradient(0, logicalHeight, 0, logicalHeight - barHeight);
gradient.addColorStop(0, `hsl(${barHue}, ${saturation}%, ${lightness}%)`); gradient.addColorStop(0, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.2)`);
gradient.addColorStop(1, `hsl(${(barHue + 40) % 360}, ${saturation}%, ${lightness + 10}%)`); gradient.addColorStop(0.5, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.8)`);
gradient.addColorStop(1, `hsla(${(barHue + 40) % 360}, ${saturation}%, ${lightness + 10}%, 1)`);
ctx.fillStyle = gradient; ctx.fillStyle = gradient;
ctx.shadowBlur = 15;
ctx.shadowColor = `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.5)`;
// Rounded bars
ctx.beginPath(); ctx.beginPath();
ctx.roundRect(x, canvas.height - barHeight, barWidth - 3, barHeight, 4); ctx.roundRect(x, logicalHeight - barHeight, barWidth, barHeight, 2);
ctx.fill(); ctx.fill();
ctx.beginPath();
x += barWidth; ctx.roundRect(xLeft - barWidth, logicalHeight - barHeight, barWidth, barHeight, 2);
ctx.fill();
x += barWidth + 2;
xLeft -= barWidth + 2;
} }
} }
draw(); draw();