<!DOCTYPE html>
<html dir="rtl" lang="ar">

<head>
    <html prefix="og: https://ogp.me/ns#">
    <meta charset="UTF-8">
    <meta name="theme-color" content="#ff0000">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>الرئيسية | Blacklist</title>
    <meta property="og:title" content="Blacklist" />
    <meta property="og:type" content="website" />
    <meta property="og:description"
        content="مرحبًا بك في نظام القائمة السوداء حيث أقوى خدمات الحماية والبرمجة والتطوير" />
    <meta property="og:url" content="https://safeguard-discord.com" />
    <meta property="og:image" content="https://www.raed.net/img?id=1153063" />
    <link rel="shortcut icon" href="https://www.raed.net/img?id=1153063" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/kursor/dist/kursor.css">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/login.css">
    <script src="https://unpkg.com/kursor"></script>
</head>

<body>
    <div class="loader-wrapper">
        <div class="loader">
            <img src="https://www.raed.net/img?id=1153063" alt="Loading Logo" class="loader-logo">
        </div>
    </div>

    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">
                <img src="https://www.raed.net/img?id=1153063" alt="SafeGuard Logo">
                <h1>Blacklist</h1>
            </a>
            <div class="nav-menu">
                <a href="#hero" class="nav-link">الرئيسية</a>
                <a href="#" class="nav-link" id="about-us">من نحن</a>
                <a href="#features" class="nav-link">الخدمات</a>
                <a href="/products" class="nav-link">المنتجات</a>
                <a href="#stats" class="nav-link">الإحصائيات</a>
            </div>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="nav-buttons">
                <% if (user) { %>
                    <a href="/dashboard" class="nav-button">
                        <i class="fas fa-tachometer-alt"></i>
                        الذهاب للوحة التحكم
                    </a>
                    <% } else { %>
                        <a href="/auth/discord" class="nav-button">
                            <i class="fab fa-discord"></i>
                            تسجيل الدخول
                        </a>
                        <% } %>
            </div>
        </div>
    </nav>

    <div id="about-modal" class="modal">
        <div class="modal-content">
            <button class="close-button">
                <i class="fas fa-times"></i>
                إغلاق
            </button>

            <div class="modal-header">
                <h2 class="modal-title">القائمة السوداء</h2>
                <h3 class="modal-subtitle">من نحن</h3>
            </div>

            <div class="modal-body">
                <h4>الحماية</h4>
                <p>نحن خادم القائمة السوداء، حيث نوفر نظام حماية فريد من نوعه لأي خادم مستضيف لنا. نحرص على ردع
                    المستخدمين المخالفين والمدرجين إلى القائمة السوداء من الانضمام إلى هذه الخوادم المحمية من قِبلنا عن
                    طريق حظرهم على نطاق واسع، ونشر المعلومات المتوفرة لدينا عن المستخدم وعن المخالفة التي قام بارتكابها
                    كوسيلة لتجنب المستخدمين من التعامل معه وعزله عن مجتمع ديسكورد الآمن.</p>

                <h4><br>النظام</h4>
                <p>لا يتهاون نظام الحماية والفريق الخاص بنا فيما يتعلق بمخالفات النصب والاحتيال ووسائل الهجوم والتسبب
                    بالضرر الأخرى لمستخدمي ديسكورد. نقدم دعمًا كافيًا للمستخدمين المتضررين إثر هذه العمليات عن طريق
                    مراجعة وتدقيق الشكاوى المتعلقة بها.</p>

                <h4><br>المصداقية</h4>
                <p>لا يقوم نظامنا بإضافة المستخدم المشتكى عليه إلى القائمة السوداء فورًا، حيث لدينا فريق متكامل ومتخصص
                    في مراجعة وتدقيق الشكاوى والأدلة للتأكد من مدى صحتها واتخاذ الإجراء المناسب بناءً عليها. مهمتنا
                    الأولى هي الحفاظ على خوادم ومستخدمي ديسكورد آمنة من أي أضرار محتملة جراء هذه المخالفات.</p>

                <div class="mission-statement">
                    نحرص دومًا للتوجه نحو نظام ومجتمع أخلاقي وآمن للجميع
                </div>
            </div>
        </div>
    </div>

    <section class="hero" id="hero">
        <div class="hero-content">
            <h1 class="hero-title">مرحبًا بك في نظام القائمة السوداء</h1>
            <p class="hero-description">
                حيث أقوى خدمات الحماية والبرمجة والتطوير
            </p>
            <div class="cta-buttons">
                <a href="https://discord.com/oauth2/authorize?client_id=1283857804263686145"
                    class="cta-button primary-button">
                    <i class="fas fa-shield-alt"></i>
                    رابط المصادقة
                </a>
                <a href="https://discord.com/invite/Vg95FC4MHG" class="cta-button secondary-button">
                    <i class="fab fa-discord"></i>
                    انضم لمجتمعنا
                </a>
            </div>
        </div>
    </section>

    <section class="features" id="features">
        <h2 class="section-title">الخدمات</h2>
        <div class="features-grid">
            <div class="feature-card">
                <i class="fas fa-shield-alt feature-icon"></i>
                <h3 class="feature-title">الحماية والردع</h3>
                <p>نظام متقدم لحماية الخوادم من المستخدمين المخالفين بإضافتهم إلى القائمة السوداء وحظرهم تلقائيًا</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-robot feature-icon"></i>
                <h3 class="feature-title">البرمجة الخاصة</h3>
                <p>نقدم خدمات برمجة مخصصة لإدارة خادمك ومجتمعك بكفاءة</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-code feature-icon"></i>
                <h3 class="feature-title">تطوير الويب</h3>
                <p>نصمم ونبني مواقع إلكترونية سهلة الاستخدام مع أدوات مدمجة لإدارة الموقع بكل سهولة</p>
            </div>
        </div>
    </section>

    <section class="team" id="team">
        <h2 class="section-title">فريق القائمة السوداء</h2>
        <div class="team-carousel">
            <button class="carousel-button prev">
                <i class="fas fa-chevron-left"></i>
            </button>
            <div class="team-carousel-container">
                <% teamMembers.forEach(member=> { %>
                    <div class="team-card">
                        <img src="<%= member.avatar %>" alt="<%= member.username %>" class="team-avatar" />
                        <h3 class="team-name">
                            <%= member.username %>
                        </h3>
                        <p class="team-role">
                            <%= member.role %>
                        </p>
                        <div class="social-links">
                            <a href="https://discord.com/users/<%= member.discordId %>" class="social-link">
                                <i class="fab fa-discord"></i>
                            </a>
                        </div>
                    </div>
                    <% }); %>
            </div>
            <button class="carousel-button next">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </section>

    <section class="stats" id="stats">
        <h2 class="section-title">الإحصائيات</h2>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">
                    <%= blacklistCount %>
                </div>
                <div class="stat-label">مخالف مدرج إلى القائمة السوداء</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">100+</div>
                <div class="stat-label">خادم محمي</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">5+</div>
                <div class="stat-label">سنوات خبرة</div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="footer-links">
            <a href="#" id="rules-link">القواعد</a>
            <span class="separator">|</span>
            <a href="#" id="terms-link">الشروط والأحكام</a>
        </div>
        <p>جميع الحقوق محفوظة &copy; 2024 Blacklist Server</p>
    </footer>

    <div id="rules-modal" class="modal">
        <div class="modal-content">
            <button class="close-button">
                <i class="fas fa-times"></i>
                إغلاق
            </button>

            <div class="modal-header">
                <h2 class="modal-title">القائمة السوداء</h2>
                <h3 class="modal-subtitle">القواعد</h3>
            </div>

            <div class="modal-body">
                <h4>قواعد عامة</h4>
                <p>1. يجب احترام جميع المستخدمين والإداريين.</p>
                <p>2. يمنع إساءة استخدام النظام أو محاولة استغلاله.</p>
                <p>3. يجب تقديم أدلة واضحة وموثقة عند رفع الشكاوى.</p>

                <h4><br>قواعد الشكاوى</h4>
                <p>1. يجب أن تكون الشكوى مدعمة بالأدلة الكافية.</p>
                <p>2. يمنع تقديم شكاوى كيدية أو غير حقيقية.</p>
                <p>3. يجب احترام خصوصية الآخرين عند تقديم الشكاوى.</p>

                <h4><br>العقوبات</h4>
                <p>1. سيتم اتخاذ إجراءات صارمة ضد المخالفين.</p>
                <p>2. قد يتم حظر المستخدمين المخالفين من استخدام النظام.</p>
                <p>3. يحق للإدارة اتخاذ الإجراءات المناسبة حسب نوع المخالفة.</p>

                <div class="mission-statement">
                    نلتزم بتوفير بيئة آمنة وعادلة لجميع المستخدمين
                </div>
            </div>
        </div>
    </div>

    <div id="terms-modal" class="modal">
        <div class="modal-content">
            <button class="close-button">
                <i class="fas fa-times"></i>
                إغلاق
            </button>

            <div class="modal-header">
                <h2 class="modal-title">القائمة السوداء</h2>
                <h3 class="modal-subtitle">الشروط والأحكام</h3>
            </div>

            <div class="modal-body">
                <h4>الموافقة على الشروط</h4>
                <p>باستخدامك لخدماتنا، فإنك توافق على الالتزام بجميع الشروط والأحكام المذكورة هنا.</p>

                <h4><br>استخدام الخدمة</h4>
                <p>1. يجب استخدام الخدمة بشكل قانوني وأخلاقي.</p>
                <p>2. يحظر استخدام الخدمة لأي أغراض غير مشروعة.</p>
                <p>3. نحتفظ بحق تعليق أو إنهاء الخدمة لأي مستخدم يخالف الشروط.</p>

                <h4><br>الخصوصية والبيانات</h4>
                <p>1. نحترم خصوصية المستخدمين ونلتزم بحماية بياناتهم.</p>
                <p>2. قد نجمع معلومات ضرورية لتحسين خدماتنا.</p>
                <p>3. لن نشارك بياناتك مع أطراف ثالثة دون موافقتك.</p>

                <h4><br>المسؤولية القانونية</h4>
                <p>1. لا نتحمل مسؤولية أي أضرار ناتجة عن سوء استخدام الخدمة.</p>
                <p>2. يتحمل المستخدم مسؤولية جميع الإجراءات المتخذة من حسابه.</p>

                <div class="mission-statement">
                    استخدامك للخدمة يعني موافقتك على جميع الشروط والأحكام المذكورة
                </div>
            </div>
        </div>
    </div>

    <script src="/js/login.js"></script>
    <!-- الحمد لله -->
</body>

</html>