Auto commit: 2026-02-04T01:00:55.778Z

core/templates/base.html

@@ -33,11 +33,6 @@
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto">
-                    <li class="nav-item">
-                        <a class="nav-link fw-bold text-cyan" href="{{ radio_url }}" target="_blank">
-                            <i class="fas fa-play-circle me-1"></i> Escuchar Música
-                        </a>
-                    </li>
                     <li class="nav-item">
                         <a class="nav-link" href="#schedule">Horario</a>
                     </li>
@@ -67,6 +62,21 @@
         {% block content %}{% endblock %}
     </main>
 
+    <!-- Radio Player Bar -->
+    <div id="playerBar" class="player-bar">
+        <div class="container d-flex align-items-center h-100 position-relative">
+            <button class="close-player" onclick="toggleRadioPlayer()">&times;</button>
+            <div class="player-iframe-container">
+                <iframe id="radioIframe" src="" allow="autoplay"></iframe>
+            </div>
+            <div class="player-external-link ms-3 d-none d-md-block">
+                <a href="{{ radio_url }}" target="_blank" class="btn btn-sm btn-outline-cyan rounded-pill">
+                    <i class="fas fa-external-link-alt small"></i> Abrir en ventana
+                </a>
+            </div>
+        </div>
+    </div>
+
     <!-- WhatsApp Widget -->
     <div class="whatsapp-widget">
         <div class="whatsapp-tooltip">¡Envía tu mensaje de voz aquí!</div>
@@ -84,6 +94,27 @@
 
     <!-- Bootstrap 5 JS Bundle -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <script>
+        function toggleRadioPlayer(event) {
+            if (event) event.preventDefault();
+            const playerBar = document.getElementById('playerBar');
+            const radioIframe = document.getElementById('radioIframe');
+            const body = document.body;
+            const radioUrl = "{{ radio_url }}";
+
+            if (playerBar.classList.contains('active')) {
+                playerBar.classList.remove('active');
+                body.classList.remove('player-active');
+            } else {
+                if (!radioIframe.src || radioIframe.src === window.location.href || radioIframe.src === "") {
+                    radioIframe.src = radioUrl;
+                }
+                playerBar.classList.add('active');
+                body.classList.add('player-active');
+            }
+        }
+    </script>
     {% block scripts %}{% endblock %}
 </body>
 </html>

core/templates/core/index.html

@@ -7,16 +7,11 @@
     <div class="container">
         <div class="row justify-content-center">
             <div class="col-lg-8">
-                <a href="{{ radio_url }}" target="_blank" class="text-decoration-none">
+                <a href="#" onclick="toggleRadioPlayer(event)" class="text-decoration-none">
                     <span class="live-badge mb-3 d-inline-block">En Vivo</span>
                 </a>
                 <h1 class="display-3 fw-bold mb-4">Tu Voz, Tu Música, <br><span style="color: var(--neon-cyan)">Tu Radio.</span></h1>
                 <p class="lead text-muted mb-5">Transmitiendo los mejores discos las 24 horas, los 7 días de la semana. Únete a nuestra comunidad y crea la lista de reproducción.</p>
-                <div class="d-flex justify-content-center gap-3">
-                    <a href="{{ radio_url }}" target="_blank" class="btn btn-neon px-5 py-3 fs-5">
-                        <i class="fas fa-play me-2"></i> Escuchar Música
-                    </a>
-                </div>
                 <div class="mt-4 d-flex justify-content-center gap-3">
                     <a href="#request" class="btn btn-outline-light rounded-pill px-4">Pedir una Canción</a>
                     <a href="#schedule" class="btn btn-outline-light rounded-pill px-4">Ver Horario</a>

static/css/custom.css

