.elementor-478 .elementor-element.elementor-element-a0ec72d{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-478 .elementor-element.elementor-element-4e82e9f{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}@media(max-width:1024px){.elementor-478 .elementor-element.elementor-element-a0ec72d{--grid-auto-flow:row;}.elementor-478 .elementor-element.elementor-element-4e82e9f{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-478 .elementor-element.elementor-element-a0ec72d{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-478 .elementor-element.elementor-element-4e82e9f{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-38d5486 */<!-- =========================================================
     APEX ACADEMY
     REAL DIGITAL SCHOOL MEMORY BOOK
     COMPLETE HTML + CSS + JAVASCRIPT
     ========================================================= -->

<div id="apex-real-book">

    <!-- =====================================================
         CLOSED BOOK COVER
         ===================================================== -->

    <div id="apex-book-cover">

        <div class="apex-cover-inner">

            <div class="apex-cover-year">
                2026–2027
            </div>

            <div class="apex-cover-title">
                APEX ACADEMY
            </div>

            <div class="apex-cover-school">
                Senior Secondary School
            </div>

            <div class="apex-cover-line"></div>

            <div class="apex-cover-subtitle">
                Our School • Our Journey • Our Memories
            </div>

            <div class="apex-cover-symbol">
                ✦
            </div>

            <div class="apex-cover-open">
                CLICK TO OPEN
            </div>

        </div>

    </div>


    <!-- =====================================================
         OPEN BOOK
         ===================================================== -->

    <div id="apex-book-area">

        <div id="apex-pageflip"></div>


        <!-- NAVIGATION (ARROWS & COUNTER) -->

        <div class="apex-navigation">

            <button
                type="button"
                id="apex-prev"
                aria-label="Previous page">
                &#10094;
            </button>

            <div class="apex-page-number">
                <span id="apex-current">1</span>
                <span>/</span>
                <span id="apex-total">27</span>
            </div>

            <button
                type="button"
                id="apex-next"
                aria-label="Next page">
                &#10095;
            </button>

        </div>


        <div class="apex-book-name">
            Apex Academy Senior Secondary School
        </div>

        <div class="apex-book-hint">
            Swipe, drag, or use arrows to turn pages forward and back
        </div>

    </div>


    <!-- =====================================================
         IMAGE POPUP
         ===================================================== -->

    <div
        id="apex-image-popup"
        class="apex-image-popup">

        <button
            type="button"
            id="apex-popup-close"
            class="apex-popup-close">
            &times;
        </button>

        <div class="apex-popup-content">

            <img
                id="apex-popup-image"
                src=""
                alt="Apex Academy">

            <div
                id="apex-popup-heading"
                class="apex-popup-heading">
            </div>

        </div>

    </div>

</div>


<!-- =========================================================
     GOOGLE FONTS
     ========================================================= -->

<link
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">


<style>

/* =========================================================
    RESET
    ========================================================= */

#apex-real-book,
#apex-real-book * {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif !important;
}


/* =========================================================
    MAIN CONTAINER
    ========================================================= */

#apex-real-book {

    width: 100%;

    min-height: 100vh;

    padding:
        30px
        15px
        60px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 50% 5%,
            #ffffff 0%,
            #f7f8fa 55%,
            #edf0f3 100%
        );

}


/* =========================================================
    CLOSED COVER
    ========================================================= */

#apex-book-cover {

    width:
        min(
            460px,
            85vw
        );

    aspect-ratio:
        3 / 4;

    cursor: pointer;

    perspective: 1600px;

    flex-shrink: 0;

    transition:
        opacity .5s ease,
        transform .6s ease;

}


.apex-cover-inner {

    width: 100%;

    height: 100%;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 38px;

    color: #ffffff;

    overflow: hidden;

    border-radius:
        6px
        18px
        18px
        6px;

    background:
        linear-gradient(
            145deg,
            #0d2944 0%,
            #1d4d68 48%,
            #123850 100%
        );

    box-shadow:

        15px
        24px
        45px
        rgba(0,0,0,.25),

        inset
        -12px
        0
        25px
        rgba(0,0,0,.14),

        inset
        2px
        0
        5px
        rgba(255,255,255,.08);

    transform-style:
        preserve-3d;

}


.apex-cover-inner::before {

    content: "";

    position: absolute;

    inset: 14px;

    border:
        1px solid
        rgba(255,255,255,.38);

    border-radius:
        5px
        13px
        13px
        5px;

    pointer-events: none;

}


.apex-cover-inner::after {

    content: "";

    position: absolute;

    top: -10%;

    left: 10%;

    width: 80%;

    height: 35%;

    background:
        linear-gradient(
            115deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );

    transform:
        rotate(-8deg);

    pointer-events: none;

}


/* =========================================================
    COVER YEAR
    ========================================================= */

.apex-cover-year {

    font-size: 14px;

    letter-spacing:
        4px;

    font-weight: 500;

    margin-bottom: 25px;

    opacity: .9;

}


/* =========================================================
    COVER TITLE
    ========================================================= */

.apex-cover-title {

    position: relative;

    z-index: 2;

    width: 88%;

    max-width: 320px;

    font-size:
        clamp(
            32px,
            5.5vw,
            48px
        );

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
    COVER SCHOOL
    ========================================================= */

.apex-cover-school {

    position: relative;

    z-index: 2;

    width: 90%;

    margin-top: 10px;

    font-size:
        clamp(
            18px,
            2.5vw,
            24px
        );

    line-height: 1.2;

    font-weight: 500;

    opacity: .92;

}


/* =========================================================
    COVER LINE
    ========================================================= */

.apex-cover-line {

    width: 65px;

    height: 1px;

    margin:
        22px
        0;

    background:
        rgba(255,255,255,.75);

}


/* =========================================================
    COVER SUBTITLE
    ========================================================= */

.apex-cover-subtitle {

    position: relative;

    z-index: 2;

    width: 90%;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 300;

    opacity: .8;

}


/* =========================================================
    COVER SYMBOL
    ========================================================= */

.apex-cover-symbol {

    margin-top: 28px;

    font-size: 22px;

    opacity: .75;

}


/* =========================================================
    COVER OPEN TEXT
    ========================================================= */

.apex-cover-open {

    position: absolute;

    bottom: 28px;

    left: 0;

    right: 0;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;

    opacity: .68;

}


/* =========================================================
    COVER HOVER
    ========================================================= */

#apex-book-cover:hover {

    transform:
        translateY(-7px)
        rotateY(-3deg);

}


/* =========================================================
    OPEN BOOK AREA
    ========================================================= */

#apex-book-area {

    display: none;

    width: 100%;

    max-width: 1400px;

    position: relative;

    text-align: center;

}


