<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Education Department | Welcome</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-green: #2E7D32;
            --dark-green: #1B5E20;
            --light-green: #4CAF50;
            --pale-green: #E8F5E9;
            --primary-yellow: #FFD600;
            --gold-yellow: #FFC107;
            --light-yellow: #FFF9C4;
            --accent-yellow: #FFEB3B;
            --text-dark: #1B3C1F;
            --text-light: #4A6350;
            --white: #FFFFFF;
            --shadow: rgba(46, 125, 50, 0.15);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', 'Roboto', system-ui, sans-serif;
            color: var(--text-dark);
            line-height: 1.6;
            overflow-x: hidden;
            background: #f8f9fa;
        }

        /* Main website content (hidden initially) */
        .main-content {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            display: none; /* Hidden until welcome modal is dismissed */
        }

        .main-content.show {
            display: block;
        }

        .site-header {
            background: var(--dark-green);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .site-content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        .content-card {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        }

        .content-card h2 {
            color: var(--dark-green);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 3px solid var(--primary-yellow);
        }

        /* Fullscreen Welcome Modal */
        .welcome-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--dark-green) 0%, var(--primary-green) 50%, var(--gold-yellow) 100%);
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 1;
            visibility: visible;
            transition: opacity 0.8s ease, visibility 0.8s ease;
            padding: 20px;
            overflow-y: auto;
        }

        .welcome-modal.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Modal Container */
        .modal-container {
            width: 100%;
            max-width: 1000px;
            background: rgba(255, 255, 255, 0.98);
            border-radius: 24px;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            position: relative;
            animation: modalAppear 1s ease-out;
            max-height: 90vh;
            overflow-y: auto;
        }

        @keyframes modalAppear {
            0% {
                opacity: 0;
                transform: scale(0.8) translateY(100px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* Modal Header Banner */
        .modal-header {
            background: linear-gradient(90deg, var(--dark-green) 0%, var(--primary-green) 50%, var(--gold-yellow) 100%);
            height: 20px;
            width: 100%;
        }

        .modal-content {
            padding: 60px;
            position: relative;
        }

        /* Decorative leaf elements */
        .leaf-decoration {
            position: absolute;
            opacity: 0.1;
            color: var(--primary-green);
            z-index: 0;
            font-size: 120px;
        }

        .leaf-1 {
            top: 5%;
            left: 5%;
            transform: rotate(-20deg);
        }

        .leaf-2 {
            bottom: 5%;
            right: 5%;
            transform: rotate(40deg);
        }

        /* Modal title section */
        .modal-title {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            z-index: 1;
        }

        .modal-title h1 {
            font-size: 52px;
            color: var(--dark-green);
            margin-bottom: 15px;
            font-weight: 800;
            letter-spacing: 1px;
        }

        .title-divider {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 25px auto;
            width: 350px;
        }

        .title-divider .line {
            height: 4px;
            background: linear-gradient(to right, transparent, var(--gold-yellow), transparent);
            flex-grow: 1;
        }

        .title-divider .icon {
            margin: 0 25px;
            color: var(--primary-yellow);
            font-size: 32px;
            background: var(--dark-green);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Guest photo section */
        .guest-photo-container {
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
            position: relative;
            z-index: 1;
        }

        .guest-photo-frame {
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-yellow), var(--gold-yellow));
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
            box-shadow: 0 25px 50px rgba(46, 125, 50, 0.35);
            position: relative;
            border: 10px solid var(--dark-green);
            animation: photoGlow 3s infinite alternate;
        }

        @keyframes photoGlow {
            0% {
                box-shadow: 0 25px 50px rgba(46, 125, 50, 0.35);
            }
            100% {
                box-shadow: 0 25px 60px rgba(255, 214, 0, 0.45);
            }
        }

        .guest-photo {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            border: 8px solid var(--white);
        }

        .guest-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Guest information */
        .guest-info {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
            z-index: 1;
        }

        .guest-name {
            font-size: 44px;
            color: var(--dark-green);
            margin-bottom: 15px;
            font-weight: 700;
            position: relative;
            display: inline-block;
        }

        .guest-name:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 180px;
            height: 5px;
            background: var(--primary-yellow);
        }

        .guest-title {
            font-size: 32px;
            color: var(--primary-green);
            margin-bottom: 15px;
            font-weight: 600;
        }

        .guest-organization {
            font-size: 26px;
            color: var(--light-green);
            font-weight: 500;
            background: var(--pale-green);
            display: inline-block;
            padding: 12px 30px;
            border-radius: 35px;
            margin-top: 20px;
        }

        /* Welcome text section */
        .welcome-text {
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .welcome-text p {
            font-size: 24px;
            color: var(--text-light);
            margin-bottom: 30px;
            line-height: 1.8;
        }

        .highlighted-text {
            background: linear-gradient(120deg, var(--light-yellow) 0%, var(--pale-green) 100%);
            padding: 35px 45px;
            border-radius: 20px;
            margin: 40px 0;
            border-left: 10px solid var(--primary-yellow);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        /* Enter Button */
        .enter-button-container {
            text-align: center;
            margin-top: 60px;
            position: relative;
            z-index: 1;
        }

        .enter-button {
            background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
            color: white;
            border: none;
            padding: 22px 60px;
            font-size: 26px;
            font-weight: 600;
            border-radius: 60px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 15px 40px rgba(27, 94, 32, 0.5);
            display: inline-flex;
            align-items: center;
            gap: 20px;
        }

        .enter-button:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(27, 94, 32, 0.7);
            background: linear-gradient(135deg, var(--dark-green), var(--primary-green));
        }

        .enter-button:active {
            transform: translateY(-4px);
        }

        /* Footer section */
        .modal-footer {
            margin-top: 50px;
            text-align: center;
            padding-top: 30px;
            border-top: 3px dashed var(--light-green);
            position: relative;
            z-index: 1;
        }

        .footer-text {
            font-size: 26px;
            color: var(--dark-green);
            font-style: italic;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .footer-signature {
            font-size: 24px;
            color: var(--primary-green);
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .footer-signature i {
            color: var(--primary-yellow);
        }

        /* Close button (top right) */
        .modal-close {
            position: absolute;
            top: 25px;
            right: 25px;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 24px;
            color: var(--dark-green);
            cursor: pointer;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .modal-close:hover {
            background: var(--primary-yellow);
            transform: rotate(90deg);
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .modal-content {
                padding: 40px;
            }
            
            .modal-title h1 {
                font-size: 42px;
            }
            
            .guest-name {
                font-size: 36px;
            }
            
            .guest-title {
                font-size: 26px;
            }
            
            .guest-photo-frame {
                width: 240px;
                height: 240px;
            }
            
            .leaf-decoration {
                font-size: 80px;
            }
        }

        @media (max-width: 768px) {
            .modal-content {
                padding: 30px;
            }
            
            .modal-title h1 {
                font-size: 36px;
            }
            
            .title-divider {
                width: 280px;
            }
            
            .title-divider .icon {
                width: 60px;
                height: 60px;
                font-size: 26px;
            }
            
            .guest-name {
                font-size: 32px;
            }
            
            .guest-title {
                font-size: 22px;
            }
            
            .guest-photo-frame {
                width: 200px;
                height: 200px;
            }
            
            .enter-button {
                padding: 18px 45px;
                font-size: 22px;
            }
            
            .site-content {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .modal-content {
                padding: 20px 15px;
            }
            
            .modal-title h1 {
                font-size: 30px;
            }
            
            .title-divider {
                width: 220px;
            }
            
            .guest-name {
                font-size: 28px;
            }
            
            .guest-title {
                font-size: 20px;
            }
            
            .guest-organization {
                font-size: 18px;
                padding: 10px 20px;
            }
            
            .guest-photo-frame {
                width: 180px;
                height: 180px;
                border-width: 6px;
            }
            
            .welcome-text p {
                font-size: 18px;
            }
            
            .enter-button {
                padding: 15px 35px;
                font-size: 20px;
            }
        }

        /* Animation for modal elements */
        @keyframes fadeInUp {
            from { 
                opacity: 0; 
                transform: translateY(40px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }

        .modal-title, .guest-photo-container, .guest-info, .welcome-text, .enter-button-container, .modal-footer {
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards;
        }

        .guest-photo-container {
            animation-delay: 0.3s;
        }

        .guest-info {
            animation-delay: 0.6s;
        }

        .welcome-text {
            animation-delay: 0.9s;
        }

        .enter-button-container {
            animation-delay: 1.2s;
        }

        .modal-footer {
            animation-delay: 1.5s;
        }

        /* Backdrop blur effect */
        .welcome-modal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(5px);
            z-index: -1;
        }
    </style>
</head>
<body>
    <!-- Fullscreen Welcome Modal -->
    <div class="welcome-modal" id="welcomeModal">
        <div class="modal-container">
            <button class="modal-close" id="closeModal">
                <i class="fas fa-times"></i>
            </button>
            
            <div class="modal-header"></div>
            
            <div class="leaf-decoration leaf-1">
                <i class="fas fa-leaf"></i>
            </div>
            <div class="leaf-decoration leaf-2">
                <i class="fas fa-leaf"></i>
            </div>
            
            <div class="modal-content">
                <div class="modal-title">
                    <h1>Honorable Welcome</h1>
                    <div class="title-divider">
                        <div class="line"></div>
                        <div class="icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="line"></div>
                    </div>
                </div>

                <div class="guest-photo-container">
                    <div class="guest-photo-frame">
                        <div class="guest-photo">
                            <!-- Placeholder image - replace with actual image -->
                            <img src="images/Secretary.jpg" alt="Mr. Shahid Mohi-Ud-Din">
                        </div>
                    </div>
                </div>

                <div class="guest-info">
                    <h2 class="guest-name">Mr. Shahid Mohi-Ud-Din</h2>
                    <h3 class="guest-title">Secretary</h3>
                    <p class="guest-organization">Elementary & Secondary Education Department</p>
                </div>

                <div class="welcome-text">
                    <p>
                        It is with immense pleasure and honor that we extend our warmest welcome to you today. 
                        Your presence graces this occasion with significance and serves as a beacon of inspiration 
                        for all dedicated to educational excellence.
                    </p>
                    
                    <div class="highlighted-text">
                        <p>
                            Your visionary leadership and steadfast commitment to strengthening our educational 
                            framework have been transformative. We deeply value the guidance and direction you 
                            provide, which shapes the future of learning for generations to come.
                        </p>
                    </div>
                    
                    <p>
                        We are truly delighted to host you at today's special luncheon gathering. 
                        May this visit be both enjoyable and memorable, and may our exchange of ideas 
                        further enrich our shared mission in education.
                    </p>
                </div>

                <div class="enter-button-container">
                    <button class="enter-button" id="enterSite">
                        <i class="fas fa-door-open"></i>
                        Enter the Website
                        <i class="fas fa-arrow-right"></i>
                    </button>
                </div>

                <div class="modal-footer">
                    <p class="footer-text">With highest respect and warm regards</p>
                    <p class="footer-signature">
                        <i class="fas fa-heart"></i>
                        The Education Department Team
                        <i class="fas fa-heart"></i>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Website Content -->
    <div class="main-content" id="mainContent">
        <header class="site-header">
            <h1><i class="fas fa-graduation-cap"></i> Education Department Portal</h1>
            <p>Welcome to the official online platform of the Elementary & Secondary Education Department</p>
        </header>
        
        <div class="site-content">
            <div class="content-card">
                <h2><i class="fas fa-bullhorn"></i> Latest Announcements</h2>
                <ul>
                    <li><strong>New Curriculum Framework:</strong> Implementation starting next academic year</li>
                    <li><strong>Teacher Training Program:</strong> Registrations open for summer workshops</li>
                    <li><strong>School Infrastructure Grants:</strong> Applications deadline extended to June 30</li>
                    <li><strong>Annual Examination Schedule:</strong> Revised dates published</li>
                </ul>
            </div>
            
            <div class="content-card">
                <h2><i class="fas fa-calendar-alt"></i> Upcoming Events</h2>
                <ul>
                    <li>Education Summit 2023 - July 15-17</li>
                    <li>Regional Science Fair - August 5</li>
                    <li>Teacher Appreciation Week - September 4-8</li>
                    <li>Annual Awards Ceremony - October 20</li>
                </ul>
            </div>
        </div>
        
        <div class="content-card">
            <h2><i class="fas fa-chart-line"></i> Department Overview</h2>
            <p>The Elementary & Secondary Education Department is committed to providing quality education to all students. Our mission is to create an inclusive, innovative, and effective educational environment that prepares students for the challenges of the 21st century.</p>
            
            <div style="display: flex; justify-content: space-between; margin-top: 20px;">
                <div style="text-align: center;">
                    <h3 style="color: var(--primary-green);">2,500+</h3>
                    <p>Schools</p>
                </div>
                <div style="text-align: center;">
                    <h3 style="color: var(--primary-green);">45,000+</h3>
                    <p>Teachers</p>
                </div>
                <div style="text-align: center;">
                    <h3 style="color: var(--primary-green);">850,000+</h3>
                    <p>Students</p>
                </div>
                <div style="text-align: center;">
                    <h3 style="color: var(--primary-green);">98%</h3>
                    <p>Literacy Rate</p>
                </div>
            </div>
        </div>
        
        <footer style="text-align: center; margin-top: 40px; padding: 20px; color: var(--text-light);">
            <p>© 2023 Elementary & Secondary Education Department. All rights reserved.</p>
            <p style="margin-top: 10px;">
                <button id="showWelcomeAgain" style="background: var(--primary-green); color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">
                    <i class="fas fa-redo"></i> Show Welcome Screen Again
                </button>
            </p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const welcomeModal = document.getElementById('welcomeModal');
            const enterButton = document.getElementById('enterSite');
            const closeButton = document.getElementById('closeModal');
            const mainContent = document.getElementById('mainContent');
            const showWelcomeAgain = document.getElementById('showWelcomeAgain');
            
            // Check if user has already visited (using localStorage)
            const hasVisited = localStorage.getItem('hasVisited');
            
            // Show modal if it's first visit, otherwise show main content
            if (!hasVisited) {
                welcomeModal.classList.remove('hidden');
                mainContent.classList.remove('show');
            } else {
                welcomeModal.classList.add('hidden');
                mainContent.classList.add('show');
            }
            
            // Enter button click handler
            enterButton.addEventListener('click', function() {
                welcomeModal.classList.add('hidden');
                mainContent.classList.add('show');
                localStorage.setItem('hasVisited', 'true');
                
                // Add entrance animation to main content
                mainContent.style.animation = 'fadeInUp 1s ease';
                setTimeout(() => {
                    mainContent.style.animation = '';
                }, 1000);
            });
            
            // Close button click handler
            closeButton.addEventListener('click', function() {
                welcomeModal.classList.add('hidden');
                mainContent.classList.add('show');
                localStorage.setItem('hasVisited', 'true');
            });
            
            // Show welcome screen again button
            showWelcomeAgain.addEventListener('click', function() {
                welcomeModal.classList.remove('hidden');
                mainContent.classList.remove('show');
            });
            
            // Close modal with Escape key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && !welcomeModal.classList.contains('hidden')) {
                    welcomeModal.classList.add('hidden');
                    mainContent.classList.add('show');
                    localStorage.setItem('hasVisited', 'true');
                }
            });
            
            // Add photo hover effect
            const guestPhoto = document.querySelector('.guest-photo-frame');
            if (guestPhoto) {
                guestPhoto.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.05) rotate(5deg)';
                });
                
                guestPhoto.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1) rotate(0deg)';
                });
            }
            
            // Add subtle floating animation to leaf decorations
            const leaves = document.querySelectorAll('.leaf-decoration');
            leaves.forEach(leaf => {
                leaf.style.transition = 'transform 4s ease-in-out';
                setInterval(() => {
                    leaf.style.transform = leaf.style.transform.includes('rotate(-20deg)') 
                        ? 'rotate(20deg) translateY(-20px)' 
                        : 'rotate(-20deg) translateY(0)';
                }, 4000);
            });
        });
    </script>
</body>
</html>