Spaces:

Multimedix
/

anycoder-872e5823

Running

App Files Files Community

Multimedix commited on Dec 26, 2025

Commit

16bb77a

verified ·

1 Parent(s): 4a4fe03

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +789 -1187

index.html CHANGED Viewed

@@ -1,1195 +1,797 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Deutsches Online Radio - Alle öffentlich-rechtlichen Sender in einer modernen App">
-  <meta name="theme-color" content="#0a0a1a">
-  <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;
-      --warning-color: #ffa502;
-    }
-    * {
-      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;
-      -webkit-tap-highlight-color: transparent;
-    }
-    /* Header */
-    header {
-      background: var(--glass-bg);
-      backdrop-filter: blur(12px) saturate(180%);
-      -webkit-backdrop-filter: blur(12px) saturate(180%);
-      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.75rem;
-      font-weight: 700;
-    }
-    .anycoder-link {
-      color: var(--accent-color);
-      text-decoration: none;
-      font-size: 0.85rem;
-      padding: 0.5rem 1rem;
-      border-radius: 20px;
-      background: var(--glass-bg);
-      border: 1px solid var(--glass-border);
-      transition: var(--transition);
-      font-weight: 500;
-    }
-    .anycoder-link:hover {
-      background: rgba(0, 212, 255, 0.15);
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
-    }
-    /* Main Content */
-    main {
-      flex: 1;
-      padding: 2rem;
-      max-width: 1400px;
-      margin: 0 auto;
-      width: 100%;
-      padding-bottom: 120px;
-    }
-    /* 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);
-      font-family: inherit;
-    }
-    .search-input::placeholder {
-      color: var(--text-secondary);
-      opacity: 0.7;
-    }
-    .search-input:focus {
-      border-color: var(--accent-color);
-      box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
-    }
-    .search-input:invalid {
-      border-color: var(--error-color);
-    }
-    /* Filter Buttons */
-    .filter-buttons {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 2rem;
-      flex-wrap: wrap;
-    }
-    .filter-btn {
-      padding: 0.6rem 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;
-      font-weight: 500;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      user-select: none;
-    }
-    .filter-btn:hover {
-      background: rgba(255, 255, 255, 0.15);
-      color: var(--text-primary);
-      transform: translateY(-2px);
-    }
-    .filter-btn.active {
-      background: var(--accent-color);
-      color: var(--primary-color);
-      border-color: var(--accent-color);
-      font-weight: 600;
-    }
-    .filter-btn:focus-visible {
-      outline: 2px solid var(--accent-color);
-      outline-offset: 2px;
-    }
-    /* Stations Grid */
-    .stations-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(300px, 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);
-      display: flex;
-      flex-direction: column;
-    }
-    .station-card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 4px;
-      background: var(--gradient);
-      transform: scaleX(0);
-      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .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.08);
-    }
-    .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);
-      flex-shrink: 0;
-    }
-    .station-logo.error {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.5rem;
-      color: var(--text-secondary);
-    }
-    .station-info {
-      flex: 1;
-      min-width: 0;
-    }
-    .station-info h3 {
-      font-size: 1.1rem;
-      margin-bottom: 0.25rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .station-genre {
-      font-size: 0.8rem;
-      color: var(--text-secondary);
-      background: rgba(255, 255, 255, 0.05);
-      padding: 0.25rem 0.75rem;
-      border-radius: 12px;
-      display: inline-block;
-      text-transform: capitalize;
-    }
-    .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;
-      flex-grow: 1;
-    }
-    .station-actions {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-top: auto;
-    }
-    .play-indicator {
-      display: none;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.8rem;
-      color: var(--accent-color);
-      font-weight: 500;
-    }
-    .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;
-      will-change: transform;
-    }
-    .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;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .favorite-btn:hover {
-      color: var(--accent-color);
-      transform: scale(1.1);
-      background: rgba(255, 255, 255, 0.05);
-    }
-    .favorite-btn.active {
-      color: #ff6b6b;
-      animation: heartBeat 0.3s ease;
-    }
-    @keyframes heartBeat {
-      0% { transform: scale(1); }
-      50% { transform: scale(1.2); }
-      100% { transform: scale(1); }
-    }
-    /* Player Bar */
-    .player-bar {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background: var(--glass-bg);
-      backdrop-filter: blur(20px) saturate(180%);
-      -webkit-backdrop-filter: blur(20px) saturate(180%);
-      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;
-      min-width: 0;
-    }
-    .now-playing-logo {
-      width: 50px;
-      height: 50px;
-      border-radius: 10px;
-      background: var(--secondary-color);
-      border: 1px solid var(--glass-border);
-      flex-shrink: 0;
-    }
-    .now-playing-info {
-      min-width: 0;
-    }
-    .now-playing-info h4 {
-      font-size: 1rem;
-      margin-bottom: 0.25rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .now-playing-info p {
-      font-size: 0.85rem;
-      color: var(--text-secondary);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .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;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      user-select: none;
-    }
-    .control-btn:hover {
-      background: var(--accent-color);
-      color: var(--primary-color);
-      transform: scale(1.1);
-      border-color: var(--accent-color);
-    }
-    .control-btn:active {
-      transform: scale(0.95);
-    }
-    .control-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      transform: none;
-    }
-    .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;
-      transition: var(--transition);
-    }
-    .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);
-      box-shadow: 0 0 8px var(--accent-color);
-    }
-    .volume-slider::-moz-range-thumb {
-      width: 16px;
-      height: 16px;
-      background: var(--accent-color);
-      border-radius: 50%;
-      cursor: pointer;
-      border: none;
-      transition: var(--transition);
-    }
-    .volume-slider::-moz-range-thumb:hover {
-      transform: scale(1.2);
-    }
-    .volume-slider::-moz-range-track {
-      background: var(--glass-bg);
-      height: 4px;
-      border-radius: 2px;
-    }
-    /* 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;
-      max-width: 350px;
-      box-shadow: var(--glass-shadow);
-    }
-    .toast.show {
-      transform: translateX(0);
-    }
-    .toast.error {
-      border-color: var(--error-color);
-    }
-    .toast.success {
-      border-color: var(--success-color);
-    }
-    .toast.warning {
-      border-color: var(--warning-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;
-    }
-    .empty-state h3 {
-      margin-bottom: 0.5rem;
-    }
-    /* Error State for Stations */
-    .station-error {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-      background: var(--error-color);
-      color: white;
-      padding: 0.25rem 0.5rem;
-      border-radius: 8px;
-      font-size: 0.7rem;
-      font-weight: 500;
-      display: none;
-    }
-    .station-card.error .station-error {
-      display: block;
-    }
-    /* Responsive Design */
-    @media (max-width: 768px) {
-      header {
-        padding: 1rem;
-      }
-      header h1 {
-        gap: 0.5rem;
-      }
-      main {
-        padding: 1rem;
-        padding-bottom: 100px;
-      }
-      .player-content {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-        text-align: center;
-      }
-      .now-playing {
-        justify-content: center;
-      }
-      .now-playing-info {
-        text-align: left;
-      }
-      .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;
-      }
-      .player-bar {
-        padding: 1rem;
-      }
-      .control-btn {
-        width: 45px;
-        height: 45px;
-        font-size: 1.1rem;
-      }
-      .volume-slider {
-        width: 100px;
-      }
-    }
-    @media (max-width: 480px) {
-      .stations-grid {
-        grid-template-columns: 1fr;
-      }
-      .toast {
-        left: 1rem;
-        right: 1rem;
-        max-width: none;
-      }
-    }
-    /* 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-visible,
-    input:focus-visible {
-      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;
-    }
-    /* High contrast mode support */
-    @media (prefers-contrast: high) {
-      :root {
-        --glass-bg: rgba(255, 255, 255, 0.2);
-        --glass-border: rgba(255, 255, 255, 0.5);
-      }
-    }
-    /* Print styles */
-    @media print {
-      header, .player-bar, .filter-buttons, .search-section {
-        display: none;
-      }
-      main {
-        padding: 0;
-      }
-      .stations-grid {
-        display: block;
-      }
-      .station-card {
-        break-inside: avoid;
-        page-break-inside: avoid;
-        margin-bottom: 1rem;
-      }
-    }
-  </style>
-</head>
 <body>
