Auto commit: 2026-02-04T01:00:55.778Z
This commit is contained in:
Flatlogic Bot
parent
23766b7115
commit
567f240841
@ -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()">×</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>
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
background: rgba(11, 13, 23, 0.95);
|
||||
backdrop-filter: blur(15px);
|
||||
height: 150px;
|
||||
background: rgba(11, 13, 23, 0.98);
|
||||
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);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user