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

<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">
    <title>END-LOADINGSCREEN</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/BrowserFS/2.0.0/browserfs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="js/main.js"></script>
</head>

<body>
    <div class="gradiant"></div>
    <iframe id="youtube-player" class="video" src="https://www.youtube.com/embed/i5pzV2mDbiw?enablejsapi=1&autoplay=1&loop=1&mute=1&controls=0" frameborder="0" mute; allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
    <script>
        // Prevent touch events
        document.getElementById('youtube-player').addEventListener('touchstart', function(e) {
          e.preventDefault();
        });
        document.getElementById('youtube-player-2').addEventListener('touchstart', function(e) {
          e.preventDefault();
        });
      
        // Prevent keyboard events
        document.getElementById('youtube-player').addEventListener('keydown', function(e) {
          e.preventDefault();
        });
        document.getElementById('youtube-player-2').addEventListener('keydown', function(e) {
          e.preventDefault();
        });
    </script>
    <div class="topcontainer">
        <div class="socials">
            <div id="dc" class="social" onmouseover="endcolor(true, 'dc')" onmouseout="endcolor(false, 'dc')">
                <img class="image1" src="assets/gridc.svg" alt="">
            </div>
            <div id="yt" class="social" onmouseover="endcolor(true, 'yt')" onmouseout="endcolor(false, 'yt')">
                <img class="image2" src="assets/griyt.svg" alt="">
            </div>
            <div id="insta" class="social" onmouseover="endcolor(true, 'insta')" onmouseout="endcolor(false, 'insta')">
                <img class="image3" src="assets/griinsta.svg" alt="">
            </div>
            <div id="tw" class="social" onmouseover="endcolor(true, 'tweet')" onmouseout="endcolor(false, 'tweet')">
                <img class="image4" src="assets/gritw.svg" alt="">
            </div>
        </div>
        <div class="servername">END SCRIPTS</div>

        <div class="updates">
            <div class="header">
                <div class="text2">SERVER UPDATES</div>
                
                <div class="updates2">
                    <div class="update">
                        <div class="line"></div>
                        <div class="header">CHANGELOG</div>
                        <div class="tarih">
                            01.01.2025
                        </div>
                        <div class="updatetext">
                            <div class="updateinside"></div>
                        </div>
                    </div>
                    <div class="update">
                        <div class="line"></div>
                        <div class="header">CHANGELOG</div>
                        <div class="tarih">
                            01.01.2025
                        </div>
                        <div class="updatetext">
                            <div class="updateinside"></div>
                        </div>
                    </div>
                    <div class="update">
                        <div class="line"></div>
                        <div class="header">CHANGELOG</div>
                        <div class="tarih">
                            01.01.2025
                        </div>
                        <div class="updatetext">
                            <div class="updateinside"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="gallery">
            <div class="gallerytext">SERVER GALLERY</div>
            <div class="logo">
                <svg xmlns="http://www.w3.org/2000/svg" width="44" height="22" viewBox="0 0 44 22" fill="none"><g opacity="0.5"><mask id="path-1-inside-1_117_97" fill="white"><path d="M0.744385 1.71882e-06H7.95619L25.0782 17.1334L29.5824 21.6277L22.3736 21.6277L22.3706 21.6246V21.6277H0.747466L0.747465 10.8139L5.25292 15.3196V17.1219H17.8676L0.744385 1.71882e-06Z"/><path d="M43.9998 21.6277H36.788L19.666 4.49433L15.1618 0L22.3706 1.71882e-06L22.3736 0.00308184V1.71882e-06H43.9967V10.8139L39.4913 6.30808V4.50577H26.8767L43.9998 21.6277Z"/></mask><path d="M0.744385 1.71882e-06V-58H-139.287L-40.2663 41.0137L0.744385 1.71882e-06ZM7.95619 1.71882e-06L48.9819 -40.9986L31.9918 -58H7.95619V1.71882e-06ZM25.0782 17.1334L-15.9475 58.132L-15.9184 58.1611L-15.8893 58.1902L25.0782 17.1334ZM29.5824 21.6277L29.5824 79.6277L169.823 79.6277L70.5499 -19.4291L29.5824 21.6277ZM22.3736 21.6277L-18.64 62.6385L-1.65195 79.6277L22.3736 79.6277L22.3736 21.6277ZM22.3706 21.6246L63.3842 -19.3861L-35.6294 -118.407V21.6246H22.3706ZM22.3706 21.6277V79.6277H80.3706V21.6277H22.3706ZM0.747466 21.6277L-57.2525 21.6277L-57.2525 79.6277H0.747466V21.6277ZM0.747465 10.8139L41.7611 -30.1969L-57.2525 -129.218L-57.2525 10.8139L0.747465 10.8139ZM5.25292 15.3196H63.2529V-8.70355L46.2666 -25.6911L5.25292 15.3196ZM5.25292 17.1219H-52.7471V75.1219H5.25292V17.1219ZM17.8676 17.1219V75.1219H157.899L58.8783 -23.8917L17.8676 17.1219ZM43.9998 21.6277V79.6277H184.031L85.0106 -19.386L43.9998 21.6277ZM36.788 21.6277L-4.23773 62.6263L12.7524 79.6277H36.788V21.6277ZM19.666 4.49433L60.6917 -36.5043L60.6626 -36.5334L60.6335 -36.5625L19.666 4.49433ZM15.1618 0L15.1619 -58L-125.079 -58L-25.8057 41.0568L15.1618 0ZM22.3706 1.71882e-06L63.3842 -41.0107L46.3962 -58L22.3706 -58L22.3706 1.71882e-06ZM22.3736 0.00308184L-18.64 41.0138L80.3736 140.034V0.00308184H22.3736ZM22.3736 1.71882e-06V-58H-35.6264V1.71882e-06H22.3736ZM43.9967 1.71882e-06H101.997V-58H43.9967V1.71882e-06ZM43.9967 10.8139L2.98311 51.8246L101.997 150.845V10.8139H43.9967ZM39.4913 6.30808H-18.5087V30.3313L-1.52235 47.3188L39.4913 6.30808ZM39.4913 4.50577H97.4913V-53.4942H39.4913V4.50577ZM26.8767 4.50577V-53.4942H-113.155L-14.1341 45.5194L26.8767 4.50577ZM66.104 -23.8652L48.9819 -40.9986L-33.0696 40.9986L-15.9475 58.132L66.104 -23.8652ZM70.5499 -19.4291L66.0457 -23.9235L-15.8893 58.1902L-11.3851 62.6846L70.5499 -19.4291ZM22.3736 79.6277H29.5824L29.5824 -36.3723H22.3737L22.3736 79.6277ZM-18.6431 62.6354L-18.64 62.6385L63.3873 -19.383L63.3842 -19.3861L-18.6431 62.6354ZM80.3706 21.6277V21.6246H-35.6294V21.6277H80.3706ZM58.7475 21.6277L58.7475 10.8139L-57.2525 10.8139L-57.2525 21.6277L58.7475 21.6277ZM-52.7471 15.3196V17.1219H63.2529V15.3196H-52.7471ZM17.8676 -40.8781H5.25292V75.1219H17.8676V-40.8781ZM-40.2663 41.0137L-23.1432 58.1356L58.8783 -23.8917L41.7551 -41.0137L-40.2663 41.0137ZM7.95619 -58H0.744385V58H7.95619V-58ZM0.747466 79.6277H22.3706V-36.3723H0.747466V79.6277ZM-40.2662 51.8246L-35.7607 56.3304L46.2666 -25.6911L41.7611 -30.1969L-40.2662 51.8246ZM-21.3598 45.493L-4.23773 62.6263L77.8138 -19.3709L60.6917 -36.5043L-21.3598 45.493ZM-25.8057 41.0568L-21.3015 45.5512L60.6335 -36.5625L56.1293 -41.0568L-25.8057 41.0568ZM22.3706 -58H15.1619L15.1618 58H22.3706L22.3706 -58ZM63.3873 -41.0077L63.3842 -41.0107L-18.6431 41.0107L-18.64 41.0138L63.3873 -41.0077ZM-35.6264 1.71882e-06V0.00308184H80.3736V1.71882e-06H-35.6264ZM-14.0032 1.71882e-06V10.8139H101.997V1.71882e-06H-14.0032ZM97.4913 6.30808V4.50577H-18.5087V6.30808H97.4913ZM26.8767 62.5058H39.4913V-53.4942H26.8767V62.5058ZM85.0106 -19.386L67.8874 -36.5079L-14.1341 45.5194L2.98911 62.6414L85.0106 -19.386ZM36.788 79.6277H43.9998V-36.3723H36.788V79.6277ZM43.9967 -58H22.3736V58H43.9967V-58ZM85.0104 -30.1969L80.5049 -34.7027L-1.52235 47.3188L2.98311 51.8246L85.0104 -30.1969Z" mask="url(#path-1-inside-1_117_97)"/></g></svg>
            </div>
            <div class="foto1">
                <img id="foto1" src="assets/bg.png" alt="">
            </div>
            <div class="foto2">
                <img id="foto2" src="assets/bg.png" alt="">
            </div>
            <div class="foto3">
                <img id="foto3" src="assets/bg.png" alt="">
            </div>
            <div class="foto4">
                <img id="foto4" src="assets/bg.png" alt="">
            </div>
        </div>
        <!-- Modal -->
        <div id="image-modal" class="modal">
            <span class="close">&times;</span>
            <img id="modal-content" class="modal-image" src="" alt="Büyük Resim">
        </div>

        <div class="team">
            <div class="header">OUR TEAM</div>
            <div class="teambox">
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
                <div class="member">
                    <div class="logo">
                        <img src="assets/user.png" alt="">
                    </div>
                    <div class="text1">PROJECT LEADER</div>
                    <div class="text2">END SCRIPTS</div>
                </div>
            </div>
        </div>
    </div>

    

    <div class="bottomcontainer">
        <div class="info">
            <div class="infotext"></div>
        </div>
        <div class="solalt"></div>
        <div class="serverMusicBox-wrapper">
            <div class="boxStyle serverMusicBox">
                <div class="musicListBox">
                    <div class="musicBox">
                        <div class="musicImg"></div>
                        <div class="musicRightBox">
                            <h2 class="musicName">
                                <span>Yükleniyor</span>
                                <p>Yükleniyor</p>
                            </h2>
                            <div class="range-container">
                                <input type="range" class="custom-range" id="colorRange" min="0" max="100" value="0" />
                            </div>
                            <div class="musicPlayerBox">
                                <i class="fa-solid fa-backward-step" id="prev"></i>
                                <i class="fa-solid fa-play" id="play"></i>
                                <i class="fa-solid fa-pause" id="stop"></i>
                                <i class="fa-solid fa-forward-step" id="next"></i>
                            </div>
                        </div>
                    </div>
                    <div class="volumeBox">
                        <i class="fas fa-volume-up" id="ses"></i>
                        <div class="custom-range-container">
                            <input  type="range" class="custom-range-slider" id="colorRange2" min="0" max="100" value="50" step="1" />
                            <output class="range-value">%50</output>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="show" onmouseover="endcolor(true, 'show')" onmouseout="endcolor(false, 'show')">
            <img class="image6" src="assets/grishow.svg" alt="">
        </div>
    </div>
</body>