<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflJJaNgk/www-widgetapi.js"></script>
  <script src="https://www.youtube.com/iframe_api"></script>
</head>

<body style="display: none;">
  <main>
    <div id="header">
      
      <div id="btn-abrir-modal-music" class="div-music">
        <img src="img/icon-music.png" class="music-atual" class="music">
      </div>


      <div class="col-header-1">

        <div class="div-logo">
          <img src="img/spotify-logo.png" alt="logo">
          <h1>SPOTIFY</h1>
        </div>

        <!-- <a class="btn-close" id="close-nui">
          <img src="img/icon-close.svg" class="close">
        </a> -->
        
      </div>

    </div>
    <div id="home">
      <div style=" overflow-y: auto;">
        <p style="color: white; margin-left: 0.5rem;">Playlists do Momento</p>
        <div class="grid-playlists"></div>
        <p style="color: white; margin-left: 0.5rem;">Músicas do Momento</p>
        <div class="grid-musics"></div>
      </div>



      <div id="music-playing">
        <div id="music-playing-info">

          <div id="music-playing-data">
            <img class="album-principal"
              src="https://cdn.discordapp.com/attachments/885866388277829683/895705130823991296/PerfilCruz.png?ex=65e9e768&is=65d77268&hm=46bdd92dbc01797645d1775e4446742112349282f9a66d4249644cb92df558aa&">
      
              <div id="music-playing-name">
              <p class="music-info-name"></p>
              <p class="music-author"></p>
            </div>

          </div>

          <div id="music-playing-controls">

            <div class="div-volume">
              <input class="volume" type="range" value="50" min="0" max="100" id="range" />
            </div>
            <!-- <div class="div-volume">
              <input type="range" min="0" max="100" value="50" step="1" class="slider volume" id="volume">
            </div> -->
            <i class="fa-solid fa-volume-low" style="color: #ffffff;"></i>
            <i id="heart-music1234" class="fa-regular fa-heart favorito" style="color: #ffffff"></i>
            <i id="play" class="fa-solid fa-pause" style="color: #ffffff;"></i>
          </div>
        </div>
        <div class="music-time" style="display:flex;">
          <div class="bar-total">
            <div class="bar-tempo"></div>
          </div>
          <div style="display: flex; justify-content: space-between; width: 94%;">
            <p class="tempo-atual">02:24</p>
            <p class="tempo-musica">04:43</p>
          </div>
        </div>
      </div>
    </div>

    <div id="footer" class="footer">
      <div id="abrir-tab-home" class="footer-box menu-ativo">
        <i class="fa-solid fa-house"></i>
        <!-- <p style="font-size: small;">Home</p> -->
      </div>
      <div id="abrir-tab-pesquisar" class="footer-box">
        <i class="fa-solid fa-magnifying-glass"></i>
        <!-- <p style="font-size: small;">Search</p> -->
        </a>
      </div>
      <div id="abrir-tab-favoritos" class="footer-box">
        <i class="fa-solid fa-heart"></i>
        <!-- <p style="font-size: small;">Favorites</p> -->
      </div>
    </div>



    <div class="modal-container" id="modal-musica">
      <div class="modal">
        <a href="#" id="btn-close-modal">
          <i class="fa-solid fa-chevron-down" style="color: #464646;"></i>
        </a>
        <div class="info-album">

          <!-- <div class="div-volume">
            <input type="range" min="0" max="100" value="50" step="1" class="slider volume" id="volume">
          </div> -->
          <img class="album-principal">
          <p class="nome-musica"></p>
          <h2 class="author-musica"></h2>
        </div>

        <div class="music-time" style="display:flex;">

          <div class="bar-total">
            <div class="bar-tempo"></div>
          </div>

          <p class="tempo-atual">02:24</p>
          <p class="tempo-musica">04:43</p>
        </div>

        <div class="music-manager">
          <!-- <a class="mudar-volume-changevol" id="music-volume"></a> -->

          <div class="music-control">
            <i class="fa-solid fa-backward-step fa-xl" style="color: #ffffff;"></i>
            <div class="music-control-icon"><i class="fa-solid fa-play fa-xl" style="color: #000000;"></i></div>
            <i class="fa-solid fa-forward-step fa-xl" style="color: #ffffff; "></i>
            </a>
          </div>

          <!-- <div id='favoritar-musica' class="favoritar123 favoritar">
            <i id="heart-music123" class="fa-regular fa-heart favorite"></i>
          </div> -->

        </div>
      </div>

    </div>


    <div id="favoritos">
      <div style="overflow-y: auto;">
        <p style="color: white; margin-left: 0.5rem;">Músicas curtidas</p>

        <div id="favoritos-content">

        </div>
      </div>
      <div id="no-results-favoritos" class="favoritos-ativo">
        <h1>Não há nenhuma música favoritada!</h1>
      </div>
    </div>




    <div id="search">
      <p style="color: white; margin-left: 1rem; font-size: 1.2rem; font-weight: bold; padding-top: 1rem;">Buscar</p>
      <div class="searchbar">
          <img src="img/icon-search.png" width="20" height="20" class="icon-search">
          <input class="input-pesquisar" placeholder="Pesquisar ...">
      </div>
      <div id="list-pesquisa"></div>
      <div id="no-results" class="pesquisa-ativo">
          <h1>O que você deseja ouvir hoje?</h1>
      </div>
      <div id="loading" class="carregando">
          <div id="loading-bar-spinner" class="spinner">
              <div class="spinner-icon"></div>
          </div>
          <p>Carregando...</p>
      </div>
  </div>

    <div class="modal-container" id="modal-playlist123">
      <div class="modal rolagem">
        <a href="#" id="btn-close-modal-playlist" class="fechar-modal-playlist">
          <img src="img/icon-close-modal.png" class="img-close-modal">
        </a>

        <div class="img-album">
          <img class="img-playlist" alt="">

          <!-- <a id="btn-play-playlist">
            <img src="img/icon-play-black.png" alt="">
          </a> -->

        </div>

        <div class="content-title">
          <h1 class="title-playlist"></h1>
          <h2 class="author-playlist"></h2>
        </div>

        <div class="playlist-musics">
        </div>
      </div>
    </div>
  </main>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
	<script src="./scripts/config.js" type="text/javascript"></script>
	<script src="./scripts/functions.js" type="text/javascript"></script>
	<script src="./scripts/SoundPlayer.js" type="text/javascript"></script>
	<script src="./scripts/listener.js" type="text/javascript"></script>
</body>

</html>