<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="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="js/script.js"></script>
    <title>by valentinyml</title>
</head>
<body>
    <main>
        <div class="main__ffa-location-container" style="display: none;">
            <div class="main__content-header">
                <div class="main__content-header-text">
                    <p class="main__content-header-small-text">//RevolutionV RolePlay</p>
                    <p class="main__content-header-big-text">FFA Locations</p>
                </div>
                <div class="main__content-header-spheres">
                    <div class="main__content-header-sphere-1"></div>
                    <div class="main__content-header-sphere-2"></div>
                    <div class="main__content-header-sphere-3"></div>
                    <div class="main__content-header-sphere-4"></div>
                    <div class="main__content-header-sphere-5"></div>
                    <div class="main__content-header-sphere-6"></div>
                </div>
            </div>

            <div class="main__ffa-location-big-container">
                <div class="main__ffa-location-big-grid" id="mainZone" style="display: grid;"></div>
                <div class="main__ffa-location-big-grid" id="trainingZone" style="display: none;"></div>
                <div class="main__ffa-location-big-grid" id="privateZone" style="display: none;"></div>

                <div class="main__ffa-location-button-flex">
                    <div class="main__ffa-location-main-button">
                        <p>Main</p>
                    </div>
                    <div class="main__ffa-location-training-button">
                        <p>Training</p>
                    </div>
                    <div class="main__ffa-location-private-button">
                        <p>Private</p>
                    </div>
                    <div class="main__ffa-location-statistic-button">
                        <p>Statistics</p>
                    </div>
                </div>
            </div>

            <div class="main__top-escape-button">
                <div class="main__top-escape-button-circle">
                    <p>ESC</p>
                </div>
            </div>

            <div class="main__ffa-location-right-information">
                <div class="main__ffa-location-right-grid">
                    <!-- <div class="main__ffa-location-right-icon">
                        <img src="img/warning.svg" alt="">
                    </div> -->
                    <div class="main__ffa-location-right-text">
                        <p class="main__ffa-location-right-header">Information!</p>
                        <p class="main__ffa-location-right-text" id="information">Trete gegen andere Spieler an und schaut wer der beste Schütze der Stadt ist.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="main__ffa-statistic-container" style="display: none;">
            <div class="main__content-header">
                <div class="main__content-header-text">
                    <p class="main__content-header-small-text">//RevolutionV RolePlay</p>
                    <p class="main__content-header-big-text">FFA Locations</p>
                </div>
                <div class="main__content-header-spheres">
                    <div class="main__content-header-sphere-1"></div>
                    <div class="main__content-header-sphere-2"></div>
                    <div class="main__content-header-sphere-3"></div>
                    <div class="main__content-header-sphere-4"></div>
                    <div class="main__content-header-sphere-5"></div>
                    <div class="main__content-header-sphere-6"></div>
                </div>

                <div class="main__top-escape-button">
                    <div class="main__top-escape-button-circle">
                        <p>ESC</p>
                    </div>
                </div>
    
                <div class="main__ffa-location-right-information">
                    <div class="main__ffa-location-right-grid">
                        <!-- <div class="main__ffa-location-right-icon">
                            <img src="img/warning.svg" alt="">
                        </div> -->
                        <div class="main__ffa-location-right-text">
                            <p class="main__ffa-location-right-header">Information!</p>
                            <p class="main__ffa-location-right-text">Top Schützen des Servers</p>
                        </div>
                    </div>
                </div>

                <div class="main__ffa-statistic-scroll-container"></div>

                <div class="main__ffa-location-button-flex-2">
                    <div class="main__ffa-location-main-button">
                        <p>Main</p>
                    </div>
                    <div class="main__ffa-location-training-button">
                        <p>Training</p>
                    </div>
                    <div class="main__ffa-location-private-button">
                        <p>Private</p>
                    </div>
                    <div class="main__ffa-location-statistic-button">
                        <p>Statistiken</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="main__ffa-hud-container" style="display: none;">
            <div class="main__ffa-hud-kill-notify-container"></div>

            <div class="main__ffa-hud-stats">
                <div class="main__ffa-stats-header">
                    <p>Statistiken</p>
                </div>
                <div class="main__ffa-stats-flexbox">
                    <div class="main__ffa-stats-flex-item">
                        <p class="main__ffa-stats-flex-header blue" id="kills">44</p>
                        <p class="main__ffa-stats-flex-text blue">Kills</p>
                    </div>
                    <div class="main__ffa-stats-flex-item">
                        <p class="main__ffa-stats-flex-header orange" id="deaths">44</p>
                        <p class="main__ffa-stats-flex-text orange">Tode</p>
                    </div>
                    <div class="main__ffa-stats-flex-item">
                        <p class="main__ffa-stats-flex-header red" id="xp">1234</p>
                        <p class="main__ffa-stats-flex-text red">Exp</p>
                    </div>
                    <div class="main__ffa-stats-flex-item">
                        <p class="main__ffa-stats-flex-header green" id="kd">6.66</p>
                        <p class="main__ffa-stats-flex-text green">K/D</p>
                    </div>
                </div>

                <div class="main__ffa-stats-sphere"></div>
            </div>
        </div>

        <div class="main__ffa-deathscreen-container" style="display: none;">
            <div class="main__ffa-deathscreen-center-container">
                <p class="main__ffa-deathscreen-header">Du wurdest getötet von</p>
                <div class="main__ffa-deathscreen-killed-header-container">
                    <!-- <img src="img/big_splash.svg" alt=""> -->
                    <p id="killerName">#azaad</p>
                </div>
                <div class="main__ffa-deathscreen-respawn">
                    <p class="main__ffa-deathscreen-respwan-header">Respawn in</p>
                    <p class="main__ffa-deathscreen-respwan-time" id="timer">5secs</p>
                </div>
            </div>
            <div class="main__ffa-deathscreen-top-bg">
                <img src="img/longstripe.svg" alt="">
            </div>
            <div class="main__ffa-deathscreen-bottom-bg">
                <img src="img/longstripe.svg" alt="">
            </div>
        </div>
    </main>
</body>