<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" data-bs-theme="light">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Grup MB Radio</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <style>
        :root {
            --player-height: 80px;
        }
        
        body {
            padding-bottom: calc(var(--player-height) + 20px);
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
        }
        .card {
            transition: all 0.3s ease;
            border: 1px solid var(--bs-border-color);
            border-radius: 12px;
            overflow: hidden;
            background-color: var(--bs-card-bg, #fff);
            position: relative;
            z-index: 1;
        }
        
        .card.playing {
            box-shadow: 0 0 15px rgba(30, 236, 3, 0.3) !important;
            border-color: rgba(30, 236, 3, 0.3) !important;
        }
        
        .card.playing::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(30, 236, 3, 0.05) 0%, rgba(30, 236, 3, 0.1) 100%);
            z-index: -1;
            border-radius: 12px;
            animation: cardPulse 2s infinite;
        }
        .card-img-top.bg-dark {
            background-color: var(--bs-gray-800) !important;
            position: relative;
            overflow: hidden;
        }
        .card-img-top .bi-broadcast {
            position: relative;
            z-index: 1;
            transition: transform 0.3s ease;
        }
        .card-img-top.playing .bi-broadcast {
            animation: pulse 1.5s infinite;
            color: #1eec03 !important;
            text-shadow: 0 0 15px rgba(30, 236, 3, 0.7);
        }
        .card-img-top.playing::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            opacity: 0;
        }
        .card-img-top.playing::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            opacity: 0;
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
                text-shadow: 0 0 5px rgba(30, 236, 3, 0.7);
            }
            50% {
                transform: scale(1.15);
                text-shadow: 0 0 20px rgba(30, 236, 3, 0.9);
            }
            100% {
                transform: scale(1);
                text-shadow: 0 0 5px rgba(30, 236, 3, 0.7);
            }
        }
        
        @keyframes cardPulse {
            0% {
                opacity: 0.3;
            }
            50% {
                opacity: 0.7;
            }
            100% {
                opacity: 0.3;
            }
        }
        .card-img-top.playing::after {
            animation: ripple 2s infinite;
        }
        .card-img-top.playing::before {
            animation: ripple 2s infinite 0.5s;
        }
        @keyframes ripple {
            0% {
                width: 0;
                height: 0;
                opacity: 0.5;
            }
            100% {
                width: 100px;
                height: 100px;
                opacity: 0;
            }
        }
        .card-body {
            background-color: var(--bs-card-bg, #fff);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        }
        .btn-play-stream {
            transition: all 0.2s ease;
        }
        .btn-play-stream:hover {
            transform: translateY(-1px);
        }
        .progress {
            border-radius: 10px;
            overflow: hidden;
        }
        .progress-bar {
            background-color: var(--bs-success);
        }
        .now-playing-bar {
            z-index: 1050;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }
        @media (max-width: 767.98px) {
            .card {
                margin-bottom: 1rem;
            }
        }
        .now-playing-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: var(--player-height);
            background: var(--bs-body-bg);
            color: var(--bs-body-color);
            border-top: 1px solid var(--bs-border-color);
            z-index: 1000;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .now-playing-info {
            display: flex;
            align-items: center;
            min-width: 200px;
            max-width: 30%;
        }
        .now-playing-cover {
            width: 56px;
            height: 56px;
            background: var(--bs-secondary-bg);
            margin-right: 15px;
            flex-shrink: 0;
        }
        .now-playing-details {
            overflow: hidden;
        }
        .now-playing-title {
            font-weight: 600;
            font-size: 0.9rem;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .now-playing-artist {
            font-size: 0.8rem;
            color: var(--bs-secondary-color);
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .player-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-grow: 1;
            max-width: 700px;
            margin: 0 20px;
        }
        .control-buttons {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        .control-buttons .btn {
            color: var(--bs-secondary-color);
            background: none;
            border: none;
            font-size: 1.2rem;
            padding: 5px 10px;
            transition: all 0.2s;
        }
        /* Make stop button visible in light theme */
        [data-bs-theme=light] .control-buttons .btn {
            color: var(--bs-body-color);
        }
        .control-buttons .btn:hover {
            color: var(--bs-light);
            transform: scale(1.1);
        }
        .play-pause-btn {
            background: var(--bs-light) !important;
            color: var(--bs-dark) !important;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px;
        }
        .play-pause-btn:hover {
            transform: scale(1.05) !important;
        }
        .progress-container {
            width: 100%;
            display: flex;
            align-items: center;
        }
        .progress-time {
            font-size: 0.7rem;
            color: var(--bs-secondary-color);
            min-width: 40px;
            text-align: center;
        }
        .progress-bar-container {
            flex-grow: 1;
            height: 4px;
            background: var(--bs-secondary-bg);
            border-radius: 2px;
            margin: 0 10px;
            cursor: pointer;
        }
        .progress-bar {
            height: 100%;
            background: var(--bs-success);
            border-radius: 2px;
            width: 0%;
        }
        .volume-controls {
            display: flex;
            align-items: center;
            min-width: 180px;
            justify-content: flex-end;
        }
        .volume-slider {
            width: 100px;
            margin-right: 10px;
        }
        .card {
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .card-header {
            padding: 0.75rem 1.25rem;
        }
        .table {
            margin-bottom: 0;
            font-size: 0.9rem;
        }
        .table th {
            width: 35%;
            white-space: nowrap;
            padding: 0.5rem 1.25rem;
            font-weight: 500;
        }
        .table td {
            padding: 0.5rem 1.25rem;
            vertical-align: middle;
        }
        .table-striped &gt; tbody &gt; tr:nth-of-type(odd) &gt; * {
            --bs-table-striped-bg: var(--bs-table-bg);
        }
        .btn-group .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.85rem;
        }
        .audioplayer {
            margin: 10px 0;
        }
        audio {
            width: 100%;
            border-radius: 4px;
        }
        
        /* Theme toggle button */
        .theme-toggle {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1100;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        
        .theme-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        
        .theme-toggle i {
            font-size: 1.3rem;
        }
    </style>
  </head>
  <body>
    <button class="theme-toggle" id="themeToggle" title="Ubah Tema">
      <i class="bi-sun-fill" id="themeIcon"></i>
    </button>
    <div class="container-fluid py-3">
      <header class="text-center mb-4">
        <h1 class="h2 text-primary mb-2"><i class="bi-broadcast me-2"></i>Grup MB Radio
            </h1>
        <div class="d-flex justify-content-center align-items-center gap-3 mb-2">
          <span class="badge bg-primary"><i class="bi-people-fill me-1"></i> Total Listeners: <strong>7</strong></span>
          <span class="badge bg-success"><i class="bi-collection-play me-1"></i> Active Streams: 6</span>
          <span class="badge bg-info text-dark"><i class="bi-collection me-1"></i> Total Streams: 10</span>
        </div>
      </header>
      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        <div class="col">
          <div class="card h-100 shadow-sm">
            <div class="position-relative">
              <div class="card-img-top bg-dark text-center py-4">
                <i class="bi-broadcast text-white" style="font-size: 2.5rem;"></i>
                <div class="position-absolute top-0 end-0 m-2">
                  <span class="badge bg-success me-1"><i class="bi-people-fill me-1"></i>2
                                                Online
                                            </span>
                  <span class="badge bg-warning text-dark"><i class="bi-graph-up-arrow me-1"></i>3
                                                    Peak
                                                </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title text-truncate">Radio Bima FM</h5>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary">audio/mpeg</span>
                <span class="badge bg-success">128 kbps
                                        </span>
              </div>
              <div class="mb-3 d-none">
                <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Quality</span>
                  <span>%</span>
                </div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: %" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <div class="d-flex gap-2 flex-wrap mb-2">
                <button class="btn btn-sm btn-outline-primary btn-play-stream flex-grow-1" data-stream="/bimafm" data-title="Radio Bima FM" data-artist="dangdut mania mantap - DOA SUCI - GERRY MAHESA - NEW PALLAPA LIVE PT KAS GRESIK" title="Putar Stream"><i class="bi-play-fill me-1"></i> Putar Radio
                                        </button>
                <div class="btn-group" role="group">
                  <a class="btn btn-sm btn-outline-secondary" href="/bimafm.m3u" title="M3U Playlist">
                    <i class="bi-music-note-list"></i>
                  </a>
                  <a class="btn btn-sm btn-outline-secondary" href="/bimafm.xspf" title="XSPF Playlist">
                    <i class="bi-collection-play"></i>
                  </a>
                </div>
              </div>
              <button class="btn btn-sm btn-outline-secondary w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#detail-1" aria-expanded="false"><i class="bi-info-circle me-1"></i> Detail Stream
                                    </button>
              <div class="collapse" id="detail-1">
                <div class="table-responsive">
                  <table class="table table-sm table-hover table-striped mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="w-25"><i class="bi-broadcast me-2"></i>Stream Name</th>
                        <td>
                          <span class="badge bg-primary">Radio Bima FM</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-info-circle me-2"></i>Description</th>
                        <td>88.4 MHz</td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-file-earmark-music me-2"></i>Content Type</th>
                        <td>
                          <span class="badge bg-info text-dark">audio/mpeg</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-clock-history me-2"></i>Stream started</th>
                        <td>
                          <span class="text-muted">Sun, 12 Apr 2026 08:33:53 +0700</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-speedometer2 me-2"></i>Bitrate</th>
                        <td>
                          <span class="badge bg-secondary">128 kbps</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-people me-2"></i>Current Listeners</th>
                        <td>
                          <span class="badge bg-success">2</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-graph-up-arrow me-2"></i>Peak Listeners</th>
                        <td>
                          <span class="badge bg-warning text-dark">3</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-tags me-2"></i>Genre</th>
                        <td>
                          <span class="badge rounded-pill bg-info text-dark">Other</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-link-45deg me-2"></i>Stream URL</th>
                        <td>
                          <a href="http://www.example.com" class="text-decoration-none text-primary"><i class="bi-box-arrow-up-right me-1"></i>http://www.example.com</a>
                        </td>
                      </tr>
                      <tr class="table-primary fw-bold">
                        <th scope="row"><i class="bi-music-note-beamed me-2"></i>Now Playing</th>
                        <td class="text-primary">
                          <div class="d-flex align-items-center">
                            <i class="bi-disc me-2"></i>
                            <div>
                              <span>dangdut mania mantap - DOA SUCI - GERRY MAHESA - NEW PALLAPA LIVE PT KAS GRESIK</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100 shadow-sm">
            <div class="position-relative">
              <div class="card-img-top bg-dark text-center py-4">
                <i class="bi-broadcast text-white" style="font-size: 2.5rem;"></i>
                <div class="position-absolute top-0 end-0 m-2">
                  <span class="badge bg-success me-1"><i class="bi-people-fill me-1"></i>1
                                                Online
                                            </span>
                  <span class="badge bg-warning text-dark"><i class="bi-graph-up-arrow me-1"></i>1
                                                    Peak
                                                </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title text-truncate">Radio Batara FM</h5>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary">audio/mpeg</span>
                <span class="badge bg-success">128 kbps
                                        </span>
              </div>
              <div class="mb-3 d-none">
                <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Quality</span>
                  <span>%</span>
                </div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: %" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <div class="d-flex gap-2 flex-wrap mb-2">
                <button class="btn btn-sm btn-outline-primary btn-play-stream flex-grow-1" data-stream="/batarafm" data-title="Radio Batara FM" data-artist="BACKSOUND DANGDUT SORE KE MALAM" title="Putar Stream"><i class="bi-play-fill me-1"></i> Putar Radio
                                        </button>
                <div class="btn-group" role="group">
                  <a class="btn btn-sm btn-outline-secondary" href="/batarafm.m3u" title="M3U Playlist">
                    <i class="bi-music-note-list"></i>
                  </a>
                  <a class="btn btn-sm btn-outline-secondary" href="/batarafm.xspf" title="XSPF Playlist">
                    <i class="bi-collection-play"></i>
                  </a>
                </div>
              </div>
              <button class="btn btn-sm btn-outline-secondary w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#detail-2" aria-expanded="false"><i class="bi-info-circle me-1"></i> Detail Stream
                                    </button>
              <div class="collapse" id="detail-2">
                <div class="table-responsive">
                  <table class="table table-sm table-hover table-striped mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="w-25"><i class="bi-broadcast me-2"></i>Stream Name</th>
                        <td>
                          <span class="badge bg-primary">Radio Batara FM</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-info-circle me-2"></i>Description</th>
                        <td>Teman Terbaik Kamu</td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-file-earmark-music me-2"></i>Content Type</th>
                        <td>
                          <span class="badge bg-info text-dark">audio/mpeg</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-clock-history me-2"></i>Stream started</th>
                        <td>
                          <span class="text-muted">Sun, 12 Apr 2026 18:07:37 +0700</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-speedometer2 me-2"></i>Bitrate</th>
                        <td>
                          <span class="badge bg-secondary">128 kbps</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-people me-2"></i>Current Listeners</th>
                        <td>
                          <span class="badge bg-success">1</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-graph-up-arrow me-2"></i>Peak Listeners</th>
                        <td>
                          <span class="badge bg-warning text-dark">1</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-tags me-2"></i>Genre</th>
                        <td>
                          <span class="badge rounded-pill bg-info text-dark">Other</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-link-45deg me-2"></i>Stream URL</th>
                        <td>
                          <a href="http://www.radiotriramafm.net" class="text-decoration-none text-primary"><i class="bi-box-arrow-up-right me-1"></i>http://www.radiotriramafm.net</a>
                        </td>
                      </tr>
                      <tr class="table-primary fw-bold">
                        <th scope="row"><i class="bi-music-note-beamed me-2"></i>Now Playing</th>
                        <td class="text-primary">
                          <div class="d-flex align-items-center">
                            <i class="bi-disc me-2"></i>
                            <div>
                              <span>BACKSOUND DANGDUT SORE KE MALAM</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100 shadow-sm">
            <div class="position-relative">
              <div class="card-img-top bg-dark text-center py-4">
                <i class="bi-broadcast text-white" style="font-size: 2.5rem;"></i>
                <div class="position-absolute top-0 end-0 m-2">
                  <span class="badge bg-success me-1"><i class="bi-people-fill me-1"></i>1
                                                Online
                                            </span>
                  <span class="badge bg-warning text-dark"><i class="bi-graph-up-arrow me-1"></i>2
                                                    Peak
                                                </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title text-truncate">Berlian FM</h5>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary">audio/mpeg</span>
                <span class="badge bg-success">128 kbps
                                        </span>
              </div>
              <div class="mb-3 d-none">
                <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Quality</span>
                  <span>%</span>
                </div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: %" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <div class="d-flex gap-2 flex-wrap mb-2">
                <button class="btn btn-sm btn-outline-primary btn-play-stream flex-grow-1" data-stream="/berlianfm" data-title="Berlian FM" data-artist="#PROMO PROGRAM 2025" title="Putar Stream"><i class="bi-play-fill me-1"></i> Putar Radio
                                        </button>
                <div class="btn-group" role="group">
                  <a class="btn btn-sm btn-outline-secondary" href="/berlianfm.m3u" title="M3U Playlist">
                    <i class="bi-music-note-list"></i>
                  </a>
                  <a class="btn btn-sm btn-outline-secondary" href="/berlianfm.xspf" title="XSPF Playlist">
                    <i class="bi-collection-play"></i>
                  </a>
                </div>
              </div>
              <button class="btn btn-sm btn-outline-secondary w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#detail-3" aria-expanded="false"><i class="bi-info-circle me-1"></i> Detail Stream
                                    </button>
              <div class="collapse" id="detail-3">
                <div class="table-responsive">
                  <table class="table table-sm table-hover table-striped mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="w-25"><i class="bi-broadcast me-2"></i>Stream Name</th>
                        <td>
                          <span class="badge bg-primary">Berlian FM</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-info-circle me-2"></i>Description</th>
                        <td>Berlian FM</td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-file-earmark-music me-2"></i>Content Type</th>
                        <td>
                          <span class="badge bg-info text-dark">audio/mpeg</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-clock-history me-2"></i>Stream started</th>
                        <td>
                          <span class="text-muted">Sun, 12 Apr 2026 05:05:55 +0700</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-speedometer2 me-2"></i>Bitrate</th>
                        <td>
                          <span class="badge bg-secondary">128 kbps</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-people me-2"></i>Current Listeners</th>
                        <td>
                          <span class="badge bg-success">1</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-graph-up-arrow me-2"></i>Peak Listeners</th>
                        <td>
                          <span class="badge bg-warning text-dark">2</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-tags me-2"></i>Genre</th>
                        <td>
                          <span class="badge rounded-pill bg-info text-dark">various</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-link-45deg me-2"></i>Stream URL</th>
                        <td>
                          <a href="berlianfm" class="text-decoration-none text-primary"><i class="bi-box-arrow-up-right me-1"></i>berlianfm</a>
                        </td>
                      </tr>
                      <tr class="table-primary fw-bold">
                        <th scope="row"><i class="bi-music-note-beamed me-2"></i>Now Playing</th>
                        <td class="text-primary">
                          <div class="d-flex align-items-center">
                            <i class="bi-disc me-2"></i>
                            <div>
                              <span>#PROMO PROGRAM 2025</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100 shadow-sm">
            <div class="position-relative">
              <div class="card-img-top bg-dark text-center py-4">
                <i class="bi-broadcast text-white" style="font-size: 2.5rem;"></i>
                <div class="position-absolute top-0 end-0 m-2">
                  <span class="badge bg-success me-1"><i class="bi-people-fill me-1"></i>1
                                                Online
                                            </span>
                  <span class="badge bg-warning text-dark"><i class="bi-graph-up-arrow me-1"></i>4
                                                    Peak
                                                </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title text-truncate">MB Radio Pusat</h5>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary">audio/mpeg</span>
                <span class="badge bg-success">128 kbps
                                        </span>
              </div>
              <div class="mb-3 d-none">
                <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Quality</span>
                  <span>%</span>
                </div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: %" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <div class="d-flex gap-2 flex-wrap mb-2">
                <button class="btn btn-sm btn-outline-primary btn-play-stream flex-grow-1" data-stream="/mbradiopusat" data-title="MB Radio Pusat" data-artist="Jiva Java - Jiva Java - Jazz Jawa Vol 1 - Relaxing Javanese Lo-fi - Traditional Meets Modern - Indonesia" title="Putar Stream"><i class="bi-play-fill me-1"></i> Putar Radio
                                        </button>
                <div class="btn-group" role="group">
                  <a class="btn btn-sm btn-outline-secondary" href="/mbradiopusat.m3u" title="M3U Playlist">
                    <i class="bi-music-note-list"></i>
                  </a>
                  <a class="btn btn-sm btn-outline-secondary" href="/mbradiopusat.xspf" title="XSPF Playlist">
                    <i class="bi-collection-play"></i>
                  </a>
                </div>
              </div>
              <button class="btn btn-sm btn-outline-secondary w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#detail-4" aria-expanded="false"><i class="bi-info-circle me-1"></i> Detail Stream
                                    </button>
              <div class="collapse" id="detail-4">
                <div class="table-responsive">
                  <table class="table table-sm table-hover table-striped mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="w-25"><i class="bi-broadcast me-2"></i>Stream Name</th>
                        <td>
                          <span class="badge bg-primary">MB Radio Pusat</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-info-circle me-2"></i>Description</th>
                        <td>Radio Pusat Mutiara Berlian</td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-file-earmark-music me-2"></i>Content Type</th>
                        <td>
                          <span class="badge bg-info text-dark">audio/mpeg</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-clock-history me-2"></i>Stream started</th>
                        <td>
                          <span class="text-muted">Fri, 12 Dec 2025 14:39:41 +0700</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-speedometer2 me-2"></i>Bitrate</th>
                        <td>
                          <span class="badge bg-secondary">128 kbps</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-people me-2"></i>Current Listeners</th>
                        <td>
                          <span class="badge bg-success">1</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-graph-up-arrow me-2"></i>Peak Listeners</th>
                        <td>
                          <span class="badge bg-warning text-dark">4</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-tags me-2"></i>Genre</th>
                        <td>
                          <span class="badge rounded-pill bg-info text-dark">various</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-link-45deg me-2"></i>Stream URL</th>
                        <td>
                          <a href="https://radio.mutiaraberlian.id/mbradiopusat" class="text-decoration-none text-primary"><i class="bi-box-arrow-up-right me-1"></i>https://radio.mutiaraberlian.id/mbradiopusat</a>
                        </td>
                      </tr>
                      <tr class="table-primary fw-bold">
                        <th scope="row"><i class="bi-music-note-beamed me-2"></i>Now Playing</th>
                        <td class="text-primary">
                          <div class="d-flex align-items-center">
                            <i class="bi-disc me-2"></i>
                            <div>
                              <span>Jiva Java - Jiva Java - Jazz Jawa Vol 1 - Relaxing Javanese Lo-fi - Traditional Meets Modern - Indonesia</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100 shadow-sm">
            <div class="position-relative">
              <div class="card-img-top bg-dark text-center py-4">
                <i class="bi-broadcast text-white" style="font-size: 2.5rem;"></i>
                <div class="position-absolute top-0 end-0 m-2">
                  <span class="badge bg-success me-1"><i class="bi-people-fill me-1"></i>1
                                                Online
                                            </span>
                  <span class="badge bg-warning text-dark"><i class="bi-graph-up-arrow me-1"></i>2
                                                    Peak
                                                </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title text-truncate">RadioBOSS Stream</h5>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary">audio/mpeg</span>
                <span class="badge bg-success">128 kbps
                                        </span>
              </div>
              <div class="mb-3 d-none">
                <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Quality</span>
                  <span>%</span>
                </div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: %" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <div class="d-flex gap-2 flex-wrap mb-2">
                <button class="btn btn-sm btn-outline-primary btn-play-stream flex-grow-1" data-stream="/muarojambi" data-title="RadioBOSS Stream" data-artist="SPOT TESTIMONI IBU INDAH - ASAM LAMBUNG - MUARO JAMBI RADIO" title="Putar Stream"><i class="bi-play-fill me-1"></i> Putar Radio
                                        </button>
                <div class="btn-group" role="group">
                  <a class="btn btn-sm btn-outline-secondary" href="/muarojambi.m3u" title="M3U Playlist">
                    <i class="bi-music-note-list"></i>
                  </a>
                  <a class="btn btn-sm btn-outline-secondary" href="/muarojambi.xspf" title="XSPF Playlist">
                    <i class="bi-collection-play"></i>
                  </a>
                </div>
              </div>
              <button class="btn btn-sm btn-outline-secondary w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#detail-5" aria-expanded="false"><i class="bi-info-circle me-1"></i> Detail Stream
                                    </button>
              <div class="collapse" id="detail-5">
                <div class="table-responsive">
                  <table class="table table-sm table-hover table-striped mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="w-25"><i class="bi-broadcast me-2"></i>Stream Name</th>
                        <td>
                          <span class="badge bg-primary">RadioBOSS Stream</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-info-circle me-2"></i>Description</th>
                        <td>Unspecified description</td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-file-earmark-music me-2"></i>Content Type</th>
                        <td>
                          <span class="badge bg-info text-dark">audio/mpeg</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-clock-history me-2"></i>Stream started</th>
                        <td>
                          <span class="text-muted">Sun, 12 Apr 2026 18:49:55 +0700</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-speedometer2 me-2"></i>Bitrate</th>
                        <td>
                          <span class="badge bg-secondary">128 kbps</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-people me-2"></i>Current Listeners</th>
                        <td>
                          <span class="badge bg-success">1</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-graph-up-arrow me-2"></i>Peak Listeners</th>
                        <td>
                          <span class="badge bg-warning text-dark">2</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-tags me-2"></i>Genre</th>
                        <td>
                          <span class="badge rounded-pill bg-info text-dark">Other</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-link-45deg me-2"></i>Stream URL</th>
                        <td>
                          <a href="http://www.example.com" class="text-decoration-none text-primary"><i class="bi-box-arrow-up-right me-1"></i>http://www.example.com</a>
                        </td>
                      </tr>
                      <tr class="table-primary fw-bold">
                        <th scope="row"><i class="bi-music-note-beamed me-2"></i>Now Playing</th>
                        <td class="text-primary">
                          <div class="d-flex align-items-center">
                            <i class="bi-disc me-2"></i>
                            <div>
                              <span>SPOT TESTIMONI IBU INDAH - ASAM LAMBUNG - MUARO JAMBI RADIO</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100 shadow-sm">
            <div class="position-relative">
              <div class="card-img-top bg-dark text-center py-4">
                <i class="bi-broadcast text-white" style="font-size: 2.5rem;"></i>
                <div class="position-absolute top-0 end-0 m-2">
                  <span class="badge bg-success me-1"><i class="bi-people-fill me-1"></i>1
                                                Online
                                            </span>
                  <span class="badge bg-warning text-dark"><i class="bi-graph-up-arrow me-1"></i>3
                                                    Peak
                                                </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title text-truncate">RadioBOSS Stream</h5>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary">audio/mpeg</span>
                <span class="badge bg-success">128 kbps
                                        </span>
              </div>
              <div class="mb-3 d-none">
                <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Quality</span>
                  <span>%</span>
                </div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: %" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <div class="d-flex gap-2 flex-wrap mb-2">
                <button class="btn btn-sm btn-outline-primary btn-play-stream flex-grow-1" data-stream="/ramamafm" data-title="RadioBOSS Stream" data-artist="4. ADZAN ISY'A RAMAMA 2021" title="Putar Stream"><i class="bi-play-fill me-1"></i> Putar Radio
                                        </button>
                <div class="btn-group" role="group">
                  <a class="btn btn-sm btn-outline-secondary" href="/ramamafm.m3u" title="M3U Playlist">
                    <i class="bi-music-note-list"></i>
                  </a>
                  <a class="btn btn-sm btn-outline-secondary" href="/ramamafm.xspf" title="XSPF Playlist">
                    <i class="bi-collection-play"></i>
                  </a>
                </div>
              </div>
              <button class="btn btn-sm btn-outline-secondary w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#detail-6" aria-expanded="false"><i class="bi-info-circle me-1"></i> Detail Stream
                                    </button>
              <div class="collapse" id="detail-6">
                <div class="table-responsive">
                  <table class="table table-sm table-hover table-striped mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="w-25"><i class="bi-broadcast me-2"></i>Stream Name</th>
                        <td>
                          <span class="badge bg-primary">RadioBOSS Stream</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-info-circle me-2"></i>Description</th>
                        <td>Unspecified description</td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-file-earmark-music me-2"></i>Content Type</th>
                        <td>
                          <span class="badge bg-info text-dark">audio/mpeg</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-clock-history me-2"></i>Stream started</th>
                        <td>
                          <span class="text-muted">Sun, 12 Apr 2026 05:46:07 +0700</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-speedometer2 me-2"></i>Bitrate</th>
                        <td>
                          <span class="badge bg-secondary">128 kbps</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-people me-2"></i>Current Listeners</th>
                        <td>
                          <span class="badge bg-success">1</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-graph-up-arrow me-2"></i>Peak Listeners</th>
                        <td>
                          <span class="badge bg-warning text-dark">3</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-tags me-2"></i>Genre</th>
                        <td>
                          <span class="badge rounded-pill bg-info text-dark">Other</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-link-45deg me-2"></i>Stream URL</th>
                        <td>
                          <a href="http://www.example.com" class="text-decoration-none text-primary"><i class="bi-box-arrow-up-right me-1"></i>http://www.example.com</a>
                        </td>
                      </tr>
                      <tr class="table-primary fw-bold">
                        <th scope="row"><i class="bi-music-note-beamed me-2"></i>Now Playing</th>
                        <td class="text-primary">
                          <div class="d-flex align-items-center">
                            <i class="bi-disc me-2"></i>
                            <div>
                              <span>4. ADZAN ISY'A RAMAMA 2021</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100 shadow-sm">
            <div class="position-relative">
              <div class="card-img-top bg-dark text-center py-4">
                <i class="bi-broadcast text-white" style="font-size: 2.5rem;"></i>
                <div class="position-absolute top-0 end-0 m-2">
                  <span class="badge bg-success me-1"><i class="bi-people-fill me-1"></i>0
                                                Online
                                            </span>
                  <span class="badge bg-warning text-dark"><i class="bi-graph-up-arrow me-1"></i>0
                                                    Peak
                                                </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title text-truncate">RadioBOSS Stream</h5>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary">audio/mpeg</span>
                <span class="badge bg-success">128 kbps
                                        </span>
              </div>
              <div class="mb-3 d-none">
                <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Quality</span>
                  <span>%</span>
                </div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: %" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <div class="d-flex gap-2 flex-wrap mb-2">
                <button class="btn btn-sm btn-outline-primary btn-play-stream flex-grow-1" data-stream="/duta2" data-title="RadioBOSS Stream" data-artist="GOYANG BARENG DUO BANDAR - GOYANG BESTIIE" title="Putar Stream"><i class="bi-play-fill me-1"></i> Putar Radio
                                        </button>
                <div class="btn-group" role="group">
                  <a class="btn btn-sm btn-outline-secondary" href="/duta2.m3u" title="M3U Playlist">
                    <i class="bi-music-note-list"></i>
                  </a>
                  <a class="btn btn-sm btn-outline-secondary" href="/duta2.xspf" title="XSPF Playlist">
                    <i class="bi-collection-play"></i>
                  </a>
                </div>
              </div>
              <button class="btn btn-sm btn-outline-secondary w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#detail-7" aria-expanded="false"><i class="bi-info-circle me-1"></i> Detail Stream
                                    </button>
              <div class="collapse" id="detail-7">
                <div class="table-responsive">
                  <table class="table table-sm table-hover table-striped mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="w-25"><i class="bi-broadcast me-2"></i>Stream Name</th>
                        <td>
                          <span class="badge bg-primary">RadioBOSS Stream</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-info-circle me-2"></i>Description</th>
                        <td>Unspecified description</td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-file-earmark-music me-2"></i>Content Type</th>
                        <td>
                          <span class="badge bg-info text-dark">audio/mpeg</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-clock-history me-2"></i>Stream started</th>
                        <td>
                          <span class="text-muted">Sun, 12 Apr 2026 18:42:34 +0700</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-speedometer2 me-2"></i>Bitrate</th>
                        <td>
                          <span class="badge bg-secondary">128 kbps</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-people me-2"></i>Current Listeners</th>
                        <td>
                          <span class="badge bg-success">0</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-graph-up-arrow me-2"></i>Peak Listeners</th>
                        <td>
                          <span class="badge bg-warning text-dark">0</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-tags me-2"></i>Genre</th>
                        <td>
                          <span class="badge rounded-pill bg-info text-dark">Other</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-link-45deg me-2"></i>Stream URL</th>
                        <td>
                          <a href="http://www.example.com" class="text-decoration-none text-primary"><i class="bi-box-arrow-up-right me-1"></i>http://www.example.com</a>
                        </td>
                      </tr>
                      <tr class="table-primary fw-bold">
                        <th scope="row"><i class="bi-music-note-beamed me-2"></i>Now Playing</th>
                        <td class="text-primary">
                          <div class="d-flex align-items-center">
                            <i class="bi-disc me-2"></i>
                            <div>
                              <span>GOYANG BARENG DUO BANDAR - GOYANG BESTIIE</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100 shadow-sm">
            <div class="position-relative">
              <div class="card-img-top bg-dark text-center py-4">
                <i class="bi-broadcast text-white" style="font-size: 2.5rem;"></i>
                <div class="position-absolute top-0 end-0 m-2">
                  <span class="badge bg-success me-1"><i class="bi-people-fill me-1"></i>0
                                                Online
                                            </span>
                  <span class="badge bg-warning text-dark"><i class="bi-graph-up-arrow me-1"></i>0
                                                    Peak
                                                </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title text-truncate">RADIO DUTA 98 FM KOTA METRO</h5>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary">audio/mpeg</span>
                <span class="badge bg-success">128 kbps
                                        </span>
              </div>
              <div class="mb-3 d-none">
                <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Quality</span>
                  <span>%</span>
                </div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: %" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <div class="d-flex gap-2 flex-wrap mb-2">
                <button class="btn btn-sm btn-outline-primary btn-play-stream flex-grow-1" data-stream="/dutafm" data-title="RADIO DUTA 98 FM KOTA METRO" data-artist="Mahligaimu Dari Airmataku - Lestari" title="Putar Stream"><i class="bi-play-fill me-1"></i> Putar Radio
                                        </button>
                <div class="btn-group" role="group">
                  <a class="btn btn-sm btn-outline-secondary" href="/dutafm.m3u" title="M3U Playlist">
                    <i class="bi-music-note-list"></i>
                  </a>
                  <a class="btn btn-sm btn-outline-secondary" href="/dutafm.xspf" title="XSPF Playlist">
                    <i class="bi-collection-play"></i>
                  </a>
                </div>
              </div>
              <button class="btn btn-sm btn-outline-secondary w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#detail-8" aria-expanded="false"><i class="bi-info-circle me-1"></i> Detail Stream
                                    </button>
              <div class="collapse" id="detail-8">
                <div class="table-responsive">
                  <table class="table table-sm table-hover table-striped mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="w-25"><i class="bi-broadcast me-2"></i>Stream Name</th>
                        <td>
                          <span class="badge bg-primary">RADIO DUTA 98 FM KOTA METRO</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-info-circle me-2"></i>Description</th>
                        <td>Semua Dengar Semua Suka</td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-file-earmark-music me-2"></i>Content Type</th>
                        <td>
                          <span class="badge bg-info text-dark">audio/mpeg</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-clock-history me-2"></i>Stream started</th>
                        <td>
                          <span class="text-muted">Sun, 12 Apr 2026 18:32:02 +0700</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-speedometer2 me-2"></i>Bitrate</th>
                        <td>
                          <span class="badge bg-secondary">128 kbps</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-people me-2"></i>Current Listeners</th>
                        <td>
                          <span class="badge bg-success">0</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-graph-up-arrow me-2"></i>Peak Listeners</th>
                        <td>
                          <span class="badge bg-warning text-dark">0</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-tags me-2"></i>Genre</th>
                        <td>
                          <span class="badge rounded-pill bg-info text-dark">Dangdut</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-link-45deg me-2"></i>Stream URL</th>
                        <td>
                          <a href="http://www.radiodutafm.com" class="text-decoration-none text-primary"><i class="bi-box-arrow-up-right me-1"></i>http://www.radiodutafm.com</a>
                        </td>
                      </tr>
                      <tr class="table-primary fw-bold">
                        <th scope="row"><i class="bi-music-note-beamed me-2"></i>Now Playing</th>
                        <td class="text-primary">
                          <div class="d-flex align-items-center">
                            <i class="bi-disc me-2"></i>
                            <div>
                              <span>Mahligaimu Dari Airmataku - Lestari</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100 shadow-sm">
            <div class="position-relative">
              <div class="card-img-top bg-dark text-center py-4">
                <i class="bi-broadcast text-white" style="font-size: 2.5rem;"></i>
                <div class="position-absolute top-0 end-0 m-2">
                  <span class="badge bg-success me-1"><i class="bi-people-fill me-1"></i>0
                                                Online
                                            </span>
                  <span class="badge bg-warning text-dark"><i class="bi-graph-up-arrow me-1"></i>1
                                                    Peak
                                                </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title text-truncate">Radio Gistara Liwa</h5>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary">audio/mpeg</span>
                <span class="badge bg-success">128 kbps
                                        </span>
              </div>
              <div class="mb-3 d-none">
                <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Quality</span>
                  <span>%</span>
                </div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: %" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <div class="d-flex gap-2 flex-wrap mb-2">
                <button class="btn btn-sm btn-outline-primary btn-play-stream flex-grow-1" data-stream="/gistarafm" data-title="Radio Gistara Liwa" data-artist="Salwa - Bang Yusup" title="Putar Stream"><i class="bi-play-fill me-1"></i> Putar Radio
                                        </button>
                <div class="btn-group" role="group">
                  <a class="btn btn-sm btn-outline-secondary" href="/gistarafm.m3u" title="M3U Playlist">
                    <i class="bi-music-note-list"></i>
                  </a>
                  <a class="btn btn-sm btn-outline-secondary" href="/gistarafm.xspf" title="XSPF Playlist">
                    <i class="bi-collection-play"></i>
                  </a>
                </div>
              </div>
              <button class="btn btn-sm btn-outline-secondary w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#detail-9" aria-expanded="false"><i class="bi-info-circle me-1"></i> Detail Stream
                                    </button>
              <div class="collapse" id="detail-9">
                <div class="table-responsive">
                  <table class="table table-sm table-hover table-striped mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="w-25"><i class="bi-broadcast me-2"></i>Stream Name</th>
                        <td>
                          <span class="badge bg-primary">Radio Gistara Liwa</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-info-circle me-2"></i>Description</th>
                        <td>Lampung</td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-file-earmark-music me-2"></i>Content Type</th>
                        <td>
                          <span class="badge bg-info text-dark">audio/mpeg</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-clock-history me-2"></i>Stream started</th>
                        <td>
                          <span class="text-muted">Sun, 12 Apr 2026 16:41:01 +0700</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-speedometer2 me-2"></i>Bitrate</th>
                        <td>
                          <span class="badge bg-secondary">128 kbps</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-people me-2"></i>Current Listeners</th>
                        <td>
                          <span class="badge bg-success">0</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-graph-up-arrow me-2"></i>Peak Listeners</th>
                        <td>
                          <span class="badge bg-warning text-dark">1</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-tags me-2"></i>Genre</th>
                        <td>
                          <span class="badge rounded-pill bg-info text-dark">multi segmen</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-link-45deg me-2"></i>Stream URL</th>
                        <td>
                          <a href="http://www.radiotriramafm.net" class="text-decoration-none text-primary"><i class="bi-box-arrow-up-right me-1"></i>http://www.radiotriramafm.net</a>
                        </td>
                      </tr>
                      <tr class="table-primary fw-bold">
                        <th scope="row"><i class="bi-music-note-beamed me-2"></i>Now Playing</th>
                        <td class="text-primary">
                          <div class="d-flex align-items-center">
                            <i class="bi-disc me-2"></i>
                            <div>
                              <span>Salwa - Bang Yusup</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100 shadow-sm">
            <div class="position-relative">
              <div class="card-img-top bg-dark text-center py-4">
                <i class="bi-broadcast text-white" style="font-size: 2.5rem;"></i>
                <div class="position-absolute top-0 end-0 m-2">
                  <span class="badge bg-success me-1"><i class="bi-people-fill me-1"></i>0
                                                Online
                                            </span>
                  <span class="badge bg-warning text-dark"><i class="bi-graph-up-arrow me-1"></i>0
                                                    Peak
                                                </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title text-truncate">Radio Kejora FM</h5>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary">audio/mpeg</span>
                <span class="badge bg-success">128 kbps
                                        </span>
              </div>
              <div class="mb-3 d-none">
                <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Quality</span>
                  <span>%</span>
                </div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: %" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <div class="d-flex gap-2 flex-wrap mb-2">
                <button class="btn btn-sm btn-outline-primary btn-play-stream flex-grow-1" data-stream="/kejorafm" data-title="Radio Kejora FM" data-artist="ANGIN KANGEN" title="Putar Stream"><i class="bi-play-fill me-1"></i> Putar Radio
                                        </button>
                <div class="btn-group" role="group">
                  <a class="btn btn-sm btn-outline-secondary" href="/kejorafm.m3u" title="M3U Playlist">
                    <i class="bi-music-note-list"></i>
                  </a>
                  <a class="btn btn-sm btn-outline-secondary" href="/kejorafm.xspf" title="XSPF Playlist">
                    <i class="bi-collection-play"></i>
                  </a>
                </div>
              </div>
              <button class="btn btn-sm btn-outline-secondary w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#detail-10" aria-expanded="false"><i class="bi-info-circle me-1"></i> Detail Stream
                                    </button>
              <div class="collapse" id="detail-10">
                <div class="table-responsive">
                  <table class="table table-sm table-hover table-striped mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="w-25"><i class="bi-broadcast me-2"></i>Stream Name</th>
                        <td>
                          <span class="badge bg-primary">Radio Kejora FM</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-info-circle me-2"></i>Description</th>
                        <td>Radio Kejora FM Tuban</td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-file-earmark-music me-2"></i>Content Type</th>
                        <td>
                          <span class="badge bg-info text-dark">audio/mpeg</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-clock-history me-2"></i>Stream started</th>
                        <td>
                          <span class="text-muted">Sun, 12 Apr 2026 16:31:51 +0700</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-speedometer2 me-2"></i>Bitrate</th>
                        <td>
                          <span class="badge bg-secondary">128 kbps</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-people me-2"></i>Current Listeners</th>
                        <td>
                          <span class="badge bg-success">0</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-graph-up-arrow me-2"></i>Peak Listeners</th>
                        <td>
                          <span class="badge bg-warning text-dark">0</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-tags me-2"></i>Genre</th>
                        <td>
                          <span class="badge rounded-pill bg-info text-dark">various</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row"><i class="bi-link-45deg me-2"></i>Stream URL</th>
                        <td>
                          <a href="kejorafm" class="text-decoration-none text-primary"><i class="bi-box-arrow-up-right me-1"></i>kejorafm</a>
                        </td>
                      </tr>
                      <tr class="table-primary fw-bold">
                        <th scope="row"><i class="bi-music-note-beamed me-2"></i>Now Playing</th>
                        <td class="text-primary">
                          <div class="d-flex align-items-center">
                            <i class="bi-disc me-2"></i>
                            <div>
                              <span>ANGIN KANGEN</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer class="mt-5 text-center text-muted">
        <p class="small">Support icecast development at <a href="https://www.icecast.org/" class="text-decoration-none">www.icecast.org</a></p>
        <p class="small">
          <span class="me-2">Powered by</span>
          <a href="https://dawnwebdev.com" target="_blank" class="text-decoration-none me-2"><i class="bi-vector-pen text-primary"></i> DAWN WEBDEV
                </a>
          <a href="https://getbootstrap.com/" target="_blank" class="text-decoration-none me-2"><i class="bi-bootstrap-fill text-primary"></i> Bootstrap 5
                </a>
          <a href="https://icons.getbootstrap.com/" target="_blank" class="text-decoration-none"><i class="bi-info-circle text-primary"></i> Bootstrap Icons
                </a>
        </p>
      </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <div class="now-playing-bar" id="nowPlayingBar">
      <div class="now-playing-info">
        <div class="now-playing-cover" id="nowPlayingCover"></div>
        <div class="now-playing-details">
          <p class="now-playing-title" id="nowPlayingTitle">Tidak ada lagu yang diputar</p>
          <p class="now-playing-artist" id="nowPlayingArtist"></p>
        </div>
      </div>
      <div class="player-controls">
        <div class="control-buttons">
          <button class="btn play-pause-btn" id="playPauseBtn" title="Play/Pause">
            <i class="bi-play-fill" id="playPauseIcon"></i>
          </button>
          <button class="btn" id="stopBtn" title="Stop">
            <i class="bi-stop-fill"></i>
          </button>
        </div>
        <div class="progress-container">
          <span class="progress-time" id="currentTime">0:00</span>
          <div class="progress-bar-container" id="progressBarContainer">
            <div class="progress-bar" id="progressBar"></div>
          </div>
          <span class="progress-time" id="duration">0:00</span>
        </div>
      </div>
      <div class="volume-controls">
        <i class="bi-volume-up text-muted me-2"></i>
        <div class="volume-slider">
          <input type="range" class="form-range" min="0" max="1" step="0.1" value="0.8" id="volumeSlider" />
        </div>
      </div>
    </div>
    <audio id="radioPlayer" preload="none"></audio>
    <script src="https://mutiaraberlian.id/assets/js/player.js?v=2.5"></script>
  </body>
</html>