/* =========================================================
    PAGE FLIP CONTAINER
    ========================================================= */

#apex-pageflip {

    position: relative !important;

    margin:
        0
        auto !important;

    overflow: hidden !important;

    isolation: isolate;

    background:
        #ffffff !important;

    box-shadow:

        0
        22px
        45px
        rgba(25,45,65,.14);

}


/* =========================================================
    PAGEFLIP INTERNAL CONTAINER
    ========================================================= */

#apex-pageflip .stf__parent {

    overflow:
        hidden !important;

    background:
        #ffffff !important;

}


/* =========================================================
    PAGE STYLING
    ========================================================= */

.apex-page {

    width: 100%;

    height: 100%;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow:
        hidden !important;

    background: #ffffff !important;

    opacity: 1 !important;

    color:
        #18344e;

    border: none;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    transform-style:
        preserve-3d;

}

/* Desktop Left Page: Big Centered Quote */
.apex-page-left {
    background: #ffffff !important;
    padding: 50px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.apex-page-quote {
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.45;
    color: #123850;
    text-align: center;
    max-width: 88%;
    margin: 0 auto;
}

/* Desktop Right Page: Image */
.apex-page-right {
    background: #ffffff !important;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Single Page: Quote on top of Original Size Image */
.apex-mobile-page {
    background: #ffffff !important;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.apex-mobile-quote {
    font-size: clamp(15px, 3.8vw, 20px);
    font-weight: 700;
    line-height: 1.35;
    color: #123850;
    text-align: center;
    width: 100%;
    padding: 0 4px;
    flex: 0 0 auto;
}


/* =========================================================
    PAGE EDGE SHADOWS & GLOSS
    ========================================================= */

.apex-page::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 20;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.8),
            transparent 10%,
            transparent 90%,
            rgba(200,210,220,.2)
        );

}


