diff --git a/index.html b/index.html new file mode 100644 index 0000000..2254b7a --- /dev/null +++ b/index.html @@ -0,0 +1,74 @@ + + + + + + Nepali Radio Player + + + + + +
+
+ Home + News + Projects + Links +
+ + + +
+
+
+
+
+
Nepali RADIO
+
+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
    + +
+
+
+
+ + Made with ♥ by PR chapagain + + + + +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..f90e954 --- /dev/null +++ b/script.js @@ -0,0 +1,179 @@ + // THIS JAVA MADE BY PR CHAPAGAIN// +let currentStationIndex = 0; +let currentlyPlayingButton = null; +const stations = [ + { name: "Radio Nepal", streamUrl: "https://stream1.radionepal.gov.np/live/" }, + { name: "Kantipur FM", streamUrl: "https://radio-broadcast.ekantipur.com/stream/" }, + { name: "Ujyalo 90 Network", streamUrl: "https://stream.zeno.fm/h527zwd11uquv" }, + { name: "Kalika FM", streamUrl: "http://kalika-stream.softnep.com:7740/;" }, + { name: "Galyang FM", streamUrl: "https://live.itech.host:9107/stream" }, + { name: "Radio Audio", streamUrl: "https://stream.zeno.fm/fvrx47wpg0quv" }, + { name: "Shreenagar FM", streamUrl: "https://live.itech.host:9598/stream" }, + { name: "Radio Bhorukawa", streamUrl: "https://live.itech.host:8379/stream" }, + { name: "Hits FM", streamUrl: "https://usa15.fastcast4u.com/proxy/hitsfm912?mp=/1" }, + { name: "Radio Annapurna Nepal", streamUrl: "https://shoutcast.prixa.live/annapurna" }, + { name: "BFBS Gurkha Radio", streamUrl: "https://listen-ssvcbfbs.sharp-stream.com/ssvcbfbs3.aac" }, + { name: "Radio Tufan", streamUrl: "https://stream.zeno.fm/60tx8fw9dd0uv" }, + { name: "Capital FM", streamUrl: "https://streaming.softnep.net:10982/;stream.nsv&type:mp3&volume:10" }, + { name: "Radio Amargadhi", streamUrl: "https://live.itech.host:8927/stream" }, + { name: "Barahathawa FM 101.1Mhz", streamUrl: "https://stream.zeno.fm/gubb557z4k8uv" }, + { name: "Sky FM 106.6", streamUrl: "https://onlineradio.websoftitnepal.com/8002/stream" }, + { name: "Shuklaphanta FM", streamUrl: "https://streaming.webhostnepal.com/8010/stream" }, + { name: "Good News FM", streamUrl: "https://live.itech.host:8167/stream?1611505122592" }, + { name: "Radio Resunga", streamUrl: "https://live.itech.host:3260/stream" }, + { name: "Radio Rudraksha", streamUrl: "https://streaming.softnep.net:10874/;stream.nsv&type:mp3&volume:50" }, + { name: "Classic FM", streamUrl: "https://stream.hamropatro.com/8783" }, + { name: "Times FM", streamUrl: "https://astream.nepalipatro.com.np:8119/index.html" }, + { name: "Pathibhara FM", streamUrl: "https://live.itech.host:8749/stream" }, + { name: "Krishnasar FM", streamUrl: "https://live.itech.host:8434/stream" }, + { name: "Synergy FM", streamUrl: "https://live.itech.host:3880/stream" }, + { name: "Radio Prakriti", streamUrl: "https://live.itech.host:8939/stream" }, + { name: "Radio Nepalbani", streamUrl: "https://live.itech.host:8681/stream" }, + { name: "Radio Marsyangdi", streamUrl: "https://streaming.webhostnepal.com:7032/;stream.nsv&type:mp3&volume:30" } +]; + +let audio = new Audio(stations[currentStationIndex].streamUrl); + +audio.addEventListener('canplay', function() { + console.log('Audio can play:', stations[currentStationIndex].name); + document.getElementById('streaming-indicator').style.display = 'inline-block'; // Show indicator +}); + +audio.addEventListener('error', function(e) { + console.error('Audio error:', e); + document.getElementById('streaming-indicator').style.display = 'none'; // Hide indicator +}); + +document.addEventListener('DOMContentLoaded', () => { + const fmListUl = document.getElementById('fm-list-ul'); + stations.forEach((station, index) => { + const li = document.createElement('li'); + li.setAttribute('onclick', `selectStation(${index})`); + + const span = document.createElement('span'); + span.textContent = station.name; + + const button = document.createElement('button'); + button.className = 'like-button'; + button.textContent = 'Play'; + button.setAttribute('onclick', 'likeStation(this); event.stopPropagation();'); + + li.appendChild(span); + li.appendChild(button); + fmListUl.appendChild(li); + }); + + // Attempt to autoplay the first station + audio.play().then(() => { + console.log('Autoplaying:', stations[currentStationIndex].name); + document.getElementById('current-station').innerText = stations[currentStationIndex].name; + document.getElementById('play-pause').innerText = 'Pause'; + updateStationButton(currentStationIndex); + document.getElementById('streaming-indicator').style.display = 'inline-block'; // Show indicator + }).catch(e => { + console.error('Autoplay blocked:', e); + document.getElementById('play-pause').innerText = 'Play'; + document.getElementById('streaming-indicator').style.display = 'none'; // Hide indicator + }); + + // Block right-click context menu + document.addEventListener('contextmenu', event => event.preventDefault()); + + // Block F12, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+Shift+C, and Ctrl+U + document.addEventListener('keydown', function(e) { + if (e.keyCode === 123 || // F12 + (e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 67)) || // Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+Shift+C + (e.ctrlKey && e.keyCode === 85)) { // Ctrl+U + e.preventDefault(); + } + }); +}); + +function toggleFMList() { + const fmList = document.getElementById('fm-list'); + fmList.style.display = fmList.style.display === 'none' || fmList.style.display === '' ? 'block' : 'none'; +} + +function likeStation(button) { + // Stop the currently playing station, if any + if (currentlyPlayingButton && currentlyPlayingButton !== button) { + currentlyPlayingButton.innerText = 'Play'; + currentlyPlayingButton.style.backgroundColor = ''; // Reset to default color + } + + // Update the clicked button to show it's playing + button.innerText = 'playing'; + button.style.backgroundColor = '#ff3b30'; + + // Update the reference to the currently playing button + currentlyPlayingButton = button; + + // Play the selected station + const index = Array.from(button.parentElement.parentElement.children).indexOf(button.parentElement); + selectStation(index); +} + +function playPause() { + const playPauseButton = document.getElementById('play-pause'); + if (audio.paused) { + audio.play().then(() => { + playPauseButton.innerText = 'Pause'; + console.log('Playing:', stations[currentStationIndex].name); + document.getElementById('streaming-indicator').style.display = 'inline-block'; // Show indicator + }).catch(e => { + console.error('Error playing audio:', e); + }); + } else { + audio.pause(); + playPauseButton.innerText = 'Play'; + document.getElementById('streaming-indicator').style.display = 'none'; // Hide indicator + } +} + +function prevStation() { + currentStationIndex = (currentStationIndex - 1 + stations.length) % stations.length; + updateStation(); +} + +function nextStation() { + currentStationIndex = (currentStationIndex + 1) % stations.length; + updateStation(); +} + +function selectStation(index) { + currentStationIndex = index; + updateStation(); +} + +function updateStation() { + // Stop the current audio before changing the source + audio.pause(); + document.getElementById('streaming-indicator').style.display = 'none'; // Hide indicator during transition + audio.src = stations[currentStationIndex].streamUrl; + audio.play().then(() => { + console.log('Now playing:', stations[currentStationIndex].name); + document.getElementById('streaming-indicator').style.display = 'inline-block'; // Show indicator + }).catch(e => { + console.error('Error playing audio:', e); + document.getElementById('streaming-indicator').style.display = 'none'; // Hide indicator + }); + document.getElementById('current-station').innerText = stations[currentStationIndex].name; + document.getElementById('play-pause').innerText = 'Pause'; + + // Update the button text and color for the currently playing station + updateStationButton(currentStationIndex); +} + +function updateStationButton(index) { + const buttons = document.querySelectorAll('.like-button'); + buttons.forEach((button, i) => { + if (i === index) { + button.innerText = 'playing'; + button.style.backgroundColor = '#ff3b30'; + currentlyPlayingButton = button; + } else { + button.innerText = 'Play'; + button.style.backgroundColor = ''; // Reset to default color + } + }); +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..9f00162 --- /dev/null +++ b/styles.css @@ -0,0 +1,416 @@ +/* General styles */ +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; + font-family: Arial, sans-serif; +} + +/* Header menu styles */ +.topnav { + width: 100%; + background-color: #333; + overflow: hidden; + box-sizing: border-box; + display: flex; + justify-content: center; + padding: 0px 0; + position: fixed; + top: 0; + left: 0; + z-index: 1000; +} + +.topnav a { + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +.topnav a:hover { + background-color: #ddd; + color: black; +} + +.topnav a.active { + background-color: #4CAF50; + color: white; +} + +body { + padding-top: 0px; /* Adjust to account for the fixed header */ +} + +/* Handle styles */ +.handle { + width: 360px; + height: 50px; + background: linear-gradient(135deg, #3a3a3a, #000); + border-radius: 150px 150px 0 0; + position: relative; + margin-top: 20px; + margin-right: 15px; + margin-bottom: -19.9px; + margin-left: 20px; +} + +.handle:before { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 300px; + height: 40px; + background: #fff; + border-radius: 140px 140px 0 0; +} + +/* Radio container and components */ +.radio-container { + position: relative; + width: 400px; + height: 200px; + background-color: #333; + border-radius: 15px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + margin-top: 20px; +} + +.radio-body { + position: relative; + width: 100%; + height: 100%; + padding: 20px; + box-sizing: border-box; + border: 2px solid #000; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.radio-speaker { + width: 40%; + height: 70%; + background: linear-gradient(273deg, #0d0e0e, #e15723, #d14529, #e123df, #3d9e13, #23c4e1); + background-size: 600% 600%; + border-radius: 10px; + margin: 20px 0 10px 0; + float: left; + animation: gradientAnimation 15s ease infinite; +} + +.radio-display { + width: 50%; + height: 40px; + background-color: #000; + color: #0ff; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + border-radius: 5px; + margin-bottom: 20px; + padding: 5px; + box-sizing: border-box; + float: right; +} + +.radio-buttons { + display: flex; + flex-wrap: wrap; + gap: 5px; + width: 50%; + float: right; + margin-top: -15px; +} + +.radio-button { + width: 48%; + padding: 5px; + background-color: #555; + color: #fff; + border: none; + border-radius: 5px; + font-size: 10px; + cursor: pointer; +} + +.radio-knob { + position: absolute; + right: 20px; + bottom: 20px; + width: 50px; + height: 50px; + background-color: #f59898; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.knob-center { + width: 20px; + height: 20px; + background-color: #333; + border-radius: 50%; +} + +.radio-antenna { + position: absolute; + top: -99px; + left: 10%; + width: 5px; + height: 100px; + background-color: #2e0e0e; + transform: rotate(45deg); + transform-origin: bottom; +} + +.fm-list-container { + margin-top: 10px; + text-align: center; +} + +.toggle-fm-list { + padding: 10px 20px; + background-color: #333; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + margin-bottom: 10px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: background 0.3s; +} + +.toggle-fm-list:hover { + background-color: #555; +} + +.indicator { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: rgb(255, 110, 60); /* New color */ + display: inline-block; + margin-left: 5px; +} + +.fm-list { + display: none; + width: 100%; + max-width: 400px; + max-height: 250px; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + overflow-y: auto; +} + +.fm-list.show { + display: block; +} + +.fm-list ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.fm-list li { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + border-bottom: 1px solid #ccc; +} + +.fm-list li:last-child { + border-bottom: none; +} + +.like-button { + padding: 5px 10px; + background-color: #ff6f61; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +/* Keyframes */ +@keyframes gradientAnimation { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.footer { + font-size: 1rem; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: nowrap; +} + +.footer img { + width: 16px; + height: 16px; +} + +/* Responsive Styles */ +@media (max-width: 768px) { + .handle { + width: 250px; + height: 35px; + margin-bottom: -20px; + } + .handle:before { + width: 200px; + height: 35px; + } + .radio-container { + width: 300px; + height: 150px; + } + .radio-speaker { + width: 35%; + height: 60%; + margin: 15px 0 10px 0; + } + .radio-display { + width: 45%; + height: 35px; + font-size: 10px; + margin-bottom: 15px; + } + .radio-buttons { + gap: 3px; + width: 45%; + margin-top: -10px; + } + .radio-button { + width: 48%; + padding: 3px; + font-size: 9px; + } + .radio-knob { + right: 15px; + bottom: 15px; + width: 40px; + height: 40px; + } + .knob-center { + width: 15px; + height: 15px; + } + .radio-antenna { + top: -80px; + left: 5%; + width: 4px; + height: 80px; + } + .fm-list-container { + margin-top: 15px; + } + .toggle-fm-list { + padding: 8px 15px; + margin-bottom: 8px; + } + .fm-list { + max-width: 300px; + max-height: 200px; + } + .fm-list li { + padding: 8px 15px; + } + .like-button { + padding: 3px 8px; + } +} + +@media (max-width: 480px) { + .handle { + width: 200px; + height: 30px; + } + .handle:before { + width: 150px; + height: 30px; + } + .radio-container { + width: 250px; + height: 120px; + } + .radio-speaker { + width: 30%; + height: 50%; + margin: 10px 0 5px 0; + } + .radio-display { + width: 40%; + height: 30px; + font-size: 8px; + margin-bottom: 10px; + } + .radio-buttons { + gap: 2px; + width: 40%; + margin-top: -5px; + } + .radio-button { + width: 48%; + padding: 2px; + font-size: 8px; + } + .radio-knob { + right: 10px; + bottom: 10px; + width: 30px; + height: 30px; + } + .knob-center { + width: 10px; + height: 10px; + } + .radio-antenna { + top: -60px; + left: 2%; + width: 3px; + height: 60px; + } + .fm-list-container { + margin-top: 10px; + } + .toggle-fm-list { + padding: 5px 10px; + margin-bottom: 5px; + } + .fm-list { + max-width: 250px; + max-height: 150px; + } + .fm-list li { + padding: 5px 10px; + } + .like-button { + padding: 2px 5px; + } +}