<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>253.1 Urban Radio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="manifest.json">
<link rel="icon" href="icon-192.png">
<style>
body {
margin: 0;
background: black;
color: white;
font-family: Arial, sans-serif;
}
/* 🔥 APP CONTAINER */
.container {
max-width: 420px;
margin: auto;
text-align: center;
padding: 20px;
}
/* 🏆 LOGO */
.logo {
width: 180px;
margin-top: 10px;
}
/* 🔴 LIVE */
.live {
color: red;
font-weight: bold;
animation: blink 1s infinite;
}
@keyframes blink {50% {opacity: 0.3;}}
/* 🎧 PLAYER CARD */
.card {
background: #111;
border-radius: 20px;
padding: 20px;
margin-top: 15px;
box-shadow: 0 0 20px rgba(255,215,0,0.2);
}
/* 🎧 BUTTON */
.play-btn {
background: gold;
color: black;
padding: 15px 35px;
border-radius: 50px;
border: none;
font-size: 18px;
margin-top: 10px;
}
/* 🎯 ACTION BUTTONS */
.action-btn {
margin: 8px;
padding: 10px 18px;
border-radius: 20px;
border: none;
font-size: 14px;
}
/* 📲 INSTALL */
.install-btn {
background: #1DB954;
margin-top: 15px;
padding: 12px 25px;
border-radius: 25px;
display: none;
}
/* 💬 CHAT */
.chat {
margin-top: 20px;
border-radius: 15px;
overflow: hidden;
}
/* 🎤 SUBMIT */
.submit-box {
margin-top: 20px;
}
input, textarea {
width: 100%;
margin: 6px 0;
padding: 10px;
border-radius: 10px;
border: none;
}
</style>
</head>
<body>
<div class="container">
<!-- 🏆 LOGO -->
<img src="logo.png" class="logo">
<div class="live">● LIVE 24/7</div>
<!-- 🎧 PLAYER -->
<div class="card">
<button class="play-btn" onclick="toggleRadio()">▶ PLAY</button>
<p id="track">Loading...</p>
</div>
<!-- 🎯 ACTIONS -->
<div>
<button class="action-btn" onclick="share()">📤 Share</button>
<button class="action-btn" onclick="email()">🎵 Request</button>
</div>
<!-- 📲 INSTALL -->
<button class="install-btn" id="installBtn">📲 Install App</button>
<!-- 💬 CHAT -->
<div class="chat">
<iframe src="https://st.chatango.com/?group=2531urbanradio"
width="100%" height="250"></iframe>
</div>
<!-- 🎤 SUBMIT -->
<div class="submit-box">
<h3>🎤 Submit Music</h3>
<input placeholder="Artist Name">
<input placeholder="Song Title">
<input placeholder="Song Link">
<textarea placeholder="Tell us about you"></textarea>
<button class="play-btn" onclick="submit()">Submit</button>
</div>
</div>
<audio id="radio">
<source src="https://servidor31.brlogic.com:7104/live" type="audio/mpeg">
</audio>
<script>
let playing = false;
const radio = document.getElementById("radio");
const btn = document.querySelector(".play-btn");
function toggleRadio() {
if (!playing) {
radio.play();
btn.innerHTML = "⏸ STOP";
playing = true;
} else {
radio.pause();
btn.innerHTML = "▶ PLAY";
playing = false;
}
}
/* 🎵 METADATA */
async function getTrack() {
try {
let res = await fetch("https://servidor31.brlogic.com:7104/currentsong?sid=1");
let text = await res.text();
document.getElementById("track").innerHTML = text;
} catch {
document.getElementById("track").innerHTML = "Live Broadcast 🔥";
}
}
setInterval(getTrack, 10000);
getTrack();
/* 📲 INSTALL */
let deferredPrompt;
const installBtn = document.getElementById("installBtn");
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
deferredPrompt = e;
installBtn.style.display = "block";
});
installBtn.onclick = () => {
deferredPrompt.prompt();
};
/* 📤 SHARE */
function share() {
navigator.share({
title: "253.1 Urban Radio",
text: "Tap in 🔥",
url: window.location.href
});
}
/* 🎵 EMAIL */
function email() {
window.open("mailto:2531urbanradio@gmail.com");
}
/* 🎤 SUBMIT */
function submit() {
alert("Submission sent 🔥");
}
</script>
</body>
</html>