.apex-page::after {

    content: "";

    position: absolute;

    top: 0;

    left: -40%;

    width: 45%;

    height: 100%;

    pointer-events: none;

    z-index: 21;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:
        skewX(-12deg);

    opacity: .6;

}


/* =========================================================
    IMAGE AREA (ORIGINAL SIZE PRESERVED)
    ========================================================= */

.apex-page-image {

    width: 100%;

    height: 100%;

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #ffffff !important;

    overflow:
        hidden;

}

.apex-mobile-page .apex-page-image {
    flex: 1 1 auto;
    min-height: 0;
}


/* =========================================================
    IMAGE PROPORTIONS
    ========================================================= */

.apex-page-image img {

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 100%;

    object-fit:
        scale-down;

    object-position:
        center;

    display: block;

    cursor:
        zoom-in;

    background:
        #ffffff;

    border: 0;

    outline: none;

    user-select: none;

    -webkit-user-drag: none;

    box-shadow:
        0
        4px
        15px
        rgba(0,0,0,0.06);

    border-radius: 4px;

}


/* =========================================================
    NAVIGATION & ARROWS
    ========================================================= */

.apex-navigation {

    margin-top:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

}


.apex-navigation button {

    width:
        48px;

    height:
        48px;

    border:
        none;

    border-radius:
        50%;

    background:
        #173b58;

    color:
        #ffffff;

    font-size:
        21px;

    line-height:
        1;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        0
        5px
        15px
        rgba(23,59,88,.18);

    transition:
        transform .2s ease,
        background .2s ease,
        opacity .2s ease;

}


.apex-navigation button:hover {

    transform:
        scale(1.08);

    background:
        #244f70;

}


.apex-navigation button:disabled {

    opacity:
        .25;

    cursor:
        default;

    transform:
        none;

}


/* =========================================================
    PAGE NUMBER
    ========================================================= */

.apex-page-number {

    min-width:
        75px;

    color:
        #72808d;

    font-size:
        15px;

    font-weight: 500;

}


/* =========================================================
    BOOK NAME
    ========================================================= */

.apex-book-name {

    margin-top:
        10px;

    color:
        #18344e;

    font-size:
        17px;

    font-weight:
        600;

}


/* =========================================================
    HINT
    ========================================================= */

.apex-book-hint {

    margin-top:
        6px;

    color:
        #9aa2aa;

    font-size:
        12px;

    letter-spacing:
        .4px;

    font-weight: 400;

}


/* =========================================================
    IMAGE POPUP
    ========================================================= */

.apex-image-popup {

    position:
        fixed;

    inset:
        0;

    z-index:
        999999;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(5,14,24,.96);

    backdrop-filter:
        blur(8px);

}


.apex-image-popup.apex-show {

    display:
        flex;

    animation:
        apexPopupFade
        .25s
        ease;

}


@keyframes apexPopupFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* =========================================================
    POPUP CONTENT
    ========================================================= */

