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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Liberta a tropa...</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="icon" href="images/heart.ico" type="image/png">
    <script src="js/main.js" defer></script>
    
    <script>
        function audioPlay() {
            var audio = document.getElementById("audio");
            audio.volume = 0.1;
            audio.currentTime = 0;
            audio.play();
        }
        function showUsers() {
            const crown = document.querySelector('.crown');
            crown.classList.add('show-crown'); 
        }
    </script>
</head>

<body>
    <audio loop preload="auto" id="audio">
        <source src="media/speed.mp3" type="audio/mpeg">
    </audio>

    <input type="checkbox" autocomplete="off" id="overlay-toggle">
    <div class="overlay fullscreen" onclick="audioPlay(); showUsers();">
        <label for="overlay-toggle">
            <span class="overlayhover hover" style="font-family: monospace; font-size: 0.6em;">
                Era Deus tirando os falso tudo da jogada... <img src="images/hands.png" alt="Emoji" style="width: 20px; height: 20px; vertical-align: middle;">
            </span>
            
        </label>
    </div>

    <div class="video-overlay">
        <video autoplay muted loop>
            <source src="media/u.mp4" type="video/mp4">
            Seu navegador não suporta o elemento de vídeo.
        </video>
    </div>

    <div class="discord-profile">
        <div class="profile animate__animated animate__fadeInUp animate__fast">
            <a href="https://discord.com/users/351787390030970880" target="_blank">
                <div class="pfp">
                    <img class="profile-img" src="images/ferreira.png" alt="Avatar do usuário">
                </div>
            </a>
            <div class="nickr">FerreiraXT</div>
            <div class="subnick">ferreiraxt01</div>
            <div class="badges">
                <img src="images/boost.gif" alt="Booster Badge" class="badge">
                <img src="images/nitro.gif" alt="Nitro Badge" class="badge">
            </div>
        </div>
    </div>

    <div class="discord-profile">
        <div class="profile animate__animated animate__fadeInUp animate__fast">
            <a href="https://discord.com/users/555172139083497472" target="_blank">
                <div class="pfp">
                    <img class="profile-img" src="images/krozz.png" alt="Avatar do usuário">
                </div>
            </a>
            <div class="nickr">Krozz</div>
            <div class="subnick">krozzada</div>
            <div class="badges">
                <img src="images/boost.gif" alt="Booster Badge" class="badge">
                <img src="images/nitro.gif" alt="Nitro Badge" class="badge">
            </div>
        </div>
    </div>

    <div class="discord-profile">
        <div class="profile animate__animated animate__fadeInUp animate__fast">
            <a href="https://discord.com/users/896514062714822696" target="_blank">
                <div class="pfp">
                    <img class="profile-img" src="images/redz.png" alt="Avatar do usuário">
                    <img class="crown" src="images/crown.gif" alt="Dono" />
                </div>
            </a>
            <div class="nickr">REDZ</div>
            <div class="subnick">onlyredz</div>
            <div class="badges">
                <img src="images/dev.png" alt="Dev Badge" class="badge">
                <img src="images/boost.gif" alt="Booster Badge" class="badge">
                <img src="images/nitro.gif" alt="Nitro Badge" class="badge">
            </div>
        </div>
    </div>

    <div class="discord-profile">
        <div class="profile animate__animated animate__fadeInUp animate__fast">
            <a href="1030395307361579008" target="_blank">
                <div class="pfp">
                    <img class="profile-img" src="images/lx.png" alt="Avatar do usuário">
                </div>
            </a>
            <div class="nickr">lx_55</div>
            <div class="subnick">lx_55</div>
            <div class="badges">
                <img src="images/boost.gif" alt="Booster Badge" class="badge">
                <img src="images/nitro.gif" alt="Nitro Badge" class="badge">
            </div>
        </div>
    </div>

    <div class="discord-profile">
        <div class="profile animate__animated animate__fadeInUp animate__fast">
            <a href="https://discord.com/users/1030395307361579008" target="_blank">
                <div class="pfp">
                    <img class="profile-img" src="images/rick.png" alt="Avatar do usuário">
                </div>
            </a>
            <div class="nickr">rickdupina</div>
            <div class="subnick">rickdupina</div>
            <div class="badges">
                <img src="images/boost.gif" alt="Booster Badge" class="badge">
                <img src="images/nitro.gif" alt="Nitro Badge" class="badge">
            </div>
        </div>
    </div>
</body>

</html>
