<!doctypehtml><html lang="es"><head><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1"name="viewport"><title>Radio Uno - Ayabaca</title><link href="manifest.json"rel="manifest"><link href="favicon.ico"rel="icon"type="image/x-icon"><meta content="Escucha Radio Uno Ayabaca, La Super Tonera con los géneros que marcaron épocas. Transmitiendo en vivo desde Texas, disfruta de una experiencia única en nuestra web app de radio. Visítanos en https://radiounoayabaca.piuraserverslive.com/"name="description"><meta content="Radio Uno Ayabaca , géneros musicales, música en vivo, reviviendo el ayer, transmisión desde Texas, https://radiounoayabaca.piuraserverslive.com/m"name="keywords"><meta content="index, follow"name="robots"></head><style>h1,h2,h3,p{font-family:'Arial Black',Arial,sans-serif;font-weight:700}*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;font-family:'Arial Black',Arial,sans-serif;display:flex;justify-content:center;align-items:center;overflow:hidden}.background-container{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-2}.background-video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;z-index:-2;transform:translate(-50%,-50%)}.background-overlay .color-overlay{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.7;z-index:-1;transition:background-color .5s ease-in-out}.content-wrapper{border-radius:20px;padding:30px;margin-bottom:60px;max-width:400px;width:100%;position:relative;z-index:1}.player-container{text-align:left}.station-info{text-align:center;margin-top:100px;margin-bottom:10px;color:#fff}.station-title{font-family:'Arial Black',Arial,sans-serif;font-size:18px;font-weight:700;margin-bottom:5px}.station-slogan{font-size:.875rem}@keyframes border-move{0%{box-shadow:0 0 0 rgba(255,255,255,.9)}50%{box-shadow:0 0 60px rgba(255,255,255,1),0 0 120px rgba(255,255,255,.5)}100%{box-shadow:0 0 0 rgba(255,255,255,.9)}}#album-art{position:relative;width:10rem;height:10rem;margin:30px auto 20px;border-radius:50%;overflow:hidden;animation:spin 10s linear infinite,border-move 2s ease-in-out infinite;border:10px solid #fff;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#cover{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease-in-out;z-index:1;position:relative}.live-button{position:absolute;font-family:'Arial Black',Arial,sans-serif;top:-30px;left:0;background-color:red;color:#fff;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:700;display:flex;align-items:center;border:none}.live-button-container{margin-bottom:40px}.live-dot{width:8px;height:8px;background-color:#fff;border-radius:50%;margin-right:5px;animation:blink 1s infinite}@keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}#song{font-size:15px;color:#fff;font-weight:700;text-align:left;margin-bottom:5px}#artist{font-size:10px;color:#fff;margin-bottom:5px;text-align:left}.song-divider{height:.25rem;background-color:rgba(255,255,255,.3);margin:0 0;width:100%}.controls{display:flex;justify-content:center;align-items:center;gap:0;background:url(player.gif) no-repeat center center;background-size:cover;position:relative;padding:60px}#history-button,#next-station,#play-pause,#prev-station,#volume-control{width:35px;height:35px;border-radius:50%;background-color:#fff;border:none;cursor:pointer;font-size:24px;color:#000;display:flex;justify-content:center;align-items:center;transition:all .3s ease}#history-button:hover,#next-station:hover,#play-pause:hover,#prev-station:hover,#volume-control:hover{background-color:rgba(255,255,255,1);transform:scale(1.1)}#history-button:hover,#next-station:hover,#play-pause:hover,#prev-station:hover,#volume-control:hover{color:#000}#play-pause{width:60px;height:60px;border-radius:50%;background-color:#fff;color:#000;display:flex;justify-content:center;align-items:center;transition:all .3s ease}#play-pause:hover{background-color:rgba(255,255,255,1);transform:scale(1.1)}.social-buttons{display:flex;gap:5px;margin-top:10px}.social-button{width:30px;height:30px;border-radius:50%;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,1);transition:all .3s ease;cursor:pointer}.social-button:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.2)}.social-button svg{width:15px;height:15px;fill:#000}body,html{height:100%;margin:0;display:flex;flex-direction:column}.content{flex:1;padding-bottom:80px}#history-modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.8)}.history-content{background-color:#00000087;margin:15% auto;padding:20px;width:90%;max-width:600px;border-radius:10px;color:#fff}.close{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer}.close:focus,.close:hover{color:#fff;text-decoration:none;cursor:pointer}#history-list{list-style-type:none;padding:0}#history-list li{display:flex;align-items:center;padding:10px;border-bottom:1px solid #444}#history-list li:last-child{border-bottom:none}.history-cover{width:50px;height:50px;object-fit:cover;border-radius:5px;margin-right:15px}.history-text{flex-grow:1}.station-buttons{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.station-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;padding:10px 15px;border-radius:20px;cursor:pointer;transition:all .3s ease}.station-button:hover{background-color:rgba(255,255,255,.3)}.station-button.active{background-color:rgba(255,255,255,.4);font-weight:700}#prev-station{display:none}#next-station{display:none}.logo{position:absolute;top:10px;left:10px;width:70px;height:70px;border-radius:50%;object-fit:cover;z-index:1;animation:pulse 1.5s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}body{font-family:'Arial Black',Arial,sans-serif;text-shadow:1px 1px 0 rgba(0,0,0,1),-1px -1px 0 rgba(0,0,0,1),1px -1px 0 rgba(0,0,0,1),-1px 1px 0 rgba(0,0,0,1)}.share-button{position:fixed;top:10px;right:10px;width:40px;height:40px;background-color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 10px rgba(0,0,0,.2);transition:background-color .3s ease,transform .3s ease;z-index:1000}.share-button:hover{background-color:#fff;transform:scale(1.1)}.share-button img{width:24px;height:24px}.tv-button{background-color:red;font-family:'Arial Black',Arial,sans-serif;color:#fff;padding:5px 20px;border:none;border-radius:20px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;margin-left:auto;transition:background-color .3s,transform .3s}#tv-button{display:none}.tv-button:hover{background-color:red;transform:scale(1.05)}.tv-icon{margin-right:5px;filter:brightness(0) invert(1)}</style><body><a aria-label="Compartir"class="share-button"href="https://api.whatsapp.com/send?text=¡Hola!%20Te comparto esta web app: %20https://radiounoayabaca.piuraserverslive.com/"target="_blank"><img alt="Compartir"src="compartir.png"> </a><img alt="Logo"src="/paneladmin/logo/logo.png?v=1731012918"class="logo"><div class="background-container"id="background"><video autoplay class="background-video"loop muted preload="auto"><source src="/paneladmin/video/video.mp4"type="video/mp4">Tu navegador no soporta videos.</video></div><div class="background-overlay"></div><div class="color-overlay"id="color-overlay"></div><div class="content-wrapper"><div class="player-container"><div class="station-info"><p class="station-slogan">Corporaciòn Mundial de Streaming</p><h1 class="station-title">Radio Ayabaca </h1></div><div id="album-art"><img alt="Default Album Art"src="/paneladmin/logo/logo.png?v=1731012918"id="cover"></div><div class="text-container"style="position:relative"><div class="live-button-container"><button class="live-button"><span class="live-dot"></span> En Vivo</button></div><h2 id="song">Radio Uno </h2><p id="artist">Ayabaca</p></div><div class="social-buttons"><a aria-label="Facebook"class="social-button"href="https://web.facebook.com/radiouno102.9"target="_blank"><svg viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg> </a><a aria-label="Instagram"class="social-button"href="https://t.me/"target="_blank"><svg viewBox="0 0 192 192"xmlns="http://www.w3.org/2000/svg"fill="none"height="800px"width="800px"><path d="M23.073 88.132s65.458-26.782 88.16-36.212c8.702-3.772 38.215-15.843 38.215-15.843s13.621-5.28 12.486 7.544c-.379 5.281-3.406 23.764-6.433 43.756-4.54 28.291-9.459 59.221-9.459 59.221s-.756 8.676-7.188 10.185c-6.433 1.509-17.027-5.281-18.919-6.79-1.513-1.132-28.377-18.106-38.214-26.404-2.649-2.263-5.676-6.79.378-12.071 13.621-12.447 29.891-27.913 39.728-37.72 4.54-4.527 9.081-15.089-9.837-2.264-26.864 18.483-53.35 35.835-53.35 35.835s-6.053 3.772-17.404.377c-11.351-3.395-24.594-7.921-24.594-7.921s-9.08-5.659 6.433-11.693Z"stroke="#000000"stroke-width="12"/></svg> </a><a aria-label="TikTok"class="social-button"href="https://www.tiktok.com/"target="_blank"><svg viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"><path d="M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg> </a><a aria-label="WhatsApp"class="social-button"href="https://wa.me/51967247958"target="_blank"><svg vWhatsAppiewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg> </a><button class="tv-button"onclick="openTV()"id="tv-button"><span class="tv-icon"><img alt="TV Icon"src="tv.png"height="24"width="24"> </span>TV</button><div class="iframe-overlay"id="tv-iframe"style="display:none"><iframe class="iframe-content"id="tv-content"src=""></iframe><button class="close-btn"onclick="closeTV()">X</button></div></div></div><div class="song-divider"></div><div class="controls"><button id="prev-station"><svg viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"fill="none"height="24"width="24"stroke="currentColor"stroke-linecap="round"stroke-linejoin="round"stroke-width="2"><polygon points="19 20 9 12 19 4 19 20"></polygon><line x1="5"x2="5"y1="19"y2="5"></line></svg></button> <button id="history-button"><svg viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"fill="black"height="24"width="24"><path d="M12 3v10.55A4 4 0 1 0 14 20V7h6V3h-8z"></path></svg></button> <button id="play-pause"><svg viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"fill="black"height="40"width="40"id="play-icon"style="display:block"><polygon points="5 3 19 12 5 21"style="fill:#000"></polygon></svg> <svg viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"fill="black"height="40"width="40"id="pause-icon"style="display:none"><rect height="16"style="fill:#000"width="5"x="6"y="4"></rect><rect height="16"style="fill:#000"width="5"x="14"y="4"></rect></svg></button> <button id="volume-control"><svg viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"fill="black"height="24"width="24"id="volume-icon"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg> <svg viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"fill="black"height="24"width="24"id="mute-icon"style="display:none"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23"x2="17"y1="9"y2="15"></line><line x1="17"x2="23"y1="9"y2="15"></line></svg></button> <button id="next-station"><svg viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"fill="none"height="24"width="24"stroke="currentColor"stroke-linecap="round"stroke-linejoin="round"stroke-width="2"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19"x2="19"y1="5"y2="19"></line></svg></button></div></div><div id="history-modal"><div class="history-content"><span class="close">×</span><h2>Historial de Canciones</h2><ul id="history-list"></ul></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script><script>const audio = new Audio('');
    const playPauseButton = document.getElementById('play-pause');
    const albumArt = document.getElementById('album-art');
    const cover = document.getElementById('cover');
    const songElement = document.getElementById('song');
    const artistElement = document.getElementById('artist');
    const backgroundContainer = document.getElementById('background');
    const playIcon = document.getElementById('play-icon');
    const pauseIcon = document.getElementById('pause-icon');
    const historyButton = document.getElementById('history-button');
    const volumeControl = document.getElementById('volume-control');
    const volumeIcon = document.getElementById('volume-icon');
    const muteIcon = document.getElementById('mute-icon');
    const historyModal = document.getElementById('history-modal');
    const closeButton = document.getElementsByClassName('close')[0];
    const historyList = document.getElementById('history-list');
    const prevStationButton = document.getElementById('prev-station');
    const nextStationButton = document.getElementById('next-station');
    const colorOverlay = document.getElementById('color-overlay');
    const stationTitle = document.querySelector('.station-title');
    const stationSlogan = document.querySelector('.station-slogan');
    
    const defaultCoverArt = '/paneladmin/logo/logo.png?v=' + new Date().getTime();
    
    let isPlaying = false;
    let isMuted = false;
    let songHistory = [];
    let currentStationIndex = 0;
    const stations = [
      {name: 'Radio Uno  ', stream: 'https://sp.onliveperu.com/8036/stream', slogan: 'Sonando en Vivo'},
      {name: '', stream: '', slogan: ''},
      {name: '', stream: '', slogan: ''}
    ];
    
    playPauseButton.addEventListener('click', togglePlay);
    historyButton.addEventListener('click', openHistoryModal);
    volumeControl.addEventListener('click', toggleMute);
    closeButton.addEventListener('click', closeHistoryModal);
    window.addEventListener('click', closeHistoryModalOutside);
    prevStationButton.addEventListener('click', () => changeStation(-1));
    nextStationButton.addEventListener('click', () => changeStation(1));
    
    function changeStation(direction) {
      currentStationIndex = (currentStationIndex + direction + stations.length) % stations.length;
      updateStation();
    }
    
    function updateStation() {
      const station = stations[currentStationIndex];
      audio.src = station.stream;
      stationTitle.textContent = station.name;
      stationSlogan.textContent = station.slogan;
      songElement.textContent = station.name;
      artistElement.textContent = 'Sonando Ahora';
    
      if (isPlaying) {
        audio.play();
      }
      updateMetadata();
    }
    
    function togglePlay() {
      if (isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      isPlaying = !isPlaying;
      updatePlayPauseIcon();
    }
    
    function updatePlayPauseIcon() {
      if (isPlaying) {
        playIcon.style.display = 'none';
        pauseIcon.style.display = 'block';
      } else {
        playIcon.style.display = 'block';
        pauseIcon.style.display = 'none';
      }
    }
    
    function openHistoryModal() {
      historyModal.style.display = 'block';
      updateHistoryList();
    }
    
    function closeHistoryModal() {
      historyModal.style.display = 'none';
    }
    
    function closeHistoryModalOutside(event) {
      if (event.target == historyModal) {
        historyModal.style.display = 'none';
      }
    }
    
    async function updateHistoryList() {
      historyList.innerHTML = '';
      for (let i = 0; i < Math.min(songHistory.length, 5); i++) {
        const song = songHistory[i];
        const li = document.createElement('li');
        const img = document.createElement('img');
        img.src = song.artwork || defaultCoverArt;
        img.alt = `Album art for ${song.title}`;
        img.className = 'history-cover';
        const textDiv = document.createElement('div');
        textDiv.className = 'history-text';
        textDiv.textContent = `${song.artist} - ${song.title}`;
        li.appendChild(img);
        li.appendChild(textDiv);
        historyList.appendChild(li);
      }
    }
    
    function toggleMute() {
      audio.muted = !audio.muted;
      isMuted = audio.muted;
      updateVolumeIcon();
    }
    
    function updateVolumeIcon() {
      if (isMuted) {
        volumeIcon.style.display = 'none';
        muteIcon.style.display = 'block';
      } else {
        volumeIcon.style.display = 'block';
        muteIcon.style.display = 'none';
      }
    }
    
    async function getITunesArtwork(artist, song) {
      try {
        const response = await axios.get(`https://itunes.apple.com/search`, {
          params: {
            term: `${artist} ${song}`,
            entity: 'song',
            limit: 1
          }
        });
        if (response.data.results && response.data.results.length > 0) {
          return response.data.results[0].artworkUrl100.replace('100x100', '600x600');
        }
      } catch (error) {
        console.error('Error fetching iTunes artwork:', error);
      }
      return null;
    }
    
    async function updateMetadata() {
      try {
        const stationId = stations[currentStationIndex].stream.split('/')[3];
        const response = await axios.get(`https://sp.onliveperu.com/cp/get_info.php?p=8036`);
        const data = response.data;
        let song, artist;
    
        if (data.song && data.artist) {
          song = data.song;
          artist = data.artist;
        } else if (data.title) {
          const parts = data.title.split(' - ');
          if (parts.length > 1) {
            artist = parts[0];
            song = parts.slice(1).join(' - ');
          } else {
            song = data.title;
            artist = '';
          }
        }
    
        songElement.textContent = song || 'Radio Uno Ayabaca';
        artistElement.textContent = artist || 'Sonando Ahora';
    
        // Try to get artwork from iTunes
        const iTunesArtwork = await getITunesArtwork(artist, song);
        const artworkUrl = iTunesArtwork || data.art || defaultCoverArt;
    
        // Add the current song to the history
        const currentSong = { 
          artist: artist || 'Radio Uno Ayabaca', 
          title: song || 'Sonando Ahora',
          artwork: artworkUrl
        };
        if (songHistory.length === 0 || 
            songHistory[0].artist !== currentSong.artist || 
            songHistory[0].title !== currentSong.title) {
          songHistory.unshift(currentSong);
          if (songHistory.length > 4) {
            songHistory.pop();
          }
        }
    
        // Create a new Image object to preload the new cover art
        const newImage = new Image();
        newImage.onload = function() {
          // Once the new image is loaded, fade out the current image
          cover.style.opacity = 0;
          
          // After a short delay, update the src and fade in the new image
          setTimeout(() => {
            cover.src = artworkUrl;
            cover.alt = `Album art for ${song || 'current song'}`;
            cover.style.opacity = 1;
            
            // Update background with blurred album art
            backgroundContainer.style.backgroundImage = `url(${artworkUrl})`;
          }, 300); // This delay should match the transition duration in CSS
        };
        newImage.src = artworkUrl;
    
        // Add theme-color meta tag
        let themeColor = await getAverageColor(artworkUrl);
        updateThemeColor(themeColor);
    
        // Update play-pause button background color
        // playPauseButton.style.backgroundColor = themeColor;
    
        // Update color overlay
        colorOverlay.style.backgroundColor = themeColor;
    
        // Update mediaSession
        if ('mediaSession' in navigator) {
          navigator.mediaSession.metadata = new MediaMetadata({
            title: song,
            artist: artist,
            album: stations[currentStationIndex].name,
            artwork: [
              { src: artworkUrl, sizes: '96x96', type: 'image/png' },
              { src: artworkUrl, sizes: '128x128', type: 'image/png' },
              { src: artworkUrl, sizes: '192x192', type: 'image/png' },
              { src: artworkUrl, sizes: '256x256', type: 'image/png' },
              { src: artworkUrl, sizes: '384x384', type: 'image/png' },
              { src: artworkUrl, sizes: '512x512', type: 'image/png' },
            ]
          });
    
          navigator.mediaSession.setActionHandler('play', togglePlay);
          navigator.mediaSession.setActionHandler('pause', togglePlay);
          navigator.mediaSession.setActionHandler('previoustrack', () => changeStation(-1));
          navigator.mediaSession.setActionHandler('nexttrack', () => changeStation(1));
        }
      } catch (error) {
        console.error('Error updating metadata:', error);
      }
    }
    
    async function getAverageColor(imageUrl) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function() {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          const data = imageData.data;
          let r = 0, g = 0, b = 0;
          for (let i = 0; i < data.length; i += 4) {
            r += data[i];
            g += data[i+1];
            b += data[i+2];
          }
          r = Math.floor(r / (data.length / 4));
          g = Math.floor(g / (data.length / 4));
          b = Math.floor(b / (data.length / 4));
          resolve(`rgb(${r},${g},${b})`);
        };
        img.onerror = reject;
        img.src = imageUrl;
      });
    }
    
    function updateThemeColor(color) {
      let meta = document.querySelector('meta[name="theme-color"]');
      if (!meta) {
        meta = document.createElement('meta');
        meta.name = 'theme-color';
        document.head.appendChild(meta);
      }
      meta.content = color;
    }
    
    // Update metadata every 15 seconds
    setInterval(updateMetadata, 15000);
    
    // Initial update
    updateMetadata();
    updateStation();</script><div class="menu-inferior"><div class="menu-item"id="instalar"><img alt="Instalar App"src="app.png?nocache=1731012918"class="menu-icon"> <span class="menu-text">Instalar App</span></div><div class="menu-item"id="programas"onclick="openProgramas()"><img alt="Programas"src="programas.png?nocache=1731012918"class="menu-icon"> <span class="menu-text">Programas</span></div><div class="iframe-overlay"id="programas-iframe"style="display:none"><iframe class="iframe-content"id="programas-content"src=""></iframe><button class="close-btn"onclick="closeProgramas()">X</button></div><div class="menu-item"id="chat"onclick="openChat()"><img alt="Chat"src="chat.png?nocache=1731012918"class="menu-icon"> <span class="menu-text">Chat</span></div><div class="iframe-overlay"id="chat-iframe"style="display:none"><iframe class="iframe-content"id="iframe"src=""></iframe><button class="close-btn"onclick="closeChat()">X</button></div><div class="menu-item"id="videos"onclick="openVideos()"><img alt="Videos"src="contacto.png?nocache=1731012918"class="menu-icon"> <span class="menu-text">Contacto</span></div><div class="iframe-overlay"id="videos-iframe"style="display:none"><iframe class="iframe-content"id="videos-content"src=""></iframe><button class="close-btn"onclick="closeVideos()">X</button></div></div><style>.iframe-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:9999;display:flex;justify-content:center;align-items:center}.iframe-content{width:80%;height:80%;border:none}.close-btn{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:linear-gradient(to right,red,#8b0000);border:none;padding:10px;cursor:pointer;color:#fff;font-family:'Arial Black',sans-serif;font-weight:700;border-radius:8px}body{margin:0;padding-bottom:40px}.menu-inferior{position:fixed;bottom:0;left:0;width:100%;background:linear-gradient(to right,red,#c00);display:flex;justify-content:center;align-items:center;padding:12px 0;z-index:1000}.menu-item{text-align:center;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;margin:0 5px}.menu-icon{width:20px;height:20px;margin-bottom:0;filter:brightness(0) invert(1)}.menu-text{font-size:12px}.menu-item:hover{opacity:.8}#instalar{animation:pulse 1.5s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}</style><script>document.addEventListener("contextmenu",function(e){e.preventDefault()})</script><script>function openTV(){document.getElementById("tv-content").src="",document.getElementById("tv-iframe").style.display="flex"}function closeTV(){document.getElementById("tv-iframe").style.display="none",document.getElementById("tv-content").src=""}function openChat(){document.getElementById("iframe").src="https://chat.corporacionmundialdestreaming.com/",document.getElementById("chat-iframe").style.display="flex"}function closeChat(){document.getElementById("chat-iframe").style.display="none",document.getElementById("iframe").src=""}function openProgramas(){document.getElementById("programas-content").src="https://radiounoayabaca.piuraserverslive.com/programas/programas.php",document.getElementById("programas-iframe").style.display="flex"}function closeProgramas(){document.getElementById("programas-iframe").style.display="none",document.getElementById("programas-content").src=""}function openVideos(){document.getElementById("videos-content").src="https://radiounoayabaca.piuraserverslive.com/contacto.php",document.getElementById("videos-iframe").style.display="flex"}function closeVideos(){document.getElementById("videos-iframe").style.display="none",document.getElementById("videos-content").src=""}</script><script>if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
          navigator.serviceWorker.register('/service-worker.js')
              .then(registration => {
                  console.log('ServiceWorker registration successful with scope: ', registration.scope);
              })
              .catch(error => {
                  console.error('ServiceWorker registration failed: ', error);
              });
      });
  }</script><script>let deferredPrompt;

  // Escuchar el evento beforeinstallprompt
  window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      deferredPrompt = e; // Guardar el evento
  });

  // Agregar un listener al botón de instalación
  document.getElementById('instalar').addEventListener('click', () => {
      if (deferredPrompt) {
          // Mostrar el prompt de instalación
          deferredPrompt.prompt();
          // Esperar la elección del usuario
          deferredPrompt.userChoice.then((choiceResult) => {
              if (choiceResult.outcome === 'accepted') {
                  console.log('El usuario aceptó instalar la PWA');
              } else {
                  console.log('El usuario rechazó instalar la PWA');
              }
              // Reiniciar deferredPrompt para mostrarlo de nuevo si es necesario
              deferredPrompt = null; // Limpiar el prompt
              // Volver a escuchar el evento para que se pueda mostrar de nuevo
              window.addEventListener('beforeinstallprompt', (e) => {
                  e.preventDefault();
                  deferredPrompt = e; // Guardar el evento nuevamente
              });
          });
      }
  });</script></body></html>