Hugging Face's logo

Spaces:
fyremael
/
botrad-io
Running

App Files Community
botrad-io / index.html
fyremael's picture
fyremael
Add 2 files
fbd5ed3 verified
raw
history blame contribute delete
28.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>BotRad.io AI Radio | Future of Radio</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 :root {
 --primary: #00e0ff;
 --secondary: #7b00ff;
 --dark: #141414;
 --darker: #0a0a0a;
 --light: #f0f0f0;
 --glass: rgba(20, 20, 20, 0.5);
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 body {
 background: linear-gradient(to right bottom, var(--darker), var(--dark));
 color: var(--light);
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow-x: hidden;
 position: relative;
 }
 body::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: radial-gradient(circle at 30% 50%, var(--secondary), transparent 70%);
 opacity: 0.2;
 z-index: -1;
 }
 body::after {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%;
 background: radial-gradient(circle at 70% 50%, var(--primary), transparent 70%);
 opacity: 0.2;
 z-index: -1;
 }
 .container {
 width: 90%;
 max-width: 1200px;
 background: var(--glass);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border-radius: 20px;
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 overflow: hidden;
 border: 1px solid rgba(255, 255, 255, 0.1);
 transition: all 0.3s ease;
 }
 .container:hover {
 box-shadow: 0 35px 60px -10px rgba(0, 224, 255, 0.3);
 }
 .header {
 background: linear-gradient(to right, var(--secondary), var(--primary));
 padding: 1.5rem;
 text-align: center;
 position: relative;
 overflow: hidden;
 }
 .header::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 L100 0 L100 20 Z' fill='rgba(0,0,0,0.1)' /%3E%3C/svg%3E");
 opacity: 0.5;
 }
 .header h1 {
 font-size: 2.5rem;
 font-weight: 800;
 margin-bottom: 0.5rem;
 background: linear-gradient(to right, var(--light), #c8e8ff);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 position: relative;
 z-index: 1;
 text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 .header p {
 font-size: 1rem;
 opacity: 0.9;
 color: var(--light);
 position: relative;
 z-index: 1;
 font-weight: 300;
 letter-spacing: 1px;
 }
 .player-container {
 display: flex;
 flex-direction: column;
 padding: 2rem;
 gap: 2rem;
 }
 .station-info {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 1rem;
 }
 .station-cover {
 width: 200px;
 height: 200px;
 border-radius: 15px;
 object-fit: cover;
 border: 3px solid rgba(255, 255, 255, 0.1);
 box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
 transition: transform 0.3s ease;
 position: relative;
 overflow: hidden;
 }
 .station-cover img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }
 .station-cover::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.5) 100%);
 }
 .station-cover:hover {
 transform: scale(1.05);
 }
 .station-text {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 }
 .station-name {
 font-size: 1.8rem;
 font-weight: 600;
 background: linear-gradient(to right, var(--primary), var(--secondary));
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
 .station-desc {
 font-size: 0.9rem;
 opacity: 0.8;
 font-weight: 300;
 max-width: 500px;
 }
 .controls {
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
 }
 .main-controls {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 2rem;
 }
 .control-btn {
 background: rgba(255, 255, 255, 0.1);
 border: none;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 color: var(--light);
 font-size: 1.2rem;
 cursor: pointer;
 transition: all 0.3s ease;
 display: flex;
 justify-content: center;
 align-items: center;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 position: relative;
 overflow: hidden;
 }
 .control-btn::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to right, var(--primary), var(--secondary));
 opacity: 0;
 transition: opacity 0.3s ease;
 z-index: -1;
 }
 .control-btn:hover {
 transform: translateY(-5px);
 color: white;
 }
 .control-btn:hover::after {
 opacity: 1;
 }
 .play-btn {
 width: 70px;
 height: 70px;
 font-size: 1.8rem;
 background: linear-gradient(to right, var(--primary), var(--secondary));
 color: white;
 }
 .play-btn:hover {
 transform: scale(1.1);
 }
 .progress-container {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 width: 100%;
 }
 .time-info {
 display: flex;
 justify-content: space-between;
 font-size: 0.8rem;
 opacity: 0.7;
 }
 .progress-bar {
 height: 6px;
 width: 100%;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 3px;
 cursor: pointer;
 position: relative;
 overflow: hidden;
 }
 .progress-bar::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: var(--progress, 0%);
 background: linear-gradient(to right, var(--primary), var(--secondary));
 border-radius: 3px;
 transition: width 0.1s linear;
 }
 .volume-container {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 1rem;
 }
 .volume-icon {
 color: var(--light);
 opacity: 0.8;
 }
 .volume-slider {
 width: 100px;
 height: 4px;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 2px;
 appearance: none;
 outline: none;
 cursor: pointer;
 }
 .volume-slider::-webkit-slider-thumb {
 appearance: none;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: var(--primary);
 cursor: pointer;
 transition: all 0.2s ease;
 }
 .volume-slider::-webkit-slider-thumb:hover {
 background: var(--secondary);
 transform: scale(1.2);
 }
 .stations {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 gap: 1rem;
 margin-top: 1rem;
 }
 .station {
 background: rgba(255, 255, 255, 0.05);
 border-radius: 10px;
 padding: 1rem;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.5rem;
 cursor: pointer;
 transition: all 0.3s ease;
 border: 1px solid rgba(255, 255, 255, 0.05);
 }
 .station:hover {
 background: rgba(255, 255, 255, 0.1);
 transform: translateY(-5px);
 box-shadow: 0 10px 20px -10px rgba(0, 224, 255, 0.2);
 }
 .station.active {
 background: rgba(0, 224, 255, 0.1);
 border: 1px solid var(--primary);
 position: relative;
 }
 .station.active::after {
 content: '🔊';
 position: absolute;
 top: 5px;
 right: 5px;
 font-size: 0.8rem;
 }
 .station-avatar {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: linear-gradient(to right, var(--primary), var(--secondary));
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.2rem;
 }
 .station-title {
 font-size: 0.9rem;
 text-align: center;
 font-weight: 500;
 }
 .wave-animation {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 3px;
 height: 30px;
 margin-top: 0.5rem;
 }
 .wave-bar {
 width: 3px;
 height: 100%;
 background: var(--primary);
 border-radius: 3px;
 animation: wave 1.5s ease-in-out infinite;
 transform-origin: bottom;
 }
 .wave-bar:nth-child(1) {
 animation-delay: 0.1s;
 height: 60%;
 }
 .wave-bar:nth-child(2) {
 animation-delay: 0.3s;
 height: 100%;
 }
 .wave-bar:nth-child(3) {
 animation-delay: 0.5s;
 height: 80%;
 }
 .wave-bar:nth-child(4) {
 animation-delay: 0.2s;
 height: 70%;
 }
 .wave-bar:nth-child(5) {
 animation-delay: 0.4s;
 height: 90%;
 }
 @keyframes wave {
 0%, 100% {
 transform: scaleY(0.8);
 }
 50% {
 transform: scaleY(1.5);
 }
 }
 .footer {
 padding: 1.5rem;
 text-align: center;
 background: rgba(0, 0, 0, 0.2);
 font-size: 0.8rem;
 opacity: 0.7;
 }
 /* Radio waves animation */
 .radio-waves {
 position: absolute;
 width: 300px;
 height: 300px;
 border-radius: 50%;
 pointer-events: none;
 z-index: -1;
 }
 .wave {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border: 2px solid var(--primary);
 border-radius: 50%;
 opacity: 0;
 animation: ripple 3s infinite;
 }
 .wave:nth-child(1) {
 width: 10rem;
 height: 10rem;
 animation-delay: 0s;
 }
 .wave:nth-child(2) {
 width: 15rem;
 height: 15rem;
 animation-delay: 1s;
 }
 .wave:nth-child(3) {
 width: 20rem;
 height: 20rem;
 animation-delay: 2s;
 }
 @keyframes ripple {
 0% {
 width: 10rem;
 height: 10rem;
 opacity: 0.4;
 }
 100% {
 width: 30rem;
 height: 30rem;
 opacity: 0;
 }
 }
 /* Responsive design */
 @media (max-width: 768px) {
 .container {
 width: 95%;
 }
.header h1 {
 font-size: 2rem;
 }
.stations {
 grid-template-columns: repeat(2, 1fr);
 }
.station-cover {
 width: 150px;
 height: 150px;
 }
 }
 @media (max-width: 480px) {
 .player-container {
 padding: 1.5rem;
 }
.main-controls {
 gap: 1rem;
 }
.control-btn {
 width: 40px;
 height: 40px;
 font-size: 1rem;
 }
.play-btn {
 width: 60px;
 height: 60px;
 font-size: 1.5rem;
 }
.stations {
 grid-template-columns: 1fr;
 }
 }
 /* Now playing animation */
 .now-playing {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 0.5rem;
 margin-top: 0.5rem;
 font-size: 0.8rem;
 color: var(--primary);
 opacity: 0.8;
 text-transform: uppercase;
 letter-spacing: 1px;
 }
 .now-playing span {
 width: 8px;
 height: 8px;
 background: var(--primary);
 border-radius: 50%;
 display: inline-block;
 animation: pulse 1.5s infinite;
 }
 .now-playing span:nth-child(1) {
 animation-delay: 0s;
 }
 .now-playing span:nth-child(2) {
 animation-delay: 0.3s;
 }
 .now-playing span:nth-child(3) {
 animation-delay: 0.6s;
 }
 @keyframes pulse {
 0%, 100% {
 transform: scale(0.8);
 opacity: 0.5;
 }
 50% {
 transform: scale(1.2);
 opacity: 1;
 }
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="header">
 <h1>BotRad.io</h1>
 <p>The Future of AI-Powered Radio Streaming</p>
 </div>
<div class="player-container">
 <div class="station-info">
 <div class="station-cover">
 <img src="https://source.unsplash.com/random/400x400/?music,technology" alt="Station Cover">
 </div>
 <div class="station-text">
 <h2 class="station-name">Quantum Beats</h2>
 <p class="station-desc">AI-generated electronic music with futuristic soundscapes</p>
 <div class="now-playing">
 <span></span>
 <span></span>
 <span></span>
 &nbsp;Now Playing
 </div>
 </div>
<div class="wave-animation">
 <div class="wave-bar"></div>
 <div class="wave-bar"></div>
 <div class="wave-bar"></div>
 <div class="wave-bar"></div>
 <div class="wave-bar"></div>
 </div>
 </div>
<div class="controls">
 <div class="progress-container">
 <div class="progress-bar" id="progressBar"></div>
 <div class="time-info">
 <span id="currentTime">0:00</span>
 <span id="totalTime">3:42</span>
 </div>
 </div>
<div class="main-controls">
 <button class="control-btn" id="prevBtn">
 <i class="fas fa-step-backward"></i>
 </button>
 <button class="control-btn play-btn" id="playBtn">
 <i class="fas fa-play" id="playIcon"></i>
 </button>
 <button class="control-btn" id="nextBtn">
 <i class="fas fa-step-forward"></i>
 </button>
 </div>
<div class="volume-container">
 <i class="fas fa-volume-up volume-icon"></i>
 <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="80">
 </div>
 </div>
<h3 style="margin-top: 1rem; text-align: center; font-weight: 400;">AI Stations</h3>
 <div class="stations">
 <div class="station active" data-id="1">
 <div class="station-avatar">
 <i class="fas fa-atom"></i>
 </div>
 <h4 class="station-title">Quantum Beats</h4>
 </div>
 <div class="station" data-id="2">
 <div class="station-avatar">
 <i class="fas fa-brain"></i>
 </div>
 <h4 class="station-title">Neural Waves</h4>
 </div>
 <div class="station" data-id="3">
 <div class="station-avatar">
 <i class="fas fa-robot"></i>
 </div>
 <h4 class="station-title">Synthetic Soul</h4>
 </div>
 <div class="station" data-id="4">
 <div class="station-avatar">
 <i class="fas fa-code"></i>
 </div>
 <h4 class="station-title">Algorithm Jazz</h4>
 </div>
 <div class="station" data-id="5">
 <div class="station-avatar">
 <i class="fas fa-cloud-moon"></i>
 </div>
 <h4 class="station-title">Dream Generator</h4>
 </div>
 <div class="station" data-id="6">
 <div class="station-avatar">
 <i class="fas fa-meteor"></i>
 </div>
 <h4 class="station-title">Cosmic Vibes</h4>
 </div>
 </div>
 </div>
<div class="footer">
 © 2023 BotRad.io AI Radio | Made with <i class="fas fa-heart" style="color: #ff3366;"></i> by AI
 </div>
 </div>
<div class="radio-waves">
 <div class="wave"></div>
 <div class="wave"></div>
 <div class="wave"></div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // DOM Elements
 const playBtn = document.getElementById('playBtn');
 const playIcon = document.getElementById('playIcon');
 const prevBtn = document.getElementById('prevBtn');
 const nextBtn = document.getElementById('nextBtn');
 const progressBar = document.getElementById('progressBar');
 const currentTimeEl = document.getElementById('currentTime');
 const totalTimeEl = document.getElementById('totalTime');
 const volumeSlider = document.getElementById('volumeSlider');
 const stations = document.querySelectorAll('.station');
 const stationCover = document.querySelector('.station-cover img');
 const stationName = document.querySelector('.station-name');
 const stationDesc = document.querySelector('.station-desc');
 const waveAnimation = document.querySelector('.wave-animation');
// Station data
 const stationData = [
 {
 id: 1,
 name: "Quantum Beats",
 description: "AI-generated electronic music with futuristic soundscapes",
 cover: "https://source.unsplash.com/random/400x400/?technology,future",
 audio: "https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
 },
 {
 id: 2,
 name: "Neural Waves",
 description: "Brainwave synchronizing ambient for deep focus",
 cover: "https://source.unsplash.com/random/400x400/?brain,science",
 audio: "https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
 },
 {
 id: 3,
 name: "Synthetic Soul",
 description: "AI-composed emotional music that feels human",
 cover: "https://source.unsplash.com/random/400x400/?robot,art",
 audio: "https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
 },
 {
 id: 4,
 name: "Algorithm Jazz",
 description: "Machine learning jazz improvisation in real-time",
 cover: "https://source.unsplash.com/random/400x400/?jazz,code",
 audio: "https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
 },
 {
 id: 5,
 name: "Dream Generator",
 description: "Hypnotic soundscapes for lucid dreaming",
 cover: "https://source.unsplash.com/random/400x400/?dream,space",
 audio: "https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
 },
 {
 id: 6,
 name: "Cosmic Vibes",
 description: "Music generated from astronomical data patterns",
 cover: "https://source.unsplash.com/random/400x400/?universe,stars",
 audio: "https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
 }
 ];
// Audio context
 let audio = new Audio();
 let isPlaying = false;
 let currentStation = 1;
 let updateTimeInterval;
// Load station
 function loadStation(stationId) {
 const station = stationData.find(s => s.id === stationId);
 if (!station) return;
currentStation = stationId;
 audio.src = station.audio;
 stationCover.src = station.cover;
 stationName.textContent = station.name;
 stationDesc.textContent = station.description;
// Update active station
 stations.forEach(s => {
 if (parseInt(s.dataset.id) === stationId) {
 s.classList.add('active');
 } else {
 s.classList.remove('active');
 }
 });
// Play if already playing
 if (isPlaying) {
 audio.play();
 }
 }
// Play/Pause
 function togglePlay() {
 if (isPlaying) {
 audio.pause();
 playIcon.classList.replace('fa-pause', 'fa-play');
 waveAnimation.style.opacity = '0.5';
 } else {
 audio.play();
 playIcon.classList.replace('fa-play', 'fa-pause');
 waveAnimation.style.opacity = '1';
 }
 isPlaying = !isPlaying;
 }
// Update progress bar
 function updateProgress() {
 const { currentTime, duration } = audio;
 const progressPercent = (currentTime / duration) * 100;
 progressBar.style.setProperty('--progress', `${progressPercent}%`);
// Format time
 const formatTime = (time) => {
 const minutes = Math.floor(time / 60);
 const seconds = Math.floor(time % 60);
 return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 };
currentTimeEl.textContent = formatTime(currentTime);
// Update total time if not set
 if (!totalTimeEl.dataset.set || isNaN(duration)) {
 totalTimeEl.textContent = formatTime(duration);
 totalTimeEl.dataset.set = 'true';
 }
 }
// Set progress
 function setProgress(e) {
 const width = this.clientWidth;
 const clickX = e.offsetX;
 const duration = audio.duration;
 audio.currentTime = (clickX / width) * duration;
 }
// Change volume
 function setVolume() {
 audio.volume = this.value / 100;
 }
// Change station
 function changeStation(stationId) {
 loadStation(stationId);
 if (isPlaying) {
 togglePlay();
 setTimeout(togglePlay, 100);
 }
 }
// Previous station
 function prevStation() {
 let newStation = currentStation - 1;
 if (newStation < 1) newStation = stationData.length;
 changeStation(newStation);
 }
// Next station
 function nextStation() {
 let newStation = currentStation + 1;
 if (newStation > stationData.length) newStation = 1;
 changeStation(newStation);
 }
// Event Listeners
 playBtn.addEventListener('click', togglePlay);
 prevBtn.addEventListener('click', prevStation);
 nextBtn.addEventListener('click', nextStation);
 progressBar.addEventListener('click', setProgress);
 volumeSlider.addEventListener('input', setVolume);
stations.forEach(station => {
 station.addEventListener('click', function() {
 const stationId = parseInt(this.dataset.id);
 changeStation(stationId);
 });
 });
audio.addEventListener('timeupdate', updateProgress);
 audio.addEventListener('ended', nextStation);
 audio.addEventListener('canplay', function() {
 if (isPlaying) {
 audio.play();
 }
 });
// Initialize
 loadStation(currentStation);
 audio.volume = volumeSlider.value / 100;
// Fake metadata for demo (since we can't read from audio files)
 totalTimeEl.textContent = "3:42";
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
</html>