games.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nebula - Games</title>
    <link rel="icon" type="image/x-icon" href="/images/favicon.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700;800;900&family=Barlow:wght@400;500;600&display=swap">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/navbar.css">
    <link rel="stylesheet" href="/css/menu.css">
    <script src="/js/main.js"></script>
    <script async src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.39.0" defer></script>
    <script src="/js/navbar.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        /* ── Game section header ── */
        /* AFTER */.games-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px clamp(20px, 4vw, 60px) 14px;
    background: #080c18;
    border-bottom: 1px solid rgba(163,247,255,0.06);
    position: relative;   /* ← was sticky */
    z-insdex: 50;
    /* removed: top, backdrop-filter */
}

        .games-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .games-label {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(163,247,255,0.45);
            white-space: nowrap;
        }

        #gamesLoadedCounter {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(163,247,255,0.35);
            white-space: nowrap;
        }

        .games-header-sep {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: rgba(163,247,255,0.2);
            flex-shrink: 0;
        }

        .games-header .search {
            width: clamp(180px, 30vw, 360px);
            min-width: unset;
            height: 38px;
            margin: 0;
            font-size: 0.95rem;
            padding: 6px 16px;
            border-radius: 50px;
            background: rgba(26,42,74,0.8);
        }

        .games-grid-wrap {
            padding: 28px clamp(20px, 4vw, 60px) 60px;
        }

        .button-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
            gap: 0;
            margin: 0;
        }

        @media (max-width: 560px) {
            .games-header {
                flex-wrap: wrap;
                gap: 10px;
            }
            .games-header .search {
                width: 100%;
            }
        }

        /* ═══════════════════════════════════════════════
           DYNAMIC ISLAND
        ═══════════════════════════════════════════════ */
        .dynamic-island {
            position: fixed;
            top: 12px;
            left: 50%;
            transform: translateX(-50%) scaleX(0.18) scaleY(0.6);
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition:
                opacity      350ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform    400ms cubic-bezier(0.34, 1.56, 0.64, 1),
                width        400ms cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 250ms ease,
                box-shadow   250ms ease;
            width: 52px;
            height: 40px;
            background: #080c18;
            border-radius: 50px;
            border: 1px solid rgba(163,247,255,0.18);
            box-shadow:
                0 8px 32px rgba(0,0,0,0.6),
                0 0 0 1px rgba(58,143,212,0.12),
                inset 0 1px 0 rgba(163,247,255,0.06);
            display: flex;
            align-items: center;
            padding: 0 14px;
            gap: 9px;
            overflow: hidden;
            white-space: nowrap;
        }

        .dynamic-island.di-visible {
            opacity: 1;
            pointer-events: all;
            transform: translateX(-50%) scaleX(1) scaleY(1);
            width: clamp(260px, 38vw, 440px);
        }

        .dynamic-island.di-expanded {
            width: clamp(300px, 46vw, 520px);
            border-color: rgba(58,143,212,0.45);
            box-shadow:
                0 12px 40px rgba(0,0,0,0.7),
                0 0 0 3px rgba(58,143,212,0.15),
                inset 0 1px 0 rgba(163,247,255,0.08);
        }

        .di-icon {
            flex-shrink: 0;
            width: 14px;
            height: 14px;
            color: rgba(163,247,255,0.5);
            transition: color 0.2s;
        }

        .dynamic-island.di-expanded .di-icon {
            color: #a3f7ff;
        }

        .di-input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: #a3f7ff;
            font-family: 'Barlow', sans-serif;
            font-size: 0.88rem;
            letter-spacing: 0.02em;
            caret-color: #3a8fd4;
            min-width: 0;
            padding: 0;
        }

        .di-input::placeholder {
            color: rgba(163,247,255,0.28);
        }

        .di-pill {
            flex-shrink: 0;
            background: rgba(58,143,212,0.12);
            border: 1px solid rgba(58,143,212,0.25);
            border-radius: 50px;
            padding: 3px 9px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: rgba(58,143,212,0.8);
            text-transform: uppercase;
            transition: all 0.2s ease;
            user-select: none;
            cursor: default;
        }

        .di-pill.di-pill-clear {
            cursor: pointer;
            background: rgba(163,247,255,0.1);
            border-color: rgba(163,247,255,0.3);
            color: #a3f7ff;
        }

        .di-pill.di-pill-clear:hover {
            background: rgba(163,247,255,0.18);
        }

        /* count badge that appears when filtering */
        .di-count {
            flex-shrink: 0;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            color: rgba(163,247,255,0.35);
            opacity: 0;
            transition: opacity 0.2s;
            white-space: nowrap;
        }
        .di-count.di-count-visible { opacity: 1; }
    </style>
