From f05cdb0217d942c7e7551d55bf427a5e09bd2ab8 Mon Sep 17 00:00:00 2001
From: James <james.ray0059@gmail.com>
Date: Thu, 2 Oct 2025 17:16:06 -0700
Subject: [PATCH] Add files via upload

---
 ASAshop.html | 1120 +++++++++++++++++++++-----------------------------
 1 file changed, 477 insertions(+), 643 deletions(-)
diff --git a/ASAshop.html b/ASAshop.html
index b0d2cf1..95e7eb4 100644
--- a/ASAshop.html
+++ b/ASAshop.html
@@ -1,475 +1,473 @@
-﻿<!DOCTYPE html>
+﻿<!doctype html>
 <html lang="en">
 <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <title>Obli Studios Shop</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Shop • ObliStudios</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
     <style>
-        /* Secondary button for Info */
-        .btn-secondary {
-            background: transparent;
-            color: var(--text);
-            border: 1px solid rgba(255,255,255,.18);
-        }
-
-            .btn-secondary:hover {
-                background: rgba(255,255,255,.06);
-                color: var(--text);
-            }
-
-        /* Modal */
-        .modal {
-            position: fixed;
-            inset: 0;
-            display: none;
-            background: rgba(0,0,0,.55);
-            z-index: 80;
-        }
-
-            .modal.open {
-                display: grid;
-                place-items: center;
-            }
-
-        .modal__dialog {
-            width: min(680px, 92vw);
-            background: var(--panel);
-            border: 1px solid rgba(255,255,255,.08);
-            border-radius: var(--radius);
-            box-shadow: 0 20px 80px rgba(0,0,0,.5);
-        }
-
-        .modal__head {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 14px 16px;
-            border-bottom: 1px solid rgba(255,255,255,.08);
-        }
-
-        .modal__body {
-            padding: 16px;
-            color: var(--text);
-        }
-
-        .modal__close {
-            width: 32px;
-            height: 32px;
-            border-radius: 8px;
-            border: 1px solid rgba(255,255,255,.15);
-            background: transparent;
-            color: var(--text);
-            font-size: 18px;
-            cursor: pointer;
-        }
-
-            .modal__close:hover {
-                background: rgba(255,255,255,.06);
-            }
-
-        .exit-btn {
-            background: var(--bad);
-            color: #fff;
-            border: none;
-            font-size: 13px;
-            font-weight: 600;
-            padding: 4px 10px;
-            border-radius: 6px;
-            cursor: pointer;
-        }
-
-            .exit-btn:hover {
-                filter: brightness(1.1);
-            }
-
         :root {
-            --bg: #0b1220; /* deep space */
-            --panel: #0f1730; /* cards/nav */
-            --muted: #97a4c0; /* secondary text */
-            --text: #e8eeff; /* primary text */
-            --accent: #4aa3ff; /* bright blue */
-            --accent-2: #2b7cff; /* darker hover */
-            --good: #1fd4a0;
-            --bad: #ff6b6b;
-            --ring: 0 0 0 2px rgba(74,163,255,.35);
-            --radius: 14px;
+            --bg: #0b1224;
+            --card: #121b34;
+            --stroke: #243053;
+            --accent: #4aa3ff;
+            --text: #e9f1ff;
+            --muted: #9bb3d9;
+            --chip: #1a2a50;
+            --btn: #1e3566;
+            --btn2: #244272;
         }
 
         * {
             box-sizing: border-box
         }
 
