Spaces:

Multimedix
/

anycoder-872e5823

Running

App Files Files Community

Multimedix commited on Dec 26, 2025

Commit

9fe76fb

verified ·

1 Parent(s): 63c86ce

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +671 -752

index.html CHANGED Viewed

@@ -1,667 +1,691 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Deutsches Online Radio | Öffentlich-rechtliche Sender</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        /* Modern CSS Reset & Custom Properties */
-        :root {
-            --primary-color: #0a0a1a;
-            --secondary-color: #1a1a2e;
-            --accent-color: #00d4ff;
-            --text-primary: #ffffff;
-            --text-secondary: #b0b0d0;
-            --glass-bg: rgba(255, 255, 255, 0.08);
-            --glass-border: rgba(255, 255, 255, 0.1);
-            --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --error-color: #ff4757;
-            --success-color: #2ed573;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: var(--primary-color);
-            color: var(--text-primary);
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            line-height: 1.6;
-            overflow-x: hidden;
-        }
-        /* Header */
-        header {
-            background: var(--glass-bg);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border-bottom: 1px solid var(--glass-border);
-            padding: 1.5rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            box-shadow: var(--glass-shadow);
-        }
-        header h1 {
-            font-size: clamp(1.2rem, 4vw, 1.8rem);
-            background: var(--gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .anycoder-link {
-            color: var(--accent-color);
-            text-decoration: none;
-            font-size: 0.9rem;
-            padding: 0.5rem 1rem;
-            border-radius: 20px;
-            background: var(--glass-bg);
-            border: 1px solid var(--glass-border);
-            transition: var(--transition);
-        }
-        .anycoder-link:hover {
-            background: rgba(0, 212, 255, 0.1);
-            transform: translateY(-2px);
-        }
-        /* Main Content */
-        main {
-            flex: 1;
-            padding: 2rem;
-            max-width: 1400px;
-            margin: 0 auto;
-            width: 100%;
-        }
-        /* Search Section */
-        .search-section {
-            margin-bottom: 2rem;
-            position: relative;
-        }
-        .search-input {
-            width: 100%;
-            max-width: 600px;
-            padding: 1rem 1.5rem;
-            font-size: 1rem;
-            background: var(--glass-bg);
-            border: 1px solid var(--glass-border);
-            border-radius: 50px;
-            color: var(--text-primary);
-            outline: none;
-            transition: var(--transition);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-        }
-        .search-input::placeholder {
-            color: var(--text-secondary);
-        }
-        .search-input:focus {
-            border-color: var(--accent-color);
-            box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
-        }
-        /* Filter Buttons */
-        .filter-buttons {
-            display: flex;
-            gap: 0.5rem;
-            margin-bottom: 2rem;
-            flex-wrap: wrap;
-        }
-        .filter-btn {
-            padding: 0.5rem 1.5rem;
-            background: var(--glass-bg);
-            border: 1px solid var(--glass-border);
-            border-radius: 25px;
-            color: var(--text-secondary);
-            cursor: pointer;
-            transition: var(--transition);
-            font-size: 0.9rem;
-            backdrop-filter: blur(10px);
-        }
-        .filter-btn:hover {
-            background: rgba(255, 255, 255, 0.15);
-            color: var(--text-primary);
-        }
-        .filter-btn.active {
-            background: var(--accent-color);
-            color: var(--primary-color);
-            border-color: var(--accent-color);
-        }
-        /* Stations Grid */
-        .stations-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 2rem;
-        }
-        /* Station Card */
-        .station-card {
-            background: var(--glass-bg);
-            border: 1px solid var(--glass-border);
-            border-radius: 20px;
-            padding: 1.5rem;
-            cursor: pointer;
-            transition: var(--transition);
-            position: relative;
-            overflow: hidden;
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-        }
-        .station-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            background: var(--gradient);
-            transform: scaleX(0);
-            transition: transform 0.3s ease;
-        }
-        .station-card:hover {
-            transform: translateY(-5px);
-            box-shadow: var(--glass-shadow);
-            border-color: rgba(0, 212, 255, 0.3);
-        }
-        .station-card:hover::before {
-            transform: scaleX(1);
-        }
-        .station-card.playing {
-            border-color: var(--accent-color);
-            background: rgba(0, 212, 255, 0.05);
-        }
-        .station-card.playing::before {
-            transform: scaleX(1);
-            background: var(--accent-color);
-        }
-        .station-header {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 1rem;
-        }
-        .station-logo {
-            width: 60px;
-            height: 60px;
-            border-radius: 12px;
-            object-fit: cover;
-            background: var(--secondary-color);
-            border: 1px solid var(--glass-border);
-        }
-        .station-info h3 {
-            font-size: 1.1rem;
-            margin-bottom: 0.25rem;
-        }
-        .station-genre {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            background: rgba(255, 255, 255, 0.05);
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            display: inline-block;
-        }
-        .station-description {
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-            margin-bottom: 1rem;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-        .station-actions {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .play-indicator {
-            display: none;
-            align-items: center;
-            gap: 0.5rem;
-            font-size: 0.8rem;
-            color: var(--accent-color);
-        }
-        .station-card.playing .play-indicator {
-            display: flex;
-        }
-        .equalizer {
-            display: flex;
-            gap: 2px;
-            height: 16px;
-            align-items: flex-end;
-        }
-        .equalizer-bar {
-            width: 3px;
-            background: var(--accent-color);
-            border-radius: 2px;
-            animation: equalize 1s ease-in-out infinite alternate;
-        }
-        .equalizer-bar:nth-child(1) { animation-delay: 0s; height: 40%; }
-        .equalizer-bar:nth-child(2) { animation-delay: 0.1s; height: 60%; }
-        .equalizer-bar:nth-child(3) { animation-delay: 0.2s; height: 80%; }
-        .equalizer-bar:nth-child(4) { animation-delay: 0.3s; height: 50%; }
-        @keyframes equalize {
-            0% { transform: scaleY(0.5); }
-            100% { transform: scaleY(1); }
-        }
-        .favorite-btn {
-            background: none;
-            border: none;
-            color: var(--text-secondary);
-            font-size: 1.2rem;
-            cursor: pointer;
-            transition: var(--transition);
-            padding: 0.5rem;
-        }
-        .favorite-btn:hover {
-            color: var(--accent-color);
-            transform: scale(1.1);
-        }
-        .favorite-btn.active {
-            color: #ff6b6b;
-        }
-        /* Player Bar */
-        .player-bar {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: var(--glass-bg);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            border-top: 1px solid var(--glass-border);
-            padding: 1rem 2rem;
-            transform: translateY(100%);
-            transition: var(--transition);
-            z-index: 200;
-            box-shadow: var(--glass-shadow);
-        }
-        .player-bar.active {
-            transform: translateY(0);
-        }
-        .player-content {
-            max-width: 1400px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: 1fr auto 1fr;
-            gap: 2rem;
-            align-items: center;
-        }
-        .now-playing {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-        .now-playing-logo {
-            width: 50px;
-            height: 50px;
-            border-radius: 10px;
-            background: var(--secondary-color);
-            border: 1px solid var(--glass-border);
-        }
-        .now-playing-info h4 {
-            font-size: 1rem;
-            margin-bottom: 0.25rem;
-        }
-        .now-playing-info p {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-        }
-        .player-controls {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-        .control-btn {
-            background: var(--glass-bg);
-            border: 1px solid var(--glass-border);
-            color: var(--text-primary);
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: var(--transition);
-            font-size: 1.2rem;
-        }
-        .control-btn:hover {
-            background: var(--accent-color);
-            color: var(--primary-color);
-            transform: scale(1.1);
-        }
-        .volume-control {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            justify-self: end;
-        }
-        .volume-slider {
-            width: 120px;
-            height: 4px;
-            -webkit-appearance: none;
-            appearance: none;
-            background: var(--glass-bg);
-            border-radius: 2px;
-            outline: none;
-            cursor: pointer;
-        }
-        .volume-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 16px;
-            height: 16px;
-            background: var(--accent-color);
-            border-radius: 50%;
-            cursor: pointer;
-            transition: var(--transition);
-        }
-        .volume-slider::-webkit-slider-thumb:hover {
-            transform: scale(1.2);
-        }
-        .volume-slider::-moz-range-thumb {
-            width: 16px;
-            height: 16px;
-            background: var(--accent-color);
-            border-radius: 50%;
-            cursor: pointer;
-            border: none;
-        }
-        /* Loading Spinner */
-        .loading-spinner {
-            display: none;
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 300;
-        }
-        .loading-spinner.active {
-            display: block;
-        }
-        .spinner {
-            width: 60px;
-            height: 60px;
-            border: 3px solid var(--glass-bg);
-            border-top: 3px solid var(--accent-color);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* Toast Notifications */
-        .toast {
-            position: fixed;
-            top: 2rem;
-            right: 2rem;
-            background: var(--glass-bg);
-            border: 1px solid var(--glass-border);
-            border-radius: 12px;
-            padding: 1rem 1.5rem;
-            color: var(--text-primary);
-            transform: translateX(400px);
-            transition: var(--transition);
-            z-index: 400;
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-        .toast.show {
-            transform: translateX(0);
-        }
-        .toast.error {
-            border-color: var(--error-color);
-        }
-        .toast.success {
-            border-color: var(--success-color);
-        }
-        /* Empty State */
-        .empty-state {
-            text-align: center;
-            padding: 4rem 2rem;
-            color: var(--text-secondary);
-            display: none;
-        }
-        .empty-state.show {
-            display: block;
-        }
-        .empty-state i {
-            font-size: 4rem;
-            margin-bottom: 1rem;
-            opacity: 0.5;
-        }
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            header {
-                padding: 1rem;
-            }
-            main {
-                padding: 1rem;
-            }
-            .player-content {
-                grid-template-columns: 1fr;
-                gap: 1rem;
-                text-align: center;
-            }
-            .volume-control {
-                justify-self: center;
-            }
-            .stations-grid {
-                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-                gap: 1rem;
-            }
-            .search-input {
-                font-size: 0.9rem;
-                padding: 0.75rem 1.25rem;
-            }
-        }
-        @media (max-width: 480px) {
-            .stations-grid {
-                grid-template-columns: 1fr;
-            }
-            .player-bar {
-                padding: 1rem;
-            }
-            .control-btn {
-                width: 40px;
-                height: 40px;
-                font-size: 1rem;
-            }
-        }
-        /* Accessibility */
-        @media (prefers-reduced-motion: reduce) {
-            * {
-                animation-duration: 0.01ms !important;
-                animation-iteration-count: 1 !important;
-                transition-duration: 0.01ms !important;
-            }
-        }
-        /* Focus styles */
-        button:focus,
-        input:focus {
-            outline: 2px solid var(--accent-color);
-            outline-offset: 2px;
-        }
-        /* Scrollbar styling */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: var(--primary-color);
-        }
-        ::-webkit-scrollbar-thumb {
-            background: var(--accent-color);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #00a8cc;
-        }
-    </style>
 </head>
 <body>
-    <header>
-        <h1><i class="fas fa-broadcast-tower"></i> Deutsches Online Radio</h1>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
-            Built with anycoder
-        </a>
-    </header>
-    <main>
-        <section class="search-section">
-            <input type="text" class="search-input" id="searchInput" placeholder="🔍 Sender nach Name, Genre oder Region suchen...">
-        </section>
-        <section class="filter-buttons" id="filterButtons">
-            <button class="filter-btn active" data-filter="all">Alle</button>
-            <button class="filter-btn" data-filter="national">National</button>
-            <button class="filter-btn" data-filter="regional">Regional</button>
-            <button class="filter-btn" data-filter="news">News</button>
-            <button class="filter-btn" data-filter="music">Musik</button>
-            <button class="filter-btn" data-filter="kultur">Kultur</button>
-        </section>
-        <section class="stations-grid" id="stationsGrid"></section>
-        <section class="empty-state" id="emptyState">
-            <i class="fas fa-search"></i>
-            <h3>Keine Sender gefunden</h3>
-            <p>Probiere es mit einem anderen Suchbegriff oder Filter.</p>
-        </section>
-    </main>
-    <footer class="player-bar" id="playerBar">
-        <div class="player-content">
-            <div class="now-playing" id="nowPlaying">
-                <img src="" alt="" class="now-playing-logo" id="nowPlayingLogo">
-                <div class="now-playing-info">
-                    <h4 id="nowPlayingName">Kein Sender ausgewählt</h4>
-                    <p id="nowPlayingGenre">Wähle einen Sender zum Abspielen</p>
-                </div>
-            </div>
-            <div class="player-controls">
-                <button class="control-btn" id="prevBtn" title="Vorheriger Sender">
                     <i class="fas fa-step-backward"></i>
                 </button>
-                <button class="control-btn" id="playPauseBtn" title="Play/Pause">
                     <i class="fas fa-play" id="playPauseIcon"></i>
                 </button>
-                <button class="control-btn" id="nextBtn" title="Nächster Sender">
                     <i class="fas fa-step-forward"></i>
                 </button>
-            </div>
-            <div class="volume-control">
-                <button class="control-btn" id="muteBtn" title="Stummschalten">
                     <i class="fas fa-volume-up" id="volumeIcon"></i>
                 </button>
-                <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="70">
-            </div>
-        </div>
-    </footer>
-    <div class="loading-spinner" id="loadingSpinner">
-        <div class="spinner"></div>
     </div>
-    <div class="toast" id="toast"></div>
-    <audio id="audioPlayer"></audio>
-    <script>
-        // Station Data - Official Public Broadcasters
         const stations = [
             {
                 id: 'dlf',
@@ -887,109 +911,4 @@
                     <div class="station-card ${currentStation?.id === station.id ? 'playing' : ''}"
                          data-id="${station.id}">
                         <div class="station-header">
-                            <img src="${station.logo}" alt="${station.name}" class="station-logo" loading="lazy">
-                            <div class="station-info">
-                                <h3>${station.name}</h3>
-                                <span class="station-genre">${getGenreLabel(station.genre)}</span>
-                            </div>
-                        </div>
-                        <p class="station-description">${station.description}</p>
-                        <div class="station-actions">
-                            <div class="play-indicator">
-                                <span>JETZT LIVE</span>
-                                <div class="equalizer">
-                                    <div class="equalizer-bar"></div>
-                                    <div class="equalizer-bar"></div>
-                                    <div class="equalizer-bar"></div>
-                                    <div class="equalizer-bar"></div>
-                                </div>
-                            </div>
-                            <button class="favorite-btn ${favorites.includes(station.id) ? 'active' : ''}"
-                                    data-id="${station.id}"
-                                    title="Favorit">
-                                <i class="${favorites.includes(station.id) ? 'fas' : 'far'} fa-heart"></i>
-                            </button>
-                        </div>
-                    </div>
-                `).join('');
-            }
-        }
-        // Get Filtered Stations
-        function getFilteredStations() {
-            return stations.filter(station => {
-                const matchesFilter = currentFilter === 'all' || station.category === currentFilter || station.genre === currentFilter;
-                const matchesSearch = searchTerm === '' ||
-                    station.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                    station.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                    getGenreLabel(station.genre).toLowerCase().includes(searchTerm.toLowerCase());
-                return matchesFilter && matchesSearch;
-            });
-        }
-        // Get Genre Label
-        function getGenreLabel(genre) {
-            const labels = {
-                news: 'Nachrichten',
-                music: 'Musik',
-                kultur: 'Kultur',
-                regional: 'Regional'
-            };
-            return labels[genre] || genre;
-        }
-        // Setup Event Listeners
-        function setupEventListeners() {
-            // Search
-            searchInput.addEventListener('input', (e) => {
-                searchTerm = e.target.value;
-                renderStations();
-            });
-            // Filter Buttons
-            filterButtons.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    filterButtons.forEach(b => b.classList.remove('active'));
-                    btn.classList.add('active');
-                    currentFilter = btn.dataset.filter;
-                    renderStations();
-                });
-            });
-            // Station Cards & Favorites
-            stationsGrid.addEventListener('click', (e) => {
-                const stationCard = e.target.closest('.station-card');
-                const favoriteBtn = e.target.closest('.favorite-btn');
-                if (favoriteBtn) {
-                    e.stopPropagation();
-                    toggleFavorite(favoriteBtn.dataset.id);
-                } else if (stationCard) {
-                    playStation(stationCard.dataset.id);
-                }
-            });
-            // Player Controls
-            playPauseBtn.addEventListener('click', togglePlayPause);
-            prevBtn.addEventListener('click', playPrevious);
-            nextBtn.addEventListener('click', playNext);
-            muteBtn.addEventListener('click', toggleMute);
-            volumeSlider.addEventListener('input', (e) => setVolume(e.target.value));
-            // Audio Player Events
-            audioPlayer.addEventListener('play', () => {
-                isPlaying = true;
-                updatePlayPauseIcon();
-            });
-            audioPlayer.addEventListener('pause', () => {
-                isPlaying = false;
-                updatePlayPauseIcon();
-            });
-            audioPlayer.addEventListener('error', (e) => {
-                showToast('Fehler beim Laden des Streams', 'error');
-                loadingSpinner.classList.remove('active');
-            });
-            audioPlayer.addEventListener('load

 <!DOCTYPE html>
 <html lang="de">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Deutsches Online Radio | Öffentlich-rechtliche Sender</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    /* Modern CSS Reset & Custom Properties */
+    :root {
+      --primary-color: #0a0a1a;
+      --secondary-color: #1a1a2e;
+      --accent-color: #00d4ff;
+      --text-primary: #ffffff;
+      --text-secondary: #b0b0d0;
+      --glass-bg: rgba(255, 255, 255, 0.08);
+      --glass-border: rgba(255, 255, 255, 0.1);
+      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      --error-color: #ff4757;
+      --success-color: #2ed573;
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      background: var(--primary-color);
+      color: var(--text-primary);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      line-height: 1.6;
+      overflow-x: hidden;
+    }
+    /* Header */
+    header {
+      background: var(--glass-bg);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border-bottom: 1px solid var(--glass-border);
+      padding: 1.5rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      box-shadow: var(--glass-shadow);
+    }
+    header h1 {
+      font-size: clamp(1.2rem, 4vw, 1.8rem);
+      background: var(--gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .anycoder-link {
+      color: var(--accent-color);
+      text-decoration: none;
+      font-size: 0.9rem;
+      padding: 0.5rem 1rem;
+      border-radius: 20px;
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
+      transition: var(--transition);
+    }
+    .anycoder-link:hover {
+      background: rgba(0, 212, 255, 0.1);
+      transform: translateY(-2px);
+    }
+    /* Main Content */
+    main {
+      flex: 1;
+      padding: 2rem;
+      max-width: 1400px;
+      margin: 0 auto;
+      width: 100%;
+    }
+    /* Search Section */
+    .search-section {
+      margin-bottom: 2rem;
+      position: relative;
+    }
+    .search-input {
+      width: 100%;
+      max-width: 600px;
+      padding: 1rem 1.5rem;
+      font-size: 1rem;
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
+      border-radius: 50px;
+      color: var(--text-primary);
+      outline: none;
+      transition: var(--transition);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+    .search-input::placeholder {
+      color: var(--text-secondary);
+    }
+    .search-input:focus {
+      border-color: var(--accent-color);
+      box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
+    }
+    /* Filter Buttons */
+    .filter-buttons {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 2rem;
+      flex-wrap: wrap;
+    }
+    .filter-btn {
+      padding: 0.5rem 1.5rem;
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
+      border-radius: 25px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      transition: var(--transition);
+      font-size: 0.9rem;
+      backdrop-filter: blur(10px);
+    }
+    .filter-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: var(--text-primary);
+    }
+    .filter-btn.active {
+      background: var(--accent-color);
+      color: var(--primary-color);
+      border-color: var(--accent-color);
+    }
+    /* Stations Grid */
+    .stations-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    /* Station Card */
+    .station-card {
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
+      border-radius: 20px;
+      padding: 1.5rem;
+      cursor: pointer;
+      transition: var(--transition);
+      position: relative;
+      overflow: hidden;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+    .station-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: var(--gradient);
+      transform: scaleX(0);
+      transition: transform 0.3s ease;
+    }
+    .station-card:hover {
+      transform: translateY(-5px);
+      box-shadow: var(--glass-shadow);
+      border-color: rgba(0, 212, 255, 0.3);
+    }
+    .station-card:hover::before {
+      transform: scaleX(1);
+    }
+    .station-card.playing {
+      border-color: var(--accent-color);
+      background: rgba(0, 212, 255, 0.05);
+    }
+    .station-card.playing::before {
+      transform: scaleX(1);
+      background: var(--accent-color);
+    }
+    .station-header {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+    .station-logo {
+      width: 60px;
+      height: 60px;
+      border-radius: 12px;
+      object-fit: cover;
+      background: var(--secondary-color);
+      border: 1px solid var(--glass-border);
+    }
+    .station-info h3 {
+      font-size: 1.1rem;
+      margin-bottom: 0.25rem;
+    }
+    .station-genre {
+      font-size: 0.85rem;
+      color: var(--text-secondary);
+      background: rgba(255, 255, 255, 0.05);
+      padding: 0.25rem 0.75rem;
+      border-radius: 12px;
+      display: inline-block;
+    }
+    .station-description {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      margin-bottom: 1rem;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .station-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .play-indicator {
+      display: none;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.8rem;
+      color: var(--accent-color);
+    }
+    .station-card.playing .play-indicator {
+      display: flex;
+    }
+    .equalizer {
+      display: flex;
+      gap: 2px;
+      height: 16px;
+      align-items: flex-end;
+    }
+    .equalizer-bar {
+      width: 3px;
+      background: var(--accent-color);
+      border-radius: 2px;
+      animation: equalize 1s ease-in-out infinite alternate;
+    }
+    .equalizer-bar:nth-child(1) {
+      animation-delay: 0s;
+      height: 40%;
+    }
+    .equalizer-bar:nth-child(2) {
+      animation-delay: 0.1s;
+      height: 60%;
+    }
+    .equalizer-bar:nth-child(3) {
+      animation-delay: 0.2s;
+      height: 80%;
+    }
+    .equalizer-bar:nth-child(4) {
+      animation-delay: 0.3s;
+      height: 50%;
+    }
+    @keyframes equalize {
+      0% {
+        transform: scaleY(0.5);
+      }
+      100% {
+        transform: scaleY(1);
+      }
+    }
+    .favorite-btn {
+      background: none;
+      border: none;
+      color: var(--text-secondary);
+      font-size: 1.2rem;
+      cursor: pointer;
+      transition: var(--transition);
+      padding: 0.5rem;
+    }
+    .favorite-btn:hover {
+      color: var(--accent-color);
+      transform: scale(1.1);
+    }
+    .favorite-btn.active {
+      color: #ff6b6b;
+    }
+    /* Player Bar */
+    .player-bar {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: var(--glass-bg);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border-top: 1px solid var(--glass-border);
+      padding: 1rem 2rem;
+      transform: translateY(100%);
+      transition: var(--transition);
+      z-index: 200;
+      box-shadow: var(--glass-shadow);
+    }
+    .player-bar.active {
+      transform: translateY(0);
+    }
+    .player-content {
+      max-width: 1400px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      gap: 2rem;
+      align-items: center;
+    }
+    .now-playing {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+    .now-playing-logo {
+      width: 50px;
+      height: 50px;
+      border-radius: 10px;
+      background: var(--secondary-color);
+      border: 1px solid var(--glass-border);
+    }
+    .now-playing-info h4 {
+      font-size: 1rem;
+      margin-bottom: 0.25rem;
+    }
+    .now-playing-info p {
+      font-size: 0.85rem;
+      color: var(--text-secondary);
+    }
+    .player-controls {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+    .control-btn {
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
+      color: var(--text-primary);
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: var(--transition);
+      font-size: 1.2rem;
+    }
+    .control-btn:hover {
+      background: var(--accent-color);
+      color: var(--primary-color);
+      transform: scale(1.1);
+    }
+    .volume-control {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      justify-self: end;
+    }
+    .volume-slider {
+      width: 120px;
+      height: 4px;
+      -webkit-appearance: none;
+      appearance: none;
+      background: var(--glass-bg);
+      border-radius: 2px;
+      outline: none;
+      cursor: pointer;
+    }
+    .volume-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 16px;
+      height: 16px;
+      background: var(--accent-color);
+      border-radius: 50%;
+      cursor: pointer;
+      transition: var(--transition);
+    }
+    .volume-slider::-webkit-slider-thumb:hover {
+      transform: scale(1.2);
+    }
+    .volume-slider::-moz-range-thumb {
+      width: 16px;
+      height: 16px;
+      background: var(--accent-color);
+      border-radius: 50%;
+      cursor: pointer;
+      border: none;
+    }
+    /* Loading Spinner */
+    .loading-spinner {
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 300;
+    }
+    .loading-spinner.active {
+      display: block;
+    }
+    .spinner {
+      width: 60px;
+      height: 60px;
+      border: 3px solid var(--glass-bg);
+      border-top: 3px solid var(--accent-color);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    /* Toast Notifications */
+    .toast {
+      position: fixed;
+      top: 2rem;
+      right: 2rem;
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
+      padding: 1rem 1.5rem;
+      color: var(--text-primary);
+      transform: translateX(400px);
+      transition: var(--transition);
+      z-index: 400;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .toast.show {
+      transform: translateX(0);
+    }
+    .toast.error {
+      border-color: var(--error-color);
+    }
+    .toast.success {
+      border-color: var(--success-color);
+    }
+    /* Empty State */
+    .empty-state {
+      text-align: center;
+      padding: 4rem 2rem;
+      color: var(--text-secondary);
+      display: none;
+    }
+    .empty-state.show {
+      display: block;
+    }
+    .empty-state i {
+      font-size: 4rem;
+      margin-bottom: 1rem;
+      opacity: 0.5;
+    }
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      header {
+        padding: 1rem;
+      }
+      main {
+        padding: 1rem;
+      }
+      .player-content {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+        text-align: center;
+      }
+      .volume-control {
+        justify-self: center;
+      }
+      .stations-grid {
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 1rem;
+      }
+      .search-input {
+        font-size: 0.9rem;
+        padding: 0.75rem 1.25rem;
+      }
+    }
+    @media (max-width: 480px) {
+      .stations-grid {
+        grid-template-columns: 1fr;
+      }
+      .player-bar {
+        padding: 1rem;
+      }
+      .control-btn {
+        width: 40px;
+        height: 40px;
+        font-size: 1rem;
+      }
+    }
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+      }
+    }
+    /* Focus styles */
+    button:focus,
+    input:focus {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 2px;
+    }
+    /* Scrollbar styling */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: var(--primary-color);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--accent-color);
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #00a8cc;
+    }
+  </style>
 </head>
 <body>
+  <header>
+    <h1><i class="fas fa-broadcast-tower"></i> Deutsches Online Radio</h1>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+      Built with anycoder
+    </a>
+  </header>
+  <main>
+    <section class="search-section">
+      <input type="text" class="search-input" id="searchInput" placeholder="🔍 Sender nach Name, Genre oder Region suchen...">
+    </section>
+    <section class="filter-buttons" id="filterButtons">
+      <button class="filter-btn active" data-filter="all">Alle</button>
+      <button class="filter-btn" data-filter="national">National</button>
+      <button class="filter-btn" data-filter="regional">Regional</button>
+      <button class="filter-btn" data-filter="news">News</button>
+      <button class="filter-btn" data-filter="music">Musik</button>
+      <button class="filter-btn" data-filter="kultur">Kultur</button>
+    </section>
+    <section class="stations-grid" id="stationsGrid"></section>
+    <section class="empty-state" id="emptyState">
+      <i class="fas fa-search"></i>
+      <h3>Keine Sender gefunden</h3>
+      <p>Probiere es mit einem anderen Suchbegriff oder Filter.</p>
+    </section>
+  </main>
+  <footer class="player-bar" id="playerBar">
+    <div class="player-content">
+      <div class="now-playing" id="nowPlaying">
+        <img src="" alt="" class="now-playing-logo" id="nowPlayingLogo">
+        <div class="now-playing-info">
+          <h4 id="nowPlayingName">Kein Sender ausgewählt</h4>
+          <p id="nowPlayingGenre">Wähle einen Sender zum Abspielen</p>
+        </div>
+      </div>
+      <div class="player-controls">
+        <button class="control-btn" id="prevBtn" title="Vorheriger Sender">
                     <i class="fas fa-step-backward"></i>
                 </button>
+        <button class="control-btn" id="playPauseBtn" title="Play/Pause">
                     <i class="fas fa-play" id="playPauseIcon"></i>
                 </button>
+        <button class="control-btn" id="nextBtn" title="Nächster Sender">
                     <i class="fas fa-step-forward"></i>
                 </button>
+      </div>
+      <div class="volume-control">
+        <button class="control-btn" id="muteBtn" title="Stummschalten">
                     <i class="fas fa-volume-up" id="volumeIcon"></i>
                 </button>
+        <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="70">
+      </div>
     </div>
+  </footer>
+  <div class="loading-spinner" id="loadingSpinner">
+    <div class="spinner"></div>
+  </div>
+  <div class="toast" id="toast"></div>
+  <audio id="audioPlayer"></audio>
+  <script>
+    // Station Data - Official Public Broadcasters
         const stations = [
             {
                 id: 'dlf',
                     <div class="station-card ${currentStation?.id === station.id ? 'playing' : ''}"
                          data-id="${station.id}">
                         <div class="station-header">
+                            <img src="${station.logo}" alt="${station.name}" class="station-logo" loading="lazy" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTIiIGZpbGw9IiMxYTFhMmUiLz4KPHBhdGggZD0iTTMwIDIwQzI2LjY4NjMgMjAgMjQgMjIuNjg2MyAyNCAyNkMyNCAyOS4zMTM3IDI2LjY4NjMgMzIgMzAgMzJDMzMuMzEzNyAzMiAzNiAyOS4zMTM3IDM2IDI2QzM2IDIyLjY4NjMgMzMuMzEz