<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WEB RED RADIO | En Vivo</title> <style> /* Estilos Globales */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #0f0c20, #15102a); color: #ffffff; display: flex; flex-direction: column; min-height: 100vh; } /* Encabezado */ header { background-color: rgba(21, 16, 42, 0.8); backdrop-filter: blur(10px); padding: 20px; text-align: center; border-bottom: 2px solid #ff0055; position: sticky; top: 0; z-index: 100; } header h1 { font-size: 2rem; letter-spacing: 2px; text-transform: uppercase; background: linear-gradient(45deg, #ff0055, #00ffcc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Contenedor Principal */ main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px; text-align: center; } /* Tarjeta del Reproductor */ .player-card { background: rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 40px; width: 100%; max-width: 450px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); margin-bottom: 40px; } .live-badge { background-color: #ff0055; color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; display: inline-block; margin-bottom: 20px; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } .station-logo { width: 120px; height: 120px; background: linear-gradient(45deg, #ff0055, #00ffcc); border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; box-shadow: 0 0 20px rgba(255, 0, 85, 0.4); } .player-card h2 { font-size: 1.8rem; margin-bottom: 10px; } .player-card p { color: #a0a0a0; margin-bottom: 30px; font-size: 1rem; } /* Control de Audio Nativo */ audio { width: 100%; border-radius: 30px; background: #15102a; outline: none; } /* Sección Informativa */ .info-section { max-width: 700px; background: rgba(0, 0, 0, 0.2); padding: 30px; border-radius: 15px; border-left: 4px solid #00ffcc; } .info-section h3 { font-size: 1.4rem; margin-bottom: 15px; color: #00ffcc; } .info-section p { color: #d1d1d1; line-height: 1.6; font-size: 1.05rem; } /* Pie de Página */ footer { background-color: #0a0814; padding: 15px; text-align: center; font-size: 0.9rem; color: #666; border-top: 1px solid rgba(255, 255, 255, 0.05); } footer span { color: #ff0055; } </style> </head> <body> <!-- Encabezado --> <header> <h1>WEB RED RADIO</h1> </header> <!-- Contenido Principal --> <main> <!-- Tarjeta del Reproductor --> <div class="player-card"> <div class="live-badge">En Vivo</div> <div class="station-logo">📻</div> <h2>WEB RED RADIO</h2> <p>La señal que te conecta con el mundo</p> <!-- REPRODUCTOR: Conectado a tu dirección de streaming --> <audio controls autoplay> <source src="/ur0lR" type="audio/mpeg"> Tu navegador no soporta el elemento de audio. </audio> </div> <!-- Sección Informativa --> <div class="info-section"> <h3>Sobre Nosotros</h3> <p>Somos una plataforma de comunicación digital de vanguardia, diseñada para transmitir contenidos dinámicos, música sin fronteras e información relevante en tiempo real. En WEB RED RADIO, la tecnología y la pasión por la comunicación se unen para crear la banda sonora de tu día a día.</p> </div> </main> <!-- Pie de Página --> <footer> <p>© 2026 <span>WEB RED RADIO</span>. Todos los derechos reservados.</p> </footer> </body> </html>
