<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مرحبًا بك</title>
    <link rel="stylesheet" href="style.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=Changa:wght@200..800&display=swap" rel="stylesheet">
</head>
<body>
    <div id="overlay" style="display: none;"></div>
    <div id="container" style="display: none;">
        <div id="rules-screen">
            <h1 id="welcome-title"></h1>
            <p id="agreement-text"></p>
            <li class="no-marker" style="font-weight: bold; color: #4CAF50; text-align: left;">Made by: Adam</li>
            <li class="no-marker" style="font-weight: bold; color: #4CAF50; text-align: left;">Discord: ad4m.1</li>
            <div id="rules-list">
                <ul id="rules-list-items">
                </ul>
            </div>
            <div class="agree-section">
                <input type="checkbox" id="agree-checkbox">
                <label for="agree-checkbox" id="agree-text"></label>
            </div>
            <button id="submit-btn" disabled>متابعة</button>
            
        </div>

        <div id="server-info" style="display: none;">
            <h1 id="server-info-title"></h1>
            <div id="additional-fields"></div>
            <button id="back-btn"></button>
            <button id="continue-btn"></button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>