diff --git a/index.php b/index.php index 342af38..cbebf42 100644 --- a/index.php +++ b/index.php @@ -9,6 +9,45 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? 'assets/images/featured.jpg' // WhatsApp info $whatsapp_link = "https://chat.whatsapp.com/DkG96pTzAFO3hvLqmzwmTY"; + +// Program Schedule +$schedule = [ + [ + 'time' => '14:00', + 'name' => 'Techno Sunrise', + 'desc' => 'Comienza el día con los ritmos más puros y energéticos del techno underground.' + ], + [ + 'time' => '16:30', + 'name' => 'Vocal House Sessions', + 'desc' => 'Una selección exquisita de house melódico con las voces más cautivadoras.' + ], + [ + 'time' => '19:00', + 'name' => 'Lili Special Guest', + 'desc' => 'Cada semana, un invitado especial nos trae su visión única de la pista de baile.' + ], + [ + 'time' => '21:00', + 'name' => 'Deep Night Vibes', + 'desc' => 'Sonidos profundos y envolventes para acompañar la calma de la noche.' + ], +]; + +function get_live_index($schedule) { + $current = date('H:i'); + $count = count($schedule); + for ($i = 0; $i < $count; $i++) { + $start = $schedule[$i]['time']; + $next = ($i < $count - 1) ? $schedule[$i+1]['time'] : '23:59'; + if ($current >= $start && $current < $next) return $i; + } + // Handling night transition + if ($current >= $schedule[$count-1]['time'] || $current < $schedule[0]['time']) return $count - 1; + return -1; +} + +$liveIndex = get_live_index($schedule); ?> @@ -108,7 +147,7 @@ $whatsapp_link = "https://chat.whatsapp.com/DkG96pTzAFO3hvLqmzwmTY"; .app-container { display: flex; width: 100%; - max-width: 1000px; + max-width: 1200px; /* Aumentado para acomodar ambas secciones */ height: auto; align-items: center; justify-content: center; @@ -118,6 +157,15 @@ $whatsapp_link = "https://chat.whatsapp.com/DkG96pTzAFO3hvLqmzwmTY"; z-index: 10; } + .app-content { + display: flex; + gap: 2.5rem; + align-items: center; + justify-content: center; + flex-wrap: wrap; + width: 100%; + } + .player-section { width: 100%; max-width: 460px; @@ -127,6 +175,151 @@ $whatsapp_link = "https://chat.whatsapp.com/DkG96pTzAFO3hvLqmzwmTY"; perspective: 1000px; } + /* Upcoming Programs Styles */ + .upcoming-section { + width: 100%; + max-width: 340px; + display: flex; + flex-direction: column; + gap: 1.5rem; + } + + .small-glass { + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 36px; + padding: 2rem; + box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.3); + transition: all 0.5s ease; + } + + .small-glass:hover { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.1); + transform: translateY(-3px); + } + + .upcoming-section h2 { + font-size: 1.1rem; + font-weight: 600; + margin: 0 0 1.5rem; + color: var(--primary-color); + letter-spacing: 0.05em; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 0.8rem; + } + + .upcoming-section h2::before { + content: ''; + width: 4px; + height: 4px; + background: var(--primary-color); + border-radius: 50%; + } + + .program-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 1.2rem; + } + + .program-item { + display: flex; + flex-direction: column; + gap: 0.2rem; + padding-bottom: 1.2rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.03); + transition: all 0.3s ease; + cursor: pointer; + } + + .program-header { + display: flex; + align-items: center; + gap: 1rem; + width: 100%; + } + + .program-description { + max-height: 0; + overflow: hidden; + opacity: 0; + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.45); + line-height: 1.5; + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + padding-left: 4.1rem; /* Alineado con el nombre */ + } + + .program-item.is-expanded .program-description { + max-height: 100px; + opacity: 1; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + + .program-item:last-child { + border-bottom: none; + padding-bottom: 0; + } + + .program-item:hover { + transform: translateX(5px); + } + + .program-item.is-live { + background: rgba(0, 230, 118, 0.08); + border-bottom: 1px solid rgba(0, 230, 118, 0.2); + padding: 1rem; + margin: 0 -1rem; + border-radius: 16px; + position: relative; + } + + .program-item.is-live .program-time { + color: var(--accent-color); + } + + .program-item.is-live .program-name { + color: #fff; + font-weight: 600; + } + + .program-item.is-live::after { + content: 'LIVE'; + position: absolute; + right: 1rem; + font-size: 0.5rem; + font-weight: 800; + color: var(--accent-color); + border: 1px solid var(--accent-color); + padding: 2px 6px; + border-radius: 4px; + letter-spacing: 0.1em; + animation: pulse-glow 2s infinite; + } + + .program-time { + font-size: 0.75rem; + font-weight: 700; + color: rgba(255, 255, 255, 0.4); + min-width: 50px; + } + + .program-name { + font-size: 0.9rem; + font-weight: 400; + color: rgba(255, 255, 255, 0.85); + letter-spacing: 0.01em; + } + .glass-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(30px); @@ -387,7 +580,26 @@ $whatsapp_link = "https://chat.whatsapp.com/DkG96pTzAFO3hvLqmzwmTY"; background-color: var(--accent-color); } + @media (max-width: 992px) { + .app-content { + gap: 2rem; + } + .upcoming-section { + max-width: 460px; + } + } + @media (max-width: 640px) { + body, html { + overflow-y: auto; + height: auto; + min-height: 100%; + display: block; + } + .app-container { + padding: 1.5rem; + align-items: flex-start; + } .glass-card { padding: 3rem 2rem; border-radius: 36px; @@ -406,44 +618,72 @@ $whatsapp_link = "https://chat.whatsapp.com/DkG96pTzAFO3hvLqmzwmTY";
-
-
-
- -

