diff --git a/index.php b/index.php index 123b7c9..7d666d9 100644 --- a/index.php +++ b/index.php @@ -686,6 +686,66 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; transform: scale(1); } + /* Sleep Timer Modal */ + .sleep-modal { + display: none; + position: fixed; + z-index: 3000; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.7); + backdrop-filter: blur(10px); + justify-content: center; + align-items: center; + opacity: 0; + transition: opacity 0.3s ease; + } + .sleep-modal.show { + display: flex; + opacity: 1; + } + .sleep-modal-content { + background: rgba(20, 20, 20, 0.8); + border: 1px solid rgba(255, 255, 255, 0.1); + padding: 2.5rem; + border-radius: 32px; + width: 90%; + max-width: 400px; + text-align: center; + transform: scale(0.8); + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + box-shadow: 0 20px 60px rgba(0,0,0,0.5); + } + .sleep-modal.show .sleep-modal-content { + transform: scale(1); + } + .sleep-option { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; + padding: 1rem; + margin: 0.8rem 0; + border-radius: 16px; + cursor: pointer; + transition: all 0.2s; + font-weight: 600; + display: flex; + justify-content: space-between; + align-items: center; + } + .sleep-option:hover { + background: rgba(255, 255, 255, 0.15); + transform: translateY(-2px); + border-color: var(--primary-color); + } + .sleep-option.active { + background: var(--primary-color); + color: #000; + border-color: #fff; + } + .qr-modal-close { position: absolute; top: 15px; @@ -896,6 +956,20 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; + + + + + + + +
+
+

Temporizador

+

La radio se detendrá automáticamente.

+ +
+ 15 Minutos + +
+
+ 30 Minutos + +
+
+ 60 Minutos + +
+ + + +
+
+
@@ -1636,11 +1737,105 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; } } + // --- Sleep Timer & Upcoming Tracks --- + let sleepTimeout = null; + let sleepInterval = null; + + function openSleepModal() { + const modal = document.getElementById('sleep-modal'); + modal.style.display = 'flex'; + setTimeout(() => modal.classList.add('show'), 10); + + // Show cancel option if active + document.getElementById('cancel-sleep-option').style.display = sleepTimeout ? 'flex' : 'none'; + } + + function closeSleepModal() { + const modal = document.getElementById('sleep-modal'); + modal.classList.remove('show'); + setTimeout(() => modal.style.display = 'none', 300); + } + + function setSleepTimer(minutes) { + // Clear existing + if (sleepTimeout) clearTimeout(sleepTimeout); + if (sleepInterval) clearInterval(sleepInterval); + + if (minutes === 0) { + document.getElementById('sleep-countdown').style.display = 'none'; + sleepTimeout = null; + alert('Temporizador desactivado'); + closeSleepModal(); + return; + } + + const ms = minutes * 60 * 1000; + const endTime = Date.now() + ms; + + document.getElementById('sleep-countdown').style.display = 'block'; + + function updateCountdown() { + const now = Date.now(); + const diff = endTime - now; + if (diff <= 0) { + clearInterval(sleepInterval); + if (!audio.paused) togglePlay(); + document.getElementById('sleep-countdown').style.display = 'none'; + sleepTimeout = null; + return; + } + const m = Math.floor(diff / 60000); + const s = Math.floor((diff % 60000) / 1000); + document.getElementById('sleep-time-left').innerText = `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; + } + + updateCountdown(); + sleepInterval = setInterval(updateCountdown, 1000); + + sleepTimeout = setTimeout(() => { + // Done + }, ms); + + alert(`La radio se apagará en ${minutes} minutos`); + closeSleepModal(); + } + + async function fetchUpcomingTracks() { + try { + // RadioKing API for next tracks + const response = await fetch('https://www.radioking.com/widgets/api/v1/radio/828046/track/next?limit=3'); + const tracks = await response.json(); + + const container = document.getElementById('upcoming-tracks-container'); + const list = document.getElementById('upcoming-tracks-list'); + + if (tracks && tracks.length > 0) { + container.style.display = 'block'; + list.innerHTML = tracks.map(track => ` +
+ +
+
${track.title}
+
${track.artist || 'Lili Records'}
+
+
+ `).join(''); + } else { + container.style.display = 'none'; + } + } catch (error) { + console.error('Error fetching upcoming tracks:', error); + } + } + + // --- End Sleep Timer & Upcoming Tracks --- + // Fetch Now Playing Metadata from RadioKing let progressInterval = null; async function updateMetadata() { try { + fetchUpcomingTracks(); // Fetch next tracks in parallel const response = await fetch('https://www.radioking.com/widgets/api/v1/radio/828046/track/current'); const data = await response.json();