<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduConnect - Educational Portal</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4a6fcb;
            --secondary: #6c757d;
            --success: #198754;
            --danger: #dc3545;
            --warning: #ffc107;
            --info: #0dcaf0;
            --light: #f8f9fa;
            --dark: #212529;
            --admin: #ff4b2b;
            --teacher: #4CAF50;
            --student: #2196F3;
            --parent: #FF9800;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
        }

        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1522881193457-37ae97c905bf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 80px 0;
            margin-bottom: 40px;
        }

        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 25px;
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            border-radius: 12px 12px 0 0 !important;
            font-weight: 600;
            color: white;
        }

        .admin-card .card-header {
            background: linear-gradient(to right, #ff416c, #ff4b2b);
        }

        .teacher-card .card-header {
            background: linear-gradient(to right, #4CAF50, #8BC34A);
        }

        .student-card .card-header {
            background: linear-gradient(to right, #2196F3, #21CBF3);
        }

        .parent-card .card-header {
            background: linear-gradient(to right, #FF9800, #FF5722);
        }

        .role-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }

        .admin-icon {
            color: var(--admin);
        }

        .teacher-icon {
            color: var(--teacher);
        }

        .student-icon {
            color: var(--student);
        }

        .parent-icon {
            color: var(--parent);
        }

        .btn-admin {
            background: var(--admin);
            border-color: var(--admin);
            color: white;
        }

        .btn-teacher {
            background: var(--teacher);
            border-color: var(--teacher);
            color: white;
        }

        .btn-student {
            background: var(--student);
            border-color: var(--student);
            color: white;
        }

        .btn-parent {
            background: var(--parent);
            border-color: var(--parent);
            color: white;
        }

        .btn-admin:hover, .btn-teacher:hover, 
        .btn-student:hover, .btn-parent:hover {
            opacity: 0.9;
            color: white;
        }

        footer {
            margin-top: auto;
            background-color: var(--dark);
            color: white;
            padding: 30px 0;
        }

        .feature-box {
            text-align: center;
            padding: 30px 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }

        .feature-box:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: var(--primary);
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-graduation-cap me-2"></i>EduConnect
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-home me-1"></i> Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-info-circle me-1"></i> About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-envelope me-1"></i> Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container text-center">
            <h1 class="display-4 fw-bold mb-4">Welcome to EduConnect</h1>
            <p class="lead mb-5">Your comprehensive educational management portal connecting administrators, teachers, students, and parents</p>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mb-5">
        <div class="row justify-content-center mb-5">
            <div class="col-md-8 text-center">
                <h2 class="mb-4">Access Your Dashboard</h2>
                <p class="lead">Select your role to login to your dedicated portal</p>
            </div>
        </div>

        <div class="row">
            <!-- Admin Card -->
            <div class="col-md-6 col-lg-3">
                <div class="card admin-card h-100">
                    <div class="card-header text-center py-3">
                        <h5 class="mb-0">Administrator</h5>
                    </div>
                    <div class="card-body text-center">
                        <i class="fas fa-user-cog role-icon admin-icon"></i>
                        <p class="card-text">Manage users, courses, and system settings with administrative tools.</p>
                        <a href="admin/login.php" class="btn btn-admin btn-lg w-100">Admin Login</a>
                        <div class="mt-2">
                            <small>New admin? <a href="admin/register.php">Register here</a></small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Teacher Card -->
            <div class="col-md-6 col-lg-3">
                <div class="card teacher-card h-100">
                    <div class="card-header text-center py-3">
                        <h5 class="mb-0">Teacher</h5>
                    </div>
                    <div class="card-body text-center">
                        <i class="fas fa-chalkboard-teacher role-icon teacher-icon"></i>
                        <p class="card-text">Manage classes, assignments, and track student progress.</p>
                        <a href="teacher/teacher_login.php" class="btn btn-teacher btn-lg w-100">Teacher Login</a>
                    </div>
                </div>
            </div>

            <!-- Student Card -->
            <div class="col-md-6 col-lg-3">
                <div class="card student-card h-100">
                    <div class="card-header text-center py-3">
                        <h5 class="mb-0">Student</h5>
                    </div>
                    <div class="card-body text-center">
                        <i class="fas fa-user-graduate role-icon student-icon"></i>
                        <p class="card-text">Access courses, submit assignments, and track your academic progress.</p>
                        <a href="student/student_login.php" class="btn btn-student btn-lg w-100">Student Login</a>
                    </div>
                </div>
            </div>

            <!-- Parent Card -->
            <div class="col-md-6 col-lg-3">
                <div class="card parent-card h-100">
                    <div class="card-header text-center py-3">
                        <h5 class="mb-0">Parent</h5>
                    </div>
                    <div class="card-body text-center">
                        <i class="fas fa-users role-icon parent-icon"></i>
                        <p class="card-text">Monitor your child's progress, attendance, and school activities.</p>
                        <a href="parent/parent_login.php" class="btn btn-parent btn-lg w-100">Parent Login</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-md-8 text-center">
                    <h2 class="mb-4">Why Choose EduConnect?</h2>
                    <p class="lead">Our platform offers comprehensive solutions for educational management</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="feature-box">
                        <i class="fas fa-lock feature-icon"></i>
                        <h4>Secure Access</h4>
                        <p>Role-based authentication ensures that each user accesses only authorized information.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-box">
                        <i class="fas fa-chart-line feature-icon"></i>
                        <h4>Progress Tracking</h4>
                        <p>Monitor academic progress with detailed analytics and reporting tools.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-box">
                        <i class="fas fa-comments feature-icon"></i>
                        <h4>Seamless Communication</h4>
                        <p>Connect teachers, students, and parents through our integrated messaging system.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5>EduConnect</h5>
                    <p>Comprehensive educational management portal for institutions, educators, students, and parents.</p>
                </div>
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5>Quick Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-white">About Us</a></li>
                        <li><a href="#" class="text-white">Contact</a></li>
                        <li><a href="#" class="text-white">Privacy Policy</a></li>
                        <li><a href="#" class="text-white">Terms of Service</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>Contact Us</h5>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-map-marker-alt me-2"></i> 123 Education St, Learn City</li>
                        <li><i class="fas fa-phone me-2"></i> (123) 456-7890</li>
                        <li><i class="fas fa-envelope me-2"></i> info@educonnect.com</li>
                    </ul>
                </div>
            </div>
            <hr class="my-4 bg-light">
            <div class="row">
                <div class="col-md-6">
                    <p class="mb-0">&copy; <span id="currentYear"></span> EduConnect. All rights reserved.</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <div class="social-links">
                        <a href="#" class="text-white me-3"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Update the year dynamically
        document.getElementById('currentYear').textContent = new Date().getFullYear();
    </script>
</body>
</html>