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

Lili Records Radio V1.02

Browse Source
This commit is contained in:
Flatlogic Bot 2026-01-30 23:49:02 +00:00
parent 0f64111c7f
commit ab29e5490d
2 changed files with 209 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
index.php
View File

@ -1,5 +1,6 @@
<?php <?php
declare(strict_types=1); declare(strict_types=1);
require_once __DIR__ . '/db/config.php';
@ini_set('display_errors', '0'); @ini_set('display_errors', '0');
@error_reporting(E_ALL); @error_reporting(E_ALL);
@ -9,6 +10,15 @@ $streamUrl = "https://play.radioking.io/lili-record-s-radio";
$whatsappNumber = "5359177041"; $whatsappNumber = "5359177041";
$whatsappLink = "https://wa.me/" . $whatsappNumber; $whatsappLink = "https://wa.me/" . $whatsappNumber;
$promoImage = "assets/pasted-20260130-234122-115a4b49.png"; $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
// Fetch latest requests
$requests = [];
try {
$stmt = db()->query("SELECT name, message, created_at FROM listener_requests ORDER BY created_at DESC LIMIT 10");
$requests = $stmt->fetchAll();
} catch (Exception $e) {
// Silently fail if table doesn't exist yet or other DB error
}
?> ?>
<!doctype html> <!doctype html>
<html lang="es"> <html lang="es">
@ -68,8 +78,8 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
.main-wrapper { .main-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-start;
justify-content: space-between; justify-content: center;
width: 100%; width: 100%;
max-width: 1300px; max-width: 1300px;
padding: 2rem; padding: 2rem;
@ -80,7 +90,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
@media (max-width: 992px) { @media (max-width: 992px) {
.main-wrapper { .main-wrapper {
flex-direction: column; flex-direction: column;
justify-content: center; align-items: center;
padding: 1rem; padding: 1rem;
gap: 2rem; gap: 2rem;
} }
@ -97,20 +107,23 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
border-radius: 24px; border-radius: 24px;
padding: 2.5rem; padding: 2.5rem;
flex: 0 0 450px; flex: 0 0 400px;
max-width: 450px; max-width: 400px;
width: 100%; width: 100%;
text-align: center; text-align: center;
box-shadow: 0 20px 50px rgba(0,0,0,0.5); box-shadow: 0 20px 50px rgba(0,0,0,0.5);
position: relative; position: relative;
position: sticky;
top: 2rem;
} }
.right-image-container { .right-content {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; gap: 2rem;
max-width: 600px; max-width: 600px;
width: 100%;
} }
.promo-image { .promo-image {
@ -122,20 +135,114 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.promo-image:hover { .comments-window {
transform: scale(1.02); background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 1.5rem;
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
display: flex;
flex-direction: column;
max-height: 500px;
}
.comments-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--glass-border);
}
.comments-list {
overflow-y: auto;
flex: 1;
padding-right: 0.5rem;
}
.comments-list::-webkit-scrollbar {
width: 4px;
}
.comments-list::-webkit-scrollbar-thumb {
background: var(--glass-border);
border-radius: 10px;
}
.comment-item {
background: rgba(255,255,255,0.05);
border-radius: 12px;
padding: 0.8rem;
margin-bottom: 0.8rem;
font-size: 0.9rem;
}
.comment-user {
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.2rem;
display: block;
}
.comment-text {
opacity: 0.9;
}
.comment-date {
font-size: 0.7rem;
opacity: 0.4;
display: block;
margin-top: 0.4rem;
}
.request-form {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-control-glass {
background: rgba(255,255,255,0.1);
border: 1px solid var(--glass-border);
color: #fff;
border-radius: 12px;
padding: 0.6rem 1rem;
}
.form-control-glass:focus {
background: rgba(255,255,255,0.15);
border-color: var(--primary-color);
box-shadow: none;
color: #fff;
}
.btn-send-request {
background: var(--primary-color);
border: none;
border-radius: 12px;
padding: 0.6rem;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-send-request:hover {
background: #ff512f;
transform: translateY(-2px);
} }
.radio-logo { .radio-logo {
width: 100px; width: 80px;
height: 100px; height: 80px;
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 1.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 2.5rem; font-size: 2rem;
box-shadow: 0 0 30px rgba(255, 45, 85, 0.4); box-shadow: 0 0 30px rgba(255, 45, 85, 0.4);
animation: pulse 2s infinite; animation: pulse 2s infinite;
} }
@ -147,11 +254,11 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
} }
.song-info { .song-info {
margin-bottom: 2rem; margin-bottom: 1.5rem;
} }
.song-title { .song-title {
font-size: 1.5rem; font-size: 1.3rem;
font-weight: 700; font-weight: 700;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
display: block; display: block;
@ -161,27 +268,26 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
} }
.artist-name { .artist-name {
font-size: 1rem; font-size: 0.9rem;
opacity: 0.7; opacity: 0.7;
font-weight: 400;
} }
.controls { .controls {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2rem; gap: 1.5rem;
margin-bottom: 2rem; margin-bottom: 1.5rem;
} }
.btn-play { .btn-play {
width: 70px; width: 60px;
height: 70px; height: 60px;
border-radius: 50%; border-radius: 50%;
background: #fff; background: #fff;
color: #000; color: #000;
border: none; border: none;
font-size: 1.8rem; font-size: 1.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -204,15 +310,6 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
outline: none; outline: none;
} }
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
}
.qr-section { .qr-section {
margin-top: 1.5rem; margin-top: 1.5rem;
padding-top: 1rem; padding-top: 1rem;
@ -220,8 +317,8 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
} }
.qr-placeholder { .qr-placeholder {
width: 120px; width: 100px;
height: 120px; height: 100px;
background: rgba(255,255,255,0.05); background: rgba(255,255,255,0.05);
border: 2px dashed var(--glass-border); border: 2px dashed var(--glass-border);
border-radius: 12px; border-radius: 12px;
@ -230,7 +327,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 0.75rem; font-size: 0.65rem;
color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.5);
} }
@ -277,7 +374,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
left: 0; left: 0;
width: 100%; width: 100%;
height: 60px; height: 60px;
opacity: 0.3; opacity: 0.2;
z-index: -1; z-index: -1;
} }
</style> </style>
@ -287,7 +384,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
<div class="main-wrapper"> <div class="main-wrapper">
<!-- Left: Player --> <!-- Left: Player -->
<main class="player-container"> <aside class="player-container">
<div class="live-badge">En Vivo</div> <div class="live-badge">En Vivo</div>
<div class="radio-logo"> <div class="radio-logo">
@ -305,10 +402,10 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
</button> </button>
</div> </div>
<div class="d-flex align-items-center gap-2 px-4"> <div class="d-flex align-items-center gap-2 px-3">
<i class="fas fa-volume-low opacity-50"></i> <i class="fas fa-volume-low opacity-50 small"></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"></i> <i class="fas fa-volume-high opacity-50 small"></i>
</div> </div>
<div class="qr-section"> <div class="qr-section">
@ -320,11 +417,46 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
</div> </div>
<canvas id="visualizer"></canvas> <canvas id="visualizer"></canvas>
</main> </aside>
<!-- Right: Provided Image --> <!-- Right: Image + Comments -->
<div class="right-image-container"> <div class="right-content">
<img src="<?= $promoImage ?>" alt="Lili Records Promo" class="promo-image"> <img src="<?= $promoImage ?>" alt="Lili Records Promo" class="promo-image">
<div class="comments-window">
<div class="comments-header">
<h5 class="mb-0"><i class="fas fa-comments me-2"></i>Peticiones y Comentarios</h5>
<span class="badge bg-danger rounded-pill"><?= count($requests) ?></span>
</div>
<div class="comments-list" id="commentsList">
<?php if (empty($requests)): ?>
<div class="text-center py-4 opacity-50">
<i class="fas fa-ghost fa-2x mb-2"></i>
<p>No hay peticiones aún. ¡Sé el primero!</p>
</div>
<?php else: ?>
<?php foreach ($requests as $req): ?>
<div class="comment-item">
<span class="comment-user"><?= htmlspecialchars($req['name']) ?></span>
<p class="comment-text mb-0"><?= htmlspecialchars($req['message']) ?></p>
<span class="comment-date"><?= date('d M, H:i', strtotime($req['created_at'])) ?></span>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<form action="submit_request.php" method="POST" class="request-form">
<input type="text" name="name" class="form-control form-control-glass" placeholder="Tu nombre" required>
<div class="input-group">
<textarea name="message" class="form-control form-control-glass" rows="1" placeholder="Tu canción o mensaje..." required></textarea>
<button type="submit" class="btn btn-send-request text-white">
<i class="fas fa-paper-plane"></i>
</button>
</div>
<small class="text-center opacity-50" style="font-size: 0.7rem;">Al enviar se abrirá WhatsApp</small>
</form>
</div>
</div> </div>
</div> </div>
@ -399,7 +531,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#ff2d55'; ctx.fillStyle = '#ff2d55';
const bars = 50; const bars = 40;
const barWidth = canvas.width / bars; const barWidth = canvas.width / bars;
for (let i = 0; i < bars; i++) { for (let i = 0; i < bars; i++) {
@ -410,6 +542,10 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
setTimeout(() => requestAnimationFrame(drawVisualizer), 100); setTimeout(() => requestAnimationFrame(drawVisualizer), 100);
} }
drawVisualizer(); drawVisualizer();
// Scroll to bottom of comments
const commentsList = document.getElementById('commentsList');
commentsList.scrollTop = 0; // Show latest first
</script> </script>
</body> </body>
</html> </html>

30
submit_request.php Normal file
View File

@ -0,0 +1,30 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/db/config.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = $_POST['name'] ?? 'Anónimo';
$message = $_POST['message'] ?? '';
$whatsappNumber = "5359177041";
if (!empty($message)) {
try {
$stmt = db()->prepare("INSERT INTO listener_requests (name, message) VALUES (?, ?)");
$stmt->execute([$name, $message]);
// Redirect to WhatsApp
$whatsappText = urlencode("Hola! Soy $name. Mi petición es: $message");
$redirectUrl = "https://wa.me/$whatsappNumber?text=$whatsappText";
header("Location: $redirectUrl");
exit;
} catch (Exception $e) {
error_log("Error saving request: " . $e->getMessage());
header("Location: index.php?error=1");
exit;
}
}
}
header("Location: index.php");
exit;