Premium Tech Accessories

Click Add to cart, then go to the cart to checkout.

\n\n

Featured Products

💵 USD — US Dollar

\n\n

\n\n \n\n \n\n`;\n}",[],[228,235],{"_106":244,"_97":245,"_161":246,"_163":229,"_164":146,"_165":103,"_167":22,"_108":247,"_102":33,"_171":185,"_173":74,"_174":22,"_175":-5,"_176":248,"_100":249},"8ac9d07c-16e6-11f1-9589-42dde27851f2","new-file-5420.ts","8ac9d162-16e6-11f1-9589-42dde27851f2",["D",1772531485187],[],[228,245],{"_106":251,"_97":252,"_161":253,"_163":229,"_164":146,"_165":254,"_167":168,"_108":255,"_102":195,"_171":185,"_173":256,"_174":22,"_175":-5,"_176":257,"_100":258},"2886ae82-16e4-11f1-963a-42dde27851f2","styles.ts","212e1b20-16e4-11f1-ac57-42dde27851f2",40,["D",1772530461330],"// ui/styles.ts\nexport const css = `\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: 'Inter', -apple-system, sans-serif; background: #f4f5f7; color: #1a1a2e; }\n\nnav {\n background: #1a1a2e;\n color: white;\n padding: 0 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 64px;\n position: sticky;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 20px rgba(0,0,0,0.35);\n}\n.logo { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.5px; }\n.logo span { color: #7c6fff; }\n.nav-right { display: flex; align-items: center; gap: 1.2rem; }\n\n.country-select-wrapper { display: flex; align-items: center; gap: 0.5rem; }\n.country-select-wrapper label { font-size: 0.8rem; color: rgba(255,255,255,0.5); white-space: nowrap; }\nselect {\n background: rgba(255,255,255,0.08);\n color: white;\n border: 1px solid rgba(255,255,255,0.18);\n border-radius: 8px;\n padding: 0.45rem 0.75rem;\n font-size: 0.85rem;\n font-family: inherit;\n cursor: pointer;\n outline: none;\n transition: background 0.2s;\n}\nselect:hover { background: rgba(255,255,255,0.14); }\nselect option { background: #1a1a2e; color: white; }\n\n.cart-btn {\n background: rgba(255,255,255,0.08);\n border: 1px solid rgba(255,255,255,0.18);\n color: white;\n border-radius: 8px;\n padding: 0.45rem 1rem;\n font-size: 0.85rem;\n font-family: inherit;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: background 0.2s;\n}\n.cart-btn:hover { background: rgba(255,255,255,0.14); }\n.cart-count {\n background: #7c6fff;\n border-radius: 50%;\n width: 20px; height: 20px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 0.72rem;\n font-weight: 700;\n}\n\n.hero {\n background: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);\n color: white;\n padding: 3.5rem 2rem 3rem;\n text-align: center;\n}\n.hero h1 { font-size: 2.6rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 0.6rem; }\n.hero h1 span { color: #7c6fff; }\n.hero p { color: rgba(255,255,255,0.65); font-size: 1.05rem; }\n\n.products-section { max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem; }\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.75rem;\n flex-wrap: wrap;\n gap: 0.75rem;\n}\n.section-title { font-size: 1.4rem; font-weight: 700; }\n.currency-badge {\n background: #7c6fff;\n color: white;\n padding: 0.35rem 1rem;\n border-radius: 20px;\n font-size: 0.8rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.product-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n gap: 1.5rem;\n}\n.product-card {\n background: white;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 2px 12px rgba(0,0,0,0.06);\n transition: transform 0.22s ease, box-shadow 0.22s ease;\n cursor: default;\n}\n.product-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 32px rgba(0,0,0,0.11);\n}\n.product-image {\n height: 175px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 4rem;\n}\n.product-info { padding: 1.25rem; }\n.product-name { font-size: 0.98rem; font-weight: 600; margin-bottom: 0.3rem; }\n.product-desc { font-size: 0.8rem; color: #777; margin-bottom: 1.1rem; line-height: 1.55; }\n.product-footer { display: flex; justify-content: space-between; align-items: center; }\n.product-price { font-size: 1.2rem; font-weight: 700; color: #1a1a2e; }\n.add-btn {\n background: #7c6fff;\n color: white;\n border: none;\n border-radius: 8px;\n padding: 0.5rem 1rem;\n font-size: 0.8rem;\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n transition: background 0.2s, transform 0.1s;\n}\n.add-btn:hover { background: #6557f0; }\n.add-btn:active { transform: scale(0.96); }\n\n.toast {\n position: fixed;\n bottom: 2rem;\n right: 2rem;\n background: #1a1a2e;\n color: white;\n padding: 0.75rem 1.25rem;\n border-radius: 10px;\n font-size: 0.85rem;\n font-weight: 500;\n box-shadow: 0 4px 20px rgba(0,0,0,0.2);\n opacity: 0;\n transform: translateY(10px);\n transition: opacity 0.25s, transform 0.25s;\n z-index: 1100;\n pointer-events: none;\n}\n.toast.show { opacity: 1; transform: translateY(0); }\n\n/* Modal / Drawer */\n.modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(15, 18, 40, 0.55);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease;\n z-index: 1200;\n}\n.modal-backdrop.open { opacity: 1; pointer-events: auto; }\n\n.modal {\n position: fixed;\n top: 50%;\n left: 50%;\n width: min(760px, calc(100vw - 2rem));\n max-height: calc(100vh - 2rem);\n overflow: auto;\n transform: translate(-50%, -46%) scale(0.98);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease, transform 0.2s ease;\n z-index: 1300;\n background: #fff;\n border-radius: 18px;\n box-shadow: 0 20px 70px rgba(0,0,0,0.25);\n}\n.modal.open {\n opacity: 1;\n pointer-events: auto;\n transform: translate(-50%, -50%) scale(1);\n}\n\n.modal-header {\n padding: 1.1rem 1.25rem;\n border-bottom: 1px solid #eef0f4;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n position: sticky;\n top: 0;\n background: white;\n z-index: 1;\n}\n.modal-title {\n font-weight: 800;\n letter-spacing: -0.3px;\n font-size: 1.05rem;\n}\n.modal-close {\n border: 1px solid #e6e8ee;\n background: #fff;\n border-radius: 10px;\n padding: 0.45rem 0.7rem;\n cursor: pointer;\n font-size: 0.95rem;\n}\n.modal-close:hover { background: #f6f7fb; }\n\n.modal-body { padding: 1.25rem; }\n.modal-grid {\n display: grid;\n grid-template-columns: 1.35fr 0.85fr;\n gap: 1.2rem;\n align-items: start;\n}\n\n.card {\n background: #fff;\n border: 1px solid #eef0f4;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 2px 12px rgba(0,0,0,0.04);\n}\n.card-head {\n padding: 0.95rem 1rem;\n border-bottom: 1px solid #eef0f4;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n background: #fbfcff;\n}\n.card-head strong { font-size: 0.95rem; }\n.card-body { padding: 1rem; }\n\n.muted { color: #6c6f7a; font-size: 0.85rem; }\n\n.cart-row {\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 0.75rem;\n padding: 0.85rem 0;\n border-bottom: 1px dashed #eef0f4;\n}\n.cart-row:last-child { border-bottom: none; }\n\n.cart-item-title { font-weight: 700; font-size: 0.95rem; }\n.cart-item-sub { font-size: 0.82rem; color: #6c6f7a; margin-top: 0.2rem; }\n\n.qty {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n background: #f6f7fb;\n border: 1px solid #e6e8ee;\n border-radius: 999px;\n padding: 0.25rem 0.35rem;\n}\n.qty button {\n width: 28px; height: 28px;\n border: none;\n border-radius: 999px;\n cursor: pointer;\n background: #fff;\n border: 1px solid #e6e8ee;\n font-weight: 800;\n}\n.qty button:hover { background: #f0f2f7; }\n.qty span {\n min-width: 20px;\n text-align: center;\n font-weight: 700;\n font-size: 0.9rem;\n}\n.remove {\n border: none;\n background: transparent;\n color: #8a2b2b;\n cursor: pointer;\n font-size: 0.85rem;\n padding: 0.25rem 0;\n}\n.remove:hover { text-decoration: underline; }\n\n.summary-line {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.45rem 0;\n font-size: 0.92rem;\n}\n.summary-line.total {\n border-top: 1px solid #eef0f4;\n margin-top: 0.6rem;\n padding-top: 0.75rem;\n font-weight: 800;\n font-size: 1.02rem;\n}\n\n.btn {\n width: 100%;\n border: none;\n border-radius: 12px;\n padding: 0.75rem 1rem;\n font-weight: 800;\n cursor: pointer;\n font-family: inherit;\n transition: transform 0.06s, background 0.2s;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n.btn:active { transform: scale(0.985); }\n.btn-primary { background: #7c6fff; color: white; }\n.btn-primary:hover { background: #6557f0; }\n.btn-ghost { background: #f6f7fb; color: #1a1a2e; border: 1px solid #e6e8ee; }\n.btn-ghost:hover { background: #f0f2f7; }\n\n.checkout-form { display: grid; gap: 0.8rem; }\n.field { display: grid; gap: 0.35rem; }\n.field label { font-size: 0.8rem; color: #6c6f7a; font-weight: 600; }\n.field input, .field select {\n width: 100%;\n color: #1a1a2e;\n background: #fff;\n border: 1px solid #e6e8ee;\n border-radius: 12px;\n padding: 0.7rem 0.8rem;\n font-size: 0.92rem;\n outline: none;\n}\n.field input:focus, .field select:focus {\n border-color: rgba(124,111,255,0.65);\n box-shadow: 0 0 0 4px rgba(124,111,255,0.12);\n}\n.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }\n\n.stepper {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.82rem;\n color: #6c6f7a;\n font-weight: 700;\n}\n.pill {\n background: #f6f7fb;\n border: 1px solid #e6e8ee;\n border-radius: 999px;\n padding: 0.25rem 0.6rem;\n font-size: 0.78rem;\n}\n.pill.active {\n background: rgba(124,111,255,0.12);\n border-color: rgba(124,111,255,0.35);\n color: #453de0;\n}\n\n.success { text-align: center; padding: 1.6rem 1rem; }\n.success h2 { font-size: 1.45rem; letter-spacing: -0.6px; margin-bottom: 0.5rem; }\n.success p { color: #6c6f7a; margin-bottom: 1rem; }\n.order-box {\n text-align: left;\n background: #fbfcff;\n border: 1px solid #eef0f4;\n border-radius: 16px;\n padding: 1rem;\n margin: 0.8rem auto 1rem;\n max-width: 520px;\n}\n.order-box code {\n display: block;\n background: #fff;\n border: 1px dashed #e6e8ee;\n border-radius: 12px;\n padding: 0.6rem 0.75rem;\n margin-top: 0.5rem;\n word-break: break-all;\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 0.85rem;\n white-space: pre;\n overflow: auto;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n color: #aaa;\n font-size: 0.82rem;\n border-top: 1px solid #e4e6ea;\n margin-top: 1rem;\n}\n\n@media (max-width: 850px) { .modal-grid { grid-template-columns: 1fr; } }\n@media (max-width: 600px) {\n .hero h1 { font-size: 1.9rem; }\n nav { padding: 0 1rem; }\n .products-section { padding: 1.5rem 1rem; }\n .country-select-wrapper label { display: none; }\n .two-col { grid-template-columns: 1fr; }\n .modal-body { padding: 1rem; }\n}\n`;",[],[228,252],[228],{"_106":261,"_97":101,"_161":262,"_163":-5,"_164":146,"_165":263,"_167":22,"_108":264,"_102":265,"_171":266,"_173":267,"_174":22,"_175":-5,"_176":268,"_100":269},"5e3a5162-16e6-11f1-8789-42dde27851f2","4d368f86-16df-11f1-a11a-42dde27851f2",48,["D",1772531410420],12,"http","// main.ts\nimport { renderHome } from \"./ui/home.ts\";\nimport { renderCheckout } from \"./ui/checkout.ts\";\nimport { css } from \"./ui/styles.ts\";\n\nconst KLARNA_API_USERNAME = Deno.env.get(\"KLARNA_API_USERNAME\") || \"\";\nconst KLARNA_API_PASSWORD = Deno.env.get(\"KLARNA_API_PASSWORD\") || \"\";\nconst KLARNA_ENV = Deno.env.get(\"KLARNA_ENV\") || \"playground\";\n\nfunction klarnaBase() {\n if (KLARNA_ENV === \"production\") return \"https://api.klarna.com\";\n return \"https://api.playground.klarna.com\";\n}\nfunction makeAuthHeader() {\n return \"Basic \" + btoa(`${KLARNA_API_USERNAME}:${KLARNA_API_PASSWORD}`);\n}\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const pathname = url.pathname;\n\n // styles\n if (pathname === \"/styles.css\") {\n return new Response(css, {\n headers: {\n \"content-type\": \"text/css; charset=utf-8\",\n \"cache-control\": \"no-store\",\n },\n });\n }\n\n // Klarna create session\n if (pathname === \"/create-klarna-session\" && req.method === \"POST\") {\n try {\n const body = await req.json().catch(() => ({}));\n const items = Array.isArray(body.items) ? body.items : [];\n const totalsUsd = Number(body.order_amount_usd || body.order_amount || 0);\n\n const order_lines = items.map((it: any) => {\n const qty = Number(it.qty || 1);\n const unit = Number(it.unit_price_usd || 0);\n const total = Math.round(unit * qty * 100);\n return {\n type: \"physical\",\n reference: String(it.id || it.reference || \"\"),\n name: String(it.name || \"\"),\n quantity: qty,\n unit_price: Math.round(unit * 100),\n tax_rate: 0,\n total_amount: total,\n total_tax_amount: 0,\n };\n });\n\n const payload: any = {\n purchase_country: (body.purchase_country || \"US\").toUpperCase(),\n purchase_currency: (body.currency || \"USD\").toUpperCase(),\n locale: body.locale || \"en-US\",\n order_amount: Math.round(totalsUsd * 100),\n order_tax_amount: Math.round((Number(body.tax_usd) || 0) * 100),\n order_lines,\n merchant_urls: body.merchant_urls || {\n terms: \"https://example.com/terms\",\n checkout: \"https://example.com/checkout\",\n confirmation: \"https://example.com/confirmation{?order_id}\",\n push: \"https://example.com/push\",\n },\n };\n\n const res = await fetch(`${klarnaBase()}/payments/v1/sessions`, {\n method: \"POST\",\n headers: {\n \"content-type\": \"application/json\",\n authorization: makeAuthHeader(),\n },\n body: JSON.stringify(payload),\n });\n\n const text = await res.text();\n if (!res.ok) {\n return new Response(text, {\n status: 502,\n headers: { \"content-type\": \"text/plain\" },\n });\n }\n\n return new Response(text, {\n headers: { \"content-type\": \"application/json\" },\n });\n } catch (err) {\n return new Response(JSON.stringify({ error: String(err) }), {\n status: 500,\n headers: { \"content-type\": \"application/json\" },\n });\n }\n }\n\n // Klarna confirm (demo)\n if (pathname === \"/confirm-klarna-payment\" && req.method === \"POST\") {\n try {\n const body = await req.json().catch(() => ({}));\n const klarnaSessionId = body.klarna_session_id || body.session_id || null;\n if (!klarnaSessionId) {\n return new Response(\n JSON.stringify({ error: \"missing klarna_session_id\" }),\n {\n status: 400,\n headers: { \"content-type\": \"application/json\" },\n },\n );\n }\n\n const sessionRes = await fetch(\n `${klarnaBase()}/payments/v1/sessions/${\n encodeURIComponent(klarnaSessionId)\n }`,\n {\n method: \"GET\",\n headers: { authorization: makeAuthHeader() },\n },\n );\n\n const sessionText = await sessionRes.text();\n if (!sessionRes.ok) {\n return new Response(sessionText, {\n status: 502,\n headers: { \"content-type\": \"text/plain\" },\n });\n }\n\n const fakeOrderId = \"CFX-\" +\n Math.random().toString(16).slice(2, 10).toUpperCase();\n return new Response(\n JSON.stringify({\n ok: true,\n orderId: fakeOrderId,\n session: JSON.parse(sessionText),\n }),\n {\n headers: { \"content-type\": \"application/json\" },\n },\n );\n } catch (err) {\n return new Response(JSON.stringify({ error: String(err) }), {\n status: 500,\n headers: { \"content-type\": \"application/json\" },\n });\n }\n }\n\n // Home\n if (pathname === \"/\" || pathname === \"\") {\n return new Response(renderHome(), {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n \"cache-control\": \"no-store\",\n },\n });\n }\n\n // Checkout\n if (pathname === \"/checkout\") {\n return new Response(renderCheckout(), {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n \"cache-control\": \"no-store\",\n },\n });\n }\n\n return new Response(\"Not found\", { status: 404 });\n}",[],[101],"files",[158,178,189,200,207,216,226,233,243,250,260],"counts",{"_274":33,"_275":170,"_276":33,"_277":278,"_281":282},"pulls","branches","forks","envVars",{"_279":184,"_280":33},"count","emptyCount","connections",{"_279":33,"_283":33},"unfilledCount","contents",[],"file",{"_106":261,"_97":101,"_161":262,"_163":-5,"_164":146,"_165":263,"_167":22,"_108":288,"_102":265,"_171":266,"_173":267,"_174":22,"_175":-5,"_100":289},["D",1772531410420],[101],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_95":96,"_97":98,"_99":45,"_102":103,"_100":101,"_104":298,"_156":303,"_270":337,"_286":338,"_284":340,"_341":-5,"_342":-5,"_343":-5,"_344":-5,"_345":346,"_277":-5},{"_106":107,"_97":98,"_108":299,"_110":-5,"_111":22,"_112":113,"_114":-5,"_115":-5,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":-5,"_121":33,"_16":122,"_123":-5,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":300,"_138":301,"_143":302,"_155":22},["D",1772528375383],{"_95":96,"_136":137},{"_95":96,"_140":137,"_14":116,"_141":142},{"_102":145,"_97":45,"_106":146,"_147":107,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":98,"_154":96},[304,313,322,334],{"_106":159,"_97":160,"_161":162,"_163":-5,"_164":146,"_165":166,"_167":168,"_108":169,"_102":170,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":305,"_100":312},[306,309],{"_106":179,"_97":180,"_161":181,"_163":162,"_164":146,"_165":182,"_167":22,"_108":183,"_102":184,"_171":185,"_173":186,"_174":22,"_175":-5,"_176":307,"_100":308},[],[160,180],{"_106":190,"_97":191,"_161":192,"_163":162,"_164":146,"_165":193,"_167":168,"_108":194,"_102":195,"_171":185,"_173":196,"_174":22,"_175":-5,"_176":310,"_100":311},[],[160,191],[160],{"_106":201,"_97":202,"_161":203,"_163":-5,"_164":146,"_165":204,"_167":168,"_108":205,"_102":170,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":314,"_100":321},[315,318],{"_106":208,"_97":209,"_161":210,"_163":203,"_164":146,"_165":211,"_167":168,"_108":212,"_102":195,"_171":185,"_173":213,"_174":22,"_175":-5,"_176":316,"_100":317},[],[202,209],{"_106":217,"_97":218,"_161":219,"_163":203,"_164":146,"_165":220,"_167":168,"_108":221,"_102":195,"_171":185,"_173":222,"_174":22,"_175":-5,"_176":319,"_100":320},[],[202,218],[202],{"_106":227,"_97":228,"_161":229,"_163":-5,"_164":146,"_165":230,"_167":168,"_108":231,"_102":170,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":323,"_100":333},[324,327,330],{"_106":234,"_97":235,"_161":236,"_163":229,"_164":146,"_165":237,"_167":168,"_108":238,"_102":239,"_171":185,"_173":240,"_174":22,"_175":-5,"_176":325,"_100":326},[],[228,235],{"_106":244,"_97":245,"_161":246,"_163":229,"_164":146,"_165":103,"_167":22,"_108":247,"_102":33,"_171":185,"_173":74,"_174":22,"_175":-5,"_176":328,"_100":329},[],[228,245],{"_106":251,"_97":252,"_161":253,"_163":229,"_164":146,"_165":254,"_167":168,"_108":255,"_102":195,"_171":185,"_173":256,"_174":22,"_175":-5,"_176":331,"_100":332},[],[228,252],[228],{"_106":261,"_97":101,"_161":262,"_163":-5,"_164":146,"_165":263,"_167":22,"_108":264,"_102":265,"_171":266,"_173":267,"_174":22,"_175":-5,"_176":335,"_100":336},[],[101],[304,306,309,313,315,318,322,324,327,330,334],{"_106":261,"_97":101,"_161":262,"_163":-5,"_164":146,"_165":263,"_167":22,"_108":288,"_102":265,"_171":266,"_173":267,"_174":22,"_175":-5,"_100":339},[101],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

huibw

kp-cfx-empire