Sindbad~EG File Manager

<section class="hero--section"> 
  <div class="container-fluid">
    <div class="row g-2 gx-md-2 justify-content-between">

      <!-- Left Column (Plakat) -->
      <div class="col-md-2 col-6 order-2 order-md-1 my-auto" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
        <a href="https://i45.ch/" target="_blank" rel="noopener noreferrer">
          <img src="img/Monatsplakat_Juni.png" class="img-fluid w-100" alt="Monatsplakat Juni">
        </a>
      </div>

      <!-- Center Column (Hero Card) -->
      <div class="col-md-8 order-1 order-md-2 my-auto" data-aos="fade-up" data-aos-delay="300" data-aos-duration="800">
        <div class="hero-card">
          <div class="row g-2 g-md-3 align-items-center justify-content-between">

            <div class="col-md-5">
              <div class="hero-text text-white">
                <?php
                // JSON source
                $jsonUrl = 'https://www.jam-on.ch/tracklist/currentlyplaying.json';

                $title = 'Unknown Title';
                $artist = 'Unknown Artist';

                $response = @file_get_contents($jsonUrl);
                if ($response !== false) {
                    $data = json_decode($response, true);
                    if (!empty($data['track'])) {
                        $title = htmlspecialchars($data['track']);
                    }
                    if (!empty($data['artist'])) {
                        $artist = htmlspecialchars($data['artist']);
                    }
                } else {
                    $title = 'Error loading title';
                    $artist = 'Error loading artist';
                }
                ?>

                <!-- Track info -->
                <h2 id="track-title" data-aos="fade-right" data-aos-delay="400" data-aos-duration="800"><?= $title ?></h2>
                <p id="track-artist" data-aos="fade-right" data-aos-delay="500" data-aos-duration="800"><?= $artist ?></p>

                <div class="live-player-container transparent-player" id="livePlayer" data-aos="fade-up" data-aos-delay="600" data-aos-duration="800"> 

                  <!-- Audio -->
                  <audio id="liveAudio" autoplay muted>
                    <source src="https://jam-on.ice.infomaniak.ch/jam-on-128.mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                  </audio>

                  <!-- Time Bar -->
                  <input type="range" id="timeBar" min="0" max="100" value="0" step="1" disabled />

                  <!-- Controls -->
                  <div class="bottom-controls d-flex align-items-center justify-content-between">
                    <div class="left-controls d-flex align-items-center gap-2">
                      <button id="playPauseBtn"><i class="fas fa-play"></i></button>
                      <button id="muteBtn"><i class="fas fa-volume-mute"></i></button>

                      <span id="currentTime" style="padding-left: 10px;">00:00</span>

                      <div class="now-playing-info" style="font-size: 13px; padding-left: 8px;">
                        <strong><?= $title ?></strong> <em>by <?= $artist ?></em>
                      </div>
                    </div> 

                    <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.5" orient="vertical" />
                  </div>
                </div>

                <br><br> 
                <a href="live.php" target="_blank" class="explore-btn mt-3" data-aos="fade-right" data-aos-delay="800" data-aos-duration="800" rel="noopener noreferrer">
                  Listen Live
                </a>
              </div>
            </div>

            <div class="col-md-6 my-auto" data-aos="fade-left" data-aos-delay="500" data-aos-duration="800">
              <div class="hero-image p-3 p-md-5">
                <img id="trackImage" src="https://www.jam-on.ch/tracklist/art-00.jpg" alt="Currently playing track art" class="img-fluid w-100 rounded shadow" />
                <div class="sound-waves">
                  <span></span><span></span><span></span><span></span><span></span>
                </div>
              </div>
            </div>

          </div> <!-- inner row -->
        </div> <!-- hero-card -->
      </div> <!-- col-md-8 -->

      <!-- Right Column (Shop) -->
      <div class="col-md-2 col-6 order-3 order-md-3 my-auto" data-aos="fade-up" data-aos-delay="400" data-aos-duration="800">
        <a href="https://jamonradio.myshopify.com/" target="_blank" rel="noopener noreferrer">
          <img src="img/Shop_v2.png" class="img-fluid w-100" alt="Jam On Shop">
        </a>
      </div>

    </div> <!-- row -->
  </div> <!-- container-fluid -->
</section>