Mirchi FM - It's Hot

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mirchi FM - It's Hot</title> <meta name="description" content="Mirchi FM brings the hottest contemporary hits and keeps you up to date with the latest music trends.">  <meta name="author" content="Fijian Broadcasting Corporation">  <meta property="og:image" content="https://www.mirchifm.com.fj/assets/Mirchi FM-header.png">  <meta property="og:title" content="Mirchi FM - It's Hot">  <meta property="og:description" content="Mirchi FM brings the hottest contemporary hits and keeps you up to date with the latest music trends.">  <meta property="og:url" content="https://www.mirchifm.com.fj">  <meta property="og:type" content="website">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" crossorigin="anonymous">  <script async src="https://www.googletagmanager.com/gtag/js?id=G-HFMLG9F7YG"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-HFMLG9F7YG'); </script> <style> body { background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(19,119,143,1) 100%); background: url(https://www.fbcradio.com.fj/assets/radio-dark-background.jpg); color: #e1e1e1; /* Light text */ font-family: 'Roboto', sans-serif; /* Roboto font */ } #logo-player-wrapper { display: flex; /* Use flexbox */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ height: 100vh; /* Make the wrapper full screen, or adjust as needed */ width: 100%; /* Full width */ } div#logo-player-container { width: 300px; max-width: 400px; overflow: hidden; margin: auto; text-align: center; } div#station-play-wrapper { margin-top: 30px; } img#main-station-logo { width: 100%; height: auto; margin: auto; } body { backdrop-filter: invert(1); } .other-station-logo img { width: 100%; height: auto; } .clear-fix { display: none; clear: both; } .other-station-logo { width: 50%; float: left; padding: 10px; /* padding-bottom: 0; */ } div#other-stations-wrapper { display: block; } .other-station-logo:last-child { margin-left: 25%; clear: both; } h2 { color: #6c6a6a; text-transform: uppercase; font-size: 18px; margin: 0; padding: 0; padding-top: 40px; text-shadow: white 1px 1px 1px; } div#soundbar-wrapper { position: absolute; bottom: 0; width: 100vw; /* height: 120px; */ opacity: 0.1; filter: grayscale(1); display: none; } div#soundbar-container { width: 100%; max-width: 600px; margin: auto; height: 150px; background: url(https://www.fbcradio.com.fj/assets/soundbar_bg_2.gif); /* background-position-y: 122px; */ background-size: cover; } </style> </head> <body class="mirchi"> <audio id="radio-audio-control" style="display:none;"> <source id="radio-stream-url" src="https://peridot.streamguys1.com:7155/MirchiFiji" type="audio/mpeg"> </audio> <div id="logo-player-wrapper"> <div id="logo-player-container"> <div id="station-logo-container"> <div id="station-logo-wrapper"><img id="main-station-logo" src="assets/mirchi.png"></div> </div> <div id="station-play-container"> <div id="station-play-wrapper"> <button class="btn btn-danger"><i class="fas fa-play"></i> LISTEN LIVE</button> </div> </div> <h2>More stations</h2> <div id="other-stations-container"> <div id="other-stations-wrapper"> <div class="other-station-logo"> <a href="https://www.goldfm.com.fj"> <img src="https://www.fbcradio.com.fj/assets/gold.png"> </a> </div> <div class="other-station-logo"> <a href="https://www.bulafm.com.fj"> <img src="https://www.fbcradio.com.fj/assets/bula.png"> </a> </div> <div class="other-station-logo"> <a href="https://www.2dayfm.com.fj"> <img src="https://www.fbcradio.com.fj/assets/2day.png"> </a> </div> <div class="other-station-logo"> <a href="https://www.radiofijione.com.fj"> <img src="https://www.fbcradio.com.fj/assets/radiofijione.png"> </a> </div> <div class="other-station-logo"> <a href="https://www.radiofijitwo.com.fj"> <img src="https://www.fbcradio.com.fj/assets/radiofijitwo.png"> </a> </div> </div> <div class="clear-fix"></div></div> </div></div> <div id="soundbar-wrapper"> <div id="soundbar-container"> </div> </div> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { const playButton = document.querySelector('#station-play-container button'); const audioControl = document.getElementById('radio-audio-control'); const soundBar = document.getElementById('soundbar-wrapper'); const icon = playButton.querySelector('i'); playButton.addEventListener('click', function() { if (audioControl.paused) { audioControl.play(); icon.classList.remove('fas', 'fa-play'); icon.classList.add('fas', 'fa-pause'); playButton.textContent = ' PAUSE STATION'; // Optional: Update button text playButton.prepend(icon); // Re-add the icon to keep it at the front soundBar.style.display = 'block'; } else { audioControl.pause(); icon.classList.remove('fas', 'fa-pause'); icon.classList.add('fas', 'fa-play'); playButton.textContent = ' LISTEN LIVE'; // Optional: Update button text playButton.prepend(icon); // Re-add the icon to keep it at the front soundBar.style.display = 'none'; } }); }); </script> </body> </html>

CINXE.COM

Mirchi FM - It's Hot