JSS

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduPro Azerbaijan - Yeni Nəsil Təhsil Portalı</title>
    <style>
        :root {
            --bg-gradient: linear-gradient(135deg, #0f172a, #1e1b4b, #311042);
            --card-bg: rgba(255, 255, 255, 0.07);
            --card-border: rgba(255, 255, 255, 0.12);
            --text-color: #f8fafc;
            --accent-color: #06b6d4;
            --accent-hover: #0891b2;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

        body {
            background: var(--bg-gradient);
            color: var(--text-color);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Navbar & Burger */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 30px;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--card-border);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 22px;
            font-weight: 800;
            color: var(--accent-color);
            letter-spacing: 0.5px;
        }

        .burger-btn {
            font-size: 26px;
            cursor: pointer;
            background: none;
            border: none;
            color: white;
            transition: transform 0.2s;
        }

        .burger-btn:hover {
            transform: scale(1.1);
        }

        /* Side Menu (Drawer) */
        .side-menu {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            background-color: #0b0f19;
            overflow-x: hidden;
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding-top: 70px;
            box-shadow: -10px 0 30px rgba(0,0,0,0.7);
            border-left: 1px solid var(--card-border);
        }

        .side-menu a, .side-menu .menu-header {
            padding: 14px 30px;
            text-decoration: none;
            font-size: 17px;
            color: #cbd5e1;
            display: block;
            transition: 0.3s;
        }

        .side-menu a:hover {
            background-color: rgba(6, 182, 212, 0.15);
            color: var(--accent-color);
            padding-left: 35px;
        }

        .side-menu .close-btn {
            position: absolute;
            top: 20px;
            right: 25px;
            font-size: 32px;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
        }

        /* Main Layout Content */
        .main-container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
            flex: 1;
            width: 100%;
        }

        .hero-section {
            text-align: center;
            margin-bottom: 40px;
        }

        .hero-section h1 {
            font-size: 36px;
            margin-bottom: 10px;
            background: linear-gradient(to right, #38bdf8, #818cf8, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-section p {
            color: #94a3b8;
            font-size: 16px;
        }

        /* Grid Sections */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 16px;
            padding: 25px;
            backdrop-filter: blur(10px);
            transition: transform 0.3s, border-color 0.3s;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .card:hover {
            transform: translateY(-5px);
            border-color: var(--accent-color);
        }

        .card h3 {
            font-size: 20px;
            margin-bottom: 12px;
            color: #f1f5f9;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card p {
            color: #94a3b8;
            font-size: 14px;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        /* Buttons & Actions */
        .btn {
            background: var(--accent-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
            width: 100%;
            text-align: center;
            display: inline-block;
            text-decoration: none;
        }

        .btn:hover {
            background: var(--accent-hover);
        }

        .btn:active {
            transform: scale(0.98);
        }

        /* Login Modal / Section with Real Google & Apple Logos */
        .auth-card {
            max-width: 400px;
            margin: 0 auto 40px auto;
            text-align: center;
        }

        .social-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 20px;
        }

        .social-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 12px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            border: 1px solid rgba(255,255,255,0.1);
            transition: 0.2s;
        }

        .google-login {
            background: #ffffff;
            color: #1e293b;
        }

        .apple-login {
            background: #000000;
            color: #ffffff;
        }

        .social-btn:hover {
            opacity: 0.9;
            transform: scale(1.02);
        }

        .social-btn svg {
            width: 20px;
            height: 20px;
        }

        /* Leaderboard Table */
        .leaderboard-section {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 40px;
        }

        .leaderboard-section h2 {
            margin-bottom: 20px;
            font-size: 22px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }

        th, td {
            padding: 12px 15px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            font-size: 15px;
        }

        th {
            color: #94a3b8;
            font-weight: 600;
        }

        tr:hover td {
            background: rgba(255,255,255,0.03);
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 20px;
            background: rgba(15, 23, 42, 0.9);
            border-top: 1px solid var(--card-border);
            color: #64748b;
            font-size: 14px;
        }

        /* Responsive adjustments */
        @media(max-width: 768px) {
            .hero-section h1 { font-size: 28px; }
        }
    </style>
</head>
<body>

    <!-- Yuxarı Menyu Paneli -->
    <header class="navbar">
        <div class="logo-area">
            <span>🎓</span> EduPro Az
        </div>
        <button class="burger-btn" onclick="openMenu()" aria-label="Menyu">☰</button>
    </header>

    <!-- Gizli Yandan Açılan Menyu (Burger Menu) -->
    <nav id="sideMenu" class="side-menu">
        <button class="close-btn" onclick="closeMenu()">&times;</button>
        <span class="menu-header" style="color: var(--accent-color); font-weight: bold;">Naviqasiya</span>
        <a href="#home">🏠 Əsas Səhifə</a>
        <a href="#classes">📚 Siniflər (5-11) & Fənlər</a>
        <a href="#dashboards">📊 Şəxsi Dashboard</a>
        <a href="#leaderboard">🏆 Ümumi Liderlər Lövhəsi</a>
        <a href="#auth">🔐 Hesab Girişi</a>
        <a href="#settings">⚙️ Parametrlər & Bildirişlər</a>
    </nav>

    <!-- Əsas Kontent Konteyneri -->
    <main class="main-container">
        
        <!-- Hero Başlıq -->
        <section class="hero-section" id="home">
            <h1>Biliklərini Sına, Zirvəyə Yüksəl!</h1>
            <p>5-dən 11-ci sinfə qədər bütün fənlər üzrə fərdi dashboard, sınaqlar və ümumi liderlik sistemi.</p>
        </section>

        <!-- Google & Apple Giriş Bloku -->
        <section class="card auth-card" id="auth">
            <h3>Hesabınıza Giriş Edin</h3>
            <p>Nəticələrinizi yadda saxlamaq və liderlər lövhəsinə düşmək üçün daxil olun.</p>
            <div class="social-buttons">
                <!-- Rəsmi Google SVG Logosu -->
                <button class="social-btn google-login">
                    <svg viewBox="0 0 24 24">
                        <path fill="#4285F4" d="M23.745 12.27c-.07-.8-.67-1.42-1.42-1.42h-10.3v4.9h5.8c-.25 1.4-1.6 4.1-5.8 4.1-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4c1.5 0 2.9.5 4 1.5l3.6-3.6C18.6 3.4 15.6 2.4 12 2.4 6.5 2.4 2 6.9 2 12.4s4.5 10 10 10c5.8 0 9.6-4.1 9.6-9.9 0-.4-.05-.8-.15-1.23z"/>
                        <path fill="#34A853" d="M3.73 7.82l4.33 3.18C9.2 8.7 10.45 7.6 12 7.6c1.5 0 2.9.5 4 1.5l3.6-3.6C18.6 3.4 15.6 2.4 12 2.4 8.5 2.4 5.5 4.5 3.73 7.82z"/>
                        <path fill="#FBBC05" d="M12 22.4c3.5 0 6.5-1.2 8.7-3.2l-4-3.3c-1.1.7-2.6 1.2-4.7 1.2-4.2 0-5.5-2.7-5.8-4.1H2v3.3c1.8 3.3 4.8 6.1 10 6.1z"/>
                        <path fill="#EA4335" d="M6.2 13.1c-.2-.7-.3-1.5-.3-2.3s.1-1.6.3-2.3H2V11c0 .8.1 1.6.3 2.3l3.9-2.2z"/>
                    </svg>
                    Google ilə davam et
                </button>

                <!-- Rəsmi Apple SVG Logosu -->
                <button class="social-btn apple-login">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 5.39c.65-.79 1.09-1.89.97-2.99-.96.04-2.12.64-2.8 1.43-.61.7-1.14 1.82-1 2.91 1.08.08 2.18-.55 2.83-1.35z"/>
                    </svg>
                    Apple ilə daxil ol
                </button>
            </div>
        </section>

        <!-- Siniflər və Fənlər Dashboard Xülasəsi -->
        <div class="dashboard-grid" id="classes">
            <div class="card">
                <h3>📘 5-8 Siniflər Paneli</h3>
                <p>Ana dili, Riyaziyyat, Xarici dil, Fizika, Kimya və digər fənlər üzrə təməl bilik testi dashboardu.</p>
                <a href="#" class="btn">Panelə Keç</a>
            </div>
            <div class="card">
                <h3>🎯 9-cu Sinif Buraxılış</h3>
                <p>3 əsas buraxılış fənnindən rəsmi imtahan modelinə uyğun xüsusi sınaq statistikası.</p>
                <a href="#" class="btn">Sınağa Başla</a>
            </div>
            <div class="card">
                <h3>🚀 10-11 Sinif Blok Qrupları</h3>
                <p>I, II, III, IV və V qruplar üzrə ixtisas yönümlü qabaqcıl fənn sınaqları və hesablamalar.</p>
                <a href="#" class="btn">Qrupları Seç</a>
            </div>
        </div>

        <!-- Ümumi Liderlər Lövhəsi (Leaderboard) -->
        <section class="leaderboard-section" id="leaderboard">
            <h2>🏆 Ümumi Liderlər Lövhəsi (Top 5)</h2>
            <table>
                <thead>
                    <tr>
                        <th>Yer</th>
                        <th>İstifadəçi</th>
                        <th>Sinif</th>
                        <th>Ümumi Bal</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>🥇 1</td>
                        <td>Elmir Qasımov</td>
                        <td>11-ci Sinif</td>
                        <td>685 bal</td>
                    </tr>
                    <tr>
                        <td>🥈 2</td>
                        <td>Ayan Məmmədova</td>
                        <td>9-cu Sinif</td>
                        <td>640 bal</td>
                    </tr>
                    <tr>
                        <td>🥉 3</td>
                        <td>Hüseyn Əliyev</td>
                        <td>8-ci Sinif</td>
                        <td>617 bal</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Nigar Kərimova</td>
                        <td>10-cu Sinif</td>
                        <td>595 bal</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Tural Həsənov</td>
                        <td>11-ci Sinif</td>
                        <td>580 bal</td>
                    </tr>
                </tbody>
            </table>
        </section>

    </main>

    <!-- Footer -->
    <footer>
        <p>&copy; 2026 EduPro Az. Bütün hüquqlar qorunur. Gənc istedadların layihəsi.</p>
    </footer>

    <!-- JavaScript - Menyunu İdarə Etmək Üçün -->
    <script>
        function openMenu() {
            document.getElementById("sideMenu").style.width = "280px";
        }

        function closeMenu() {
            document.getElementById("sideMenu").style.width = "0";
        }
    </script>

</body>
</html>