.apex-popup-content {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
    POPUP IMAGE
    ========================================================= */

.apex-popup-content img {

    max-width:
        94vw;

    max-height:
        84vh;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    display:
        block;

    background:
        #ffffff;

    box-shadow:
        0
        20px
        60px
        rgba(0,0,0,.55);

}


/* =========================================================
    POPUP HEADING
    ========================================================= */

.apex-popup-heading {

    margin-top:
        14px;

    max-width:
        90vw;

    color:
        #ffffff;

    font-size:
        clamp(
            18px,
            2.5vw,
            26px
        );

    font-weight: 600;

    line-height:
        1.3;

    text-align:
        center;

}


/* =========================================================
    POPUP CLOSE
    ========================================================= */

.apex-popup-close {

    position:
        absolute;

    top:
        18px;

    right:
        22px;

    width:
        48px;

    height:
        48px;

    border:
        none;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.12);

    color:
        #ffffff;

    font-size:
        30px;

    cursor:
        pointer;

    z-index:
        10;

}


.apex-popup-close:hover {

    background:
        rgba(255,255,255,.22);

}


/* =========================================================
    RESPONSIVE OPTIMIZATIONS
    ========================================================= */

@media (max-width: 767px) {

    #apex-real-book {
        min-height: 100svh;
        padding: 10px 6px 30px;
        justify-content: center;
        overflow-x: hidden;
    }

    #apex-book-cover {
        width: min(85vw, 340px);
    }

    .apex-cover-inner {
        padding: 28px;
    }

    .apex-cover-title {
        font-size: 26px;
        max-width: 270px;
    }

    .apex-cover-school {
        font-size: 16px;
    }

    #apex-book-area {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        position: relative;
    }

    #apex-pageflip {
        width: 94vw !important;
        max-width: 94vw !important;
        height: 72svh !important;
        overflow: visible !important;
        margin: 0 auto !important;
        touch-action: pan-y;
        perspective: 1600px;
        -webkit-perspective: 1600px;
        box-shadow: 0 18px 35px rgba(25,45,65,.18);
    }

    #apex-pageflip .stf__parent {
        overflow: visible !important;
        touch-action: pan-y;
    }

    #apex-pageflip .stf__block {
        overflow: visible !important;
    }

    .apex-page {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
        background: #ffffff !important;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
    }

    .apex-mobile-page {
        padding: 16px 12px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        background: linear-gradient(
            90deg,
            #f8f8f8 0%,
            #ffffff 7%,
            #ffffff 93%,
            #f1f1f1 100%
        ) !important;
        box-shadow:
            inset 8px 0 15px rgba(0,0,0,.035),
            inset -8px 0 15px rgba(0,0,0,.035);
    }

    .apex-mobile-quote {
        flex: 0 0 auto;
        width: 100%;
        font-size: clamp(15px, 4vw, 20px);
        font-weight: 700;
        line-height: 1.35;
        color: #123850;
        text-align: center;
        padding: 3px 6px;
    }

    .apex-mobile-page .apex-page-image {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .apex-mobile-page .apex-page-image img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        pointer-events: auto;
        -webkit-user-drag: none;
        user-select: none;
        touch-action: manipulation;
    }

    .apex-navigation {
        position: relative;
        z-index: 9999;
        margin-top: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .apex-navigation button {
        position: relative;
        z-index: 10000;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border: none;
        border-radius: 50%;
        background: #173b58;
        color: #ffffff;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        box-shadow: 0 5px 15px rgba(23,59,88,.20);
    }

    .apex-navigation button:active {
        transform: scale(.94);
    }

    .apex-navigation button:disabled {
        opacity: .28;
        pointer-events: none;
    }

    .apex-page-number {
        min-width: 65px;
        font-size: 13px;
    }

    .apex-book-name {
        font-size: 13px;
        margin-top: 6px;
    }

    .apex-book-hint {
        font-size: 10px;
        margin-top: 5px;
    }

    .apex-popup-content img {
        max-width: 96vw;
        max-height: 82svh;
    }

    .apex-popup-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 26px;
    }
}

