diff --git a/assets/pasted-20260130-234122-115a4b49.png b/assets/pasted-20260130-234122-115a4b49.png new file mode 100644 index 0000000..12938ff Binary files /dev/null and b/assets/pasted-20260130-234122-115a4b49.png differ diff --git a/index.php b/index.php index 3888ad4..4f20653 100644 --- a/index.php +++ b/index.php @@ -8,6 +8,7 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ''; $streamUrl = "https://play.radioking.io/lili-record-s-radio"; $whatsappNumber = "5359177041"; $whatsappLink = "https://wa.me/" . $whatsappNumber; +$promoImage = "assets/pasted-20260130-234122-115a4b49.png"; ?> @@ -43,26 +44,50 @@ $whatsappLink = "https://wa.me/" . $whatsappNumber; font-family: 'Inter', sans-serif; background: #0a0a0a; color: #fff; - height: 100vh; + min-height: 100vh; margin: 0; - overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; + overflow-x: hidden; } - /* Background Image Placeholder or User Image */ + /* Background Image */ .bg-image { - position: absolute; + position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: url('https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat; - filter: brightness(0.4) blur(5px); + background: url('') center/cover no-repeat; + filter: brightness(0.3) blur(8px); z-index: -1; - transition: all 1s ease-in-out; + } + + .main-wrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + max-width: 1300px; + padding: 2rem; + gap: 3rem; + z-index: 1; + } + + @media (max-width: 992px) { + .main-wrapper { + flex-direction: column; + justify-content: center; + padding: 1rem; + gap: 2rem; + } + body { + overflow-y: auto; + height: auto; + } } .player-container { @@ -72,23 +97,45 @@ $whatsappLink = "https://wa.me/" . $whatsappNumber; border: 1px solid var(--glass-border); border-radius: 24px; padding: 2.5rem; + flex: 0 0 450px; max-width: 450px; - width: 90%; + width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative; } + .right-image-container { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + max-width: 600px; + } + + .promo-image { + width: 100%; + height: auto; + border-radius: 24px; + box-shadow: 0 20px 50px rgba(0,0,0,0.6); + border: 1px solid var(--glass-border); + transition: transform 0.5s ease; + } + + .promo-image:hover { + transform: scale(1.02); + } + .radio-logo { - width: 120px; - height: 120px; + width: 100px; + height: 100px; border-radius: 50%; background: linear-gradient(135deg, #ff2d55, #ff512f); margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; - font-size: 3rem; + font-size: 2.5rem; box-shadow: 0 0 30px rgba(255, 45, 85, 0.4); animation: pulse 2s infinite; } @@ -128,13 +175,13 @@ $whatsappLink = "https://wa.me/" . $whatsappNumber; } .btn-play { - width: 80px; - height: 80px; + width: 70px; + height: 70px; border-radius: 50%; background: #fff; color: #000; border: none; - font-size: 2rem; + font-size: 1.8rem; display: flex; align-items: center; justify-content: center; @@ -167,23 +214,23 @@ $whatsappLink = "https://wa.me/" . $whatsappNumber; } .qr-section { - margin-top: 2rem; - padding-top: 1.5rem; + margin-top: 1.5rem; + padding-top: 1rem; border-top: 1px solid var(--glass-border); } .qr-placeholder { - width: 150px; - height: 150px; + width: 120px; + height: 120px; background: rgba(255,255,255,0.05); border: 2px dashed var(--glass-border); border-radius: 12px; - margin: 1rem auto; + margin: 0.8rem auto; display: flex; flex-direction: column; align-items: center; justify-content: center; - font-size: 0.8rem; + font-size: 0.75rem; color: rgba(255,255,255,0.5); } @@ -213,12 +260,12 @@ $whatsappLink = "https://wa.me/" . $whatsappNumber; .live-badge { position: absolute; - top: 20px; - left: 20px; + top: 15px; + left: 15px; background: var(--primary-color); - padding: 4px 12px; + padding: 3px 10px; border-radius: 20px; - font-size: 0.75rem; + font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; @@ -238,40 +285,48 @@ $whatsappLink = "https://wa.me/" . $whatsappNumber;
-
-
En Vivo
- - - -
- Conectando... - Lili Records Radio -
- -
- -
- -
- - - -
- -
-

Apóyanos vía Transfermóvil

-
- - Espacio para QR +
+ +
+
En Vivo
+ + + +
+ Conectando... + Lili Records Radio +
+ +
+ +
+ +
+ + + +
+ +
+

Apóyanos vía Transfermóvil

+
+ + Espacio para QR +
+
+ + +
+ + +
+ Lili Records Promo
- - -
+ @@ -308,7 +363,6 @@ $whatsappLink = "https://wa.me/" . $whatsappNumber; // Fetch song metadata from RadioKing async function fetchMetadata() { try { - // RadioKing public widget API for current track const response = await fetch('https://api.radioking.io/widget/radio/lili-record-s-radio/track/current'); const data = await response.json(); @@ -321,15 +375,19 @@ $whatsappLink = "https://wa.me/" . $whatsappNumber; } } - // Update metadata every 10 seconds setInterval(fetchMetadata, 10000); fetchMetadata(); // Simple visualizer effect const canvas = document.getElementById('visualizer'); const ctx = canvas.getContext('2d'); - canvas.width = canvas.offsetWidth; - canvas.height = canvas.offsetHeight; + + function resizeCanvas() { + canvas.width = canvas.offsetWidth; + canvas.height = canvas.offsetHeight; + } + window.addEventListener('resize', resizeCanvas); + resizeCanvas(); function drawVisualizer() { if (!isPlaying) {