From eb4e4b47f2f0a4e279df34be4071359c71267a30 Mon Sep 17 00:00:00 2001
From: James <james.ray0059@gmail.com>
Date: Sat, 4 Oct 2025 18:18:34 -0700
Subject: [PATCH] Add files via upload

---
 ASAshop.html | 537 +++++++++++++++++++++++++--------------------------
 1 file changed, 266 insertions(+), 271 deletions(-)
diff --git a/ASAshop.html b/ASAshop.html
index 5a9f41e..d0a478b 100644
--- a/ASAshop.html
+++ b/ASAshop.html
@@ -333,7 +333,7 @@
     </style>
 </head>
 <body>
-   
+
     <header>
         <div class="wrap">
             <div class="row">
@@ -462,283 +462,278 @@
     </div>
 
     <script>
+                const API = "https://affiliated-lets-automatic-oak.trycloudflare.com";
+
+
+                /* ===== Login banner (whoami) ===== */
+                async function getWhoAmI() {
+                    try {
+                        const r = await fetch(`${API}/api/inventory`, { credentials: 'include' })
+                        if (!r.ok) return null;
+                        return await r.json();
+                    } catch { return null; }
+                }
+                getWhoAmI().then(u => {
+                    if (u) document.getElementById('whoami').textContent =
+                        `Signed in as ${u.global_name || u.username}`;
+                });
+
+                /* ===== Products (unique IDs) ===== */
+                const products = [
+                    { id: 'server1', name: 'Server Class 1', price: 25.00, category: 'servers', tag: 'Server monthly', img: 'img/PrivateServerCLASS01.png'},
+                    { id: 'server2', name: 'Server Class 2', price: 50.00, category: 'servers', tag: 'Server monthly', img: 'img/PrivateServerCLASS02.png'},
+                    { id: 'server3', name: 'Server Class 3', price: 75.00, category: 'servers', tag: 'Server monthly', img: 'img/PrivateServerCLASS03.png' },
+
+                    { id: 'slot30', name: 'ASA Server Slot x30 days', price: 5.00, category: 'perks', tag: 'Server Perk monthly', img: 'img/ServerSlotX30.png' },
+                    { id: 'mutants', name: 'Mutated Creatures', price: 1.50, category: 'bundles', tag: 'Dino Pack One Time Payment 10 non-breedable', img: 'img/MutatedCretures.png'},
+                    { id: 'starter', name: 'Starter Pack', price: 1.50, category: 'bundles', tag: 'Starter Pack One Time Payment', img: 'img/StarterPack.png'},
+
+                    { id: 'supporter1', name: 'ASA Server Supporter Pack 1', price: 5.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 50,000 Points every week🎁 50,000 Bonus Points at the start of each wipe 🏅 Exclusive VIP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP1.png' },
+                    { id: 'supporter2', name: 'ASA Server Supporter Pack 2', price: 10.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 100,000 Points every week🎁 100,000 Bonus Points at the start of each wipe 🏅 Exclusive VIP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP2.png' },
+                    { id: 'supporter3', name: 'ASA Server Supporter Pack 3', price: 15.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 150,000 Points every week🎁 150,000 Bonus Points at the start of each wipe 🏅 Exclusive VIP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP3.png'},
+                    { id: 'supporter4', name: 'ASA Server Supporter Pack 4', price: 20.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 500,000 Points every week🎁 500,000 Bonus Points at the start of each wipe 🏅 Exclusive MVP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP4.png'},
+                    { id: 'supporter5', name: 'ASA Server Supporter Pack 5', price: 25.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 1,000,000 Points every week🎁 1,000,000 Bonus Points at the start of each wipe 🏅 Exclusive MVP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP5.png'},
+                    { id: 'supporter6', name: 'ASA Server Supporter Pack 6', price: 35.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 1,500,000 Points every week🎁 1,500,000 Bonus Points at the start of each wipe 🏅 Exclusive MVP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP6.png'},
+
+                    { id: 'map-small', name: 'Small Map manipulation', price: 5.00, category: 'maps', tag: 'Small Map manipulation Pack One Time Payment', img: 'img/SmallMap.png'},
+                    { id: 'map-medium', name: 'Medium Map manipulation', price: 10.00, category: 'maps', tag: 'Medium Map manipulation Pack One Time Payment', img: 'img/MediumMap.png' },
+                    { id: 'map-large', name: 'Large Map manipulation', price: 15.00, category: 'maps', tag: 'Large Map manipulation Pack One Time Payment', img: 'img/LargeMap.png' },
+                ];
+
+                /* ===== State / helpers ===== */
+                const state = { q: '', cat: 'all', sort: 'featured', cart: loadCart() };
+                const $ = s => document.querySelector(s);
+                const fmt = n => `$${n.toFixed(2)}`;
+                function saveCart() { localStorage.setItem('obli.cart', JSON.stringify(state.cart)); }
+                function loadCart() { try { return JSON.parse(localStorage.getItem('obli.cart') || '{}'); } catch { return {}; } }
+                function cartCount() { return Object.values(state.cart).reduce((a, b) => a + b, 0); }
+                function cartTotal() { return Object.entries(state.cart).reduce((s, [id, q]) => { const p = products.find(p => p.id === id); return s + (p ? p.price * q : 0) }, 0); }
+                const isServer = id => id === 'server1' || id === 'server2' || id === 'server3';
+                function serversInCart() {
+                    return Object.entries(state.cart)
+                        .filter(([id]) => isServer(id))
+                        .reduce((a, [, q]) => a + q, 0);
+                }
+                function canAddServers(qtyToAdd) {
+                    return serversInCart() + qtyToAdd <= remaining;
+                }
+
+                /* ===== Render ===== */
+                function cardHtml(p) {
+                    const inCart = state.cart[p.id] || 0;
+                    let infoBtn = '';
+                    if (p.name === 'Server Class 1') infoBtn = `<button class="btn btn-secondary" data-info="server-class-1">Info</button> <span class="chip" data-remaining>Remaining: <span class="remN">?</span>/12</span>`;
+                    if (p.name === 'Server Class 2') infoBtn = `<button class="btn btn-secondary" data-info="server-class-2">Info</button> <span class="chip" data-remaining>Remaining: <span class="remN">?</span>/12</span>`;
+                    if (p.name === 'Server Class 3') infoBtn = `<button class="btn btn-secondary" data-info="server-class-3">Info</button> <span class="chip" data-remaining>Remaining: <span class="remN">?</span>/12</span>`;
+
+                    return `<article class="card">
+                <div class="img">${p.img ? `<img src="${p.img}" alt="${p.name}">` : `<canvas data-id="${p.id}" width="320" height="150"></canvas>`}</div>
+                <div class="footer">
+                  <h3>${p.name}</h3>
+                  <div class="meta">${p.tag || ''}</div>
+                  <div class="price">${fmt(p.price)}</div>
+                  <div class="chip">${p.category}</div>
+                  <div class="actions">
+                    <button class="btn" data-add="${p.id}">${inCart ? 'Add another' : 'Add to cart'}</button>
+                    ${infoBtn}
+                  </div>
+                </div>
+              </article>`;
+                }
+
+
+
+                function render() {
+                    const grid = $('#grid');
+                    let list = products.filter(p => state.cat === 'all' || p.category === state.cat);
+                    if (state.q) {
+                        const q = state.q.toLowerCase();
+                        list = list.filter(p =>
+                            p.name.toLowerCase().includes(q) ||
+                            (p.tag || '').toLowerCase().includes(q) ||
+                            (p.category || '').toLowerCase().includes(q)
+                        );
+                    }
+                    switch (state.sort) {
+                        case 'price-asc': list.sort((a, b) => a.price - b.price); break;
+                        case 'price-desc': list.sort((a, b) => b.price - a.price); break;
+                        case 'name': list.sort((a, b) => a.name.localeCompare(b.name)); break;
+                    }
+                    grid.innerHTML = list.map(cardHtml).join('');
+                    updateCartUi();
+                }
+
+                /* ===== Cart UI ===== */
+                function rowHtml(id, qty) {
+                    const p = products.find(x => x.id === id);
+                    return `<div class="row">
+                    <div class="title"><div style="font-weight:600">${p.name}</div><div class="meta">${fmt(p.price)} each</div></div>
+                    <div class="qty">
+                      <button data-dec="${id}">−</button>
+                      <div>${qty}</div>
+                      <button data-inc="${id}">+</button>
+                    </div>
+                    <div style="width:72px; text-align:right">${fmt(p.price * qty)}</div>
+                  </div>`;
+                }
+                function updateCartUi() {
+                    $('#cartCount').textContent = cartCount();
+                    $('#cartTotal').textContent = fmt(cartTotal());
+                    const rows = Object.entries(state.cart);
+                    $('#cartItems').innerHTML = rows.length ? rows.map(([id, qty]) => rowHtml(id, qty)).join('') : '<div class="muted">Cart is empty.</div>';
+                }
+
+                /* ===== Events ===== */
+                $('#search').addEventListener('input', e => { state.q = e.target.value; render(); });
+                $('#category').addEventListener('change', e => { state.cat = e.target.value; render(); });
+                $('#sort').addEventListener('change', e => { state.sort = e.target.value; render(); });
+
+                document.body.addEventListener('click', e => {
+                    const add = e.target.closest('[data-add]');
+                    const inc = e.target.closest('[data-inc]');
+                    const dec = e.target.closest('[data-dec]');
+
+                    if (add) {
+                        const id = add.getAttribute('data-add');
+                        const qtyToAdd = 1;
+                        if (isServer(id) && !canAddServers(qtyToAdd)) {
+                            alert(`Sold out or limit reached. Remaining: ${Math.max(0, remaining - serversInCart())}.`);
+                            return;
+                        }
+                        state.cart[id] = (state.cart[id] || 0) + 1;
+                        saveCart(); render();
+                    }
+
+                    if (inc) {
+                        const id = inc.getAttribute('data-inc');
+                        const qtyToAdd = 1;
+                        if (isServer(id) && !canAddServers(qtyToAdd)) {
+                            alert(`Sold out or limit reached. Remaining: ${Math.max(0, remaining - serversInCart())}.`);
+                            return;
+                        }
+                        state.cart[id] = (state.cart[id] || 0) + 1;
+                        saveCart(); updateCartUi();
+                    }
+
+                    if (dec) {
+                        const id = dec.getAttribute('data-dec');
+                        state.cart[id] = Math.max(0, (state.cart[id] || 0) - 1);
+                        if (state.cart[id] === 0) delete state.cart[id];
+                        saveCart(); render();
+                    }
+                });
+
+
+                /* ===== Modals (single global handlers) ===== */
+                const modals = {
+                    'server-class-1': document.getElementById('infoModal'),
+                    'server-class-2': document.getElementById('infoModal2'),
+                    'server-class-3': document.getElementById('infoModal3'),
+                };
+                document.body.addEventListener('click', (e) => {
+                    const infoBtn = e.target.closest('[data-info]');
+                    if (infoBtn) {
+                        const k = infoBtn.getAttribute('data-info');
+                        const m = modals[k];
+                        if (m) { m.classList.add('open'); m.setAttribute('aria-hidden', 'false'); }
+                    }
+                    const closeBtn = e.target.closest('.modal__close');
+                    if (closeBtn) {
+                        const id = closeBtn.getAttribute('data-close');
+                        const m = id ? document.getElementById(id) : closeBtn.closest('.modal');
+                        if (m) { m.classList.remove('open'); m.setAttribute('aria-hidden', 'true'); }
+                    }
+                });
+                Object.values(modals).forEach(m => {
+                    if (!m) return;
+                    m.addEventListener('click', (e) => { if (e.target === m) { m.classList.remove('open'); m.setAttribute('aria-hidden', 'true'); } });
+                });
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') { Object.values(modals).forEach(m => m?.classList.remove('open')); }
+                });
+
+                /* ===== Drawer ===== */
+                const drawer = document.getElementById('drawer');
+                document.getElementById('openCart').addEventListener('click', e => {
+                    e.preventDefault(); drawer.classList.add('open'); drawer.setAttribute('aria-hidden', 'false'); updateCartUi();
+                });
+                document.getElementById('exitCart').addEventListener('click', () => {
+                    drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true');
+                });
+                document.addEventListener('keydown', e => {
+                    if (e.key === 'Escape') { drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true'); }
+                });
+
+                /* ===== Checkout ===== */
         const API = "https://affiliated-lets-automatic-oak.trycloudflare.com";
 
-
-        /* ===== Login banner (whoami) ===== */
-        async function getWhoAmI() {
-            try {
-                const r = await fetch(`${API}/api/inventory`, { credentials: 'include' })
-                if (!r.ok) return null;
-                return await r.json();
-            } catch { return null; }
-        }
-        getWhoAmI().then(u => {
-            if (u) document.getElementById('whoami').textContent =
-                `Signed in as ${u.global_name || u.username}`;
-        });
-
-        /* ===== Products (unique IDs) ===== */
-        const products = [
-            { id: 'server1', name: 'Server Class 1', price: 25.00, category: 'servers', tag: 'Server monthly', img: 'img/PrivateServerCLASS01.png'},
-            { id: 'server2', name: 'Server Class 2', price: 50.00, category: 'servers', tag: 'Server monthly', img: 'img/PrivateServerCLASS02.png'},
-            { id: 'server3', name: 'Server Class 3', price: 75.00, category: 'servers', tag: 'Server monthly', img: 'img/PrivateServerCLASS03.png' },
-
-            { id: 'slot30', name: 'ASA Server Slot x30 days', price: 5.00, category: 'perks', tag: 'Server Perk monthly', img: 'img/ServerSlotX30.png' },
-            { id: 'mutants', name: 'Mutated Creatures', price: 1.50, category: 'bundles', tag: 'Dino Pack One Time Payment 10 non-breedable', img: 'img/MutatedCretures.png'},
-            { id: 'starter', name: 'Starter Pack', price: 1.50, category: 'bundles', tag: 'Starter Pack One Time Payment', img: 'img/StarterPack.png'},
-
-            { id: 'supporter1', name: 'ASA Server Supporter Pack 1', price: 5.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 50,000 Points every week🎁 50,000 Bonus Points at the start of each wipe 🏅 Exclusive VIP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP1.png' },
-            { id: 'supporter2', name: 'ASA Server Supporter Pack 2', price: 10.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 100,000 Points every week🎁 100,000 Bonus Points at the start of each wipe 🏅 Exclusive VIP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP2.png' },
-            { id: 'supporter3', name: 'ASA Server Supporter Pack 3', price: 15.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 150,000 Points every week🎁 150,000 Bonus Points at the start of each wipe 🏅 Exclusive VIP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP3.png'},
-            { id: 'supporter4', name: 'ASA Server Supporter Pack 4', price: 20.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 500,000 Points every week🎁 500,000 Bonus Points at the start of each wipe 🏅 Exclusive MVP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP4.png'},
-            { id: 'supporter5', name: 'ASA Server Supporter Pack 5', price: 25.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 1,000,000 Points every week🎁 1,000,000 Bonus Points at the start of each wipe 🏅 Exclusive MVP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP5.png'},
-            { id: 'supporter6', name: 'ASA Server Supporter Pack 6', price: 35.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 1,500,000 Points every week🎁 1,500,000 Bonus Points at the start of each wipe 🏅 Exclusive MVP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP6.png'},
-
-            { id: 'map-small', name: 'Small Map manipulation', price: 5.00, category: 'maps', tag: 'Small Map manipulation Pack One Time Payment', img: 'img/SmallMap.png'},
-            { id: 'map-medium', name: 'Medium Map manipulation', price: 10.00, category: 'maps', tag: 'Medium Map manipulation Pack One Time Payment', img: 'img/MediumMap.png' },
-            { id: 'map-large', name: 'Large Map manipulation', price: 15.00, category: 'maps', tag: 'Large Map manipulation Pack One Time Payment', img: 'img/LargeMap.png' },
-        ];
-
-        /* ===== State / helpers ===== */
-        const state = { q: '', cat: 'all', sort: 'featured', cart: loadCart() };
-        const $ = s => document.querySelector(s);
-        const fmt = n => `$${n.toFixed(2)}`;
-        function saveCart() { localStorage.setItem('obli.cart', JSON.stringify(state.cart)); }
-        function loadCart() { try { return JSON.parse(localStorage.getItem('obli.cart') || '{}'); } catch { return {}; } }
-        function cartCount() { return Object.values(state.cart).reduce((a, b) => a + b, 0); }
-        function cartTotal() { return Object.entries(state.cart).reduce((s, [id, q]) => { const p = products.find(p => p.id === id); return s + (p ? p.price * q : 0) }, 0); }
-        const isServer = id => id === 'server1' || id === 'server2' || id === 'server3';
-        function serversInCart() {
-            return Object.entries(state.cart)
-                .filter(([id]) => isServer(id))
-                .reduce((a, [, q]) => a + q, 0);
-        }
-        function canAddServers(qtyToAdd) {
-            return serversInCart() + qtyToAdd <= remaining;
-        }
-
-        /* ===== Render ===== */
-        function cardHtml(p) {
-            const inCart = state.cart[p.id] || 0;
-            let infoBtn = '';
-            if (p.name === 'Server Class 1') infoBtn = `<button class="btn btn-secondary" data-info="server-class-1">Info</button> <span class="chip" data-remaining>Remaining: <span class="remN">?</span>/12</span>`;
-            if (p.name === 'Server Class 2') infoBtn = `<button class="btn btn-secondary" data-info="server-class-2">Info</button> <span class="chip" data-remaining>Remaining: <span class="remN">?</span>/12</span>`;
-            if (p.name === 'Server Class 3') infoBtn = `<button class="btn btn-secondary" data-info="server-class-3">Info</button> <span class="chip" data-remaining>Remaining: <span class="remN">?</span>/12</span>`;
-
-            return `<article class="card">
-        <div class="img">${p.img ? `<img src="${p.img}" alt="${p.name}">` : `<canvas data-id="${p.id}" width="320" height="150"></canvas>`}</div>
-        <div class="footer">
-          <h3>${p.name}</h3>
-          <div class="meta">${p.tag || ''}</div>
-          <div class="price">${fmt(p.price)}</div>
-          <div class="chip">${p.category}</div>
-          <div class="actions">
-            <button class="btn" data-add="${p.id}">${inCart ? 'Add another' : 'Add to cart'}</button>
-            ${infoBtn}
-          </div>
-        </div>
-      </article>`;
-        }
-
-
-
-        function render() {
-            const grid = $('#grid');
-            let list = products.filter(p => state.cat === 'all' || p.category === state.cat);
-            if (state.q) {
-                const q = state.q.toLowerCase();
-                list = list.filter(p =>
-                    p.name.toLowerCase().includes(q) ||
-                    (p.tag || '').toLowerCase().includes(q) ||
-                    (p.category || '').toLowerCase().includes(q)
-                );
-            }
-            switch (state.sort) {
-                case 'price-asc': list.sort((a, b) => a.price - b.price); break;
-                case 'price-desc': list.sort((a, b) => b.price - a.price); break;
-                case 'name': list.sort((a, b) => a.name.localeCompare(b.name)); break;
-            }
-            grid.innerHTML = list.map(cardHtml).join('');
-            updateCartUi();
-        }
-
-        /* ===== Cart UI ===== */
-        function rowHtml(id, qty) {
-            const p = products.find(x => x.id === id);
-            return `<div class="row">
-            <div class="title"><div style="font-weight:600">${p.name}</div><div class="meta">${fmt(p.price)} each</div></div>
-            <div class="qty">
-              <button data-dec="${id}">−</button>
-              <div>${qty}</div>
-              <button data-inc="${id}">+</button>
-            </div>
-            <div style="width:72px; text-align:right">${fmt(p.price * qty)}</div>
-          </div>`;
-        }
-        function updateCartUi() {
-            $('#cartCount').textContent = cartCount();
-            $('#cartTotal').textContent = fmt(cartTotal());
-            const rows = Object.entries(state.cart);
-            $('#cartItems').innerHTML = rows.length ? rows.map(([id, qty]) => rowHtml(id, qty)).join('') : '<div class="muted">Cart is empty.</div>';
-        }
-
-        /* ===== Events ===== */
-        $('#search').addEventListener('input', e => { state.q = e.target.value; render(); });
-        $('#category').addEventListener('change', e => { state.cat = e.target.value; render(); });
-        $('#sort').addEventListener('change', e => { state.sort = e.target.value; render(); });
-
-        document.body.addEventListener('click', e => {
-            const add = e.target.closest('[data-add]');
-            const inc = e.target.closest('[data-inc]');
-            const dec = e.target.closest('[data-dec]');
-
-            if (add) {
-                const id = add.getAttribute('data-add');
-                const qtyToAdd = 1;
-                if (isServer(id) && !canAddServers(qtyToAdd)) {
-                    alert(`Sold out or limit reached. Remaining: ${Math.max(0, remaining - serversInCart())}.`);
-                    return;
-                }
-                state.cart[id] = (state.cart[id] || 0) + 1;
-                saveCart(); render();
-            }
-
-            if (inc) {
-                const id = inc.getAttribute('data-inc');
-                const qtyToAdd = 1;
-                if (isServer(id) && !canAddServers(qtyToAdd)) {
-                    alert(`Sold out or limit reached. Remaining: ${Math.max(0, remaining - serversInCart())}.`);
-                    return;
-                }
-                state.cart[id] = (state.cart[id] || 0) + 1;
-                saveCart(); updateCartUi();
-            }
-
-            if (dec) {
-                const id = dec.getAttribute('data-dec');
-                state.cart[id] = Math.max(0, (state.cart[id] || 0) - 1);
-                if (state.cart[id] === 0) delete state.cart[id];
-                saveCart(); render();
-            }
-        });
-
-
-        /* ===== Modals (single global handlers) ===== */
-        const modals = {
-            'server-class-1': document.getElementById('infoModal'),
-            'server-class-2': document.getElementById('infoModal2'),
-            'server-class-3': document.getElementById('infoModal3'),
-        };
-        document.body.addEventListener('click', (e) => {
-            const infoBtn = e.target.closest('[data-info]');
-            if (infoBtn) {
-                const k = infoBtn.getAttribute('data-info');
-                const m = modals[k];
-                if (m) { m.classList.add('open'); m.setAttribute('aria-hidden', 'false'); }
-            }
-            const closeBtn = e.target.closest('.modal__close');
-            if (closeBtn) {
-                const id = closeBtn.getAttribute('data-close');
-                const m = id ? document.getElementById(id) : closeBtn.closest('.modal');
-                if (m) { m.classList.remove('open'); m.setAttribute('aria-hidden', 'true'); }
-            }
-        });
-        Object.values(modals).forEach(m => {
-            if (!m) return;
-            m.addEventListener('click', (e) => { if (e.target === m) { m.classList.remove('open'); m.setAttribute('aria-hidden', 'true'); } });
-        });
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') { Object.values(modals).forEach(m => m?.classList.remove('open')); }
-        });
-
-        /* ===== Drawer ===== */
-        const drawer = document.getElementById('drawer');
-        document.getElementById('openCart').addEventListener('click', e => {
-            e.preventDefault(); drawer.classList.add('open'); drawer.setAttribute('aria-hidden', 'false'); updateCartUi();
-        });
-        document.getElementById('exitCart').addEventListener('click', () => {
-            drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true');
-        });
-        document.addEventListener('keydown', e => {
-            if (e.key === 'Escape') { drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true'); }
-        });
-
-        /* ===== Checkout ===== */
-        const GENERIC_CHECKOUT = 'https://buy.stripe.com/test_generic';
-        document.getElementById('checkoutBtn').addEventListener('click', async () => {
-            const entries = Object.entries(state.cart);
-            if (!entries.length) return alert('Your cart is empty.');
-
-            const items = entries.map(([id, qty]) => {
-                const p = products.find(p => p.id === id);
-                return { id, name: p?.name || id, qty, price: p?.price || 0 };
+        async function checkout(cart) {
+            // 1) reserve
+            const r1 = await fetch(`${API}/api/reserve`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ items: cart })
             });
+            const j1 = await r1.json();
+            if (!j1.ok) { alert(j1.error || 'reserve failed'); return; }
 
-            // 1) Try to reserve on the server
-            const reserve = await fetch(`${API}/api/reserve`, {
-                method: 'POST', headers: { 'Content-Type': 'application/json' },
-                credentials: 'include', body: JSON.stringify({ items })
-            })
-
-            if (!reserve?.ok) {
-                const rem = typeof reserve?.remaining === 'number' ? reserve.remaining : remaining;
-                alert(`Sold out. Remaining: ${rem}. Adjust your cart.`);
-                await refreshRemaining(); // sync the UI
-                return;
-            }
-
-            // 2) Create a Stripe Checkout session
-            const session = await fetch(`${API}/api/create-checkout`, {
-                method: 'POST', headers: { 'Content-Type': 'application/json' },
-                credentials: 'include', body: JSON.stringify({ items })
-            })
-
-            if (!session?.url) {
-                alert('Could not start checkout. Try again.'); return;
-            }
-
-            window.location.href = session.url;
-        });
-
-
-            
-
-        /* ===== Boot ===== */
-        document.getElementById('year').textContent = new Date().getFullYear();
-        render();
-        paintPlaceholders();
-
-        /* ===== Placeholder art for items without images ===== */
-        function paintPlaceholders() {
-            document.querySelectorAll('canvas[data-id]').forEach(cv => {
-                const id = cv.getAttribute('data-id');
-                const ctx = cv.getContext('2d');
-                const g = ctx.createLinearGradient(0, 0, cv.width, cv.height);
-                g.addColorStop(0, '#0f1b3a'); g.addColorStop(1, '#1b2f5d');
-                ctx.fillStyle = g; ctx.fillRect(0, 0, cv.width, cv.height);
-                ctx.strokeStyle = 'rgba(255,255,255,.12)';
-                for (let i = 0; i < 7; i++) { ctx.beginPath(); ctx.moveTo(0, 22 * i); ctx.lineTo(cv.width, 22 * i); ctx.stroke(); }
-                ctx.fillStyle = '#aad0ff'; ctx.font = 'bold 16px Inter,system-ui';
-                ctx.fillText(products.find(p => p.id === id)?.name || id, 12, cv.height - 12);
+            // 2) create checkout
+            const r2 = await fetch(`${API}/api/create-checkout`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    resKey: j1.resKey,
+                    items: [],
+                    success_url: location.origin + location.pathname + '?ok=1',
+                    cancel_url: location.origin + location.pathname + '?cancel=1'
+                })
             });
+            const j2 = await r2.json();
+            if (!j2.url) { alert(j2.error || 'create-checkout failed'); return; }
+            location.href = j2.url;   // redirect to Stripe
         }
-        // client.js (in your existing <script>)
-        let remaining = 12;
-        async function refreshRemaining() {
-            try {
-                const r = await fetch(`${API}/api/inventory`, { credentials: 'include' })
-                document.querySelectorAll('[data-remaining] .remN').forEach(s => s.textContent = remaining);
-                // Disable all three server buttons if none left:
-                if (remaining <= 0) {
-                    document.querySelectorAll('[data-add="server1"],[data-add="server2"],[data-add="server3"]').forEach(btn => {
-                        btn.disabled = true; btn.textContent = 'Sold out';
-                    });
+
+
+
+
+
+    /* ===== Boot ===== */
+    document.getElementById('year').textContent = new Date().getFullYear();
+    render();
+    paintPlaceholders();
+
+    /* ===== Placeholder art for items without images ===== */
+    function paintPlaceholders() {
+    document.querySelectorAll('canvas[data-id]').forEach(cv => {
+    const id = cv.getAttribute('data-id');
+    const ctx = cv.getContext('2d');
+    const g = ctx.createLinearGradient(0, 0, cv.width, cv.height);
+    g.addColorStop(0, '#0f1b3a'); g.addColorStop(1, '#1b2f5d');
+    ctx.fillStyle = g; ctx.fillRect(0, 0, cv.width, cv.height);
+    ctx.strokeStyle = 'rgba(255,255,255,.12)';
+    for (let i = 0; i < 7; i++) { ctx.beginPath(); ctx.moveTo(0, 22 * i); ctx.lineTo(cv.width, 22 * i); ctx.stroke(); }
+    ctx.fillStyle = '#aad0ff'; ctx.font = 'bold 16px Inter,system-ui';
+    ctx.fillText(products.find(p => p.id === id)?.name || id, 12, cv.height - 12);
+    });
+    }
+    // client.js (in your existing
+    <script>
+)
+                let remaining = 12;
+                async function refreshRemaining() {
+                    try {
+                        const r = await fetch(`${API}/api/inventory`, { credentials: 'include' })
+                        document.querySelectorAll('[data-remaining] .remN').forEach(s => s.textContent = remaining);
+                        // Disable all three server buttons if none left:
+                        if (remaining <= 0) {
+                            document.querySelectorAll('[data-add="server1"],[data-add="server2"],[data-add="server3"]').forEach(btn => {
+                                btn.disabled = true; btn.textContent = 'Sold out';
+                            });
+                        }
+                    } catch { }
                 }
-            } catch { }
-        }
-        refreshRemaining();
-        setInterval(refreshRemaining, 30_000); // stay “24/7” up-to-date
+                refreshRemaining();
+                setInterval(refreshRemaining, 30_000); // stay “24/7” up-to-date
 
     </script>
 </body>
