Spaces:

Multimedix
/

anycoder-872e5823

Running

App Files Files Community

Multimedix commited on Dec 26, 2025

Commit

8fe09c4

verified ·

1 Parent(s): 630a10b

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1102 -912

index.html CHANGED Viewed

@@ -1,941 +1,1131 @@
 <!DOCTYPE html>
 <html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Radio Player Deutschland</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        :root {
-            --primary-color: #1e3c72;
-            --secondary-color: #2a5298;
-            --accent-color: #ff6b6b;
-            --text-light: #ffffff;
-            --text-dark: #333333;
-            --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --card-bg: rgba(255, 255, 255, 0.1);
-            --glass-bg: rgba(255, 255, 255, 0.1);
-            --glass-border: rgba(255, 255, 255, 0.2);
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: var(--bg-gradient);
-            min-height: 100vh;
-            color: var(--text-light);
-            overflow-x: hidden;
-            position: relative;
-        }
-        /* Animated Background */
-        .bg-animation {
-            position: fixed;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-            z-index: -1;
-            opacity: 0.3;
-        }
-        .bg-animation span {
-            position: absolute;
-            display: block;
-            width: 20px;
-            height: 20px;
-            background: rgba(255, 255, 255, 0.2);
-            animation: move 25s linear infinite;
-            bottom: -150px;
-        }
-        .bg-animation span:nth-child(1) {
-            left: 25%;
-            width: 80px;
-            height: 80px;
-            animation-delay: 0s;
-        }
-        .bg-animation span:nth-child(2) {
-            left: 10%;
-            width: 20px;
-            height: 20px;
-            animation-delay: 2s;
-            animation-duration: 12s;
-        }
-        .bg-animation span:nth-child(3) {
-            left: 70%;
-            width: 20px;
-            height: 20px;
-            animation-delay: 4s;
-        }
-        .bg-animation span:nth-child(4) {
-            left: 40%;
-            width: 60px;
-            height: 60px;
-            animation-delay: 0s;
-            animation-duration: 18s;
-        }
-        .bg-animation span:nth-child(5) {
-            left: 65%;
-            width: 20px;
-            height: 20px;
-            animation-delay: 0s;
-        }
-        .bg-animation span:nth-child(6) {
-            left: 75%;
-            width: 110px;
-            height: 110px;
-            animation-delay: 3s;
-        }
-        .bg-animation span:nth-child(7) {
-            left: 35%;
-            width: 150px;
-            height: 150px;
-            animation-delay: 7s;
-        }
-        .bg-animation span:nth-child(8) {
-            left: 50%;
-            width: 25px;
-            height: 25px;
-            animation-delay: 15s;
-            animation-duration: 45s;
-        }
-        .bg-animation span:nth-child(9) {
-            left: 20%;
-            width: 15px;
-            height: 15px;
-            animation-delay: 2s;
-            animation-duration: 35s;
-        }
-        .bg-animation span:nth-child(10) {
-            left: 85%;
-            width: 150px;
-            height: 150px;
-            animation-delay: 0s;
-            animation-duration: 11s;
-        }
-        @keyframes move {
-            0% {
-                transform: translateY(0) rotate(0deg);
-                opacity: 1;
-                border-radius: 0;
-            }
-            100% {
-                transform: translateY(-1000px) rotate(720deg);
-                opacity: 0;
-                border-radius: 50%;
-            }
-        }
-        /* Header */
-        header {
-            background: var(--glass-bg);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--glass-border);
-            padding: 1rem 0;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
-        .header-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            font-size: 1.5rem;
-            font-weight: bold;
-        }
-        .logo i {
-            font-size: 2rem;
-            color: var(--accent-color);
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0%, 100% {
-                transform: scale(1);
-            }
-            50% {
-                transform: scale(1.1);
-            }
-        }
-        .header-links a {
-            color: var(--text-light);
-            text-decoration: none;
-            margin-left: 2rem;
-            transition: color 0.3s;
-        }
-        .header-links a:hover {
-            color: var(--accent-color);
-        }
-        /* Main Container */
-        .container {
-            max-width: 1200px;
-            margin: 2rem auto;
-            padding: 0 2rem;
-        }
-        /* Main Player */
-        .main-player {
-            background: var(--glass-bg);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 2rem;
-            margin-bottom: 2rem;
-            border: 1px solid var(--glass-border);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-        }
-        .player-header {
-            text-align: center;
-            margin-bottom: 2rem;
-        }
-        .station-info {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 1rem;
-            margin-bottom: 1rem;
-        }
-        .station-logo {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 2rem;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-        .station-details h2 {
-            font-size: 1.8rem;
-            margin-bottom: 0.5rem;
-        }
-        .station-details p {
-            opacity: 0.8;
-        }
-        /* Visualizer */
-        .visualizer {
-            height: 100px;
-            display: flex;
-            align-items: flex-end;
-            justify-content: center;
-            gap: 4px;
-            margin: 2rem 0;
-        }
-        .bar {
-            width: 4px;
-            background: linear-gradient(to top, var(--accent-color), #feca57);
-            border-radius: 2px;
-            animation: dance 0.6s ease-in-out infinite;
-        }
-        .bar:nth-child(1) { animation-delay: 0s; height: 20px; }
-        .bar:nth-child(2) { animation-delay: 0.1s; height: 30px; }
-        .bar:nth-child(3) { animation-delay: 0.2s; height: 25px; }
-        .bar:nth-child(4) { animation-delay: 0.3s; height: 40px; }
-        .bar:nth-child(5) { animation-delay: 0.4s; height: 35px; }
-        .bar:nth-child(6) { animation-delay: 0.5s; height: 45px; }
-        .bar:nth-child(7) { animation-delay: 0.6s; height: 30px; }
-        .bar:nth-child(8) { animation-delay: 0.7s; height: 25px; }
-        .bar:nth-child(9) { animation-delay: 0.8s; height: 35px; }
-        .bar:nth-child(10) { animation-delay: 0.9s; height: 40px; }
-        .bar:nth-child(11) { animation-delay: 1s; height: 30px; }
-        .bar:nth-child(12) { animation-delay: 1.1s; height: 25px; }
-        .visualizer.paused .bar {
-            animation-play-state: paused;
-            opacity: 0.3;
-        }
-        @keyframes dance {
-            0%, 100% {
-                transform: scaleY(1);
-            }
-            50% {
-                transform: scaleY(1.5);
-            }
-        }
-        /* Controls */
-        .controls {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 2rem;
-            margin: 2rem 0;
-        }
-        .control-btn {
-            background: rgba(255, 255, 255, 0.1);
-            border: 2px solid var(--glass-border);
-            color: var(--text-light);
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.3s;
-            font-size: 1.2rem;
-        }
-        .control-btn:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: scale(1.1);
-        }
-        .control-btn.play-pause {
-            width: 80px;
-            height: 80px;
-            background: var(--accent-color);
-            border-color: var(--accent-color);
-            font-size: 1.5rem;
-        }
-        .control-btn.play-pause:hover {
-            background: #ff5252;
-            border-color: #ff5252;
-        }
-        /* Volume Control */
-        .volume-control {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            justify-content: center;
-            margin-top: 1rem;
-        }
-        .volume-slider {
-            width: 200px;
-            height: 6px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 3px;
-            outline: none;
-            -webkit-appearance: none;
-        }
-        .volume-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 20px;
-            height: 20px;
-            background: var(--accent-color);
-            border-radius: 50%;
-            cursor: pointer;
-        }
-        .volume-slider::-moz-range-thumb {
-            width: 20px;
-            height: 20px;
-            background: var(--accent-color);
-            border-radius: 50%;
-            cursor: pointer;
-            border: none;
-        }
-        /* Station Grid */
-        .stations-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 2rem;
-        }
-        .station-card {
-            background: var(--glass-bg);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--glass-border);
-            border-radius: 15px;
-            padding: 1.5rem;
-            cursor: pointer;
-            transition: all 0.3s;
-            position: relative;
-            overflow: hidden;
-        }
-        .station-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-            transition: left 0.5s;
-        }
-        .station-card:hover::before {
-            left: 100%;
-        }
-        .station-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-            background: rgba(255, 255, 255, 0.15);
-        }
-        .station-card.active {
-            background: rgba(255, 107, 107, 0.2);
-            border-color: var(--accent-color);
-        }
-        .station-card-header {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 1rem;
-        }
-        .station-card-logo {
-            width: 50px;
-            height: 50px;
-            border-radius: 10px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-        }
-        .station-card-info h3 {
-            font-size: 1.2rem;
-            margin-bottom: 0.25rem;
-        }
-        .station-card-info p {
-            font-size: 0.9rem;
-            opacity: 0.8;
-        }
-        .station-genre {
-            display: inline-block;
-            background: rgba(255, 255, 255, 0.1);
-            padding: 0.25rem 0.75rem;
-            border-radius: 20px;
-            font-size: 0.85rem;
-            margin-top: 0.5rem;
-        }
-        /* Categories */
-        .categories {
-            display: flex;
-            gap: 1rem;
-            margin-bottom: 2rem;
-            flex-wrap: wrap;
-        }
-        .category-btn {
-            background: var(--glass-bg);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--glass-border);
-            color: var(--text-light);
-            padding: 0.75rem 1.5rem;
-            border-radius: 25px;
-            cursor: pointer;
-            transition: all 0.3s;
-            font-size: 0.95rem;
-        }
-        .category-btn:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: translateY(-2px);
-        }
-        .category-btn.active {
-            background: var(--accent-color);
-            border-color: var(--accent-color);
-        }
-        /* Footer */
-        footer {
-            background: var(--glass-bg);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--glass-border);
-            padding: 2rem 0;
-            margin-top: 3rem;
-            text-align: center;
-        }
-        .footer-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 2rem;
-        }
-        .social-links {
-            display: flex;
-            justify-content: center;
-            gap: 1.5rem;
-            margin-top: 1rem;
-        }
-        .social-links a {
-            color: var(--text-light);
-            font-size: 1.5rem;
-            transition: color 0.3s, transform 0.3s;
-        }
-        .social-links a:hover {
-            color: var(--accent-color);
-            transform: translateY(-3px);
-        }
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .header-content {
-                flex-direction: column;
-                gap: 1rem;
-            }
-            .header-links {
-                display: none;
-            }
-            .stations-grid {
-                grid-template-columns: 1fr;
-            }
-            .controls {
-                gap: 1rem;
-            }
-            .control-btn {
-                width: 50px;
-                height: 50px;
-            }
-            .control-btn.play-pause {
-                width: 70px;
-                height: 70px;
-            }
-            .volume-slider {
-                width: 150px;
-            }
-        }
-        /* Loading Animation */
-        .loading {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: var(--accent-color);
-            animation: spin 1s ease-in-out infinite;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        /* Toast Notification */
-        .toast {
-            position: fixed;
-            bottom: 2rem;
-            right: 2rem;
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
-            padding: 1rem 1.5rem;
-            border-radius: 10px;
-            transform: translateX(400px);
-            transition: transform 0.3s;
-            z-index: 1000;
-        }
-        .toast.show {
-            transform: translateX(0);
-        }
-    </style>
 </head>
 <body>
-    <!-- Animated Background -->
-    <div class="bg-animation">
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
     </div>
-    <!-- Header -->
-    <header>
-        <div class="header-content">
-            <div class="logo">
-                <i class="fas fa-radio"></i>
-                <span>Radio Player Deutschland</span>
-            </div>
-            <div class="header-links">
-                <a href="#" onclick="showToast('Startseite'); return false;">Start</a>
-                <a href="#" onclick="showToast('Beliebte Sender'); return false;">Beliebt</a>
-                <a href="#" onclick="showToast('Neue Sender'); return false;">Neu</a>
-                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
             </div>
         </div>
-    </header>
-    <!-- Main Container -->
-    <div class="container">
-        <!-- Main Player -->
-        <div class="main-player">
-            <div class="player-header">
-                <div class="station-info">
-                    <div class="station-logo">
-                        <i class="fas fa-broadcast-tower"></i>
-                    </div>
-                    <div class="station-details">
-                        <h2 id="currentStation">Wähle einen Sender</h2>
-                        <p id="currentGenre">Genre</p>
-                    </div>
-                </div>
-            </div>
-            <!-- Visualizer -->
-            <div class="visualizer paused" id="visualizer">
-                <div class="bar"></div>
-                <div class="bar"></div>
-                <div class="bar"></div>
-                <div class="bar"></div>
-                <div class="bar"></div>
-                <div class="bar"></div>
-                <div class="bar"></div>
-                <div class="bar"></div>
-                <div class="bar"></div>
-                <div class="bar"></div>
-                <div class="bar"></div>
-                <div class="bar"></div>
-            </div>
-            <!-- Controls -->
-            <div class="controls">
-                <button class="control-btn" onclick="previousStation()">
                     <i class="fas fa-backward"></i>
                 </button>
-                <button class="control-btn" onclick="toggleMute()">
                     <i class="fas fa-volume-down"></i>
                 </button>
-                <button class="control-btn play-pause" id="playPauseBtn" onclick="togglePlayPause()">
                     <i class="fas fa-play"></i>
                 </button>
-                <button class="control-btn" onclick="toggleMute()">
                     <i class="fas fa-volume-up"></i>
                 </button>
-                <button class="control-btn" onclick="nextStation()">
                     <i class="fas fa-forward"></i>
                 </button>
-            </div>
-            <!-- Volume Control -->
-            <div class="volume-control">
-                <i class="fas fa-volume-down"></i>
-                <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="70">
-                <i class="fas fa-volume-up"></i>
-                <span style="margin-left: 1rem;" id="volumeValue">70%</span>
-            </div>
-        </div>
-        <!-- Categories -->
-        <div class="categories">
-            <button class="category-btn active" onclick="filterStations('all')">Alle</button>
-            <button class="category-btn" onclick="filterStations('pop')">Pop</button>
-            <button class="category-btn" onclick="filterStations('rock')">Rock</button>
-            <button class="category-btn" onclick="filterStations('jazz')">Jazz</button>
-            <button class="category-btn" onclick="filterStations('klassik')">Klassik</button>
-            <button class="category-btn" onclick="filterStations('news')">Nachrichten</button>
-        </div>
-        <!-- Stations Grid -->
-        <div class="stations-grid" id="stationsGrid">
-            <!-- Stations will be dynamically added here -->
-        </div>
     </div>
-    <!-- Footer -->
-    <footer>
-        <div class="footer-content">
-            <p>&copy; 2024 Radio Player Deutschland. Alle Rechte vorbehalten.</p>
-            <div class="social-links">
-                <a href="#" onclick="showToast('Facebook'); return false;"><i class="fab fa-facebook"></i></a>
-                <a href="#" onclick="showToast('Twitter'); return false;"><i class="fab fa-twitter"></i></a>
-                <a href="#" onclick="showToast('Instagram'); return false;"><i class="fab fa-instagram"></i></a>
-                <a href="#" onclick="showToast('YouTube'); return false;"><i class="fab fa-youtube"></i></a>
-            </div>
-        </div>
-    </footer>
-    <!-- Toast Notification -->
-    <div class="toast" id="toast"></div>
-    <!-- Audio Element -->
-    <audio id="audioPlayer"></audio>
-    <script>
-        // Radio Stations Data
-        const stations = [
-            { id: 1, name: 'Deutschlandfunk', genre: 'Nachrichten', url: 'https://st01.dlf.de/dlf/01/128/mp3/stream.mp3', category: 'news', icon: '📻' },
-            { id: 2, name: 'Bayern 3', genre: 'Pop', url: 'https://br-br3-live.cast.addradio.de/br/br3/live/mp3/128/stream.mp3', category: 'pop', icon: '🎵' },
-            { id: 3, name: 'WDR 4', genre: 'Schlager', url: 'https://wdr-4-live.icecast.wdr.de/wdr/wdr4/live/mp3/128/stream.mp3', category: 'pop', icon: '🎶' },
-            { id: 4, name: 'NDR 2', genre: 'Pop/Rock', url: 'https://ndr-ndr2-niedersachsen.cast.addradio.de/ndr/ndr2/niedersachsen/mp3/128/stream.mp3', category: 'rock', icon: '🎸' },
-            { id: 5, name: 'SWR3', genre: 'Pop', url: 'https://swr-swr3-live.cast.addradio.de/swr/swr3/live/mp3/128/stream.mp3', category: 'pop', icon: '🎼' },
-            { id: 6, name: 'HR3', genre: 'Pop', url: 'https://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/128/stream.mp3', category: 'pop', icon: '🎤' },
-            { id: 7, name: 'MDR Jump', genre: 'Rock/Pop', url: 'https://mdr-jump-live.cast.addradio.de/mdr/mdr-jump/live/mp3/128/stream.mp3', category: 'rock', icon: '🎧' },
-            { id: 8, name: 'RPR1', genre: 'Pop', url: 'https://streams.rpr1.de/rpr-mp3-128', category: 'pop', icon: '🎹' },
-            { id: 9, name: 'Radio Bremen', genre: 'Nachrichten', url: 'https://rb-media.rb-radio.de/rb/bremen/live/mp3/128/stream.mp3', category: 'news', icon: '📰' },
-            { id: 10, name: 'SR 1', genre: 'Pop', url: 'https://sr-sr1-live.cast.addradio.de/sr/sr1/live/mp3/128/stream.mp3', category: 'pop', icon: '🎺' },
-            { id: 11, name: 'JazzRadio', genre: 'Jazz', url: 'http://stream.jazzradio.de/jazzradio/mp3-192', category: 'jazz', icon: '🎷' },
-            { id: 12, name: 'BR-Klassik', genre: 'Klassik', url: 'https://br-brklassik-live.cast.addradio.de/br/brklassik/live/mp3/128/stream.mp3', category: 'klassik', icon: '🎻' },
-            { id: 13, name: 'DLF Kultur', genre: 'Kultur', url: 'https://st02.dlf.de/dlf/02/128/mp3/stream.mp3', category: 'news', icon: '🎭' },
-            { id: 14, name: 'Antenne Bayern', genre: 'Pop', url: 'https://mp3channels.webradio.antenne.de/antenne-bayern', category: 'pop', icon: '📡' },
-            { id: 15, name: 'Radio Hamburg', genre: 'Pop', url: 'https://stream.radiohamburg.de/rhh-live/mp3-128', category: 'pop', icon: '⚓' },
-            { id: 16, name: 'FFH', genre: 'Pop', url: 'https://mp3.ffh.de/radioffh/hqlivestream.mp3', category: 'pop', icon: '🎪' }
-        ];
-        let currentStationIndex = -1;
-        let isPlaying = false;
-        let currentCategory = 'all';
-        // Initialize
-        document.addEventListener('DOMContentLoaded', function() {
-            renderStations();
-            setupVolumeControl();
         });
-        // Render Stations
-        function renderStations() {
-            const grid = document.getElementById('stationsGrid');
-            grid.innerHTML = '';
-            const filteredStations = currentCategory === 'all'
-                ? stations
-                : stations.filter(s => s.category === currentCategory);
-            filteredStations.forEach((station, index) => {
-                const card = document.createElement('div');
-                card.className = 'station-card';
-                card.innerHTML = `
-                    <div class="station-card-header">
-                        <div class="station-card-logo">${station.icon}</div>
-                        <div class="station-card-info">
-                            <h3>${station.name}</h3>
-                            <p>${station.genre}</p>
-                        </div>
-                    </div>
-                    <span class="station-genre">${station.category}</span>
-                `;
-                card.onclick = () => selectStation(station);
-                grid.appendChild(card);
-            });
-        }
-        // Select Station
-        function selectStation(station) {
-            const audioPlayer = document.getElementById('audioPlayer');
-            const playPauseBtn = document.getElementById('playPauseBtn');
-            // Update UI
-            document.getElementById('currentStation').textContent = station.name;
-            document.getElementById('currentGenre').textContent = station.genre;
-            // Update active card
-            document.querySelectorAll('.station-card').forEach(card => {
-                card.classList.remove('active');
-                if (card.querySelector('h3').textContent === station.name) {
-                    card.classList.add('active');
-                }
-            });
-            // Set audio source
-            audioPlayer.src = station.url;
-            currentStationIndex = stations.findIndex(s => s.id === station.id);
-            // Auto play
-            if (!isPlaying) {
-                togglePlayPause();
-            }
-            showToast(`Sender gewechselt: ${station.name}`);
-        }
-        // Toggle Play/Pause
-        function togglePlayPause() {
-            const audioPlayer = document.getElementById('audioPlayer');
-            const playPauseBtn = document.getElementById('playPauseBtn');
-            const visualizer = document.getElementById('visualizer');
-            if (currentStationIndex === -1) {
-                showToast('Bitte wähle zuerst einen Sender aus');
-                return;
-            }
             if (isPlaying) {
-                audioPlayer.pause();
-                playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
-                visualizer.classList.add('paused');
-                showToast('Pausiert');
-            } else {
-                audioPlayer.play().catch(e => {
-                    showToast('Fehler beim Abspielen');
-                    console.error(e);
-                });
-                playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
-                visualizer.classList.remove('paused');
-                showToast('Wiedergabe gestartet');
             }
-            isPlaying = !isPlaying;
-        }
-        // Previous Station
-        function previousStation() {
-            if (currentStationIndex > 0) {
-                selectStation(stations[currentStationIndex - 1]);
-            } else if (currentStationIndex === 0) {
-                selectStation(stations[stations.length - 1]);
-            }
-        }
-        // Next Station
-        function nextStation() {
-            if (currentStationIndex < stations.length - 1) {
-                selectStation(stations[currentStationIndex + 1]);
-            } else if (currentStationIndex === stations.length - 1) {
-                selectStation(stations[0]);
             }
         }
-        // Volume Control
-        function setupVolumeControl() {
-            const volumeSlider = document.getElementById('volumeSlider');
-            const volumeValue = document.getElementById('volumeValue');
-            const audioPlayer = document.getElementById('audioPlayer');
-            volumeSlider.addEventListener('input', function() {
-                const volume = this.value / 100;
-                audioPlayer.volume = volume;
-                volumeValue.textContent = this.value + '%';
-            });
-            // Set initial volume
-            audioPlayer.volume = 0.7;
-        }
-        // Toggle Mute
-        function toggleMute() {
-            const audioPlayer = document.getElementById('audioPlayer');
-            audioPlayer.muted = !audioPlayer.muted;
-            showToast(audioPlayer.muted ? 'Stumm geschaltet' : 'Stumm aufgehoben');
-        }
-        // Filter Stations
-        function filterStations(category) {
-            currentCategory = category;
-            // Update active button
-            document.querySelectorAll('.category-btn').forEach(btn => {
-                btn.classList.remove('active');
-                if (btn.textContent.toLowerCase().includes(category) ||
-                    (category === 'all' && btn.textContent === 'Alle')) {
-                    btn.classList.add('active');
-                }
-            });
-            renderStations();
-        }
-        // Toast Notification
-        function showToast(message) {
-            const toast = document.getElementById('toast');
-            toast.textContent = message;
-            toast.classList.add('show');
-            setTimeout(() => {
-                toast.classList.remove('show');
-            }, 3000);
-        }
-        // Keyboard Controls
-        document.addEventListener('keydown', function(e) {
-            switch(e.key) {
-                case ' ':
-                    e.preventDefault();
-                    togglePlayPause();
-                    break;
-                case 'ArrowRight':
-                    nextStation();
-                    break;
-                case 'ArrowLeft':
-                    previousStation();
-                    break;
-                case 'ArrowUp':
-                    const volumeSlider = document.getElementById('volumeSlider');
-                    volumeSlider.value = Math.min(100, parseInt(volumeSlider.value) + 5);
-                    volumeSlider.dispatchEvent(new Event('input'));
-                    break;
-                case 'ArrowDown':
-                    const volumeSliderDown = document.getElementById('volumeSlider');
-                    volumeSliderDown.value = Math.max(0, parseInt(volumeSliderDown.value) - 5);
-                    volumeSliderDown.dispatchEvent(new Event('input'));
-                    break;
             }
         });
-        // Handle audio errors
-        document.getElementById('audioPlayer').addEventListener('error', function() {
-            showToast('Fehler beim Laden des Streams');
-            isPlaying = false;
-            document.getElementById('playPauseBtn').innerHTML = '<i class="fas fa-play"></i>';
-            document.getElementById('visualizer').classList.add('paused');
-        });
-        // Handle audio ended
-        document.getElementById('audioPlayer').addEventListener('ended', function() {
-            isPlaying = false;
-            document.getElementById('playPauseBtn').innerHTML = '<i class="fas fa-play"></i>';
-            document.getElementById('visualizer').classList.add('paused');
-        });
-    </script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Radio Player Deutschland</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    :root {
+      --primary-color: #1e3c72;
+      --secondary-color: #2a5298;
+      --accent-color: #ff6b6b;
+      --text-light: #ffffff;
+      --text-dark: #333333;
+      --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      --card-bg: rgba(255, 255, 255, 0.1);
+      --glass-bg: rgba(255, 255, 255, 0.1);
+      --glass-border: rgba(255, 255, 255, 0.2);
+      --success-color: #4caf50;
+      --error-color: #f44336;
+    }
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: var(--bg-gradient);
+      min-height: 100vh;
+      color: var(--text-light);
+      overflow-x: hidden;
+      position: relative;
+    }
+    /* Animated Background */
+    .bg-animation {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      opacity: 0.3;
+    }
+    .bg-animation span {
+      position: absolute;
+      display: block;
+      width: 20px;
+      height: 20px;
+      background: rgba(255, 255, 255, 0.2);
+      animation: move 25s linear infinite;
+      bottom: -150px;
+    }
+    .bg-animation span:nth-child(1) {
+      left: 25%;
+      width: 80px;
+      height: 80px;
+      animation-delay: 0s;
+    }
+    .bg-animation span:nth-child(2) {
+      left: 10%;
+      width: 20px;
+      height: 20px;
+      animation-delay: 2s;
+      animation-duration: 12s;
+    }
+    .bg-animation span:nth-child(3) {
+      left: 70%;
+      width: 20px;
+      height: 20px;
+      animation-delay: 4s;
+    }
+    .bg-animation span:nth-child(4) {
+      left: 40%;
+      width: 60px;
+      height: 60px;
+      animation-delay: 0s;
+      animation-duration: 18s;
+    }
+    .bg-animation span:nth-child(5) {
+      left: 65%;
+      width: 20px;
+      height: 20px;
+      animation-delay: 0s;
+    }
+    .bg-animation span:nth-child(6) {
+      left: 75%;
+      width: 110px;
+      height: 110px;
+      animation-delay: 3s;
+    }
+    .bg-animation span:nth-child(7) {
+      left: 35%;
+      width: 150px;
+      height: 150px;
+      animation-delay: 7s;
+    }
+    .bg-animation span:nth-child(8) {
+      left: 50%;
+      width: 25px;
+      height: 25px;
+      animation-delay: 15s;
+      animation-duration: 45s;
+    }
+    .bg-animation span:nth-child(9) {
+      left: 20%;
+      width: 15px;
+      height: 15px;
+      animation-delay: 2s;
+      animation-duration: 35s;
+    }
+    .bg-animation span:nth-child(10) {
+      left: 85%;
+      width: 150px;
+      height: 150px;
+      animation-delay: 0s;
+      animation-duration: 11s;
+    }
+    @keyframes move {
+      0% {
+        transform: translateY(0) rotate(0deg);
+        opacity: 1;
+        border-radius: 0;
+      }
+      100% {
+        transform: translateY(-1000px) rotate(720deg);
+        opacity: 0;
+        border-radius: 50%;
+      }
+    }
+    /* Header */
+    header {
+      background: var(--glass-bg);
+      backdrop-filter: blur(10px);
+      border-bottom: 1px solid var(--glass-border);
+      padding: 1rem 0;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    .header-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
+    .logo i {
+      font-size: 2rem;
+      color: var(--accent-color);
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0%,
+      100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.1);
+      }
+    }
+    .header-links a {
+      color: var(--text-light);
+      text-decoration: none;
+      margin-left: 2rem;
+      transition: color 0.3s;
+    }
+    .header-links a:hover {
+      color: var(--accent-color);
+    }
+    /* Main Container */
+    .container {
+      max-width: 1200px;
+      margin: 2rem auto;
+      padding: 0 2rem;
+    }
+    /* Main Player */
+    .main-player {
+      background: var(--glass-bg);
+      backdrop-filter: blur(10px);
+      border-radius: 20px;
+      padding: 2rem;
+      margin-bottom: 2rem;
+      border: 1px solid var(--glass-border);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    }
+    .player-header {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+    .station-info {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+    .station-logo {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 2rem;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    }
+    .station-details h2 {
+      font-size: 1.8rem;
+      margin-bottom: 0.5rem;
+    }
+    .station-details p {
+      opacity: 0.8;
+    }
+    /* Connection Status */
+    .connection-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      border-radius: 20px;
+      font-size: 0.9rem;
+      margin-top: 0.5rem;
+      background: rgba(255, 255, 255, 0.1);
+    }
+    .connection-status.connected {
+      background: rgba(76, 175, 80, 0.2);
+      color: var(--success-color);
+    }
+    .connection-status.connecting {
+      background: rgba(255, 193, 7, 0.2);
+      color: #ffc107;
+    }
+    .connection-status.error {
+      background: rgba(244, 67, 54, 0.2);
+      color: var(--error-color);
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: currentColor;
+      animation: blink 1.5s infinite;
+    }
+    @keyframes blink {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.3; }
+    }
+    /* Visualizer */
+    .visualizer {
+      height: 100px;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      gap: 4px;
+      margin: 2rem 0;
+    }
+    .bar {
+      width: 4px;
+      background: linear-gradient(to top, var(--accent-color), #feca57);
+      border-radius: 2px;
+      animation: dance 0.6s ease-in-out infinite;
+    }
+    .bar:nth-child(1) {
+      animation-delay: 0s;
+      height: 20px;
+    }
+    .bar:nth-child(2) {
+      animation-delay: 0.1s;
+      height: 30px;
+    }
+    .bar:nth-child(3) {
+      animation-delay: 0.2s;
+      height: 25px;
+    }
+    .bar:nth-child(4) {
+      animation-delay: 0.3s;
+      height: 40px;
+    }
+    .bar:nth-child(5) {
+      animation-delay: 0.4s;
+      height: 35px;
+    }
+    .bar:nth-child(6) {
+      animation-delay: 0.5s;
+      height: 45px;
+    }
+    .bar:nth-child(7) {
+      animation-delay: 0.6s;
+      height: 30px;
+    }
+    .bar:nth-child(8) {
+      animation-delay: 0.7s;
+      height: 25px;
+    }
+    .bar:nth-child(9) {
+      animation-delay: 0.8s;
+      height: 35px;
+    }
+    .bar:nth-child(10) {
+      animation-delay: 0.9s;
+      height: 40px;
+    }
+    .bar:nth-child(11) {
+      animation-delay: 1s;
+      height: 30px;
+    }
+    .bar:nth-child(12) {
+      animation-delay: 1.1s;
+      height: 25px;
+    }
+    .visualizer.paused .bar {
+      animation-play-state: paused;
+      opacity: 0.3;
+    }
+    @keyframes dance {
+      0%,
+      100% {
+        transform: scaleY(1);
+      }
+      50% {
+        transform: scaleY(1.5);
+      }
+    }
+    /* Controls */
+    .controls {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 2rem;
+      margin: 2rem 0;
+    }
+    .control-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 2px solid var(--glass-border);
+      color: var(--text-light);
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      font-size: 1.2rem;
+      position: relative;
+    }
+    .control-btn:hover {
+      background: rgba(255, 255, 255, 0.2);
+      transform: scale(1.1);
+    }
+    .control-btn.play-pause {
+      width: 80px;
+      height: 80px;
+      background: var(--accent-color);
+      border-color: var(--accent-color);
+      font-size: 1.5rem;
+    }
+    .control-btn.play-pause:hover {
+      background: #ff5252;
+      border-color: #ff5252;
+    }
+    .control-btn.loading {
+      pointer-events: none;
+      opacity: 0.7;
+    }
+    .control-btn.loading::after {
+      content: '';
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border: 2px solid transparent;
+      border-top-color: white;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    /* Volume Control */
+    .volume-control {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      justify-content: center;
+      margin-top: 1rem;
+    }
+    .volume-slider {
+      width: 200px;
+      height: 6px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 3px;
+      outline: none;
+      -webkit-appearance: none;
+    }
+    .volume-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 20px;
+      height: 20px;
+      background: var(--accent-color);
+      border-radius: 50%;
+      cursor: pointer;
+    }
+    .volume-slider::-moz-range-thumb {
+      width: 20px;
+      height: 20px;
+      background: var(--accent-color);
+      border-radius: 50%;
+      cursor: pointer;
+      border: none;
+    }
+    /* Station Grid */
+    .stations-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    .station-card {
+      background: var(--glass-bg);
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--glass-border);
+      border-radius: 15px;
+      padding: 1.5rem;
+      cursor: pointer;
+      transition: all 0.3s;
+      position: relative;
+      overflow: hidden;
+    }
+    .station-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      transition: left 0.5s;
+    }
+    .station-card:hover::before {
+      left: 100%;
+    }
+    .station-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    .station-card.active {
+      background: rgba(255, 107, 107, 0.2);
+      border-color: var(--accent-color);
+    }
+    .station-card.error {
+      border-color: var(--error-color);
+      background: rgba(244, 67, 54, 0.1);
+    }
+    .station-card-header {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+    .station-card-logo {
+      width: 50px;
+      height: 50px;
+      border-radius: 10px;
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+    }
+    .station-card-info h3 {
+      font-size: 1.2rem;
+      margin-bottom: 0.25rem;
+    }
+    .station-card-info p {
+      font-size: 0.9rem;
+      opacity: 0.8;
+    }
+    .station-genre {
+      display: inline-block;
+      background: rgba(255, 255, 255, 0.1);
+      padding: 0.25rem 0.75rem;
+      border-radius: 20px;
+      font-size: 0.85rem;
+      margin-top: 0.5rem;
+    }
+    .station-status {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #4caf50;
+    }
+    .station-status.error {
+      background: var(--error-color);
+    }
+    /* Categories */
+    .categories {
+      display: flex;
+      gap: 1rem;
+      margin-bottom: 2rem;
+      flex-wrap: wrap;
+    }
+    .category-btn {
+      background: var(--glass-bg);
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--glass-border);
+      color: var(--text-light);
+      padding: 0.75rem 1.5rem;
+      border-radius: 25px;
+      cursor: pointer;
+      transition: all 0.3s;
+      font-size: 0.95rem;
+    }
+    .category-btn:hover {
+      background: rgba(255, 255, 255, 0.2);
+      transform: translateY(-2px);
+    }
+    .category-btn.active {
+      background: var(--accent-color);
+      border-color: var(--accent-color);
+    }
+    /* Footer */
+    footer {
+      background: var(--glass-bg);
+      backdrop-filter: blur(10px);
+      border-top: 1px solid var(--glass-border);
+      padding: 2rem 0;
+      margin-top: 3rem;
+      text-align: center;
+    }
+    .footer-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 2rem;
+    }
+    .social-links {
+      display: flex;
+      justify-content: center;
+      gap: 1.5rem;
+      margin-top: 1rem;
+    }
+    .social-links a {
+      color: var(--text-light);
+      font-size: 1.5rem;
+      transition: color 0.3s, transform 0.3s;
+    }
+    .social-links a:hover {
+      color: var(--accent-color);
+      transform: translateY(-3px);
+    }
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .header-content {
+        flex-direction: column;
+        gap: 1rem;
+      }
+      .header-links {
+        display: none;
+      }
+      .stations-grid {
+        grid-template-columns: 1fr;
+      }
+      .controls {
+        gap: 1rem;
+      }
+      .control-btn {
+        width: 50px;
+        height: 50px;
+      }
+      .control-btn.play-pause {
+        width: 70px;
+        height: 70px;
+      }
+      .volume-slider {
+        width: 150px;
+      }
+    }
+    /* Toast Notification */
+    .toast {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      background: rgba(0, 0, 0, 0.8);
+      color: white;
+      padding: 1rem 1.5rem;
+      border-radius: 10px;
+      transform: translateX(400px);
+      transition: transform 0.3s;
+      z-index: 1000;
+      max-width: 300px;
+    }
+    .toast.show {
+      transform: translateX(0);
+    }
+    .toast.error {
+      background: var(--error-color);
+    }
+    .toast.success {
+      background: var(--success-color);
+    }
+    /* Fallback Player Info */
+    .fallback-info {
+      background: rgba(255, 193, 7, 0.1);
+      border: 1px solid rgba(255, 193, 7, 0.3);
+      border-radius: 10px;
+      padding: 1rem;
+      margin-top: 1rem;
+      text-align: center;
+      font-size: 0.9rem;
+    }
+  </style>
 </head>
 <body>
