From ab29e5490d3a28bf6b1141124f1598074643e623 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Fri, 30 Jan 2026 23:49:02 +0000 Subject: [PATCH] Lili Records Radio V1.02 --- index.php | 222 ++++++++++++++++++++++++++++++++++++--------- submit_request.php | 30 ++++++ 2 files changed, 209 insertions(+), 43 deletions(-) create mode 100644 submit_request.php diff --git a/index.php b/index.php index 4f20653..d4eab10 100644 --- a/index.php +++ b/index.php @@ -1,5 +1,6 @@ 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 +} ?> @@ -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; } @@ -287,7 +384,7 @@ $promoImage = "assets/pasted-20260130-234122-115a4b49.png";
-
+
+ - -
+ +
Lili Records Promo + +
+
+
Peticiones y Comentarios
+ +
+ +
+ +
+ +

No hay peticiones aún. ¡Sé el primero!

+
+ + +
+ +

+ +
+ + +
+ +
+ +
+ + +
+ Al enviar se abrirá WhatsApp +
+
@@ -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 \ No newline at end of file diff --git a/submit_request.php b/submit_request.php new file mode 100644 index 0000000..871b328 --- /dev/null +++ b/submit_request.php @@ -0,0 +1,30 @@ +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;