-        html, body {
-            height: 100%
-        }
-
         body {
             margin: 0;
-            background: radial-gradient(1200px 800px at 10% -10%, #122041 0%, transparent 60%), var(--bg);
-            color: var(--text);
-            font: 16px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+            font: 14px/1.5 system-ui,Segoe UI,Inter,Arial;
+            background: var(--bg);
+            color: var(--text)
         }
 
-        a {
-            color: var(--accent);
-            text-decoration: none
+        header, footer {
+            border-bottom: 1px solid var(--stroke);
+            background: #0c1530
         }
 
-            a:hover {
-                color: var(--accent-2)
+            header .wrap, main .wrap, footer .wrap {
+                max-width: 1100px;
+                margin: 0 auto;
+                padding: 14px 16px
             }
 
-        /* Layout */
-        header {
-            position: sticky;
-            top: 0;
-            z-index: 20;
-            backdrop-filter: blur(8px);
-            background: linear-gradient(180deg, rgba(11,18,32,.9) 0%, rgba(11,18,32,.6) 100%);
-            border-bottom: 1px solid rgba(255,255,255,.06);
-        }
-
-        .nav {
-            max-width: 1100px;
-            margin: 0 auto;
-            display: flex;
-            align-items: center;
-            gap: 18px;
-            padding: 14px 18px
-        }
-
-        .brand {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-weight: 700;
-            letter-spacing: .3px
-        }
-
-        .brand-badge {
-            width: 28px;
-            height: 28px;
-            border-radius: 8px;
-            background: linear-gradient(135deg,#3a66ff,#6ee7ff)
-        }
-
-        .nav a {
-            color: var(--text);
-            opacity: .9
-        }
-
-            .nav a:hover {
-                opacity: 1
+            header .row {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                flex-wrap: wrap
             }
 
-        .nav .spacer {
+        h1 {
+            font-size: 20px;
+            margin: 0 8px 0 0
+        }
+
+        .spacer {
             flex: 1
         }
 
-        .cart-btn {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            background: var(--accent);
-            color: #001023;
-            font-weight: 700;
-            padding: 10px 14px;
-            border-radius: 10px
-        }
-
-            .cart-btn:hover {
-                background: var(--accent-2);
-                color: white
-            }
-
-        main {
-            max-width: 1100px;
-            margin: 32px auto;
-            padding: 0 18px
-        }
-
-        /* Toolbar */
-        .toolbar {
-            display: grid;
-            grid-template-columns: 1fr 220px 160px;
-            gap: 12px;
-            margin: 12px 0 22px
-        }
-
-        .input, select {
-            background: var(--panel);
+        input, select {
+            background: #0c1733;
             color: var(--text);
-            border: 1px solid rgba(255,255,255,.07);
-            border-radius: 10px;
-            padding: 12px 12px;
+            border: 1px solid var(--stroke);
+            border-radius: 8px;
+            padding: 8px;
+            outline: none
         }
 
-            .input:focus, select:focus {
-                outline: none;
-                box-shadow: var(--ring);
-                border-color: transparent
-            }
+        .cart-btn, .btn {
+            background: var(--btn);
+            color: var(--text);
+            border: 1px solid var(--stroke);
+            padding: 8px 12px;
+            border-radius: 10px;
+            text-decoration: none;
+            cursor: pointer
+        }
+
+        .btn-secondary {
+            background: var(--btn2)
+        }
 
-        /* Grid */
         .grid {
             display: grid;
-            grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) );
-            gap: 16px
+            gap: 16px;
+            grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
+            padding: 16px
         }
 
         .card {
-            background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
-            border: 1px solid rgba(255,255,255,.08);
-            border-radius: var(--radius);
+            background: var(--card);
+            border: 1px solid var(--stroke);
+            border-radius: 16px;
             overflow: hidden;
             display: flex;
             flex-direction: column
         }
-
-            .card .img {
-                height: 160px;
-                background: #0e1326;
+            .card .footer {
+                background: #0d1b3a; /* dark blue footer */
+                padding: 12px;
                 display: flex;
-                align-items: center;
-                justify-content: center
+                flex-direction: column;
+                gap: 8px;
+                margin-top: auto;
+                color: #fff;
             }
 
-                .card .img canvas, .card .img img {
-                    max-width: 100%;
-                    max-height: 100%
+                .card .footer h3 {
+                    margin: 0;
+                    font-size: 16px;
+                    color: #fff;
                 }
 
-            .card .body {
-                padding: 14px
+                .card .footer .meta {
+                    color: #cbd6f2;
+                    font-size: 13px;
+                }
+
+                .card .footer .price {
+                    font-weight: 700;
+                    color: #fff;
+                }
+
+                .card .footer .chip {
+                    background: #1e3566;
+                    color: #fff;
+                    padding: 3px 8px;
+                    border-radius: 999px;
+                    font-size: 12px;
+                    display: inline-block;
+                }
+
+                .card .footer .actions {
+                    display: flex;
+                    gap: 8px;
+                    flex-wrap: wrap;
+                }
+
+                .card .footer .btn {
+                    background: #1e3566;
+                    border: 1px solid #243053;
+                    color: #fff;
+                }
+
+
+
+
+            .card .img {
+                background: #0c1630;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 8px;
             }
 
-            .card h3 {
-                margin: 0 0 6px;
-                font-size: 18px
+                .card .img img {
+                    width: 100%;
+                    height: auto; 
+                    object-fit: contain;
+                    display: block;
+                }
+
+
+            .card .body {
+                padding: 12px
             }
 
         .price {
             font-weight: 700
         }
 
-        .meta {
-            color: var(--muted);
-            font-size: 13px
-        }
-
         .chip {
-            display: inline-block;
+            background: var(--chip);
+            color: #bcd0ff;
             padding: 3px 8px;
             border-radius: 999px;
-            background: #112651;
-            color: #8cc4ff;
-            font-size: 12px;
-            margin-top: 8px
+            display: inline-block;
+            margin: 6px 0
         }
 
-        .btn {
-            margin-top: 12px;
-            background: var(--accent);
-            border: none;
-            color: #001023;
-            font-weight: 700;
-            padding: 10px 12px;
-            border-radius: 10px;
-            cursor: pointer
+        .meta {
+            color: var(--muted);
+            font-size: 12px
         }
 
-            .btn:hover {
-                background: var(--accent-2);
-                color: white
-            }
-
-        /* Cart panel */
-        .drawer {
+        .toolbar {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            padding: 0 16px 8px
+        }
+        /* Drawer */
+        #drawer {
             position: fixed;
-            top: 0;
-            right: -420px;
+            inset: 0 0 0 auto;
             width: 380px;
-            height: 100%;
-            background: var(--panel);
-            border-left: 1px solid rgba(255,255,255,.08);
-            box-shadow: -8px 0 40px rgba(0,0,0,.45);
-            transition: right .3s ease;
-            z-index: 60;
+            background: var(--card);
+            border-left: 1px solid var(--stroke);
+            transform: translateX(100%);
+            transition: .25s;
+            z-index: 50;
             display: flex;
             flex-direction: column
         }
 
-            .drawer.open {
-                right: 0
+            #drawer.open {
+                transform: none
             }
 
-            .drawer header {
-                position: sticky;
-                top: 0;
-                padding: 16px;
-                backdrop-filter: none;
-                background: transparent;
-                border-bottom: 1px solid rgba(255,255,255,.08)
-            }
-
-            .drawer h4 {
-                margin: 0
-            }
-
-            .drawer .items {
-                flex: 1;
-                overflow: auto;
-                padding: 12px 16px;
+            #drawer header {
                 display: flex;
-                flex-direction: column;
-                gap: 10px
+                align-items: center;
+                justify-content: space-between;
+                padding: 12px 14px;
+                border-bottom: 1px solid var(--stroke)
             }
 
-        .row {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            background: rgba(255,255,255,.02);
-            border: 1px solid rgba(255,255,255,.06);
-            border-radius: 12px;
-            padding: 10px
-        }
-
-            .row .title {
+            #drawer .body {
+                padding: 12px;
+                overflow: auto;
                 flex: 1
             }
 
-        .qty {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px
-        }
-
-            .qty button {
-                width: 26px;
-                height: 26px;
-                border-radius: 8px;
-                border: 1px solid rgba(255,255,255,.15);
-                background: transparent;
-                color: var(--text);
-                cursor: pointer
+            #drawer .row {
+                display: grid;
+                grid-template-columns: 1fr auto auto;
+                gap: 10px;
+                align-items: center;
+                padding: 8px 0;
+                border-bottom: 1px dashed var(--stroke)
             }
 
-                .qty button:hover {
-                    background: rgba(255,255,255,.06)
+            #drawer .qty {
+                display: flex;
+                gap: 6px;
+                align-items: center
+            }
+
+                #drawer .qty button {
+                    width: 28px;
+                    height: 28px;
+                    border-radius: 8px;
+                    border: 1px solid var(--stroke);
+                    background: var(--btn)
                 }
 
-        .drawer .foot {
-            padding: 16px;
-            border-top: 1px solid rgba(255,255,255,.08)
+        #exitCart {
+            background: #8b0c0c;
+            border-color: #5e0909;
+            color: #fff;
+            padding: 4px 8px;
+            border-radius: 8px;
+            font-size: 12px
         }
 
         .total {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 10px
+            padding: 12px;
+            border-top: 1px solid var(--stroke)
+        }
+        /* Modals */
+        .modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 60
         }
 
-        .checkout {
-            width: 100%;
-            padding: 12px;
+            .modal.open {
+                display: flex
+            }
+
+        .modal__dialog {
+            background: var(--card);
+            border: 1px solid var(--stroke);
+            border-radius: 16px;
+            max-width: 720px;
+            width: 92%;
+            overflow: hidden
+        }
+
+        .modal__head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 16px;
+            border-bottom: 1px solid var(--stroke)
+        }
+
+        .modal__body {
+            padding: 16px
+        }
+
+        .modal__close {
+            background: #24365e;
+            color: #fff;
+            border: 1px solid var(--stroke);
             border-radius: 10px;
-            background: var(--good);
-            color: #001c12;
-            border: none;
-            font-weight: 800;
+            padding: 6px 10px;
             cursor: pointer
         }
 
-            .checkout:hover {
-                filter: brightness(1.08)
-            }
-
         footer {
-            max-width: 1100px;
-            margin: 40px auto;
-            padding: 20px 18px;
+            border-top: 1px solid var(--stroke)
+        }
+
+        .muted {
             color: var(--muted)
         }
-
-        @media (max-width: 820px) {
-            .toolbar {
-                grid-template-columns: 1fr 1fr;
-            }
+        nav.links {
+            display: flex;
+            gap: 16px;
         }
+
+            nav.links a {
+                color: #e9f1ff;
+                text-decoration: none;
+                font-weight: 500;
+            }
+
+                nav.links a:hover {
+                    color: #4aa3ff;
+                }
+
     </style>
 </head>
 <body>
+   
     <header>
-        <nav class="nav">
-            <div class="brand">
-                <div class="brand-badge"></div>
-                <a href="https://www.oblistudios.com">ObliStudios</a>
+        <div class="wrap">
+            <div class="row">
+                <h1>BESTWCOAST Shop</h1>
+                <a class="cart-btn" href="/auth/discord" id="loginDiscord">Login with Discord</a>
+                <span id="whoami" class="muted"></span>
+                <div class="spacer"></div>
+                <nav class="links" aria-label="Primary">
+                    <a href="https://www.oblistudios.com">Home</a>
+                    <a href="https://www.oblistudios.com/ASAservers.html">Servers</a>
+                </nav>
+                <a href="#" class="cart-btn" id="openCart">🛒 Cart <span id="cartCount">0</span></a>
             </div>
-            <a href="https://www.oblistudios.com/ASAservers.html">Servers</a>
-
-            <div class="spacer"></div>
-            <a class="cart-btn" href="#" id="openCart">🛒 <span id="cartCount">0</span></a>
-        </nav>
+            <div class="toolbar">
+                <input id="search" placeholder="Search products…" />
+                <select id="category" title="Category">
+                    <option value="all">All categories</option>
+                    <option value="servers">Servers</option>
+                    <option value="perks">Server Perks</option>
+                    <option value="maps">Custom Maps</option>
+                    <option value="bundles">Bundles</option>
+                    <option value="vip">VIP / Subscriptions</option>
+                </select>
+                <select id="sort" title="Sort">
+                    <option value="featured">Featured</option>
+                    <option value="price-asc">Price ↑</option>
+                    <option value="price-desc">Price ↓</option>
+                    <option value="name">Name A→Z</option>
+                </select>
+            </div>
+        </div>
     </header>
 
     <main>
-        <h1 style="margin:6px 0 4px; font-size:28px">Shop</h1>
-        <p style="margin:0 0 18px; color:var(--muted)">Merch, Servers, and server perks. Secure checkout via Stripe Payment Links.</p>
-
-        <div class="toolbar">
-            <input id="search" class="input" placeholder="Search products…" />
-            <select id="category">
-                <option value="all">All categories</option>
-                <option value="merch">Merch</option>
-                <option value="servers">Servers</option>
-                <option value="perks">Server Perks</option>
-                <option value="maps">Custom Maps</option>
-                <option value="bundles">Bundles</option>
-                <option value="vip">VIP / Subscriptions</option>
-            </select>
-
-            <select id="sort">
-                <option value="featured">Sort: Featured</option>
-                <option value="price-asc">Price: Low → High</option>
-                <option value="price-desc">Price: High → Low</option>
-                <option value="name">Name</option>
-            </select>
+        <div class="wrap">
+            <section id="grid" class="grid"></section>
         </div>
-
-        <section class="grid" id="grid"></section>
     </main>
 
-    <aside class="drawer" id="drawer" aria-hidden="true">
-        <header style="display:flex;align-items:center;justify-content:space-between;align-items:center">
-            <h4 style="margin:0">Cart</h4>
-            <button id="exitCart" class="exit-btn">Exit</button>
+    <!-- Drawer (Cart) -->
+    <aside id="drawer" aria-hidden="true">
+        <header>
+            <strong>Your Cart</strong>
+            <button id="exitCart" title="Close cart">Exit</button>
         </header>
-        <div class="items" id="cartItems"></div>
-        <div class="foot">
-            <div class="total">
+        <div class="body" id="cartItems"></div>
+        <div class="total">
+            <div style="display:flex; align-items:center; justify-content:space-between">
                 <div>Total</div>
-                <div id="cartTotal" class="price">$0.00</div>
-            </div>
-            <button class="checkout" id="checkoutBtn">Checkout</button>
-            <div style="margin-top:8px; font-size:12px; color:var(--muted)">
-                Checkout uses Stripe Payment Links per item or a generic link. Configure below in <code>products</code>.
+                <div id="cartTotal">$0.00</div>
             </div>
+            <button class="btn" id="checkoutBtn" style="width:100%; margin-top:10px">Checkout</button>
         </div>
     </aside>
 
-
     <footer>
-        <div>© <span id="year"></span> ObliStudios </div>
+        <div class="wrap">
+            <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap">
+                <div class="muted">© <span id="year"></span> Obli Studios</div>
+                <div class="muted">— Build anywhere, don’t block obelisks. Be kind.</div>
+            </div>
+        </div>
     </footer>
 
+    <!-- Info Modal: Server Class 1 -->
+    <div id="infoModal" class="modal" aria-hidden="true">
+        <div class="modal__dialog">
+            <header class="modal__head">
+                <h3 style="margin:0">🔒 Private Server Tier (Class 1)</h3>
+                <button class="modal__close" data-close="infoModal">×</button>
+            </header>
+            <div class="modal__body">
+                <p><strong>Exclusive to you and your tribe.</strong></p>
+                <p>🏝 <strong>Server Setup:</strong> Mirrors main cluster (PVP, breeding, rates). <strong>20 slots</strong>, password-secured.</p>
+                <p>⚙️ <strong>Tools & Perks:</strong> Creature Management Tool + <strong>10× Mutation Potions</strong> per tier.</p>
+                <p>🎁 <strong>Starting Bonus:</strong> <strong>100,000 points</strong> at the start of each wipe.</p>
+                <p>⏳ <strong>Setup:</strong> Usually <strong>≤ 2 business days</strong>. Never wipes while subscribed.</p>
+                <p>🏗 <strong>Building:</strong> All standard rules; don’t block obelisks; otherwise build anywhere.</p>
+                <p>📜 <strong>Ownership:</strong> Tribe-only access. No outsider storage/griefing. Maintain a base on at least one main server.</p>
+                <p>🌐 <strong>Clustering:</strong> Linked within <strong>1 hour</strong> of any wipe.</p>
+                <p>💬 <strong>Support:</strong> After purchase, open a Discord ticket for setup.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Info Modal: Server Class 2 -->
+    <div id="infoModal2" class="modal" aria-hidden="true">
+        <div class="modal__dialog">
+            <header class="modal__head">
+                <h3 style="margin:0">🔒 Private Server Tier (Class 2)</h3>
+                <button class="modal__close" data-close="infoModal2">×</button>
+            </header>
+            <div class="modal__body">
+                <p><strong>Exclusive to you and your tribe.</strong></p>
+                <p>🏝 <strong>Server Setup:</strong> Mirrors main cluster (PVP, breeding, rates). <strong>30 slots</strong>, password-secured.</p>
+                <p>⚙️ <strong>Tools & Perks:</strong> Creature Management Tool + <strong>10× Mutation Potions</strong> per tier.</p>
+                <p>🎁 <strong>Starting Bonus:</strong> <strong>200,000 points</strong> at the start of each wipe.</p>
+                <p>⏳ <strong>Setup:</strong> Usually <strong>≤ 2 business days</strong>. Never wipes while subscribed.</p>
+                <p>🏗 <strong>Building:</strong> All standard rules; don’t block obelisks; otherwise build anywhere.</p>
+                <p>📜 <strong>Ownership:</strong> Tribe-only access. No outsider storage/griefing. Maintain a base on at least one main server.</p>
+                <p>🌐 <strong>Clustering:</strong> Linked within <strong>1 hour</strong> of any wipe.</p>
+                <p>💬 <strong>Support:</strong> After purchase, open a Discord ticket for setup.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Info Modal: Server Class 3 -->
+    <div id="infoModal3" class="modal" aria-hidden="true">
+        <div class="modal__dialog">
+            <header class="modal__head">
+                <h3 style="margin:0">🔒 Private Server Tier (Class 3)</h3>
+                <button class="modal__close" data-close="infoModal3">×</button>
+            </header>
+            <div class="modal__body">
+                <p><strong>Exclusive to you and your tribe.</strong></p>
+                <p>🏝 <strong>Server Setup:</strong> Mirrors main cluster (PVP, breeding, rates). <strong>50 slots</strong>, password-secured.</p>
+                <p>⚙️ <strong>Tools & Perks:</strong> Creature Management Tool + <strong>10× Mutation Potions</strong> per tier.</p>
+                <p>🎁 <strong>Starting Bonus:</strong> <strong>300,000 points</strong> at the start of each wipe.</p>
+                <p>⏳ <strong>Setup:</strong> Usually <strong>≤ 2 business days</strong>. Never wipes while subscribed.</p>
+                <p>🏗 <strong>Building:</strong> All standard rules; don’t block obelisks; otherwise build anywhere.</p>
+                <p>📜 <strong>Ownership:</strong> Tribe-only access. No outsider storage/griefing. Maintain a base on at least one main server.</p>
+                <p>🌐 <strong>Clustering:</strong> Linked within <strong>1 hour</strong> of any wipe.</p>
+                <p>💬 <strong>Support:</strong> After purchase, open a Discord ticket for setup.</p>
+            </div>
+        </div>
+    </div>
+
     <script>
-        // ======= Demo products (edit to your real products) =======
-
+        /* ===== Login banner (whoami) ===== */
+        async function getWhoAmI() {
+            try {
+                const r = await fetch('/api/whoami', { 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', payment: 'https://buy.stripe.com/test_123tee' },
             { id: 'server2', name: 'Server Class 2', price: 50.00, category: 'servers', tag: 'Server monthly', img: 'img/PrivateServerCLASS02.png', payment: 'https://buy.stripe.com/test_123mug' },
@@ -491,76 +489,32 @@
             { id: 'map-large', name: 'Large Map manipulation', price: 15.00, category: 'maps', tag: 'Large Map manipulation Pack One Time Payment', img: 'img/LargeMap.png', payment: 'https://buy.stripe.com/test_123perk' },
         ];
 
-
-
-        // ======= State =======
+        /* ===== State / helpers ===== */
         const state = { q: '', cat: 'all', sort: 'featured', cart: loadCart() };
-
-        // ======= Helpers =======
-        const $ = sel => document.querySelector(sel);
+        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((sum, [id, qty]) => {
-                const p = products.find(p => p.id === id); return sum + (p ? p.price * qty : 0);
-            }, 0);
-        }
-
-        // ======= Render products =======
-        function render() {
-            const grid = $('#grid');
-
-            // Base filter by category
-            let list = products.filter(p => state.cat === 'all' || p.category === state.cat);
-
-            // Search by name, tag, OR category
-            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)
-                );
-            }
-
-            // Sorting
-            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;
-                default: /* featured */ break;
-            }
-
-            grid.innerHTML = list.map(p => cardHtml(p)).join('');
-            updateCartUi();
-        }
-
+        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); }
 
+        /* ===== 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>`;
-            }
-            if (p.name === 'Server Class 2') {
-                infoBtn = `<button class="btn btn-secondary" data-info="server-class-2">Info</button>`;
-            }
-            if (p.name === 'Server Class 3') {
-                infoBtn = `<button class="btn btn-secondary" data-info="server-class-3">Info</button>`;
-            }
+            if (p.name === 'Server Class 1') infoBtn = `<button class="btn btn-secondary" data-info="server-class-1">Info</button>`;
+            if (p.name === 'Server Class 2') infoBtn = `<button class="btn btn-secondary" data-info="server-class-2">Info</button>`;
+            if (p.name === 'Server Class 3') infoBtn = `<button class="btn btn-secondary" data-info="server-class-3">Info</button>`;
 
             return `<article class="card">
-        <div class="img">${p.img ? `<img src="${p.img}" alt="${p.name}">` : `<canvas data-id="${p.id}" width="320" height="160"></canvas>`}</div>
-        <div class="body">
+        <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" style="margin-top:6px">${fmt(p.price)}</div>
+          <div class="price">${fmt(p.price)}</div>
           <div class="chip">${p.category}</div>
-          <div style="display:flex; gap:8px; flex-wrap:wrap">
-            <button class="btn" data-add="${p.id}">${inCart ? `Add another` : `Add to cart`}</button>
+          <div class="actions">
+            <button class="btn" data-add="${p.id}">${inCart ? 'Add another' : 'Add to cart'}</button>
             ${infoBtn}
           </div>
         </div>
@@ -569,29 +523,47 @@
 
 
 
-        // ======= Cart UI =======
-        function updateCartUi() {
-            $('#cartCount').textContent = cartCount();
-            $('#cartTotal').textContent = fmt(cartTotal());
-            const wrap = $('#cartItems');
-            const rows = Object.entries(state.cart);
-            wrap.innerHTML = rows.length ? rows.map(([id, qty]) => rowHtml(id, qty)).join('') : '<div style="color:var(--muted)">Cart is empty.</div>';
+        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>`;
+            <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 =======
+        /* ===== 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(); });
@@ -603,112 +575,90 @@
             if (add) { const id = add.getAttribute('data-add'); state.cart[id] = (state.cart[id] || 0) + 1; saveCart(); render(); }
             if (inc) { const id = inc.getAttribute('data-inc'); 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(); }
-            // Info modal
-            const modal = $('#infoModal');
-            const infoClose = $('#infoClose');
-
-            // Info modals (define once)
-            const modals = {
-                'server-class-1': document.getElementById('infoModal'),
-                'server-class-2': document.getElementById('infoModal2'),
-                'server-class-3': document.getElementById('infoModal3')
-            };
-
-            // Open correct modal when an Info button is clicked
-            document.body.addEventListener('click', (e) => {
-                const infoBtn = e.target.closest('[data-info]');
-                if (infoBtn) {
-                    const key = infoBtn.getAttribute('data-info');
-                    const modal = modals[key];
-                    if (modal) {
-                        modal.classList.add('open');
-                        modal.setAttribute('aria-hidden', 'false');
-                    }
-                }
-
-                // Close button on any modal
-                const closeBtn = e.target.closest('.modal__close');
-                if (closeBtn) {
-                    const id = closeBtn.getAttribute('data-close');
-                    const modal = id ? document.getElementById(id) : closeBtn.closest('.modal');
-                    if (modal) {
-                        modal.classList.remove('open');
-                        modal.setAttribute('aria-hidden', 'true');
-                    }
-                }
-            });
-
-            // Backdrop click closes
-            Object.values(modals).forEach(modal => {
-                if (!modal) return;
-                modal.addEventListener('click', (e) => {
-                    if (e.target === modal) {
-                        modal.classList.remove('open');
-                        modal.setAttribute('aria-hidden', 'true');
-                    }
-                });
-            });
-
-            // Esc closes whichever is open
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape') {
-                    Object.values(modals).forEach(modal => {
-                        if (modal && modal.classList.contains('open')) {
-                            modal.classList.remove('open');
-                            modal.setAttribute('aria-hidden', 'true');
-                        }
-                    });
-                }
-            });
-
-
-
-            infoClose.addEventListener('click', () => {
-                modal.classList.remove('open');
-                modal.setAttribute('aria-hidden', 'true');
-            });
-
-            modal.addEventListener('click', (e) => {
-                if (e.target === modal) { // click backdrop
-                    modal.classList.remove('open');
-                    modal.setAttribute('aria-hidden', 'true');
-                }
-            });
-
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && modal.classList.contains('open')) {
-                    modal.classList.remove('open');
-                    modal.setAttribute('aria-hidden', 'true');
-                }
-            });
-
         });
 
-        const drawer = $('#drawer');
-        $('#openCart').addEventListener('click', e => { e.preventDefault(); drawer.classList.add('open'); drawer.setAttribute('aria-hidden', 'false'); updateCartUi(); });
-        document.addEventListener('keydown', e => { if (e.key === 'Escape') { drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true'); } });
+        /* ===== 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')); }
+        });
 
-        // Checkout strategy: if a single item, go to its Stripe Payment Link
-        // otherwise, open a generic link (configure below) or email summary.
+        /* ===== 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';
-        $('#checkoutBtn').addEventListener('click', () => {
+        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 };
+            });
+            const total = items.reduce((s, i) => s + i.price * i.qty, 0);
+
+            // notify your backend -> Discord webhook
+            try {
+                await fetch('/api/notify-webhook', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    credentials: 'include',
+                    body: JSON.stringify({ items, total })
+                });
+            } catch (e) { console.warn('Webhook notify failed', e); }
+
+            // payment behavior
             if (entries.length === 1) {
-                const [id, qty] = entries[0];
+                const [id] = entries[0];
                 const p = products.find(p => p.id === id);
                 if (p && p.payment) { window.open(p.payment, '_blank'); return; }
             }
-            // Fallback: generic link (Stripe payment link for a bundle) or mailto
             if (GENERIC_CHECKOUT && GENERIC_CHECKOUT.startsWith('http')) {
                 window.open(GENERIC_CHECKOUT, '_blank');
             } else {
-                const lines = entries.map(([id, qty]) => { const p = products.find(p => p.id === id); return `${qty} x ${p?.name || id}`; }).join('%0A');
+                const lines = items.map(i => `${i.qty} x ${i.name}`).join('%0A');
                 window.location.href = `mailto:sales@oblistudios.com?subject=Order%20Request&body=${lines}`;
             }
         });
 
-        // Minimal placeholder thumbnails (generated on canvas so page can ship without assets)
+        /* ===== 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');
@@ -716,128 +666,12 @@
                 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,.15)';
-                for (let i = 0; i < 8; i++) { ctx.beginPath(); ctx.moveTo(0, i * 22); ctx.lineTo(cv.width, i * 22); ctx.stroke(); }
-                ctx.fillStyle = '#8cc4ff';
-                ctx.font = 'bold 18px Inter';
-                ctx.fillText(products.find(p => p.id === id)?.name || id, 16, cv.height - 16);
+                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);
             });
         }
-
-        // Boot
-        document.getElementById('year').textContent = new Date().getFullYear();
-        render();
-        paintPlaceholders();
-        $('#exitCart').addEventListener('click', () => {
-            drawer.classList.remove('open');
-            drawer.setAttribute('aria-hidden', 'true');
-        });
-
     </script>
-    <!-- Info Modal -->
-    <div id="infoModal" class="modal" aria-hidden="true">
-        <div class="modal__dialog" role="dialog" aria-modal="true" aria-labelledby="infoTitle">
-            <header class="modal__head">
-                <h3 id="infoTitle" style="margin:0">🔒 Private Server Tier</h3>
-                <button class="modal__close" id="infoClose" aria-label="Close">×</button>
-            </header>
-            <div class="modal__body">
-                <p><strong>Exclusive to you and your tribe.</strong></p>
-
-                <p>🏝 <strong>Server Setup:</strong> Private servers mirror the main cluster settings (PVP, breeding, rates). Each server supports <strong>20 player slots</strong> and is secured with a <strong>password of your choice</strong>.</p>
-
-                <p>⚙️ <strong>Tools & Perks:</strong> Includes the <strong>Creature Management Tool</strong> for bulk tame management and <strong>10× Mutation Potions</strong> per tier.</p>
-
-                <p>🎁 <strong>Starting Bonus:</strong> <strong>100,000 points</strong> granted to the server owner at the start of each wipe.</p>
-
-                <p>⏳ <strong>Setup Time:</strong> Usually ready within <strong>2 business days</strong> after purchase. Servers never wipe while your subscription is active.</p>
-
-                <p>🏗 <strong>Building Rules:</strong> All standard rules apply, except for blocking obelisks. Otherwise, build anywhere.</p>
-
-                <p>
-                    📜 <strong>Ownership Rules:</strong><br>
-                    • Server is for you and your tribe only.<br>
-                    • No outsider storage, griefing, or cluster disruption.<br>
-                    • Owners must also maintain a base on at least one main server.
-                </p>
-
-                <p>🌐 <strong>Clustering:</strong> Linked to the main cluster within <strong>1 hour</strong> of any wipe.</p>
-
-                <p>💬 <strong>Support:</strong> After purchase, create a ticket on our <strong>Discord</strong> for setup and support.</p>
-            </div>
-        </div>
-    </div>
-    <!-- Info Modal: Server Class 2 -->
-    <div id="infoModal2" class="modal" aria-hidden="true">
-        <div class="modal__dialog">
-            <header class="modal__head">
-                <h3 style="margin:0">🔒 Private Server Tier (Class 2)</h3>
-                <button class="modal__close" data-close="infoModal2">×</button>
-            </header>
-            <div class="modal__body">
-                <div class="modal__body">
-                    <p><strong>Exclusive to you and your tribe.</strong></p>
-
-                    <p>🏝 <strong>Server Setup:</strong> Private servers mirror the main cluster settings (PVP, breeding, rates). Each server supports <strong>30 player slots</strong> and is secured with a <strong>password of your choice</strong>.</p>
-
-                    <p>⚙️ <strong>Tools & Perks:</strong> Includes the <strong>Creature Management Tool</strong> for bulk tame management and <strong>10× Mutation Potions</strong> per tier.</p>
-
-                    <p>🎁 <strong>Starting Bonus:</strong> <strong>200,000 points</strong> granted to the server owner at the start of each wipe.</p>
-
-                    <p>⏳ <strong>Setup Time:</strong> Usually ready within <strong>2 business days</strong> after purchase. Servers never wipe while your subscription is active.</p>
-
-                    <p>🏗 <strong>Building Rules:</strong> All standard rules apply, except for blocking obelisks. Otherwise, build anywhere.</p>
-
-                    <p>
-                        📜 <strong>Ownership Rules:</strong><br>
-                        • Server is for you and your tribe only.<br>
-                        • No outsider storage, griefing, or cluster disruption.<br>
-                        • Owners must also maintain a base on at least one main server.
-                    </p>
-
-                    <p>🌐 <strong>Clustering:</strong> Linked to the main cluster within <strong>1 hour</strong> of any wipe.</p>
-
-                    <p>💬 <strong>Support:</strong> After purchase, create a ticket on our <strong>Discord</strong> for setup and support.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Info Modal: Server Class 3 -->
-    <div id="infoModal3" class="modal" aria-hidden="true">
-        <div class="modal__dialog">
-            <header class="modal__head">
-                <h3 style="margin:0">🔒 Private Server Tier (Class 3)</h3>
-                <button class="modal__close" data-close="infoModal3">×</button>
-            </header>
-            <div class="modal__body">
-                <div class="modal__body">
-                    <p><strong>Exclusive to you and your tribe.</strong></p>
-
-                    <p>🏝 <strong>Server Setup:</strong> Private servers mirror the main cluster settings (PVP, breeding, rates). Each server supports <strong>50 player slots</strong> and is secured with a <strong>password of your choice</strong>.</p>
-
-                    <p>⚙️ <strong>Tools & Perks:</strong> Includes the <strong>Creature Management Tool</strong> for bulk tame management and <strong>10× Mutation Potions</strong> per tier.</p>
-
-                    <p>🎁 <strong>Starting Bonus:</strong> <strong>300,000 points</strong> granted to the server owner at the start of each wipe.</p>
-
-                    <p>⏳ <strong>Setup Time:</strong> Usually ready within <strong>2 business days</strong> after purchase. Servers never wipe while your subscription is active.</p>
-
-                    <p>🏗 <strong>Building Rules:</strong> All standard rules apply, except for blocking obelisks. Otherwise, build anywhere.</p>
-
-                    <p>
-                        📜 <strong>Ownership Rules:</strong><br>
-                        • Server is for you and your tribe only.<br>
-                        • No outsider storage, griefing, or cluster disruption.<br>
-                        • Owners must also maintain a base on at least one main server.
-                    </p>
-
-                    <p>🌐 <strong>Clustering:</strong> Linked to the main cluster within <strong>1 hour</strong> of any wipe.</p>
-
-                    <p>💬 <strong>Support:</strong> After purchase, create a ticket on our <strong>Discord</strong> for setup and support.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-
 </body>
 </html>
