Sindbad~EG File Manager

<?php 
function getAdByKey($mysqli, $key) {
    $stmt = $mysqli->prepare("SELECT * FROM ads WHERE ad_key = ?  AND is_enabled = 1");
    $stmt->bind_param("s", $key);
    $stmt->execute();
    return $stmt->get_result()->fetch_assoc();
}
$adKeys = [
    'left_hero_ad' => 'ad1',
    'right_hero_ad' => 'ad2',
    'bottom_left_ad' => 'ad3',
    'bottom_right_ad' => 'ad4'
];

$leftAd = getAdByKey($mysqli, $adKeys['left_hero_ad']);
$rightAd = getAdByKey($mysqli, $adKeys['right_hero_ad']);
$bottomLeftAd = getAdByKey($mysqli, $adKeys['bottom_left_ad']);
$bottomRightAd = getAdByKey($mysqli, $adKeys['bottom_right_ad']);

?>
<style>
.live-player-container.sticky-top {
  width: 90vw; /* 90% of the screen width */
  max-width: 90vw;
  margin: auto;
  padding: 0 30px;
  background-color: rgba(0, 0, 0, 0.5); /* Transparent background */
  border-radius: 20px; /* 20px border-radius */
  position: fixed;
  top: 10px; /* 10px from the top of the screen */
    left: 0;
    right: 0;
  transform: translateX(-50%); /* Offset by half of the element's width to center it */
  border-bottom: 2px solid #222;
  backdrop-filter: blur(10px); /* Blur effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}
</style>
 

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

      <!-- LEFT HERO AD -->
      <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">
        <?php if (!empty($leftAd) && $leftAd['is_enabled']): ?>
          <a href="<?= htmlspecialchars($leftAd['url']) ?>" target="_blank" rel="noopener noreferrer">
            <img src="img/ads/<?= htmlspecialchars($leftAd['image']) ?>" class="img-fluid w-100 my-4 brr20" alt="<?= htmlspecialchars($leftAd['ad_key']) ?>">
          </a>
        <?php endif; ?>
      </div>

      <!-- CENTER SECTION WITH PLAYER -->
      <div class="col-md-8 order-1 order-md-2 my-auto">
        <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
                $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';
                }
                ?>

                <h2 id="trackTitle" data-aos="fade-right" data-aos-delay="400" data-aos-duration="800"><?= $title ?></h2>
                <p id="trackArtist" data-aos="fade-right" data-aos-delay="500" data-aos-duration="800"><?= $artist ?></p>

                <div class="live-player-container transparent-player mb-0" id="livePlayer" data-aos="fade-up" data-aos-delay="600" data-aos-duration="800"> 
                  <audio id="liveAudio" autoplay>
                    <source src="https://jam-on.ice.infomaniak.ch/jam-on-128.mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                  </audio>

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

                  <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-up"></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="1" orient="vertical" class="d-none d-sm-block" />

                  </div>
                </div>

                 
<a href="live.php"
   onclick="
       localStorage.removeItem('playerManuallyClosed');
       
       const localAudioPlayer = document.getElementById('liveAudio');
       if (localAudioPlayer) {
           localAudioPlayer.pause();
       }
       
       window.open('live.php', 'ListenLiveWindow', 'width=450,height=110,popup=yes,toolbar=no,location=no,menubar=no,status=no,resizable=yes,scrollbars=no');
       return false;
   "
   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>

            <!-- Album Art -->
            <div class="col-md-6 my-auto" data-aos="fade-left" data-aos-delay="500" data-aos-duration="800">
              <div class="image-tint"></div>
              <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 brr20 shadow" />
                <div class="sound-waves">
                  <span></span><span></span><span></span><span></span><span></span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <!-- RIGHT HERO AD -->
      <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">
        <?php if (!empty($rightAd) && $rightAd['is_enabled']): ?>
          <a href="<?= htmlspecialchars($rightAd['url']) ?>" target="_blank" rel="noopener noreferrer">
            <img src="img/ads/<?= htmlspecialchars($rightAd['image']) ?>" class="img-fluid w-100 my-4  brr20" alt="<?= htmlspecialchars($rightAd['ad_key']) ?>">
          </a>
        <?php endif; ?>
      </div>

    </div>
  </div>
</section>