@@ -22,7 +22,7 @@ body {
 }
 
 body.player-active {
-    padding-bottom: 100px;
+    padding-bottom: 150px; /* Incrementado para el nuevo alto del player */
 }
 
 body::before {
@@ -36,7 +36,7 @@ body::before {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    opacity: 0.15; /* Sutil transparencia para no interferir con la legibilidad */
+    opacity: 0.15;
     z-index: -1;
     pointer-events: none;
 }
@@ -55,16 +55,19 @@ body::before {
     font-size: 1.5rem;
 }
 
+.text-cyan {
+    color: var(--neon-cyan) !important;
+}
+
 .hero-section {
     padding: 100px 0;
     position: relative;
-    /* Ajustado para ser más transparente y dejar ver el fondo */
     background: radial-gradient(circle at top right, rgba(255, 0, 122, 0.05), transparent),
                 radial-gradient(circle at bottom left, rgba(0, 240, 255, 0.05), transparent);
 }
 
 .card {
-    background-color: rgba(26, 30, 46, 0.7); /* Transparencia en las tarjetas */
+    background-color: rgba(26, 30, 46, 0.7);
     backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 15px;
@@ -93,6 +96,18 @@ body::before {
     color: white;
 }
 
+.btn-outline-cyan {
+    border: 1px solid var(--neon-cyan);
+    color: var(--neon-cyan);
+    background: transparent;
+    transition: all 0.3s ease;
+}
+
+.btn-outline-cyan:hover {
+    background: var(--neon-cyan);
+    color: var(--bg-dark);
+}
+
 .form-control {
     background-color: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
@@ -151,7 +166,7 @@ body::before {
 }
 
 body.player-active .whatsapp-widget {
-    bottom: 130px;
+    bottom: 180px;
 }
 
 .whatsapp-button {
@@ -175,41 +190,18 @@ body.player-active .whatsapp-widget {
     box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
 }
 
-.whatsapp-tooltip {
-    background: var(--bg-card);
-    color: white;
-    padding: 10px 15px;
-    border-radius: 10px;
-    margin-bottom: 15px;
-    font-size: 0.9rem;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    opacity: 0;
-    transform: translateY(10px);
-    transition: all 0.3s ease;
-    pointer-events: none;
-    white-space: nowrap;
-}
-
-.whatsapp-widget:hover .whatsapp-tooltip {
-    opacity: 1;
-    transform: translateY(0);
-}
-
 /* Player Bar */
 .player-bar {
     position: fixed;
-    bottom: -150px;
+    bottom: -200px;
     left: 0;
     width: 100%;
-    height: 100px;
+    height: 150px;
-    background: rgba(11, 13, 23, 0.95);
+    background: rgba(11, 13, 23, 0.98);
-    backdrop-filter: blur(15px);
+    backdrop-filter: blur(20px);
     border-top: 2px solid var(--neon-cyan);
     z-index: 2000;
-    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-    display: flex;
-    align-items: center;
 }
 
 .player-bar.active {
@@ -217,7 +209,7 @@ body.player-active .whatsapp-widget {
 }
 
 .player-iframe-container {
-    width: 100%;
+    flex-grow: 1;
     height: 100%;
     position: relative;
     overflow: hidden;
@@ -225,24 +217,31 @@ body.player-active .whatsapp-widget {
 
 .player-iframe-container iframe {
     width: 100%;
-    height: 350px; /* Mostramos solo la parte superior del player de RadioKing */
+    height: 400px; /* Suficiente alto para ver controles */
     border: none;
     position: absolute;
-    top: -120px; /* Ajuste para centrar los controles del player */
+    top: -125px; /* Ajuste para mostrar el centro del player de RadioKing */
 }
 
 .close-player {
     position: absolute;
-    top: 5px;
+    top: 50%;
     right: 15px;
-    background: none;
+    transform: translateY(-50%);
+    background: rgba(255, 255, 255, 0.1);
     border: none;
-    color: var(--text-muted);
+    color: white;
     font-size: 1.5rem;
     cursor: pointer;
     z-index: 2001;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .close-player:hover {
-    color: var(--neon-pink);
+    background: var(--neon-pink);
 }