<!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">
    <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" />
    <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="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>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <!-- Sadece en güncel jQuery sürümünü kullanalım -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script src="js/main.js"></script>
</head>


<body>
    <div class="gradiant"></div>
    <div id="video-foreground"></div>

    <div class="topcontainer">
        <div class="socials">
            <div id="dc" class="social" onmouseover="endcolor(true, 'dc')" onmouseout="endcolor(false, 'dc')">
                <img class="image1" src="/ui/assets/svg/gridc.svg" alt="">
            </div>
            <div id="yt" class="social" onmouseover="endcolor(true, 'yt')" onmouseout="endcolor(false, 'yt')">
                <img class="image2" src="/ui/assets/svg/griyt.svg" alt="">
            </div>
            <div id="insta" class="social" onmouseover="endcolor(true, 'insta')" onmouseout="endcolor(false, 'insta')">
                <img class="image3" src="/ui/assets/svg/griinsta.svg" alt="">
            </div>
            <div id="tw" class="social" onmouseover="endcolor(true, 'tweet')" onmouseout="endcolor(false, 'tweet')">
                <img class="image4" src="/ui/assets/svg/gritw.svg" alt="">
            </div>
        </div>



        <div class="servername">END SCRIPTS</div>
        <div class="servernameloading">LOADING SCREEN</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="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>
        <div id="image-modal" class="modal">
            <span class="close">&times;</span>
            <img id="modal-content" class="modal-image" src="" alt="">
        </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="musicSet">
        <div class="musicContainer">
        </div>
    </div>

    <div class="bottomcontainer">
        <div class="info">
            <div class="infotext"></div>
        </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="/ui/assets/svg/grishow.svg" alt="">
        </div>
        <div class="ytpause" onmouseover="endcolor(true, 'ytpause')" onmouseout="endcolor(false, 'ytpause')">
            <img class="image7" src="/ui/assets/svg/gripause.svg" alt="">
        </div>
    </div>
    

    <div class="serverRulessBox">
        <h1 class="serverRulessText"></h1>
        <div id="serverRulessListBox" class="serverRulessListBox"></div>
    </div>
    
</body>