<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Loading Screen</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loading-screen-wrapper">
        <video autoplay muted loop id="background-video">
            <source src="../assets/background.mp4" type="video/mp4">
        </video>       

        <div class="instruction-text" id="instruction-text"></div>

        <div class="logo">
            <img id="logo-img" src="" alt="Server Logo">
        </div>

        <div class="progress-bar-container">
            <div class="progress-bar" id="progressbar">
                <span id="progress-bar-text"></span>
            </div>
        </div>

        <div class="top-text" id="topText"></div>

        <div class="icons-container">
            <div class="icon" id="discord-icon">
                <img id="discord-img" src="" alt="Discord Icon">
            </div>
            <div class="text" id="discord-text">
                <p id="discord-link"></p>
            </div>
            <div class="icon" id="youtube-icon">
                <img id="youtube-img" src="" alt="YouTube Icon">
            </div>
            <div class="text" id="youtube-text">
                <p id="youtube-name"></p>
            </div>
        </div>
        <audio id="leson" autoplay="true" hidden="true" loop="true"></audio>
        <script type="module" src="script.js"></script>
        <script src="music.js"></script>
    </div>
</body>
</html>