Autosave: 20260219-221045
This commit is contained in:
parent
7d84bb4618
commit
7b64e5daae
80
index.php
80
index.php
@ -1680,6 +1680,44 @@ $twitter_link = "https://twitter.com/";
|
||||
animation: slideUpFade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
/* Energy Thermometer for DJ */
|
||||
.energy-thermometer-container {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.energy-thermometer {
|
||||
width: 80px;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.energy-fill {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, #38bdf8, #facc15, #f472b6, #38bdf8);
|
||||
background-size: 200% 100%;
|
||||
transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
animation: gradient-shift 2s linear infinite;
|
||||
box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
|
||||
}
|
||||
@keyframes gradient-shift {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 200% 50%; }
|
||||
}
|
||||
.energy-status-label {
|
||||
font-size: 0.55rem;
|
||||
font-weight: 800;
|
||||
color: #facc15;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
@keyframes slideUpFade {
|
||||
0% { transform: translateY(20px); opacity: 0; }
|
||||
100% { transform: translateY(0); opacity: 1; }
|
||||
@ -1855,6 +1893,12 @@ $twitter_link = "https://twitter.com/";
|
||||
<div class="track-info">
|
||||
<div id="dj-host-container" style="display: flex; align-items: center; gap: 8px;">
|
||||
<div class="dj-badge" onclick="adminOpenShoutout()" style="cursor: pointer;" title="DJ Panel (Admin)"><i class="bi bi-mic-fill"></i> <span id="current-dj-name">LILI</span></div>
|
||||
<div id="dj-energy-thermometer" class="energy-thermometer-container" title="Energía para la Fiesta Total">
|
||||
<span id="energy-text" class="energy-status-label">Cargando hype...</span>
|
||||
<div class="energy-thermometer">
|
||||
<div id="energy-fill" class="energy-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="track-label">ESTÁS ESCUCHANDO:</span>
|
||||
<div id="track-title" class="track-title" onclick="copyTrackTitle()" title="Toca para copiar">Cargando stream...</div>
|
||||
@ -3098,6 +3142,15 @@ $twitter_link = "https://twitter.com/";
|
||||
const animationEnd = Date.now() + duration;
|
||||
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 10001 };
|
||||
|
||||
// Reset thermometer
|
||||
const energyFill = document.getElementById('energy-fill');
|
||||
const energyText = document.getElementById('energy-text');
|
||||
if (energyFill) {
|
||||
energyFill.style.width = '0%';
|
||||
energyFill.parentElement.classList.remove('counter-alert');
|
||||
if (energyText) energyText.innerText = "¡REINICIANDO!";
|
||||
}
|
||||
|
||||
function randomInRange(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
@ -3166,6 +3219,29 @@ $twitter_link = "https://twitter.com/";
|
||||
// Massive Celebration Logic
|
||||
globalReactionCount++;
|
||||
|
||||
// Update Energy Thermometer for DJ
|
||||
const energyFill = document.getElementById('energy-fill');
|
||||
const energyText = document.getElementById('energy-text');
|
||||
if (energyFill) {
|
||||
const threshold = 50;
|
||||
const percentage = (globalReactionCount / threshold) * 100;
|
||||
energyFill.style.width = `${Math.min(percentage, 100)}%`;
|
||||
|
||||
if (energyText) {
|
||||
if (percentage < 30) energyText.innerText = "Cargando hype...";
|
||||
else if (percentage < 70) energyText.innerText = "¡Hype subiendo!";
|
||||
else if (percentage < 100) {
|
||||
energyText.innerText = "¡Casi explota!";
|
||||
energyFill.parentElement.classList.add('counter-alert');
|
||||
} else {
|
||||
energyText.innerText = "¡EXPLOSIÓN!";
|
||||
energyFill.parentElement.classList.add('counter-alert');
|
||||
}
|
||||
|
||||
if (percentage < 70) energyFill.parentElement.classList.remove('counter-alert');
|
||||
}
|
||||
}
|
||||
|
||||
if (!reactionTimer) {
|
||||
reactionTimer = setTimeout(() => {
|
||||
globalReactionCount = 0;
|
||||
@ -3377,6 +3453,10 @@ $twitter_link = "https://twitter.com/";
|
||||
const skipBtn = document.getElementById('dj-skip-btn');
|
||||
if (skipBtn) skipBtn.style.display = isGuestDj ? 'flex' : 'none';
|
||||
|
||||
// Show/hide Energy Thermometer
|
||||
const thermometer = document.getElementById('dj-energy-thermometer');
|
||||
if (thermometer) thermometer.style.display = isGuestDj ? 'flex' : 'none';
|
||||
|
||||
if (result.success) {
|
||||
const list = document.getElementById('song-requests-list');
|
||||
if (result.requests.length === 0) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user