-  <header role="banner">
-    <h1><i class="fas fa-broadcast-tower" aria-hidden="true"></i> Deutsches Online Radio</h1>
-    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" class="anycoder-link">
-      Built with anycoder
-    </a>
-  </header>
-  <main role="main">
-    <section class="search-section" aria-label="Suche">
-      <input type="text" class="search-input" id="searchInput"
-             placeholder="🔍 Sender nach Name, Genre oder Region suchen..."
-             aria-label="Radiosender suchen" autocomplete="off">
-    </section>
-    <section class="filter-buttons" id="filterButtons" role="group" aria-label="Filter nach Kategorie">
-      <button class="filter-btn active" data-filter="all" aria-pressed="true">Alle</button>
-      <button class="filter-btn" data-filter="national" aria-pressed="false">National</button>
-      <button class="filter-btn" data-filter="regional" aria-pressed="false">Regional</button>
-      <button class="filter-btn" data-filter="news" aria-pressed="false">News</button>
-      <button class="filter-btn" data-filter="music" aria-pressed="false">Musik</button>
-      <button class="filter-btn" data-filter="kultur" aria-pressed="false">Kultur</button>
-    </section>
-    <section class="stations-grid" id="stationsGrid" role="list" aria-live="polite"></section>
-    <section class="empty-state" id="emptyState" role="status">
-      <i class="fas fa-search" aria-hidden="true"></i>
-      <h3>Keine Sender gefunden</h3>
-      <p>Probiere es mit einem anderen Suchbegriff oder Filter.</p>
-    </section>
-  </main>
-  <footer class="player-bar" id="playerBar" role="complementary" aria-label="Audioplayer">
-    <div class="player-content">
-      <div class="now-playing" id="nowPlaying">
-        <img src="" alt="Sender Logo" 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" aria-label="Vorheriger Sender">
-          <i class="fas fa-step-backward" aria-hidden="true"></i>
-        </button>
-        <button class="control-btn" id="playPauseBtn" title="Play/Pause" aria-label="Play/Pause">
-          <i class="fas fa-play" id="playPauseIcon" aria-hidden="true"></i>
-        </button>
-        <button class="control-btn" id="nextBtn" title="Nächster Sender" aria-label="Nächster Sender">
-          <i class="fas fa-step-forward" aria-hidden="true"></i>
-        </button>
-      </div>
-      <div class="volume-control">
-        <button class="control-btn" id="muteBtn" title="Stummschalten" aria-label="Stummschalten">
-          <i class="fas fa-volume-up" id="volumeIcon" aria-hidden="true"></i>
-        </button>
-        <input type="range" class="volume-slider" id="volumeSlider"
-               min="0" max="100" value="70" aria-label="Lautstärke">
-      </div>
-    </div>
-  </footer>
-  <div class="loading-spinner" id="loadingSpinner" role="status" aria-live="assertive">
-    <div class="spinner" aria-hidden="true"></div>
-    <span class="sr-only">Lade Sender...</span>
-  </div>
-  <div class="toast" id="toast" role="alert" aria-live="assertive"></div>
-  <audio id="audioPlayer" preload="none"></audio>
-  <script>
-    // Station Data - Official Public Broadcasters (Complete & Validated)
-    const stations = [
-      {
-        id: 'dlf',
-        name: 'Deutschlandfunk',
-        description: 'Nachrichten, Politik und Wissenschaft',
-        streamUrl: 'https://stream.deutschlandradio.de/dlf/04/dlfdia.cast',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Deutschlandfunk_Logo_2017.svg/300px-Deutschlandfunk_Logo_2017.svg.png',
-        category: 'national',
-        genre: 'news',
-        region: 'Deutschlandweit'
-      },
-      {
-        id: 'dlfkultur',
-        name: 'Deutschlandfunk Kultur',
-        description: 'Kultur, Literatur und Gesellschaft',
-        streamUrl: 'https://stream.deutschlandradio.de/dlfkultur/04/dlfkulturdia.cast',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Deutschlandfunk_Kultur_Logo_2017.svg/300px-Deutschlandfunk_Kultur_Logo_2017.svg.png',
-        category: 'national',
-        genre: 'kultur',
-        region: 'Deutschlandweit'
-      },
-      {
-        id: 'dlfnova',
-        name: 'Deutschlandfunk Nova',
-        description: 'Jugendradio mit Musik und Talk',
-        streamUrl: 'https://stream.deutschlandradio.de/dlfnova/04/dlfnovadia.cast',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Deutschlandfunk_Nova_Logo_2017.svg/300px-Deutschlandfunk_Nova_Logo_2017.svg.png',
-        category: 'national',
-        genre: 'music',
-        region: 'Deutschlandweit'
-      },
-      {
-        id: 'wdr2',
-        name: 'WDR 2',
-        description: 'Regionalradio für NRW mit Nachrichten',
-        streamUrl: 'https://wdr-wdr2-koeln.icecastssl.wdr.de/wdr/wdr2/koeln/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/WDR_2_Logo_2016.svg/300px-WDR_2_Logo_2016.svg.png',
-        category: 'regional',
-        genre: 'news',
-        region: 'Nordrhein-Westfalen'
-      },
-      {
-        id: 'wdr5',
-        name: 'WDR 5',
-        description: 'Informationen und Hintergründe',
-        streamUrl: 'https://wdr-wdr5-live.icecastssl.wdr.de/wdr/wdr5/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/WDR_5_Logo_2016.svg/300px-WDR_5_Logo_2016.svg.png',
-        category: 'national',
-        genre: 'news',
-        region: 'Deutschlandweit'
-      },
-      {
-        id: 'ndrinfo',
-        name: 'NDR Info',
-        description: 'Nachrichten aus Norddeutschland',
-        streamUrl: 'https://ndr-ndrinfo-hh.sslcast.addradio.de/ndr/ndrinfo/hh/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/NDR_Info_logo.svg/300px-NDR_Info_logo.svg.png',
-        category: 'regional',
-        genre: 'news',
-        region: 'Norddeutschland'
-      },
-      {
-        id: 'ndr2',
-        name: 'NDR 2',
-        description: 'Die beste Musik für Norddeutschland',
-        streamUrl: 'https://ndr-ndr2-hh.sslcast.addradio.de/ndr/ndr2/hh/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/NDR_2_logo.svg/300px-NDR_2_logo.svg.png',
-        category: 'regional',
-        genre: 'music',
-        region: 'Norddeutschland'
-      },
-      {
-        id: 'br24',
-        name: 'BR24',
-        description: 'Bayerisches Nachrichtenradio',
-        streamUrl: 'https://br-br24-live.sslcast.addradio.de/br/br24/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/BR24_logo.svg/300px-BR24_logo.svg.png',
-        category: 'regional',
-        genre: 'news',
-        region: 'Bayern'
-      },
-      {
-        id: 'bayern1',
-        name: 'Bayern 1',
-        description: 'Die beste Musik für Bayern',
-        streamUrl: 'https://br-bayern1-obb.sslcast.addradio.de/br/bayern1/obb/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Bayern_1_logo.svg/300px-Bayern_1_logo.svg.png',
-        category: 'regional',
-        genre: 'music',
-        region: 'Bayern'
-      },
-      {
-        id: 'bayern3',
-        name: 'Bayern 3',
-        description: 'Das junge Radio für Bayern',
-        streamUrl: 'https://br-bayern3-live.sslcast.addradio.de/br/bayern3/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Bayern_3_logo.svg/300px-Bayern_3_logo.svg.png',
-        category: 'regional',
-        genre: 'music',
-        region: 'Bayern'
-      },
-      {
-        id: 'swr1bw',
-        name: 'SWR1 Baden-Württemberg',
-        description: 'Das Radio für Baden-Württemberg',
-        streamUrl: 'https://swr-swr1-bw.cast.addradio.de/swr/swr1/bw/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/SWR_1_Logo_2015.svg/300px-SWR_1_Logo_2015.svg.png',
-        category: 'regional',
-        genre: 'music',
-        region: 'Baden-Württemberg'
-      },
-      {
-        id: 'swr3',
-        name: 'SWR3',
-        description: 'Das junge Radio für BW und RP',
-        streamUrl: 'https://swr-swr3-live.cast.addradio.de/swr/swr3/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/SWR3_logo.svg/300px-SWR3_logo.svg.png',
-        category: 'national',
-        genre: 'music',
-        region: 'Baden-Württemberg, Rheinland-Pfalz'
-      },
-      {
-        id: 'hr1',
-        name: 'hr1',
-        description: 'Informationen aus Hessen',
-        streamUrl: 'https://hr-hr1-live.cast.addradio.de/hr/hr1/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Hr1_logo.svg/300px-Hr1_logo.svg.png',
-        category: 'regional',
-        genre: 'news',
-        region: 'Hessen'
-      },
-      {
-        id: 'hr3',
-        name: 'hr3',
-        description: 'Das Pop- und Eventradio für Hessen',
-        streamUrl: 'https://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Hr3_logo.svg/300px-Hr3_logo.svg.png',
-        category: 'regional',
-        genre: 'music',
-        region: 'Hessen'
-      },
-      {
-        id: 'mdrsachsen',
-        name: 'MDR Sachsen',
-        description: 'Das Radio für Sachsen',
-        streamUrl: 'https://mdr-mdrsachsen-live.cast.addradio.de/mdr/mdrsachsen/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/MDR_Sachsen_Logo.svg/300px-MDR_Sachsen_Logo.svg.png',
-        category: 'regional',
-        genre: 'music',
-        region: 'Sachsen'
-      },
-      {
-        id: 'mdrjump',
-        name: 'MDR JUMP',
-        description: 'Der beste Mix für Sachsen, Sachsen-Anhalt, Thüringen',
-        streamUrl: 'https://mdr-mdrjump-live.cast.addradio.de/mdr/mdrjump/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/MDR_Jump_Logo.svg/300px-MDR_Jump_Logo.svg.png',
-        category: 'regional',
-        genre: 'music',
-        region: 'Sachsen, Sachsen-Anhalt, Thüringen'
-      },
-      {
-        id: 'rbb',
-        name: 'rbbKultur',
-        description: 'Kultur- und Wortradio für Berlin und Brandenburg',
-        streamUrl: 'https://rbb-rbbkultur-live.sslcast.addradio.de/rbb/rbbkultur/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Rbb_Kultur_logo.svg/300px-Rbb_Kultur_logo.svg.png',
-        category: 'regional',
-        genre: 'kultur',
-        region: 'Berlin, Brandenburg'
-      },
-      {
-        id: 'radioeins',
-        name: 'radioeins',
-        description: 'Berlins alternativer Sender',
-        streamUrl: 'https://rbb-radioeins-live.sslcast.addradio.de/rbb/radioeins/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Radioeins_Logo_2017.svg/300px-Radioeins_Logo_2017.svg.png',
-        category: 'regional',
-        genre: 'music',
-        region: 'Berlin, Brandenburg'
-      },
-      {
-        id: 'sr1',
-        name: 'SR 1 Europawelle',
-        description: 'Das Radio für das Saarland',
-        streamUrl: 'https://sr-sr1-live.cast.addradio.de/sr/sr1/live/mp3/128/stream.mp3',
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/SR_1_Europawelle_logo.svg/300px-SR_1_Europawelle_logo.svg.png',
-        category: 'regional',
-        genre: 'music',
-        region: 'Saarland'
-      }
-    ];
-    // App State
-    let currentStation = null;
-    let isPlaying = false;
-    let currentVolume = 70;
-    let favorites = JSON.parse(localStorage.getItem('radioFavorites')) || [];
-    let currentFilter = 'all';
-    let searchTerm = '';
-    let stationHistory = [];
-    let currentHistoryIndex = -1;
-    // DOM Elements
-    const audioPlayer = document.getElementById('audioPlayer');
-    const stationsGrid = document.getElementById('stationsGrid');
-    const searchInput = document.getElementById('searchInput');
-    const filterButtons = document.querySelectorAll('.filter-btn');
-    const playerBar = document.getElementById('playerBar');
-    const nowPlayingLogo = document.getElementById('nowPlayingLogo');
-    const nowPlayingName = document.getElementById('nowPlayingName');
-    const nowPlayingGenre = document.getElementById('nowPlayingGenre');
-    const playPauseBtn = document.getElementById('playPauseBtn');
-    const playPauseIcon = document.getElementById('playPauseIcon');
-    const prevBtn = document.getElementById('prevBtn');
-    const nextBtn = document.getElementById('nextBtn');
-    const muteBtn = document.getElementById('muteBtn');
-    const volumeIcon = document.getElementById('volumeIcon');
-    const volumeSlider = document.getElementById('volumeSlider');
-    const loadingSpinner = document.getElementById('loadingSpinner');
-    const toast = document.getElementById('toast');
-    const emptyState = document.getElementById('emptyState');
-    // Initialize App
-    document.addEventListener('DOMContentLoaded', () => {
-      // Sort stations alphabetically
-      stations.sort((a, b) => a.name.localeCompare(b.name, 'de'));
-      renderStations();
-      setupEventListeners();
-      audioPlayer.volume = currentVolume / 100;
-      volumeSlider.value = currentVolume;
-      // Restore last played station
-      const lastStation = localStorage.getItem('lastStation');
-      if (lastStation) {
-        const station = stations.find(s => s.id === lastStation);
-        if (station) {
-          selectStation(station, false);
         }
-      }
-      // Check for browser support
-      if (!window.MediaSource && !audioPlayer.canPlayType('audio/mpeg')) {
-        showToast('Ihr Browser unterstützt kein Audio-Streaming. Bitte aktualisieren Sie Ihren Browser.', 'error');
-      }
-    });
-    // Setup Event Listeners
-    function setupEventListeners() {
-      // Search functionality
-      searchInput.addEventListener('input', debounce((e) => {
-        searchTerm = e.target.value.toLowerCase().trim();
-        renderStations();
-      }, 300));
-      // Filter buttons
-      filterButtons.forEach(btn => {
-        btn.addEventListener('click', () => {
-          filterButtons.forEach(b => {
-            b.classList.remove('active');
-            b.setAttribute('aria-pressed', 'false');
-          });
-          btn.classList.add('active');
-          btn.setAttribute('aria-pressed', 'true');
-          currentFilter = btn.dataset.filter;
-          renderStations();
         });
-      });
-      // Player controls
-      playPauseBtn.addEventListener('click', togglePlayPause);
-      prevBtn.addEventListener('click', playPreviousStation);
-      nextBtn.addEventListener('click', playNextStation);
-      muteBtn.addEventListener('click', toggleMute);
-      volumeSlider.addEventListener('input', (e) => {
-        currentVolume = parseInt(e.target.value);
-        audioPlayer.volume = currentVolume / 100;
-        updateVolumeIcon();
-        localStorage.setItem('volume', currentVolume);
-      });
-      // Audio player events
-      audioPlayer.addEventListener('play', () => {
-        isPlaying = true;
-        updatePlayPauseIcon();
-      });
-      audioPlayer.addEventListener('pause', () => {
-        isPlaying = false;
-        updatePlayPauseIcon();
-      });
-      audioPlayer.addEventListener('error', (e) => {
-        handleAudioError(e);
-      });
-      audioPlayer.addEventListener('loadeddata', () => {
-        hideLoading();
-      });
-      // Keyboard shortcuts
-      document.addEventListener('keydown', (e) => {
-        if (e.target.tagName === 'INPUT') return;
-        switch(e.key) {
-          case ' ':
-            e.preventDefault();
-            togglePlayPause();
-            break;
-          case 'ArrowLeft':
-            playPreviousStation();
-            break;
-          case 'ArrowRight':
-            playNextStation();
-            break;
-          case 'ArrowUp':
-            e.preventDefault();
-            changeVolume(5);
-            break;
-          case 'ArrowDown':
-            e.preventDefault();
-            changeVolume(-5);
-            break;
-          case 'm':
-            toggleMute();
-            break;
-        }

 <!DOCTYPE html>
 <html lang="de">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StreamFlow - Online Radio</title>
+    <!-- Importiere Icons (FontAwesome) -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #6366f1;
+            --primary-hover: #4f46e5;
+            --bg-dark: #0f172a;
+            --bg-card: #1e293b;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --accent-glow: rgba(99, 102, 241, 0.5);
+            --glass-bg: rgba(30, 41, 59, 0.7);
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            outline: none;
+        }
+        body {
+            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            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: 1rem 2rem;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--primary-color);
+        }
+        .logo i {
+            font-size: 1.8rem;
+        }
+        .search-container {
+            flex: 1;
+            max-width: 400px;
+            position: relative;
+        }
+        .search-container input {
+            width: 100%;
+            background: var(--bg-dark);
+            border: 1px solid var(--glass-border);
+            padding: 0.75rem 1rem 0.75rem 2.5rem;
+            border-radius: 99px;
+            color: var(--text-main);
+            font-size: 0.95rem;
+            transition: var(--transition);
+        }
+        .search-container input:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px var(--accent-glow);
+        }
+        .search-container i {
+            position: absolute;
+            left: 1rem;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--text-muted);
+        }
+        .anycoder-link {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            text-decoration: none;
+            transition: var(--transition);
+            background: rgba(255,255,255,0.05);
+            padding: 0.4rem 0.8rem;
+            border-radius: 6px;
+        }
+        .anycoder-link:hover {
+            color: var(--text-main);
+            background: rgba(255,255,255,0.1);
+        }
+        /* --- Main Layout --- */
+        main {
+            flex: 1;
+            display: grid;
+            grid-template-columns: 350px 1fr;
+            gap: 2rem;
+            padding: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+            width: 100%;
+        }
+        /* --- Player Section --- */
+        .player-card {
+            background: var(--bg-card);
+            border-radius: 24px;
+            padding: 2rem;
+            text-align: center;
+            border: 1px solid var(--glass-border);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: fit-content;
+            position: sticky;
+            top: 6rem;
+        }
+        .album-art {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            overflow: hidden;
+            margin-bottom: 1.5rem;
+            position: relative;
+            box-shadow: 0 0 20px var(--accent-glow);
+            transition: var(--transition);
+        }
+        .album-art img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 10s linear;
+        }
+        .album-art.playing img {
+            transform: rotate(360deg);
+            animation: spin 10s linear infinite;
+        }
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        .station-info h2 {
+            font-size: 1.5rem;
+            margin-bottom: 0.5rem;
+            color: var(--text-main);
+        }
+        .station-info p {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            margin-bottom: 2rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .visualizer {
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            gap: 4px;
+            height: 30px;
+            margin-bottom: 2rem;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .visualizer.active {
+            opacity: 1;
+        }
+        .bar {
+            width: 6px;
+            background: var(--primary-color);
+            border-radius: 3px;
+            animation: bounce 0s infinite ease-in-out;
+        }
+        .visualizer.active .bar {
+            animation-duration: 0.8s;
+        }
+        @keyframes bounce {
+            0%, 100% { height: 5px; }
+            50% { height: 25px; }
+        }
+        /* Stagger animations for bars */
+        .bar:nth-child(1) { animation-delay: 0.1s; }
+        .bar:nth-child(2) { animation-delay: 0.3s; }
+        .bar:nth-child(3) { animation-delay: 0.5s; }
+        .bar:nth-child(4) { animation-delay: 0.2s; }
+        .bar:nth-child(5) { animation-delay: 0.4s; }
+        .controls {
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+        .btn-control {
+            background: none;
+            border: none;
+            color: var(--text-main);
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .btn-control:hover {
+            color: var(--primary-color);
+        }
+        .btn-play {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: var(--primary-color);
+            color: white;
+            font-size: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 15px var(--accent-glow);
+        }
+        .btn-play:hover {
+            background: var(--primary-hover);
+            transform: scale(1.05);
+            color: white;
+        }
+        .volume-container {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-muted);
+        }
+        .volume-slider {
+            flex: 1;
+            -webkit-appearance: none;
+            height: 4px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 2px;
+            cursor: pointer;
+        }
+        .volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 12px;
+            height: 12px;
+            background: var(--text-main);
+            border-radius: 50%;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .volume-slider::-webkit-slider-thumb:hover {
+            background: var(--primary-color);
+        }
+        /* --- Station List --- */
+        .stations-section h3 {
+            margin-bottom: 1.5rem;
+            font-size: 1.2rem;
+            border-left: 4px solid var(--primary-color);
+            padding-left: 1rem;
+        }
+        .stations-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1.5rem;
+        }
+        .station-card {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            padding: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            cursor: pointer;
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
+        }
+        .station-card:hover {
+            transform: translateY(-3px);
+            background: rgba(255,255,255,0.08);
+            border-color: rgba(255,255,255,0.2);
+        }
+        .station-card.active {
+            border-color: var(--primary-color);
+            background: rgba(99, 102, 241, 0.1);
+        }
+        .station-card.active::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 4px;
+            height: 100%;
+            background: var(--primary-color);
+        }
+        .station-thumb {
+            width: 60px;
+            height: 60px;
+            border-radius: 12px;
+            object-fit: cover;
+            flex-shrink: 0;
+        }
+        .station-details {
+            flex: 1;
+            min-width: 0; /* Text truncation fix */
+        }
+        .station-name {
+            font-weight: 600;
+            margin-bottom: 0.25rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .station-genre {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .play-indicator {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: rgba(255,255,255,0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition);
+            color: var(--text-main);
+        }
+        .station-card:hover .play-indicator {
+            background: var(--primary-color);
+            color: white;
+        }
+        .station-card.active .play-indicator {
+            background: var(--primary-color);
+            color: white;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
+        }
+        /* --- Toast Notification --- */
+        #toast-container {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .toast {
+            background: var(--bg-card);
+            border: 1px solid var(--glass-border);
+            padding: 1rem 1.5rem;
+            border-radius: 12px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            animation: slideIn 0.3s ease-out forwards;
+            min-width: 250px;
+        }
+        .toast.error { border-left: 4px solid #ef4444; }
+        .toast.success { border-left: 4px solid #22c55e; }
+        .toast.info { border-left: 4px solid var(--primary-color); }
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes fadeOut {
+            to { transform: translateX(100%); opacity: 0; }
+        }
+        /* --- Responsive --- */
+        @media (max-width: 900px) {
+            main {
+                grid-template-columns: 1fr;
+            }
+            .player-card {
+                position: relative;
+                top: 0;
+                margin-bottom: 2rem;
+            }
+            .album-art {
+                width: 150px;
+                height: 150px;
+            }
+        }
+        @media (max-width: 600px) {
+            header {
+                flex-direction: column;
+                align-items: stretch;
+                padding: 1rem;
+            }
+            .search-container {
+                max-width: 100%;
+                order: 3;
+            }
+            .logo {
+                justify-content: center;
+            }
+            .anycoder-link {
+                align-self: flex-end;
+            }
+        }
+    </style>
+</head>
 <body>
+    <header>
+        <div class="logo">
+            <i class="fa-solid fa-radio"></i>
+            StreamFlow
+        </div>
+        <div class="search-container">
+            <i class="fa-solid fa-search"></i>
+            <input type="text" id="searchInput" placeholder="Sender suchen...">
         </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+            Built with anycoder
+        </a>
+    </header>
+    <main>
+        <!-- Player Section -->
+        <section class="player-card">
+            <div class="album-art" id="albumArt">
+                <img src="https://picsum.photos/seed/music/300/300" alt="Album Art" id="currentImage">
+            </div>
+            <div class="station-info">
+                <h2 id="currentStationName">Wähle einen Sender</h2>
+                <p id="currentGenre">Bereit zum Abspielen</p>
+            </div>
+            <!-- CSS Visualizer -->
+            <div class="visualizer" id="visualizer">
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+            </div>
+            <div class="controls">
+                <!-- Prev Button (Visual only for this demo) -->
+                <button class="btn-control" title="Vorheriger">
+                    <i class="fa-solid fa-backward-step fa-lg"></i>
+                </button>
+                <button class="btn-play" id="playPauseBtn" title="Play/Pause">
+                    <i class="fa-solid fa-play" id="playIcon"></i>
+                </button>
+                <!-- Next Button (Visual only for this demo) -->
+                <button class="btn-control" title="Nächster">
+                    <i class="fa-solid fa-forward-step fa-lg"></i>
+                </button>
+            </div>
+            <div class="volume-container">
+                <i class="fa-solid fa-volume-low"></i>
+                <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.05" value="0.8">
+                <i class="fa-solid fa-volume-high"></i>
+            </div>
+        </section>
+        <!-- Stations List Section -->
+        <section class="stations-section">
+            <h3>Verfügbare Sender</h3>
+            <div class="stations-grid" id="stationsGrid">
+                <!-- Stations will be injected here via JS -->
+            </div>
+        </section>
+    </main>
+    <div id="toast-container"></div>
+    <script>
+        // --- Data: Radio Stations ---
+        // Using reliable public MP3 streams.
+        const stations = [
+            {
+                name: "Antenne Bayern",
+                genre: "Pop",
+                url: "https://stream.antenne.de/antenne",
+                image: "https://picsum.photos/seed/antenne/200/200"
+            },
+            {
+                name: "NDR 1 Niedersachsen",
+                genre: "Information & Pop",
+                url: "https://ndr-ndr1-niedersachsen-ndr.akamaized.net/ndr/ndr1/niedersachsen/playlist.m3u8", // HLS fallback logic needed usually, but browsers support it natively mostly or we use mp3
+                // Fallback to direct MP3 for broader compatibility in this demo
+                url: "https://icecast.ndr.de/ndr/ndr1/niedersachsen/mp3/128/stream.mp3",
+                image: "https://picsum.photos/seed/ndr/200/200"
+            },
+            {
+                name: "1LIVE",
+                genre: "Rock & Pop",
+                url: "https://wdr-1live-live.icecastssl.wdr.de/wdr/1live/live/mp3/128/stream.mp3",
+                image: "https://picsum.photos/seed/1live/200/200"
+            },
+            {
+                name: "SWR3",
+                genre: "Pop & Hits",
+                url: "https://swr-swr3-live.cast.addradio.de/swr/swr3/live/mp3/128/stream.mp3",
+                image: "https://picsum.photos/seed/swr3/200/200"
+            },
+            {
+                name: "Deutschlandfunk",
+                genre: "Nachrichten & Kultur",
+                url: "https://st01.dlf.de/dlf/01/128/mp3/stream.mp3",
+                image: "https://picsum.photos/seed/dlf/200/200"
+            },
+            {
+                name: "SRF 3",
+                genre: "Pop & Rock",
+                url: "https://stream.srg-ssr.ch/m/drs3/mp3_128",
+                image: "https://picsum.photos/seed/srf3/200/200"
+            },
+            {
+                name: "BBC World Service",
+                genre: "International News",
+                url: "http://stream.live.vc.bbcmedia.co.uk/bbc_world_service",
+                image: "https://picsum.photos/seed/bbc/200/200"
+            },
+            {
+                name: "Ibiza Global Radio",
+                genre: "Electronic",
+                url: "http://ibizaglobalradio.streaming-pro.com:8024/;stream.mp3",
+                image: "https://picsum.photos/seed/ibiza/200/200"
+            },
+            {
+                name: "Classic FM",
+                genre: "Classical",
+                url: "http://media-the.musicradio.com/ClassicFMMP3",
+                image: "https://picsum.photos/seed/classic/200/200"
+            },
+            {
+                name: "Radio Paradise",
+                genre: "Eclectic Rock",
+                url: "http://stream.radioparadise.com/mp3-192",
+                image: "https://picsum.photos/seed/paradise/200/200"
+            }
+        ];
+        // --- DOM Elements ---
+        const audio = new Audio();
+        const stationsGrid = document.getElementById('stationsGrid');
+        const playPauseBtn = document.getElementById('playPauseBtn');
+        const playIcon = document.getElementById('playIcon');
+        const volumeSlider = document.getElementById('volumeSlider');
+        const searchInput = document.getElementById('searchInput');
+        const currentStationName = document.getElementById('currentStationName');
+        const currentGenre = document.getElementById('currentGenre');
+        const currentImage = document.getElementById('currentImage');
+        const albumArt = document.getElementById('albumArt');
+        const visualizer = document.getElementById('visualizer');
+        const toastContainer = document.getElementById('toast-container');
+        // --- State ---
+        let isPlaying = false;
+        let currentStation = null;
+        // --- Initialization ---
+        function init() {
+            renderStations(stations);
+            audio.volume = volumeSlider.value;
+        }
+        // --- Render Functions ---
+        function renderStations(list) {
+            stationsGrid.innerHTML = '';
+            if (list.length === 0) {
+                stationsGrid.innerHTML = '<p style="color:var(--text-muted); grid-column: 1/-1;">Keine Sender gefunden.</p>';
+                return;
+            }
+            list.forEach(station => {
+                const card = document.createElement('div');
+                card.className = `station-card ${currentStation && currentStation.name === station.name ? 'active' : ''}`;
+                card.onclick = () => loadStation(station);
+                card.innerHTML = `
+                    <img src="${station.image}" alt="${station.name}" class="station-thumb">
+                    <div class="station-details">
+                        <div class="station-name">${station.name}</div>
+                        <div class="station-genre"><i class="fa-solid fa-music"></i> ${station.genre}</div>
+                    </div>
+                    <div class="play-indicator">
+                        <i class="fa-solid ${currentStation && currentStation.name === station.name && isPlaying ? 'fa-chart-simple' : 'fa-play'}"></i>
+                    </div>
+                `;
+                stationsGrid.appendChild(card);
+            });
+        }
+        // --- Player Logic ---
+        function loadStation(station) {
+            if (currentStation && currentStation.name === station.name) {
+                togglePlay();
+                return;
+            }
+            currentStation = station;
+            audio.src = station.url;
+            // Update UI
+            currentStationName.textContent = station.name;
+            currentGenre.textContent = station.genre;
+            currentImage.src = station.image;
+            // Update List UI to show active state
+            renderStations(stations.filter(s => s.name.toLowerCase().includes(searchInput.value.toLowerCase())));
+            playAudio();
+        }
+        function togglePlay() {
+            if (!currentStation) {
+                showToast('Bitte wähle zuerst einen Sender aus.', 'info');
+                return;
+            }
+            if (isPlaying) {
+                pauseAudio();
+            } else {
+                playAudio();
+            }
         }
+        function playAudio() {
+            const playPromise = audio.play();
+            if (playPromise !== undefined) {
+                playPromise.then(_ => {
+                    isPlaying = true;
+                    updatePlayerUI();
+                })
+                .catch(error => {
+                    console.error('Playback failed:', error);
+                    isPlaying = false;
+                    updatePlayerUI();
+                    showToast('Fehler beim Laden des Streams. Versuche einen anderen Sender.', 'error');
+                });
+            }
+        }
+        function pauseAudio() {
+            audio.pause();
+            isPlaying = false;
+            updatePlayerUI();
+        }
+        function updatePlayerUI() {
+            if (isPlaying) {
+                playIcon.classList.remove('fa-play');
+                playIcon.classList.add('fa-pause');
+                albumArt.classList.add('playing');
+                visualizer.classList.add('active');
+            } else {
+                playIcon.classList.remove('fa-pause');
+                playIcon.classList.add('fa-play');
+                albumArt.classList.remove('playing');
+                visualizer.classList.remove('active');
+            }
+            // Refresh list icons
+            renderStations(stations.filter(s => s.name.toLowerCase().includes(searchInput.value.toLowerCase())));
+        }
+        // --- Event Listeners ---
+        playPauseBtn.addEventListener('click', togglePlay);
+        volumeSlider.addEventListener('input', (e) => {
+            audio.volume = e.target.value;
         });
+        searchInput.addEventListener('input', (e) => {
+            const query = e.target.value.toLowerCase();
+            const filtered = stations.filter(station =>
+                station.name.toLowerCase().includes(query) ||
+                station.genre.toLowerCase().includes(query)
+            );
+            renderStations(filtered);
+        });
+        // Handle audio errors (e.g., stream offline)
+        audio.addEventListener('error', (e) => {
+            if(currentStation) {
+                showToast(`Stream "${currentStation.name}" ist nicht verfügbar.`, 'error');
+                isPlaying = false;
+                updatePlayerUI();
+            }
+        });
+        // --- Toast Notification System ---
+        function showToast(message, type = 'info') {
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            let iconClass = 'fa-info-circle';
+            if (type === 'error') iconClass = 'fa-exclamation-circle';
+            if (type === 'success') iconClass = 'fa-check-circle';
+            toast.innerHTML = `
+                <i class="fa-solid ${iconClass}"></i>
+                <span>${message}</span>
+            `;
+            toastContainer.appendChild(toast);
+            // Remove after 3 seconds
+            setTimeout(() => {
+                toast.style.animation = 'fadeOut 0.3s ease-out forwards';
+                toast.addEventListener('animationend', () => {
+                    toast.remove();
+                });
+            }, 3000);
+        }
+        // Run init
+        init();
+    </script>
+</body>
+</html>