+  <!-- Animated Background -->
+  <div class="bg-animation">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+  </div>
+  <!-- Header -->
+  <header>
+    <div class="header-content">
+      <div class="logo">
+        <i class="fas fa-radio"></i>
+        <span>Radio Player Deutschland</span>
+      </div>
+      <div class="header-links">
+        <a href="#" onclick="showToast('Startseite', 'success'); return false;">Start</a>
+        <a href="#" onclick="showToast('Beliebte Sender', 'success'); return false;">Beliebt</a>
+        <a href="#" onclick="showToast('Neue Sender', 'success'); return false;">Neu</a>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+      </div>
     </div>
+  </header>
+  <!-- Main Container -->
+  <div class="container">
+    <!-- Main Player -->
+    <div class="main-player">
+      <div class="player-header">
+        <div class="station-info">
+          <div class="station-logo">
+            <i class="fas fa-broadcast-tower"></i>
+          </div>
+          <div class="station-details">
+            <h2 id="currentStation">Wähle einen Sender</h2>
+            <p id="currentGenre">Genre</p>
+            <div class="connection-status" id="connectionStatus">
+              <span class="status-dot"></span>
+              <span id="statusText">Bereit</span>
             </div>
+          </div>
         </div>
+      </div>
+      <!-- Visualizer -->
+      <div class="visualizer paused" id="visualizer">
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+      </div>
+      <!-- Controls -->
+      <div class="controls">
+        <button class="control-btn" onclick="previousStation()">
                     <i class="fas fa-backward"></i>
                 </button>