</head>
<body>
    <div id="navbar-container"></div>

    <!-- Hero Slider injected here by slider.js -->

    <!-- ── Game section ─────────────────────────── -->
    <div class="games-header">
        <div class="games-header-left">
            <span class="games-label">All Games</span>
            <span class="games-header-sep"></span>
            <span id="gamesLoadedCounter">Loading...</span>
        </div>
        <input
            autocomplete="off"
            name="hidden"
            type="text"
            class="search"
            id="search"
            placeholder="Search for games..."
        >
    </div>

    <div class="games-grid-wrap">
        <div class="button-container" id="buttonContainer"></div>
    </div>

    <!-- ── Dynamic Island ── -->
    <div class="dynamic-island" id="dynamicIsland" role="search" aria-label="Search games">
        <svg class="di-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"
             stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="6.5" cy="6.5" r="4.5"/>
            <line x1="10.5" y1="10.5" x2="14" y2="14"/>
        </svg>
        <input
            class="di-input"
            id="diInput"
            type="text"
            placeholder="Search games..."
            autocomplete="off"
            spellcheck="false"
            aria-label="Search games"
        >
        <span class="di-count" id="diCount"></span>
        <span class="di-pill" id="diPill">ESC</span>
    </div>

    <div id="particles-js"></div>

    <footer>
        <p style="margin: 0;"><i class="fa fa-star"></i> Nebula — gaming meets reality!</p>
        <nav style="margin-top: 8px;">
            <a href="/privacy.html"><i class="fa fa-shield"></i> Privacy Policy</a>
            <a href="/terms.html"><i class="fa fa-file-contract"></i> Terms of Service</a>
            <a href="/contact.html"><i class="fa fa-envelope"></i> Contact Us</a>
            <a href="/DMCA.html"><i class="fa fa-gavel"></i> DMCA</a>
        </nav>
    </footer>

    <script src="/js/profile.js"></script>
    <!-- menu.js MUST come before slider.js -->
    <script src="/js/menu.js" type="module"></script>
    <script src="/js/slider.js"></script>

    <script>
    /* ── Dynamic Island Logic ── */
    (function () {
        const island     = document.getElementById('dynamicIsland')
        const diInput    = document.getElementById('diInput')
        const diPill     = document.getElementById('diPill')
        const diCount    = document.getElementById('diCount')
        const header     = document.querySelector('.games-header')
        const mainSearch = document.getElementById('search')

        if (!island || !header || !mainSearch) return

        let islandVisible = false

        // ── Watch header visibility ──
        const observer = new IntersectionObserver(([entry]) => {
            const shouldShow = !entry.isIntersecting
            if (shouldShow === islandVisible) return
            islandVisible = shouldShow

            if (shouldShow) {
                island.classList.add('di-visible')
            } else {
                island.classList.remove('di-visible', 'di-expanded')
                // Clear search when island hides
                if (diInput.value) {
                    diInput.value    = ''
                    mainSearch.value = ''
                    mainSearch.dispatchEvent(new Event('input'))
                    syncPill('')
                    syncCount('')
                }
            }
        }, {
            threshold:  0,
            rootMargin: '-56px 0px 0px 0px'   // account for fixed navbar height
        })

        observer.observe(header)

        // ── Focus / blur ──
        diInput.addEventListener('focus', () => {
            island.classList.add('di-expanded')
        })

        diInput.addEventListener('blur', () => {
            if (!diInput.value) island.classList.remove('di-expanded')
        })

        // ── Input — sync to main search ──
        diInput.addEventListener('input', (e) => {
            const val = e.target.value
            mainSearch.value = val
            mainSearch.dispatchEvent(new Event('input'))
            syncPill(val)
        })

        // ── Sync the counter badge from gamesLoadedCounter ──
        // Watch for changes to gamesLoadedCounter so we can reflect filtered count
        const counterEl = document.getElementById('gamesLoadedCounter')
        if (counterEl) {
            const mo = new MutationObserver(() => {
                if (diInput.value) {
                    syncCount(counterEl.textContent)
                }
            })
            mo.observe(counterEl, { childList: true, subtree: true, characterData: true })
        }

        function syncPill(val) {
            if (val) {
                diPill.textContent = '✕'
                diPill.classList.add('di-pill-clear')
                // Show count
                if (counterEl) syncCount(counterEl.textContent)
            } else {
                diPill.textContent = 'ESC'
                diPill.classList.remove('di-pill-clear')
                diCount.textContent = ''
                diCount.classList.remove('di-count-visible')
            }
        }

        function syncCount(text) {
            if (!diInput.value) return
            // text is like "42 games loaded" or "5 games found"
            const match = text.match(/^(\d+)/)
            if (match) {
                diCount.textContent = match[1]
                diCount.classList.add('di-count-visible')
            }
        }

        // ── Pill click — clear ──
        diPill.addEventListener('click', () => {
            if (!diInput.value) return
            clearIsland()
        })

        // ── ESC key ──
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && islandVisible && document.activeElement === diInput) {
                clearIsland()
                diInput.blur()
            }
            // Slash key focuses island when visible
            if (e.key === '/' && islandVisible && document.activeElement !== diInput) {
                e.preventDefault()
                diInput.focus()
            }
        })

        function clearIsland() {
            diInput.value    = ''
            mainSearch.value = ''
            mainSearch.dispatchEvent(new Event('input'))
            syncPill('')
            syncCount('')
            island.classList.remove('di-expanded')
        }
    }())
    </script>
</body>
</html>