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";
- La sintonía que eleva tus sentidos.
-