<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Corvalen FM ©</title>
<link href="image/favicon.ico" rel="shortcut icon"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"></link>
<script type="text/javascript" src="https://hosted.muses.org/mrp.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #000;
background-image: url("https://blogger.googleusercontent.com/img/a/AVvXsEhFkoY0p9AW8MOF0ERwSoz8jUgD04WnVOxvTX5ayZ_SLXdgk_2BNErd0Jy-1I8kPvX6B9WITIADMnooS1Vdpr2sN58ER8u7HmjZlpdlOo8pDPzcAElTElsB3NqO3F-718fQuSea_QUwX-W1vFRNJcy5QSPkcVViWh1KFwePUz8l8Fu5VHCLx75u6OgVA0Pu=s1600");
background-size: auto;
background-position: center;
/*min-height: 100vh;*/
min-height: 80vh;
display: flex;
flex-direction: column;
}
header {
background: linear-gradient(to right, #C8102E, #000);
color: white;
padding: 6px;
display: flex;
justify-content: space-between;
align-items: center;
position: right-side;
}
header h1 {
display: flex;
align-items: center;
margin: 0;
}
header h1 a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
}
header h1 img {
height: 50px;
margin-right: 10px;
border-radius: 50%;
border: 3px solid white;
padding: 5px;
}
header nav a {
color: white;
padding: 10px 30px;
line-height: normal;
display: inline-block;
text-decoration: none;
font-size: 20px;
border-radius: 5px;
}
header nav a:hover {
background-color: #cc0003;
}
.social-icons a {
color: white;
margin: 0 15px;
font-size: 28px;
}
.container {
display: flex;
justify-content: space-between;
padding: 15px;
/*height: 100vh;*/
height: 290px;
position: relative;
overflow: hidden;
}
.main-content {
color: white;
padding: 10px 30px;
line-height: normal;
display: inline-block;
text-decoration: none;
font-size: 20px;
border-radius: 5px;
}
/* Publicidad slider */
.banner-container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.banner-slider {
display: flex;
transition: transform 1s ease-in-out;
}
.banner {
min-width: 100%;
box-sizing: border-box;
}
.banner img {
width: 100%;
height: auto;
}
.advertisement {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
width: 100%;
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
}
.radio-player-footer {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 300px;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
z-index: 10;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
border-radius: 10px 0 0 10px;
}
.radio-player-controls {
display: flex;
align-items: center;
justify-content: flex-start;
}
.controls button {
background-color: #C8102E;
color: white;
border: none;
border-radius: 50%;
padding: 12px;
font-size: 20px;
cursor: pointer;
}
.controls button:hover {
background-color: #A40F24;
}
.song-title {
margin-top: 10px;
font-size: 1.2em;
color: #fff;
text-align: center;
flex: 1;
}
.ondagraph {
width: 200px;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-end;
margin-left: 20px;
}
.ondagraph div {
width: 8px;
height: 50%;
background-color: red;
animation: moveWave 0.1s linear infinite;
}
.ondagraph div:nth-child(odd) {
animation-duration: 0.5s;
background-color: yellow;
}
@keyframes moveWave {
0% { height: 40%; }
50% { height: 70%; }
100% { height: 40%; }
}
@media (max-width: 768px) {
header h1 a {
font-size: 18px;
}
header nav a {
font-size: 16px;
padding: 8px 15px;
}
.radio-player-footer {
font-size: 14px;
padding: 5px;
height: 40px;
}
.ondagraph {
width: 100%;
height: 40px;
margin-left: 0.5px;
}
}
/* Estilo para los botones de play y stop */
#play-button-play {
background-color: transparent;
border: 3px solid white;
border-radius: 50%;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
color: white;
font-size: 24px;
cursor: pointer;
transition: all 0.3s ease;
}
#play-button-play:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: #ccc;
}
#play-button-play:active {
transform: scale(0.9);
}
</style>
</head>
<body>
<header>
<h1>
<a href="https://radios.yanapak.org/corvalenfm.m3u">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBscXkjtkuKSh_WXO2B6zt63pyTeSXKAeWB7SrXGnir9qA1vPbMY43Y15hifyi_0xs7mzULLg8f_yVXKvcnNpI3JD2jYWXBqv27sPLlx9QhRZzsfWzPRL70JxFtenEj3KGymUUk-vwxfiJd4esar7ubCYlFRqZSKwF2N7LDMJhj7pLNw/s220/logo250.png" alt="Corvalen FM">
Corvalen FM ©
</a>
</h1>
<div class="menu">
<nav>
<!-- <a href="#">Inicio</a>
<a href="https://radios.yanapak.org/corvalenfm.m3u">Programación</a>
<a href="#">Contacto</a>
<a href="#">Sobre Nosotros</a> -->
</nav>
<div class="social-icons">
<a href="https://www.facebook.com/profile.php?id=61563964364347"><i class="fab fa-facebook"></i></a>
<!-- <a href="#"><i class="fab fa-instagram"></i></a>-->
<a href="https://www.youtube.com/@CorvalenFM"><i class="fab fa-youtube"></i></a>
<a href="https://wa.me/573107351097?text=Hola%20Corvalen%20FM..!%20Escuchando%20desde%20la%20web..">
<i class="fab fa-whatsapp"></i>
</a>
<!-- Radio Menu---->
<div class="social-icons">
<div class="song-title" id="song-title">Live......</div>
<div class="radio-player-controls">
<div class="controls">
<button id="play-button-play">
<i class="fas fa-play"></i>
</button>
</div>
<div class="ondagraph">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</div>
</div>
<!-- Reproductor de Audio -->
<audio autoplay="" id="audio-player">
<source src="https://radios.yanapak.org/corvalenfm" type="audio/mpeg"></source>
</audio>
<!-- Radio Menu-->
</div>
</div>
</header>
<div class="advertisement">
<h3>Anuncio Publicitario</h3>
<p>¡Espacio para ti aquí!</p>
</div>
<!-- Contenedor del Slider de Banners -->
<div class="banner-container">
<div class="banner-slider">
<!-- Banner 1 -->
<div class="banner">
<img alt="Publicidad 1" src="https://scontent.fvvc2-1.fna.fbcdn.net/v/t39.30808-6/470878018_916078323987718_3796369219986715677_n.jpg?_nc_cat=103&ccb=1-7&_nc_sid=cc71e4&_nc_eui2=AeEqzaE3wCy3bJH1akM_yEHrX7r9geaZtiVfuv2B5pm2JWzgUqELN8u5AYMVfR0KtuTe54GnH--5N_-eIIFxLVJb&_nc_ohc=hrqSI-2J1FAQ7kNvgF0Y8nZ&_nc_zt=23&_nc_ht=scontent.fvvc2-1.fna&_nc_gid=AhKCEHrn2o0NgmOiYoDXP2K&oh=00_AYAfJZnkC7OlhDG_a-Mi032UDqV-uHHQ4gs3hDCgMNzjIw&oe=678237F3" />
</div>
<!-- Banner 2 -->
<div class="banner">
<img alt="Publicidad 2" src="https://www.claro.com.co/portal/co/recursos_contenido/1733158999376-Blackfriday-T&T-Desk.webp" />
</div>
<!-- Banner 3 -->
<div class="banner">
<img alt="Publicidad 3" src="https://scontent.fvvc2-1.fna.fbcdn.net/v/t39.30808-6/471770435_122131002740465478_4048965394332105618_n.png?_nc_cat=105&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=Goygd9UxBu0Q7kNvgEkq1KK&_nc_zt=23&_nc_ht=scontent.fvvc2-1.fna&_nc_gid=AH5HVFB6cmylRJFvO9fZ79e&oh=00_AYAZObBvI2s9pEs2ePfLVGD3_BtBgMNpJ_5YgKDxsR0L1A&oe=678237A1" />
</div>
</div>
</div>
<div class="container">
<div class="advertisement">
<h2>Programación Corvalen FM ©</h2>
<div><p>Desde las 9:00AM a 12:00PM Programación Variada</p></div>
<p>Desde las 12:00PM a 1:00PM Programación Suave</p>
<p>Desde las 1:00PM a 8:00PM Programación Variada</p>
<p>Desde las 8:00PM a 9:00AM Programación Suave</p>
</div>
</div>
<div class="container">
<div class="advertisement">
<h2>Corvalen FM ©</h2>
<p>La música Cristiana que mueve tu mundo...!</p>
<p>Bienvenidos a Corvalen FM ©, la emisora que trae una variedad musical diseñada para acompañar cada momento de tu día.
Desde los éxitos más vibrantes hasta las melodías que tocan el alma, nuestra programación está hecha para todos los gustos y edades.</p>
<p>Transmitimos 24/7 con la mejor calidad de audio, llevando a tu hogar, oficina o viaje una experiencia sonora inigualable.</p>
<p>¿Por qué elegirnos?</p>
<p>Música sin interrupciones
Sonido de alta calidad
Programación variada para todos los oyentes
Disponible en cualquier parte del mundo</p>
</div>
</div>
<footer>
<p>2025 Corvalen FM ©. Todos los derechos reservados.</p>
</footer>
<!-- Reproductor en el Footer -->
<!-- <div class="radio-player-footer">
<div class="song-title" id="song-title">Live......</div>
<div class="radio-player-controls">
<div class="controls">
<button id="play-button-play">
<i class="fas fa-play"></i>
</button>
</div>
<div class="ondagraph">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</div>
</div>
<!-- Reproductor de Audio -->
<!-- <audio autoplay="" id="audio-player">
<source src="https://radios.yanapak.org/corvalenfm" type="audio/mpeg"></source>
</audio>
-->
<script>
document.getElementById('play-button-play').addEventListener('click', function() {
var audio = document.getElementById('audio-player');
var button = this;
if (audio.paused) {
audio.play();
button.innerHTML = '<i class="fas fa-stop"></i>';
} else {
audio.pause();
button.innerHTML = '<i class="fas fa-play"></i>';
}
});
function getSongTitle() {
fetch('https://radios.yanapak.org/corvalenfm/status-json.xsl')
.then(response => response.json())
.then(data => {
var song = data.icestats.source.title || "No disponible";
document.getElementById('song-title').textContent = song;
})
.catch(error => console.error('Error al obtener el título:', error));
}
setInterval(getSongTitle, 10000);
getSongTitle();
// Slider de Publicidad
const bannerSlider = document.querySelector('.banner-slider');
const banners = document.querySelectorAll('.banner');
let currentIndex = 0;
function changeBanner() {
currentIndex = (currentIndex + 1) % banners.length;
bannerSlider.style.transform = `translateX(-${currentIndex * 100}%)`;
}
setInterval(changeBanner, 7000); // Cambiar cada 10 segundos
</script>
</body>
</html>