+        <button class="control-btn" onclick="toggleMute()">
                     <i class="fas fa-volume-down"></i>
                 </button>
+        <button class="control-btn play-pause" id="playPauseBtn" onclick="togglePlayPause()">
                     <i class="fas fa-play"></i>
                 </button>
+        <button class="control-btn" onclick="toggleMute()">
                     <i class="fas fa-volume-up"></i>
                 </button>
+        <button class="control-btn" onclick="nextStation()">
                     <i class="fas fa-forward"></i>
                 </button>
+      </div>
+      <!-- Volume Control -->
+      <div class="volume-control">
+        <i class="fas fa-volume-down"></i>
+        <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="70">
+        <i class="fas fa-volume-up"></i>
+        <span style="margin-left: 1rem;" id="volumeValue">70%</span>
+      </div>
+      <div class="fallback-info" id="fallbackInfo" style="display: none;">
+        <i class="fas fa-info-circle"></i> Simulierter Modus - Die Radio-Streams werden simuliert
+      </div>
+    </div>
+    <!-- Categories -->
+    <div class="categories">
+      <button class="category-btn active" onclick="filterStations('all')">Alle</button>
+      <button class="category-btn" onclick="filterStations('pop')">Pop</button>
+      <button class="category-btn" onclick="filterStations('rock')">Rock</button>
+      <button class="category-btn" onclick="filterStations('jazz')">Jazz</button>
+      <button class="category-btn" onclick="filterStations('klassik')">Klassik</button>
+      <button class="category-btn" onclick="filterStations('news')">Nachrichten</button>
     </div>
