<?php include 'includes/header.php' ?>

<!-- Breadcrumb -->

<?php
$breadcrumb_title = "Extra Curricular";
$breadcrumb_path = "Life @ Aryabhatta > Events > Extra Curricular";

include 'includes/breadcrumb.php';

?>


<div class="gallery container-fluid py-5 px-5">
    <h1 class="heading color-brown">Vigam The Farewell Party 2025</h1><br>
    <!-- Gallery Section -->
    <div class="row g-4 gallery-section">
        <!-- Gallery Cards -->
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/a1.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/a2.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/a3.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/a4.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
    </div>
</div>

<div class="gallery container-fluid py-5 px-5">
    <h1 class="heading color-brown">Environment Club: Cleanliness Raily</h1><br>
    <!-- Gallery Section -->
    <div class="row g-4 gallery-section">
        <!-- Gallery Cards -->
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/e1.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/e2.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/e3.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/e4.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
    </div>
</div>

<div class="gallery container-fluid py-5 px-5">
    <h1 class="heading color-brown">Picnic to Jaipur (Jantar Mantar, B. Zoo, Amer Fort)</h1><br>
    <!-- Gallery Section -->
    <div class="row g-4 gallery-section">
        <!-- Gallery Cards -->
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/p1.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/p2.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/p3.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/extracurricular/p4.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
            </div>
        </div>
    </div>
</div>


<!-- Modal for Full-Screen Image -->
<div id="imageModal" class="modal" onclick="closeModal()">
    <span class="close">&times;</span>
    <img class="modal-content" id="fullImage">
</div>

<style>
    /* Gallery card styling */
    .gallery-card {
        border-radius: 16px;
        height: 200px;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .gallery-card:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        scale: 1.02;
    }

    .gallery .heading {
        font-size: 2rem !important;
        font-weight: bold;
        text-align: center;
    }

    .gallery-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
    }


    /* Modal styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1050;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
        align-content: center;
    }

    .modal-content {
        margin: auto;
        display: block;
        width: auto;
        height: auto;
        max-width: 90%;
        max-height: 90%;
    }

    .close {
        position: absolute;
        top: 15px;
        right: 25px;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }
</style>
<script>
    // Function to open modal and display the clicked image
    function openModal(img) {
        const modal = document.getElementById("imageModal");
        const modalImg = document.getElementById("fullImage");
        modal.style.display = "block";
        modalImg.src = img.src;
    }

    // Function to close the modal
    function closeModal() {
        const modal = document.getElementById("imageModal");
        modal.style.display = "none";
    }
</script>



<!-- Footer -->

<?php include 'includes/footer.php' ?>