admin/38018-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto commit: 2026-01-31T00:48:06.918Z

Browse Source
This commit is contained in:
Flatlogic Bot 2026-01-31 00:48:06 +00:00
parent 450481025e
commit c5e5399ade
1 changed files with 65 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
index.php
View File

@ -60,8 +60,8 @@ try {
<style> <style>
:root { :root {
--primary-color: #ff2d55; --primary-color: #ff2d55;
--glass-bg: rgba(0, 0, 0, 0.6); --glass-bg: rgba(0, 0, 0, 0.2);
--glass-border: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.2);
} }
body { body {
@ -85,7 +85,7 @@ try {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url('<?= $promoImage ?>') center/cover no-repeat; background: url('<?= $promoImage ?>') center/cover no-repeat;
filter: brightness(0.3) blur(8px); filter: brightness(0.4) blur(3px);
z-index: -1; z-index: -1;
} }
@ -116,19 +116,19 @@ try {
.player-container { .player-container {
background: var(--glass-bg); background: var(--glass-bg);
backdrop-filter: blur(20px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
border-radius: 24px; border-radius: 20px;
padding: 2.5rem; padding: 1.25rem;
flex: 0 0 400px; flex: 0 0 300px;
max-width: 400px; max-width: 300px;
width: 100%; width: 100%;
text-align: center; text-align: center;
box-shadow: 0 20px 50px rgba(0,0,0,0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
position: relative;
position: sticky; position: sticky;
top: 2rem; top: 2rem;
transition: all 0.3s ease;
} }
.right-content { .right-content {
@ -151,8 +151,8 @@ try {
.comments-window { .comments-window {
background: var(--glass-bg); background: var(--glass-bg);
backdrop-filter: blur(20px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
border-radius: 24px; border-radius: 24px;
padding: 1.5rem; padding: 1.5rem;
@ -286,18 +286,18 @@ try {
} }
.radio-logo { .radio-logo {
width: 100px; width: 60px;
height: 100px; height: 60px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #ff2d55, #ff512f); background: linear-gradient(135deg, #ff2d55, #ff512f);
margin: 0 auto 1.5rem; margin: 0 auto 0.75rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 0 30px rgba(255, 45, 85, 0.4); box-shadow: 0 0 20px rgba(255, 45, 85, 0.4);
animation: pulse 2s infinite; animation: pulse 2s infinite;
overflow: hidden; overflow: hidden;
border: 3px solid rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.2);
} }
.radio-logo img { .radio-logo img {
@ -307,19 +307,19 @@ try {
} }
@keyframes pulse { @keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 30px rgba(255, 45, 85, 0.4); } 0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 45, 85, 0.4); }
50% { transform: scale(1.05); box-shadow: 0 0 50px rgba(255, 45, 85, 0.6); } 50% { transform: scale(1.05); box-shadow: 0 0 35px rgba(255, 45, 85, 0.6); }
100% { transform: scale(1); box-shadow: 0 0 30px rgba(255, 45, 85, 0.4); } 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 45, 85, 0.4); }
} }
.song-info { .song-info {
margin-bottom: 1.5rem; margin-bottom: 1rem;
} }
.song-title { .song-title {
font-size: 1.3rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
margin-bottom: 0.25rem; margin-bottom: 0.1rem;
display: block; display: block;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -327,39 +327,46 @@ try {
} }
.artist-name { .artist-name {
font-size: 0.9rem; font-size: 0.8rem;
opacity: 0.7; opacity: 0.7;
} }
.controls { .player-controls-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; gap: 0.75rem;
gap: 1.5rem; margin-top: 0.5rem;
margin-bottom: 1.5rem;
} }
.btn-play { .btn-play {
width: 60px; width: 44px;
height: 60px; height: 44px;
border-radius: 50%; border-radius: 50%;
background: #fff; background: #fff;
color: #000; color: #000;
border: none; border: none;
font-size: 1.5rem; font-size: 1.1rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
flex-shrink: 0;
} }
.btn-play:hover { .btn-play:hover {
transform: scale(1.1); transform: scale(1.05);
background: var(--primary-color); background: var(--primary-color);
color: #fff; color: #fff;
} }
.volume-slider-container {
flex: 1;
display: flex;
align-items: center;
gap: 0.5rem;
}
.volume-slider { .volume-slider {
width: 100%; width: 100%;
height: 4px; height: 4px;
@ -370,19 +377,19 @@ try {
} }
.qr-section { .qr-section {
margin-top: 1rem; margin-top: 0.75rem;
padding-top: 1rem; padding-top: 0.75rem;
border-top: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border);
text-align: center; text-align: center;
} }
.qr-image { .qr-image {
width: 120px; width: 80px;
height: 120px; height: 80px;
border-radius: 12px; border-radius: 10px;
margin: 0.5rem auto; margin: 0.25rem auto;
border: 3px solid rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 10px 20px rgba(0,0,0,0.3); box-shadow: 0 5px 15px rgba(0,0,0,0.3);
} }
.whatsapp-btn { .whatsapp-btn {
@ -419,12 +426,12 @@ try {
.live-badge { .live-badge {
position: absolute; position: absolute;
top: 15px; top: 10px;
left: 15px; left: 10px;
background: var(--primary-color); background: var(--primary-color);
padding: 3px 10px; padding: 2px 8px;
border-radius: 20px; border-radius: 20px;
font-size: 0.7rem; font-size: 0.6rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
@ -435,8 +442,8 @@ try {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 60px; height: 40px;
opacity: 0.2; opacity: 0.15;
z-index: -1; z-index: -1;
} }
</style> </style>
@ -458,23 +465,22 @@ try {
<span class="artist-name" id="artistName">Lili Records Radio</span> <span class="artist-name" id="artistName">Lili Records Radio</span>
</div> </div>
<div class="controls"> <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> <div class="volume-slider-container">
<i class="fas fa-volume-low opacity-50 x-small" style="font-size: 0.7rem;"></i>
<div class="d-flex align-items-center gap-2 px-3"> <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="0.8">
<i class="fas fa-volume-low opacity-50 small"></i> <i class="fas fa-volume-high 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"> </div>
<i class="fas fa-volume-high opacity-50 small"></i>
</div> </div>
<canvas id="visualizer"></canvas> <canvas id="visualizer"></canvas>
<?php if ($isAdmin): ?> <?php if ($isAdmin): ?>
<div class="mt-4"> <div class="mt-3">
<a href="?logout=1" class="btn btn-sm btn-outline-light opacity-50">Cerrar Sesión Admin</a> <a href="?logout=1" class="btn btn-sm btn-outline-light opacity-50" style="font-size: 0.7rem;">Cerrar Admin</a>
</div> </div>
<?php endif; ?> <?php endif; ?>
</aside> </aside>
@ -523,7 +529,7 @@ try {
<div class="qr-section"> <div class="qr-section">
<img src="<?= $qrImage ?>" alt="QR Pago" class="qr-image"> <img src="<?= $qrImage ?>" alt="QR Pago" class="qr-image">
<p class="small opacity-50 mt-1">Escanea para apoyar a la radio</p> <p class="small opacity-50 mt-1" style="font-size: 0.7rem;">Apoya a la radio</p>
</div> </div>
<form action="submit_request.php" method="POST" class="request-form"> <form action="submit_request.php" method="POST" class="request-form">
@ -618,7 +624,7 @@ try {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#ff2d55'; ctx.fillStyle = '#ff2d55';
const bars = 40; const bars = 30;
const barWidth = canvas.width / bars; const barWidth = canvas.width / bars;
for (let i = 0; i < bars; i++) { for (let i = 0; i < bars; i++) {
@ -637,4 +643,4 @@ try {
} }
</script> </script>
</body> </body>
</html> </html>