+    <!-- Stations Grid -->
+    <div class="stations-grid" id="stationsGrid">
+      <!-- Stations will be dynamically added here -->
+    </div>
+  </div>
+  <!-- Footer -->
+  <footer>
+    <div class="footer-content">
+      <p>&copy; 2024 Radio Player Deutschland. Alle Rechte vorbehalten.</p>
+      <div class="social-links">
+        <a href="#" onclick="showToast('Facebook', 'success'); return false;"><i class="fab fa-facebook"></i></a>
+        <a href="#" onclick="showToast('Twitter', 'success'); return false;"><i class="fab fa-twitter"></i></a>
+        <a href="#" onclick="showToast('Instagram', 'success'); return false;"><i class="fab fa-instagram"></i></a>
+        <a href="#" onclick="showToast('YouTube', 'success'); return false;"><i class="fab fa-youtube"></i></a>
+      </div>
+    </div>
+  </footer>
+  <!-- Toast Notification -->
+  <div class="toast" id="toast"></div>
+  <!-- Audio Element -->
+  <audio id="audioPlayer" crossorigin="anonymous"></audio>
+  <script>
+    // Radio Stations Data mit alternativen URLs
+    const stations = [
+        {
+            id: 1,
+            name: 'Deutschlandfunk',
+            genre: 'Nachrichten',
+            url: 'https://st01.dlf.de/dlf/01/128/mp3/stream.mp3',
+            fallbackUrl: 'https://icecastmdr-ice.akamaized.net/mdr/128k/mp3/live',
+            category: 'news',
+            icon: '📻'
+        },
+        {
+            id: 2,
+            name: 'Bayern 3',
+            genre: 'Pop',
+            url: 'https://br-br3-live.cast.addradio.de/br/br3/live/mp3/128/stream.mp3',
+            fallbackUrl: 'https://mp3channels.webradio.antenne.de/antenne-bayern',
+            category: 'pop',
+            icon: '🎵'
+        },
+        {
+            id: 3,
+            name: 'WDR 4',
+            genre: 'Schlager',
+            url: 'https://wdr-4-live.icecast.wdr.de/wdr/wdr4/live/mp3/128/stream.mp3',
+            fallbackUrl: 'https://mp3channels.webradio.antennekempten.de/antenne-kempten',
+            category: 'pop',
+            icon: '🎶'
+        },
+        {
+            id: 4,
+            name: 'NDR 2',
+            genre: 'Pop/Rock',
+            url: 'https://ndr-ndr2-niedersachsen.cast.addradio.de/ndr/ndr2/niedersachsen/mp3/128/stream.mp3',
+            fallbackUrl: 'https://stream.radiohamburg.de/rhh-live/mp3-128',
+            category: 'rock',
+            icon: '🎸'
+        },
+        {
+            id: 5,
+            name: 'SWR3',
+            genre: 'Pop',
+            url: 'https://swr-swr3-live.cast.addradio.de/swr/swr3/live/mp3/128/stream.mp3',
+            fallbackUrl: 'https://mp3.ffh.de/radioffh/hqlivestream.mp3',
+            category: 'pop',
+            icon: '🎼'
+        },
+        {
+            id: 6,
+            name: 'HR3',
+            genre: 'Pop',
+            url: 'https://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/128/stream.mp3',
+            fallbackUrl: 'https://streams.rpr1.de/rpr-mp3-128',
+            category: 'pop',
+            icon: '🎤'
+        },
+        {
+            id: 7,
+            name: 'MDR Jump',
+            genre: 'Rock/Pop',
+            url: 'https://mdr-jump-live.cast.addradio.de/mdr/mdr-jump/live/mp3/128/stream.mp3',
+            fallbackUrl: 'https://stream.rockantenne.de/rockantenne',
+            category: 'rock',
+            icon: '🎧'
+        },
+        {
+            id: 8,
+            name: 'RPR1',
+            genre: 'Pop',
+            url: 'https://streams.rpr1.de/rpr-mp3-128',
+            fallbackUrl: 'https://mp3channels.webradio.antenne.de/antenne-bayern',
+            category: 'pop',
+            icon: '🎹'
+        },
+        {
+            id: 9,
+            name: 'Radio Bremen',
+            genre: 'Nachrichten',
+            url: 'https://rb-media.rb-radio.de/rb/bremen/live/mp3/128/stream.mp3',
+            fallbackUrl: 'https://st01.dlf.de/dlf/01/128/mp3/stream.mp3',
+            category: 'news',
+            icon: '📰'
+        },
+        {
+            id: 10,
+            name: 'SR 1',
+            genre: 'Pop',
+            url: 'https://sr-sr1-live.cast.addradio.de/sr/sr1/live/mp3/128/stream.mp3',
+            fallbackUrl: 'https://stream.sunshine-live.de/live/mp3-256',
+            category: 'pop',
+            icon: '🎺'
+        },
+        {
+            id: 11,
+            name: 'JazzRadio',
+            genre: 'Jazz',
+            url: 'http://stream.jazzradio.de/jazzradio/mp3-192',
+            fallbackUrl: 'https://stream.lounge-radio.com/mp3',
+            category: 'jazz',
+            icon: '🎷'
+        },
+        {
+            id: 12,
+            name: 'BR-Klassik',
+            genre: 'Klassik',
+            url: 'https://br-brklassik-live.cast.addradio.de/br/brklassik/live/mp3/128/stream.mp3',
+            fallbackUrl: 'https://mp3stream.klassikradio.de/klassikradio',
+            category: 'klassik',
+            icon: '🎻'
+        },
+        {
+            id: 13,
+            name: 'DLF Kultur',
+            genre: 'Kultur',
+            url: 'https://st02.dlf.de/dlf/02/128/mp3/stream.mp3',
+            fallbackUrl: 'https://st01.dlf.de/dlf/01/128/mp3/stream.mp3',
+            category: 'news',
+            icon: '🎭'
+        },
+        {
+            id: 14,
+            name: 'Antenne Bayern',
+            genre: 'Pop',
+            url: 'https://mp3channels.webradio.antenne.de/antenne-bayern',
+            fallbackUrl: 'https://mp3.ffh.de/radioffh/hqlivestream.mp3',
+            category: 'pop',
+            icon: '📡'
+        },
+        {
+            id: 15,
+            name: 'Radio Hamburg',
+            genre: 'Pop',
+            url: 'https://stream.radiohamburg.de/rhh-live/mp3-128',
+            fallbackUrl: 'https://mp3channels.webradio.antenne.de/antenne-bayern',
+            category: 'pop',
+            icon: '⚓'
+        },
+        {
+            id: 16,
+            name: 'FFH',
+            genre: 'Pop',
+            url: 'https://mp3.ffh.de/radioffh/hqlivestream.mp3',
+            fallbackUrl: 'https://streams.rpr1.de/rpr-mp3-128',
+            category: 'pop',
+            icon: '🎪'
+        }
+    ];
+    let currentStationIndex = -1;
+    let isPlaying = false;
+    let currentCategory = 'all';
+    let isFallbackMode = false;
+    let simulationInterval = null;
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+        renderStations();
+        setupVolumeControl();
+        setupAudioEvents();
+    });
+    // Setup Audio Events
+    function setupAudioEvents() {
+        const audioPlayer = document.getElementById('audioPlayer');
+        audioPlayer.addEventListener('loadstart', () => {
+            updateConnectionStatus('connecting', 'Verbinden...');
         });
+        audioPlayer.addEventListener('canplay', () => {
+            updateConnectionStatus('connected', 'Verbunden');
             if (isPlaying) {
+                audioPlayer.play();
             }
+        });
+        audioPlayer.addEventListener('error', (e) => {
+            handleAudioError(e);
+        });
+    }
+    // Handle Audio Error
+    function handleAudioError(e) {
+        const audioPlayer = document.getElementById('audioPlayer');
+        if (!isFallbackMode && currentStationIndex >= 0) {
+            // Versuche Fallback-URL
+            const station = stations[currentStationIndex];
+            if (station.fallbackUrl && audioPlayer.src !== station.fallbackUrl) {
+                showToast('Hauptstream nicht erreichbar, versuche Alternative...', 'error');
+                audioPlayer.src = station.fallbackUrl;
+                audioPlayer.load();
+                return;
             }
         }
+        // Wenn auch Fallback nicht funktioniert, aktiviere Simulationsmodus
+        if (!isFallbackMode) {
+            isFallbackMode = true;
+            document.getElementById('fallbackInfo').style.display = 'block';
+            updateConnectionStatus('connected', 'Simulationsmodus');
+            startSimulation();
+            showToast('Streams nicht verfügbar - Simulationsmodus aktiviert', 'error');
+        }
+    }
+    // Start Simulation
+    function startSimulation() {
+        const visualizer = document.getElementById('visualizer');
+        visualizer.classList.remove('paused');
+        simulationInterval = setInterval(() => {
+            if (isPlaying) {
+                // Simuliere wechselnde Song-Infos
+                const songs = [
+                    '🎵 Aktuelles Lied - Künstler',
+                    '🎶 Nächster Hit - Bandname',
+                    '🎤 Klassiker - Legendärer Künstler',
+                    '🎸 Rock Hymne - Famous Band'
+                ];
+                const randomSong = songs[Math.floor(Math.random() * songs.length)];
+                document.getElementById('currentGenre').textContent = randomSong;
             }
+        }, 5000);
+    }
+    // Update Connection Status
+    function updateConnectionStatus(status, text) {
+        const statusEl = document.getElementById('connectionStatus');
+        const statusText = document.getElementById('statusText');
+        statusEl.className = `connection-status ${status}`;
+        statusText.textContent = text;
+    }
+    // Render Stations
+    function renderStations() {
+        const grid = document.getElementById('stationsGrid');
+        grid.innerHTML = '';
+        const filteredStations = currentCategory === 'all'
+            ? stations
+            : stations.filter(s => s.category === currentCategory);
+        filteredStations.forEach((station, index) => {
+            const card = document.createElement('div');
+            card.className = 'station-card';
+            card.innerHTML = `
+                <div class="station-status"></div>
+                <div class="station-card-header">
+                    <div class="station-card-logo">${station.icon}</div>
+                    <div class="station-card-info">
+                        <h3>${station.name}</h3>
+                        <p>${station.genre}</p>
+                    </div>
+                </div>
+                <span class="station-genre">${station.category}</span>
+            `;
+            card.onclick = () => selectStation(station);
+            grid.appendChild(card);
         });
+    }
+    // Select Station
+    function selectStation