<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio La Grande - Transmite desde Pacaipampa- Peru</title>
    <meta name="theme-color" content="#fdac02" />
    <meta property="og:image:width" content="600" />
        <meta property="og:image:height" content="360" />
    <link rel="shortcut icon" type="image/x-icon" href="imagenes/logo.png" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
    
    <!-- Link to the manifest file -->
    <link rel="manifest" href="manifest.json">
    
    <style>
        /* Estilo para el video */
        video {
            position: fixed; 
            top: 0;
            left: 0;
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            z-index: -1; 
        }

        /* Estilo para la imagen de fondo */
        .background-image {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%; 
            height: 100%; 
            background-image: url('imagenes/logo.png'); 
            background-size: cover; 
            background-position: center; 
            z-index: -1; 
            filter: blur(10px); 
        }

        /* Asegura que el body y html ocupen el 100% */
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: auto; 
        }

        /* Estilos para el botón de instalación */
        #installButtonWrapper {
            position: relative; 
            top: 0; 
            left: 50%; 
            transform: translateX(-50%); 
            z-index: 10; 
        }

        #installButton {
            width: 150px; 
            cursor: pointer; 
            transition: transform 0.2s; 
        }

        #installButton:hover {
            transform: scale(1.1); 
        }

        /* Estilos para los iconos de redes sociales */
        .social-icons {
            position: absolute;
            right: 20px; 
            top: 50%; 
            transform: translateY(-50%); 
            display: flex;
            flex-direction: column; 
            gap: 10px; 
        }

        .social-icon {
            width: 40px; 
            height: 40px; 
            border-radius: 50%; 
            object-fit: cover; 
        }

        /* Estilo para el modal del chat */
        .chat-modal {
            display: none; 
            position: fixed;
            top: 0; 
            left: 0; 
            width: 100vw; 
            height: 100vh; 
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            transition: transform 0.5s ease;
            transform: translateY(100%); 
            z-index: 999;
        }

        .chat-modal.show {
            display: block;
            transform: translateY(0); 
        }

        .chat-modal iframe {
            width: 100%; 
            height: 100%; 
            border: none;
        }

        .close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 30px;
            cursor: pointer;
            z-index: 1000; 
        }
    </style>

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Radio La Grande" />
    <meta property="og:description" content="Radio La Grande ¡Escucha y disfruta las 24 horas!" />
    <meta property="og:image" content="imagenes/logo.png" />
    <meta property="og:url" content="http://radiolagrandepacaypampa.com/" />
    <meta property="og:type" content="website" />
