<!DOCTYPE html>
<html lang="pl-PL">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylowy Odtwarzacz</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/068ba1c1f8.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.6.0/css/all.css">
    <script src="main.js" defer></script>
</head>
<body>
    <!-- Filmik Background -->
    <div id="FilmikBlocker"></div>
    <div id="FilmikBlur"></div>
    <div id="Filmik"></div>

    <!-- Główna zawartość -->
    <div class="root-container">
        <div class="remember">
            <strong class="remember-title">Zapamiętaj!</strong>
            <p class="remember-text"></p>
        </div>        

        <!-- Sekcja członków zespołu -->
        <div class="staff"></div>

        <!-- Logo -->
        <div class="center">
            <div class="ripple-effect"></div>
            <img src="./img/logo.png" alt="Logo serwera">
            <strong player-username></strong>
        </div>

        <!-- Przycisk ukrywania odtwarzacza -->
<!--        <button id="toggle-player"class="toggle-button">Ukryj Odtwarzacz</button>
        <button id="toggle-staff" class="toggle-button">Ukryj Staff</button> -->

        <!-- Odtwarzacz muzyczny -->
        <div class="player">
          <!-- Informacje o utworze -->
          <div class="song-info">
              <img class="song-img" src="./img/okladka1.jpg" alt="Okładka utworu">
              <div class="details">
                  <strong class="song-title">PRZEKAZ MYŚLI</strong>
                  <p class="song-artist">Żabson</p>
              </div>
          </div>
          <!-- Przyciski sterowania -->
          <div class="controls">
              <button class="player-button" unskip-button><i class="fa-solid fa-backward"></i></button>
              <button class="player-button play-pause" play-pause-button><i class="fa-solid fa-pause"></i></button>
              <button class="player-button" skip-button><i class="fa-solid fa-forward"></i></button>
          </div>
          <!-- Pasek postępu -->
          <div class="progress">
              <span class="current-time">0:09</span>
              <div class="progress-bar">
                  <div class="progress-fill"></div>
              </div>
              <span class="duration">2:29</span>
          </div>
        </div>    

        <!-- Informacja o twórcy -->
        <div class="created-by">
            <div>
              Created by 
              <a href="https://grubyinformatyk.pl" target="_blank" rel="noopener noreferrer">
                grubyinformatyk
              </a>
            </div>
        </div>  
    </div>    
</body>
</html>