Lili Records Radio V1.02
This commit is contained in:
Flatlogic Bot
parent
0f64111c7f
commit
ab29e5490d
222
index.php
222
index.php
@ -1,5 +1,6 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
require_once __DIR__ . '/db/config.php';
|
||||
@ini_set('display_errors', '0');
|
||||
@error_reporting(E_ALL);
|
||||
|
||||
@ -9,6 +10,15 @@ $streamUrl = "https://play.radioking.io/lili-record-s-radio";
|
||||
$whatsappNumber = "5359177041";
|
||||
$whatsappLink = "https://wa.me/" . $whatsappNumber;
|
||||
$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>
|
||||
<html lang="es">
|
||||
@ -68,8 +78,8 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
.main-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 1300px;
|
||||
padding: 2rem;
|
||||
@ -80,7 +90,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
@media (max-width: 992px) {
|
||||
.main-wrapper {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
@ -97,20 +107,23 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 24px;
|
||||
padding: 2.5rem;
|
||||
flex: 0 0 450px;
|
||||
max-width: 450px;
|
||||
flex: 0 0 400px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.right-image-container {
|
||||
.right-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.promo-image {
|
||||
@ -122,20 +135,114 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.promo-image:hover {
|
||||
transform: scale(1.02);
|
||||
.comments-window {
|
||||
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 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #ff2d55, #ff512f);
|
||||
margin: 0 auto 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
font-size: 2rem;
|
||||
box-shadow: 0 0 30px rgba(255, 45, 85, 0.4);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@ -147,11 +254,11 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
}
|
||||
|
||||
.song-info {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.song-title {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
display: block;
|
||||
@ -161,27 +268,26 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.7;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-play {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border: none;
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -204,15 +310,6 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.volume-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qr-section {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
@ -220,8 +317,8 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
}
|
||||
|
||||
.qr-placeholder {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 2px dashed var(--glass-border);
|
||||
border-radius: 12px;
|
||||
@ -230,7 +327,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.65rem;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
@ -277,7 +374,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
opacity: 0.3;
|
||||
opacity: 0.2;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
@ -287,7 +384,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
|
||||
<div class="main-wrapper">
|
||||
<!-- Left: Player -->
|
||||
<main class="player-container">
|
||||
<aside class="player-container">
|
||||
<div class="live-badge">En Vivo</div>
|
||||
|
||||
<div class="radio-logo">
|
||||
@ -305,10 +402,10 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 px-4">
|
||||
<i class="fas fa-volume-low opacity-50"></i>
|
||||
<div class="d-flex align-items-center gap-2 px-3">
|
||||
<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">
|
||||
<i class="fas fa-volume-high opacity-50"></i>
|
||||
<i class="fas fa-volume-high opacity-50 small"></i>
|
||||
</div>
|
||||
|
||||
<div class="qr-section">
|
||||
@ -320,11 +417,46 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
</div>
|
||||
|
||||
<canvas id="visualizer"></canvas>
|
||||
</main>
|
||||
</aside>
|
||||
|
||||
<!-- Right: Provided Image -->
|
||||
<div class="right-image-container">
|
||||
<!-- Right: Image + Comments -->
|
||||
<div class="right-content">
|
||||
<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>
|
||||
|
||||
@ -399,7 +531,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#ff2d55';
|
||||
|
||||
const bars = 50;
|
||||
const bars = 40;
|
||||
const barWidth = canvas.width / bars;
|
||||
|
||||
for (let i = 0; i < bars; i++) {
|
||||
@ -410,6 +542,10 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
|
||||
setTimeout(() => requestAnimationFrame(drawVisualizer), 100);
|
||||
}
|
||||
drawVisualizer();
|
||||
|
||||
// Scroll to bottom of comments
|
||||
const commentsList = document.getElementById('commentsList');
|
||||
commentsList.scrollTop = 0; // Show latest first
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
30
submit_request.php
Normal file
30
submit_request.php
Normal 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;
|
||||
Loading…
x
Reference in New Issue
Block a user