<\/style>


<!-- =========================================================
     PAGE FLIP LIBRARY
     ========================================================= -->

<script src="https://unpkg.com/page-flip@2.0.7/dist/js/page-flip.browser.js"></script>


<script>

document.addEventListener(
    "DOMContentLoaded",
    function () {

    /* =====================================================
       ALL IMAGES + QUOTES
       ===================================================== */

    const apexImages = [

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-27.jpg",
            heading:
            "School is not only about lessons, but about becoming."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-26.jpg",
            heading:
            "Curiosity today becomes confidence for tomorrow."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-25.jpg",
            heading:
            "The seeds of confidence are planted through everyday learning."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-24.jpg",
            heading:
            "Every shared experience adds another page to childhood."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-23.jpg",
            heading:
            "Different talents, one community, countless possibilities."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-22.jpg",
            heading:
            "The classroom is where ideas learn to take flight."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-21.jpg",
            heading:
            "A beautiful childhood is filled with learning and discovery."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-20.jpg",
            heading:
            "Growing together makes every school day meaningful."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-19.jpg",
            heading:
            "The happiest lessons are the ones we experience together."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-18.jpg",
            heading:
            "In every young mind lives a world waiting to be discovered."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-17.jpg",
            heading:
            "Shared moments create the stories we remember for years."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-16.jpg",
            heading:
            "School days become beautiful memories when we learn together."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-15.jpg",
            heading:
            "Young minds, bright questions, endless possibilities."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-14.jpg",
            heading:
            "Where every child discovers something wonderful within."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-13.jpg",
            heading:
            "The joy of learning lives in moments like these."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-12.jpg",
            heading:
            "Every question asked today can shape tomorrow's imagination."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-11.jpg",
            heading:
            "Together we learn, together we discover, together we shine."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-10.jpg",
            heading:
            "Friendship turns ordinary school days into treasured memories."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-9.jpg",
            heading:
            "Learning grows beautifully when we grow together."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-8.jpg",
            heading:
            "A classroom becomes special when every voice has a place."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-7.jpg",
            heading:
            "Little steps today become great journeys tomorrow."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-6.jpg",
            heading:
            "The best memories are often made while learning together."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-5.jpg",
            heading:
            "Every new lesson opens a little door to the world."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-4.jpg",
            heading:
            "Childhood is where curiosity learns to dream."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-3.jpg",
            heading:
            "Every school day brings another moment worth remembering."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-2.jpg",
            heading:
            "Learning together makes every journey more meaningful."
        },

        {
            image:
            "https://apexacademyschool.com/wp-content/uploads/2026/09/APEX-SCHOOL-1-1.jpg",
            heading:
            "May every child leave with knowledge, confidence and wonderful memories."
        }

    ];


    /* =====================================================
       ELEMENTS
       ===================================================== */

    const cover =
        document.getElementById(
            "apex-book-cover"
        );

    const bookArea =
        document.getElementById(
            "apex-book-area"
        );

    const bookContainer =
        document.getElementById(
            "apex-pageflip"
        );

    const previousButton =
        document.getElementById(
            "apex-prev"
        );

    const nextButton =
        document.getElementById(
            "apex-next"
        );

    const currentPage =
        document.getElementById(
            "apex-current"
        );

    const totalPages =
        document.getElementById(
            "apex-total"
        );


    let pageFlip = null;


    /* =====================================================
       CREATE PAGES (RESPONSIVE: DESKTOP SPREAD vs MOBILE STACKED)
       ===================================================== */

    function createPages() {

        bookContainer.innerHTML = "";

        const isMobile = window.innerWidth <= 767;

        if (isMobile) {
            // MOBILE: Single page per item with quote on top and image below
            totalPages.textContent = apexImages.length;

            apexImages.forEach(
                function (item, index) {
                    const page = document.createElement("div");
                    page.className = "apex-page apex-mobile-page";
                    page.setAttribute("data-density", "hard");

                    page.innerHTML = `
                        <div class="apex-mobile-quote">
                            ${item.heading}
                        </div>
                        <div class="apex-page-image">
                            <img
                                src="${item.image}"
                                alt="${item.heading}"
                                data-index="${index}"
                                draggable="false"
                            >
                        </div>
                    `;
                    bookContainer.appendChild(page);
                }
            );
        } else {
            // DESKTOP: Two-page spread (Left: Big Centered Quote, Right: Image)
            totalPages.textContent = apexImages.length * 2;

            apexImages.forEach(
                function (item, index) {
                    // Left Page: Big Centered Quote
                    const leftPage = document.createElement("div");
                    leftPage.className = "apex-page apex-page-left";
                    leftPage.setAttribute("data-density", "hard");
                    leftPage.innerHTML = `
                        <div class="apex-page-quote">
                            ${item.heading}
                        </div>
                    `;
                    bookContainer.appendChild(leftPage);

                    // Right Page: Image
                    const rightPage = document.createElement("div");
                    rightPage.className = "apex-page apex-page-right";
                    rightPage.setAttribute("data-density", "hard");
                    rightPage.innerHTML = `
                        <div class="apex-page-image">
                            <img
                                src="${item.image}"
                                alt="${item.heading}"
                                data-index="${index}"
                                draggable="false"
                            >
                        </div>
                    `;
                    bookContainer.appendChild(rightPage);
                }
            );
        }

    }


    /* =====================================================
       RESPONSIVE SIZING
       ===================================================== */

    function getBookSize() {

        const isMobile = window.innerWidth <= 767;

        let pageWidth;
        let pageHeight;

        if (isMobile) {

            pageWidth = Math.min(
                window.innerWidth * 0.94,
                430
            );

            pageHeight = Math.min(
                window.innerHeight * 0.72,
                680
            );

        } else {

            pageWidth = Math.min(
                600,
                Math.max(
                    200,
                    (window.innerWidth - 40) / 2
                )
            );

            pageHeight = Math.min(
                700,
                Math.max(
                    300,
                    window.innerHeight * 0.72
                )
            );
        }

        return {

            pageWidth: Math.round(pageWidth),

            pageHeight: Math.round(pageHeight),

            bookWidth: Math.round(
                isMobile
                    ? pageWidth
                    : pageWidth * 2
            ),

            bookHeight: Math.round(pageHeight)
        };

    }


    /* =====================================================
       INITIALISE BOOK
       ===================================================== */

    function initialiseBook() {

        if (
            typeof St === "undefined" ||
            typeof St.PageFlip === "undefined"
        ) {

            console.error(
                "PageFlip library did not load."
            );

            return;
        }


        if (pageFlip) {

            try {

                pageFlip.destroy();

            }

            catch (e) {}

            pageFlip = null;

        }


        const size =
            getBookSize();


        bookContainer.style.width =
            size.bookWidth + "px";


        bookContainer.style.height =
            size.bookHeight + "px";


        const isMobile = window.innerWidth <= 767;


        /* =================================================
           REAL BOOK PAGE FLIP (FLUID TOUCH & ARROW PHYSICS)
           ================================================= */

        pageFlip =
            new St.PageFlip(
                bookContainer,
                {

                    width:
                        size.pageWidth,

                    height:
                        size.pageHeight,

                    size:
                        "fixed",

                    minWidth:
                        200,

                    maxWidth:
                        600,

                    minHeight:
                        300,

                    maxHeight:
                        700,

                    drawShadow:
                        true,

                    maxShadowOpacity:
                        0.4,

                    flippingTime:
                        650,

                    usePortrait:
                        isMobile, // Single-page swipe on mobile, dual-page spread on desktop

                    startPage:
                        0,

                    showCover:
                        false,

                    autoSize:
                        false,

                    mobileScrollSupport:
                        false,

                    useMouseEvents:
                        !isMobile,

                    disableFlipByClick:
                        false,

                    clickEventForward:
                        true,

                    showPageCorners:
                        true,

                    swipeDistance:
                        8

                }
            );


        const pages =
            document.querySelectorAll(
                "#apex-pageflip .apex-page"
            );


        pageFlip.loadFromHTML(
            pages
        );


        /* =================================================
           MOBILE TWO-WAY BOOK SWIPE
           LEFT  = NEXT
           RIGHT = PREVIOUS
           ================================================= */

        if (isMobile) {

            let touchStartX = 0;
            let touchStartY = 0;
            let touchStartTime = 0;
            let touchHandled = false;

            bookContainer.addEventListener(
                "touchstart",
                function (event) {

                    if (
                        !event.touches ||
                        !event.touches.length
                    ) {
                        return;
                    }

                    touchStartX =
                        event.touches[0].clientX;

                    touchStartY =
                        event.touches[0].clientY;

                    touchStartTime =
                        Date.now();

                    touchHandled = false;

                },
                {
                    passive: true
                }
            );

            bookContainer.addEventListener(
                "touchend",
                function (event) {

                    if (
                        touchHandled ||
                        !event.changedTouches ||
                        !event.changedTouches.length ||
                        !pageFlip
                    ) {
                        return;
                    }

                    const touch =
                        event.changedTouches[0];

                    const endX = touch.clientX;
                    const endY = touch.clientY;

                    const deltaX =
                        endX - touchStartX;

                    const deltaY =
                        endY - touchStartY;

                    const elapsed =
                        Date.now() - touchStartTime;

                    /*
                       Only handle a genuine horizontal swipe.
                    */
                    if (
                        Math.abs(deltaX) < 35 ||
                        Math.abs(deltaX) <= Math.abs(deltaY) ||
                        elapsed > 1000
                    ) {
                        return;
                    }

                    touchHandled = true;

                    const current =
                        pageFlip.getCurrentPageIndex();

                    const last =
                        apexImages.length - 1;

                    /*
                       LEFT SWIPE = NEXT PAGE
                    */
                    if (deltaX < 0) {

                        if (current < last) {
                            pageFlip.flipNext();
                        }

                    }

                    /*
                       RIGHT SWIPE = PREVIOUS PAGE
                    */
                    else {

                        if (current > 0) {
                            pageFlip.flipPrev();
                        }

                    }

                },
                {
                    passive: true
                }
            );
        }


        updatePage();


        pageFlip.on(
            "flip",
            function () {

                updatePage();

            }
        );


        updatePage();

    }


    /* =====================================================
       UPDATE PAGE NUMBER & BUTTON STATES
       ===================================================== */

    function updatePage() {

        if (!pageFlip) {
            return;
        }


        const index =
            pageFlip.getCurrentPageIndex();
        const isMobile = window.innerWidth <= 767;

        const total = isMobile ? apexImages.length : apexImages.length * 2;


        currentPage.textContent =
            Math.min(
                index + 1,
                total
            );


        previousButton.disabled =
            index <= 0;


        nextButton.disabled =
            index >= total - 1;

    }


    /* =====================================================
       NEXT PAGE BUTTON
       ===================================================== */

    nextButton.addEventListener(
        "click",
        function () {

            if (!pageFlip) {
                return;
            }

            const isMobile = window.innerWidth <= 767;
            const maxIndex = isMobile ? apexImages.length - 1 : (apexImages.length * 2) - 1;

            if (
                pageFlip.getCurrentPageIndex()
                >=
                maxIndex
            ) {
                return;
            }

            pageFlip.flipNext();

        }
    );


    /* =====================================================
       PREVIOUS PAGE BUTTON
       ===================================================== */

    previousButton.addEventListener(
        "click",
        function () {

            if (!pageFlip) {
                return;
            }

            if (
                pageFlip.getCurrentPageIndex()
                <=
                0
            ) {
                return;
            }

            pageFlip.flipPrev();

        }
    );


    /* =====================================================
       OPEN BOOK
       ===================================================== */

    cover.addEventListener(
        "click",
        function () {

            cover.style.opacity =
                "0";


            cover.style.transform =
                "scale(.94) rotateY(-10deg)";


            setTimeout(
                function () {

                    cover.style.display =
                        "none";


                    bookArea.style.display =
                        "block";


                    createPages();


                    requestAnimationFrame(
                        function () {

                            requestAnimationFrame(
                                function () {

                                    initialiseBook();

                                }
                            );

                        }
                    );

                },
                450
            );

        }
    );


    /* =====================================================
       IMAGE POPUP
       ===================================================== */

    const popup =
        document.getElementById(
            "apex-image-popup"
        );

    const popupImage =
        document.getElementById(
            "apex-popup-image"
        );

    const popupHeading =
        document.getElementById(
            "apex-popup-heading"
        );

    const popupClose =
        document.getElementById(
            "apex-popup-close"
        );


    function openPopup(index) {

        if (!apexImages[index]) {
            return;
        }


        popupImage.src =
            apexImages[index].image;


        popupHeading.textContent =
            apexImages[index].heading;


        popup.classList.add(
            "apex-show"
        );


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

    }


    function closePopup() {

        popup.classList.remove(
            "apex-show"
        );


        popupImage.src =
            "";


        document.body.style.overflow =
            "";

    }


    /* =====================================================
       IMAGE CLICK
       ===================================================== */

    bookContainer.addEventListener(
        "click",
        function (event) {

            const image =
                event.target.closest(
                    "img[data-index]"
                );


            if (!image) {
                return;
            }


            const index =
                parseInt(
                    image.dataset.index,
                    10
                );


            openPopup(index);

        }
    );


    popupClose.addEventListener(
        "click",
        closePopup
    );


    popup.addEventListener(
        "click",
        function (event) {

            if (
                event.target === popup
            ) {

                closePopup();

            }

        }
    );


    /* =====================================================
       KEYBOARD NAVIGATION
       ===================================================== */

    document.addEventListener(
        "keydown",
        function (event) {

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

                closePopup();

                return;

            }


            if (!pageFlip) {
                return;
            }


            if (
                popup.classList.contains(
                    "apex-show"
                )
            ) {

                return;

            }

            const isMobile = window.innerWidth <= 767;
            const maxIndex = isMobile ? apexImages.length - 1 : (apexImages.length * 2) - 1;


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

                if (
                    pageFlip.getCurrentPageIndex()
                    <
                    maxIndex
                ) {

                    pageFlip.flipNext();

                }

            }


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

                if (
                    pageFlip.getCurrentPageIndex()
                    >
                    0
                ) {

                    pageFlip.flipPrev();

                }

            }

        }
    );


    /* =====================================================
       RESIZE
       ===================================================== */

    let resizeTimer = null;

    window.addEventListener(
        "resize",
        function () {

            clearTimeout(resizeTimer);

            resizeTimer = setTimeout(
                function () {

                    if (
                        !bookArea ||
                        bookArea.style.display === "none"
                    ) {
                        return;
                    }

                    const oldIndex =
                        pageFlip
                            ? pageFlip.getCurrentPageIndex()
                            : 0;

                    createPages();

                    initialiseBook();

                    if (
                        pageFlip &&
                        oldIndex > 0
                    ) {

                        const maxIndex =
                            window.innerWidth <= 767
                                ? apexImages.length - 1
                                : (apexImages.length * 2) - 1;

                        try {

                            pageFlip.turnToPage(
                                Math.min(
                                    oldIndex,
                                    maxIndex
                                )
                            );

                        } catch (e) {}

                    }

                    updatePage();

                },
                300
            );

        }
    );


});

</script>/* End custom CSS */