</head>
<body>
    <div class="background-image"></div>
    <video src="video.mp4" autoplay muted loop></video>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign="top">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="50%">&nbsp;</td>
                        <td width="50%" align="right">
                            <div id="mySidebar" class="sidebar">
                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td><img src="imagenes/logo.png" class="pulse-logo" width="100%" height="auto"></td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                    </tr>
                                    <tr>
                                        
                                        <td>
                                            <table width="100%" border="0" cellpadding="0" cellspacing="10">
                                                <tr>
                                                    <td><a href="javascript:void(0);" onclick="closeNav();"><img src="imagenes/inicio.png" width="100%" height="auto" border="0"></a></td>
                                                </tr>
                                                <tr>
                                                    <td><a href="tel:+51926591014" target="_blank"><img src="imagenes/llamanos.png" width="100%" height="auto" border="0"></a></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><hr></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="100%" border="0" cellpadding="0" cellspacing="10">
                                                <tr>
                                                    <td><a href="http://radiolagrandepacaypampa.com" target="_blank"><img src="imagenes/web.png" width="100%" height="auto" border="0"></a></td>
                                                </tr>
                                                <tr>
                                                    <td><a href="https://www.instagram.com/" target="_blank"><img src="imagenes/instagram.png" width="100%" height="auto" border="0"></a></td>
                                                </tr>
                                                <tr>
                                                    <td><a href="https://www.tiktok.com/@" target="_blank"><img src="imagenes/tiktok.png" width="100%" height="auto" border="0"></a></td>
                                                </tr>
                                                <tr>
                                                    <td><a href="https://youtube.com/@" target="_blank"><img src="imagenes/Youtube.png" width="100%" height="auto" border="0"></a></td>
                                                </tr>
                                                <tr>
                                                    <td><a href="https://www.messenger.com/" target="_blank"><img src="imagenes/messenger.png" width="100%" height="auto" border="0"></a></td>
                                                </tr>
                                                <tr></tr>
                                                    <td><a href="mailto:radiolagrande@gmail.com" target="_blank"><img src="imagenes/email.png" width="100%" height="auto" border="0"></a></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><hr></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="100%" border="0" cellpadding="0" cellspacing="10">
                                                <tr>
                                                    <td>
                                                        <a href="https://www.facebook.com/sharer/sharer.php?u=http://radiolagrandepacaypampa.com" target="_blank">
                                                            <img src="imagenes/compartirfacebook.png" class="pulse" width="100%" height="auto">
                                                        </a>                                                         
                                                        <a href="https://api.whatsapp.com/send?text=¡Hola! Te Invito a escuchar nuestra Emisora http://radiolagrandepacaypampa.com" target="_blank">
                                                            <img src="imagenes/compartirwhatsapp.png" class="pulse" width="100%" height="auto">
                                                        </a>                                                                                                              
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <div id="main">
                                <button class="openbtn" onClick="toggleNav()">
                                    <img src="menu.png" alt="Menu" class="menu-icon">
                                </button>                            
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td height="470" valign="top">
              <div id="installButtonWrapper">
                <img src="" id="installButton" alt="" />
            </div>         
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                <script src="js/lunaradio.min.js"></script>
                <div id="lunaradio" style="width: 100%; height: 76vh;"></div>
            </td>
        </tr>
    </table>

    <div class="social-icons">
        <a href="https://wa.me/51940703156" target="_blank">
            <img src="iconos/whatsapp.png" class="social-icon" alt="WhatsApp">
        </a>
        <a href="https://www.facebook.com/" target="_blank">
            <img src="iconos/facebook.png" class="social-icon" alt="Facebook">
        </a>
        <a href="https://www.tiktok.com/@" target="_blank">
            <img src="iconos/tiktok.png" class="social-icon" alt="Instagram">
            </a>
  
    </div>  

    <script>
        let deferredPrompt;

        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
            document.getElementById('installButtonWrapper').style.display = 'block'; // Muestra el botón
        });

        document.getElementById('installButton').addEventListener('click', () => {
            if (deferredPrompt) {
                deferredPrompt.prompt();
                deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        console.log('Usuario aceptó la instalación');
                    } else {
                        console.log('Usuario rechazó la instalación');
                    }
                });
                deferredPrompt = null; // Resetea el prompt
                document.getElementById('installButtonWrapper').style.display = 'none'; // Oculta el botón
            }
        });

        // Lógica para abrir y cerrar el menú
        function toggleNav() {
            const sidebar = document.getElementById("mySidebar");
            const main = document.getElementById("main");
            
            if (sidebar.style.width === "250px") {
                closeNav();
            } else {
                openNav();
            }
        }

        function openNav() {
            document.getElementById("mySidebar").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
        }

        function closeNav() {
            document.getElementById("mySidebar").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
        }

        // Cerrar el menú al hacer clic fuera de él
        document.addEventListener('click', function(event) {
            const sidebar = document.getElementById("mySidebar");
            const button = document.querySelector('.openbtn');

            if (sidebar.style.width === "250px" && !sidebar.contains(event.target) && !button.contains(event.target)) {
                closeNav();
            }
        });

        // Inicialización del reproductor
        jQuery(document).ready(function($) {
            $("#lunaradio").lunaradio({
                userinterface: "big",
                backgroundcolor: "transparent",
                fontcolor: "#ffffff",
                hightlightcolor: "#fe0000",
                fontname: "Unica One",
	            googlefont: "Unica+One&display=swap",
	            fontratio: "0.6",
                radioname: "RADIO LA GRANDE",
                scroll: "true",
                coverimage: "imagenes/logo.png",
                onlycoverimage: "false",
                coverstyle: "",
                usevisualizer: "real",
                visualizertype: "3",
                multicolorvisualizer: "true",
                color1: "#ffffff",
                visualizeropacity: "0.0",
                itunestoken: "1000lIPN",
                metadatatechnic: "",
                ownmetadataurl: "true",
                metadata: "",
                streamurl: "http://stream.zeno.fm/cce3cuyehf9uv",
                streamtype: "shoutcast",
                shoutcastpath: "/stream",
                debug: "false",
                autoplay: "true",
                displayliveicon: "true",
                displayvisualizericon: "true",
            });
        });


 

        // Lógica para abrir y cerrar el chat modal
        document.getElementById('chatIcon').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('chatModal').classList.toggle('show');
        });

        document.getElementById('closeChat').addEventListener('click', function() {
            document.getElementById('chatModal').classList.remove('show');
        });
    </script>
    
    
    
    <!-- Register Service Worker -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('sw.js')
                    .then(reg => console.log('Service Worker registrado con éxito:', reg))
                    .catch(err => console.log('Error al registrar el Service Worker:', err));
            });
        }
        
         
   
            $(".mobile-nav-toggle").click(function () {
                $("body").toggleClass("mobile-nav-active");
                $(".mobile-nav-toggle i").toggleClass("fa-bars fa-times");
            });
        </script>
    </script>
    <footer style="display:grid;align-content:end">
        <div style="#3e3e94; color:#000000;text-align:center;padding:3px">
            &copy; Diseñado Por: Corporaciòn Mundial de Streaming Cel. 955891225</a>
        </div>
        <script>
</body>


</html>