Keysat
843ff0e5d7
Glue files not covered by subproject repos: top-level docs, logo, keysat-design-system, and crosscheck tests. Subproject folders are gitignored (each has its own Gitea remote).
124 lines
7.4 KiB
HTML
124 lines
7.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Keysat — New product</title>
|
|
<link rel="stylesheet" href="../../colors_and_type.css">
|
|
<link rel="stylesheet" href="dash.css">
|
|
<style>
|
|
.form-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
|
|
.panel-stack > * + * { margin-top: 14px; }
|
|
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
|
.preview-cert { background: var(--cream-50); border: 1px solid var(--border-1); border-radius: 12px; box-shadow: 0 0 0 1px var(--gold-500) inset, var(--shadow-sm); padding: 22px; }
|
|
.preview-cert .stamp { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-700); text-align: center; }
|
|
.preview-cert .h { text-align: center; font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--navy-950); margin: 8px 0 4px; }
|
|
.preview-cert .sub { text-align: center; font-size: 12px; color: var(--ink-500); margin-bottom: 14px; }
|
|
.preview-cert .field { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 3px; }
|
|
.preview-cert .value { font-family: var(--font-mono); font-size: 13px; color: var(--navy-900); margin-bottom: 10px; }
|
|
.seg { display: flex; gap: 0; border: 1px solid var(--border-2); border-radius: 7px; overflow: hidden; }
|
|
.seg button { flex: 1; background: transparent; border: 0; padding: 9px 12px; font-size: 13px; color: var(--ink-700); cursor: pointer; font-family: var(--font-body); border-right: 1px solid var(--border-1); }
|
|
.seg button:last-child { border-right: 0; }
|
|
.seg button.on { background: var(--navy-800); color: var(--cream-50); font-weight: 600; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<aside class="sidebar">
|
|
<div class="brand"><img src="../../assets/keysat-mark.svg" alt=""><span>Keysat</span></div>
|
|
<a class="nav" href="index.html"><i data-lucide="layout-dashboard"></i>Overview</a>
|
|
<a class="nav active" href="#"><i data-lucide="package"></i>Products<span class="count">3</span></a>
|
|
<a class="nav" href="licenses.html"><i data-lucide="key-round"></i>Licenses<span class="count">42</span></a>
|
|
<a class="nav" href="#"><i data-lucide="users"></i>Customers<span class="count">38</span></a>
|
|
<a class="nav" href="#"><i data-lucide="tag"></i>Discount codes</a>
|
|
<div class="group-label">System</div>
|
|
<a class="nav" href="#"><i data-lucide="scroll-text"></i>Audit log</a>
|
|
<a class="nav" href="#"><i data-lucide="webhook"></i>Webhooks</a>
|
|
<a class="nav" href="#"><i data-lucide="settings-2"></i>Settings</a>
|
|
<div class="footer"><span class="dot"></span><div><div style="color: var(--cream-50); font-weight: 600">BTCPay connected</div></div></div>
|
|
</aside>
|
|
<main class="main">
|
|
<header class="topbar">
|
|
<div><div class="crumb"><a href="#">Products</a> · New</div><h1>New product</h1></div>
|
|
<div class="topbar-actions">
|
|
<button class="btn ghost">Cancel</button>
|
|
<button class="btn secondary">Save as draft</button>
|
|
<button class="btn primary"><i data-lucide="check"></i>Create product</button>
|
|
</div>
|
|
</header>
|
|
<div class="content">
|
|
<div class="form-grid">
|
|
<div class="panel-stack">
|
|
<div class="card">
|
|
<div class="card-head"><h3>Product</h3></div>
|
|
<div style="padding: 18px;">
|
|
<div class="row-2">
|
|
<div class="field"><label class="lbl">Product name</label><input class="input" value="Sundial 2.0"><div class="hint">Shown on receipts and the public purchase page.</div></div>
|
|
<div class="field"><label class="lbl">Slug</label><input class="input mono" value="sundial-2"><div class="hint">Used in your purchase URL.</div></div>
|
|
</div>
|
|
<div class="field"><label class="lbl">Tagline</label><input class="input" value="A focused timer for deep work."></div>
|
|
<div class="field"><label class="lbl">Description</label><textarea class="input" rows="3" style="resize: vertical; font-family: var(--font-body)">Sundial is a calm, single-window timer for deep work sessions. Sound design by Hauschka. macOS, Windows, Linux.</textarea></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-head"><h3>Default policy</h3><span class="eyebrow">Drives the public purchase URL</span></div>
|
|
<div style="padding: 18px;">
|
|
<div class="row-2">
|
|
<div class="field"><label class="lbl">Duration</label>
|
|
<div class="seg">
|
|
<button>30 days</button><button class="on">1 year</button><button>3 years</button><button>Lifetime</button>
|
|
</div>
|
|
</div>
|
|
<div class="field"><label class="lbl">Seats</label><input class="input" value="1"><div class="hint">Maximum machines per key.</div></div>
|
|
</div>
|
|
<div class="row-2">
|
|
<div class="field"><label class="lbl">Trial available</label>
|
|
<div class="seg"><button class="on">14 days</button><button>None</button></div>
|
|
</div>
|
|
<div class="field"><label class="lbl">Entitlements</label><input class="input mono" value="core, sync, export"><div class="hint">Comma-separated. Embedded in the signed key.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-head"><h3>Price</h3></div>
|
|
<div style="padding: 18px;">
|
|
<div class="row-2">
|
|
<div class="field"><label class="lbl">Amount</label><input class="input mono" value="50,000"></div>
|
|
<div class="field"><label class="lbl">Unit</label>
|
|
<div class="seg"><button class="on">sats</button><button>BTC</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="hint">≈ $30.00 USD at current rate. Updated every 30s from your BTCPay store.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-stack" style="position: sticky; top: 90px;">
|
|
<div class="eyebrow">Preview</div>
|
|
<div class="preview-cert">
|
|
<div class="stamp">— Certificate of License —</div>
|
|
<div class="h">Sundial 2.0</div>
|
|
<div class="sub">default · 1 year · single seat</div>
|
|
<div class="field">License key</div>
|
|
<div class="value">KS-XXXX-XXXX-XXXX-XXXX</div>
|
|
<div class="row-2">
|
|
<div><div class="field">Price</div><div class="value">50,000 sats</div></div>
|
|
<div><div class="field">Trial</div><div class="value">14 days</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="background: var(--cream-100); padding: 14px 16px; font-size: 12.5px; color: var(--ink-700);">
|
|
<div style="display: flex; gap: 8px; align-items: start"><i data-lucide="info" style="width: 14px; height: 14px; color: var(--navy-700); flex-shrink: 0; margin-top: 2px;"></i>
|
|
<span>Your public purchase URL will be<br><code style="font-family: var(--font-mono); color: var(--navy-900); font-size: 12px">aurora.keysat.local/buy/sundial-2</code></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script>lucide.createIcons();</script>
|
|
</body>
|
|
</html>
|