<title>Friendship Appreciation | Thank You</title> <style> :root { --warm-peach: #ffecd2; --soft-pink: #fcb69f; --deep-rose: #ee6055; --text-gray: #4a4a4a; --white: #ffffff; }

    body {
        font-family: 'Georgia', serif;
        background: linear-gradient(135deg, var(--warm-peach) 0%, var(--soft-pink) 100%);
        color: var(--text-gray);
        margin: 0;
        padding: 0;
        min-height: 100vh;
    }

    header {
        text-align: center;
        padding: 40px 20px;
    }

    /* --- Filter Style --- */
    .filter-container {
        text-align: center;
        margin-bottom: 30px;
    }

    select {
        padding: 10px 20px;
        font-size: 1rem;
        border-radius: 20px;
        border: 2px solid var(--deep-rose);
        background: white;
        cursor: pointer;
        font-family: 'Georgia', serif;
        outline: none;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
        max-width: 1100px;
        margin: 0 auto 50px auto;
        padding: 20px;
    }

    .polaroid {
        background: var(--white);
        padding: 15px 15px 40px 15px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        transform: rotate(-2deg);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .polaroid:nth-child(even) { transform: rotate(3deg); }

    .polaroid:hover {
        transform: rotate(0deg) scale(1.05);
        z-index: 10;
    }

    .polaroid img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        background-color: #eee;
    }

    .caption {
        text-align: center;
        font-family: 'Brush Script MT', cursive;
        font-size: 1.5rem;
        margin-top: 15px;
        color: #333;
    }

    /* --- Modal for full view --- */
    .modal {
        display: none;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        justify-content: center;
        align-items: center;
        cursor: zoom-out;
    }

    .modal-content {
        max-width: 90%;
        max-height: 85%;
        border: 5px solid white;
        animation: zoomIn 0.3s ease;
    }

    @keyframes zoomIn {
        from { transform: scale(0.7); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    .letter-container {
        max-width: 800px;
        margin: 0 auto 80px auto;
        background: rgba(255, 255, 255, 0.9);
        padding: 40px;
        border-radius: 2px;
        box-shadow: 5px 5px 0px var(--deep-rose);
        line-height: 1.8;
    }

    .heart { color: var(--deep-rose); animation: pulse 1.5s infinite; display: inline-block; }
    @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
</style>

<header>
    <h1>To My Trio sa kabuang <span class="heart">♥</span></h1>
    <p>"A journey where we just randomly get close"</p>
</header>

<div class="filter-container">
    <label for="viewSelector">Select View: </label>
    <select id="viewSelector" onchange="filterGallery()">
        <option value="all">Show All</option>
        <option value="photo">Photos Only</option>
        <option value="none">Hide All</option>
    </select> <hide all></hide>
</div>

<main>
    <section class="gallery" id="photoGallery">
        <div class="polaroid" onclick="openModal(this)">
            <img src="/IMG/IMG_20260306_132650.jpg" alt="First Trio Pic">
            <div class="caption">First pic together as trio</div>
        </div>
        <div class="polaroid" onclick="openModal(this)">
            <img src="/IMG/IMG_20260324_221629_845.jpg" alt="Small Moments">
            <div class="caption">Small Moments</div>
        </div>
        <div class="polaroid" onclick="openModal(this)">
            <img src="/IMG/Screenshot_20260329_215009.jpg" alt="Appreciation Message">
            <div class="caption">Short messages appreciation</div>
        </div>
    </section>

    <div id="imageModal" class="modal" onclick="closeModal()">
        <img class="modal-content" id="fullImage">
    </div>

    <section class="letter-container">
        <h2>Warning! Emotional damage</h2>
        <p>This is a token friendship messages appreciation shalala way hilaka ha!! I just wanted to take a moment to say thank you for being in my life.To the two people who know way too much about my "kabuang" life:

Thank you for being the only ones who understand our inside jokes. I appreciate you for being there through the highs, the lows, and the "unsa na man ni" moments. This page is just a reminder that you're stuck with me. I love how you see the world, I love being part of your trio.

    <div></div>
       Love, MJ
    

        </p>
        <p><strong>Always your saranggola,</strong><br>[Mj]</p>
    </section>
</main>

<script>
    // FUNCTION 1: Open Modal
    function openModal(element) {
        var modal = document.getElementById("imageModal");
        var fullImg = document.getElementById("fullImage");
        var clickedImg = element.querySelector('img'); // Gets the image inside the clicked polaroid
        
        modal.style.display = "flex";
        fullImg.src = clickedImg.src;
    }

    // FUNCTION 2: Close Modal
    function closeModal() {
        document.getElementById("imageModal").style.display = "none";
    }

    // FUNCTION 3: Filter logic for the Select menu
    function filterGallery() {
        var selector = document.getElementById("viewSelector");
        var gallery = document.getElementById("photoGallery");
        
        if (selector.value === "photo" || selector.value === "all") {
            gallery.style.display = "grid";
        } else {
            gallery.style.display = "none";
        }
    }
</script>