```html
<!-- ============================================================
     INDEPENDENCE DAY 2026
     COMPLETE PHOTO + VIDEO GALLERY
     
     LOCAL VIDEOS:
     Currently HIDDEN but code is preserved.
     To show them later, change:
     showIndependenceLocalVideos = false;
     to:
     showIndependenceLocalVideos = true;
=============================================================== -->


<section class="independence-gallery-section" id="independence-day-2026">

    <div class="container">

        <!-- ====================================================
             MAIN HEADING
        ===================================================== -->

        <div class="independence-heading">

            <h2>
                Inter House Patriotic Song, Dance &amp; Tableau Competition
            </h2>

            <div class="independence-heading-line"></div>

            <p>
                Glimpses of Inter House Patriotic Song, Dance &amp; Tableau Competition
            </p>

        </div>


        <!-- ====================================================
             PHOTO GALLERY
        ===================================================== -->

        <div class="independence-gallery-heading">

            <span>
                <i class="bi bi-images"></i>
            </span>

            <h3>Photo Gallery</h3>

        </div>


        <div
            class="independence-photo-grid"
            id="independencePhotoGrid">
        </div>



        <!-- ====================================================
             VIDEO GALLERY
        ===================================================== -->

        <div class="independence-gallery-heading independence-video-heading">

            <span>
                <i class="bi bi-camera-video-fill"></i>
            </span>

            <h3>Video Gallery</h3>

        </div>


        <div
            class="independence-video-grid"
            id="independenceVideoGrid">
        </div>

    </div>

</section>



<!-- ============================================================
     PHOTO LIGHTBOX
=============================================================== -->

<div
    class="independence-lightbox"
    id="independencePhotoLightbox"
>

    <button
        type="button"
        class="independence-lightbox-close"
        id="independencePhotoClose"
        aria-label="Close"
    >
        &times;
    </button>


    <button
        type="button"
        class="independence-lightbox-arrow independence-lightbox-prev"
        id="independencePhotoPrev"
        aria-label="Previous Photo"
    >
        &#10094;
    </button>


    <div class="independence-lightbox-image-wrapper">

        <img
            id="independenceLightboxImage"
            src=""
            alt="Independence Day 2026"
        >


        <div
            class="independence-photo-counter"
            id="independencePhotoCounter"
        >
            1 / 17
        </div>

    </div>


    <button
        type="button"
        class="independence-lightbox-arrow independence-lightbox-next"
        id="independencePhotoNext"
        aria-label="Next Photo"
    >
        &#10095;
    </button>

</div>



<!-- ============================================================
     LOCAL VIDEO LIGHTBOX
     
     KEPT FOR FUTURE USE.
     
     Local videos are currently HIDDEN.
=============================================================== -->

<div
    class="independence-lightbox"
    id="independenceVideoLightbox"
>

    <button
        type="button"
        class="independence-lightbox-close"
        id="independenceVideoClose"
        aria-label="Close"
    >
        &times;
    </button>


    <div class="independence-video-popup">

        <video
            id="independenceLightboxVideo"
            playsinline
            preload="metadata"
        ></video>


        <div class="independence-video-controls">

            <button
                type="button"
                id="independenceVideoPlayPause"
                title="Play / Pause"
                aria-label="Play / Pause"
            >
                &#9654;
            </button>


            <button
                type="button"
                id="independenceVideoMute"
                title="Mute / Unmute"
                aria-label="Mute / Unmute"
            >
                &#128266;
            </button>


            <div class="independence-video-progress">

                <input
                    type="range"
                    id="independenceVideoProgress"
                    min="0"
                    max="100"
                    value="0"
                    step="0.1"
                    aria-label="Video progress"
                >

            </div>


            <span id="independenceVideoTitle">
                Independence Day 2026
            </span>

        </div>

    </div>

</div>



<!-- ============================================================
     YOUTUBE VIDEO LIGHTBOX
=============================================================== -->

<div
    class="independence-lightbox"
    id="independenceYouTubeLightbox"
>

    <button
        type="button"
        class="independence-lightbox-close"
        id="independenceYouTubeClose"
        aria-label="Close"
    >
        &times;
    </button>


    <div class="independence-youtube-popup">

        <iframe
            id="independenceYouTubeFrame"
            src=""
            title="YouTube Video"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen>
        </iframe>

    </div>

</div>



<!-- ============================================================
     CSS
=============================================================== -->

<style>

/* ============================================================
   MAIN SECTION
=============================================================== */

.independence-gallery-section {

    width: 100%;
    padding: 70px 0;
    background: #f8f9fa;

}


/* ============================================================
   MAIN HEADING
=============================================================== */

.independence-heading {

    text-align: center;
    margin-bottom: 50px;

}


.independence-heading h2 {

    margin: 0;
    color: #003366;
    font-size: 36px;
    font-weight: 700;

}


.independence-heading p {

    margin-top: 14px;
    color: #666;
    font-size: 17px;

}


.independence-heading-line {

    width: 85px;
    height: 4px;
    margin: 15px auto 0;
    background: #0d6efd;
    border-radius: 10px;

}


/* ============================================================
   GALLERY HEADINGS
=============================================================== */

.independence-gallery-heading {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;

}


.independence-gallery-heading span {

    font-size: 27px;

}


.independence-gallery-heading h3 {

    margin: 0;
    color: #003366;
    font-size: 28px;
    font-weight: 700;

}


.independence-video-heading {

    margin-top: 65px;

}


/* ============================================================
   PHOTO GRID
=============================================================== */

.independence-photo-grid {

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;

}


/* ============================================================
   PHOTO TILE
=============================================================== */

.independence-photo-card {

    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 12px;
    background: #ddd;
    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.10);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.independence-photo-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.20);

}


.independence-photo-card img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition:
        transform 0.5s ease;

}


.independence-photo-card:hover img {

    transform: scale(1.08);

}


/* ============================================================
   PHOTO OVERLAY
=============================================================== */

.independence-photo-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);

    transition:
        background 0.3s ease;

}


.independence-photo-card:hover
.independence-photo-overlay {

    background: rgba(0,0,0,0.20);

}


/* ============================================================
   VIDEO GRID
=============================================================== */

.independence-video-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

}


/* ============================================================
   LOCAL VIDEO TILE
=============================================================== */

.independence-video-card {

    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.12);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.independence-video-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.22);

}


.independence-video-card video {

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;

}


/* ============================================================
   LOCAL VIDEO OVERLAY
=============================================================== */

.independence-video-overlay {

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,0.08);

    transition:
        background 0.3s ease;

}


.independence-video-card:hover
.independence-video-overlay {

    background: rgba(0,0,0,0.18);

}


/* ============================================================
   LOCAL VIDEO PLAY BUTTON
=============================================================== */

.independence-video-play {

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 5px;

    border-radius: 50%;

    color: white;
    background: rgba(0,0,0,0.72);

    font-size: 28px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


.independence-video-card:hover
.independence-video-play {

    transform: scale(1.12);
    background: rgba(13,110,253,0.90);

}


/* ============================================================
   YOUTUBE CARD
=============================================================== */

.independence-youtube-card {

    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.12);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.independence-youtube-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.22);

}


.independence-youtube-card img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}


/* ============================================================
   YOUTUBE OVERLAY
=============================================================== */

.independence-youtube-overlay {

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,0.12);

    transition:
        background 0.3s ease;

}


.independence-youtube-card:hover
.independence-youtube-overlay {

    background: rgba(0,0,0,0.25);

}


/* ============================================================
   YOUTUBE PLAY BUTTON
=============================================================== */

.independence-youtube-play {

    width: 68px;
    height: 48px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    background: #ff0000;

    font-size: 25px;
    padding-left: 3px;

    box-shadow:
        0 5px 20px rgba(0,0,0,0.35);

    transition:
        transform 0.3s ease;

}


.independence-youtube-card:hover
.independence-youtube-play {

    transform: scale(1.12);

}


/* ============================================================
   LIGHTBOX
=============================================================== */

.independence-lightbox {

    position: fixed;
    inset: 0;
    z-index: 999999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 25px;

    background: rgba(0,0,0,0.95);

}


.independence-lightbox.active {

    display: flex;

    animation:
        independenceLightboxFade 0.25s ease;

}


@keyframes independenceLightboxFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* ============================================================
   CLOSE BUTTON
=============================================================== */

.independence-lightbox-close {

    position: absolute;
    top: 18px;
    right: 25px;
    z-index: 20;

    width: 52px;
    height: 52px;

    border: none;
    border-radius: 50%;

    color: white;
    background: rgba(255,255,255,0.15);

    font-size: 38px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;

}


.independence-lightbox-close:hover {

    background: #dc3545;
    transform: rotate(90deg);

}


/* ============================================================
   PHOTO LIGHTBOX
=============================================================== */

.independence-lightbox-image-wrapper {

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    max-width: 86vw;
    max-height: 88vh;

}


.independence-lightbox-image-wrapper img {

    max-width: 86vw;
    max-height: 84vh;

    width: auto;
    height: auto;

    object-fit: contain;
    display: block;

    border-radius: 6px;

    box-shadow:
        0 10px 50px rgba(0,0,0,0.60);

}


/* ============================================================
   PHOTO COUNTER
=============================================================== */

.independence-photo-counter {

    position: absolute;

    left: 50%;
    bottom: -38px;

    transform: translateX(-50%);

    padding: 5px 14px;

    border-radius: 20px;

    color: white;
    background: rgba(0,0,0,0.70);

    font-size: 14px;

}


/* ============================================================
   PHOTO ARROWS
=============================================================== */

.independence-lightbox-arrow {

    position: absolute;

    top: 50%;
    z-index: 20;

    width: 55px;
    height: 75px;

    transform: translateY(-50%);

    border: none;
    border-radius: 10px;

    color: white;
    background: rgba(255,255,255,0.15);

    font-size: 38px;

    cursor: pointer;

    transition:
        background 0.3s ease;

}


.independence-lightbox-arrow:hover {

    background: rgba(13,110,253,0.90);

}


.independence-lightbox-prev {
    left: 25px;
}


.independence-lightbox-next {
    right: 25px;
}


/* ============================================================
   LOCAL VIDEO POPUP
=============================================================== */

.independence-video-popup {

    width: min(1100px, 90vw);
    max-height: 90vh;

    background: #000;

    border-radius: 10px;
    overflow: hidden;

    box-shadow:
        0 10px 50px rgba(0,0,0,0.70);

}


.independence-video-popup video {

    width: 100%;
    max-height: 80vh;
    display: block;
    background: #000;

}


/* ============================================================
   CUSTOM VIDEO CONTROLS
=============================================================== */

.independence-video-controls {

    min-height: 55px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 15px;

    background: #151515;
    color: white;

}


.independence-video-controls button {

    flex-shrink: 0;

    width: 42px;
    height: 38px;

    border: none;
    border-radius: 6px;

    color: white;
    background: rgba(255,255,255,0.12);

    font-size: 17px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

}


.independence-video-controls button:hover {

    background: rgba(13,110,253,0.90);

}


/* ============================================================
   PROGRESS
=============================================================== */

.independence-video-progress {

    flex: 1;
    min-width: 100px;

    display: flex;
    align-items: center;

}


#independenceVideoProgress {

    width: 100%;
    height: 5px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border: none;
    border-radius: 10px;

    outline: none;
    cursor: pointer;

    background:
        linear-gradient(
            to right,
            #0d6efd 0%,
            #0d6efd 0%,
            #555 0%,
            #555 100%
        );

}


#independenceVideoProgress::-webkit-slider-thumb {

    appearance: none;
    -webkit-appearance: none;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    border: 2px solid white;

    background: #0d6efd;

    cursor: pointer;

}


#independenceVideoProgress::-moz-range-thumb {

    width: 15px;
    height: 15px;

    border-radius: 50%;

    border: 2px solid white;

    background: #0d6efd;

    cursor: pointer;

}


/* ============================================================
   VIDEO TITLE
=============================================================== */

.independence-video-controls span {

    flex-shrink: 0;

    margin-left: 5px;

    color: #ccc;

    font-size: 14px;

}


/* ============================================================
   YOUTUBE POPUP
=============================================================== */

.independence-youtube-popup {

    width: min(1100px, 90vw);

    aspect-ratio: 16 / 9;

    background: #000;

    border-radius: 10px;
    overflow: hidden;

    box-shadow:
        0 10px 50px rgba(0,0,0,0.70);

}


.independence-youtube-popup iframe {

    width: 100%;
    height: 100%;

    display: block;

    border: none;

}


/* ============================================================
   TABLET
=============================================================== */

@media (max-width: 1100px) {

    .independence-photo-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .independence-video-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* ============================================================
   SMALL TABLET
=============================================================== */

@media (max-width: 850px) {

    .independence-photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .independence-video-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .independence-photo-card {
        height: 190px;
    }

    .independence-video-card,
    .independence-youtube-card {
        height: 200px;
    }

}


/* ============================================================
   MOBILE
=============================================================== */

@media (max-width: 600px) {

    .independence-gallery-section {
        padding: 50px 15px;
    }

    .independence-heading h2 {
        font-size: 27px;
    }

    .independence-heading p {
        font-size: 15px;
    }

    .independence-gallery-heading h3 {
        font-size: 23px;
    }

    .independence-photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .independence-photo-card {
        height: 160px;
        border-radius: 8px;
    }

    .independence-video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .independence-video-card,
    .independence-youtube-card {
        height: 160px;
        border-radius: 8px;
    }

    .independence-video-play {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .independence-youtube-play {
        width: 58px;
        height: 42px;
        font-size: 21px;
    }

    .independence-video-controls {
        gap: 7px;
        padding: 7px 10px;
    }

    .independence-video-progress {
        min-width: 60px;
    }

    .independence-video-controls span {
        display: none;
    }

    #independenceVideoProgress {
        height: 5px;
    }

    #independenceVideoProgress::-webkit-slider-thumb {
        width: 13px;
        height: 13px;
    }

    #independenceVideoProgress::-moz-range-thumb {
        width: 13px;
        height: 13px;
    }

    .independence-lightbox-arrow {
        width: 42px;
        height: 55px;
        font-size: 27px;
    }

    .independence-lightbox-prev {
        left: 8px;
    }

    .independence-lightbox-next {
        right: 8px;
    }

    .independence-lightbox-close {
        top: 10px;
        right: 10px;
        width: 45px;
        height: 45px;
        font-size: 32px;
    }

    .independence-lightbox-image-wrapper {
        max-width: 92vw;
    }

    .independence-lightbox-image-wrapper img {
        max-width: 92vw;
        max-height: 78vh;
    }

    .independence-video-popup {
        width: 94vw;
    }

    .independence-video-popup video {
        max-height: 75vh;
    }

    .independence-youtube-popup {
        width: 94vw;
    }

}


/* ============================================================
   VERY SMALL MOBILE
=============================================================== */

@media (max-width: 400px) {

    .independence-photo-grid {
        gap: 8px;
    }

    .independence-photo-card {
        height: 140px;
    }

    .independence-video-card,
    .independence-youtube-card {
        height: 145px;
    }

    .independence-video-controls button {
        width: 38px;
        height: 36px;
    }

    .independence-video-progress {
        min-width: 45px;
    }

}

</style>



<!-- ============================================================
     JAVASCRIPT
=============================================================== -->

<script>

/* ============================================================
   INDEPENDENCE DAY 2026 GALLERY
=============================================================== */


/* ============================================================
   FOLDER LOCATION
=============================================================== */

const independenceFolder =
    "images/IndependenceDay2026/";


/* ============================================================
   PHOTO COUNT
=============================================================== */

const independenceTotalPhotos = 17;


/* ============================================================
   LOCAL MP4 VIDEO LIST
     
   KEPT FOR FUTURE USE.
     
   Currently HIDDEN using:
   showIndependenceLocalVideos = false;
=============================================================== */

const independenceVideos = [

    "IndependenceDay20261.mp4",

    "IndependenceDay20262.mp4",

    "IndependenceDay20263.mp4",

    "IndependenceDay20264.mp4",

    "IndependenceDay20265.mp4",

    "IndependenceDay20266.mp4",

    "IndependenceDay20267.mp4",

    "IndependenceDay20268.mp4",

    "IndependenceDay20269.mp4",

    "IndependenceDay202610.mp4",

    "IndependenceDay202611.mp4",

    "IndependenceDay202612.mp4"

];


/* ============================================================
   SHOW / HIDE LOCAL VIDEOS
     
   false = HIDDEN
   true  = SHOW LOCAL VIDEOS
=============================================================== */

const showIndependenceLocalVideos = false;


/* ============================================================
   YOUTUBE VIDEO LIST
=============================================================== */

const independenceYouTubeVideos = [

    {
        url: "https://youtu.be/sKSER7_41pE",
        title: "Patriotic Song Competition"
    },

    {
        url: "https://youtu.be/2Xw19IX3jws",
        title: "Patriotic Dance Competition"
    },

    {
        url: "https://youtu.be/3AEe5jSjOYc",
        title: "Tableau Competition"
    },

    {
        url: "https://youtu.be/bI6wNU5wJjk",
        title: "Tableau Competition"
    },

    {
        url: "https://youtu.be/A6IR-6CtNPk",
        title: "Tableau Competition"
    },

    {
        url: "https://youtu.be/bYI3G0naxRg",
        title: "Tableau Competition"
    },

    {
        url: "https://youtu.be/miV9Gl3uu4g",
        title: "Tableau Competition"
    },

    {
        url: "https://youtu.be/oiQ6sTA_OmA",
        title: "Tableau Competition"
    },

    {
        url: "https://youtu.be/SU6qKs7uEls",
        title: "Tableau Competition"
    },

    {
        url: "https://youtu.be/fNujPpds10I",
        title: "Tableau Competition"
    },

    {
        url: "https://youtu.be/AGWjbkW9XcU",
        title: "Tableau Competition"
    },

    {
        url: "https://youtu.be/DkrMheKNdlY",
        title: "Tableau Competition"
    }

];


/* ============================================================
   CREATE PHOTO FILE NAMES
=============================================================== */

const independencePhotos = [];

for (
    let i = 1;
    i <= independenceTotalPhotos;
    i++
) {

    independencePhotos.push(

        independenceFolder +
        "IndependenceDay2026" +
        i +
        ".jpeg"

    );

}


/* ============================================================
   CREATE LOCAL VIDEO PATHS
     
   KEPT FOR FUTURE USE.
=============================================================== */

const independenceVideoFiles = independenceVideos.map(

    function(video) {

        return independenceFolder + video;

    }

);


/* ============================================================
   GET HTML ELEMENTS
=============================================================== */

const independencePhotoGrid =
    document.getElementById(
        "independencePhotoGrid"
    );


const independenceVideoGrid =
    document.getElementById(
        "independenceVideoGrid"
    );


const independencePhotoLightbox =
    document.getElementById(
        "independencePhotoLightbox"
    );


const independenceVideoLightbox =
    document.getElementById(
        "independenceVideoLightbox"
    );


const independenceYouTubeLightbox =
    document.getElementById(
        "independenceYouTubeLightbox"
    );


const independenceLightboxImage =
    document.getElementById(
        "independenceLightboxImage"
    );


const independenceLightboxVideo =
    document.getElementById(
        "independenceLightboxVideo"
    );


const independenceYouTubeFrame =
    document.getElementById(
        "independenceYouTubeFrame"
    );


const independencePhotoCounter =
    document.getElementById(
        "independencePhotoCounter"
    );


const independencePhotoClose =
    document.getElementById(
        "independencePhotoClose"
    );


const independencePhotoPrev =
    document.getElementById(
        "independencePhotoPrev"
    );


const independencePhotoNext =
    document.getElementById(
        "independencePhotoNext"
    );


const independenceVideoClose =
    document.getElementById(
        "independenceVideoClose"
    );


const independenceYouTubeClose =
    document.getElementById(
        "independenceYouTubeClose"
    );


const independenceVideoPlayPause =
    document.getElementById(
        "independenceVideoPlayPause"
    );


const independenceVideoMute =
    document.getElementById(
        "independenceVideoMute"
    );


const independenceVideoProgress =
    document.getElementById(
        "independenceVideoProgress"
    );


const independenceVideoTitle =
    document.getElementById(
        "independenceVideoTitle"
    );


/* ============================================================
   CURRENT PHOTO
=============================================================== */

let independenceCurrentPhoto = 0;


/* ============================================================
   YOUTUBE ID EXTRACTOR
=============================================================== */

function independenceGetYouTubeID(url) {

    let videoID = "";


    if (
        url.includes("youtube.com/watch")
    ) {

        try {

            const urlObject =
                new URL(url);

            videoID =
                urlObject.searchParams.get("v");

        }

        catch (error) {

            videoID = "";

        }

    }

    else if (
        url.includes("youtu.be/")
    ) {

        videoID =
            url.split("youtu.be/")[1]
            .split("?")[0]
            .split("&")[0];

    }

    else if (
        url.includes("youtube.com/shorts/")
    ) {

        videoID =
            url.split("youtube.com/shorts/")[1]
            .split("?")[0]
            .split("&")[0];

    }


    return videoID;

}


/* ============================================================
   CREATE PHOTO GALLERY
=============================================================== */

function independenceCreatePhotos() {

    independencePhotoGrid.innerHTML = "";


    independencePhotos.forEach(

        function(photo, index) {

            const card =
                document.createElement("div");


            card.className =
                "independence-photo-card";


            const image =
                document.createElement("img");


            image.src =
                photo;


            image.alt =
                "Independence Day 2026 Photo " +
                (index + 1);


            image.loading =
                "lazy";


            const overlay =
                document.createElement("div");


            overlay.className =
                "independence-photo-overlay";


            card.appendChild(image);

            card.appendChild(overlay);


            card.addEventListener(

                "click",

                function() {

                    independenceOpenPhoto(index);

                }

            );


            independencePhotoGrid.appendChild(card);

        }

    );

}


/* ============================================================
   CREATE LOCAL + YOUTUBE VIDEO GALLERY
=============================================================== */

function independenceCreateVideos() {

    independenceVideoGrid.innerHTML = "";


    /* ========================================================
       LOCAL MP4 VIDEOS
       
       CURRENTLY HIDDEN.
       
       The code is preserved so you can enable it later.
    ======================================================== */

    if (showIndependenceLocalVideos) {

        independenceVideoFiles.forEach(

            function(videoFile, index) {

                const card =
                    document.createElement("div");


                card.className =
                    "independence-video-card";


                const video =
                    document.createElement("video");


                video.src =
                    videoFile;


                video.preload =
                    "metadata";


                video.muted =
                    true;


                video.playsInline =
                    true;


                video.setAttribute(
                    "playsinline",
                    ""
                );


                const overlay =
                    document.createElement("div");


                overlay.className =
                    "independence-video-overlay";


                const play =
                    document.createElement("div");


                play.className =
                    "independence-video-play";


                play.innerHTML =
                    "&#9654;";


                overlay.appendChild(play);


                card.appendChild(video);

                card.appendChild(overlay);


                card.addEventListener(

                    "click",

                    function() {

                        independenceOpenVideo(index);

                    }

                );


                independenceVideoGrid.appendChild(card);

            }

        );

    }


    /* ========================================================
       YOUTUBE VIDEOS
       
       ALWAYS SHOWN.
    ======================================================== */

    independenceYouTubeVideos.forEach(

        function(youtubeVideo, index) {

            const videoID =
                independenceGetYouTubeID(
                    youtubeVideo.url
                );


            if (!videoID) {

                return;

            }


            const card =
                document.createElement("div");


            card.className =
                "independence-youtube-card";


            const thumbnail =
                document.createElement("img");


            thumbnail.src =
                "https://img.youtube.com/vi/" +
                videoID +
                "/hqdefault.jpg";


            thumbnail.alt =
                youtubeVideo.title ||
                "YouTube Video";


            thumbnail.loading =
                "lazy";


            const overlay =
                document.createElement("div");


            overlay.className =
                "independence-youtube-overlay";


            const play =
                document.createElement("div");


            play.className =
                "independence-youtube-play";


            play.innerHTML =
                "&#9654;";


            overlay.appendChild(play);


            card.appendChild(thumbnail);

            card.appendChild(overlay);


            card.addEventListener(

                "click",

                function() {

                    independenceOpenYouTube(index);

                }

            );


            independenceVideoGrid.appendChild(
                card
            );

        }

    );

}


/* ============================================================
   OPEN PHOTO
=============================================================== */

function independenceOpenPhoto(index) {

    independenceCurrentPhoto =
        index;


    independenceLightboxImage.src =
        independencePhotos[
            independenceCurrentPhoto
        ];


    independenceUpdatePhotoCounter();


    independencePhotoLightbox.classList.add(
        "active"
    );


    document.body.style.overflow =
        "hidden";

}


/* ============================================================
   CLOSE PHOTO
=============================================================== */

function independenceClosePhoto() {

    independencePhotoLightbox.classList.remove(
        "active"
    );


    independenceLightboxImage.src =
        "";


    document.body.style.overflow =
        "";

}


/* ============================================================
   NEXT PHOTO
=============================================================== */

function independenceNextPhoto() {

    independenceCurrentPhoto++;


    if (
        independenceCurrentPhoto >=
        independencePhotos.length
    ) {

        independenceCurrentPhoto = 0;

    }


    independenceLightboxImage.src =
        independencePhotos[
            independenceCurrentPhoto
        ];


    independenceUpdatePhotoCounter();

}


/* ============================================================
   PREVIOUS PHOTO
=============================================================== */

function independencePreviousPhoto() {

    independenceCurrentPhoto--;


    if (
        independenceCurrentPhoto < 0
    ) {

        independenceCurrentPhoto =
            independencePhotos.length - 1;

    }


    independenceLightboxImage.src =
        independencePhotos[
            independenceCurrentPhoto
        ];


    independenceUpdatePhotoCounter();

}


/* ============================================================
   PHOTO COUNTER
=============================================================== */

function independenceUpdatePhotoCounter() {

    independencePhotoCounter.textContent =

        (
            independenceCurrentPhoto + 1
        )

        +

        " / "

        +

        independencePhotos.length;

}


/* ============================================================
   RESET VIDEO PROGRESS
=============================================================== */

function independenceResetVideoProgress() {

    independenceVideoProgress.value =
        0;


    independenceVideoProgress.style.background =
        `linear-gradient(
            to right,
            #0d6efd 0%,
            #0d6efd 0%,
            #555 0%,
            #555 100%
        )`;

}


/* ============================================================
   UPDATE VIDEO PROGRESS
=============================================================== */

function independenceUpdateVideoProgress() {

    if (
        !independenceLightboxVideo.duration ||
        !isFinite(
            independenceLightboxVideo.duration
        )
    ) {

        return;

    }


    const percentage =

        (
            independenceLightboxVideo.currentTime /
            independenceLightboxVideo.duration
        ) * 100;


    independenceVideoProgress.value =
        percentage;


    independenceVideoProgress.style.background =

        `linear-gradient(
            to right,
            #0d6efd 0%,
            #0d6efd ${percentage}%,
            #555 ${percentage}%,
            #555 100%
        )`;

}


/* ============================================================
   VIDEO SEEK
=============================================================== */

independenceVideoProgress.addEventListener(

    "input",

    function() {

        if (
            !independenceLightboxVideo.duration ||
            !isFinite(
                independenceLightboxVideo.duration
            )
        ) {

            return;

        }


        const percentage =
            Number(
                independenceVideoProgress.value
            );


        independenceLightboxVideo.currentTime =

            (
                percentage / 100
            )

            *

            independenceLightboxVideo.duration;


        independenceUpdateVideoProgress();

    }

);


/* ============================================================
   VIDEO TIME UPDATE
=============================================================== */

independenceLightboxVideo.addEventListener(
    "timeupdate",
    independenceUpdateVideoProgress
);


/* ============================================================
   VIDEO LOADED
=============================================================== */

independenceLightboxVideo.addEventListener(

    "loadedmetadata",

    function() {

        independenceResetVideoProgress();

    }

);


/* ============================================================
   OPEN LOCAL VIDEO
       
   KEPT FOR FUTURE USE.
=============================================================== */

function independenceOpenVideo(index) {

    independenceLightboxVideo.pause();


    independenceLightboxVideo.src =
        independenceVideoFiles[index];


    independenceLightboxVideo.currentTime =
        0;


    independenceResetVideoProgress();


    independenceLightboxVideo.muted =
        false;


    independenceVideoTitle.textContent =
        "Independence Day 2026 - Video " +
        (index + 1);


    independenceVideoPlayPause.innerHTML =
        "&#10074;&#10074;";


    independenceVideoMute.innerHTML =
        "&#128266;";


    independenceVideoLightbox.classList.add(
        "active"
    );


    document.body.style.overflow =
        "hidden";


    independenceLightboxVideo.load();


    independenceLightboxVideo
        .play()
        .catch(

            function() {

                independenceVideoPlayPause.innerHTML =
                    "&#9654;";

            }

        );

}


/* ============================================================
   CLOSE LOCAL VIDEO
=============================================================== */

function independenceCloseVideo() {

    independenceLightboxVideo.pause();


    independenceLightboxVideo.currentTime =
        0;


    independenceLightboxVideo.removeAttribute(
        "src"
    );


    independenceLightboxVideo.load();


    independenceResetVideoProgress();


    independenceVideoLightbox.classList.remove(
        "active"
    );


    document.body.style.overflow =
        "";

}


/* ============================================================
   PLAY / PAUSE
=============================================================== */

function independenceTogglePlay() {

    if (
        independenceLightboxVideo.paused
    ) {

        independenceLightboxVideo.play();

    }

    else {

        independenceLightboxVideo.pause();

    }

}


/* ============================================================
   MUTE / UNMUTE
=============================================================== */

function independenceToggleMute() {

    independenceLightboxVideo.muted =
        !independenceLightboxVideo.muted;


    if (
        independenceLightboxVideo.muted
    ) {

        independenceVideoMute.innerHTML =
            "&#128263;";

    }

    else {

        independenceVideoMute.innerHTML =
            "&#128266;";

    }

}


/* ============================================================
   VIDEO PLAY EVENT
=============================================================== */

independenceLightboxVideo.addEventListener(

    "play",

    function() {

        independenceVideoPlayPause.innerHTML =
            "&#10074;&#10074;";

    }

);


/* ============================================================
   VIDEO PAUSE EVENT
=============================================================== */

independenceLightboxVideo.addEventListener(

    "pause",

    function() {

        independenceVideoPlayPause.innerHTML =
            "&#9654;";

    }

);


/* ============================================================
   VIDEO ENDED EVENT
=============================================================== */

independenceLightboxVideo.addEventListener(

    "ended",

    function() {

        independenceVideoPlayPause.innerHTML =
            "&#9654;";


        independenceVideoProgress.value =
            100;


        independenceVideoProgress.style.background =
            `linear-gradient(
                to right,
                #0d6efd 0%,
                #0d6efd 100%,
                #555 100%,
                #555 100%
            )`;

    }

);


/* ============================================================
   OPEN YOUTUBE VIDEO
=============================================================== */

function independenceOpenYouTube(index) {

    const youtubeVideo =
        independenceYouTubeVideos[index];


    const videoID =
        independenceGetYouTubeID(
            youtubeVideo.url
        );


    if (!videoID) {

        return;

    }


    independenceYouTubeFrame.src =
        "https://www.youtube.com/embed/" +
        videoID +
        "?autoplay=1&rel=0";


    independenceYouTubeLightbox.classList.add(
        "active"
    );


    document.body.style.overflow =
        "hidden";

}


/* ============================================================
   CLOSE YOUTUBE
=============================================================== */

function independenceCloseYouTube() {

    independenceYouTubeFrame.src =
        "";


    independenceYouTubeLightbox.classList.remove(
        "active"
    );


    document.body.style.overflow =
        "";

}


/* ============================================================
   BUTTON EVENTS
=============================================================== */

independencePhotoClose.addEventListener(
    "click",
    independenceClosePhoto
);


independencePhotoPrev.addEventListener(
    "click",
    independencePreviousPhoto
);


independencePhotoNext.addEventListener(
    "click",
    independenceNextPhoto
);


independenceVideoClose.addEventListener(
    "click",
    independenceCloseVideo
);


independenceYouTubeClose.addEventListener(
    "click",
    independenceCloseYouTube
);


independenceVideoPlayPause.addEventListener(
    "click",
    independenceTogglePlay
);


independenceVideoMute.addEventListener(
    "click",
    independenceToggleMute
);


/* ============================================================
   CLICK OUTSIDE PHOTO
=============================================================== */

independencePhotoLightbox.addEventListener(

    "click",

    function(event) {

        if (
            event.target ===
            independencePhotoLightbox
        ) {

            independenceClosePhoto();

        }

    }

);


/* ============================================================
   CLICK OUTSIDE LOCAL VIDEO
=============================================================== */

independenceVideoLightbox.addEventListener(

    "click",

    function(event) {

        if (
            event.target ===
            independenceVideoLightbox
        ) {

            independenceCloseVideo();

        }

    }

);


/* ============================================================
   CLICK OUTSIDE YOUTUBE
=============================================================== */

independenceYouTubeLightbox.addEventListener(

    "click",

    function(event) {

        if (
            event.target ===
            independenceYouTubeLightbox
        ) {

            independenceCloseYouTube();

        }

    }

);


/* ============================================================
   KEYBOARD CONTROLS
=============================================================== */

document.addEventListener(

    "keydown",

    function(event) {


        /* ====================================================
           PHOTO
        ==================================================== */

        if (
            independencePhotoLightbox.classList.contains(
                "active"
            )
        ) {

            if (
                event.key === "Escape"
            ) {

                independenceClosePhoto();

            }


            if (
                event.key === "ArrowLeft"
            ) {

                independencePreviousPhoto();

            }


            if (
                event.key === "ArrowRight"
            ) {

                independenceNextPhoto();

            }

        }


        /* ====================================================
           LOCAL VIDEO
           
           KEPT FOR FUTURE USE.
        ==================================================== */

        if (
            independenceVideoLightbox.classList.contains(
                "active"
            )
        ) {

            if (
                event.key === "Escape"
            ) {

                independenceCloseVideo();

            }


            if (
                event.code === "Space"
            ) {

                event.preventDefault();

                independenceTogglePlay();

            }


            if (
                event.key.toLowerCase() === "m"
            ) {

                independenceToggleMute();

            }

        }


        /* ====================================================
           YOUTUBE
        ==================================================== */

        if (
            independenceYouTubeLightbox.classList.contains(
                "active"
            )
        ) {

            if (
                event.key === "Escape"
            ) {

                independenceCloseYouTube();

            }

        }

    }

);


/* ============================================================
   TOUCH SWIPE FOR PHOTOS
=============================================================== */

let independenceTouchStartX = 0;

let independenceTouchEndX = 0;


independencePhotoLightbox.addEventListener(

    "touchstart",

    function(event) {

        independenceTouchStartX =
            event.changedTouches[0].screenX;

    },

    {
        passive: true
    }

);


independencePhotoLightbox.addEventListener(

    "touchend",

    function(event) {

        independenceTouchEndX =
            event.changedTouches[0].screenX;


        const difference =
            independenceTouchEndX -
            independenceTouchStartX;


        if (
            difference > 50
        ) {

            independencePreviousPhoto();

        }


        if (
            difference < -50
        ) {

            independenceNextPhoto();

        }

    },

    {
        passive: true
    }

);


/* ============================================================
   INITIALIZE
=============================================================== */

independenceCreatePhotos();

independenceCreateVideos();

</script>
```