<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Elite Dev</title>
</head>
<body>
    <div class="background-img"><img src="assets/bg.png"></div>
    <iframe id="youtube-player" class="video" src="https://www.youtube.com/embed/jM1pBV8dTe8?enablejsapi=1&autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>

    <main>
        <div class="top">

            <div id="loading-screen">
                <div class="text-white text-center">
                    <p>본 게임은 청소년 이용불가</p>
                    <p>게임물로 18세 미만의 청소년은</p>
                    <p>이용할 수 없습니다.</p>
                </div>
                <div id="logos">
                    <img src="img/violence.svg" alt="Logo 1">
                    <img src="img/19.svg" alt="Logo 2">
                </div>
            </div>
                        
            <div class="gallery-wrapper">
                <div class="title-wrapper">
                    <!-- <div class="title">Sunucu Galerisi</div> -->
                </div>

                <!-- <div class="btn before"><img src="assets/arroow.png"></div>
                <div class="btn after"><img src="assets/arroow.png"></div> -->

                <div class="gallery-images"><div class="scroll"></div></div>
            </div>

            <div class="media-wrapper">
                <div class="title-wrapper">
                    <div class="title">ⓒ 2024. Pado All rights reserved.</div>
                </div>

                <div class="media-box-wrapper">
                    <div class="media-box discord" data-link="https://discord.com/">
                        <div class="icon"><img src="assets/discord.png"></div>
                        <div class="title">디스코드</div>
                    </div>
    
                    <div class="media-box instagram" data-link="https://www.instagram.com/">
                        <div class="icon"><img src="assets/instagram.png"></div>
                        <div class="title">인스타그램</div>
                    </div>
    
                    <div class="media-box youtube" data-link="https://www.youtube.com/">
                        <div class="icon"><img src="assets/youtube.png"></div>
                        <div class="title">유튜브</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bottom">
            <div class="updates-wrapper">
                <div class="title-wrapper">
                    <!-- <div class="title">Sunucu Güncellemeleri</div> -->
                </div>

                <div class="update-box-wrapper"><div class="scroll"></div>
                </div>
            </div>
            <div class="team-wrapper">
                <div class="title-wrapper">
                    <!-- <div class="title">Yetkili Ekip</div> -->
                </div>

                <div class="author-box-wrapper"><div class="scroll"></div></div>
            </div>
            <div class="misc-wrapper">
                <div class="shortcut btn">
                    <div class="keyboard">
                        <div class="keys-wrapper">
                            <div class="line">
                                <div class="key small" data-key="`">`</div>
                                <div class="key small" data-key="1">1</div>
                                <div class="key small" data-key="2">2</div>
                                <div class="key small" data-key="3">3</div>
                                <div class="key small" data-key="4">4</div>
                                <div class="key small" data-key="5">5</div>
                                <div class="key small" data-key="6">6</div>
                                <div class="key small" data-key="7">7</div>
                                <div class="key small" data-key="8">8</div>
                                <div class="key small" data-key="9">9</div>
                                <div class="key small" data-key="0">0</div>
                                <div class="key small" data-key="-">-</div>
                                <div class="key small" data-key="=">=</div>
                                <div class="key mid" data-key="Back">Back</div>
                            </div>
                            <div class="line">
                                <div class="key mid" data-key="Tab">Tab</div>
                                <div class="key small" data-key="Q">ㅂ</div>
                                <div class="key small" data-key="W">ㅈ</div>
                                <div class="key small" data-key="E">ㄷ</div>
                                <div class="key small" data-key="R">ㄱ</div>
                                <div class="key small" data-key="T">ㅅ</div>
                                <div class="key small" data-key="Y">ㅛ</div>
                                <div class="key small" data-key="U">ㅕ</div>
                                <div class="key small" data-key="I">ㅑ</div>
                                <div class="key small" data-key="O">ㅐ</div>
                                <div class="key small" data-key="P">ㅔ</div>
                                <div class="key small" data-key="[">[</div>
                                <div class="key small" data-key="]">]</div>
                                <div class="key small" data-key="\">\</div>
                            </div>
                            <div class="line">
                                <div class="key small" data-key="Caps">Caps</div>
                                <div class="key small" data-key="A">ㅁ</div>
                                <div class="key small" data-key="S">ㄴ</div>
                                <div class="key small" data-key="D">ㅇ</div>
                                <div class="key small" data-key="F">ㄹ</div>
                                <div class="key small" data-key="G">ㅎ</div>
                                <div class="key small" data-key="H">ㅗ</div>
                                <div class="key small" data-key="J">ㅓ</div>
                                <div class="key small" data-key="K">ㅏ</div>
                                <div class="key small" data-key="L">ㅣ</div>
                                <div class="key small" data-key=";">;</div>
                                <div class="key small" data-key="'">'</div>
                                <div class="key small" data-key="\">\</div>
                                <div class="key mid" data-key="Enter">Enter</div>
                            </div>
                            <div class="line">
                                <div class="key big" data-key="Shift">Shift</div>
                                <div class="key small" data-key="\">\</div>
                                <div class="key small" data-key="Z">ㅋ</div>
                                <div class="key small" data-key="X">ㅌ</div>
                                <div class="key small" data-key="C">ㅊ</div>
                                <div class="key small" data-key="V">ㅍ</div>
                                <div class="key small" data-key="B">ㅠ</div>
                                <div class="key small" data-key="N">ㅜ</div>
                                <div class="key small" data-key="M">ㅡ</div>
                                <div class="key small" data-key=",">,</div>
                                <div class="key small" data-key=".">.</div>
                                <div class="key small" data-key="/">/</div>
                                <div class="key mid" data-key="Shift">Shift</div>
                            </div>
                            <div class="line">
                                <div class="key mid" data-key="Control">Control</div>
                                <div class="key small" data-key="Win">Win</div>
                                <div class="key small" data-key="FN">FN</div>
                                <div class="key small" data-key="ALT">ALT</div>
                                <div class="key space" data-key="Space">Space</div>
                                <div class="key mid" data-key="Control">Control</div>
                                <div class="key small" data-key="Alt">Alt</div>
                            </div>
                        </div>
                        <div class="key-showcase">
                            <div class="key">A</div>
                            <div class="title-box">
                                <div class="title">Başlık</div>
                                <div class="subtitle">Açıklama</div>
                            </div>
                        </div>
                    </div>

                    <div class="icon"><img src="assets/keyboard.png"></div>
                    <div class="title-box">
                        <div class="title">키가이드</div>
                        <div class="subtitle">클릭하기</div>
                    </div>
                    <div class="icon-2"><img src="assets/mouse.png"></div>
                </div>
                <div class="closeall btn">
                    <div class="icon"><img src="assets/view.png"></div>
                    <div class="title-box">
                        <div class="title">모두 닫기</div>
                        <div class="subtitle">클릭하기</div>
                    </div>
                    <div class="icon-2"><img src="assets/mouse.png"></div>
                </div>
                <div class="music-player">
                    <div class="image"><img src="assets/musics/music-1.png" id="music-image"></div>
                    <div class="music-wrapper">
                        <div class="name-wrapper">
                            <div class="name" id="music-name">Çalmiyor...</div>
                            <div class="author" id="music-author">Bilinmeyen</div>
                        </div>

                        <div class="progress-wrapper">
                            <div class="bar-wrapper">
                                <div class="bar" id="input-bg-time"></div>
                            </div>
                            <div class="time" id="music-time-text">00:00</div>
                        </div>


                        <div style="display: flex; justify-content: space-between; align-items: center;">                        
                            <div class="controls">
                                <div class="btnn prev" id="prev"><img src="assets/prev.png"></div>
                                <div class="btnn play" id="play"><img src="assets/play.png"></div>
                                <div class="btnn pause" id="pause"><img src="assets/pause.png"></div>
                                <div class="btnn next" id="next"><img src="assets/next.png"></div>
                            </div>
                            <input onchange="updateVolume(this.value)" type="range"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="loading-wrapper">
            <div class="loading-text">
                <div class="title">로딩중...</div>
                <div class="subtitle">2024 LIFE CITY</div>
            </div>
            <div class="loading-bar">
                <div class="default"></div>
                <div class="yellow"><img src="assets/bar.png"></div>
                <div class="pointer"><img src="assets/bar-point.png"></div>
            </div>
        </div>
    </main>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script>
    <script src="../config.js"></script>
    <script src="main.js"></script>
</body>
</html>