Auto commit: 2026-01-31T02:25:58.333Z
This commit is contained in:
parent
6559e1578e
commit
44dc375ca7
94
index.php
94
index.php
@ -103,6 +103,12 @@ try {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
|
.left-column {
|
||||||
|
position: static;
|
||||||
|
flex: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
.main-wrapper {
|
.main-wrapper {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -115,6 +121,15 @@ try {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.left-column {
|
||||||
|
position: sticky;
|
||||||
|
top: 2rem;
|
||||||
|
flex: 0 0 300px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.player-container {
|
.player-container {
|
||||||
background: var(--glass-bg);
|
background: var(--glass-bg);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
@ -122,13 +137,9 @@ try {
|
|||||||
border: 1px solid var(--glass-border);
|
border: 1px solid var(--glass-border);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 1.25rem;
|
padding: 1.25rem;
|
||||||
flex: 0 0 300px;
|
|
||||||
max-width: 300px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||||
position: sticky;
|
|
||||||
top: 2rem;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -550,38 +561,47 @@ try {
|
|||||||
<div class="bg-image" id="bgImage"></div>
|
<div class="bg-image" id="bgImage"></div>
|
||||||
|
|
||||||
<div class="main-wrapper">
|
<div class="main-wrapper">
|
||||||
<!-- Left: Player -->
|
<!-- Left: Player & Admin Stats -->
|
||||||
<aside class="player-container">
|
<div class="left-column">
|
||||||
<div class="live-badge">En Vivo</div>
|
<aside class="player-container">
|
||||||
|
<div class="live-badge">En Vivo</div>
|
||||||
<div class="radio-logo">
|
|
||||||
<img src="<?= $logoImage ?>" alt="Lili Records Logo">
|
<div class="radio-logo">
|
||||||
</div>
|
<img src="<?= $logoImage ?>" alt="Lili Records Logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="song-info">
|
<div class="song-info">
|
||||||
<span class="song-title" id="songTitle">Conectando...</span>
|
<span class="song-title" id="songTitle">Conectando...</span>
|
||||||
<span class="artist-name" id="artistName">Lili Records Radio</span>
|
<span class="artist-name" id="artistName">Lili Records Radio</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="player-controls-row">
|
<div class="player-controls-row">
|
||||||
<button class="btn-play" id="playBtn">
|
<button class="btn-play" id="playBtn">
|
||||||
<i class="fas fa-play" id="playIcon"></i>
|
<i class="fas fa-play" id="playIcon"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="volume-slider-container">
|
<div class="volume-slider-container">
|
||||||
<i class="fas fa-volume-low opacity-50 x-small" style="font-size: 0.7rem;"></i>
|
<i class="fas fa-volume-low opacity-50 x-small" style="font-size: 0.7rem;"></i>
|
||||||
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="0.8">
|
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="0.8">
|
||||||
<i class="fas fa-volume-high opacity-50 x-small" style="font-size: 0.7rem;"></i>
|
<i class="fas fa-volume-high opacity-50 x-small" style="font-size: 0.7rem;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<canvas id="visualizer"></canvas>
|
||||||
|
|
||||||
|
<?php if ($isAdmin): ?>
|
||||||
|
<div class="mt-3">
|
||||||
|
<a href="?logout=1" class="btn btn-sm btn-outline-light opacity-50" style="font-size: 0.7rem;">Cerrar Admin</a>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<?php if ($isAdmin): ?>
|
||||||
|
<div class="admin-stats-box" style="margin-bottom: 0;">
|
||||||
|
<h6 class="small mb-2 opacity-75"><i class="fas fa-globe-americas me-1"></i> Estadísticas en Tiempo Real</h6>
|
||||||
|
<iframe src="https://lili-records-radio-7109.dev.flatlogic.app/" class="admin-iframe" style="height: 350px;"></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
<canvas id="visualizer"></canvas>
|
|
||||||
|
|
||||||
<?php if ($isAdmin): ?>
|
|
||||||
<div class="mt-3">
|
|
||||||
<a href="?logout=1" class="btn btn-sm btn-outline-light opacity-50" style="font-size: 0.7rem;">Cerrar Admin</a>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- Right: Image + Comments -->
|
<!-- Right: Image + Comments -->
|
||||||
<div class="right-content">
|
<div class="right-content">
|
||||||
@ -599,13 +619,7 @@ try {
|
|||||||
<p class="qr-text-mini">Apoya</p>
|
<p class="qr-text-mini">Apoya</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="comments-list" id="commentsList">
|
||||||
<div class="admin-stats-box">
|
|
||||||
<h6 class="small mb-2 opacity-75"><i class="fas fa-globe-americas me-1"></i> Oyentes y Países en Tiempo Real</h6>
|
|
||||||
<iframe src="https://lili-records-radio-7109.dev.flatlogic.app/" class="admin-iframe"></iframe>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="comments-list" id="commentsList">
|
|
||||||
<?php if (empty($requests)): ?>
|
<?php if (empty($requests)): ?>
|
||||||
<div class="text-center py-5 opacity-50">
|
<div class="text-center py-5 opacity-50">
|
||||||
<i class="fas fa-comment-dots fa-3x mb-3"></i>
|
<i class="fas fa-comment-dots fa-3x mb-3"></i>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user