Lili Records

-

La sintonía que eleva tus sentidos.

-
- -
-
-
-
- AIR ON +
+
+
+
+ +

Lili Records

+

La sintonía que eleva tus sentidos.

+
+ +
+
+
+
+ AIR ON +
+
Conectando...
-
Conectando...
-
- -
- -
- - - + +
+ +
+ + + +
-
- -
-

SUPPORT OUR VIBE

-
- Support QR + +
+

SUPPORT OUR VIBE

+
+ Support QR +
-
-
+
+ +
+
+

Próximos Programas

+
    + $item): ?> +
  • +
    + + +
    +
    + +
    +
  • + +
+
+ + +
+

+ Streaming 24/7 desde el corazón del beat +

+
+
+
@@ -549,6 +789,59 @@ $whatsapp_link = "https://chat.whatsapp.com/DkG96pTzAFO3hvLqmzwmTY"; updateMetadata(); setInterval(updateMetadata, 30000); + // Program Highlighter Logic + const schedule = ; + + function toggleDescription(element) { + const isExpanded = element.classList.contains('is-expanded'); + + // Cerrar todos los demás + document.querySelectorAll('.program-item').forEach(item => { + item.classList.remove('is-expanded'); + }); + + // Si no estaba expandido, abrirlo + if (!isExpanded) { + element.classList.add('is-expanded'); + } + } + + function updateProgramHighlight() { + const now = new Date(); + const currentTime = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0'); + + let liveIndex = -1; + const count = schedule.length; + + for (let i = 0; i < count; i++) { + const start = schedule[i].time; + const next = (i < count - 1) ? schedule[i+1].time : '23:59'; + + if (currentTime >= start && currentTime < next) { + liveIndex = i; + break; + } + } + + // Handle night transition (last program or before first) + if (liveIndex === -1 && (currentTime >= schedule[count-1].time || currentTime < schedule[0].time)) { + liveIndex = count - 1; + } + + const items = document.querySelectorAll('.program-item'); + items.forEach((item, index) => { + if (index === liveIndex) { + item.classList.add('is-live'); + } else { + item.classList.remove('is-live'); + } + }); + } + + // Run every minute + updateProgramHighlight(); + setInterval(updateProgramHighlight, 60000); + // Handle possible audio interruptions audio.addEventListener('error', function(e) { console.error('Audio error:', e);