<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Loading Screen SynaliaRP</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const musicList = [
          'music/load1.mp3',
          'music/load2.mp3',
          'music/load3.mp3',
          'music/load4.mp3',
        ];
        
        const randomIndex = Math.floor(Math.random() * musicList.length);
        const randomMusic = musicList[randomIndex];
        
        const audioElement = document.getElementById('music');
        audioElement.src = randomMusic;
      });
    </script>
    <audio id="music" src="" autoplay="true" hidden="true" loop="true"></audio>

    <div class="General">
      <div id="player-control-container">
        <div id="player-control">
          <img id="volume-icon" src="./images/volume-low.png" alt="Volume Icon" onclick="rangeAffect(0)">
          <input id="volume-slider" type="range" min="0" max="1" step=".05" value="0.1" onmousemove="rangeAffect(this.value)">
        </div>
      </div>
  
      <div class="titleBox">
        <img src="./images/logo.png" alt="" class="Logo" />
        <div class="titleTextBox">
          <h2 class="titleText">SynaliaRP</h2>
          <p class="titleSubText">BIENVENUE</p>
        </div>
      </div>
      <div class="bottomSide">
        <div class="infoBox">
          <h2 class="infoText">SynaliaRP RolePlay!</h2>
          <p class="infoSubText">
            Bienvenue à vous sur SynaliaRP Nous espérons que cette version vous plaira.
            Notre équipe est dévouée à rendre votre expérience de jeu inoubliable.
            Profitez pleinement de votre aventure sur SynaliaRP. Bon jeu à tous !
          </p>
        </div>
        <div class="buttonSide">
          <div class="buttonBox" onclick="window.invokeNative('openUrl', 'https:\/\/discord.gg/synaliarp')">
            <div class="buttonLine"></div>
            <img src="./images/discord.png" alt="Discord" class="buttonImg" />
            <h2 class="buttonText" style="text-transform: uppercase;">DISCORD</h2>
            <p class="buttonSubText">discord.gg/synaliarp</p>
          </div>
          <div class="buttonBox" onclick="window.invokeNative('openUrl', 'https:\/\/store.synaliarp.fr')">
            <div class="buttonLine"></div>
            <img src="./images/market.png" alt="Boutique" class="buttonImg" />
            <h2 class="buttonText" style="text-transform: uppercase;">BOUTIQUE</h2>
            <p class="buttonSubText">store.synaliarp.fr</p>
          </div>
          <div class="buttonBox" onclick="window.invokeNative('openUrl', 'https:\/\/rules.synaliarp.fr')">
            <div class="buttonLine"></div>
            <img src="./images/rules.png" alt="Règles" class="buttonImg" />
            <h2 class="buttonText" style="text-transform: uppercase;">règlement</h2>
            <p class="buttonSubText">rules.synaliarp.fr</p>
          </div>
          <div class="buttonBox" onclick="window.invokeNative('openUrl', 'https:\/\/tiktok.com/@synaliarp0')">
            <div class="buttonLine"></div>
            <img src="./images/tiktok.png" alt="TikTok" class="buttonImg" />
            <h2 class="buttonText"  style="text-transform: uppercase;">TIKTOK</h2>
            <p class="buttonSubText">tiktok.com/@synaliarp0</p>
          </div>
        </div>
      </div>
      <div class="loadSide">
        <div class="loadTextBox">
          <div class="loadText">
            <div class="loadingProgress">
              <div class="spinner-10"></div>
            </div>
            Loading!
          </div>
          <p class="loadSubText" id="stageloading">Chargement des fivem assest...</p>
        </div>
        <div class="loadProgress">
          <div class="loadBG">
            <div class="load"></div>
            <div class="loadLine"></div>
          </div>
        </div>
      </div>
      </div>
      <img src="./images/leftBottomEffect.png" alt="" class="leftBottomEffect" />
      <img src="./images/leftTopEffect.png" alt="" class="leftTopEffect" />
      <img src="./images/rightopEffect.png" alt="" class="rightTopEffect" />
      <img src="./images/character.png" class="character" />
      <img src="./images/rightEffect.png" alt="" class="rightEffect" />
      <img src="./images/bg.png" alt="" class="Bg" />
    </div>
    <script src="./scripts/script.js"></script>
  </body>
</html>
