design: CosmoGenesis wallet UI system + four-tab mockups + glossary
Add the CosmoGenesis design system (extracted from the project's own website) and the full four-tab IA as live HTML mockups, plus the canonical UI glossary and the Capacitor build handoff. - design/cosmo-genesis.css + starfield.ts: tokens (dark spectral sky, starfield, parallax, 360deg rotation, acid-glow risk scale), Fraunces + JetBrains Mono, mono-for-data rule. - design/mockups/: Main, Assets hub (MBA|NBA x My/Orbital, My/Market), Avalanche (eight-class taxonomy + clickable detail sheets + create wizard), Apps (WalletConnect+CashConnect, network switcher, explorers), plus Send/Swap/Settings/Activity/Onboarding/Elevation/Asset-detail/Fuse. - wiki/glossary.md: canonical vocabulary (ASM=Automated Swap Mechanism, Orbital, UER, PNV, eight classes, NBA family, risk scale, WC vs CC). - design/CAPACITOR_HANDOFF.md: file manifest + build prompt for the shell. - snapshots 0053 (CosmoGenesis four-tab shell) + 0054 (NBA taxonomy correction, BCH-logo nav fix, asset-type detail sheets). .gitignore: add .chipnet-*.json catch-all (covers keys-e/f/g and the tote/CLOB/oracle/metals test artifacts; superset of the per-file entries). Leaves the feat/onramp-discover-adr0036 branch's own tracked changes (onramp, web, shells, decisions.md ADR-0040) untouched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
walerikus
parent
d1bc0f0ae7
commit
87a18adf54
22 changed files with 4223 additions and 0 deletions
49
.gitignore
vendored
Normal file
49
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
node_modules/
|
||||
dist/
|
||||
*.log
|
||||
.env
|
||||
.env.local
|
||||
.DS_Store
|
||||
coverage/
|
||||
.regtest-data/
|
||||
wiki/code-map.md
|
||||
|
||||
# Chipnet/testnet4 dev wallet — generated by scripts/chipnet-setup.mjs.
|
||||
# Holds a WIF private key for a testnet-only address. Never commit; never
|
||||
# fund with real BCH.
|
||||
.chipnet-keys.json
|
||||
.chipnet-keys-b.json
|
||||
.chipnet-keys-c.json
|
||||
.chipnet-keys-d.json
|
||||
.chipnet-tokens.json
|
||||
.chipnet-vulnerable-tokens.json
|
||||
.chipnet-asm-token.json
|
||||
.chipnet-asm2-token.json
|
||||
.chipnet-cap-token.json
|
||||
.chipnet-t001-token.json
|
||||
.chipnet-mut-state.json
|
||||
.chipnet-whitelist-test.json
|
||||
.chipnet-escalating-test.json
|
||||
.chipnet-escalating-50pc-test.json
|
||||
.chipnet-bonding-swap-test.json
|
||||
.chipnet-escalating-source-swap-test.json
|
||||
.chipnet-swap-remainder-test.json
|
||||
.chipnet-denomination-fee-test.json
|
||||
.chipnet-redeem-safety-test.json
|
||||
.registry-tokens.json
|
||||
|
||||
|
||||
.deviant/
|
||||
.chipnet-escrow-test.json
|
||||
.chipnet-escrow-fee-test.json
|
||||
.chipnet-escrow-fee-irregular-test.json
|
||||
.chipnet-escrow-flat-test.json
|
||||
.chipnet-che-escrow-test.json
|
||||
.chipnet-che-perside-test.json
|
||||
.external/
|
||||
|
||||
# Catch-all for ALL generated chipnet artifacts & dev key files (keys-e/f/g,
|
||||
# tote/CLOB/oracle/metals/dra/clob test outputs, etc.). Superset of the
|
||||
# per-file entries above — these are testnet-only, regenerated by scripts,
|
||||
# and may hold WIF private keys. Never commit.
|
||||
.chipnet-*.json
|
||||
143
design/CAPACITOR_HANDOFF.md
Normal file
143
design/CAPACITOR_HANDOFF.md
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
# Capacitor shell — build handoff
|
||||
|
||||
> Paste the **Prompt** (bottom) into the dedicated Capacitor session, or point that session
|
||||
> at this file. It is self-contained: it names every file to read and the constraints to
|
||||
> honor. Authored from the 2026-05-25 design session (ADR-0026, snapshot 0053).
|
||||
|
||||
---
|
||||
|
||||
## Goal
|
||||
|
||||
Scaffold the **real Deviant wallet shell**: a **Capacitor + React (Vite, DOM)** app that
|
||||
renders the four-tab CosmoGenesis IA over the **existing shared TypeScript core**, running
|
||||
**in-process, client-side, non-custodially** in the WebView. No fork of the core, no
|
||||
nodejs-mobile, no IPC bridge — this was proven viable in snapshot 0044 (Capacitor GO) via
|
||||
the noble crypto shim (ADR-0023).
|
||||
|
||||
## Runtime / stack (decided — do not re-litigate)
|
||||
|
||||
- **Capacitor + React + Vite.** The desktop browser is the same engine class as the
|
||||
WebView, so build/verify on desktop first; device/Mac only needed for native plugins.
|
||||
- **Crypto:** the core uses `@bitauth/libauth`; in the bundle it is replaced by the pure-JS
|
||||
`@noble` shim — see **`src/crypto/README.md`** for the exact Vite/webpack alias snippet.
|
||||
A working reference spike (Vite + React + the shim, live chipnet broadcast) lives in
|
||||
**`spike/cap-web/`** — reuse its bundler config; it is otherwise throwaway.
|
||||
- **One required core fix:** `dist/verify/canonical.js` (D-3) reads contract artifacts via
|
||||
`readFileSync` at module-init — the only `fs` touchpoint in the import graph. Replace it
|
||||
with a bundler-friendly JSON `import` (snapshot 0044). Do this in the core, not a shim.
|
||||
|
||||
## Files to read (manifest)
|
||||
|
||||
**Design system (the look — authoritative):**
|
||||
- `design/cosmo-genesis.css` — all tokens (sky gradient, starfield, acid `#d6ff3d` + glow
|
||||
tiers, ink, the **risk scale** `--risk-safe/--risk-warn/--risk-high`), type, glow utils.
|
||||
- `design/starfield.ts` — the starfield generator (already a TS module — import it).
|
||||
- `design/README.md` — how to consume; font `<link>` for Fraunces + JetBrains Mono.
|
||||
|
||||
**The screens (layout source of truth — port these to React components):**
|
||||
- `design/mockups/main-tab.html` — Main (BCH front door, portfolio donut, recent feed +
|
||||
MBA|Token filter, BCH `₿` tab icon).
|
||||
- `design/mockups/assets-tab.html` — Assets hub (two-level tabs, risk scale rows, Orbital).
|
||||
- `design/mockups/avalanche-tab.html` — Avalanche (two-column eight-class taxonomy).
|
||||
- `design/mockups/avalanche-wizard.html` — the Create wizard (live class derivation).
|
||||
- `design/mockups/apps-tab.html` — Apps (Connected|Discover, network switcher, WC/CC).
|
||||
|
||||
**Spec / vocabulary / decisions:**
|
||||
- `wiki/wallet-ui-design.md` — **§"CosmoGenesis shell — navigation model (v6, current)"** is
|
||||
the binding IA + the risk reframe. (Older v5 sections are history.)
|
||||
- `wiki/glossary.md` — canonical UI copy: ASM=Automated Swap Mechanism, Orbital, UER, PNV,
|
||||
the 8 classes, the risk scale, WalletConnect vs CashConnect.
|
||||
- `wiki/decisions.md` — **ADR-0026** (this UI), ADR-0008 (no blessed lists), ADR-0011
|
||||
(two-knob fee), ADR-0023 (crypto shim), ADR-0025 (PNV/denomination, price discipline).
|
||||
|
||||
**Core integration points (wire the UI to these — do not reimplement):**
|
||||
- `src/wallet/runtime.ts` → `connectWallet(...)` assembles a `DeviantWallet`. `src/web/api.ts`
|
||||
is the request/response surface the UI should mirror.
|
||||
- `src/wallet/keystore.ts` → the cross-shell `KeyStore` contract. Implement it as a
|
||||
**Capacitor secure-storage + biometric plugin** (the shell-specific piece).
|
||||
- `src/wallet/market.ts` → `routeSwap(source, target, providers)` → `asm | routed |
|
||||
unavailable` — drives the Orbital (ASM) vs Market (routed) split.
|
||||
- `src/verify/*` + `src/token/classify.ts` + `src/token/assetClass.ts` → the D-1/D-2/D-3
|
||||
checks + eight-class classifier that feed the **risk scale** and the asset chips.
|
||||
|
||||
## IA to implement (from the v6 nav + mockups)
|
||||
|
||||
- **Bottom bar:** `Main · Assets · ⟨FAB⟩ · Avalanche · Apps`. One `TabBar` component;
|
||||
**active tab = acid glow** (the selected indicator). Main's icon is the BCH `₿` mark
|
||||
**leaning LEFT** (counter-clockwise, ~16°) — TapSwap-style on the tab (green `₿` on a
|
||||
dark circle + white outline, acid-glow ring when selected); the larger BCH card badge is
|
||||
green-filled. Use the official `bitcoin-cash-logo-wt.svg` from bitcoincash.org for both.
|
||||
Central **FAB** opens a sheet: Send / Receive / Scan QR. Use the **official BCH logo**
|
||||
(simple-icons `bitcoincash`: green disc, bold white B) for the `₿` mark, not a glyph.
|
||||
The portfolio donut is a **conic ring** (calm by default, soft even glow on hover);
|
||||
per-family filtering is via the **clickable legend rows** (BCH/MBA/Tokens → shared
|
||||
`filterFeed(fam)`), which also drives the Recent labels.
|
||||
- **Main:** BCH balance + fuel card (Rule 4), portfolio donut (BCH teal / MBA acid / Tokens
|
||||
violet; glow on hover), recent feed with `Recent · MBA · Token · View all` filter.
|
||||
- **Assets:** two levels — family `Assets | Tokens`, then `My Assets | Orbital Network` /
|
||||
`My Tokens | Market`. Orbital = directory of all DEAs (registries + on-chain discovery,
|
||||
no blessed catalog). Market = routed external DEX (Cauldron/TapSwap).
|
||||
- **Avalanche:** two-column eight-class taxonomy → Create wizard (backing×mint×supply derive
|
||||
the class live; rate tier MBA-only; two-knob fee; type-`CREATE` review wall).
|
||||
- **Apps:** `Connected | Discover` sub-tabs, network switcher (Mainnet/Chipnet/Testnet,
|
||||
Chipnet default), **dual-protocol** (WalletConnect *and* CashConnect, auto-detect from the
|
||||
URI, one transaction-preview), user-extensible BCH-app directory.
|
||||
|
||||
## Hard constraints (do not violate)
|
||||
|
||||
1. **MBAs show PNV (`units × backingRate`), never market "price."** Market price is allowed
|
||||
only on the **Tokens** tab (no-peg assets). (ADR-0025, spec §4.4.)
|
||||
2. **Risk scale, not Verified/Unverified.** Automated 🟢 canonical / 🟠 risky / 🔴 high-risk
|
||||
computed from D-1/D-2/D-3. Canonical is calm (class chip only, no badge); only anomalies
|
||||
are flagged. **Acid glow only ever marks canonical/safe + actions/selection — never a
|
||||
risky asset.**
|
||||
3. **No blessed lists** — ships zero default registries, trusted keys, or "recommended"
|
||||
apps; everything user-added (ADR-0008).
|
||||
4. **Tier B raw-BCH co-display (D-4/D-5)** and the graduated-friction B-send ladder
|
||||
(ADR-0013) carry over from `wallet-ui-design.md`.
|
||||
5. **Non-custodial**, chipnet default during development.
|
||||
|
||||
## Suggested structure
|
||||
|
||||
```
|
||||
shells/app/ # Capacitor + Vite + React
|
||||
vite.config.ts # noble-shim alias (src/crypto/README.md) + node polyfills
|
||||
capacitor.config.ts
|
||||
src/
|
||||
theme/ # import ../../design/cosmo-genesis.css + starfield.ts
|
||||
core/ # thin client over src/web/api.ts surface → connectWallet
|
||||
keystore/CapacitorKeyStore # implements src/wallet/keystore.ts (secure storage + biometric)
|
||||
components/{TabBar, Fab, RiskBadge, AssetRow, Donut, Segmented, Sheet}
|
||||
screens/{Main, Assets, Avalanche, AvalancheWizard, Apps, Settings}
|
||||
connect/{walletconnect, cashconnect} # both protocols
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Prompt (paste into the Capacitor session)
|
||||
|
||||
> You are building the production Deviant BCH wallet shell. Read, in this order:
|
||||
> `design/CAPACITOR_HANDOFF.md` (this file), `wiki/wallet-ui-design.md` §"CosmoGenesis shell
|
||||
> (v6)", `wiki/glossary.md`, `design/cosmo-genesis.css`, and the five mockups in
|
||||
> `design/mockups/`. Then read `src/crypto/README.md`, `src/wallet/{runtime,keystore,market}.ts`,
|
||||
> `src/web/api.ts`, `src/token/{classify,assetClass}.ts`, and skim `spike/cap-web/`.
|
||||
>
|
||||
> Scaffold `shells/app/` as a **Capacitor + Vite + React** app that runs the existing core
|
||||
> **in-process in the WebView** via the noble crypto shim (alias per `src/crypto/README.md`;
|
||||
> reuse `spike/cap-web/`'s bundler config). First, fix the one `fs` touchpoint:
|
||||
> `dist/verify/canonical.js` must load artifacts via a bundler-friendly JSON import, not
|
||||
> `readFileSync`. Verify a chipnet balance fetch + a plain-BCH self-send broadcast works
|
||||
> from the browser before building screens.
|
||||
>
|
||||
> Then port the five mockups to React components on the CosmoGenesis tokens: the four-tab
|
||||
> bottom bar + FAB, the Assets two-level hub (My Assets | Orbital Network / My Tokens |
|
||||
> Market), the Avalanche taxonomy + create wizard, and Apps (Connected | Discover, network
|
||||
> switcher, **WalletConnect + CashConnect**). Wire assets to `routeSwap` and the
|
||||
> verify/classify modules. Implement `KeyStore` as a Capacitor secure-storage + biometric
|
||||
> plugin.
|
||||
>
|
||||
> Honor the hard constraints: MBAs show **PNV, never price** (price only on Tokens); the
|
||||
> **risk scale** (🟢 canonical / 🟠 risky / 🔴 high-risk) replaces Verified/Unverified, and
|
||||
> **acid glow marks only canonical/safe + selection/actions, never a risky asset**; no
|
||||
> blessed registries/keys/apps (ADR-0008); non-custodial, chipnet default. Build and verify
|
||||
> on desktop first; flag anything that needs a device/Mac.
|
||||
70
design/README.md
Normal file
70
design/README.md
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
# CosmoGenesis — Deviant design system
|
||||
|
||||
The project's own named visual language (v0.1), extracted from the project website
|
||||
(`Knowledgebase/08_historical_drafts/deviant_website.html`) and extended with the
|
||||
wallet's verification-state semantics.
|
||||
|
||||
## Files
|
||||
|
||||
| File | What it is |
|
||||
|---|---|
|
||||
| `cosmo-genesis.css` | Design tokens (CSS custom properties) + glow utilities + starfield styles + base type. Import once at the shell root. |
|
||||
| `starfield.ts` | The starfield dot generator (ported verbatim from the website). Call `generateStars(el)` on the `.stars` container. |
|
||||
|
||||
## The system in one screen
|
||||
|
||||
- **Sky** — dark layered-gradient background (`--sky-deep` `#050810` → `--sky-mid` →
|
||||
`--sky-rim`) with faint **spectral-aurora** colour tints, fixed attachment. White
|
||||
twinkling **starfield** over it, with optional **mouse parallax** — call
|
||||
`enableParallax(starsEl)` from `starfield.ts` (respects `prefers-reduced-motion`).
|
||||
- **Acid** — lime `#d6ff3d` with three glow tiers (`--acid-glow / -halo / -dim`). It is
|
||||
the signature accent and is **reserved for VERIFIED / ASM / primary actions** so the
|
||||
glow never implies safety where there is none.
|
||||
- **Type** — `Fraunces` (serif) for display/headings/balances; `JetBrains Mono` for all
|
||||
**numeric and technical data** (sats, BCH, PNV, addresses, token IDs, labels). Use the
|
||||
`.mono` / `.data` / `.amount` / `.address` classes — they enable tabular figures.
|
||||
- **Glow utilities** — `.glow-text`, `.glow-box`, `.accent-bar`, `.acid-dot`.
|
||||
|
||||
## Verification-state colors (spec §7)
|
||||
|
||||
| Token | State | Use |
|
||||
|---|---|---|
|
||||
| `--state-verified` (acid) | DEA/PLA/MCA/MTA-Verified, ASM/Orbital | the only place acid glow appears |
|
||||
| `--state-unverified` (amber) | `MBA-Unverified` (D-1 fail) | suppress PNV, disable Orbital |
|
||||
| `--state-warning` (red) | `Warning — Underbacked` (D-2 fail) | per-UTXO peg-deficit |
|
||||
| `--state-neutral` (muted) | Tier B `Unverified definition` | user-rooted trust |
|
||||
|
||||
## Fonts
|
||||
|
||||
Load in the shell `<head>`:
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
```
|
||||
|
||||
## Mockups (`mockups/`)
|
||||
|
||||
Navigable CosmoGenesis mockups — shared bottom bar (Main · Assets · **△** Avalanche · Apps)
|
||||
+ central FAB across screens. Class detail sheets render the code as acid-coloured initial
|
||||
capitals (**P**ermissionless **T**oken **U**nlimited → PTU). Taxonomy per ADR-0027 / ADR-0028.
|
||||
|
||||
| File | Screen |
|
||||
|---|---|
|
||||
| `main-tab.html` | Main — BCH fuel card, portfolio donut (BCH / MBA / NBA), activity feed |
|
||||
| `assets-tab.html` | Assets hub — MBA \| NBA × My/Orbital · My/Market · automated risk scale |
|
||||
| `avalanche-tab.html` | Avalanche — eight-class matrix + clickable per-class & family detail sheets |
|
||||
| `avalanche-wizard.html` | Create asset — full **6-step** wizard + type-`CREATE` review wall |
|
||||
| `apps-tab.html` | Apps — Connected \| Discover, WalletConnect + CashConnect, network switcher |
|
||||
| `send-flow.html` | Send / Receive / Scan (FAB) — D-4/D-5 raw-BCH co-display, ADR-0013 friction ladder |
|
||||
| `swap-flow.html` | Orbital swap — builder → quote → result, persistent path indicator (ASM) |
|
||||
| `settings.html` | Settings — security (friction thresholds), Privacy/CashFusion, network, empty-default registries (ADR-0008) |
|
||||
| `asset-detail.html` | Spectrum asset pane — 7 regions, PNV + raw-BCH, action row, rate & backing |
|
||||
| `elevation.html` | Elevation B→A — pre-flight integrity panel (T-002 poisoning guard) |
|
||||
| `activity.html` | Activity — filterable list + underbacked-receipt (T-001 victim) detail |
|
||||
| `onboarding.html` | Onboarding — Welcome → BCH-fuel concept → seed → network (no tab bar) |
|
||||
|
||||
## Provenance
|
||||
|
||||
Naming/copy that pairs with these tokens lives in [`../wiki/glossary.md`](../wiki/glossary.md).
|
||||
The information architecture these styles dress lives in
|
||||
[`../wiki/wallet-ui-design.md`](../wiki/wallet-ui-design.md).
|
||||
235
design/cosmo-genesis.css
Normal file
235
design/cosmo-genesis.css
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
/* ============================================================================
|
||||
CosmoGenesis — Deviant wallet design system (v0.1)
|
||||
|
||||
The project's own named visual language, extracted faithfully from
|
||||
Knowledgebase/08_historical_drafts/deviant_website.html and extended with the
|
||||
verification-state semantics the wallet needs (spec §7, wiki/wallet-ui-design.md).
|
||||
|
||||
Consume from any shell (web / Capacitor / Electron). Import once at the root:
|
||||
import './design/cosmo-genesis.css';
|
||||
Pair with the starfield generator in design/starfield.ts.
|
||||
|
||||
Fonts (load in <head>):
|
||||
Fraunces (opsz 9..144, wght 300..600) + JetBrains Mono (wght 400,500)
|
||||
https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap
|
||||
============================================================================ */
|
||||
|
||||
:root {
|
||||
/* ---- The sky (backgrounds & surfaces) ------------------------------- */
|
||||
--sky-deep: #02040a; /* app background, deepest */
|
||||
--sky-mid: #060912; /* raised surfaces / cards */
|
||||
--sky-rim: #0c1220; /* card edges / elevated panels */
|
||||
--sky-cove: #070d1a; /* gradient accent (bottom-left) */
|
||||
|
||||
/* Semantic surface aliases (use these in components) */
|
||||
--bg: var(--sky-deep);
|
||||
--surface-1: var(--sky-mid);
|
||||
--surface-2: var(--sky-rim);
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-strong: rgba(255, 255, 255, 0.12);
|
||||
|
||||
/* ---- Starfield ------------------------------------------------------ */
|
||||
--star-faint: rgba(255, 255, 255, 0.22);
|
||||
--star-mid: rgba(255, 255, 255, 0.38);
|
||||
--star-bright: rgba(255, 255, 255, 0.58);
|
||||
|
||||
/* ---- Ink (text) ----------------------------------------------------- */
|
||||
--ink-soft: #b8c2d4;
|
||||
--ink: #d6dde9;
|
||||
--ink-bright: #f1f4fa;
|
||||
--muted: #6a7488;
|
||||
|
||||
/* ---- Acid (the signature accent) ------------------------------------ */
|
||||
--acid: #d6ff3d; /* CTAs, Orbital/ASM, DEA-Verified */
|
||||
--acid-glow: rgba(214, 255, 61, 0.55);
|
||||
--acid-halo: rgba(214, 255, 61, 0.22);
|
||||
--acid-dim: rgba(214, 255, 61, 0.08);
|
||||
|
||||
/* ---- Automated risk scale (traffic-light; spec §7 D-1/D-2 → tier) ----- */
|
||||
/* The wallet classifies every asset automatically; the user never sets it.
|
||||
Green = canonical/standard (safe) · orange = risky · red = high risk
|
||||
(e.g. issuer free-minted to self and sells it as a "backed" currency —
|
||||
the T-001 fake-backing pattern; D-2 catches the missing backing). */
|
||||
--risk-safe: var(--acid); /* canonical contract (D-1) + fully backed (D-2) */
|
||||
--risk-safe-glow: var(--acid-glow);
|
||||
--risk-warn: #ff9f1c; /* risky: non-standard / uncertain backing */
|
||||
--risk-high: #ff4d4d; /* high risk: fake-backed / underbacked (T-001) */
|
||||
--risk-neutral: var(--muted); /* informational (e.g. Tier B from a known source) */
|
||||
--rust-deep: #6b2a1c; /* original website token, retained */
|
||||
|
||||
/* legacy aliases (pre-reframe names) — kept until docs migrate fully */
|
||||
--state-verified: var(--risk-safe);
|
||||
--state-verified-glow: var(--risk-safe-glow);
|
||||
--state-unverified: var(--risk-warn);
|
||||
--state-warning: var(--risk-high);
|
||||
--state-neutral: var(--risk-neutral);
|
||||
|
||||
/* ---- Typography ----------------------------------------------------- */
|
||||
--font-display: 'Fraunces', Georgia, serif; /* headings, balances, display */
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
|
||||
/* RULE: all numeric/technical data — sats, BCH, PNV, addresses, token IDs,
|
||||
the D-4 raw-BCH co-display, labels — render in --font-mono. */
|
||||
|
||||
/* ---- Motion --------------------------------------------------------- */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* ---- Base ------------------------------------------------------------- */
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html, body {
|
||||
background: var(--sky-deep);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-feature-settings: "ss01", "ss02";
|
||||
font-synthesis: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* The sky — layered radial gradients, fixed so it doesn't scroll with content */
|
||||
body {
|
||||
background: var(--sky-deep); /* deep base stays constant — only the aurora drifts */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Slowly-rotating sky: aurora + vignette sweep through a full 360° (~200s), so
|
||||
different areas darken and brighten over time. Oversized so corners never show;
|
||||
sits behind the starfield (z-index 0) and content (z-index 1). */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 50%; left: 50%;
|
||||
width: 160vmax; height: 160vmax;
|
||||
margin: -80vmax 0 0 -80vmax;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(ellipse 26% 22% at 62% 40%, rgba(127,140,255,.11) 0%, transparent 55%), /* violet */
|
||||
radial-gradient(ellipse 24% 20% at 40% 60%, rgba(10,193,142,.09) 0%, transparent 55%), /* teal */
|
||||
radial-gradient(ellipse 20% 18% at 52% 50%, rgba(214,255,61,.05) 0%, transparent 50%), /* acid */
|
||||
radial-gradient(ellipse 22% 18% at 60% 57%, rgba(120,90,200,.07) 0%, transparent 52%), /* indigo */
|
||||
radial-gradient(ellipse 30% 26% at 47% 42%, var(--sky-rim) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 26% 22% at 60% 60%, var(--sky-mid) 0%, transparent 50%),
|
||||
radial-gradient(ellipse 28% 24% at 40% 58%, var(--sky-cove) 0%, transparent 52%);
|
||||
animation: sky-rotate 200s linear infinite;
|
||||
}
|
||||
@keyframes sky-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
|
||||
|
||||
/* Monospace utility for all data/numeric content */
|
||||
.mono,
|
||||
.data,
|
||||
.amount,
|
||||
.address,
|
||||
.token-id {
|
||||
font-family: var(--font-mono);
|
||||
font-feature-settings: "tnum"; /* tabular figures so columns align */
|
||||
}
|
||||
|
||||
/* ---- Starfield (populate .stars via design/starfield.ts) -------------- */
|
||||
.stars {
|
||||
position: fixed;
|
||||
inset: -48px; /* slightly larger than viewport so mouse-parallax never reveals an edge */
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
transition: transform 0.25s ease-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 3px rgba(255, 255, 255, 0.55); /* subtle glow → more visible */
|
||||
animation: twinkle var(--twinkle-duration, 12s) ease-in-out infinite;
|
||||
animation-delay: var(--twinkle-delay, 0s);
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.35; }
|
||||
50% { opacity: 0.85; }
|
||||
}
|
||||
|
||||
/* App content sits above the starfield */
|
||||
.app, .container { position: relative; z-index: 1; }
|
||||
|
||||
/* ---- Glow utilities (the CosmoGenesis signature) ---------------------- */
|
||||
|
||||
/* Acid luminescence on text (the "deviation" glow) */
|
||||
.glow-text {
|
||||
color: var(--acid);
|
||||
text-shadow:
|
||||
0 0 4px var(--acid-glow),
|
||||
0 0 14px var(--acid-halo),
|
||||
0 0 32px var(--acid-dim);
|
||||
}
|
||||
|
||||
/* Acid luminescence on a box/element (e.g. primary button, active nav) */
|
||||
.glow-box {
|
||||
box-shadow:
|
||||
0 0 6px var(--acid-glow),
|
||||
0 0 14px var(--acid-halo);
|
||||
}
|
||||
|
||||
/* Glowing accent bar on the left edge (callouts, the active item, emphasis) */
|
||||
.accent-bar {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
}
|
||||
.accent-bar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0; top: 6px; bottom: 6px;
|
||||
width: 2px;
|
||||
background: var(--acid);
|
||||
box-shadow: 0 0 6px var(--acid-glow), 0 0 14px var(--acid-halo);
|
||||
}
|
||||
|
||||
/* The wordmark's glowing acid dot (Deviant•) — reusable as a "live" indicator */
|
||||
.acid-dot::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 5px; height: 5px;
|
||||
margin-left: 7px;
|
||||
vertical-align: middle;
|
||||
transform: translateY(-2px);
|
||||
background: var(--acid);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 6px var(--acid-glow), 0 0 14px var(--acid-halo);
|
||||
}
|
||||
|
||||
/* ---- Primary action ---------------------------------------------------- */
|
||||
.btn-primary {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--sky-deep);
|
||||
background: var(--acid);
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
padding: 14px 20px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 16px var(--acid-halo);
|
||||
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
|
||||
}
|
||||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 24px var(--acid-glow); }
|
||||
|
||||
/* ---- Mono labels (nav, chips, section labels) ------------------------- */
|
||||
.label-mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ---- Accessibility ---------------------------------------------------- */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.star { animation: none; opacity: 0.4; }
|
||||
.btn-primary { transition: none; }
|
||||
}
|
||||
13
design/index.html
Normal file
13
design/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- CosmoGenesis mockup gallery entry. Opens the current mockup directly so the
|
||||
preview screenshot lands on it. Add more mockups under mockups/ over time. -->
|
||||
<meta http-equiv="refresh" content="0; url=mockups/assets-tab.html">
|
||||
<title>Deviant · CosmoGenesis mockups</title>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="mockups/assets-tab.html">Assets tab mockup →</a></p>
|
||||
</body>
|
||||
</html>
|
||||
130
design/mockups/activity.html
Normal file
130
design/mockups/activity.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Activity · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); overflow:hidden; }
|
||||
.scroll { max-height:740px; overflow-y:auto; margin:0 -4px; padding:0 4px; } .scroll::-webkit-scrollbar { width:0; }
|
||||
.view { display:none; } .view.active { display:block; }
|
||||
|
||||
.flow-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
|
||||
.back { font-size:20px; color:var(--ink-soft); cursor:pointer; background:0; border:0; }
|
||||
.flow-title { font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--ink-bright); }
|
||||
|
||||
/* filters */
|
||||
.filters { display:flex; gap:7px; overflow-x:auto; margin-bottom:14px; padding-bottom:2px; }
|
||||
.filters::-webkit-scrollbar { height:0; }
|
||||
.fchip { flex:none; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:7px 11px; border-radius:9px; border:1px solid var(--border-strong); background:transparent; color:var(--muted); cursor:pointer; }
|
||||
.fchip.on { color:var(--acid); border-color:rgba(214,255,61,.45); text-shadow:0 0 6px var(--acid-halo); }
|
||||
|
||||
.act { display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--border); cursor:pointer; }
|
||||
.act .ico { width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--surface-1); color:var(--ink-soft); font-size:14px; }
|
||||
.act .a-title { font-family:var(--font-display); font-size:14px; color:var(--ink); }
|
||||
.act .a-sub { font-family:var(--font-mono); font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.act .a-amt { margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--ink-bright); text-align:right; }
|
||||
.act .a-amt.in { color:#0ac18e; }
|
||||
.flag { font-family:var(--font-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:var(--risk-high); border:1px solid rgba(255,77,77,.4); border-radius:5px; padding:2px 5px; display:inline-block; margin-top:3px; }
|
||||
|
||||
/* underbacked detail */
|
||||
.det-head { font-family:var(--font-display); font-weight:500; font-size:19px; color:var(--ink-bright); margin-bottom:4px; }
|
||||
.det-sub { font-family:var(--font-mono); font-size:10px; color:var(--risk-high); margin-bottom:16px; }
|
||||
.deficit { background:rgba(255,77,77,.07); border:1px solid rgba(255,77,77,.3); border-radius:14px; padding:15px; margin-bottom:14px; }
|
||||
.deficit .drow { display:flex; justify-content:space-between; padding:7px 0; font-family:var(--font-mono); font-size:12px; }
|
||||
.deficit .drow .k { color:var(--ink-soft); } .deficit .drow .v { color:var(--ink-bright); }
|
||||
.deficit .drow.bad .v { color:var(--risk-high); }
|
||||
.deficit .drow.recover { border-top:1px solid rgba(255,77,77,.25); margin-top:4px; padding-top:11px; }
|
||||
.deficit .drow.recover .v { color:#0ac18e; }
|
||||
.t001 { font-family:var(--font-mono); font-size:9px; color:var(--risk-high); line-height:1.6; margin-bottom:16px; }
|
||||
.sec-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:4px 2px 9px; }
|
||||
.act-foot { display:flex; flex-direction:column; gap:9px; }
|
||||
.afbtn { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:13px; border-radius:11px; background:transparent; color:var(--ink-soft); border:1px solid var(--border-strong); cursor:pointer; text-align:center; }
|
||||
.meta { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:14px; line-height:1.7; }
|
||||
.meta .lk { color:var(--acid); }
|
||||
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); } .tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
.tab.active .ico { color: var(--acid); } .tab:not(.active) .bch-b { opacity:.6; }
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; } .bch-b .bch-logo { width:100%; height:100%; } .bch-b.sm { width:28px; height:28px; }
|
||||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
<div class="phone">
|
||||
|
||||
<!-- LIST -->
|
||||
<section class="view active" id="v-list">
|
||||
<div class="scroll">
|
||||
<div class="flow-head"><div class="flow-title">Activity</div></div>
|
||||
<div class="filters">
|
||||
<button class="fchip on">All</button>
|
||||
<button class="fchip">Received</button>
|
||||
<button class="fchip">Sent</button>
|
||||
<button class="fchip">Swap</button>
|
||||
<button class="fchip">Founder</button>
|
||||
<button class="fchip">System</button>
|
||||
<button class="fchip">⚠ Flagged</button>
|
||||
</div>
|
||||
<div class="act"><div class="ico">↓</div><div><div class="a-title">Received</div><div class="a-sub">from bchtest:qz9…k4f · 2h ago</div></div><div class="a-amt in">+0.010 BCH</div></div>
|
||||
<div class="act" data-go="detail"><div class="ico">↓</div><div><div class="a-title">Received MRG</div><div class="a-sub">from bchtest:qr4…9p2 · 6h ago</div><span class="flag">⚠ underbacked</span></div><div class="a-amt">+9,000 MRG</div></div>
|
||||
<div class="act"><div class="ico">⇄</div><div><div class="a-title">Orbital swap</div><div class="a-sub">50 NOVA → 0.005 BCH · ASM · 1d</div></div><div class="a-amt">atomic</div></div>
|
||||
<div class="act"><div class="ico">↓</div><div><div class="a-title">Claimed</div><div class="a-sub">Nova reservoir · DEA · 2d</div></div><div class="a-amt in">+120 NOVA</div></div>
|
||||
<div class="act"><div class="ico">★</div><div><div class="a-title">Avalanche genesis</div><div class="a-sub">Nova · DEA · category 9c2f…a410 · 3d</div></div><div class="a-amt">founder</div></div>
|
||||
<div class="act"><div class="ico">⚙</div><div><div class="a-title">Definition imported</div><div class="a-sub">ZCoin [B] · 4 rows re-classified · 4d</div></div><div class="a-amt">system</div></div>
|
||||
<div class="act"><div class="ico">↑</div><div><div class="a-title">Sent</div><div class="a-sub">to bchtest:qp2…7lm · 5d</div></div><div class="a-amt">−5 LMN</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- UNDERBACKED-RECEIPT DETAIL (T-001 victim view) -->
|
||||
<section class="view" id="v-detail">
|
||||
<div class="scroll">
|
||||
<div class="flow-head"><button class="back" data-go="list">←</button><div class="flow-title">Receipt</div></div>
|
||||
<div class="det-head">Received 9,000 MRG</div>
|
||||
<div class="det-sub">⚠ High risk — underbacked (T-001 fake-backing)</div>
|
||||
|
||||
<div class="deficit">
|
||||
<div class="drow"><span class="k">Peg requires</span><span class="v">9,000,000 sat</span></div>
|
||||
<div class="drow bad"><span class="k">UTXO actually carries</span><span class="v">12,000 sat</span></div>
|
||||
<div class="drow recover"><span class="k">Recoverable (literal BCH)</span><span class="v">12,000 sat only</span></div>
|
||||
</div>
|
||||
<div class="t001">This contract claims an MBA backing rate but does not enforce <span style="color:var(--ink-soft)">output[1].value == grossSats</span> — the T-001 signature (V2.7 §7.1). D-2 caught the missing backing; PNV is suppressed. The sender free-minted to self and sold it as "backed." <span style="color:var(--acid)">[ Verification explainer ]</span></div>
|
||||
|
||||
<div class="sec-label">Your options</div>
|
||||
<div class="act-foot">
|
||||
<button class="afbtn">Exclude from balance</button>
|
||||
<button class="afbtn">Send back to sender</button>
|
||||
<button class="afbtn">Move to quarantine address</button>
|
||||
</div>
|
||||
<div class="meta">
|
||||
Sender · bchtest:qr4…9p2<br>
|
||||
txid · 3b8e…c12a <span class="lk">↗ explorer</span><br>
|
||||
Verification state recorded at receipt — stays flagged forever.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav class="tabbar">
|
||||
<button class="tab"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab" id="fab">⇅</button>
|
||||
<button class="tab"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
<script>
|
||||
(function generateStars(){const c=document.getElementById('stars');if(!c)return;const n=window.innerWidth<700?100:180;const f=document.createDocumentFragment();for(let i=0;i<n;i++){const s=document.createElement('div');s.className='star';const r=Math.random();let sz,o,d;if(r<.78){sz=1+Math.random()*.4;o=.18+Math.random()*.22;d=14+Math.random()*8;}else if(r<.95){sz=1.4+Math.random()*.6;o=.32+Math.random()*.22;d=10+Math.random()*6;}else{sz=1.8+Math.random()*.8;o=.45+Math.random()*.25;d=8+Math.random()*5;}s.style.width=sz+'px';s.style.height=sz+'px';s.style.left=Math.random()*100+'%';s.style.top=Math.random()*100+'%';s.style.opacity=o;s.style.setProperty('--twinkle-duration',d+'s');s.style.setProperty('--twinkle-delay',(Math.random()*d)+'s');f.appendChild(s);}c.appendChild(f);})();
|
||||
function showView(id){document.querySelectorAll('.view').forEach(function(v){v.classList.toggle('active',v.id==='v-'+id);});}
|
||||
document.querySelectorAll('[data-go]').forEach(function(el){el.addEventListener('click',function(){showView(el.getAttribute('data-go'));});});
|
||||
document.querySelectorAll('.fchip').forEach(function(f){f.addEventListener('click',function(){document.querySelectorAll('.fchip').forEach(function(x){x.classList.remove('on');});f.classList.add('on');});});
|
||||
(function(){var map={main:'main-tab.html',assets:'assets-tab.html',avalanche:'avalanche-tab.html',apps:'apps-tab.html'};document.querySelectorAll('.tabbar .tab').forEach(function(t){var el=t.querySelector('.lbl');if(!el)return;var d=map[el.textContent.trim().toLowerCase()];if(d){t.style.cursor='pointer';t.addEventListener('click',function(){location.href=d;});}});})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
251
design/mockups/apps-tab.html
Normal file
251
design/mockups/apps-tab.html
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Apps · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:900px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); }
|
||||
.screen-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
|
||||
.screen-title { font-family: var(--font-display); font-weight:500; font-size:27px; color: var(--ink-bright); letter-spacing:-.01em; }
|
||||
|
||||
/* sub-tabs */
|
||||
.segmented { display:flex; gap:6px; margin:2px 2px 16px; padding:4px; background: var(--surface-1); border:1px solid var(--border); border-radius:13px; }
|
||||
.seg { flex:1; text-align:center; cursor:pointer; border:0; background:transparent; font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); padding:10px 8px; border-radius:9px; transition: color .3s, background .3s; }
|
||||
.seg.active { color: var(--acid); background: var(--surface-2); text-shadow: 0 0 8px var(--acid-halo); }
|
||||
.panel.hidden { display:none; }
|
||||
|
||||
/* network switcher */
|
||||
.netbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 0 2px 16px; }
|
||||
.net-pills { display:flex; gap:7px; }
|
||||
.net { font-family: var(--font-mono); font-size:10px; letter-spacing:.05em; padding:7px 11px; border-radius:9px; border:1px solid var(--border-strong); background:transparent; color: var(--muted); cursor:pointer; }
|
||||
.net.active { color: var(--acid); border-color: rgba(214,255,61,.45); text-shadow:0 0 8px var(--acid-halo); }
|
||||
|
||||
/* connect hero */
|
||||
.connect-card { padding:18px; margin-bottom:14px; border-radius:18px; background: var(--surface-1); border:1px solid var(--border); }
|
||||
.cc-row { display:flex; align-items:center; gap:14px; }
|
||||
.cc-main { flex:1; min-width:0; }
|
||||
.cc-title { font-family: var(--font-display); font-weight:500; font-size:18px; color: var(--ink-bright); }
|
||||
.cc-sub { font-family: var(--font-mono); font-size:10px; color: var(--ink-soft); margin-top:5px; line-height:1.5; }
|
||||
.btn-acid { flex:none; font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:13px 16px; border-radius:11px; background: var(--acid); color: var(--sky-deep); border:0; cursor:pointer; box-shadow: 0 0 16px var(--acid-halo); }
|
||||
.protos { display:flex; gap:8px; margin-top:14px; }
|
||||
|
||||
.label-row { display:flex; align-items:center; justify-content:space-between; margin: 20px 4px 11px; }
|
||||
.cat { margin: 18px 4px 9px; }
|
||||
|
||||
/* chips & protocol badges */
|
||||
.chip { font-family: var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:6px; border:1px solid var(--border-strong); color: var(--ink-soft); display:inline-flex; align-items:center; gap:5px; }
|
||||
.proto.wc { color:#7fb0ff; border-color: rgba(127,176,255,.4); }
|
||||
.proto.cc { color:#b79bff; border-color: rgba(183,155,255,.4); }
|
||||
.proto.web { color: var(--muted); }
|
||||
.live { width:6px; height:6px; border-radius:50%; background: var(--acid); box-shadow:0 0 6px var(--acid-glow); }
|
||||
|
||||
/* rows */
|
||||
.row { display:flex; align-items:center; gap:13px; background: var(--surface-1); border:1px solid var(--border); border-radius:16px; padding:13px 15px; margin-bottom:10px; }
|
||||
.glyph { width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; background: var(--surface-2); color: var(--ink-soft); font-family: var(--font-mono); font-size:16px; }
|
||||
.row-main { flex:1; min-width:0; }
|
||||
.row-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
|
||||
.name { font-family: var(--font-display); font-weight:500; font-size:16px; color: var(--ink-bright); }
|
||||
.row-sub { margin-top:4px; font-family: var(--font-mono); font-size:10px; color: var(--muted); line-height:1.45; }
|
||||
.mini { flex:none; font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:8px 13px; border-radius:9px; cursor:pointer; background:transparent; color: var(--ink-soft); border:1px solid var(--border-strong); }
|
||||
.mini.go { background: var(--acid); color: var(--sky-deep); border-color: var(--acid); box-shadow: 0 0 12px var(--acid-halo); }
|
||||
|
||||
.foot-note { font-family: var(--font-mono); font-size:9px; color: var(--muted); line-height:1.5; margin: 16px 4px 0; }
|
||||
|
||||
/* bottom bar + fab */
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); }
|
||||
.tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
.tab.active .ico { color: var(--acid); text-shadow: 0 0 10px var(--acid-glow); }
|
||||
.tab.active .lbl { color: var(--ink-bright); }
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; }
|
||||
.bch-b .bch-logo { width:100%; height:100%; display:block; }
|
||||
.bch-b.sm { width:28px; height:28px; }
|
||||
.tab:not(.active) .bch-b { opacity:.6; }
|
||||
.tab.active .bch-b { box-shadow: 0 0 12px var(--acid-glow), 0 0 20px var(--acid-halo); }
|
||||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
|
||||
<div class="phone">
|
||||
<div class="screen-head">
|
||||
<div class="screen-title">Apps</div>
|
||||
<div class="label-mono">Connect · Discover</div>
|
||||
</div>
|
||||
|
||||
<!-- Network switcher (wallet-global; also in Settings) -->
|
||||
<div class="netbar">
|
||||
<span class="label-mono">Network</span>
|
||||
<div class="net-pills">
|
||||
<button class="net">Mainnet</button>
|
||||
<button class="net active">Chipnet</button>
|
||||
<button class="net">Testnet</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="segmented">
|
||||
<button class="seg active" data-panel="connected">Connected</button>
|
||||
<button class="seg" data-panel="discover">Discover</button>
|
||||
</div>
|
||||
|
||||
<div id="panel-connected" class="panel">
|
||||
<!-- Connect hero: both protocols, auto-detected -->
|
||||
<div class="connect-card">
|
||||
<div class="cc-row">
|
||||
<div class="cc-main">
|
||||
<div class="cc-title">Connect an app</div>
|
||||
<div class="cc-sub">Scan a QR or paste a session URI — auto-detects the protocol. One transaction preview before you sign.</div>
|
||||
</div>
|
||||
<button class="btn-acid">Scan</button>
|
||||
</div>
|
||||
<div class="protos">
|
||||
<span class="chip proto wc">WalletConnect</span>
|
||||
<span class="chip proto cc">CashConnect</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active connections -->
|
||||
<div class="label-row"><div class="label-mono">Active sessions</div><div class="label-mono" style="font-size:9px;">2</div></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="glyph">⌬</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">Cauldron</span><span class="chip proto wc">WC</span><span class="chip"><span class="live"></span>Live</span></div>
|
||||
<div class="row-sub">AMM DEX · connected 2h ago</div>
|
||||
</div>
|
||||
<button class="mini">Disconnect</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="glyph">◐</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">BCH Guru</span><span class="chip proto cc">CC</span><span class="chip"><span class="live"></span>Live</span></div>
|
||||
<div class="row-sub">Price-prediction game · connected today</div>
|
||||
</div>
|
||||
<button class="mini">Disconnect</button>
|
||||
</div>
|
||||
|
||||
</div><!-- /panel-connected -->
|
||||
|
||||
<div id="panel-discover" class="panel hidden">
|
||||
<!-- Discover directory -->
|
||||
<!-- Trade/DEX (Cauldron / TapSwap / Fex.cash) moved to Assets → NBA → Market (routed ⚠, ADR-0028). Apps is dApp connectivity only. -->
|
||||
<div class="cat label-mono">DeFi</div>
|
||||
<div class="row">
|
||||
<div class="glyph">⛨</div>
|
||||
<div class="row-main"><div class="row-top"><span class="name">BCH Bull</span><span class="chip proto web">Web</span></div><div class="row-sub">Hedge & leverage (AnyHedge)</div></div>
|
||||
<button class="mini">Open</button>
|
||||
</div>
|
||||
|
||||
<div class="cat label-mono">Games</div>
|
||||
<div class="row">
|
||||
<div class="glyph">◐</div>
|
||||
<div class="row-main"><div class="row-top"><span class="name">BCH Guru</span><span class="chip proto cc">CC</span></div><div class="row-sub">Price-prediction game (NFTs)</div></div>
|
||||
<button class="mini go">Connect</button>
|
||||
</div>
|
||||
|
||||
<div class="cat label-mono">Merchant</div>
|
||||
<div class="row">
|
||||
<div class="glyph">▦</div>
|
||||
<div class="row-main"><div class="row-top"><span class="name">Paytaca POS</span><span class="chip proto web">Web</span></div><div class="row-sub">Point-of-sale register for shops</div></div>
|
||||
<button class="mini">Open</button>
|
||||
</div>
|
||||
|
||||
<div class="cat label-mono">Tools</div>
|
||||
<div class="row">
|
||||
<div class="glyph">✸</div>
|
||||
<div class="row-main"><div class="row-top"><span class="name">Flipstarter</span><span class="chip proto web">Web</span></div><div class="row-sub">Assurance-contract crowdfunding</div></div>
|
||||
<button class="mini">Open</button>
|
||||
</div>
|
||||
|
||||
<div class="cat label-mono">Explorers</div>
|
||||
<div class="row">
|
||||
<div class="glyph">▦</div>
|
||||
<div class="row-main"><div class="row-top"><span class="name">BCH Block Explorer</span><span class="chip proto web">Web</span></div><div class="row-sub">bchblockexplorer.com · blocks & transactions</div></div>
|
||||
<button class="mini">Open</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="glyph">◎</div>
|
||||
<div class="row-main"><div class="row-top"><span class="name">Token Explorer</span><span class="chip proto web">Web</span></div><div class="row-sub">tokenexplorer.cash · CashTokens</div></div>
|
||||
<button class="mini">Open</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="glyph">⬡</div>
|
||||
<div class="row-main"><div class="row-top"><span class="name">BCH Explorer</span><span class="chip proto web">Web</span></div><div class="row-sub">bchexplorer.cash · blocks, tx & tokens</div></div>
|
||||
<button class="mini">Open</button>
|
||||
</div>
|
||||
|
||||
<div class="foot-note">Community-built, external apps — shown for convenience. Deviant endorses none and ships no blessed list (ADR-0008); add or remove your own.</div>
|
||||
</div><!-- /panel-discover -->
|
||||
|
||||
<!-- BOTTOM BAR -->
|
||||
<nav class="tabbar">
|
||||
<button class="tab"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab" id="fab" aria-label="Send, receive, or scan">⇅</button>
|
||||
<button class="tab"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab active"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function generateStars() {
|
||||
const c = document.getElementById('stars'); if (!c) return;
|
||||
const count = window.innerWidth < 700 ? 100 : 180;
|
||||
const frag = document.createDocumentFragment();
|
||||
for (let i = 0; i < count; i++) {
|
||||
const s = document.createElement('div'); s.className = 'star';
|
||||
const roll = Math.random(); let size, opacity, dur;
|
||||
if (roll < 0.78) { size = 1 + Math.random()*0.4; opacity = 0.18 + Math.random()*0.22; dur = 14 + Math.random()*8; }
|
||||
else if (roll < 0.95) { size = 1.4 + Math.random()*0.6; opacity = 0.32 + Math.random()*0.22; dur = 10 + Math.random()*6; }
|
||||
else { size = 1.8 + Math.random()*0.8; opacity = 0.45 + Math.random()*0.25; dur = 8 + Math.random()*5; }
|
||||
s.style.width = size+'px'; s.style.height = size+'px';
|
||||
s.style.left = Math.random()*100+'%'; s.style.top = Math.random()*100+'%';
|
||||
s.style.opacity = opacity; s.style.setProperty('--twinkle-duration', dur+'s'); s.style.setProperty('--twinkle-delay', (Math.random()*dur)+'s');
|
||||
frag.appendChild(s);
|
||||
}
|
||||
c.appendChild(frag);
|
||||
})();
|
||||
|
||||
// Sub-tab switching: Connected | Discover
|
||||
document.querySelectorAll('.seg').forEach(function (s) {
|
||||
s.addEventListener('click', function () {
|
||||
document.querySelectorAll('.seg').forEach(function (x) { x.classList.remove('active'); });
|
||||
s.classList.add('active');
|
||||
var p = s.getAttribute('data-panel');
|
||||
document.getElementById('panel-connected').classList.toggle('hidden', p !== 'connected');
|
||||
document.getElementById('panel-discover').classList.toggle('hidden', p !== 'discover');
|
||||
});
|
||||
});
|
||||
|
||||
// Network switcher
|
||||
document.querySelectorAll('.net').forEach(function (n) {
|
||||
n.addEventListener('click', function () {
|
||||
document.querySelectorAll('.net').forEach(function (x) { x.classList.remove('active'); });
|
||||
n.classList.add('active');
|
||||
});
|
||||
});
|
||||
// Bottom-bar navigation between mockup screens
|
||||
(function () {
|
||||
var map = { main:'main-tab.html', assets:'assets-tab.html', avalanche:'avalanche-tab.html', apps:'apps-tab.html' };
|
||||
document.querySelectorAll('.tabbar .tab').forEach(function (t) {
|
||||
var el = t.querySelector('.lbl'); if (!el) return;
|
||||
var dest = map[el.textContent.trim().toLowerCase()];
|
||||
if (dest && !t.classList.contains('active')) {
|
||||
t.style.cursor = 'pointer';
|
||||
t.addEventListener('click', function () { location.href = dest; });
|
||||
}
|
||||
});
|
||||
var fab = document.getElementById('fab'); if (fab) fab.addEventListener('click', function () { location.href = 'send-flow.html'; });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
147
design/mockups/asset-detail.html
Normal file
147
design/mockups/asset-detail.html
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Asset detail (Spectrum) · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); overflow:hidden; }
|
||||
.scroll { max-height:740px; overflow-y:auto; margin:0 -4px; padding:0 4px; } .scroll::-webkit-scrollbar { width:0; }
|
||||
|
||||
.flow-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
|
||||
.back { font-size:20px; color:var(--ink-soft); cursor:pointer; background:0; border:0; line-height:1; }
|
||||
.menu { margin-left:auto; color:var(--muted); cursor:pointer; font-size:18px; }
|
||||
|
||||
/* ① identity */
|
||||
.ident { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
|
||||
.ai { width:50px; height:50px; flex:none; border-radius:14px; display:grid; place-items:center; font-family:var(--font-mono); font-size:17px; color:var(--acid); background:var(--surface-2); box-shadow:0 0 16px var(--acid-dim); }
|
||||
.an { font-family:var(--font-display); font-weight:500; font-size:23px; color:var(--ink-bright); }
|
||||
.at { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:3px; }
|
||||
|
||||
/* ② chips line */
|
||||
.chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
|
||||
.chip { font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:7px; border:1px solid var(--border-strong); color:var(--ink-soft); }
|
||||
.chip.tier { color:var(--ink-bright); border-color:var(--ink-soft); }
|
||||
.chip.ver { color:var(--acid); border-color:rgba(214,255,61,.45); text-shadow:0 0 6px var(--acid-halo); }
|
||||
.chip.sub { color:var(--muted); }
|
||||
|
||||
/* ③ value region */
|
||||
.value { text-align:center; padding:20px; border-radius:18px; background:var(--surface-1); border:1px solid var(--border); margin-bottom:16px; }
|
||||
.pnv-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
|
||||
.pnv { font-family:var(--font-mono); font-size:30px; color:var(--ink-bright); margin:8px 0 4px; }
|
||||
.pnv-bch { font-family:var(--font-mono); font-size:12px; color:var(--acid); }
|
||||
.pnv-raw { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:6px; }
|
||||
|
||||
/* ④ actions */
|
||||
.actions { display:flex; gap:9px; margin-bottom:18px; }
|
||||
.act-btn { flex:1; text-align:center; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:13px 6px; border-radius:12px; cursor:pointer; background:transparent; color:var(--ink-soft); border:1px solid var(--border-strong); }
|
||||
.act-btn.primary { background:var(--acid); color:var(--sky-deep); border-color:var(--acid); box-shadow:0 0 14px var(--acid-halo); }
|
||||
|
||||
.sec-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:18px 2px 9px; }
|
||||
.card { background:var(--surface-1); border:1px solid var(--border); border-radius:16px; padding:14px 15px; }
|
||||
.brow { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11px; }
|
||||
.brow:last-child { border-bottom:0; }
|
||||
.brow .k { color:var(--muted); } .brow .v { color:var(--ink); text-align:right; }
|
||||
|
||||
/* ⑥ activity */
|
||||
.act { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
|
||||
.act:last-child { border-bottom:0; }
|
||||
.act .ico { width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-soft); font-size:13px; }
|
||||
.act .a-title { font-family:var(--font-display); font-size:13px; color:var(--ink); }
|
||||
.act .a-sub { font-family:var(--font-mono); font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.act .a-amt { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-bright); }
|
||||
.act .a-amt.in { color:#0ac18e; }
|
||||
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); } .tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
.tab.active .ico { color: var(--acid); } .tab:not(.active) .bch-b { opacity:.6; }
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; } .bch-b .bch-logo { width:100%; height:100%; } .bch-b.sm { width:28px; height:28px; }
|
||||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
<div class="phone">
|
||||
<div class="scroll">
|
||||
<div class="flow-head">
|
||||
<button class="back" data-link="assets">←</button>
|
||||
<span class="menu">⋯</span>
|
||||
</div>
|
||||
|
||||
<!-- ① identity -->
|
||||
<div class="ident">
|
||||
<div class="ai">NV</div>
|
||||
<div><div class="an">Nova</div><div class="at">NOVA · category 9c2f…a410</div></div>
|
||||
</div>
|
||||
|
||||
<!-- ② tier + asset-type + verification -->
|
||||
<div class="chips">
|
||||
<span class="chip tier">[A]</span>
|
||||
<span class="chip">MBA</span>
|
||||
<span class="chip">permissionless</span>
|
||||
<span class="chip">unlimited</span>
|
||||
<span class="chip sub">DEA</span>
|
||||
<span class="chip ver">DEA-Verified</span>
|
||||
</div>
|
||||
|
||||
<!-- ③ value region — PNV + raw-BCH co-display -->
|
||||
<div class="value">
|
||||
<div class="pnv-label">Protocol Net Value</div>
|
||||
<div class="pnv">120 NOVA</div>
|
||||
<div class="pnv-bch">PNV ≈ 0.0120 BCH</div>
|
||||
<div class="pnv-raw">120 × 10,000 sat = 1,200,000 sat backing · inside the FT UTXOs</div>
|
||||
</div>
|
||||
|
||||
<!-- ④ action row -->
|
||||
<div class="actions">
|
||||
<div class="act-btn primary">Swap</div>
|
||||
<div class="act-btn">Send</div>
|
||||
<div class="act-btn">Receive</div>
|
||||
<div class="act-btn">Redeem</div>
|
||||
</div>
|
||||
|
||||
<!-- ⑤ rate & backing breakdown -->
|
||||
<div class="sec-label">Rate & backing</div>
|
||||
<div class="card">
|
||||
<div class="brow"><span class="k">Backing rate</span><span class="v">10,000 sat / unit 🔒</span></div>
|
||||
<div class="brow"><span class="k">Redeem</span><span class="v">P2PKH spend · no fee (§4.4)</span></div>
|
||||
<div class="brow"><span class="k">Swap path</span><span class="v" style="color:var(--acid)">✓ ASM · counterparty-free</span></div>
|
||||
<div class="brow"><span class="k">Mint-side fee</span><span class="v">0.5% (cap 2.0% 🔒)</span></div>
|
||||
</div>
|
||||
|
||||
<!-- ⑥ asset-scoped activity -->
|
||||
<div class="sec-label">Nova activity</div>
|
||||
<div class="card">
|
||||
<div class="act"><div class="ico">↓</div><div><div class="a-title">Claimed</div><div class="a-sub">Nova reservoir · DEA · 2d</div></div><div class="a-amt in">+120 NOVA</div></div>
|
||||
<div class="act"><div class="ico">⇄</div><div><div class="a-title">Orbital swap</div><div class="a-sub">50 NOVA → 0.005 BCH · ASM · 1d</div></div><div class="a-amt">atomic</div></div>
|
||||
</div>
|
||||
|
||||
<!-- ⑦ asset info -->
|
||||
<div class="sec-label">Asset info</div>
|
||||
<div class="card">
|
||||
<div class="brow"><span class="k">Category ID</span><span class="v" style="color:var(--acid)">9c2f…a410 ↗</span></div>
|
||||
<div class="brow"><span class="k">Founder</span><span class="v">bchtest:qp2…7lm</span></div>
|
||||
<div class="brow"><span class="k">BCMR metadata</span><span class="v">present ↗</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="tabbar">
|
||||
<button class="tab"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab active"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab" id="fab">⇅</button>
|
||||
<button class="tab"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
<script>
|
||||
(function generateStars(){const c=document.getElementById('stars');if(!c)return;const n=window.innerWidth<700?100:180;const f=document.createDocumentFragment();for(let i=0;i<n;i++){const s=document.createElement('div');s.className='star';const r=Math.random();let sz,o,d;if(r<.78){sz=1+Math.random()*.4;o=.18+Math.random()*.22;d=14+Math.random()*8;}else if(r<.95){sz=1.4+Math.random()*.6;o=.32+Math.random()*.22;d=10+Math.random()*6;}else{sz=1.8+Math.random()*.8;o=.45+Math.random()*.25;d=8+Math.random()*5;}s.style.width=sz+'px';s.style.height=sz+'px';s.style.left=Math.random()*100+'%';s.style.top=Math.random()*100+'%';s.style.opacity=o;s.style.setProperty('--twinkle-duration',d+'s');s.style.setProperty('--twinkle-delay',(Math.random()*d)+'s');f.appendChild(s);}c.appendChild(f);})();
|
||||
(function(){var map={main:'main-tab.html',assets:'assets-tab.html',avalanche:'avalanche-tab.html',apps:'apps-tab.html'};document.querySelectorAll('.tabbar .tab').forEach(function(t){var el=t.querySelector('.lbl');if(!el)return;var d=map[el.textContent.trim().toLowerCase()];if(d){t.style.cursor='pointer';t.addEventListener('click',function(){location.href=d;});}});document.querySelectorAll('[data-link="assets"]').forEach(function(b){b.addEventListener('click',function(){location.href='assets-tab.html';});});})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
467
design/mockups/assets-tab.html
Normal file
467
design/mockups/assets-tab.html
Normal file
|
|
@ -0,0 +1,467 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Assets hub · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
/* ---- Mockup-only layout (the real shell will be React components) ---- */
|
||||
body { display: flex; justify-content: center; padding: 28px 0; }
|
||||
|
||||
.phone {
|
||||
position: relative; z-index: 1;
|
||||
width: 392px; min-height: 840px;
|
||||
background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55));
|
||||
border: 1px solid var(--border); border-radius: 30px;
|
||||
padding: 22px 18px 92px; backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.screen-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 18px; }
|
||||
.screen-title { font-family: var(--font-display); font-weight: 500; font-size: 27px; color: var(--ink-bright); letter-spacing:-.01em; }
|
||||
|
||||
/* level 1 — family tabs (underline style) */
|
||||
.toptabs { display:flex; margin: 2px 2px 16px; border-bottom:1px solid var(--border); }
|
||||
.toptab {
|
||||
flex:1; min-width:0; background:0; border:0; cursor:pointer; padding: 2px 6px 12px;
|
||||
position:relative; transition: color .3s; display:flex; flex-direction:column; gap:5px; text-align:left;
|
||||
}
|
||||
.toptab + .toptab { border-left:1px solid var(--border); padding-left:16px; }
|
||||
.tt-code { font-family: var(--font-display); font-weight:500; font-size:18px; color: var(--muted); line-height:1; }
|
||||
.tt-desc { font-family: var(--font-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); line-height:1.35; }
|
||||
.toptab.active .tt-code { color: var(--ink-bright); }
|
||||
.toptab.active .tt-desc { color: var(--ink-soft); }
|
||||
.toptab.active::after {
|
||||
content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
|
||||
background: var(--acid); box-shadow: 0 0 8px var(--acid-glow), 0 0 14px var(--acid-halo);
|
||||
}
|
||||
.family.hidden { display:none; }
|
||||
|
||||
/* level 2 — sub tabs (segmented pills) */
|
||||
.segmented {
|
||||
display:flex; gap:6px; margin: 2px 2px 16px; padding:4px;
|
||||
background: var(--surface-1); border:1px solid var(--border); border-radius: 13px;
|
||||
}
|
||||
.seg {
|
||||
flex:1; text-align:center; cursor:pointer; border:0; background:transparent;
|
||||
font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
|
||||
color: var(--muted); padding: 10px 8px; border-radius: 9px; transition: color .3s, background .3s;
|
||||
}
|
||||
.seg.active { color: var(--acid); background: var(--surface-2); text-shadow: 0 0 8px var(--acid-halo); }
|
||||
.panel.hidden { display:none; }
|
||||
.hint { font-family: var(--font-mono); font-size: 9px; letter-spacing:.06em; color: var(--muted); margin: 0 4px 12px; line-height:1.5; }
|
||||
|
||||
/* rows */
|
||||
.row { display:flex; align-items:center; gap:13px; background: var(--surface-1); border:1px solid var(--border); border-radius:16px; padding:14px 15px; margin-bottom:10px; }
|
||||
.glyph { width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; background: var(--surface-2); color: var(--ink-soft); font-family: var(--font-mono); font-size:15px; }
|
||||
.row-main { flex:1; min-width:0; }
|
||||
.row-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
|
||||
.name { font-family: var(--font-display); font-weight:500; font-size:16px; color: var(--ink-bright); }
|
||||
.row-sub { margin-top:5px; font-family: var(--font-mono); font-size:11px; color: var(--ink-soft); line-height:1.45; }
|
||||
.row-sub .pnv { color: var(--ink); } .row-sub .lit { color: var(--muted); }
|
||||
.row-right { text-align:right; font-family: var(--font-mono); display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
|
||||
.units { font-size:15px; color: var(--ink-bright); }
|
||||
.px { font-size:11px; color: var(--ink-soft); margin-top:4px; }
|
||||
|
||||
/* chips */
|
||||
.chip { font-family: var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:6px; border:1px solid var(--border-strong); color: var(--ink-soft); }
|
||||
.chip.tier { color: var(--ink-bright); }
|
||||
/* automated risk scale: green safe · orange risky · red high-risk */
|
||||
.chip.safe { color: var(--risk-safe); border-color: rgba(214,255,61,.35); text-shadow: 0 0 6px var(--acid-halo); }
|
||||
.chip.risk { color: var(--risk-warn); border-color: rgba(255,159,28,.45); }
|
||||
.chip.high { color: var(--risk-high); border-color: rgba(255,77,77,.5); text-shadow: 0 0 8px rgba(255,77,77,.3); }
|
||||
.chip.routed { color: var(--risk-warn); border-color: rgba(255,159,28,.3); }
|
||||
.row.risky { border-left: 2px solid var(--risk-warn); }
|
||||
.row.high { border-color: rgba(255,77,77,.4); border-left: 2px solid var(--risk-high); background: rgba(255,77,77,.05); }
|
||||
|
||||
/* directory / market action buttons */
|
||||
.acts { display:flex; gap:8px; flex:none; }
|
||||
.mini { font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:8px 12px; border-radius:9px; cursor:pointer; background:transparent; color: var(--ink-soft); border:1px solid var(--border-strong); }
|
||||
.mini.go { background: var(--acid); color: var(--sky-deep); border-color: var(--acid); box-shadow: 0 0 14px var(--acid-halo); }
|
||||
.dir-sub { margin-top:5px; font-family: var(--font-mono); font-size:11px; color: var(--muted); }
|
||||
.dir-sub b { color: var(--acid); font-weight:500; text-shadow: 0 0 6px var(--acid-halo); }
|
||||
|
||||
/* bottom tab bar */
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); }
|
||||
.tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
.tab.active .ico { color: var(--acid); text-shadow: 0 0 10px var(--acid-glow); }
|
||||
.tab.active .lbl { color: var(--ink-bright); }
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; }
|
||||
.bch-b .bch-logo { width:100%; height:100%; display:block; }
|
||||
.bch-b.sm { width:28px; height:28px; }
|
||||
.tab:not(.active) .bch-b { opacity:.6; }
|
||||
.tab.active .bch-b { box-shadow: 0 0 12px var(--acid-glow), 0 0 20px var(--acid-halo); }
|
||||
|
||||
/* central quick-action button (Send / Receive / Scan) */
|
||||
.fab {
|
||||
position: relative; margin-top: -28px; flex:none;
|
||||
width: 58px; height: 58px; border-radius: 50%;
|
||||
background: var(--acid); color: var(--sky-deep);
|
||||
border: 4px solid var(--sky-deep); cursor: pointer;
|
||||
display:grid; place-items:center; font-size: 23px; line-height:1;
|
||||
box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo);
|
||||
transition: transform .35s var(--ease-out);
|
||||
}
|
||||
.fab:hover { transform: translateY(-2px) scale(1.04); }
|
||||
|
||||
/* quick-action sheet */
|
||||
.sheet-backdrop { position:absolute; inset:0; z-index:5; border-radius:30px; display:none; background: rgba(5,8,16,.62); backdrop-filter: blur(2px); }
|
||||
.sheet-backdrop.open { display:block; }
|
||||
.sheet { position:absolute; left:14px; right:14px; bottom:98px; z-index:6; display:none; padding:10px; border-radius:18px; background: var(--surface-2); border:1px solid var(--border-strong); box-shadow: 0 -8px 40px rgba(0,0,0,.5); }
|
||||
.sheet.open { display:block; }
|
||||
.sheet-item { display:flex; align-items:center; gap:14px; padding:13px; border-radius:12px; cursor:pointer; }
|
||||
.sheet-item:hover { background: var(--surface-1); }
|
||||
.sheet-ico { width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; background: var(--surface-1); color: var(--acid); font-size:18px; text-shadow: 0 0 8px var(--acid-halo); }
|
||||
.sheet-label { font-family: var(--font-display); font-weight:500; font-size:16px; color: var(--ink-bright); }
|
||||
.sheet-sub { font-family: var(--font-mono); font-size:10px; color: var(--muted); margin-top:2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
|
||||
<div class="phone">
|
||||
<div class="screen-head">
|
||||
<div class="screen-title">Portfolio</div>
|
||||
<div class="label-mono" id="subhead">Tier A · MBA</div>
|
||||
</div>
|
||||
|
||||
<!-- LEVEL 1: family tabs -->
|
||||
<div class="toptabs">
|
||||
<button class="toptab active" data-family="assets">
|
||||
<span class="tt-code">MBA</span>
|
||||
<span class="tt-desc">Mathematically Backed Assets</span>
|
||||
</button>
|
||||
<button class="toptab" data-family="tokens">
|
||||
<span class="tt-code">NBA</span>
|
||||
<span class="tt-desc">Non-Backed Assets</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ================= ASSETS family (MBA) ================= -->
|
||||
<div id="family-assets" class="family">
|
||||
<div class="segmented">
|
||||
<button class="seg active" data-sub="assets-mine">My Assets</button>
|
||||
<button class="seg" data-sub="assets-orbital">Orbital Network</button>
|
||||
</div>
|
||||
|
||||
<div id="sub-assets-mine" class="panel">
|
||||
<div class="row">
|
||||
<div class="glyph">◇</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">Nova</span><span class="chip tier">A</span><span class="chip">DEA</span></div>
|
||||
<div class="row-sub"><span class="pnv">PNV 1,200,000 sat</span></div>
|
||||
</div>
|
||||
<div class="row-right"><span class="chip safe">Canonical</span><div class="units">120 NOVA</div></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="glyph">◈</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">Lumen</span><span class="chip tier">A</span><span class="chip">PLA</span></div>
|
||||
<div class="row-sub"><span class="pnv">PNV 400,000 sat</span></div>
|
||||
</div>
|
||||
<div class="row-right"><span class="chip safe">Canonical</span><div class="units">40 LMN</div></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="glyph">◆</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">Arcane</span><span class="chip tier">A</span><span class="chip">MCA</span></div>
|
||||
<div class="row-sub"><span class="pnv">PNV 850,000 sat</span></div>
|
||||
</div>
|
||||
<div class="row-right"><span class="chip safe">Canonical</span><div class="units">75 ARC</div></div>
|
||||
</div>
|
||||
<div class="row risky">
|
||||
<div class="glyph">△</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">Vega</span><span class="chip tier">A</span></div>
|
||||
<div class="row-sub"><span class="lit">PNV suppressed</span></div>
|
||||
</div>
|
||||
<div class="row-right"><span class="chip risk">⚠ Non-canonical</span><div class="units">15 VGA</div></div>
|
||||
</div>
|
||||
<div class="row high">
|
||||
<div class="glyph">⊘</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">Mirage</span><span class="chip tier">A</span></div>
|
||||
<div class="row-sub"><span class="lit">Free-mint fraud</span></div>
|
||||
</div>
|
||||
<div class="row-right"><span class="chip high">⛔ High risk</span><div class="units">9,000 MRG</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sub-assets-orbital" class="panel hidden">
|
||||
<div class="hint">Counterparty-free · all existing DEAs from your registries + on-chain discovery</div>
|
||||
<div class="row">
|
||||
<div class="glyph">◇</div>
|
||||
<div class="row-main"><div class="row-top"><span class="name">Helix</span><span class="chip">DEA</span></div><div class="dir-sub">10,000 sat/unit · UER vs Nova <b>1.00</b></div></div>
|
||||
<div class="acts"><button class="mini">Swap</button><button class="mini go">Mint</button></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="glyph">✦</div>
|
||||
<div class="row-main"><div class="row-top"><span class="name">Pulsar</span><span class="chip">DEA</span></div><div class="dir-sub">100,000 sat/unit · UER vs Nova <b>10.0</b></div></div>
|
||||
<div class="acts"><button class="mini">Swap</button><button class="mini go">Mint</button></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="glyph">◌</div>
|
||||
<div class="row-main"><div class="row-top"><span class="name">Quanta</span><span class="chip">DEA</span></div><div class="dir-sub">1,000 sat/unit · UER vs Nova <b>0.10</b></div></div>
|
||||
<div class="acts"><button class="mini">Swap</button><button class="mini go">Mint</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= TOKENS family (no peg) ================= -->
|
||||
<div id="family-tokens" class="family hidden">
|
||||
<div class="segmented">
|
||||
<button class="seg active" data-sub="tokens-mine">My NBA</button>
|
||||
<button class="seg" data-sub="tokens-market">Market</button>
|
||||
</div>
|
||||
|
||||
<div id="sub-tokens-mine" class="panel">
|
||||
<div class="row">
|
||||
<div class="glyph">✸</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">Meridian</span><span class="chip">NBA ·MTU</span></div>
|
||||
<div class="row-sub"><span class="lit">1,234,000 sat · no peg</span></div>
|
||||
</div>
|
||||
<div class="row-right"><div class="units">5,000 MRD</div><div class="px">~ 0.041 BCH</div></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="glyph">❂</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">FestPass</span><span class="chip">NBA ·MTL</span></div>
|
||||
<div class="row-sub"><span class="lit">675 sat (dust) · membership</span></div>
|
||||
</div>
|
||||
<div class="row-right"><div class="units">1 PASS</div></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="glyph">◍</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">Doge2</span><span class="chip">NBA ·PTU</span></div>
|
||||
<div class="row-sub"><span class="lit">67,500 sat · no peg</span></div>
|
||||
</div>
|
||||
<div class="row-right"><div class="units">100,000 D2</div><div class="px">~ 0.0007 BCH</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sub-tokens-market" class="panel hidden">
|
||||
<!-- DEX selector pills -->
|
||||
<div class="netbar" style="display:flex; gap:6px; margin:0 2px 14px; flex-wrap:wrap;">
|
||||
<button class="net active" id="dex-cauldron" style="font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:9px;cursor:pointer;border:1px solid var(--acid);background:rgba(214,255,61,.12);color:var(--acid);text-shadow:0 0 6px var(--acid-halo);">Cauldron</button>
|
||||
<button class="net" id="dex-tapswap" style="font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:9px;cursor:pointer;border:1px solid var(--border-strong);background:transparent;color:var(--ink-soft);">TapSwap ↗</button>
|
||||
<button class="net" id="dex-fex" style="font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:9px;cursor:pointer;border:1px solid var(--border-strong);background:transparent;color:var(--ink-soft);">Fex.cash ↗</button>
|
||||
</div>
|
||||
|
||||
<!-- ═══ CAULDRON: live integrated market (indexer.riften.net API) ═══ -->
|
||||
<div id="market-cauldron">
|
||||
<!-- Market stats bar -->
|
||||
<div style="display:flex; gap:10px; margin:0 2px 14px; flex-wrap:wrap;">
|
||||
<div style="flex:1; min-width:80px; background:var(--surface-1); border:1px solid var(--border); border-radius:10px; padding:9px 11px;">
|
||||
<div style="font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;">TVL</div>
|
||||
<div style="font-family:var(--font-mono);font-size:14px;color:var(--ink-bright);">42.7 BCH</div>
|
||||
</div>
|
||||
<div style="flex:1; min-width:80px; background:var(--surface-1); border:1px solid var(--border); border-radius:10px; padding:9px 11px;">
|
||||
<div style="font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;">24h Vol</div>
|
||||
<div style="font-family:var(--font-mono);font-size:14px;color:var(--ink-bright);">3.2 BCH</div>
|
||||
</div>
|
||||
<div style="flex:1; min-width:80px; background:var(--surface-1); border:1px solid var(--border); border-radius:10px; padding:9px 11px;">
|
||||
<div style="font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;">Pools</div>
|
||||
<div style="font-family:var(--font-mono);font-size:14px;color:var(--ink-bright);">18</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sort / filter row -->
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px;">
|
||||
<div style="font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);">Top pairs by volume</div>
|
||||
<button style="font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--ink-soft);background:0;border:1px solid var(--border);border-radius:7px;padding:4px 9px;cursor:pointer;">Sort ▾</button>
|
||||
</div>
|
||||
|
||||
<!-- Live pair rows (data from /pool/active + /price/current) -->
|
||||
<div class="row" data-pair="BCH/FURU">
|
||||
<div class="glyph" style="background:linear-gradient(135deg,#6c3,#3c6);">🐸</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">FURU / BCH</span><span class="chip safe">Live</span></div>
|
||||
<div class="row-sub">
|
||||
<span class="pnv">0.00000142 BCH</span>
|
||||
<span class="lit" style="margin-left:6px;">+12.4%</span>
|
||||
</div>
|
||||
<div style="font-family:var(--font-mono);font-size:9px;color:var(--muted);margin-top:3px;">Vol 1.08 BCH · Liq 8.4 BCH</div>
|
||||
</div>
|
||||
<div class="acts"><button class="mini go">Swap</button></div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-pair="BCH/NEXUS">
|
||||
<div class="glyph">◈</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">NEXUS / BCH</span><span class="chip safe">Live</span></div>
|
||||
<div class="row-sub">
|
||||
<span class="pnv">0.0000891 BCH</span>
|
||||
<span class="lit" style="margin-left:6px;">−3.1%</span>
|
||||
</div>
|
||||
<div style="font-family:var(--font-mono);font-size:9px;color:var(--muted);margin-top:3px;">Vol 0.72 BCH · Liq 12.1 BCH</div>
|
||||
</div>
|
||||
<div class="acts"><button class="mini go">Swap</button></div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-pair="BCH/CLOWN">
|
||||
<div class="glyph">🤡</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">CLOWN / BCH</span><span class="chip safe">Live</span></div>
|
||||
<div class="row-sub">
|
||||
<span class="pnv">0.00000008 BCH</span>
|
||||
<span class="lit" style="margin-left:6px;">+41.7%</span>
|
||||
</div>
|
||||
<div style="font-family:var(--font-mono);font-size:9px;color:var(--muted);margin-top:3px;">Vol 0.54 BCH · Liq 3.9 BCH</div>
|
||||
</div>
|
||||
<div class="acts"><button class="mini go">Swap</button></div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-pair="BCH/CATS">
|
||||
<div class="glyph">🐱</div>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="name">CATS / BCH</span><span class="chip safe">Live</span></div>
|
||||
<div class="row-sub">
|
||||
<span class="pnv">0.0000034 BCH</span>
|
||||
<span class="lit" style="margin-left:6px;">−0.8%</span>
|
||||
</div>
|
||||
<div style="font-family:var(--font-mono);font-size:9px;color:var(--muted);margin-top:3px;">Vol 0.31 BCH · Liq 5.6 BCH</div>
|
||||
</div>
|
||||
<div class="acts"><button class="mini go">Swap</button></div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center; margin-top:12px;">
|
||||
<button style="font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--acid);background:0;border:1px solid var(--acid);border-radius:9px;padding:8px 18px;cursor:pointer;text-shadow:0 0 6px var(--acid-halo);">View all 18 pools →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ TAPSWAP: redirect-only (no API) ═══ -->
|
||||
<div id="market-tapswap" style="display:none;">
|
||||
<div style="background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:20px 16px;text-align:center;">
|
||||
<div style="font-size:28px;margin-bottom:10px;">🛒</div>
|
||||
<div style="font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--ink-bright);margin-bottom:6px;">TapSwap Marketplace</div>
|
||||
<div style="font-family:var(--font-mono);font-size:10px;color:var(--muted);line-height:1.6;margin-bottom:14px;">Peer-to-peer token & NFT listings.<br>Offer-based (not AMM) · no public API yet.</div>
|
||||
<div style="display:flex;gap:8px;justify-content:center;">
|
||||
<a href="https://tapswap.cash" target="_blank" style="font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:9px;cursor:pointer;background:var(--acid);color:var(--sky-deep);border:0;text-decoration:none;box-shadow:0 0 14px var(--acid-halo);">Open TapSwap ↗</a>
|
||||
<button style="font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:9px;cursor:pointer;border:1px solid var(--border-strong);background:transparent;color:var(--ink-soft);">WalletConnect</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ FEX.CASH: redirect-only (no API) ═══ -->
|
||||
<div id="market-fex" style="display:none;">
|
||||
<div style="background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:20px 16px;text-align:center;">
|
||||
<div style="font-size:28px;margin-bottom:10px;">⚗️</div>
|
||||
<div style="font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--ink-bright);margin-bottom:6px;">Fex.cash AMM</div>
|
||||
<div style="font-family:var(--font-mono);font-size:10px;color:var(--muted);line-height:1.6;margin-bottom:14px;">Constant-product AMM pools.<br>Closed-source contracts · no public API yet.</div>
|
||||
<div style="display:flex;gap:8px;justify-content:center;">
|
||||
<a href="https://fex.cash" target="_blank" style="font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:9px;cursor:pointer;background:var(--acid);color:var(--sky-deep);border:0;text-decoration:none;box-shadow:0 0 14px var(--acid-halo);">Open Fex.cash ↗</a>
|
||||
<button style="font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:9px;cursor:pointer;border:1px solid var(--border-strong);background:transparent;color:var(--ink-soft);">WalletConnect</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick-action sheet (opened by the central button) -->
|
||||
<div class="sheet-backdrop" id="backdrop"></div>
|
||||
<div class="sheet" id="sheet">
|
||||
<div class="sheet-item"><div class="sheet-ico">↑</div><div><div class="sheet-label">Send</div><div class="sheet-sub">BCH or an asset</div></div></div>
|
||||
<div class="sheet-item"><div class="sheet-ico">↓</div><div><div class="sheet-label">Receive</div><div class="sheet-sub">Show your address / QR</div></div></div>
|
||||
<div class="sheet-item"><div class="sheet-ico">▣</div><div><div class="sheet-label">Scan QR</div><div class="sheet-sub">Pay or connect a dApp</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM BAR: Main · Assets · (action) · Avalanche · Apps -->
|
||||
<nav class="tabbar">
|
||||
<button class="tab"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab active"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab" id="fab" aria-label="Send, receive, or scan">⇅</button>
|
||||
<button class="tab"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* Inlined plain-JS starfield (React shell imports design/starfield.ts). */
|
||||
(function generateStars() {
|
||||
const c = document.getElementById('stars'); if (!c) return;
|
||||
const count = window.innerWidth < 700 ? 100 : 180;
|
||||
const frag = document.createDocumentFragment();
|
||||
for (let i = 0; i < count; i++) {
|
||||
const s = document.createElement('div'); s.className = 'star';
|
||||
const roll = Math.random(); let size, opacity, dur;
|
||||
if (roll < 0.78) { size = 1 + Math.random()*0.4; opacity = 0.18 + Math.random()*0.22; dur = 14 + Math.random()*8; }
|
||||
else if (roll < 0.95) { size = 1.4 + Math.random()*0.6; opacity = 0.32 + Math.random()*0.22; dur = 10 + Math.random()*6; }
|
||||
else { size = 1.8 + Math.random()*0.8; opacity = 0.45 + Math.random()*0.25; dur = 8 + Math.random()*5; }
|
||||
s.style.width = size+'px'; s.style.height = size+'px';
|
||||
s.style.left = Math.random()*100+'%'; s.style.top = Math.random()*100+'%';
|
||||
s.style.opacity = opacity; s.style.setProperty('--twinkle-duration', dur+'s');
|
||||
s.style.setProperty('--twinkle-delay', (Math.random()*dur)+'s');
|
||||
frag.appendChild(s);
|
||||
}
|
||||
c.appendChild(frag);
|
||||
})();
|
||||
|
||||
const subhead = document.getElementById('subhead');
|
||||
// LEVEL 1: family switching
|
||||
document.querySelectorAll('.toptab').forEach(function (t) {
|
||||
t.addEventListener('click', function () {
|
||||
document.querySelectorAll('.toptab').forEach(function (x) { x.classList.remove('active'); });
|
||||
t.classList.add('active');
|
||||
var fam = t.getAttribute('data-family');
|
||||
document.getElementById('family-assets').classList.toggle('hidden', fam !== 'assets');
|
||||
document.getElementById('family-tokens').classList.toggle('hidden', fam !== 'tokens');
|
||||
subhead.textContent = fam === 'assets' ? 'Tier A · MBA' : 'No peg · market';
|
||||
});
|
||||
});
|
||||
// LEVEL 2: sub-tab switching (scoped to the active family)
|
||||
document.querySelectorAll('.seg').forEach(function (s) {
|
||||
s.addEventListener('click', function () {
|
||||
var fam = s.closest('.family');
|
||||
fam.querySelectorAll('.seg').forEach(function (x) { x.classList.remove('active'); });
|
||||
s.classList.add('active');
|
||||
fam.querySelectorAll('.panel').forEach(function (p) { p.classList.add('hidden'); });
|
||||
document.getElementById('sub-' + s.getAttribute('data-sub')).classList.remove('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
// DEX pill switching (Cauldron = integrated, TapSwap/Fex = redirect)
|
||||
(function () {
|
||||
var pills = document.querySelectorAll('.netbar .net');
|
||||
var panels = { cauldron: document.getElementById('market-cauldron'), tapswap: document.getElementById('market-tapswap'), fex: document.getElementById('market-fex') };
|
||||
var activeStyle = 'font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:9px;cursor:pointer;border:1px solid var(--acid);background:rgba(214,255,61,.12);color:var(--acid);text-shadow:0 0 6px var(--acid-halo);';
|
||||
var inactiveStyle = 'font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:9px;cursor:pointer;border:1px solid var(--border-strong);background:transparent;color:var(--ink-soft);';
|
||||
pills.forEach(function (p) {
|
||||
p.addEventListener('click', function () {
|
||||
pills.forEach(function (x) { x.style.cssText = inactiveStyle; x.classList.remove('active'); });
|
||||
p.style.cssText = activeStyle; p.classList.add('active');
|
||||
var key = p.id.replace('dex-', '');
|
||||
Object.keys(panels).forEach(function (k) { if (panels[k]) panels[k].style.display = k === key ? 'block' : 'none'; });
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
// Central quick-action: Send / Receive / Scan QR
|
||||
var fab = document.getElementById('fab');
|
||||
var sheet = document.getElementById('sheet');
|
||||
var backdrop = document.getElementById('backdrop');
|
||||
function closeSheet() { sheet.classList.remove('open'); backdrop.classList.remove('open'); }
|
||||
fab.addEventListener('click', function () { sheet.classList.toggle('open'); backdrop.classList.toggle('open'); });
|
||||
backdrop.addEventListener('click', closeSheet);
|
||||
document.querySelectorAll('.sheet-item').forEach(function (i) { i.addEventListener('click', function () { location.href = 'send-flow.html'; }); });
|
||||
// Bottom-bar navigation between mockup screens
|
||||
(function () {
|
||||
var map = { main:'main-tab.html', assets:'assets-tab.html', avalanche:'avalanche-tab.html', apps:'apps-tab.html' };
|
||||
document.querySelectorAll('.tabbar .tab').forEach(function (t) {
|
||||
var el = t.querySelector('.lbl'); if (!el) return;
|
||||
var dest = map[el.textContent.trim().toLowerCase()];
|
||||
if (dest && !t.classList.contains('active')) {
|
||||
t.style.cursor = 'pointer';
|
||||
t.addEventListener('click', function () { location.href = dest; });
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
237
design/mockups/avalanche-tab.html
Normal file
237
design/mockups/avalanche-tab.html
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Avalanche · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:860px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); }
|
||||
|
||||
.screen-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
|
||||
.screen-title { font-family: var(--font-display); font-weight:500; font-size:27px; color: var(--ink-bright); letter-spacing:-.01em; }
|
||||
|
||||
/* Create hero */
|
||||
.create-card { display:flex; align-items:center; gap:14px; padding:18px; margin-bottom:22px; border-radius:18px;
|
||||
background: linear-gradient(135deg, rgba(214,255,61,.10), rgba(19,26,42,.4)); border:1px solid rgba(214,255,61,.3); box-shadow: 0 0 26px var(--acid-dim); }
|
||||
.cc-main { flex:1; min-width:0; }
|
||||
.cc-title { font-family: var(--font-display); font-weight:500; font-size:19px; color: var(--ink-bright); }
|
||||
.cc-sub { font-family: var(--font-mono); font-size:10px; color: var(--ink-soft); margin-top:6px; line-height:1.5; }
|
||||
.btn-acid { flex:none; font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:13px 16px; border-radius:11px; background: var(--acid); color: var(--sky-deep); border:0; cursor:pointer; box-shadow: 0 0 16px var(--acid-halo); }
|
||||
|
||||
.label-row { display:flex; align-items:center; justify-content:space-between; margin: 22px 4px 12px; }
|
||||
|
||||
/* purpose presets */
|
||||
.presets { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
|
||||
.preset { background: var(--surface-1); border:1px solid var(--border); border-radius:14px; padding:13px; cursor:pointer; transition: border-color .3s, transform .3s; }
|
||||
.preset:hover { border-color: rgba(214,255,61,.35); transform: translateY(-2px); }
|
||||
.p-name { font-family: var(--font-display); font-weight:500; font-size:15px; color: var(--ink-bright); }
|
||||
.p-axes { font-family: var(--font-mono); font-size:9px; color: var(--muted); margin-top:6px; letter-spacing:.03em; line-height:1.4; }
|
||||
.p-class { margin-top:9px; }
|
||||
.p-code { font-family: var(--font-mono); font-size:13px; letter-spacing:.12em; color: var(--ink-bright); margin-bottom:7px; }
|
||||
.tax-group { display:flex; align-items:baseline; gap:9px; margin:22px 4px 12px; }
|
||||
.tax-group .gname { font-family: var(--font-display); font-weight:500; font-size:15px; color: var(--ink-bright); }
|
||||
.tax-group .gnote { font-family: var(--font-mono); font-size:9px; letter-spacing:.05em; color: var(--muted); }
|
||||
.dot { width:7px; height:7px; border-radius:50%; align-self:center; }
|
||||
.dot.backed { background: var(--acid); box-shadow:0 0 6px var(--acid-glow); }
|
||||
.dot.nopeg { background: var(--muted); }
|
||||
/* two-column taxonomy: MBA left, Token right */
|
||||
.tax-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
|
||||
.col-head { display:flex; align-items:center; gap:7px; margin:14px 2px 3px; cursor:pointer; }
|
||||
.col-head .info { font-size:11px; color:var(--muted); }
|
||||
.col-head:hover .gname, .col-head:hover .info { color:var(--acid); }
|
||||
.col-head .gname { font-family:var(--font-display); font-weight:500; font-size:15px; color:var(--ink-bright); }
|
||||
.col-note { font-family:var(--font-mono); font-size:8px; letter-spacing:.05em; color:var(--muted); margin:0 2px 11px; }
|
||||
.tax-col .preset { margin-bottom:10px; min-height:112px; }
|
||||
|
||||
/* asset-type detail sheet */
|
||||
/* contained panel over the taxonomy cards — not full-page */
|
||||
.detail { position:absolute; left:16px; right:16px; top:204px; bottom:102px; z-index:20; display:none; overflow-y:auto;
|
||||
padding:18px 18px 20px; border-radius:18px; background: var(--sky-mid);
|
||||
border:1px solid rgba(214,255,61,.32); box-shadow: 0 14px 44px rgba(0,0,0,.6), 0 0 16px var(--acid-dim); }
|
||||
.detail.open { display:block; }
|
||||
.detail-close { position:absolute; top:18px; right:20px; font-size:18px; color:var(--muted); cursor:pointer; }
|
||||
.detail-code { display:none; }
|
||||
.detail-name { font-family:var(--font-display); font-weight:500; font-size:23px; color:var(--ink-bright); margin-top:2px; letter-spacing:-.005em; }
|
||||
.detail-name .cap { color:var(--acid); text-shadow:0 0 8px var(--acid-halo); }
|
||||
.detail-chips { display:flex; gap:7px; flex-wrap:wrap; margin:14px 0 4px; }
|
||||
.dchip { font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:7px; border:1px solid var(--border-strong); color:var(--ink-soft); }
|
||||
.dchip.asm { color:var(--acid); border-color:rgba(214,255,61,.4); text-shadow:0 0 6px var(--acid-halo); }
|
||||
.detail h4 { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:20px 0 8px; }
|
||||
.detail p, .detail li { font-family:var(--font-display); font-weight:300; font-size:14px; color:var(--ink-soft); line-height:1.6; }
|
||||
.detail ul { margin:0; padding-left:18px; }
|
||||
|
||||
/* chips */
|
||||
.chip { font-family: var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:6px; border:1px solid var(--border-strong); color: var(--ink-soft); display:inline-block; }
|
||||
.chip.cls { color: var(--ink-bright); border-color: rgba(255,255,255,.18); }
|
||||
.chip.safe { color: var(--risk-safe); border-color: rgba(214,255,61,.35); text-shadow: 0 0 6px var(--acid-halo); }
|
||||
.chip.warn { color: var(--risk-warn); border-color: rgba(255,159,28,.45); }
|
||||
|
||||
/* founder dashboard rows */
|
||||
.row { display:flex; align-items:center; gap:13px; background: var(--surface-1); border:1px solid var(--border); border-radius:16px; padding:14px 15px; margin-bottom:10px; }
|
||||
.glyph { width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; background: var(--surface-2); color: var(--ink-soft); font-family: var(--font-mono); font-size:15px; }
|
||||
.row-main { flex:1; min-width:0; }
|
||||
.row-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
|
||||
.name { font-family: var(--font-display); font-weight:500; font-size:16px; color: var(--ink-bright); }
|
||||
.row-sub { margin-top:5px; font-family: var(--font-mono); font-size:10px; color: var(--ink-soft); line-height:1.5; }
|
||||
.row-sub .lock { color: var(--muted); }
|
||||
.row-state { font-family: var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; text-align:right; }
|
||||
.row-state.ok { color: var(--risk-safe); text-shadow: 0 0 6px var(--acid-halo); }
|
||||
.row-state.warn { color: var(--risk-warn); }
|
||||
|
||||
/* bottom bar + fab + sheet */
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); }
|
||||
.tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
.tab.active .ico { color: var(--acid); text-shadow: 0 0 10px var(--acid-glow); }
|
||||
.tab.active .lbl { color: var(--ink-bright); }
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; }
|
||||
.bch-b .bch-logo { width:100%; height:100%; display:block; }
|
||||
.bch-b.sm { width:28px; height:28px; }
|
||||
.tab:not(.active) .bch-b { opacity:.6; }
|
||||
.tab.active .bch-b { box-shadow: 0 0 12px var(--acid-glow), 0 0 20px var(--acid-halo); }
|
||||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
|
||||
<div class="phone">
|
||||
<div class="screen-head">
|
||||
<div class="screen-title">Avalanche</div>
|
||||
<div class="label-mono">Create · Issue</div>
|
||||
</div>
|
||||
|
||||
<!-- Create hero -->
|
||||
<div class="create-card">
|
||||
<div class="cc-main">
|
||||
<div class="cc-title">Create a new asset</div>
|
||||
<div class="cc-sub">6 steps · immutable at genesis 🔒<br>no admin · no recall · no backdoor</div>
|
||||
</div>
|
||||
<button class="btn-acid">Start</button>
|
||||
</div>
|
||||
|
||||
<!-- Asset taxonomy — MBA (left) vs Token (right) -->
|
||||
<div class="tax-cols">
|
||||
<div class="tax-col">
|
||||
<div class="col-head"><span class="dot backed"></span><span class="gname">MBA</span><span class="info">ⓘ</span></div>
|
||||
<div class="col-note">Mathematically Backed · fixed rate · PNV floor</div>
|
||||
<div class="preset" data-class="DEA"><div class="p-code">DEA</div><div class="p-name">Hard-Backed</div><div class="p-axes">permissionless · unlimited</div></div>
|
||||
<div class="preset" data-class="PLA"><div class="p-code">PLA</div><div class="p-name">Commodity</div><div class="p-axes">permissionless · limited</div></div>
|
||||
<div class="preset" data-class="MCA"><div class="p-code">MCA</div><div class="p-name">Bond</div><div class="p-axes">managed · unlimited</div></div>
|
||||
<div class="preset" data-class="MTA"><div class="p-code">MTA</div><div class="p-name">Tranche</div><div class="p-axes">managed · limited</div></div>
|
||||
</div>
|
||||
<div class="tax-col">
|
||||
<div class="col-head"><span class="dot nopeg"></span><span class="gname">NBA</span><span class="info">ⓘ</span></div>
|
||||
<div class="col-note">Non-Backed · no peg · incl. tokens & PoW coins</div>
|
||||
<div class="preset" data-class="PTU"><div class="p-code">PTU</div><div class="p-name">Game currency</div><div class="p-axes">permissionless · unlimited</div></div>
|
||||
<div class="preset" data-class="PTL"><div class="p-code">PTL</div><div class="p-name">Mineable Coin</div><div class="p-axes">permissionless · limited</div></div>
|
||||
<div class="preset" data-class="MTU"><div class="p-code">MTU</div><div class="p-name">Meme / Tokens</div><div class="p-axes">managed · unlimited</div></div>
|
||||
<div class="preset" data-class="MTL"><div class="p-code">MTL</div><div class="p-name">NFT / Collectibles</div><div class="p-axes">managed · limited</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick-action sheet -->
|
||||
<div class="sheet-backdrop" id="backdrop" style="position:absolute;inset:0;z-index:5;border-radius:30px;display:none;background:rgba(5,8,16,.62);backdrop-filter:blur(2px);"></div>
|
||||
|
||||
<!-- Asset-type detail sheet -->
|
||||
<div class="detail" id="detail">
|
||||
<span class="detail-close" id="detailClose">✕</span>
|
||||
<div class="detail-code" id="dCode"></div>
|
||||
<div class="detail-name" id="dName"></div>
|
||||
<div class="detail-chips" id="dChips"></div>
|
||||
<h4>What it is</h4>
|
||||
<p id="dDef"></p>
|
||||
<h4>Use cases</h4>
|
||||
<ul id="dUse"></ul>
|
||||
<h4>Examples / real-world peer</h4>
|
||||
<p id="dEx"></p>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM BAR -->
|
||||
<nav class="tabbar">
|
||||
<button class="tab"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab" id="fab" aria-label="Send, receive, or scan">⇅</button>
|
||||
<button class="tab active"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function generateStars() {
|
||||
const c = document.getElementById('stars'); if (!c) return;
|
||||
const count = window.innerWidth < 700 ? 100 : 180;
|
||||
const frag = document.createDocumentFragment();
|
||||
for (let i = 0; i < count; i++) {
|
||||
const s = document.createElement('div'); s.className = 'star';
|
||||
const roll = Math.random(); let size, opacity, dur;
|
||||
if (roll < 0.78) { size = 1 + Math.random()*0.4; opacity = 0.18 + Math.random()*0.22; dur = 14 + Math.random()*8; }
|
||||
else if (roll < 0.95) { size = 1.4 + Math.random()*0.6; opacity = 0.32 + Math.random()*0.22; dur = 10 + Math.random()*6; }
|
||||
else { size = 1.8 + Math.random()*0.8; opacity = 0.45 + Math.random()*0.25; dur = 8 + Math.random()*5; }
|
||||
s.style.width = size+'px'; s.style.height = size+'px';
|
||||
s.style.left = Math.random()*100+'%'; s.style.top = Math.random()*100+'%';
|
||||
s.style.opacity = opacity; s.style.setProperty('--twinkle-duration', dur+'s'); s.style.setProperty('--twinkle-delay', (Math.random()*dur)+'s');
|
||||
frag.appendChild(s);
|
||||
}
|
||||
c.appendChild(frag);
|
||||
})();
|
||||
// Asset-type detail sheet (click a class card)
|
||||
var DATA = {
|
||||
MBA:{n:'Mathematically Backed Assets',chips:['Family','BCH-backed','fixed rate','redeemable'],def:'The backed family. Every unit carries a protocol-enforced backing rate to BCH, set at genesis and immutable — a fixed, redeemable claim on locked BCH. Redemption is the contract itself: no custodian, no off-switch, no institutional layer. This is the strict-enforcement category (Layer 2b).',use:['DEA — hard backed','PLA — capped commodity','MCA — bond (rolling issuance)','MTA — tranche (capped slice)'],ex:'Replaces soft custodial backing (USDT, gold certificates) with a consensus invariant — the category empty in the existing world.'},
|
||||
NBA:{n:'Non-Backed Assets',chips:['Family','no backing','market-priced'],def:'Casual assets with no backing mechanism — the contract locks no BCH at a fixed rate and there is no protocol redemption. Value is set entirely by the market: exchanges, issuer reputation and traded liquidity. Tokens, memecoins, collectibles and PoW-style coins all live here.',use:['PTU — game currency · non-convertible VC (open-mint, uncapped)','PTL — mineable coin (capped, Bitcoin-style)','MTU — tokens / memecoins (incl. fiat & stablecoins; issuer-minted, uncapped)','MTL — NFT / collectibles (capped, issuer-minted)'],ex:'Conventional tokens whose price is set on exchanges; memecoins; PoW coins.'},
|
||||
DEA:{n:'Deviant Equilibrium Asset',fam:'MBA',mint:'permissionless',sup:'unlimited',asm:1,asmt:'Orbital / ASM eligible',def:'A counterparty-free backed currency — every unit carries its BCH backing inside its own UTXO, redeemable by your own spend. The contract replaces counterparty, market-maker and liquidity provider at once.',use:['Everyday / platform currencies','Game currencies','Loyalty & rewards points'],ex:'Novel — no traditional peer. Backed directly by BCH held in the unit itself, not by an external market peg or a custodian who could default — arguably the hardest backing any currency has ever carried.'},
|
||||
PLA:{n:'Permissionless Limited Asset',fam:'MBA',mint:'permissionless',sup:'limited',asm:1,asmt:'Orbital / ASM (until depleted)',def:'Backed like a DEA but with a capped reservoir. Once minted out the ASM goes inert, yet the BCH floor (PNV) stays redeemable forever.',use:['Capped, BCH-backed reserve assets','Backed claims with a hard floor + supply cap','Fixed-supply backed currencies'],ex:'Like a capped certificate backed by a reserve — NOT raw gold/silver themselves (those are unbacked direct value → PTL). PLA shares the permissionless-extraction pattern but adds the BCH redemption floor metal lacks.'},
|
||||
MCA:{n:'Managed Certificate Asset',fam:'MBA',mint:'managed',sup:'unlimited',asm:0,asmt:'No ASM (managed mint)',def:'Issuer-gated, uncapped issuance with a protocol-enforced BCH floor and redemption — a rolling backed program (bond / reserve-note style). The genuinely-backed instrument the existing world only approximates: every unit is redeemable by consensus, not by trusting an off-chain reserve.',use:['Rolling / perpetual bond programs','Issuer-backed reserve notes','A properly-backed stablecoin (reserves enforced on-chain)'],ex:'Closest peer: a bond program or reserve note. NOT today\'s USDT / USDC — their reserves sit off-chain and unenforced, so by the consensus-backing test those are NBA → MTU.'},
|
||||
MTA:{n:'Managed Tranche Asset',fam:'MBA',mint:'managed',sup:'limited',asm:0,asmt:'No ASM (managed mint)',def:'Issuer-gated and hard-capped, with a protocol-enforced BCH floor — a single fixed slice (tranche) of backed issuance.',use:['Fixed tranches & structured slices','Notes & bills (T-notes / T-bills — fixed-term, capped)','Numbered backed editions','Closed, capped reserve series'],ex:'A closed-end fund share, an ETF tranche, a fixed bond series, Treasury notes & bills — capped, backed, issuer-gated.'},
|
||||
PTU:{n:'Permissionless Token Unlimited',fam:'NBA',mint:'permissionless',sup:'unlimited',asm:0,asmt:'No peg · market-priced',def:'A Non-Convertible Virtual Currency — usable only inside one platform / ecosystem and not convertible to real money. Open-mint (tap to mint): anyone mints by spending into the covenant, no exclusive issuer, uncapped, no backing.',use:['In-game currencies earned by play (anyone)','Tap-to-mint / faucet tokens (click to claim)','Open community / play-to-earn currencies','Collateralized-debt stablecoins (MakerDAO / DAI) — permissionless mint; token unbacked (ADR-0033)'],ex:'Currencies anyone earns just by playing or clicking — MMORPG gold (RuneScape GP, WoW gold), arcade redemption tickets, faucet / tap-to-earn tokens. All open to anyone, inflationary (uncapped), and not officially cashable out. The convertible outlier here is a collateralized-debt stablecoin (MakerDAO / DAI): permissionless to mint, but the collateral backs the debt vault, not the token — the token itself is unbacked and market-priced (ADR-0033).'},
|
||||
PTL:{n:'Permissionless Token Limited',fam:'NBA',mint:'permissionless',sup:'limited',asm:0,asmt:'No peg · market-priced',def:'Open-mint but hard-capped, no backing floor and no exclusive operator — permissionless issuance up to a fixed total; value is market-set.',use:['Capped-supply mined coins (Bitcoin-style)','Tokenised commodities / barter goods — gold, silver (no issuer)','Permissionless capped mint events (no exclusive operator)'],ex:'Bitcoin, gold, silver, barter goods — direct-value Layer-1 assets: mined/extracted by anyone, finite, unbacked. A claim BACKED BY such value (a gold certificate, promissory note) is the backed type → that maps to an MBA, not here.'},
|
||||
MTU:{n:'Managed Token Unlimited',fam:'NBA',mint:'managed',sup:'unlimited',asm:0,asmt:'No peg · market-priced',def:'Issuer-controlled, uncapped, no protocol backing — a team mints supply exclusively; the default CashToken / ERC-20 shape. Real-world fiat money and "stablecoins" also sit here: the on-chain mint input is ~zero (a tx fee) yet the claim can be worth billions, and whether a bank truly holds the reserves is off-chain and disputable — not consensus-backed.',use:['Issuer-minted memecoins (SHIB / PEPE — the common case)','Project / governance / utility tokens','Fiat money & custodial "stablecoins" — USDC / USDT (backing off-chain, unenforced)'],ex:'Most memecoins and ERC-20 tokens; USDT / USDC and central-bank fiat — value rests on issuer trust, not a redeemable on-chain floor. Collateralized-debt stablecoins (MakerDAO / DAI) are permissionless-mint, so they classify as PTU, not here (ADR-0033).'},
|
||||
MTL:{n:'Managed Token Limited',fam:'NBA',mint:'managed',sup:'limited',asm:0,asmt:'No peg · market-priced',def:'Issuer-controlled and capped, no backing — a creator mints a fixed supply. For credentials, collections and capped memecoins.',use:['Fixed NFT collections & numbered editions','Collectibles (scarce, creator-dropped)','Event tickets, memberships & credentials','Capped-supply memecoins'],ex:'Concert tickets, membership passes, fixed-supply meme/collectible tokens.'}
|
||||
};
|
||||
var detail = document.getElementById('detail');
|
||||
function openDetail(code) {
|
||||
var d = DATA[code]; if (!d) return;
|
||||
document.getElementById('dName').innerHTML = d.n.replace(/[A-Z]/g, function (m) { return '<span class="cap">' + m + '</span>'; });
|
||||
var chips, asmIdx = -1;
|
||||
if (d.chips) { chips = d.chips; } else { chips = [d.fam, d.mint, d.sup, d.asmt]; asmIdx = 3; }
|
||||
document.getElementById('dChips').innerHTML = chips.map(function (c, i) {
|
||||
return '<span class="dchip' + ((i === asmIdx && d.asm) ? ' asm' : '') + '">' + c + '</span>';
|
||||
}).join('');
|
||||
document.getElementById('dDef').textContent = d.def;
|
||||
document.getElementById('dUse').innerHTML = d.use.map(function (u) { return '<li>' + u + '</li>'; }).join('');
|
||||
document.getElementById('dEx').textContent = d.ex;
|
||||
detail.classList.add('open');
|
||||
}
|
||||
document.querySelectorAll('.preset[data-class]').forEach(function (p) {
|
||||
p.addEventListener('click', function () { openDetail(p.getAttribute('data-class')); });
|
||||
});
|
||||
document.getElementById('detailClose').addEventListener('click', function () { detail.classList.remove('open'); });
|
||||
// Family headers (MBA / NBA) → generalized category description
|
||||
document.querySelectorAll('.col-head').forEach(function (h) {
|
||||
var g = h.querySelector('.gname'); if (!g) return;
|
||||
h.addEventListener('click', function () { openDetail(g.textContent.trim()); });
|
||||
});
|
||||
|
||||
// Bottom-bar navigation between mockup screens
|
||||
(function () {
|
||||
var map = { main:'main-tab.html', assets:'assets-tab.html', avalanche:'avalanche-tab.html', apps:'apps-tab.html' };
|
||||
document.querySelectorAll('.tabbar .tab').forEach(function (t) {
|
||||
var el = t.querySelector('.lbl'); if (!el) return;
|
||||
var dest = map[el.textContent.trim().toLowerCase()];
|
||||
if (dest && !t.classList.contains('active')) {
|
||||
t.style.cursor = 'pointer';
|
||||
t.addEventListener('click', function () { location.href = dest; });
|
||||
}
|
||||
});
|
||||
var fab = document.getElementById('fab'); if (fab) fab.addEventListener('click', function () { location.href = 'send-flow.html'; });
|
||||
var start = document.querySelector('.create-card .btn-acid'); if (start) start.addEventListener('click', function () { location.href = 'avalanche-wizard.html'; });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
799
design/mockups/avalanche-wizard.html
Normal file
799
design/mockups/avalanche-wizard.html
Normal file
|
|
@ -0,0 +1,799 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Avalanche Create Wizard · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 96px; backdrop-filter: blur(2px); overflow:hidden; }
|
||||
|
||||
.wiz-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
|
||||
.wiz-title { font-family: var(--font-display); font-weight:500; font-size:22px; color: var(--ink-bright); }
|
||||
.wiz-close { font-size:18px; color: var(--muted); cursor:pointer; }
|
||||
|
||||
.stepper { margin-bottom:6px; }
|
||||
.steps { display:flex; gap:5px; margin-bottom:8px; }
|
||||
.step { flex:1; height:3px; border-radius:2px; background: var(--surface-2); }
|
||||
.step.done { background: rgba(214,255,61,.45); }
|
||||
.step.now { background: var(--acid); box-shadow:0 0 8px var(--acid-halo); }
|
||||
.step-label { font-family: var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); }
|
||||
.step-label b { color: var(--ink); }
|
||||
|
||||
.q { font-family: var(--font-display); font-weight:500; font-size:19px; color: var(--ink-bright); margin: 18px 2px 14px; }
|
||||
|
||||
.wstep { display:none; } .wstep.active { display:block; }
|
||||
|
||||
/* tier cards (step 1) */
|
||||
.tier-card { display:flex; align-items:flex-start; gap:14px; padding:18px 16px; border-radius:16px; background:var(--surface-1); border:2px solid var(--border); margin-bottom:12px; cursor:pointer; transition:border-color .25s, box-shadow .25s; }
|
||||
.tier-card.on { border-color:var(--acid); box-shadow:0 0 18px var(--acid-dim); }
|
||||
.tier-card .tc-icon { width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:20px; }
|
||||
.tier-card.on .tc-icon { background: rgba(214,255,61,.12); color:var(--acid); text-shadow:0 0 8px var(--acid-halo); }
|
||||
.tier-card:not(.on) .tc-icon { background:var(--surface-2); color:var(--muted); }
|
||||
.tc-title { font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--ink-bright); }
|
||||
.tc-sub { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:4px; line-height:1.5; }
|
||||
.tc-badge { margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; padding:4px 10px; border-radius:7px; flex:none; }
|
||||
.tier-card.on .tc-badge { color:var(--acid); border:1px solid rgba(214,255,61,.35); text-shadow:0 0 6px var(--acid-halo); }
|
||||
.tier-card:not(.on) .tc-badge { color:var(--muted); border:1px solid var(--border-strong); }
|
||||
|
||||
/* purpose preset cards (step 3 for tier A) */
|
||||
.pcard { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:13px; background:var(--surface-1); border:1px solid var(--border); margin-bottom:9px; cursor:pointer; transition:border-color .2s; }
|
||||
.pcard.on { border-color:var(--acid); box-shadow:0 0 12px var(--acid-dim); }
|
||||
.pcard .pi { width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; font-size:16px; background:var(--surface-2); color:var(--acid); }
|
||||
.pcard .pt { font-family:var(--font-display); font-weight:500; font-size:14px; color:var(--ink-bright); }
|
||||
.pcard .ps { font-family:var(--font-mono); font-size:8px; color:var(--muted); margin-top:2px; line-height:1.4; }
|
||||
.pcard .pd { margin-left:auto; font-family:var(--font-mono); font-size:9px; color:var(--ink-soft); padding:3px 7px; border:1px solid var(--border-strong); border-radius:6px; flex:none; }
|
||||
|
||||
/* fields */
|
||||
.field { margin-bottom:15px; }
|
||||
.flabel { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 2px 7px; display:flex; gap:6px; align-items:center; }
|
||||
.input { width:100%; background:var(--surface-1); border:1px solid var(--border-strong); border-radius:11px; padding:12px 13px; color:var(--ink-bright); font-family:var(--font-mono); font-size:13px; box-sizing:border-box; }
|
||||
.input::placeholder { color:var(--muted); }
|
||||
.row2 { display:flex; gap:11px; } .row2 .field { flex:1; }
|
||||
|
||||
/* parameter toggles */
|
||||
.axis { margin-bottom:14px; }
|
||||
.axis-label { display:flex; align-items:center; gap:7px; font-family: var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin: 0 2px 7px; }
|
||||
.lock { color: var(--muted); }
|
||||
.tog { display:flex; gap:6px; padding:4px; background: var(--surface-1); border:1px solid var(--border); border-radius:13px; border-left:3px solid transparent; transition: border-left-color .8s ease, box-shadow .8s ease; overflow:visible; position:relative; }
|
||||
.opt { flex:1; text-align:center; cursor:pointer; border:0; background:transparent; font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); padding:11px 8px; border-radius:9px; transition: color .8s ease, background .8s ease, box-shadow .8s ease; }
|
||||
.opt.on { color: var(--sky-deep); }
|
||||
|
||||
/* DEA alignment — slow left-edge-only pulse */
|
||||
@keyframes leftPulse {
|
||||
0%, 100% { opacity: .5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
.tog .left-glow { position:absolute; left:-2px; top:10%; bottom:10%; width:4px; border-radius:3px; pointer-events:none; transition: opacity .8s ease, background .8s ease, box-shadow .8s ease; }
|
||||
.tog .left-glow.pulse { animation: leftPulse 3.5s ease-in-out infinite; }
|
||||
|
||||
/* divider label */
|
||||
.or-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:12px 2px 8px; display:flex; align-items:center; gap:10px; }
|
||||
.or-label::before, .or-label::after { content:''; flex:1; height:1px; background:var(--border); }
|
||||
|
||||
.derived { margin:16px 0 0; padding:16px; border-radius:16px; background: linear-gradient(135deg, rgba(214,255,61,.08), rgba(19,26,42,.4)); border:1px solid rgba(214,255,61,.25); }
|
||||
.d-row { display:flex; align-items:baseline; gap:12px; }
|
||||
.d-code { font-family: var(--font-mono); font-size:28px; letter-spacing:.06em; color: var(--acid); text-shadow:0 0 14px var(--acid-halo); }
|
||||
.d-name { font-family: var(--font-display); font-weight:500; font-size:15px; color: var(--ink-bright); }
|
||||
.d-axes { font-family: var(--font-mono); font-size:10px; color: var(--ink-soft); margin-top:7px; letter-spacing:.04em; }
|
||||
.d-asm { display:inline-block; margin-top:9px; font-family: var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:7px; border:1px solid var(--border-strong); color: var(--ink-soft); }
|
||||
.d-asm.elig { color: var(--acid); border-color: rgba(214,255,61,.4); text-shadow:0 0 6px var(--acid-halo); }
|
||||
|
||||
.d-peer { display:inline-block; margin-top:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--ink-bright); padding:3px 9px; border-radius:7px; background:rgba(214,255,61,.08); border:1px solid rgba(214,255,61,.2); }
|
||||
.d-detail { margin-top:14px; padding-top:12px; border-top:1px solid rgba(214,255,61,.12); }
|
||||
.d-def { font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); line-height:1.6; }
|
||||
.d-uses-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:12px 0 6px; }
|
||||
.d-uses { margin:0; padding:0 0 0 14px; font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); line-height:1.7; }
|
||||
.d-uses li { margin-bottom:2px; }
|
||||
.d-uses li::marker { color:var(--acid); }
|
||||
.d-ex { margin-top:10px; font-family:var(--font-mono); font-size:10px; color:var(--muted); line-height:1.5; font-style:italic; }
|
||||
|
||||
/* rate tier */
|
||||
.chips { display:flex; flex-wrap:wrap; gap:7px; }
|
||||
.rchip { font-family: var(--font-mono); font-size:11px; padding:8px 11px; border-radius:9px; border:1px solid var(--border-strong); background:transparent; color: var(--ink-soft); cursor:pointer; }
|
||||
.rchip.on { color: var(--sky-deep); background: var(--acid); border-color: var(--acid); box-shadow:0 0 10px var(--acid-halo); }
|
||||
.na-note { padding:16px; border-radius:14px; background:var(--surface-1); border:1px dashed var(--border-strong); font-family:var(--font-mono); font-size:11px; color:var(--muted); line-height:1.6; }
|
||||
|
||||
/* sliders */
|
||||
.slider-wrap { margin-bottom:18px; }
|
||||
.slider-top { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--ink); margin-bottom:8px; }
|
||||
.slider-top .val { color:var(--acid); }
|
||||
input[type=range] { width:100%; accent-color:var(--acid); }
|
||||
|
||||
.perm-note { font-family: var(--font-mono); font-size:10px; color: var(--muted); margin: 14px 2px 0; line-height:1.5; }
|
||||
|
||||
/* fee toggle overrides — not colored by A3 derive() */
|
||||
.fee-tog .opt { color: var(--ink-soft); }
|
||||
.fee-tog .opt.on { background: var(--acid); color: var(--sky-deep); box-shadow: 0 0 12px var(--acid-dim); }
|
||||
.fee-tog .opt.locked { color: var(--muted); }
|
||||
|
||||
/* premium gate */
|
||||
.opt.locked { opacity:.45; cursor:not-allowed; position:relative; }
|
||||
.opt.locked:hover { opacity:.55; }
|
||||
.premium-badge { display:inline-block; font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:1px; padding:2px 6px; border-radius:4px; background:linear-gradient(135deg,#f0c040,#e8a020); color:#1a1a2e; margin-left:6px; vertical-align:middle; text-shadow:none; }
|
||||
|
||||
/* escalating fee triggers */
|
||||
.fee-tog { margin-bottom:4px; }
|
||||
.esc-triggers { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
|
||||
.esc-trig { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; background:var(--surface-1); border:1px solid var(--border); cursor:pointer; transition:border-color .3s, box-shadow .3s; }
|
||||
.esc-trig.on { border-color:var(--acid); box-shadow:0 0 12px var(--acid-dim); }
|
||||
.esc-trig .trig-icon { font-size:16px; flex:none; width:24px; text-align:center; color:var(--muted); transition:color .3s; }
|
||||
.esc-trig.on .trig-icon { color:var(--acid); text-shadow:0 0 8px var(--acid-halo); }
|
||||
.esc-trig .trig-name { font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--ink); }
|
||||
.esc-trig .trig-desc { display:block; font-family:var(--font-mono); font-size:10px; color:var(--muted); line-height:1.4; margin-top:2px; }
|
||||
.trig-params { margin-top:12px; }
|
||||
.esc-formula { font-family:var(--font-mono); font-size:10px; color:var(--acid); background:rgba(214,255,61,.06); border:1px solid rgba(214,255,61,.15); border-radius:8px; padding:8px 12px; margin-top:4px; letter-spacing:.3px; }
|
||||
|
||||
/* review wall */
|
||||
.warn-banner { display:flex; gap:10px; padding:13px 14px; border-radius:13px; background:rgba(240,192,64,.07); border:1px solid rgba(240,192,64,.3); font-family:var(--font-mono); font-size:10px; color:#f0c040; line-height:1.5; margin-bottom:14px; }
|
||||
.warn-banner.info { background:rgba(214,255,61,.04); border-color:rgba(214,255,61,.2); color:var(--ink-soft); }
|
||||
.rev-row { display:flex; justify-content:space-between; gap:12px; padding:10px 2px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11px; }
|
||||
.rev-row .k { color:var(--muted); display:flex; gap:6px; align-items:center; } .rev-row .v { color:var(--ink); text-align:right; }
|
||||
.mark { font-size:10px; } .mark.lock { color:var(--risk-warn); } .mark.edit { color:#0ac18e; }
|
||||
.confirm-field { margin-top:16px; }
|
||||
|
||||
.wiz-foot { position:absolute; left:0; right:0; bottom:0; display:flex; gap:12px; padding:16px 18px 22px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.btn-ghost { flex:1; font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:14px; border-radius:11px; background:transparent; color: var(--ink-soft); border:1px solid var(--border-strong); cursor:pointer; }
|
||||
.btn-acid { flex:2; font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:14px; border-radius:11px; background: var(--acid); color: var(--sky-deep); border:0; cursor:pointer; box-shadow:0 0 16px var(--acid-halo); }
|
||||
.btn-acid.disabled { background:var(--surface-2); color:var(--muted); box-shadow:none; cursor:not-allowed; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
|
||||
<div class="phone">
|
||||
<div class="wiz-head">
|
||||
<div class="wiz-title">Create asset</div>
|
||||
<div class="wiz-close">✕</div>
|
||||
</div>
|
||||
|
||||
<div class="stepper">
|
||||
<div class="steps" id="bars"></div>
|
||||
<div class="step-label" id="stepLabel"></div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<!-- STEP 1 — TIER (shared by both flows) -->
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<section class="wstep active" data-step="1">
|
||||
<div class="q">Choose your tier</div>
|
||||
<div class="tier-card on" data-tier="A">
|
||||
<div class="tc-icon">⬡</div>
|
||||
<div>
|
||||
<div class="tc-title">Tier A · Chain-enforced</div>
|
||||
<div class="tc-sub">Native CashTokens asset validated by miners.<br>Immutable rules, on-chain backing, global visibility.</div>
|
||||
</div>
|
||||
<div class="tc-badge">6 STEPS</div>
|
||||
</div>
|
||||
<div class="tier-card" data-tier="B">
|
||||
<div class="tc-icon">✎</div>
|
||||
<div>
|
||||
<div class="tc-title">Tier B · Experiment</div>
|
||||
<div class="tc-sub">Wallet-convention only, unverified by default.<br>For closed groups, personal testing, prototyping.</div>
|
||||
</div>
|
||||
<div class="tc-badge">4 STEPS</div>
|
||||
</div>
|
||||
<div class="perm-note">Tier is locked at genesis and can never be changed. A Tier B asset cannot be elevated to Tier A later — you would create a new Tier A asset and migrate.</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<!-- TIER A: STEP 2 — IDENTITY -->
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<section class="wstep" data-step="A2">
|
||||
<div class="q">Identity & metadata</div>
|
||||
<div class="row2">
|
||||
<div class="field"><span class="flabel">Name</span><input class="input" value="Nova"></div>
|
||||
<div class="field"><span class="flabel">Ticker</span><input class="input" value="NOVA"></div>
|
||||
</div>
|
||||
<div class="field"><span class="flabel">Description</span><input class="input" value="Counterparty-free platform currency"></div>
|
||||
<div class="perm-note">Name and ticker are published on-chain via BCMR metadata. Choose carefully — they represent your asset to every wallet that displays it.</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<!-- TIER A: STEP 3 — ASSET TYPE (presets + toggles) -->
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<section class="wstep" data-step="A3">
|
||||
<div class="q">Asset type</div>
|
||||
|
||||
<!-- Axis toggles -->
|
||||
<div class="axis">
|
||||
<div class="axis-label">Backing <span class="lock">🔒</span></div>
|
||||
<div class="tog" data-axis="backing">
|
||||
<button class="opt on" data-v="mba">MBA · backed</button>
|
||||
<button class="opt" data-v="token">NBA · no peg</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="axis">
|
||||
<div class="axis-label">Mint rule <span class="lock">🔒</span></div>
|
||||
<div class="tog" data-axis="mint">
|
||||
<button class="opt on" data-v="permissionless">Permissionless</button>
|
||||
<button class="opt" data-v="managed">Managed</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="axis">
|
||||
<div class="axis-label">Supply <span class="lock">🔒</span></div>
|
||||
<div class="tog" data-axis="supply">
|
||||
<button class="opt on" data-v="unlimited">Unlimited</button>
|
||||
<button class="opt" data-v="limited">Limited</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Derived class — full detail panel -->
|
||||
<div class="derived">
|
||||
<div class="d-row"><span class="d-code" id="dCode">DEA</span><span class="d-name" id="dName">Deviant Equilibrium Asset</span></div>
|
||||
<div class="d-peer" id="dPeer">Hard-Backed</div>
|
||||
<div class="d-axes" id="dAxes">permissionless · fixed rate · unlimited</div>
|
||||
<div class="d-asm elig" id="dAsm">✦ Orbital / ASM eligible</div>
|
||||
<div class="d-detail" id="dDetail">
|
||||
<div class="d-def" id="dDef"></div>
|
||||
<div class="d-uses-label">Use cases</div>
|
||||
<ul class="d-uses" id="dUses"></ul>
|
||||
<div class="d-ex" id="dExWiz"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<!-- TIER A: STEP 4 — RATE TIER -->
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<section class="wstep" data-step="A4">
|
||||
<div class="q">Backing rate</div>
|
||||
<div id="rateBox">
|
||||
<div class="axis-label">Sats per unit <span class="lock">🔒</span></div>
|
||||
<div class="chips">
|
||||
<button class="rchip">1,000</button>
|
||||
<button class="rchip on">10,000</button>
|
||||
<button class="rchip">100,000</button>
|
||||
<button class="rchip">1,000,000</button>
|
||||
<button class="rchip">10,000,000</button>
|
||||
<button class="rchip">100,000,000</button>
|
||||
<button class="rchip">1 BCH</button>
|
||||
</div>
|
||||
<div class="perm-note">Seven fixed tiers (ALLOWED_RATE_TIERS). Sub-1,000 is structurally impossible at the dust limit (V2.7 §5.3). At 10,000 sat/unit a 0.5% mint fee ≈ 50 sat per unit.</div>
|
||||
</div>
|
||||
<div class="na-note" id="rateNA" style="display:none">NBA assets carry <b>no backing rate</b> — value is market-set, no peg, no PNV floor. This step is skipped for non-backed types.</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<!-- TIER A: STEP 5 — FOUNDER FEE -->
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<section class="wstep" data-step="A5">
|
||||
<div class="q">Founder fee</div>
|
||||
|
||||
<!-- Fee mode toggle -->
|
||||
<div class="tog fee-tog" data-axis="feeMode">
|
||||
<button class="opt on" data-v="flat">Flat</button>
|
||||
<button class="opt locked" data-v="escalating" disabled>Escalating <span class="premium-badge">PRO</span></button>
|
||||
</div>
|
||||
|
||||
<!-- ── Flat fee panel ── -->
|
||||
<div id="feePanelFlat">
|
||||
<div class="slider-wrap" style="margin-top:14px">
|
||||
<div class="slider-top"><span>feeRate <span class="mark lock">🔒</span></span><span class="val" id="feeVal">0.5%</span></div>
|
||||
<input type="range" id="feeSlider" min="0" max="5" value="0.5" step="0.1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Escalating fee panel ── -->
|
||||
<div id="feePanelEsc" style="display:none">
|
||||
<div class="slider-wrap" style="margin-top:14px">
|
||||
<div class="slider-top"><span>baseFee <span class="mark lock">🔒</span></span><span class="val" id="escBaseVal">0.1%</span></div>
|
||||
<input type="range" id="escBaseSlider" min="0" max="3" value="0.1" step="0.1">
|
||||
</div>
|
||||
<div class="slider-wrap">
|
||||
<div class="slider-top"><span>maxFee cap <span class="mark lock">🔒</span></span><span class="val" id="escCapVal">5.0%</span></div>
|
||||
<input type="range" id="escCapSlider" min="0.5" max="5" value="5" step="0.1">
|
||||
</div>
|
||||
|
||||
<!-- Trigger selector -->
|
||||
<div class="flabel" style="margin-bottom:8px">Escalation trigger <span class="mark lock">🔒</span></div>
|
||||
<div class="esc-triggers">
|
||||
<label class="esc-trig on" data-t="supply">
|
||||
<span class="trig-icon">◈</span>
|
||||
<span class="trig-name">Supply-based</span>
|
||||
<span class="trig-desc">Fee rises as more tokens are minted from the reservoir</span>
|
||||
</label>
|
||||
<label class="esc-trig" data-t="txcount">
|
||||
<span class="trig-icon">⧫</span>
|
||||
<span class="trig-name">Tx-count</span>
|
||||
<span class="trig-desc">Fee steps up every N mint transactions</span>
|
||||
</label>
|
||||
<label class="esc-trig" data-t="blockheight">
|
||||
<span class="trig-icon">▥</span>
|
||||
<span class="trig-name">Block height</span>
|
||||
<span class="trig-desc">Fee grows linearly with elapsed blocks since genesis</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Trigger-specific params -->
|
||||
<div id="trigSupply" class="trig-params">
|
||||
<div class="slider-wrap">
|
||||
<div class="slider-top"><span>feeIncrement per 1 M tokens <span class="mark lock">🔒</span></span><span class="val" id="escSupplyStepVal">+0.1%</span></div>
|
||||
<input type="range" id="escSupplyStep" min="0.01" max="1" value="0.1" step="0.01">
|
||||
</div>
|
||||
<div class="esc-formula">fee = 0.1% + (issued ÷ 1M) × 0.1%</div>
|
||||
</div>
|
||||
<div id="trigTxcount" class="trig-params" style="display:none">
|
||||
<div class="slider-wrap">
|
||||
<div class="slider-top"><span>txThreshold (step every N txs) <span class="mark lock">🔒</span></span><span class="val" id="escTxThreshVal">100</span></div>
|
||||
<input type="range" id="escTxThresh" min="10" max="1000" value="100" step="10">
|
||||
</div>
|
||||
<div class="slider-wrap">
|
||||
<div class="slider-top"><span>feeStep per threshold <span class="mark lock">🔒</span></span><span class="val" id="escTxStepVal">+0.1%</span></div>
|
||||
<input type="range" id="escTxStep" min="0.01" max="1" value="0.1" step="0.01">
|
||||
</div>
|
||||
<div class="esc-formula">fee = 0.1% + (txCount ÷ 100) × 0.1%</div>
|
||||
<div class="perm-note" style="color:var(--risk-warn);margin-top:6px">⚠ Requires NFT commitment state — experimental, needs chipnet validation.</div>
|
||||
</div>
|
||||
<div id="trigBlockheight" class="trig-params" style="display:none">
|
||||
<div class="slider-wrap">
|
||||
<div class="slider-top"><span>blocksPerStep <span class="mark lock">🔒</span></span><span class="val" id="escBlockStepVal">4,320</span></div>
|
||||
<input type="range" id="escBlockStep" min="144" max="52560" value="4320" step="144">
|
||||
</div>
|
||||
<div class="slider-wrap">
|
||||
<div class="slider-top"><span>feeStep per period <span class="mark lock">🔒</span></span><span class="val" id="escBlockFeeVal">+0.1%</span></div>
|
||||
<input type="range" id="escBlockFee" min="0.01" max="1" value="0.1" step="0.01">
|
||||
</div>
|
||||
<div class="esc-formula">fee = 0.1% + (elapsed ÷ 4,320) × 0.1% (~monthly steps)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field" style="margin-top:14px"><span class="flabel">feeAddress <span class="mark lock">🔒</span></span><input class="input" value="bchtest:qp2…7lm (multisig ok)"></div>
|
||||
<div class="perm-note"><span class="mark lock">🔒</span> The founder fee formula is set permanently at contract creation — it is encoded into the covenant bytecode. The redeem side carries <b>no fee</b> — redemption is a P2PKH spend (V2.7 §4.4).</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<!-- TIER A: STEP 6 — REVIEW WALL -->
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<section class="wstep" data-step="A6">
|
||||
<div class="q">Review wall</div>
|
||||
<div class="warn-banner">⚠ This writes immutable on-chain commitments. No admin, no recall, no upgrade path. 🔒 fields can never change.</div>
|
||||
<div class="rev-row"><span class="k">Name · ticker</span><span class="v" id="rvName">Nova · NOVA</span></div>
|
||||
<div class="rev-row"><span class="k"><span class="mark lock">🔒</span> Tier</span><span class="v">A · chain-enforced</span></div>
|
||||
<div class="rev-row"><span class="k"><span class="mark lock">🔒</span> Class</span><span class="v" id="rvClass">DEA — Deviant Equilibrium Asset</span></div>
|
||||
<div class="rev-row"><span class="k"><span class="mark lock">🔒</span> Backing rate</span><span class="v" id="rvRate">10,000 sat / unit</span></div>
|
||||
<div class="rev-row"><span class="k"><span class="mark lock">🔒</span> Mint × supply</span><span class="v" id="rvAxes">permissionless · unlimited</span></div>
|
||||
<div class="rev-row"><span class="k"><span class="mark lock">🔒</span> Founder fee</span><span class="v" id="rvFee">0.5%</span></div>
|
||||
<div class="rev-row"><span class="k">Genesis cost (BCH fuel)</span><span class="v">~5,400 sat</span></div>
|
||||
<div class="confirm-field">
|
||||
<span class="flabel">Type CREATE to confirm — this is irreversible</span>
|
||||
<input class="input" id="createInputA" placeholder="CREATE" spellcheck="false">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<!-- TIER B: STEP 2 — IDENTITY (simpler) -->
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<section class="wstep" data-step="B2">
|
||||
<div class="q">Name your experiment</div>
|
||||
<div class="row2">
|
||||
<div class="field"><span class="flabel">Name</span><input class="input" placeholder="e.g. TestCoin"></div>
|
||||
<div class="field"><span class="flabel">Ticker</span><input class="input" placeholder="e.g. TST"></div>
|
||||
</div>
|
||||
<div class="field"><span class="flabel">Description <span style="color:var(--muted);font-weight:400;">(optional)</span></span><input class="input" placeholder="What is this experiment for?"></div>
|
||||
<div class="perm-note">Tier B assets are local wallet conventions — visible only to wallets that import the same definition. Not broadcast on-chain via BCMR.</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<!-- TIER B: STEP 3 — SIMPLE TYPE (mint + supply only) -->
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<section class="wstep" data-step="B3">
|
||||
<div class="q">Token type</div>
|
||||
<div class="warn-banner info">ℹ Tier B assets are always NBA (non-backed) — no BCH backing rate, no PNV floor. Value is whatever your group agrees on.</div>
|
||||
<div class="axis">
|
||||
<div class="axis-label">Mint rule</div>
|
||||
<div class="tog" data-axis="b-mint">
|
||||
<button class="opt on" data-v="permissionless">Permissionless</button>
|
||||
<button class="opt" data-v="managed">Managed</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="axis">
|
||||
<div class="axis-label">Supply</div>
|
||||
<div class="tog" data-axis="b-supply">
|
||||
<button class="opt on" data-v="unlimited">Unlimited</button>
|
||||
<button class="opt" data-v="limited">Limited</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="derived" id="bDerived">
|
||||
<div class="d-row"><span class="d-code" id="bCode">PTU</span><span class="d-name" id="bName">Permissionless Token Unlimited</span></div>
|
||||
<div class="d-axes" id="bAxes">NBA · permissionless · unlimited</div>
|
||||
<div class="d-asm" id="bAsm">No peg · no ASM</div>
|
||||
</div>
|
||||
<div class="perm-note">Tier B tokens don't go through the full Avalanche pipeline — no rate tier, no founder fee. You can start experimenting immediately.</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<!-- TIER B: STEP 4 — REVIEW (lighter) -->
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<section class="wstep" data-step="B4">
|
||||
<div class="q">Review</div>
|
||||
<div class="warn-banner info">ℹ Tier B is a wallet convention — lightweight, local, no immutable on-chain commitments. You can delete or recreate anytime.</div>
|
||||
<div class="rev-row"><span class="k">Name · ticker</span><span class="v" id="rvBName">— · —</span></div>
|
||||
<div class="rev-row"><span class="k">Tier</span><span class="v">B · experiment</span></div>
|
||||
<div class="rev-row"><span class="k">Class</span><span class="v" id="rvBClass">PTU — Permissionless Token Unlimited</span></div>
|
||||
<div class="rev-row"><span class="k">Mint × supply</span><span class="v" id="rvBAxes">permissionless · unlimited</span></div>
|
||||
<div class="rev-row"><span class="k">Backing</span><span class="v">None (NBA)</span></div>
|
||||
<div class="rev-row"><span class="k">Genesis cost</span><span class="v">~546 sat (dust)</span></div>
|
||||
<div class="perm-note" style="margin-top:20px;">No CREATE confirmation needed for Tier B — this is a local definition, not an immutable covenant.</div>
|
||||
</section>
|
||||
|
||||
<div class="wiz-foot">
|
||||
<button class="btn-ghost" id="backBtn">Cancel</button>
|
||||
<button class="btn-acid" id="nextBtn">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ── Starfield ── */
|
||||
(function generateStars() {
|
||||
var c = document.getElementById('stars'); if (!c) return;
|
||||
var count = window.innerWidth < 700 ? 100 : 180;
|
||||
var frag = document.createDocumentFragment();
|
||||
for (var i = 0; i < count; i++) {
|
||||
var s = document.createElement('div'); s.className = 'star';
|
||||
var roll = Math.random(), size, opacity, dur;
|
||||
if (roll < 0.78) { size = 1+Math.random()*.4; opacity = .18+Math.random()*.22; dur = 14+Math.random()*8; }
|
||||
else if (roll < 0.95) { size = 1.4+Math.random()*.6; opacity = .32+Math.random()*.22; dur = 10+Math.random()*6; }
|
||||
else { size = 1.8+Math.random()*.8; opacity = .45+Math.random()*.25; dur = 8+Math.random()*5; }
|
||||
s.style.width = size+'px'; s.style.height = size+'px';
|
||||
s.style.left = Math.random()*100+'%'; s.style.top = Math.random()*100+'%';
|
||||
s.style.opacity = opacity; s.style.setProperty('--twinkle-duration', dur+'s'); s.style.setProperty('--twinkle-delay', (Math.random()*dur)+'s');
|
||||
frag.appendChild(s);
|
||||
}
|
||||
c.appendChild(frag);
|
||||
})();
|
||||
|
||||
/* ── Flow engine ── */
|
||||
var tier = 'A';
|
||||
var sel = { backing:'mba', mint:'permissionless', supply:'unlimited' };
|
||||
var FLOWS_A_FULL = { steps:['1','A2','A3','A4','A5','A6'], labels:['Tier','Identity','Asset type','Rate tier','Founder fee','Review wall'] };
|
||||
var FLOWS_A_NBA = { steps:['1','A2','A3','A5','A6'], labels:['Tier','Identity','Asset type','Founder fee','Review wall'] };
|
||||
var FLOWS_B = { steps:['1','B2','B3','B4'], labels:['Tier','Identity','Token type','Review'] };
|
||||
var idx = 0;
|
||||
|
||||
function flow() {
|
||||
if (tier === 'B') return FLOWS_B;
|
||||
return sel.backing === 'token' ? FLOWS_A_NBA : FLOWS_A_FULL;
|
||||
}
|
||||
function curStepKey() { return flow().steps[idx]; }
|
||||
|
||||
function render() {
|
||||
var f = flow();
|
||||
// stepper bars
|
||||
var barsEl = document.getElementById('bars');
|
||||
barsEl.innerHTML = '';
|
||||
for (var i = 0; i < f.steps.length; i++) {
|
||||
var b = document.createElement('div');
|
||||
b.className = 'step' + (i < idx ? ' done' : (i === idx ? ' now' : ''));
|
||||
barsEl.appendChild(b);
|
||||
}
|
||||
document.getElementById('stepLabel').innerHTML = 'Step ' + (idx+1) + ' / ' + f.steps.length + ' · <b>' + f.labels[idx] + '</b>';
|
||||
// show/hide sections
|
||||
document.querySelectorAll('.wstep').forEach(function (s) {
|
||||
s.classList.toggle('active', s.getAttribute('data-step') === curStepKey());
|
||||
});
|
||||
// footer buttons
|
||||
document.getElementById('backBtn').textContent = idx === 0 ? 'Cancel' : 'Back';
|
||||
var next = document.getElementById('nextBtn');
|
||||
var isLast = idx === f.steps.length - 1;
|
||||
if (isLast && tier === 'A') {
|
||||
next.textContent = 'Create asset';
|
||||
next.classList.toggle('disabled', document.getElementById('createInputA').value.trim().toUpperCase() !== 'CREATE');
|
||||
} else if (isLast && tier === 'B') {
|
||||
next.textContent = 'Create experiment';
|
||||
next.classList.remove('disabled');
|
||||
} else {
|
||||
next.textContent = 'Continue';
|
||||
next.classList.remove('disabled');
|
||||
}
|
||||
// fill review on last step
|
||||
if (isLast) fillReview();
|
||||
}
|
||||
|
||||
document.getElementById('nextBtn').addEventListener('click', function () {
|
||||
if (idx < flow().steps.length - 1) { idx++; render(); }
|
||||
});
|
||||
document.getElementById('backBtn').addEventListener('click', function () {
|
||||
if (idx > 0) { idx--; render(); }
|
||||
});
|
||||
|
||||
/* ── Tier selection (step 1) ── */
|
||||
document.querySelectorAll('.tier-card').forEach(function (c) {
|
||||
c.addEventListener('click', function () {
|
||||
document.querySelectorAll('.tier-card').forEach(function (x) { x.classList.remove('on'); });
|
||||
c.classList.add('on');
|
||||
tier = c.getAttribute('data-tier');
|
||||
});
|
||||
});
|
||||
|
||||
/* ── Tier A: class derivation ── */
|
||||
var CLASS = {
|
||||
'mba|permissionless|unlimited': ['DEA','Deviant Equilibrium Asset', true],
|
||||
'mba|permissionless|limited': ['PLA','Permissionless Limited Asset', true],
|
||||
'mba|managed|unlimited': ['MCA','Managed Certificate Asset', false],
|
||||
'mba|managed|limited': ['MTA','Managed Tranche Asset', false],
|
||||
'token|permissionless|unlimited':['PTU','Permissionless Token Unlimited', false],
|
||||
'token|permissionless|limited': ['PTL','Permissionless Token Limited', false],
|
||||
'token|managed|unlimited': ['MTU','Managed Token Unlimited', false],
|
||||
'token|managed|limited': ['MTL','Managed Token Limited', false]
|
||||
};
|
||||
function curClass() { return CLASS[sel.backing+'|'+sel.mint+'|'+sel.supply]; }
|
||||
|
||||
var DETAIL = {
|
||||
DEA: { peer:'Hard-Backed',
|
||||
def:'A counterparty-free backed currency — every unit carries its BCH backing inside its own UTXO, redeemable by your own spend. The contract replaces counterparty, market-maker and liquidity provider at once.',
|
||||
use:['Everyday / platform currencies','Game currencies with real backing','Loyalty & rewards points'],
|
||||
ex:'Novel — no traditional peer. Backed directly by BCH held in the unit itself, not by an external market peg or a custodian who could default.'
|
||||
},
|
||||
PLA: { peer:'Commodity',
|
||||
def:'Backed like a DEA but with a capped reservoir. Once minted out the ASM goes inert, yet the BCH floor (PNV) stays redeemable forever.',
|
||||
use:['Capped, BCH-backed reserve assets','Backed claims with a hard floor + supply cap','Fixed-supply backed currencies'],
|
||||
ex:'Like a capped certificate backed by a reserve — PLA shares the permissionless-extraction pattern but adds the BCH redemption floor.'
|
||||
},
|
||||
MCA: { peer:'Bond',
|
||||
def:'Issuer-gated, uncapped issuance with a protocol-enforced BCH floor and redemption — a rolling backed program (bond / reserve-note style).',
|
||||
use:['Rolling / perpetual bond programs','Issuer-backed reserve notes','A properly-backed stablecoin (reserves enforced on-chain)'],
|
||||
ex:'Closest peer: a bond program or reserve note. NOT today\'s USDT / USDC — their reserves sit off-chain and unenforced → those are NBA (MTU).'
|
||||
},
|
||||
MTA: { peer:'Tranche',
|
||||
def:'Issuer-gated and hard-capped, with a protocol-enforced BCH floor — a single fixed slice (tranche) of backed issuance.',
|
||||
use:['Fixed tranches & structured slices','Notes & bills (T-notes / T-bills)','Numbered backed editions','Closed, capped reserve series'],
|
||||
ex:'A closed-end fund share, an ETF tranche, a fixed bond series, Treasury notes & bills — capped, backed, issuer-gated.'
|
||||
},
|
||||
PTU: { peer:'Game currency',
|
||||
def:'A Non-Convertible Virtual Currency — usable only inside one platform / ecosystem. Open-mint: anyone mints by spending into the covenant, no exclusive issuer, uncapped, no backing.',
|
||||
use:['In-game currencies earned by play','Tap-to-mint / faucet tokens','Open community / play-to-earn currencies'],
|
||||
ex:'MMORPG gold, arcade redemption tickets, faucet / tap-to-earn tokens. All open to anyone, inflationary, and not officially cashable out.'
|
||||
},
|
||||
PTL: { peer:'Mineable Coin',
|
||||
def:'Open-mint but hard-capped, no backing floor and no exclusive operator — permissionless issuance up to a fixed total; value is market-set.',
|
||||
use:['Capped-supply mined coins (Bitcoin-style)','Tokenised commodities / barter goods','Permissionless capped mint events'],
|
||||
ex:'Bitcoin, gold, silver, barter goods — direct-value assets: mined/extracted by anyone, finite, unbacked.'
|
||||
},
|
||||
MTU: { peer:'Meme / Tokens',
|
||||
def:'Issuer-controlled, uncapped, no protocol backing — a team mints supply exclusively. Fiat money and "stablecoins" also sit here: backing claimed off-chain, unenforced.',
|
||||
use:['Issuer-minted memecoins (the common case)','Project / governance / utility tokens','Fiat money & stablecoins (off-chain backing)'],
|
||||
ex:'Most memecoins and ERC-20 tokens; USDT / USDC and central-bank fiat — value rests on issuer trust, not a redeemable on-chain floor.'
|
||||
},
|
||||
MTL: { peer:'NFT / Collectibles',
|
||||
def:'Issuer-controlled and capped, no backing — a creator mints a fixed supply. For credentials, collections and capped memecoins.',
|
||||
use:['Fixed NFT collections & numbered editions','Event tickets, memberships & credentials','Capped-supply memecoins'],
|
||||
ex:'Concert tickets, membership passes, fixed-supply meme/collectible tokens.'
|
||||
}
|
||||
};
|
||||
|
||||
// Color gradient: each class maps to a hue+saturation+lightness
|
||||
// MBA+Permissionless = intense acid green → MBA+Managed = teal → NBA = calm sea blue
|
||||
var COLORS = {
|
||||
DEA: { h:75, s:95, l:58, glow:.45 }, // acid green — peak
|
||||
PLA: { h:95, s:80, l:52, glow:.38 }, // lime-green
|
||||
MCA: { h:120, s:65, l:48, glow:.30 }, // green
|
||||
MTA: { h:145, s:55, l:46, glow:.25 }, // green-teal
|
||||
PTU: { h:160, s:50, l:46, glow:.22 }, // teal
|
||||
PTL: { h:175, s:48, l:45, glow:.19 }, // cyan-teal
|
||||
MTU: { h:195, s:48, l:50, glow:.16 }, // cyan-blue
|
||||
MTL: { h:210, s:45, l:50, glow:.14 } // calm blue
|
||||
};
|
||||
function hsl(c, a) { return 'hsla('+c.h+','+c.s+'%,'+c.l+'%,'+(a||1)+')'; }
|
||||
|
||||
function derive() {
|
||||
var c = curClass();
|
||||
var isDEA = c[0] === 'DEA';
|
||||
var isNBA = sel.backing === 'token';
|
||||
var col = COLORS[c[0]];
|
||||
|
||||
document.getElementById('dCode').textContent = c[0];
|
||||
document.getElementById('dName').textContent = c[1];
|
||||
var rateWord = isNBA ? 'no peg' : 'fixed rate';
|
||||
document.getElementById('dAxes').textContent = sel.mint+' · '+rateWord+' · '+sel.supply;
|
||||
var asm = document.getElementById('dAsm');
|
||||
if (c[2]) { asm.className='d-asm elig'; asm.textContent = c[0]==='PLA' ? '✦ Orbital / ASM eligible (until depleted)' : '✦ Orbital / ASM eligible'; }
|
||||
else { asm.className='d-asm'; asm.textContent = isNBA ? 'No peg · no ASM' : 'No ASM (managed mint)'; }
|
||||
|
||||
// fill detail panel
|
||||
var d = DETAIL[c[0]];
|
||||
if (d) {
|
||||
document.getElementById('dPeer').textContent = d.peer;
|
||||
document.getElementById('dDef').textContent = d.def;
|
||||
document.getElementById('dUses').innerHTML = d.use.map(function(u){ return '<li>'+u+'</li>'; }).join('');
|
||||
document.getElementById('dExWiz').textContent = d.ex;
|
||||
}
|
||||
|
||||
// ── Left-side glow on toggle containers ──
|
||||
var glowColor = hsl(col, col.glow);
|
||||
var borderColor = hsl(col, col.glow + 0.3);
|
||||
document.querySelectorAll('[data-step="A3"] .tog').forEach(function (t) {
|
||||
t.style.borderLeftColor = borderColor;
|
||||
var glow = t.querySelector('.left-glow');
|
||||
if (!glow) {
|
||||
glow = document.createElement('div');
|
||||
glow.className = 'left-glow';
|
||||
t.appendChild(glow);
|
||||
}
|
||||
glow.style.background = glowColor;
|
||||
glow.style.boxShadow = '-2px 0 ' + Math.round(10 + col.glow * 20) + 'px ' + glowColor;
|
||||
glow.classList.toggle('pulse', isDEA);
|
||||
});
|
||||
|
||||
// ── Active toggle button colors (smooth gradient) ──
|
||||
var btnBg = hsl(col, 1);
|
||||
var btnGlow = hsl(col, 0.3);
|
||||
document.querySelectorAll('[data-step="A3"] .opt.on').forEach(function (o) {
|
||||
o.style.background = btnBg;
|
||||
o.style.boxShadow = '0 0 12px ' + btnGlow;
|
||||
});
|
||||
document.querySelectorAll('[data-step="A3"] .opt:not(.on)').forEach(function (o) {
|
||||
o.style.background = '';
|
||||
o.style.boxShadow = '';
|
||||
});
|
||||
|
||||
// ── Derived panel theming ──
|
||||
var derived = document.querySelector('[data-step="A3"] .derived');
|
||||
if (derived) {
|
||||
derived.style.borderColor = hsl(col, 0.3);
|
||||
derived.style.background = 'linear-gradient(135deg, ' + hsl(col, 0.08) + ', rgba(19,26,42,.4))';
|
||||
}
|
||||
document.getElementById('dCode').style.color = hsl(col, 1);
|
||||
document.getElementById('dCode').style.textShadow = '0 0 14px ' + hsl(col, 0.4);
|
||||
|
||||
var peer = document.getElementById('dPeer');
|
||||
peer.style.background = hsl(col, 0.1);
|
||||
peer.style.borderColor = hsl(col, 0.25);
|
||||
peer.style.color = hsl(col, 0.9);
|
||||
|
||||
// ASM chip color
|
||||
var asmEl = document.getElementById('dAsm');
|
||||
if (c[2]) { asmEl.style.color = hsl(col, 1); asmEl.style.borderColor = hsl(col, 0.4); asmEl.style.textShadow = '0 0 6px ' + hsl(col, 0.3); }
|
||||
else { asmEl.style.color = ''; asmEl.style.borderColor = ''; asmEl.style.textShadow = ''; }
|
||||
|
||||
// rate step adapts
|
||||
document.getElementById('rateBox').style.display = isNBA ? 'none' : '';
|
||||
document.getElementById('rateNA').style.display = isNBA ? '' : 'none';
|
||||
}
|
||||
|
||||
// Axis toggle clicks (Tier A step 3)
|
||||
document.querySelectorAll('[data-step="A3"] .tog[data-axis]').forEach(function (g) {
|
||||
var axis = g.getAttribute('data-axis');
|
||||
g.querySelectorAll('.opt').forEach(function (o) {
|
||||
o.addEventListener('click', function () {
|
||||
g.querySelectorAll('.opt').forEach(function (x){ x.classList.remove('on'); });
|
||||
o.classList.add('on');
|
||||
sel[axis] = o.getAttribute('data-v');
|
||||
derive();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Rate chip clicks
|
||||
document.querySelectorAll('.rchip').forEach(function (r) {
|
||||
r.addEventListener('click', function () {
|
||||
document.querySelectorAll('.rchip').forEach(function (x){ x.classList.remove('on'); });
|
||||
r.classList.add('on');
|
||||
});
|
||||
});
|
||||
|
||||
/* ── Tier B: class derivation ── */
|
||||
var bSel = { mint:'permissionless', supply:'unlimited' };
|
||||
var BCLASS = {
|
||||
'permissionless|unlimited': ['PTU','Permissionless Token Unlimited'],
|
||||
'permissionless|limited': ['PTL','Permissionless Token Limited'],
|
||||
'managed|unlimited': ['MTU','Managed Token Unlimited'],
|
||||
'managed|limited': ['MTL','Managed Token Limited']
|
||||
};
|
||||
function deriveB() {
|
||||
var c = BCLASS[bSel.mint+'|'+bSel.supply];
|
||||
document.getElementById('bCode').textContent = c[0];
|
||||
document.getElementById('bName').textContent = c[1];
|
||||
document.getElementById('bAxes').textContent = 'NBA · '+bSel.mint+' · '+bSel.supply;
|
||||
}
|
||||
document.querySelectorAll('[data-step="B3"] .tog[data-axis]').forEach(function (g) {
|
||||
var axis = g.getAttribute('data-axis').replace('b-','');
|
||||
g.querySelectorAll('.opt').forEach(function (o) {
|
||||
o.addEventListener('click', function () {
|
||||
g.querySelectorAll('.opt').forEach(function (x){ x.classList.remove('on'); });
|
||||
o.classList.add('on');
|
||||
bSel[axis] = o.getAttribute('data-v');
|
||||
deriveB();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/* ── Fee mode toggle (flat / escalating) ── */
|
||||
var feeMode = 'flat';
|
||||
var escTrigger = 'supply';
|
||||
document.querySelectorAll('.fee-tog .opt').forEach(function (o) {
|
||||
o.addEventListener('click', function () {
|
||||
if (o.classList.contains('locked')) return; // premium gate
|
||||
document.querySelectorAll('.fee-tog .opt').forEach(function (x) { x.classList.remove('on'); });
|
||||
o.classList.add('on');
|
||||
feeMode = o.getAttribute('data-v');
|
||||
document.getElementById('feePanelFlat').style.display = feeMode === 'flat' ? '' : 'none';
|
||||
document.getElementById('feePanelEsc').style.display = feeMode === 'escalating' ? '' : 'none';
|
||||
updateEscFormula();
|
||||
});
|
||||
});
|
||||
|
||||
/* ── Trigger selector ── */
|
||||
document.querySelectorAll('.esc-trig').forEach(function (t) {
|
||||
t.addEventListener('click', function () {
|
||||
document.querySelectorAll('.esc-trig').forEach(function (x) { x.classList.remove('on'); });
|
||||
t.classList.add('on');
|
||||
escTrigger = t.getAttribute('data-t');
|
||||
document.getElementById('trigSupply').style.display = escTrigger === 'supply' ? '' : 'none';
|
||||
document.getElementById('trigTxcount').style.display = escTrigger === 'txcount' ? '' : 'none';
|
||||
document.getElementById('trigBlockheight').style.display = escTrigger === 'blockheight' ? '' : 'none';
|
||||
updateEscFormula();
|
||||
});
|
||||
});
|
||||
|
||||
/* ── Fee sliders ── */
|
||||
var feeSlider = document.getElementById('feeSlider');
|
||||
if (feeSlider) feeSlider.addEventListener('input', function () {
|
||||
document.getElementById('feeVal').textContent = feeSlider.value + '%';
|
||||
});
|
||||
|
||||
function updateEscFormula() {
|
||||
var base = document.getElementById('escBaseSlider').value;
|
||||
var cap = document.getElementById('escCapSlider').value;
|
||||
document.getElementById('escBaseVal').textContent = base + '%';
|
||||
document.getElementById('escCapVal').textContent = cap + '%';
|
||||
if (escTrigger === 'supply') {
|
||||
var step = document.getElementById('escSupplyStep').value;
|
||||
document.getElementById('escSupplyStepVal').textContent = '+' + step + '%';
|
||||
document.querySelector('#trigSupply .esc-formula').textContent = 'fee = ' + base + '% + (issued ÷ 1M) × ' + step + '% capped at ' + cap + '%';
|
||||
} else if (escTrigger === 'txcount') {
|
||||
var thresh = document.getElementById('escTxThresh').value;
|
||||
var txStep = document.getElementById('escTxStep').value;
|
||||
document.getElementById('escTxThreshVal').textContent = thresh;
|
||||
document.getElementById('escTxStepVal').textContent = '+' + txStep + '%';
|
||||
document.querySelector('#trigTxcount .esc-formula').textContent = 'fee = ' + base + '% + (txCount ÷ ' + thresh + ') × ' + txStep + '% capped at ' + cap + '%';
|
||||
} else {
|
||||
var blocks = document.getElementById('escBlockStep').value;
|
||||
var bFee = document.getElementById('escBlockFee').value;
|
||||
document.getElementById('escBlockStepVal').textContent = Number(blocks).toLocaleString();
|
||||
document.getElementById('escBlockFeeVal').textContent = '+' + bFee + '%';
|
||||
var days = Math.round(blocks / 144);
|
||||
var label = days < 30 ? '~' + days + 'd steps' : '~' + Math.round(days/30) + 'mo steps';
|
||||
document.querySelector('#trigBlockheight .esc-formula').textContent = 'fee = ' + base + '% + (elapsed ÷ ' + Number(blocks).toLocaleString() + ') × ' + bFee + '% (' + label + ', cap ' + cap + '%)';
|
||||
}
|
||||
}
|
||||
// Wire all escalation sliders
|
||||
['escBaseSlider','escCapSlider','escSupplyStep','escTxThresh','escTxStep','escBlockStep','escBlockFee'].forEach(function(id) {
|
||||
var el = document.getElementById(id);
|
||||
if (el) el.addEventListener('input', updateEscFormula);
|
||||
});
|
||||
|
||||
/* ── Review fill ── */
|
||||
function feeReviewText() {
|
||||
if (feeMode === 'flat') return feeSlider.value + '% (flat, immutable)';
|
||||
var base = document.getElementById('escBaseSlider').value;
|
||||
var cap = document.getElementById('escCapSlider').value;
|
||||
var labels = { supply: 'supply-based', txcount: 'tx-count', blockheight: 'block-height' };
|
||||
return base + '% → ' + cap + '% (' + labels[escTrigger] + ' escalation)';
|
||||
}
|
||||
function fillReview() {
|
||||
if (tier === 'A') {
|
||||
var c = curClass();
|
||||
document.getElementById('rvClass').textContent = c[0] + ' — ' + c[1];
|
||||
var on = document.querySelector('.rchip.on');
|
||||
document.getElementById('rvRate').textContent = sel.backing==='mba' ? (on ? on.textContent + ' sat / unit' : '—') : 'n/a (NBA · no peg)';
|
||||
document.getElementById('rvAxes').textContent = sel.mint + ' · ' + sel.supply;
|
||||
document.getElementById('rvFee').textContent = feeReviewText();
|
||||
} else {
|
||||
var bc = BCLASS[bSel.mint+'|'+bSel.supply];
|
||||
document.getElementById('rvBClass').textContent = bc[0] + ' — ' + bc[1];
|
||||
document.getElementById('rvBAxes').textContent = bSel.mint + ' · ' + bSel.supply;
|
||||
}
|
||||
}
|
||||
|
||||
var cInput = document.getElementById('createInputA');
|
||||
if (cInput) cInput.addEventListener('input', render);
|
||||
|
||||
derive(); deriveB(); render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
97
design/mockups/elevation.html
Normal file
97
design/mockups/elevation.html
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Elevation B→A · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); overflow:hidden; }
|
||||
.flow-head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
|
||||
.back { font-size:20px; color:var(--ink-soft); cursor:pointer; background:0; border:0; }
|
||||
.flow-title { font-family:var(--font-display); font-weight:500; font-size:21px; color:var(--ink-bright); }
|
||||
.flow-step { margin-left:auto; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }
|
||||
.lead { font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); line-height:1.6; margin:6px 2px 16px; }
|
||||
|
||||
/* B → A transition strip */
|
||||
.ba { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
|
||||
.ba .box { flex:1; text-align:center; padding:13px; border-radius:13px; background:var(--surface-1); border:1px solid var(--border-strong); }
|
||||
.ba .box .tag { font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
|
||||
.ba .box .big { font-family:var(--font-mono); font-size:18px; margin-top:5px; }
|
||||
.ba .box.b .big { color:var(--risk-warn); } .ba .box.a .big { color:var(--acid); text-shadow:0 0 8px var(--acid-halo); }
|
||||
.ba .arrow { color:var(--acid); font-size:18px; }
|
||||
|
||||
/* pre-flight integrity panel */
|
||||
.integ { background:var(--surface-1); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:14px; }
|
||||
.integ-h { font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
|
||||
.crow { display:flex; justify-content:space-between; padding:7px 0; font-family:var(--font-mono); font-size:11px; }
|
||||
.crow .k { color:var(--ink-soft); } .crow .v { color:#0ac18e; } .crow .v.warn { color:var(--risk-warn); }
|
||||
.divider { height:1px; background:var(--border); margin:8px 0; }
|
||||
.irrev { font-family:var(--font-mono); font-size:9px; color:var(--risk-warn); line-height:1.6; margin-top:6px; }
|
||||
|
||||
.keep { font-family:var(--font-mono); font-size:9px; color:var(--muted); line-height:1.6; margin:0 2px 16px; }
|
||||
.row-btns { display:flex; gap:12px; }
|
||||
.btn-ghost { flex:1; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:14px; border-radius:12px; background:transparent; color:var(--ink-soft); border:1px solid var(--border-strong); cursor:pointer; }
|
||||
.btn-acid { flex:2; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:14px; border-radius:12px; background:var(--acid); color:var(--sky-deep); border:0; cursor:pointer; box-shadow:0 0 16px var(--acid-halo); }
|
||||
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); } .tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
.tab.active .ico { color: var(--acid); } .tab:not(.active) .bch-b { opacity:.6; }
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; } .bch-b .bch-logo { width:100%; height:100%; } .bch-b.sm { width:28px; height:28px; }
|
||||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
<div class="phone">
|
||||
<div class="flow-head">
|
||||
<button class="back">←</button>
|
||||
<div class="flow-title">Elevation</div>
|
||||
<div class="flow-step">B → A</div>
|
||||
</div>
|
||||
<div class="lead">Promote your Tier-B definition to a consensus-enforced Tier-A CashTokens asset with the same identity. Integrity is checked before anything is signed (assertEscalationIntegrity, V2.7 §9).</div>
|
||||
|
||||
<div class="ba">
|
||||
<div class="box b"><div class="tag">before</div><div class="big">ZCoin [B]</div></div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="box a"><div class="tag">after</div><div class="big">DEA-Verified [A]</div></div>
|
||||
</div>
|
||||
|
||||
<div class="integ">
|
||||
<div class="integ-h">Pre-flight integrity — holder escalation</div>
|
||||
<div class="crow"><span class="k">bchSats per unit</span><span class="v">✓ match</span></div>
|
||||
<div class="crow"><span class="k">rate (10,000 sat / unit)</span><span class="v">✓ match</span></div>
|
||||
<div class="crow"><span class="k">pkh (your key)</span><span class="v">✓ match</span></div>
|
||||
<div class="crow"><span class="k">openMint (open)</span><span class="v">✓ match</span></div>
|
||||
<div class="crow"><span class="k">Canonical A contract</span><span class="v">✓ found on-chain</span></div>
|
||||
<div class="crow"><span class="k">Founder-fee parameters</span><span class="v">✓ match</span></div>
|
||||
<div class="divider"></div>
|
||||
<div class="irrev">⚠ Once escalated, this is irreversible — there is no downgrade path. Catches definition-poisoning (T-002): if your local B definition's rate / bchSats / pkh diverge from the on-chain contract, the flow refuses and prompts re-verification.</div>
|
||||
</div>
|
||||
|
||||
<div class="keep">After a successful escalation your Tier-B definition can be kept for historical reference or removed. Each holder escalates their own holdings — a founder deploying the contract is necessary but not sufficient.</div>
|
||||
|
||||
<div class="row-btns">
|
||||
<button class="btn-ghost">Cancel</button>
|
||||
<button class="btn-acid">Proceed — claim A FTs</button>
|
||||
</div>
|
||||
|
||||
<nav class="tabbar">
|
||||
<button class="tab"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab active"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab" id="fab">⇅</button>
|
||||
<button class="tab"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
<script>
|
||||
(function generateStars(){const c=document.getElementById('stars');if(!c)return;const n=window.innerWidth<700?100:180;const f=document.createDocumentFragment();for(let i=0;i<n;i++){const s=document.createElement('div');s.className='star';const r=Math.random();let sz,o,d;if(r<.78){sz=1+Math.random()*.4;o=.18+Math.random()*.22;d=14+Math.random()*8;}else if(r<.95){sz=1.4+Math.random()*.6;o=.32+Math.random()*.22;d=10+Math.random()*6;}else{sz=1.8+Math.random()*.8;o=.45+Math.random()*.25;d=8+Math.random()*5;}s.style.width=sz+'px';s.style.height=sz+'px';s.style.left=Math.random()*100+'%';s.style.top=Math.random()*100+'%';s.style.opacity=o;s.style.setProperty('--twinkle-duration',d+'s');s.style.setProperty('--twinkle-delay',(Math.random()*d)+'s');f.appendChild(s);}c.appendChild(f);})();
|
||||
(function(){var map={main:'main-tab.html',assets:'assets-tab.html',avalanche:'avalanche-tab.html',apps:'apps-tab.html'};document.querySelectorAll('.tabbar .tab').forEach(function(t){var el=t.querySelector('.lbl');if(!el)return;var d=map[el.textContent.trim().toLowerCase()];if(d){t.style.cursor='pointer';t.addEventListener('click',function(){location.href=d;});}});})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
155
design/mockups/fuse-flow.html
Normal file
155
design/mockups/fuse-flow.html
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · CashFusion · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); overflow:hidden; }
|
||||
.view { display:none; } .view.active { display:block; }
|
||||
|
||||
.flow-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
|
||||
.back { font-size:20px; color:var(--ink-soft); cursor:pointer; background:0; border:0; }
|
||||
.flow-title { font-family:var(--font-display); font-weight:500; font-size:21px; color:var(--ink-bright); }
|
||||
.flow-step { margin-left:auto; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }
|
||||
|
||||
.lead { font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); line-height:1.6; margin:0 2px 16px; }
|
||||
.sec-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:6px 2px 9px; }
|
||||
|
||||
/* privacy meter */
|
||||
.meter { background:var(--surface-1); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:16px; text-align:center; }
|
||||
.meter .lvl { font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--acid); text-shadow:0 0 8px var(--acid-halo); }
|
||||
.bar { height:6px; border-radius:3px; background:var(--surface-2); margin:12px 0 6px; overflow:hidden; }
|
||||
.bar > i { display:block; height:100%; width:62%; background:var(--acid); box-shadow:0 0 10px var(--acid-halo); }
|
||||
.meter .cap { font-family:var(--font-mono); font-size:9px; color:var(--muted); }
|
||||
|
||||
/* UTXO list */
|
||||
.card { background:var(--surface-1); border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-bottom:8px; }
|
||||
.utxo { display:flex; align-items:center; gap:12px; padding:13px 15px; border-bottom:1px solid var(--border); }
|
||||
.utxo:last-child { border-bottom:0; }
|
||||
.utxo .chk { width:18px; height:18px; flex:none; border-radius:5px; border:1px solid var(--border-strong); display:grid; place-items:center; font-size:11px; color:var(--sky-deep); }
|
||||
.utxo.on .chk { background:var(--acid); border-color:var(--acid); }
|
||||
.utxo.locked { opacity:.5; }
|
||||
.utxo .u-amt { font-family:var(--font-mono); font-size:13px; color:var(--ink-bright); }
|
||||
.utxo .u-sub { font-family:var(--font-mono); font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.utxo .tag { margin-left:auto; font-family:var(--font-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:6px; border:1px solid var(--border-strong); color:var(--ink-soft); }
|
||||
.utxo .tag.ft { color:var(--risk-warn); border-color:rgba(255,159,28,.4); }
|
||||
|
||||
.excl-note { font-family:var(--font-mono); font-size:9px; color:var(--risk-warn); line-height:1.55; margin:4px 2px 16px; }
|
||||
|
||||
.params { display:flex; gap:10px; margin-bottom:16px; }
|
||||
.param { flex:1; background:var(--surface-1); border:1px solid var(--border); border-radius:13px; padding:13px; text-align:center; }
|
||||
.param .v { font-family:var(--font-mono); font-size:16px; color:var(--ink-bright); }
|
||||
.param .k { font-family:var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
|
||||
|
||||
.auto { display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:13px; background:var(--surface-1); border:1px solid var(--border); margin-bottom:16px; font-family:var(--font-mono); font-size:11px; color:var(--ink); }
|
||||
.switch { width:38px; height:22px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border-strong); position:relative; flex:none; cursor:pointer; margin-left:auto; }
|
||||
.switch.on { background:var(--acid); border-color:var(--acid); box-shadow:0 0 10px var(--acid-halo); }
|
||||
.switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .25s; }
|
||||
.switch.on::after { transform:translateX(16px); background:var(--sky-deep); }
|
||||
|
||||
.cta { width:100%; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sky-deep); background:var(--acid); border:0; border-radius:12px; padding:15px; cursor:pointer; box-shadow:0 0 16px var(--acid-halo); }
|
||||
|
||||
/* progress */
|
||||
.prog-wrap { text-align:center; padding-top:30px; }
|
||||
.rounds { display:flex; justify-content:center; gap:9px; margin:22px 0; }
|
||||
.round { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; border:1px solid var(--border-strong); color:var(--muted); }
|
||||
.round.done { background:var(--acid); color:var(--sky-deep); border-color:var(--acid); box-shadow:0 0 10px var(--acid-halo); }
|
||||
.round.now { border-color:var(--acid); color:var(--acid); animation:pulse 1.2s ease-in-out infinite; }
|
||||
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 var(--acid-halo); } 50%{ box-shadow:0 0 12px var(--acid-glow); } }
|
||||
.prog-wrap .big { font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--ink-bright); }
|
||||
.prog-wrap .sub { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:10px; line-height:1.6; }
|
||||
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); } .tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
.tab.active .ico { color: var(--acid); } .tab:not(.active) .bch-b { opacity:.6; }
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; } .bch-b .bch-logo { width:100%; height:100%; } .bch-b.sm { width:28px; height:28px; }
|
||||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
<div class="phone">
|
||||
|
||||
<!-- CONFIG -->
|
||||
<section class="view active" id="v-config">
|
||||
<div class="flow-head">
|
||||
<button class="back" data-link="main">←</button>
|
||||
<div class="flow-title">CashFusion</div>
|
||||
<div class="flow-step">privacy</div>
|
||||
</div>
|
||||
<div class="lead">CoinJoin for Bitcoin Cash — your plain BCH is merged with other participants' coins across several rounds, breaking the chain-analysis link between your past and future history.</div>
|
||||
|
||||
<div class="meter">
|
||||
<div class="lvl">Privacy · Fair</div>
|
||||
<div class="bar"><i></i></div>
|
||||
<div class="cap">3 of your BCH UTXOs are still linkable to your address book</div>
|
||||
</div>
|
||||
|
||||
<div class="sec-label">Fuse these (plain BCH only)</div>
|
||||
<div class="card">
|
||||
<div class="utxo on"><span class="chk">✓</span><div><div class="u-amt">0.0220 BCH</div><div class="u-sub">received · 2h ago</div></div><span class="tag">plain</span></div>
|
||||
<div class="utxo on"><span class="chk">✓</span><div><div class="u-amt">0.0140 BCH</div><div class="u-sub">change · 4d ago</div></div><span class="tag">plain</span></div>
|
||||
<div class="utxo on"><span class="chk">✓</span><div><div class="u-amt">0.0040 BCH</div><div class="u-sub">change · 5d ago</div></div><span class="tag">plain</span></div>
|
||||
<div class="utxo locked"><span class="chk"></span><div><div class="u-amt">120 NOVA</div><div class="u-sub">DEA · backing inside UTXO</div></div><span class="tag ft">FT · excluded</span></div>
|
||||
</div>
|
||||
<div class="excl-note">⚠ Token (FT) UTXOs are never fused — spending one as a fusion input would burn the tokens inside it (Rule 4). Only plain BCH participates.</div>
|
||||
|
||||
<div class="params">
|
||||
<div class="param"><div class="v">8</div><div class="k">participants</div></div>
|
||||
<div class="param"><div class="v">3</div><div class="k">rounds</div></div>
|
||||
<div class="param"><div class="v">~900 sat</div><div class="k">fee est.</div></div>
|
||||
</div>
|
||||
|
||||
<div class="auto">Auto-fuse idle BCH in the background <span class="switch on"></span></div>
|
||||
|
||||
<button class="cta" data-go="progress">Fuse 0.0400 BCH</button>
|
||||
</section>
|
||||
|
||||
<!-- PROGRESS / RESULT -->
|
||||
<section class="view" id="v-progress">
|
||||
<div class="flow-head">
|
||||
<div class="flow-title">Fusing</div>
|
||||
<div class="flow-step">in progress</div>
|
||||
</div>
|
||||
<div class="prog-wrap">
|
||||
<div class="rounds">
|
||||
<div class="round done">1</div>
|
||||
<div class="round now">2</div>
|
||||
<div class="round">3</div>
|
||||
</div>
|
||||
<div class="big">Round 2 of 3</div>
|
||||
<div class="sub">Negotiating with 8 participants over encrypted relays.<br>You can leave this screen — fusion continues in the background.</div>
|
||||
</div>
|
||||
<div class="meter" style="margin-top:24px">
|
||||
<div class="lvl">Privacy → Strong</div>
|
||||
<div class="bar"><i style="width:88%"></i></div>
|
||||
<div class="cap">link to your prior history broken after this fusion</div>
|
||||
</div>
|
||||
<button class="cta" data-link="main" style="margin-top:8px">Done — run in background</button>
|
||||
</section>
|
||||
|
||||
<nav class="tabbar">
|
||||
<button class="tab active"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab" id="fab">⇅</button>
|
||||
<button class="tab"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
<script>
|
||||
(function generateStars(){const c=document.getElementById('stars');if(!c)return;const n=window.innerWidth<700?100:180;const f=document.createDocumentFragment();for(let i=0;i<n;i++){const s=document.createElement('div');s.className='star';const r=Math.random();let sz,o,d;if(r<.78){sz=1+Math.random()*.4;o=.18+Math.random()*.22;d=14+Math.random()*8;}else if(r<.95){sz=1.4+Math.random()*.6;o=.32+Math.random()*.22;d=10+Math.random()*6;}else{sz=1.8+Math.random()*.8;o=.45+Math.random()*.25;d=8+Math.random()*5;}s.style.width=sz+'px';s.style.height=sz+'px';s.style.left=Math.random()*100+'%';s.style.top=Math.random()*100+'%';s.style.opacity=o;s.style.setProperty('--twinkle-duration',d+'s');s.style.setProperty('--twinkle-delay',(Math.random()*d)+'s');f.appendChild(s);}c.appendChild(f);})();
|
||||
function showView(id){document.querySelectorAll('.view').forEach(function(v){v.classList.toggle('active',v.id==='v-'+id);});}
|
||||
document.querySelectorAll('[data-go]').forEach(function(el){el.addEventListener('click',function(){showView(el.getAttribute('data-go'));});});
|
||||
document.querySelectorAll('.utxo:not(.locked)').forEach(function(u){u.addEventListener('click',function(){u.classList.toggle('on');u.querySelector('.chk').textContent=u.classList.contains('on')?'✓':'';});});
|
||||
document.querySelectorAll('.switch').forEach(function(s){s.addEventListener('click',function(){s.classList.toggle('on');});});
|
||||
(function(){var map={main:'main-tab.html',assets:'assets-tab.html',avalanche:'avalanche-tab.html',apps:'apps-tab.html'};document.querySelectorAll('.tabbar .tab').forEach(function(t){var el=t.querySelector('.lbl');if(!el)return;var d=map[el.textContent.trim().toLowerCase()];if(d){t.style.cursor='pointer';t.addEventListener('click',function(){location.href=d;});}});document.querySelectorAll('[data-link="main"]').forEach(function(b){b.addEventListener('click',function(){location.href='main-tab.html';});});})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
243
design/mockups/main-tab.html
Normal file
243
design/mockups/main-tab.html
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Main · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); }
|
||||
|
||||
/* header / wordmark */
|
||||
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
|
||||
.wordmark { font-family: var(--font-display); font-weight:500; font-size:22px; color: var(--ink-bright); }
|
||||
.wordmark::after { content:""; display:inline-block; width:5px; height:5px; margin-left:6px; vertical-align:middle; transform:translateY(-3px); background: var(--acid); border-radius:50%; box-shadow:0 0 6px var(--acid-glow),0 0 14px var(--acid-halo); }
|
||||
.gear { font-size:18px; color: var(--muted); cursor:pointer; }
|
||||
|
||||
/* BCH "B" badge (Bitcoin Cash brand green, distinct from acid) */
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; }
|
||||
.bch-b .bch-logo { width:100%; height:100%; display:block; } /* official BCH logo (simple-icons) */
|
||||
.bch-b.lg { width:46px; height:46px; box-shadow:0 0 18px rgba(10,193,142,.35); }
|
||||
.bch-b.sm { width:28px; height:28px; }
|
||||
|
||||
/* portfolio donut */
|
||||
.portfolio { display:flex; align-items:center; gap:20px; margin-bottom:22px; }
|
||||
.donut { width:128px; height:128px; flex:none; border-radius:50%; position:relative; display:grid; place-items:center;
|
||||
background: conic-gradient(#0ac18e 0 55%, var(--acid) 55% 82%, #7f8cff 82% 100%); }
|
||||
.donut::before { content:""; position:absolute; width:96px; height:96px; border-radius:50%; background: var(--sky-deep); }
|
||||
/* soft even halo, off by default, on hover — a CSS blur (not SVG, so never clipped) */
|
||||
.donut::after { content:""; position:absolute; inset:-6px; border-radius:50%; z-index:-1;
|
||||
background: conic-gradient(#0ac18e 0 55%, var(--acid) 55% 82%, #7f8cff 82% 100%);
|
||||
filter: blur(9px); opacity:0; transition: opacity .4s; }
|
||||
.donut:hover::after { opacity:.75; }
|
||||
.d-center { position:relative; z-index:1; text-align:center; }
|
||||
.d-total { font-family: var(--font-mono); font-size:16px; color: var(--ink-bright); }
|
||||
.d-label { font-family: var(--font-mono); font-size:8px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin-top:3px; }
|
||||
.legend { flex:1; }
|
||||
.leg { display:flex; align-items:center; gap:9px; margin-bottom:11px; font-family: var(--font-mono); font-size:11px; color: var(--ink-soft); }
|
||||
.leg .sw { width:9px; height:9px; border-radius:3px; flex:none; }
|
||||
.leg .val { margin-left:auto; color: var(--ink); }
|
||||
.leg[data-fam] { cursor:pointer; border-radius:7px; transition: background .2s; }
|
||||
.leg[data-fam]:hover { background: rgba(255,255,255,.04); }
|
||||
/* MBA — only the dot is acid; text stays neutral. Glow on interaction only. */
|
||||
.leg .sw { transition: box-shadow .3s; }
|
||||
.leg.mba:hover .sw { box-shadow: 0 0 9px var(--acid-glow); }
|
||||
|
||||
/* BCH card */
|
||||
.bch-card { background: var(--surface-1); border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:18px; }
|
||||
.bch-head { display:flex; align-items:center; gap:13px; }
|
||||
.bch-meta { flex:1; }
|
||||
.bch-name { font-family: var(--font-display); font-weight:500; font-size:17px; color: var(--ink-bright); }
|
||||
.bch-fuel { font-family: var(--font-mono); font-size:9px; letter-spacing:.06em; color:#0ac18e; margin-top:3px; }
|
||||
.bch-bal { text-align:right; font-family: var(--font-mono); }
|
||||
.bch-bal .b { font-size:18px; color: var(--ink-bright); }
|
||||
.bch-bal .f { font-size:10px; color: var(--muted); margin-top:3px; }
|
||||
.bch-actions { display:flex; gap:10px; margin-top:15px; }
|
||||
.bch-actions .mini { flex:1; text-align:center; font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:11px; border-radius:10px; cursor:pointer; background:transparent; color: var(--ink-soft); border:1px solid var(--border-strong); }
|
||||
|
||||
.label-mono { font-family: var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color: var(--muted); }
|
||||
.label-row { display:flex; align-items:center; justify-content:space-between; margin: 6px 4px 11px; }
|
||||
|
||||
/* activity feed */
|
||||
.act { display:flex; align-items:center; gap:13px; padding:11px 4px; border-bottom:1px solid var(--border); }
|
||||
.act:last-child { border-bottom:0; }
|
||||
.act .ico { width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center; background: var(--surface-1); color: var(--ink-soft); font-size:14px; }
|
||||
.act .a-main { flex:1; }
|
||||
.act .a-title { font-family: var(--font-display); font-size:14px; color: var(--ink); }
|
||||
.act .a-sub { font-family: var(--font-mono); font-size:9px; color: var(--muted); margin-top:2px; }
|
||||
.act .a-amt { font-family: var(--font-mono); font-size:12px; color: var(--ink-bright); }
|
||||
.act .a-amt.in { color:#0ac18e; }
|
||||
|
||||
/* Recent feed filter — borderless mono labels, evenly spaced, all clickable */
|
||||
.flab { background:transparent; border:0; padding:0; cursor:pointer; font-family: var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--muted); transition: color .3s, text-shadow .3s; }
|
||||
.flab.active { color: var(--acid); text-shadow:0 0 8px var(--acid-halo); }
|
||||
|
||||
/* bottom bar + fab */
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); }
|
||||
.tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
/* selected tab = acid glow, universally (matches the central FAB) */
|
||||
.tab.active .ico { color: var(--acid); text-shadow: 0 0 10px var(--acid-glow), 0 0 20px var(--acid-halo); }
|
||||
.tab.active .lbl { color: var(--ink-bright); }
|
||||
.tab:not(.active) .bch-b { opacity:.6; }
|
||||
.tab.active .bch-b { box-shadow: 0 0 12px var(--acid-glow), 0 0 20px var(--acid-halo); }
|
||||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
|
||||
<div class="phone">
|
||||
<div class="topbar">
|
||||
<div class="wordmark">Deviant</div>
|
||||
<div class="gear">⚙</div>
|
||||
</div>
|
||||
|
||||
<!-- Portfolio donut -->
|
||||
<div class="portfolio">
|
||||
<div class="donut"><div class="d-center"><div class="d-total">0.0734</div><div class="d-label">BCH total</div></div></div>
|
||||
<div class="legend">
|
||||
<div class="leg" data-fam="bch"><span class="sw" style="background:#0ac18e"></span>Bitcoin Cash<span class="val">0.040</span></div>
|
||||
<div class="leg mba" data-fam="mba"><span class="sw" style="background:var(--acid)"></span>MBA · backed<span class="val">0.020</span></div>
|
||||
<div class="leg" data-fam="token"><span class="sw" style="background:#7f8cff"></span>NBA · non-backed<span class="val">0.013</span></div>
|
||||
<div class="leg" style="color:var(--muted);font-size:9px;margin-top:2px;">~ $48.21 · tap to toggle fiat</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BCH card: its own card (Rule 4 — asset + fuel) -->
|
||||
<div class="bch-card">
|
||||
<div class="bch-head">
|
||||
<span class="bch-b lg"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span>
|
||||
<div class="bch-meta">
|
||||
<div class="bch-name">Bitcoin Cash</div>
|
||||
<div class="bch-fuel">● fuel OK — covers network fees</div>
|
||||
</div>
|
||||
<div class="bch-bal"><div class="b">0.0400 BCH</div><div class="f">~ $26.28</div></div>
|
||||
</div>
|
||||
<div class="bch-actions">
|
||||
<button class="mini">Send</button>
|
||||
<button class="mini">Receive</button>
|
||||
<button class="mini">Activity</button>
|
||||
<button class="mini" id="fuseBtn">Fuse</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent activity -->
|
||||
<div class="label-row">
|
||||
<button class="flab active" data-fam="all">Recent</button>
|
||||
<button class="flab" data-fam="mba">MBA</button>
|
||||
<button class="flab" data-fam="token">NBA</button>
|
||||
<button class="flab" data-link="all">View all</button>
|
||||
</div>
|
||||
|
||||
<div class="act" data-fam="bch">
|
||||
<div class="ico">↓</div>
|
||||
<div class="a-main"><div class="a-title">Received</div><div class="a-sub">from bchtest:qz9…k4f · 2h ago</div></div>
|
||||
<div class="a-amt in">+0.010 BCH</div>
|
||||
</div>
|
||||
<div class="act" data-fam="mba">
|
||||
<div class="ico">⇄</div>
|
||||
<div class="a-main"><div class="a-title">Orbital swap</div><div class="a-sub">50 NOVA → 0.005 BCH · ASM · 1d</div></div>
|
||||
<div class="a-amt">atomic</div>
|
||||
</div>
|
||||
<div class="act" data-fam="mba">
|
||||
<div class="ico">↓</div>
|
||||
<div class="a-main"><div class="a-title">Claimed</div><div class="a-sub">Nova reservoir · DEA · 2d</div></div>
|
||||
<div class="a-amt in">+120 NOVA</div>
|
||||
</div>
|
||||
<div class="act" data-fam="mba">
|
||||
<div class="ico">↑</div>
|
||||
<div class="a-main"><div class="a-title">Sent</div><div class="a-sub">to bchtest:qp2…7lm · 4d</div></div>
|
||||
<div class="a-amt">−5 LMN</div>
|
||||
</div>
|
||||
<div class="act" data-fam="token">
|
||||
<div class="ico">↑</div>
|
||||
<div class="a-main"><div class="a-title">Sent</div><div class="a-sub">Meridian · MTU · 5d</div></div>
|
||||
<div class="a-amt">−100 MRD</div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM BAR -->
|
||||
<nav class="tabbar">
|
||||
<button class="tab active"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab" id="fab" aria-label="Send, receive, or scan">⇅</button>
|
||||
<button class="tab"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function generateStars() {
|
||||
const c = document.getElementById('stars'); if (!c) return;
|
||||
const count = window.innerWidth < 700 ? 140 : 260;
|
||||
const frag = document.createDocumentFragment();
|
||||
for (let i = 0; i < count; i++) {
|
||||
const s = document.createElement('div'); s.className = 'star';
|
||||
const roll = Math.random(); let size, opacity, dur;
|
||||
if (roll < 0.72) { size = 1 + Math.random()*0.7; opacity = 0.32 + Math.random()*0.25; dur = 14 + Math.random()*8; }
|
||||
else if (roll < 0.93) { size = 1.6 + Math.random()*0.8; opacity = 0.52 + Math.random()*0.26; dur = 10 + Math.random()*6; }
|
||||
else { size = 2.2 + Math.random()*1.1; opacity = 0.74 + Math.random()*0.26; dur = 8 + Math.random()*5; }
|
||||
s.style.width = size+'px'; s.style.height = size+'px';
|
||||
s.style.left = Math.random()*100+'%'; s.style.top = Math.random()*100+'%';
|
||||
s.style.opacity = opacity; s.style.setProperty('--twinkle-duration', dur+'s'); s.style.setProperty('--twinkle-delay', (Math.random()*dur)+'s');
|
||||
frag.appendChild(s);
|
||||
}
|
||||
c.appendChild(frag);
|
||||
})();
|
||||
|
||||
// Feed filter shared by the Recent labels and the donut segments
|
||||
function filterFeed(fam) {
|
||||
document.querySelectorAll('.flab[data-fam]').forEach(function (x) {
|
||||
x.classList.toggle('active', x.getAttribute('data-fam') === fam);
|
||||
});
|
||||
document.querySelectorAll('.act').forEach(function (r) {
|
||||
r.style.display = (fam === 'all' || r.getAttribute('data-fam') === fam) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
document.querySelectorAll('.flab[data-fam]').forEach(function (b) {
|
||||
b.addEventListener('click', function () { filterFeed(b.getAttribute('data-fam')); });
|
||||
});
|
||||
// Legend rows: click → show that family's transactions
|
||||
document.querySelectorAll('.leg[data-fam]').forEach(function (l) {
|
||||
l.addEventListener('click', function () { filterFeed(l.getAttribute('data-fam')); });
|
||||
});
|
||||
// View all → reset to the full feed (and would open the Activity screen)
|
||||
document.querySelectorAll('.flab[data-link]').forEach(function (l) {
|
||||
l.addEventListener('click', function () { filterFeed('all'); });
|
||||
});
|
||||
|
||||
// Mouse parallax — the starfield drifts with the cursor (à la bch.guru)
|
||||
(function parallax() {
|
||||
var layer = document.getElementById('stars');
|
||||
if (!layer || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
window.addEventListener('mousemove', function (e) {
|
||||
var x = e.clientX / window.innerWidth - 0.5;
|
||||
var y = e.clientY / window.innerHeight - 0.5;
|
||||
layer.style.transform = 'translate(' + (-x * 28) + 'px,' + (-y * 28) + 'px)';
|
||||
});
|
||||
})();
|
||||
// Bottom-bar navigation between mockup screens
|
||||
(function () {
|
||||
var map = { main:'main-tab.html', assets:'assets-tab.html', avalanche:'avalanche-tab.html', apps:'apps-tab.html' };
|
||||
document.querySelectorAll('.tabbar .tab').forEach(function (t) {
|
||||
var el = t.querySelector('.lbl'); if (!el) return;
|
||||
var dest = map[el.textContent.trim().toLowerCase()];
|
||||
if (dest && !t.classList.contains('active')) {
|
||||
t.style.cursor = 'pointer';
|
||||
t.addEventListener('click', function () { location.href = dest; });
|
||||
}
|
||||
});
|
||||
var gear = document.querySelector('.gear'); if (gear) { gear.style.cursor = 'pointer'; gear.addEventListener('click', function () { location.href = 'settings.html'; }); }
|
||||
var fab = document.getElementById('fab'); if (fab) fab.addEventListener('click', function () { location.href = 'send-flow.html'; });
|
||||
var va = document.querySelector('.flab[data-link="all"]'); if (va) va.addEventListener('click', function () { location.href = 'activity.html'; });
|
||||
var bchSend = document.querySelector('.bch-actions .mini'); if (bchSend) bchSend.addEventListener('click', function () { location.href = 'send-flow.html'; });
|
||||
var fuseBtn = document.getElementById('fuseBtn'); if (fuseBtn) fuseBtn.addEventListener('click', function () { location.href = 'fuse-flow.html'; });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
107
design/mockups/onboarding.html
Normal file
107
design/mockups/onboarding.html
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Onboarding · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:30px 22px; backdrop-filter: blur(2px); overflow:hidden; display:flex; flex-direction:column; }
|
||||
.view { display:none; flex:1; flex-direction:column; } .view.active { display:flex; }
|
||||
|
||||
.wordmark { font-family:var(--font-display); font-weight:500; font-size:30px; color:var(--ink-bright); text-align:center; margin-top:30px; }
|
||||
.wordmark::after { content:""; display:inline-block; width:8px; height:8px; margin-left:8px; vertical-align:middle; transform:translateY(-6px); background:var(--acid); border-radius:50%; box-shadow:0 0 8px var(--acid-glow),0 0 18px var(--acid-halo); }
|
||||
.tagline { font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); text-align:center; margin-top:14px; line-height:1.7; }
|
||||
|
||||
.ill { width:150px; height:150px; margin:40px auto 10px; border-radius:50%; background:conic-gradient(#0ac18e 0 55%, var(--acid) 55% 82%, #7f8cff 82% 100%); position:relative; display:grid; place-items:center; }
|
||||
.ill::before { content:""; position:absolute; width:112px; height:112px; border-radius:50%; background:var(--sky-deep); }
|
||||
.ill span { position:relative; z-index:1; font-family:var(--font-mono); font-size:13px; color:var(--ink-bright); }
|
||||
|
||||
.h { font-family:var(--font-display); font-weight:500; font-size:21px; color:var(--ink-bright); margin-bottom:12px; }
|
||||
.p { font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); line-height:1.75; margin-bottom:14px; }
|
||||
.callout { padding:14px; border-radius:13px; background:var(--acid-dim); border:1px solid rgba(214,255,61,.3); font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); line-height:1.65; margin-bottom:14px; }
|
||||
.callout b { color:var(--acid); }
|
||||
|
||||
/* seed grid */
|
||||
.seed { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 14px; }
|
||||
.word { font-family:var(--font-mono); font-size:11px; color:var(--ink); background:var(--surface-1); border:1px solid var(--border); border-radius:9px; padding:9px 11px; }
|
||||
.word .n { color:var(--muted); margin-right:7px; }
|
||||
.seed-warn { font-family:var(--font-mono); font-size:9px; color:var(--risk-warn); line-height:1.6; margin-bottom:14px; }
|
||||
|
||||
.spacer { flex:1; }
|
||||
.cta { width:100%; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sky-deep); background:var(--acid); border:0; border-radius:12px; padding:15px; cursor:pointer; box-shadow:0 0 16px var(--acid-halo); }
|
||||
.ghost { width:100%; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); background:transparent; border:1px solid var(--border-strong); border-radius:12px; padding:14px; cursor:pointer; margin-top:10px; }
|
||||
.dots { display:flex; gap:6px; justify-content:center; margin-bottom:16px; }
|
||||
.dot { width:7px; height:7px; border-radius:50%; background:var(--surface-2); }
|
||||
.dot.on { background:var(--acid); box-shadow:0 0 8px var(--acid-halo); }
|
||||
.net { display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-radius:12px; background:var(--surface-1); border:1px solid var(--border); margin-bottom:10px; font-family:var(--font-mono); font-size:12px; color:var(--ink); }
|
||||
.net.sel { border-color:var(--acid); } .net .ok { color:#0ac18e; font-size:10px; } .net .rec { color:var(--muted); font-size:9px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
<div class="phone">
|
||||
|
||||
<!-- WELCOME -->
|
||||
<section class="view active" id="v-welcome">
|
||||
<div class="wordmark">Deviant</div>
|
||||
<div class="tagline">A Bitcoin Cash wallet for backed assets<br>that the chain — not a custodian — enforces.</div>
|
||||
<div class="ill"><span>BCH · MBA · NBA</span></div>
|
||||
<div class="spacer"></div>
|
||||
<button class="cta" data-go="concept">Create wallet</button>
|
||||
<button class="ghost" data-go="concept">Restore from seed</button>
|
||||
</section>
|
||||
|
||||
<!-- CONCEPT INTRO -->
|
||||
<section class="view" id="v-concept">
|
||||
<div class="dots"><span class="dot on"></span><span class="dot"></span><span class="dot"></span></div>
|
||||
<div class="h">Before you start</div>
|
||||
<div class="callout"><b>BCH is the fuel.</b> Every transaction needs a small plain-BCH input for the network fee. The wallet keeps you above that floor and warns before a send can fail.</div>
|
||||
<div class="p"><b style="color:var(--ink-bright)">Two tiers.</b> <b style="color:var(--ink-bright)">A</b> = a native CashTokens asset validated by miners at consensus level. <b style="color:var(--ink-bright)">B</b> = plain BCH your wallet displays through a local definition — for closed, trusting groups only.</div>
|
||||
<div class="p">Deviant ships <b style="color:var(--ink-bright)">no default registries and no trusted keys</b> — you are the authority (ADR-0008).</div>
|
||||
<div class="spacer"></div>
|
||||
<button class="cta" data-go="seed">Got it — create my seed</button>
|
||||
</section>
|
||||
|
||||
<!-- SEED BACKUP -->
|
||||
<section class="view" id="v-seed">
|
||||
<div class="dots"><span class="dot"></span><span class="dot on"></span><span class="dot"></span></div>
|
||||
<div class="h">Back up your seed</div>
|
||||
<div class="p">24 words. Write them down in order. This is the only way to recover your wallet.</div>
|
||||
<div class="seed">
|
||||
<div class="word"><span class="n">1</span>orbit</div><div class="word"><span class="n">2</span>spectral</div>
|
||||
<div class="word"><span class="n">3</span>ledger</div><div class="word"><span class="n">4</span>nova</div>
|
||||
<div class="word"><span class="n">5</span>canyon</div><div class="word"><span class="n">6</span>fathom</div>
|
||||
<div class="word"><span class="n">7</span>ember</div><div class="word"><span class="n">8</span>quartz</div>
|
||||
<div class="word"><span class="n">9</span>tidal</div><div class="word"><span class="n">10</span>verge</div>
|
||||
<div class="word"><span class="n">11</span>cinder</div><div class="word"><span class="n">12</span>… +12</div>
|
||||
</div>
|
||||
<div class="seed-warn">⚠ No screenshot. The Create flow will not land on Home until you confirm a random subset of these words.</div>
|
||||
<div class="spacer"></div>
|
||||
<button class="cta" data-go="network">I've written them down</button>
|
||||
</section>
|
||||
|
||||
<!-- NETWORK + LAND -->
|
||||
<section class="view" id="v-network">
|
||||
<div class="dots"><span class="dot"></span><span class="dot"></span><span class="dot on"></span></div>
|
||||
<div class="h">Choose a network</div>
|
||||
<div class="net sel"><span>Chipnet <span class="rec">· recommended during development</span></span><span class="ok">● selected</span></div>
|
||||
<div class="net"><span>Testnet4</span><span>›</span></div>
|
||||
<div class="net"><span>Mainnet <span class="rec">· real funds</span></span><span>›</span></div>
|
||||
<div class="callout" style="margin-top:14px">On Home: <b>BCH lives in its own card</b> — it's also the fuel for every other action. Get some before sending tokens.</div>
|
||||
<div class="spacer"></div>
|
||||
<button class="cta" data-go="welcome">Enter wallet →</button>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
(function generateStars(){const c=document.getElementById('stars');if(!c)return;const n=window.innerWidth<700?120:200;const f=document.createDocumentFragment();for(let i=0;i<n;i++){const s=document.createElement('div');s.className='star';const r=Math.random();let sz,o,d;if(r<.75){sz=1+Math.random()*.6;o=.28+Math.random()*.24;d=14+Math.random()*8;}else if(r<.94){sz=1.5+Math.random()*.7;o=.5+Math.random()*.25;d=10+Math.random()*6;}else{sz=2+Math.random()*1;o=.7+Math.random()*.26;d=8+Math.random()*5;}s.style.width=sz+'px';s.style.height=sz+'px';s.style.left=Math.random()*100+'%';s.style.top=Math.random()*100+'%';s.style.opacity=o;s.style.setProperty('--twinkle-duration',d+'s');s.style.setProperty('--twinkle-delay',(Math.random()*d)+'s');f.appendChild(s);}c.appendChild(f);})();
|
||||
function showView(id){document.querySelectorAll('.view').forEach(function(v){v.classList.toggle('active',v.id==='v-'+id);});}
|
||||
document.querySelectorAll('[data-go]').forEach(function(el){el.addEventListener('click',function(){ if(el.getAttribute('data-go')==='welcome'){location.href='main-tab.html';return;} showView(el.getAttribute('data-go'));});});
|
||||
(function parallax(){var l=document.getElementById('stars');if(!l||window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;window.addEventListener('mousemove',function(e){var x=e.clientX/window.innerWidth-.5,y=e.clientY/window.innerHeight-.5;l.style.transform='translate('+(-x*28)+'px,'+(-y*28)+'px)';});})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
296
design/mockups/send-flow.html
Normal file
296
design/mockups/send-flow.html
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Send / Receive / Scan · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); overflow:hidden; }
|
||||
|
||||
/* flow header */
|
||||
.flow-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
|
||||
.back { font-size:20px; color:var(--ink-soft); cursor:pointer; background:0; border:0; line-height:1; }
|
||||
.flow-title { font-family:var(--font-display); font-weight:500; font-size:21px; color:var(--ink-bright); }
|
||||
.flow-step { margin-left:auto; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }
|
||||
|
||||
/* views */
|
||||
.view { display:none; }
|
||||
.view.active { display:block; }
|
||||
|
||||
/* FAB quick-action sheet */
|
||||
.qa-grab { width:38px; height:4px; border-radius:2px; background:var(--border-strong); margin:2px auto 22px; }
|
||||
.qa-title { font-family:var(--font-display); font-weight:500; font-size:23px; color:var(--ink-bright); margin-bottom:4px; }
|
||||
.qa-sub { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-bottom:22px; }
|
||||
.qa { display:flex; align-items:center; gap:15px; padding:17px 16px; border-radius:16px; background:var(--surface-1); border:1px solid var(--border); margin-bottom:12px; cursor:pointer; transition:border-color .25s, transform .25s var(--ease-out); }
|
||||
.qa:hover { border-color:var(--acid); transform:translateY(-2px); }
|
||||
.qa .g { width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center; font-size:21px; background:var(--surface-2); color:var(--acid); }
|
||||
.qa .t { font-family:var(--font-display); font-weight:500; font-size:17px; color:var(--ink-bright); }
|
||||
.qa .s { font-family:var(--font-mono); font-size:9.5px; color:var(--muted); margin-top:3px; }
|
||||
|
||||
/* form fields */
|
||||
.field { margin-bottom:16px; }
|
||||
.flabel { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 2px 8px; display:block; }
|
||||
.input { width:100%; background:var(--surface-1); border:1px solid var(--border-strong); border-radius:12px; padding:13px 14px; color:var(--ink-bright); font-family:var(--font-mono); font-size:13px; }
|
||||
.input::placeholder { color:var(--muted); }
|
||||
.hint { font-family:var(--font-mono); font-size:9px; margin:7px 2px 0; line-height:1.5; }
|
||||
.hint.ok { color:#0ac18e; } .hint.warn { color:var(--risk-warn); }
|
||||
|
||||
/* asset chip selector */
|
||||
.asset-pick { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:12px; background:var(--surface-1); border:1px solid var(--border-strong); cursor:pointer; }
|
||||
.asset-pick .ac { width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
|
||||
.asset-pick .an { font-family:var(--font-display); font-weight:500; font-size:15px; color:var(--ink-bright); }
|
||||
.asset-pick .as { font-family:var(--font-mono); font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.asset-pick .chev { margin-left:auto; color:var(--muted); }
|
||||
|
||||
.chip { font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:6px; border:1px solid var(--border-strong); color:var(--ink-soft); display:inline-block; }
|
||||
.chip.b { color:var(--risk-warn); border-color:var(--risk-warn); }
|
||||
.chip.warn { color:var(--risk-warn); border-color:rgba(255,159,28,.4); }
|
||||
|
||||
/* primary action */
|
||||
.cta { width:100%; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sky-deep); background:var(--acid); border:0; border-radius:12px; padding:15px; cursor:pointer; box-shadow:0 0 16px var(--acid-halo); margin-top:6px; }
|
||||
.cta.disabled { background:var(--surface-2); color:var(--muted); box-shadow:none; cursor:not-allowed; }
|
||||
|
||||
/* review rows */
|
||||
.rev-block { background:var(--surface-1); border:1px solid var(--border); border-radius:16px; padding:15px; margin-bottom:14px; }
|
||||
.rev-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11px; }
|
||||
.rev-row:last-child { border-bottom:0; }
|
||||
.rev-row .k { color:var(--muted); } .rev-row .v { color:var(--ink); text-align:right; }
|
||||
.rev-note { font-family:var(--font-mono); font-size:9px; color:var(--muted); line-height:1.55; margin-top:8px; }
|
||||
.sec-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 2px 9px; }
|
||||
|
||||
/* D-5 raw-BCH co-display */
|
||||
.d5 { display:flex; align-items:baseline; justify-content:center; gap:10px; padding:14px; border-radius:14px; background:rgba(255,159,28,.06); border:1px solid rgba(255,159,28,.25); margin-bottom:14px; }
|
||||
.d5 .tok { font-family:var(--font-mono); font-size:18px; color:var(--ink-bright); }
|
||||
.d5 .eq { color:var(--risk-warn); font-family:var(--font-mono); font-size:13px; }
|
||||
.d5 .raw { font-family:var(--font-mono); font-size:14px; color:var(--risk-warn); }
|
||||
|
||||
/* friction ladder */
|
||||
.ladder { background:var(--surface-1); border:1px solid rgba(255,159,28,.35); border-radius:16px; padding:15px; margin-bottom:14px; }
|
||||
.ladder .lh { font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--risk-warn); margin-bottom:10px; }
|
||||
.lstep { display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); line-height:1.5; }
|
||||
.lstep .n { color:var(--risk-warn); flex:none; }
|
||||
.lstep.done .n { color:#0ac18e; }
|
||||
.lstep.pending { color:var(--muted); }
|
||||
.delay { display:flex; align-items:center; gap:9px; margin-top:6px; font-family:var(--font-mono); font-size:10px; color:var(--risk-warn); }
|
||||
.delay .ring { width:15px; height:15px; border-radius:50%; border:2px solid var(--risk-warn); border-top-color:transparent; animation:spin 1s linear infinite; }
|
||||
@keyframes spin { to { transform:rotate(360deg); } }
|
||||
|
||||
/* receive / scan */
|
||||
.qr { width:188px; height:188px; margin:6px auto 18px; border-radius:18px; background:
|
||||
repeating-linear-gradient(0deg, var(--ink-bright) 0 7px, transparent 7px 14px),
|
||||
repeating-linear-gradient(90deg, var(--ink-bright) 0 7px, transparent 7px 14px);
|
||||
background-color:#fff; background-blend-mode:multiply; opacity:.92; }
|
||||
.addr-box { font-family:var(--font-mono); font-size:11px; color:var(--ink); background:var(--surface-1); border:1px solid var(--border); border-radius:12px; padding:13px; text-align:center; word-break:break-all; margin-bottom:14px; }
|
||||
.row-btns { display:flex; gap:10px; }
|
||||
.row-btns .ghost { flex:1; text-align:center; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:13px; border-radius:11px; cursor:pointer; background:transparent; color:var(--ink-soft); border:1px solid var(--border-strong); }
|
||||
.scan-frame { position:relative; width:230px; height:230px; margin:14px auto 18px; border-radius:22px; background:var(--surface-2); display:grid; place-items:center; overflow:hidden; }
|
||||
.scan-frame .corner { position:absolute; width:34px; height:34px; border:3px solid var(--acid); box-shadow:0 0 12px var(--acid-halo); }
|
||||
.scan-frame .tl { top:14px; left:14px; border-right:0; border-bottom:0; border-radius:8px 0 0 0; }
|
||||
.scan-frame .tr { top:14px; right:14px; border-left:0; border-bottom:0; border-radius:0 8px 0 0; }
|
||||
.scan-frame .bl { bottom:14px; left:14px; border-right:0; border-top:0; border-radius:0 0 0 8px; }
|
||||
.scan-frame .br { bottom:14px; right:14px; border-left:0; border-top:0; border-radius:0 0 8px 0; }
|
||||
.scan-frame .laser { position:absolute; left:18px; right:18px; height:2px; background:var(--acid); box-shadow:0 0 10px var(--acid-glow); animation:scan 2.4s ease-in-out infinite; }
|
||||
@keyframes scan { 0%,100%{ top:24px; } 50%{ top:206px; } }
|
||||
.scan-frame .ico { font-size:34px; color:var(--muted); }
|
||||
|
||||
/* bottom bar + fab */
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); }
|
||||
.tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
.tab.active .ico { color: var(--acid); text-shadow: 0 0 10px var(--acid-glow), 0 0 20px var(--acid-halo); }
|
||||
.tab.active .lbl { color: var(--ink-bright); }
|
||||
.tab:not(.active) .bch-b { opacity:.6; }
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; }
|
||||
.bch-b .bch-logo { width:100%; height:100%; display:block; }
|
||||
.bch-b.sm { width:28px; height:28px; }
|
||||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||||
.fab.active { transform:rotate(45deg); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
|
||||
<div class="phone">
|
||||
|
||||
<!-- ============ FAB quick-action sheet ============ -->
|
||||
<section class="view active" id="v-actions">
|
||||
<div class="qa-grab"></div>
|
||||
<div class="qa-title">Quick actions</div>
|
||||
<div class="qa-sub">Send / Receive stay verbs — not destinations.</div>
|
||||
<div class="qa" data-go="send"><div class="g">↑</div><div><div class="t">Send</div><div class="s">Pay BCH or an asset to an address</div></div></div>
|
||||
<div class="qa" data-go="receive"><div class="g">↓</div><div><div class="t">Receive</div><div class="s">Show your address / QR</div></div></div>
|
||||
<div class="qa" data-go="scan"><div class="g">⌗</div><div><div class="t">Scan QR</div><div class="s">Read an address, payment or definition</div></div></div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SEND — recipient + amount ============ -->
|
||||
<section class="view" id="v-send">
|
||||
<div class="flow-head">
|
||||
<button class="back" data-go="actions">←</button>
|
||||
<div class="flow-title">Send</div>
|
||||
<div class="flow-step">1 / 2 · details</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<span class="flabel">Asset</span>
|
||||
<div class="asset-pick" data-go="send">
|
||||
<div class="ac">ZC</div>
|
||||
<div><div class="an">ZCoin <span class="chip b">B</span></div><div class="as">wallet-convention token · unverified definition</div></div>
|
||||
<div class="chev">⌄</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<span class="flabel">Recipient</span>
|
||||
<input class="input" value="bchtest:qz9f8s2m4k…d0k4f" spellcheck="false">
|
||||
<div class="hint warn">⚠ Token-aware: a legacy (non-token) address may render this FT invisible to the recipient.</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<span class="flabel">Amount</span>
|
||||
<input class="input" value="100 ZC">
|
||||
<div class="hint ok">● fuel OK — plain BCH covers the ~2,000 sat network fee ✓</div>
|
||||
</div>
|
||||
|
||||
<button class="cta" data-go="review">Review →</button>
|
||||
</section>
|
||||
|
||||
<!-- ============ SEND — review (Tier B, >1 BCH → full friction ladder) ============ -->
|
||||
<section class="view" id="v-review">
|
||||
<div class="flow-head">
|
||||
<button class="back" data-go="send">←</button>
|
||||
<div class="flow-title">Review send</div>
|
||||
<div class="flow-step">2 / 2 · confirm</div>
|
||||
</div>
|
||||
|
||||
<!-- D-5 mandatory raw-BCH co-display (V2.7 §14) -->
|
||||
<div class="d5">
|
||||
<span class="tok">100 ZC</span>
|
||||
<span class="eq">≡</span>
|
||||
<span class="raw">1,000,000 sat</span>
|
||||
</div>
|
||||
|
||||
<div class="rev-block">
|
||||
<div class="rev-row"><span class="k">Network fee (plain BCH ✓)</span><span class="v">~2,000 sat</span></div>
|
||||
<div class="rev-row"><span class="k">Moves with the asset</span><span class="v">1,000,000 sat (dust 675)</span></div>
|
||||
<div class="rev-row"><span class="k">Fee inputs</span><span class="v">plain BCH ✓ · Rule 4</span></div>
|
||||
<div class="rev-note">Tier B is a wallet-convention token. The chain sees only BCH — the recipient's wallet needs the ZCoin definition (ADR-0010) to display it, or they just see plain BCH. <span style="color:var(--acid);cursor:pointer">[ Share definition ]</span></div>
|
||||
</div>
|
||||
|
||||
<!-- ADR-0013 graduated friction ladder (>1 BCH band) -->
|
||||
<div class="ladder">
|
||||
<div class="lh">⚠ Unsigned B-token send · 1,000,000 sat → > 1 BCH band</div>
|
||||
<div class="lstep done"><span class="n">✓</span><span>D-4 raw-BCH shown · D-5 confirmation shown</span></div>
|
||||
<div class="lstep done"><span class="n">✓</span><span>Typed the BCH amount in literal sats <span class="chip">1000000</span></span></div>
|
||||
<div class="lstep done"><span class="n">✓</span><span>Acknowledged unverified transfer</span></div>
|
||||
<div class="lstep"><span class="n">○</span><span>Type the issuer label or <span class="chip warn">UNVERIFIED</span> to release</span></div>
|
||||
<input class="input" placeholder="type UNVERIFIED" style="margin-top:8px">
|
||||
<div class="delay"><span class="ring"></span> Broadcast unlocks in 10s — deliberate friction for > 1 BCH</div>
|
||||
</div>
|
||||
<div class="rev-note" style="margin:0 2px 12px">Thresholds tunable in Settings → Security. There is no amount above which the send becomes impossible — you are the authority (ADR-0008).</div>
|
||||
|
||||
<button class="cta disabled">Confirm & broadcast</button>
|
||||
</section>
|
||||
|
||||
<!-- ============ RECEIVE ============ -->
|
||||
<section class="view" id="v-receive">
|
||||
<div class="flow-head">
|
||||
<button class="back" data-go="actions">←</button>
|
||||
<div class="flow-title">Receive</div>
|
||||
<div class="flow-step">BCH · chipnet</div>
|
||||
</div>
|
||||
<div class="qr" role="img" aria-label="QR code"></div>
|
||||
<div class="addr-box">bchtest:qpm4r7x2v9k8h3n6t0sd5wq…7lm</div>
|
||||
<div class="row-btns">
|
||||
<button class="ghost">Copy</button>
|
||||
<button class="ghost">Share</button>
|
||||
<button class="ghost">Request amount</button>
|
||||
</div>
|
||||
<div class="rev-note" style="text-align:center;margin-top:16px">To receive a Tier-A token, any address works — your wallet detects the FT on-chain. For a Tier-B token the sender must also share its definition.</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SCAN ============ -->
|
||||
<section class="view" id="v-scan">
|
||||
<div class="flow-head">
|
||||
<button class="back" data-go="actions">←</button>
|
||||
<div class="flow-title">Scan QR</div>
|
||||
<div class="flow-step">camera</div>
|
||||
</div>
|
||||
<div class="scan-frame">
|
||||
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||
<span class="laser"></span>
|
||||
<span class="ico">⌗</span>
|
||||
</div>
|
||||
<div class="rev-note" style="text-align:center">Point at an address, a payment request, or a Tier-B token definition (ADR-0010).</div>
|
||||
<div class="row-btns" style="margin-top:16px">
|
||||
<button class="ghost">Paste from clipboard</button>
|
||||
<button class="ghost">Upload image</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BOTTOM BAR -->
|
||||
<nav class="tabbar">
|
||||
<button class="tab"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab active" id="fab" data-go="actions" aria-label="Send, receive, or scan">⇅</button>
|
||||
<button class="tab"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function generateStars() {
|
||||
const c = document.getElementById('stars'); if (!c) return;
|
||||
const count = window.innerWidth < 700 ? 140 : 260;
|
||||
const frag = document.createDocumentFragment();
|
||||
for (let i = 0; i < count; i++) {
|
||||
const s = document.createElement('div'); s.className = 'star';
|
||||
const roll = Math.random(); let size, opacity, dur;
|
||||
if (roll < 0.72) { size = 1 + Math.random()*0.7; opacity = 0.32 + Math.random()*0.25; dur = 14 + Math.random()*8; }
|
||||
else if (roll < 0.93) { size = 1.6 + Math.random()*0.8; opacity = 0.52 + Math.random()*0.26; dur = 10 + Math.random()*6; }
|
||||
else { size = 2.2 + Math.random()*1.1; opacity = 0.74 + Math.random()*0.26; dur = 8 + Math.random()*5; }
|
||||
s.style.width = size+'px'; s.style.height = size+'px';
|
||||
s.style.left = Math.random()*100+'%'; s.style.top = Math.random()*100+'%';
|
||||
s.style.opacity = opacity; s.style.setProperty('--twinkle-duration', dur+'s'); s.style.setProperty('--twinkle-delay', (Math.random()*dur)+'s');
|
||||
frag.appendChild(s);
|
||||
}
|
||||
c.appendChild(frag);
|
||||
})();
|
||||
|
||||
// View switcher (FAB → Send/Receive/Scan; Send → Review; back arrows)
|
||||
function showView(id) {
|
||||
document.querySelectorAll('.view').forEach(function (v) { v.classList.toggle('active', v.id === 'v-' + id); });
|
||||
var fab = document.getElementById('fab');
|
||||
if (fab) fab.classList.toggle('active', id === 'actions');
|
||||
}
|
||||
document.querySelectorAll('[data-go]').forEach(function (el) {
|
||||
el.addEventListener('click', function () { showView(el.getAttribute('data-go')); });
|
||||
});
|
||||
|
||||
// Mouse parallax
|
||||
(function parallax() {
|
||||
var layer = document.getElementById('stars');
|
||||
if (!layer || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
window.addEventListener('mousemove', function (e) {
|
||||
var x = e.clientX / window.innerWidth - 0.5, y = e.clientY / window.innerHeight - 0.5;
|
||||
layer.style.transform = 'translate(' + (-x * 28) + 'px,' + (-y * 28) + 'px)';
|
||||
});
|
||||
})();
|
||||
|
||||
// Bottom-bar navigation between mockup screens
|
||||
(function () {
|
||||
var map = { main:'main-tab.html', assets:'assets-tab.html', avalanche:'avalanche-tab.html', apps:'apps-tab.html' };
|
||||
document.querySelectorAll('.tabbar .tab').forEach(function (t) {
|
||||
var el = t.querySelector('.lbl'); if (!el) return;
|
||||
var dest = map[el.textContent.trim().toLowerCase()];
|
||||
if (dest) { t.style.cursor = 'pointer'; t.addEventListener('click', function () { location.href = dest; }); }
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
175
design/mockups/settings.html
Normal file
175
design/mockups/settings.html
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Settings · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); overflow:hidden; }
|
||||
|
||||
.flow-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
|
||||
.back { font-size:20px; color:var(--ink-soft); cursor:pointer; background:0; border:0; line-height:1; }
|
||||
.flow-title { font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--ink-bright); }
|
||||
|
||||
.group { margin-bottom:22px; }
|
||||
.group-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 4px 9px; }
|
||||
.card { background:var(--surface-1); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
|
||||
.srow { display:flex; align-items:center; gap:13px; padding:14px 15px; border-bottom:1px solid var(--border); cursor:pointer; }
|
||||
.srow:last-child { border-bottom:0; }
|
||||
.srow .si { width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; font-size:14px; background:var(--surface-2); color:var(--ink-soft); }
|
||||
.srow .st { font-family:var(--font-display); font-size:14.5px; color:var(--ink-bright); }
|
||||
.srow .ss { font-family:var(--font-mono); font-size:9px; color:var(--muted); margin-top:2px; line-height:1.4; }
|
||||
.srow .sv { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
|
||||
.srow .chev { color:var(--muted); }
|
||||
.ok { color:#0ac18e; }
|
||||
.pill { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:6px; border:1px solid var(--border-strong); color:var(--ink-soft); }
|
||||
.pill.acid { color:var(--acid); border-color:rgba(214,255,61,.4); }
|
||||
|
||||
/* toggle switch */
|
||||
.switch { width:38px; height:22px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border-strong); position:relative; flex:none; cursor:pointer; transition:background .25s; }
|
||||
.switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .25s, background .25s; }
|
||||
.switch.on { background:var(--acid); border-color:var(--acid); box-shadow:0 0 10px var(--acid-halo); }
|
||||
.switch.on::after { transform:translateX(16px); background:var(--sky-deep); }
|
||||
|
||||
/* empty-state callout (ADR-0008 honest posture) */
|
||||
.empty { padding:15px; border-radius:14px; background:rgba(214,255,61,.05); border:1px dashed rgba(214,255,61,.3); font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); line-height:1.6; }
|
||||
.empty b { color:var(--ink-bright); }
|
||||
.add { margin-top:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--acid); cursor:pointer; }
|
||||
|
||||
/* friction-threshold readout */
|
||||
.thr { padding:13px 15px; font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); line-height:1.7; border-top:1px solid var(--border); }
|
||||
.thr .t { color:var(--risk-warn); }
|
||||
|
||||
/* tabbar */
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); } .tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
.tab.active .ico { color: var(--acid); text-shadow: 0 0 10px var(--acid-glow), 0 0 20px var(--acid-halo); } .tab.active .lbl { color: var(--ink-bright); }
|
||||
.tab:not(.active) .bch-b { opacity:.6; }
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; } .bch-b .bch-logo { width:100%; height:100%; display:block; } .bch-b.sm { width:28px; height:28px; }
|
||||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||||
|
||||
.scroll { max-height:720px; overflow-y:auto; margin:0 -4px; padding:0 4px; }
|
||||
.scroll::-webkit-scrollbar { width:0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
|
||||
<div class="phone">
|
||||
<div class="flow-head">
|
||||
<button class="back" data-link="main">←</button>
|
||||
<div class="flow-title">Settings</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll">
|
||||
<!-- SECURITY -->
|
||||
<div class="group">
|
||||
<div class="group-label">Security</div>
|
||||
<div class="card">
|
||||
<div class="srow"><div class="si">🌱</div><div><div class="st">Seed backup</div><div class="ss">24 words · confirm-backup complete</div></div><div class="sv"><span class="ok">✓ backed up</span></div></div>
|
||||
<div class="srow"><div class="si">⌘</div><div><div class="st">PIN / biometric</div><div class="ss">Unlock & signing</div></div><div class="sv"><span class="pill">Face ID</span><span class="chev">›</span></div></div>
|
||||
<div class="srow"><div class="si">⚠</div><div><div class="st">Send friction thresholds</div><div class="ss">Unsigned B-token send ladder (ADR-0013)</div></div><div class="sv"><span class="chev">›</span></div></div>
|
||||
<div class="thr">
|
||||
<div>< 100,000 sat — <span class="t">D-4 + D-5 baseline</span></div>
|
||||
<div>100k – 0.1 BCH — <span class="t">+ type sats</span></div>
|
||||
<div>0.1 – 1 BCH — <span class="t">+ acknowledge</span></div>
|
||||
<div>> 1 BCH — <span class="t">+ 10s delay + type UNVERIFIED</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PRIVACY -->
|
||||
<div class="group">
|
||||
<div class="group-label">Privacy</div>
|
||||
<div class="card">
|
||||
<div class="srow"><div class="si">⊜</div><div><div class="st">CashFusion</div><div class="ss">BCH CoinJoin — break chain-analysis links</div></div><div class="sv"><span class="switch on" id="fuseSw"></span></div></div>
|
||||
<div class="srow"><div class="si">⟲</div><div><div class="st">Auto-fuse idle BCH</div><div class="ss">Fuse plain BCH UTXOs in the background</div></div><div class="sv"><span class="switch" id="autoSw"></span></div></div>
|
||||
</div>
|
||||
<div class="empty" style="margin-top:9px">Also available as a <b>Fuse</b> action on the BCH card. Only plain BCH is fused — token (FT) UTXOs are never touched (fusing one would burn the tokens, Rule 4).</div>
|
||||
</div>
|
||||
|
||||
<!-- NETWORK -->
|
||||
<div class="group">
|
||||
<div class="group-label">Network</div>
|
||||
<div class="card">
|
||||
<div class="srow"><div class="si">◉</div><div><div class="st">Chipnet</div><div class="ss">Recommended while the wallet is in active development</div></div><div class="sv"><span class="ok">● selected</span></div></div>
|
||||
<div class="srow"><div class="si">○</div><div><div class="st">Testnet4</div></div><div class="sv"><span class="chev">›</span></div></div>
|
||||
<div class="srow"><div class="si">○</div><div><div class="st">Mainnet</div><div class="ss">Real funds</div></div><div class="sv"><span class="chev">›</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- REGISTRIES -->
|
||||
<div class="group">
|
||||
<div class="group-label">Registries · Trusted keys</div>
|
||||
<div class="empty">
|
||||
Deviant ships <b>no default registries</b> and <b>no default trusted keys</b> (ADR-0008). The wallet never becomes the authority — add your own when ready. Tier-B definitions are unverified until you root them in a key you trust.
|
||||
<div class="add">+ Add registry · + Add trusted key</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ADDRESS BOOK -->
|
||||
<div class="group">
|
||||
<div class="group-label">Address book</div>
|
||||
<div class="card">
|
||||
<div class="srow"><div class="si">A</div><div><div class="st">Alice (cold)</div><div class="ss">bchtest:qz9…k4f</div></div><div class="sv"><span class="chev">›</span></div></div>
|
||||
<div class="srow"><div class="si">+</div><div><div class="st">Add address</div></div><div class="sv"><span class="chev">›</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ABOUT -->
|
||||
<div class="group">
|
||||
<div class="group-label">About</div>
|
||||
<div class="card">
|
||||
<div class="srow"><div class="si">ⓘ</div><div><div class="st">Version</div><div class="ss">Deviant 0.1.0 · spec V2.7</div></div><div class="sv"><span class="chev">›</span></div></div>
|
||||
<div class="srow"><div class="si">⌥</div><div><div class="st">Tier explainer</div><div class="ss">A chain-enforced · B wallet-convention</div></div><div class="sv"><span class="chev">›</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM BAR -->
|
||||
<nav class="tabbar">
|
||||
<button class="tab"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab" id="fab" aria-label="Send, receive, or scan">⇅</button>
|
||||
<button class="tab"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function generateStars() {
|
||||
const c = document.getElementById('stars'); if (!c) return;
|
||||
const count = window.innerWidth < 700 ? 100 : 180;
|
||||
const frag = document.createDocumentFragment();
|
||||
for (let i = 0; i < count; i++) {
|
||||
const s = document.createElement('div'); s.className = 'star';
|
||||
const roll = Math.random(); let size, opacity, dur;
|
||||
if (roll < 0.78) { size = 1 + Math.random()*0.4; opacity = 0.18 + Math.random()*0.22; dur = 14 + Math.random()*8; }
|
||||
else if (roll < 0.95) { size = 1.4 + Math.random()*0.6; opacity = 0.32 + Math.random()*0.22; dur = 10 + Math.random()*6; }
|
||||
else { size = 1.8 + Math.random()*0.8; opacity = 0.45 + Math.random()*0.25; dur = 8 + Math.random()*5; }
|
||||
s.style.width = size+'px'; s.style.height = size+'px';
|
||||
s.style.left = Math.random()*100+'%'; s.style.top = Math.random()*100+'%';
|
||||
s.style.opacity = opacity; s.style.setProperty('--twinkle-duration', dur+'s'); s.style.setProperty('--twinkle-delay', (Math.random()*dur)+'s');
|
||||
frag.appendChild(s);
|
||||
}
|
||||
c.appendChild(frag);
|
||||
})();
|
||||
document.querySelectorAll('.switch').forEach(function (s) { s.addEventListener('click', function () { s.classList.toggle('on'); }); });
|
||||
(function () {
|
||||
var map = { main:'main-tab.html', assets:'assets-tab.html', avalanche:'avalanche-tab.html', apps:'apps-tab.html' };
|
||||
document.querySelectorAll('.tabbar .tab').forEach(function (t) {
|
||||
var el = t.querySelector('.lbl'); if (!el) return;
|
||||
var dest = map[el.textContent.trim().toLowerCase()];
|
||||
if (dest) { t.style.cursor='pointer'; t.addEventListener('click', function () { location.href = dest; }); }
|
||||
});
|
||||
document.querySelectorAll('[data-link="main"]').forEach(function (b) { b.addEventListener('click', function () { location.href='main-tab.html'; }); });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
203
design/mockups/swap-flow.html
Normal file
203
design/mockups/swap-flow.html
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant · Orbital swap · CosmoGenesis mockup</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||||
<style>
|
||||
body { display:flex; justify-content:center; padding:28px 0; }
|
||||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); overflow:hidden; }
|
||||
|
||||
.flow-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
|
||||
.back { font-size:20px; color:var(--ink-soft); cursor:pointer; background:0; border:0; line-height:1; }
|
||||
.flow-title { font-family:var(--font-display); font-weight:500; font-size:21px; color:var(--ink-bright); }
|
||||
.flow-step { margin-left:auto; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }
|
||||
|
||||
.view { display:none; } .view.active { display:block; }
|
||||
|
||||
/* persistent path indicator */
|
||||
.path { display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:12px; margin-bottom:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; }
|
||||
.path.asm { background:var(--acid-dim); border:1px solid rgba(214,255,61,.4); color:var(--acid); text-shadow:0 0 8px var(--acid-halo); }
|
||||
.path.routed { background:rgba(255,159,28,.07); border:1px solid rgba(255,159,28,.35); color:var(--risk-warn); }
|
||||
.path .lead { font-size:13px; }
|
||||
.path .desc { color:var(--ink-soft); font-size:9.5px; margin-left:auto; text-shadow:none; }
|
||||
|
||||
/* asset leg cards (From / To) */
|
||||
.leg { background:var(--surface-1); border:1px solid var(--border-strong); border-radius:16px; padding:15px; }
|
||||
.leg .lr { display:flex; align-items:center; gap:12px; }
|
||||
.leg .ac { width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--surface-2); font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); }
|
||||
.leg.bch .ac { background:#0ac18e22; }
|
||||
.leg .an { font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--ink-bright); }
|
||||
.leg .as { font-family:var(--font-mono); font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.leg .chev { margin-left:auto; color:var(--muted); cursor:pointer; }
|
||||
.leg .amt { font-family:var(--font-mono); font-size:22px; color:var(--ink-bright); margin-top:12px; }
|
||||
.leg .sub { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:4px; }
|
||||
.swap-mid { display:grid; place-items:center; margin:-9px 0; position:relative; z-index:2; }
|
||||
.swap-mid button { width:38px; height:38px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-strong); color:var(--acid); cursor:pointer; font-size:16px; }
|
||||
|
||||
.chip { font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:6px; border:1px solid var(--border-strong); color:var(--ink-soft); display:inline-block; }
|
||||
.chip.dea { color:var(--acid); border-color:rgba(214,255,61,.4); }
|
||||
|
||||
.cta { width:100%; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sky-deep); background:var(--acid); border:0; border-radius:12px; padding:15px; cursor:pointer; box-shadow:0 0 16px var(--acid-halo); margin-top:18px; }
|
||||
|
||||
.rev-block { background:var(--surface-1); border:1px solid var(--border); border-radius:16px; padding:15px; margin-bottom:14px; }
|
||||
.rev-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11px; }
|
||||
.rev-row:last-child { border-bottom:0; }
|
||||
.rev-row .k { color:var(--muted); } .rev-row .v { color:var(--ink); text-align:right; }
|
||||
.rev-row .v.free { color:#0ac18e; }
|
||||
.rev-note { font-family:var(--font-mono); font-size:9px; color:var(--muted); line-height:1.55; margin-top:8px; }
|
||||
.sec-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:2px 2px 9px; }
|
||||
|
||||
/* result */
|
||||
.result-wrap { text-align:center; padding-top:26px; }
|
||||
.tick { width:84px; height:84px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; font-size:40px; color:var(--sky-deep); background:var(--acid); box-shadow:0 0 24px var(--acid-glow),0 0 48px var(--acid-halo); }
|
||||
.result-wrap .big { font-family:var(--font-display); font-weight:500; font-size:24px; color:var(--ink-bright); }
|
||||
.atomic { display:inline-block; margin-top:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--acid); text-shadow:0 0 8px var(--acid-halo); padding:6px 12px; border:1px solid rgba(214,255,61,.4); border-radius:20px; }
|
||||
.result-wrap .txid { font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); margin-top:22px; word-break:break-all; }
|
||||
.result-wrap .ex { font-family:var(--font-mono); font-size:10px; color:var(--acid); margin-top:10px; cursor:pointer; }
|
||||
|
||||
/* tabbar */
|
||||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||||
.tab .ico { font-size:17px; color: var(--muted); } .tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||||
.tab.active .ico { color: var(--acid); text-shadow: 0 0 10px var(--acid-glow), 0 0 20px var(--acid-halo); } .tab.active .lbl { color: var(--ink-bright); }
|
||||
.tab:not(.active) .bch-b { opacity:.6; }
|
||||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; } .bch-b .bch-logo { width:100%; height:100%; display:block; } .bch-b.sm { width:28px; height:28px; }
|
||||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
|
||||
<div class="phone">
|
||||
|
||||
<!-- ============ BUILDER ============ -->
|
||||
<section class="view active" id="v-builder">
|
||||
<div class="flow-head">
|
||||
<button class="back" data-go="builder">←</button>
|
||||
<div class="flow-title">Orbital swap</div>
|
||||
<div class="flow-step">builder</div>
|
||||
</div>
|
||||
|
||||
<div class="path asm"><span class="lead">✓</span> ASM <span class="desc">atomic · counterparty-free (V2.7 §6)</span></div>
|
||||
|
||||
<div class="leg">
|
||||
<div class="lr">
|
||||
<div class="ac">NV</div>
|
||||
<div><div class="an">Nova <span class="chip dea">DEA-Verified</span></div><div class="as">PNV 1,200,000 sat · permissionless · unlimited</div></div>
|
||||
<div class="chev">⌄</div>
|
||||
</div>
|
||||
<div class="amt">120 NOVA</div>
|
||||
<div class="sub">from · balance 340 NOVA</div>
|
||||
</div>
|
||||
|
||||
<div class="swap-mid"><button>⇅</button></div>
|
||||
|
||||
<div class="leg bch">
|
||||
<div class="lr">
|
||||
<div class="ac"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="M14.5 9.5c-.3-1.2-1.5-1.6-3-1.4l-.5-2-1.2.3.5 2-1 .25-.5-2-1.2.3.5 2-2 .5.3 1.3s.9-.25.9-.23c.5-.13.7.12.8.36l1.4 5.4c0 .16-.05.42-.4.5 0 0-.9.23-.9.23l.13 1.5s2.1-.55 2.4-.62l.5 2 1.2-.3-.5-2 1-.24.5 2 1.2-.3-.5-2c2-.45 3.2-1.6 2.9-3.4-.17-1-1.3-1.9-2.3-2 .6-.5.9-1.3.5-2.3zm-1.4 4.6c.24 1.8-2.2 1.9-3 2.1l-.7-2.6c.8-.2 3.3-.6 3.7.5zm-.5-3.4c.25 1.5-1.8 1.7-2.5 1.9l-.6-2.4c.7-.17 2.6-1 3.1.5z"/></svg></span></div>
|
||||
<div><div class="an">Bitcoin Cash</div><div class="as">first-class asset · the fuel for the fee</div></div>
|
||||
<div class="chev">⌄</div>
|
||||
</div>
|
||||
<div class="amt">≈ 0.0120 BCH</div>
|
||||
<div class="sub">to · redeem at rate · est. before fees</div>
|
||||
</div>
|
||||
|
||||
<div class="rev-note" style="margin:14px 2px 0">Both sides are ASM-eligible, so the swap is one atomic on-chain transaction — no third party, no leg can fail independently. BCH fuel covers the ~3,000 sat network fee ✓</div>
|
||||
|
||||
<button class="cta" data-go="quote">Get quote →</button>
|
||||
</section>
|
||||
|
||||
<!-- ============ QUOTE ============ -->
|
||||
<section class="view" id="v-quote">
|
||||
<div class="flow-head">
|
||||
<button class="back" data-go="builder">←</button>
|
||||
<div class="flow-title">Swap quote</div>
|
||||
<div class="flow-step">review</div>
|
||||
</div>
|
||||
|
||||
<div class="path asm"><span class="lead">✓</span> ASM <span class="desc">redeem source + mint target · 1 tx</span></div>
|
||||
|
||||
<div class="rev-block">
|
||||
<div class="rev-row"><span class="k">You send</span><span class="v">120 NOVA</span></div>
|
||||
<div class="rev-row"><span class="k">You receive</span><span class="v">0.01194 BCH</span></div>
|
||||
<div class="rev-row"><span class="k">Redeem source (P2PKH spend)</span><span class="v free">no fee · V2.7 §4.2</span></div>
|
||||
<div class="rev-row"><span class="k">Mint-side founder fee (feeBps 0.5%)</span><span class="v">6,000 sat</span></div>
|
||||
<div class="rev-row"><span class="k">BCH network fee</span><span class="v">~3,000 sat</span></div>
|
||||
<div class="rev-row"><span class="k">Rounding to target decimals</span><span class="v">−42 sat</span></div>
|
||||
</div>
|
||||
<div class="rev-note" style="margin:0 2px 16px">A protocol swap is <b>redeem source + mint target</b>. The only founder fee is the target's mint-side <span class="chip">feeBps</span> — the redeem side has no fee (self-backed UTXO, no contract path). Rounding is shown as its own line, never absorbed silently.</div>
|
||||
|
||||
<button class="cta" data-go="result">Confirm swap</button>
|
||||
</section>
|
||||
|
||||
<!-- ============ RESULT ============ -->
|
||||
<section class="view" id="v-result">
|
||||
<div class="flow-head">
|
||||
<div class="flow-title">Swap complete</div>
|
||||
<div class="flow-step">result</div>
|
||||
</div>
|
||||
<div class="result-wrap">
|
||||
<div class="tick">✓</div>
|
||||
<div class="big">120 NOVA → 0.01194 BCH</div>
|
||||
<div class="atomic">atomic · 1 transaction</div>
|
||||
<div class="txid">txid e7c1a9…4f0b2d</div>
|
||||
<div class="ex">View on explorer ↗</div>
|
||||
<div class="rev-note" style="margin-top:24px">Counterparty-free: both legs settled in a single on-chain transaction. Nothing was handed to a third party.</div>
|
||||
</div>
|
||||
<button class="cta" data-go="builder">Done</button>
|
||||
</section>
|
||||
|
||||
<!-- BOTTOM BAR -->
|
||||
<nav class="tabbar">
|
||||
<button class="tab"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||||
<button class="tab"><span class="ico">⬡</span><span class="lbl">Assets</span></button>
|
||||
<button class="fab" id="fab" aria-label="Send, receive, or scan">⇅</button>
|
||||
<button class="tab"><span class="ico">△</span><span class="lbl">Avalanche</span></button>
|
||||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function generateStars() {
|
||||
const c = document.getElementById('stars'); if (!c) return;
|
||||
const count = window.innerWidth < 700 ? 140 : 260;
|
||||
const frag = document.createDocumentFragment();
|
||||
for (let i = 0; i < count; i++) {
|
||||
const s = document.createElement('div'); s.className = 'star';
|
||||
const roll = Math.random(); let size, opacity, dur;
|
||||
if (roll < 0.72) { size = 1 + Math.random()*0.7; opacity = 0.32 + Math.random()*0.25; dur = 14 + Math.random()*8; }
|
||||
else if (roll < 0.93) { size = 1.6 + Math.random()*0.8; opacity = 0.52 + Math.random()*0.26; dur = 10 + Math.random()*6; }
|
||||
else { size = 2.2 + Math.random()*1.1; opacity = 0.74 + Math.random()*0.26; dur = 8 + Math.random()*5; }
|
||||
s.style.width = size+'px'; s.style.height = size+'px';
|
||||
s.style.left = Math.random()*100+'%'; s.style.top = Math.random()*100+'%';
|
||||
s.style.opacity = opacity; s.style.setProperty('--twinkle-duration', dur+'s'); s.style.setProperty('--twinkle-delay', (Math.random()*dur)+'s');
|
||||
frag.appendChild(s);
|
||||
}
|
||||
c.appendChild(frag);
|
||||
})();
|
||||
function showView(id) { document.querySelectorAll('.view').forEach(function (v) { v.classList.toggle('active', v.id === 'v-' + id); }); }
|
||||
document.querySelectorAll('[data-go]').forEach(function (el) { el.addEventListener('click', function () { showView(el.getAttribute('data-go')); }); });
|
||||
(function parallax() {
|
||||
var layer = document.getElementById('stars');
|
||||
if (!layer || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
window.addEventListener('mousemove', function (e) {
|
||||
var x = e.clientX / window.innerWidth - 0.5, y = e.clientY / window.innerHeight - 0.5;
|
||||
layer.style.transform = 'translate(' + (-x * 28) + 'px,' + (-y * 28) + 'px)';
|
||||
});
|
||||
})();
|
||||
(function () {
|
||||
var map = { main:'main-tab.html', assets:'assets-tab.html', avalanche:'avalanche-tab.html', apps:'apps-tab.html' };
|
||||
document.querySelectorAll('.tabbar .tab').forEach(function (t) {
|
||||
var el = t.querySelector('.lbl'); if (!el) return;
|
||||
var dest = map[el.textContent.trim().toLowerCase()];
|
||||
if (dest) { t.style.cursor = 'pointer'; t.addEventListener('click', function () { location.href = dest; }); }
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
76
design/starfield.ts
Normal file
76
design/starfield.ts
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* CosmoGenesis starfield generator.
|
||||
*
|
||||
* Ported verbatim from the project's website (deviant_website.html) — the same
|
||||
* distribution (78% tiny/faint, 17% mid, 5% bright) and twinkle timing, so the
|
||||
* wallet's sky matches the project's own surface exactly.
|
||||
*
|
||||
* Usage (any shell): render `<div class="stars" aria-hidden="true" ref={ref} />`
|
||||
* then call generateStars(ref.current). Respects prefers-reduced-motion via CSS.
|
||||
*/
|
||||
|
||||
export interface StarfieldOptions {
|
||||
/** Star count on wide viewports. Mobile (<700px) uses ~55% of this. */
|
||||
count?: number;
|
||||
}
|
||||
|
||||
export function generateStars(
|
||||
container: HTMLElement | null,
|
||||
opts: StarfieldOptions = {},
|
||||
): void {
|
||||
if (!container) return;
|
||||
container.replaceChildren(); // idempotent: clear before repopulating
|
||||
|
||||
const wide = typeof window !== 'undefined' ? window.innerWidth >= 700 : true;
|
||||
const count = opts.count ?? (wide ? 260 : 140);
|
||||
const frag = document.createDocumentFragment();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const s = document.createElement('div');
|
||||
s.className = 'star';
|
||||
|
||||
// Most stars are tiny and faint; a few are larger/brighter.
|
||||
const roll = Math.random();
|
||||
let size: number, opacity: number, twinkleDur: number;
|
||||
if (roll < 0.72) {
|
||||
size = 1 + Math.random() * 0.7;
|
||||
opacity = 0.32 + Math.random() * 0.25;
|
||||
twinkleDur = 14 + Math.random() * 8;
|
||||
} else if (roll < 0.93) {
|
||||
size = 1.6 + Math.random() * 0.8;
|
||||
opacity = 0.52 + Math.random() * 0.26;
|
||||
twinkleDur = 10 + Math.random() * 6;
|
||||
} else {
|
||||
size = 2.2 + Math.random() * 1.1;
|
||||
opacity = 0.74 + Math.random() * 0.26;
|
||||
twinkleDur = 8 + Math.random() * 5;
|
||||
}
|
||||
|
||||
s.style.width = `${size}px`;
|
||||
s.style.height = `${size}px`;
|
||||
s.style.left = `${Math.random() * 100}%`;
|
||||
s.style.top = `${Math.random() * 100}%`;
|
||||
s.style.opacity = String(opacity);
|
||||
s.style.setProperty('--twinkle-duration', `${twinkleDur}s`);
|
||||
s.style.setProperty('--twinkle-delay', `${Math.random() * twinkleDur}s`);
|
||||
|
||||
frag.appendChild(s);
|
||||
}
|
||||
container.appendChild(frag);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mouse-parallax: the starfield layer drifts opposite the cursor (à la bch.guru).
|
||||
* Respects prefers-reduced-motion. `strength` is the max px drift on each axis.
|
||||
*/
|
||||
export function enableParallax(layer: HTMLElement | null, strength = 28): () => void {
|
||||
if (!layer || typeof window === 'undefined') return () => {};
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return () => {};
|
||||
const onMove = (e: MouseEvent) => {
|
||||
const x = e.clientX / window.innerWidth - 0.5;
|
||||
const y = e.clientY / window.innerHeight - 0.5;
|
||||
layer.style.transform = `translate(${-x * strength}px, ${-y * strength}px)`;
|
||||
};
|
||||
window.addEventListener('mousemove', onMove);
|
||||
return () => window.removeEventListener('mousemove', onMove);
|
||||
}
|
||||
82
snapshots/0053-cosmogenesis-wallet-ui-four-tab-shell-ri.md
Normal file
82
snapshots/0053-cosmogenesis-wallet-ui-four-tab-shell-ri.md
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
# Snapshot 0053: cosmogenesis wallet ui — four-tab shell, risk scale, dual-protocol apps
|
||||
|
||||
_Captured 2026-05-25T17:54:12.827Z_
|
||||
|
||||
## Git state
|
||||
|
||||
- Rev: `(no git)`
|
||||
- Working tree: clean
|
||||
|
||||
## File counts
|
||||
|
||||
| Area | Files |
|
||||
|---|---|
|
||||
| src/ | 52 |
|
||||
| contracts/ | 31 |
|
||||
| test/ | 42 |
|
||||
|
||||
## Notes
|
||||
|
||||
**Design-only session** — no `src/`, `contracts/`, or `test/` changes; the wallet UI was
|
||||
designed as live HTML mockups + a design system. Formalised in **ADR-0026**.
|
||||
|
||||
### What shipped
|
||||
|
||||
- **CosmoGenesis design system** (`design/`) — extracted verbatim from the project's own
|
||||
website (`Knowledgebase/08_historical_drafts/deviant_website.html`):
|
||||
- `design/cosmo-genesis.css` — tokens (dark "sky" gradient, white starfield, acid-lime
|
||||
`#d6ff3d` + glow tiers), Fraunces + JetBrains Mono, the mono-for-data rule, glow
|
||||
utilities, and the **automated risk scale** (`--risk-safe` acid / `--risk-warn` orange
|
||||
/ `--risk-high` red; legacy `--state-*` aliases retained).
|
||||
- `design/starfield.ts` — the twinkle-dot generator, ported from the website.
|
||||
- `design/README.md` — how any shell consumes it.
|
||||
- **`wiki/glossary.md`** — canonical UI vocabulary: ASM = **Automated** Swap Mechanism
|
||||
(corpus "Atomic" is drift), Orbital, UER = Universal Exchange Rate, PNV, all 8 classes
|
||||
(DEA/PLA/MCA/MTA · PTU/PTL/MTU/MTL with full names), tiers, the **risk scale**, and the
|
||||
**WalletConnect vs CashConnect** distinction.
|
||||
- **Four-tab IA mockups** (`design/mockups/{main,assets,avalanche,apps}-tab.html`),
|
||||
validated live via the preview tools:
|
||||
- **Main** — BCH front door: balance + fuel card (Rule 4), portfolio donut (BCH teal /
|
||||
MBA acid / Tokens violet; MBA arc glows acid on hover), recent feed with an
|
||||
**MBA | Token** filter, Bitcoin-Cash `₿` mark (BCH-green, tilted ~13°) as the Main icon.
|
||||
- **Assets** — two-level hub: `Assets | Tokens` × (`My Assets | Orbital Network` /
|
||||
`My Tokens | Market`); Orbital = directory of all DEAs (registries + discovery);
|
||||
automated risk scale on rows (green Canonical / orange Risky / red High-risk).
|
||||
- **Avalanche** — eight-class taxonomy as a two-column matrix (MBA left / Token right;
|
||||
rows = mint×supply) + Create hero; **Create wizard** (`avalanche-wizard.html`):
|
||||
backing×mint×supply derive the class live (all 8 verified deterministic), 🔒 permanence
|
||||
marks, MBA-only rate tier, type-`CREATE` review teased.
|
||||
- **Apps** — `Connected | Discover`, network switcher (Mainnet/Chipnet/Testnet),
|
||||
**dual-protocol** (WalletConnect + CashConnect, auto-detect), BCH-app directory incl.
|
||||
explorers (bchblockexplorer.com, tokenexplorer.cash); no blessed list (ADR-0008).
|
||||
- Central **FAB** (Send / Receive / Scan QR); **acid glow = selected/active + safe**,
|
||||
never an unverified asset.
|
||||
- **Docs:** `wallet-ui-design.md` gained a **v6 CosmoGenesis nav section** (v5 retained as
|
||||
history) + the risk reframe; `decisions.md` gained **ADR-0026**; `wiki/index.md` links
|
||||
the glossary + design system.
|
||||
|
||||
### Deferred / next
|
||||
|
||||
- **Scaffold the real Capacitor + React shell** — handoff package written:
|
||||
**`design/CAPACITOR_HANDOFF.md`** (file manifest + paste-ready prompt for the dedicated
|
||||
Capacitor session). It covers the noble-shim runtime, the `canonical.js` fs fix, the core
|
||||
integration points (`runtime`/`keystore`/`market`/`verify`/`classify`), and the hard
|
||||
constraints. The bottom bar becomes a
|
||||
single `TabBar` component (icons defined once); the risk-tier mapping (orange-vs-red
|
||||
severity) is a layer over `src/verify` + `src/token/classify.ts`.
|
||||
- Per-app connection methods (WC/CC/web) in the Apps directory are **indicative** — verify
|
||||
per app before shipping. Production Main should embed the official `bitcoin-cash-logo-wt.svg`.
|
||||
|
||||
### What surprised
|
||||
|
||||
- The theme already existed and is **named** — the project website's footer literally reads
|
||||
"CosmoGenesis", and the project speaks a full cosmic vocabulary (Environment / Galaxy /
|
||||
Vessel / Orbital / Elevation / Avalanche / Spectrum). The visual direction is native, not
|
||||
imposed.
|
||||
- **CashConnect is the scarce capability** (Cashonize-only; required by BCH Guru) — so
|
||||
implementing both WalletConnect *and* CashConnect is a genuine differentiator, not parity.
|
||||
|
||||
### Caveat
|
||||
|
||||
- `scripts/snapshot.mjs` numbers by `existing.length + 1` (flagged since 0040); numbered
|
||||
`0053` here, which happens to be correct given the current count, but the bug is unfixed.
|
||||
69
snapshots/0054-nba-taxonomy-correction-bch-logo-nav-fix.md
Normal file
69
snapshots/0054-nba-taxonomy-correction-bch-logo-nav-fix.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
# Snapshot 0054: nba taxonomy correction + bch-logo nav fix + asset-type detail sheets
|
||||
|
||||
_Captured 2026-05-25T19:09:08.829Z_
|
||||
|
||||
## Git state
|
||||
|
||||
- Rev: `(no git)`
|
||||
- Working tree: clean
|
||||
|
||||
## File counts
|
||||
|
||||
| Area | Files |
|
||||
|---|---|
|
||||
| src/ | 52 |
|
||||
| contracts/ | 31 |
|
||||
| test/ | 42 |
|
||||
|
||||
## Notes
|
||||
|
||||
**Design + doc-correction session** (continuation of 0053). No `src/` change.
|
||||
|
||||
### Taxonomy correction — ADR-0027 (the headline)
|
||||
|
||||
A design conversation refining the Avalanche taxonomy surfaced real confusions; corrected
|
||||
across all docs (the latest framing is authoritative):
|
||||
|
||||
- **NBA = Non-Backed Assets** replaces "Token" as the family label (parallel to **MBA =
|
||||
Mathematically Backed Assets**). Class codes unchanged (PTU/PTL/MTU/MTL · DEA/PLA/MCA/MTA).
|
||||
- **Direct value vs backed claim.** Gold, silver, barter, BTC, BCH, **PoW coins** are
|
||||
*direct-value Layer-1* assets — unbacked; they **are** value → **NBA** (PoW: PTU uncapped
|
||||
/ PTL capped, Bitcoin-style). A *claim backed by* such value (gold certificate, note,
|
||||
USDT) is the **MBA** category: `MBA : BCH ∷ certificate : gold`.
|
||||
- **spec §2.4 "PLA peer = gold" corrected** — gold is unbacked (NBA); PLA is the *backed*
|
||||
analogue sharing only gold's issuance pattern. (The spec's own MBA row already called
|
||||
Layer-1 gold a substrate, not an MBA — the PLA line now agrees.)
|
||||
- **Memecoins are managed** (issuer-minted) in the common case → MTU/MTL; only *open-mint*
|
||||
memecoins are PTU/PTL.
|
||||
- Docs updated: **`wiki/decisions.md` (ADR-0027)**, **`wiki/glossary.md`**,
|
||||
**`deviant_technical_spec_v2.7.md`** (PLA line), **`wiki/wallet-ui-design.md`** (matrix note).
|
||||
|
||||
### UI fixes / additions (mockups)
|
||||
|
||||
- **BCH-logo nav bug fixed.** The official Bitcoin Cash logo (simple-icons path, green
|
||||
disc + white B, left-lean) is now on the Main tab in **all four** mockups — navigating
|
||||
away no longer drops the symbol. (Earlier it lived only in `main-tab.html`.)
|
||||
- **Asset-type detail sheets** (Avalanche) — each of the 8 classes + each **family header
|
||||
(MBA / NBA)** is clickable, opening a **contained, bordered panel** over the taxonomy
|
||||
(not full-page) with definition / use-cases / real-world peer.
|
||||
- **Donut** reverted to the beautiful conic ring (centered total, soft hover glow);
|
||||
per-family filtering moved to the **clickable legend rows**.
|
||||
- **Sky**: darker base + spectral aurora + brighter stars + mouse **parallax** + slow
|
||||
**360° rotation** (`sky-rotate 200s`) — all in shared `cosmo-genesis.css` / `starfield.ts`.
|
||||
- **Bottom bar** fully navigable across screens; central FAB (Send/Receive/Scan).
|
||||
|
||||
### Deferred / open
|
||||
|
||||
- **CashFusion** (BCH privacy / CoinJoin) — proposed for **Settings → Privacy** (± a "Fuse"
|
||||
action on the BCH card); awaiting placement confirmation. Not yet built.
|
||||
- **Corpus HTML** (`Knowledgebase/02_structural_taxonomy`, `asset-landscape`) still carries
|
||||
the pre-correction "Token"/gold-peer wording — flagged in ADR-0027 for the next corpus
|
||||
revision (the archive snapshot was left intact).
|
||||
- **Scaffold the Capacitor shell** — handoff (`design/CAPACITOR_HANDOFF.md`) current.
|
||||
|
||||
### Surprised
|
||||
|
||||
- The corpus **agreed with the user** all along: `asset-landscape.md` already classes gold
|
||||
/ BTC / commodities as Layer-1 *pure assets* (unbacked), and the spec's MBA row says the
|
||||
same — only the §2.4 PLA-peer line was inconsistent. The "correction" mostly made the
|
||||
docs agree with themselves.
|
||||
179
wiki/glossary.md
Normal file
179
wiki/glossary.md
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
# Deviant Glossary
|
||||
|
||||
> **Single source of truth for naming and UI copy.** Canonical terms are pinned to the
|
||||
> authoritative spec (`../deviant_technical_spec_v2.7.md`). The "canonical wording
|
||||
> re-used verbatim everywhere" rule in [`wallet-ui-design.md`](wallet-ui-design.md) draws
|
||||
> from this file. Where the knowledgebase corpus diverges, **the spec wins** and the
|
||||
> divergence is noted here.
|
||||
|
||||
## Swap & rate terms
|
||||
|
||||
- **ASM — Automated Swap Mechanism.** Counterparty-free swap via `claim()` + P2PKH
|
||||
redeem (spec §6, glossary). *Atomic by property* — it settles in a single transaction —
|
||||
which is why the knowledgebase corpus (ABCD reference, corpus directory) sometimes
|
||||
writes "**Atomic** Swap Mechanism." The canonical expansion is **Automated**. Available
|
||||
to **DEA** and **PLA** (until supply depleted).
|
||||
- **Orbital Network.** The **UI name** for the ASM swap interface (spec §9). One of the
|
||||
four canonical interfaces. Surface "Orbital" to end users — not the acronym "ASM".
|
||||
- **UER — Universal Exchange Rate.** `UER(A→B) = rateA / rateB` (spec §6.2). A
|
||||
deterministic function of genesis constants — no oracle, no counterparty. This is the
|
||||
rate the Orbital swap quote displays.
|
||||
- **PNV — Protocol Net Value.** `units × backingRate` (spec §4.4). The BCH floor locked
|
||||
inside each MBA UTXO, redeemable by P2PKH spend. Shown for all MBAs; **never** labelled
|
||||
"price."
|
||||
|
||||
## The four canonical interfaces (spec §9)
|
||||
|
||||
| Interface | Verb | Meaning |
|
||||
|---|---|---|
|
||||
| **Avalanche** | Create | Issue / deploy an asset. |
|
||||
| **Spectrum** | Hold | The holder portfolio — what you hold. |
|
||||
| **Elevation** | Escalate | Promote a Tier B definition to a Tier A on-chain asset. |
|
||||
| **Orbital Network** | Swap | The ASM swap interface (DEA & PLA-until-depletion). |
|
||||
|
||||
## The eight asset classes (spec §2.4)
|
||||
|
||||
The taxonomy is three binary axes: **backing (MBA / NBA) × mint (permissionless /
|
||||
managed) × supply (unlimited / limited)**.
|
||||
|
||||
> **Terminology equivalence.** *permissionless mint* **≡** *open mint*, and *managed mint* **≡** *closed mint*. The two pairs are synonyms used interchangeably across the corpus and spec; **permissionless / managed** is the canonical wording (preferred in public-facing and forward-facing materials), while the spec, `architecture.md`, and the asset-taxonomy cells still use *open / closed*. No sweep is planned — the terms are equivalent by definition. (See also the terminology note at the top of `decisions.md`.)
|
||||
|
||||
| Class | Name | Mint | Backing | Supply | ASM / Orbital |
|
||||
|---|---|---|---|---|---|
|
||||
| **DEA** | Deviant Equilibrium Asset | Permissionless | Fixed | Unlimited | ✅ Full |
|
||||
| **PLA** | Permissionless Limited Asset | Permissionless | Fixed | Limited | ⚠️ Until supply depleted |
|
||||
| **MCA** | Managed Certificate Asset | Managed | Fixed | Unlimited | ❌ (bond / reserve note; protocol-backed stablecoin) |
|
||||
| **MTA** | Managed Tranche Asset | Managed | Fixed | Limited | ❌ |
|
||||
| **PTU** | Permissionless Token Unlimited | Permissionless | None | Unlimited | ❌ |
|
||||
| **PTL** | Permissionless Token Limited | Permissionless | None | Limited | ❌ |
|
||||
| **MTU** | Managed Token Unlimited | Managed | None | Unlimited | ❌ |
|
||||
| **MTL** | Managed Token Limited | Managed | None | Limited | ❌ |
|
||||
|
||||
- **MBA — Mathematically Backed Asset.** The four fixed-rate classes (DEA / PLA / MCA /
|
||||
MTA): BCH backing locked at genesis, unconditionally redeemable at a fixed rate with no
|
||||
custodian — "purely based on mathematics" (spec §1).
|
||||
- **NBA — Non-Backed Assets** (PTU / PTL / MTU / MTL; formerly the "Token family" — see
|
||||
ADR-0027): no backing rate, no PNV floor; value is whatever a market or use case assigns.
|
||||
- **Direct value vs backed claim (ADR-0027).** Gold, silver, barter, BTC, BCH and **PoW
|
||||
coins** are *direct-value Layer-1 assets* — unbacked; they **are** value → NBA (PoW:
|
||||
PTU uncapped / PTL capped, Bitcoin-style). A *claim backed by* such value (gold
|
||||
certificate, promissory note, USDT) is the **MBA** category: `MBA : BCH ∷ certificate :
|
||||
gold`. The spec §2.4 "PLA peer = gold" is thus corrected — gold is unbacked (NBA); PLA
|
||||
is the *backed* analogue sharing only gold's issuance pattern.
|
||||
- **Memecoins** are usually issuer-minted (managed) → **MTU / MTL**; only *open-mint*
|
||||
(community-mintable, no exclusive issuer) memecoins are PTU / PTL.
|
||||
- **Real-world peer labels (ADR-0028).** MBA: DEA *Hard-Backed* · PLA *Commodity* · MCA
|
||||
*Bond* (reserve note) · MTA *Tranche* (+ Treasury notes & bills). NBA: PTU *Game
|
||||
currency* (non-convertible — earned by anyone, open-mint, inflationary) · PTL *Mineable
|
||||
Coin* (Bitcoin, gold) · MTU *Meme / Tokens* (convertible — memecoins, governance, **and
|
||||
extant fiat & stablecoins**) · MTL *NFT / Collectibles*.
|
||||
- **Consensus-backing test (ADR-0028).** MBA membership requires backing to be a
|
||||
*consensus invariant* (D-2). Real-world **custodial** stablecoins/fiat assert backing that is
|
||||
off-chain and unenforceable → they are **NBA (MTU)**, not MBA. MCA is the home only for
|
||||
a *protocol-backed* stablecoin whose reserve is enforced at consensus (Layer 2b).
|
||||
- **CDP / collateralized stablecoins → PTU, not MTU (ADR-0033).** A collateralized-debt
|
||||
stablecoin (MakerDAO/DAI) is **permissionless-mint** (anyone locks collateral and mints),
|
||||
so it splits from custodial stablecoins on the mint axis: **CDP → PTU**, **custodial
|
||||
(USDC/USDT) → MTU**. Crucially the collateral backs the **debt position (the vault), not
|
||||
the circulating token** — a holder has no redemption claim on it, so the token is unbacked
|
||||
and market-priced. Two tools formalise this: the **unilateral-redemption discriminator**
|
||||
(*can the holder realise base-unit value alone — no market, oracle, or counterparty?*
|
||||
MBA yes, CDP token no) and the **three-rung backing ladder** (1 intrinsic/unconditional =
|
||||
MBA · 2 collateralized-debt soft = the CDP vault · 3 unbacked/market-priced = CDP token,
|
||||
custodial stablecoins, game currencies). **Volatility paradox:** a CDP stablecoin is
|
||||
*overcollateralized AND the most volatility-exposed* — the MBA makes no peg claim and
|
||||
so has nothing to break; the CDP advertises a peg that is exactly what a crash threatens
|
||||
(Black Thursday, Terra). Overcollateralization protects the *system's solvency*, not
|
||||
the *holder's promised price*.
|
||||
- **Regularized decomposition** (corpus 02): canonical names map onto
|
||||
mint (P/M) × supply (U/L) × kind (A/T). Reference only — **UI uses the canonical
|
||||
three-letter names above.**
|
||||
|
||||
## Tiers & trust (spec §3.2; `architecture.md`)
|
||||
|
||||
- **Tier A** — native CashTokens, consensus-enforced. The wallet is a **verifier**: it
|
||||
confirms facts the chain already settled.
|
||||
- **Tier B** — plain BCH displayed through a local definition; wallet-convention only.
|
||||
The wallet is an **authority**. Appropriate only for closed, mutually-trusting groups;
|
||||
**never** for tokens from untrusted parties or high-value use cases.
|
||||
|
||||
## Verification (spec §7, §14)
|
||||
|
||||
Defense layers (authoritative list in spec §7):
|
||||
- **D-1** canonical-address check · **D-2** per-UTXO backing · **D-3** pinned bytecode
|
||||
hash · **D-4** raw-BCH co-display · **D-5** raw-BCH send confirmation · **D-6**
|
||||
non-authoritative B rendering · **D-7** trusted issuer keys.
|
||||
|
||||
Verification states (the verification badge):
|
||||
- Tier A MBA: `DEA-Verified` / `PLA-Verified` / `MCA-Verified` / `MTA-Verified`,
|
||||
`MBA-Unverified` (D-1 fails), `Warning — Underbacked` (D-2 fails on ≥1 UTXO — the
|
||||
T-001 victim signature).
|
||||
- Tier A Token: no peg badge — the "Token · {class}" label is the whole story.
|
||||
- Tier B: `Unverified definition` (default), `Verified by <issuer>` (user-trusted key).
|
||||
|
||||
## Value-display rule (spec §4.4; `wallet-ui-design.md`)
|
||||
|
||||
- **MBAs** → **PNV** (`units × backingRate`), **never price**.
|
||||
- **Tokens** (no peg) → literal UTXO BCH; live **market price** permitted on the Tokens
|
||||
tab only.
|
||||
- **Protocol-backed stablecoin (MCA)** → PNV plus the issuer's off-chain dollar quote,
|
||||
labelled separately as an issuer claim — never merged with the BCH floor. Extant
|
||||
stablecoins (USDT / USDC) are *not* MCA — their backing is unenforced → **NBA / MTU**
|
||||
(ADR-0028).
|
||||
|
||||
## CashFusion (Settings → Privacy)
|
||||
|
||||
BCH CoinJoin — merges the user's **plain BCH** with other participants' coins over several
|
||||
rounds (encrypted relays), breaking chain-analysis links between past and future history.
|
||||
Surfaced in **Settings → Privacy** (enable toggle + *auto-fuse idle BCH*) and as a **Fuse**
|
||||
action on the BCH card (Main). **Token (FT) UTXOs are never fused** — using one as a fusion
|
||||
input would burn the tokens inside it (Rule 4); only plain BCH participates. Mock:
|
||||
`design/mockups/fuse-flow.html` (ADR-0028 session).
|
||||
|
||||
## CosmoGenesis (visual system)
|
||||
|
||||
The project's **named design language** (v0.1; source `Knowledgebase/08_historical_drafts/deviant_website.html`).
|
||||
Dark "sky" background, white starfield, acid-lime (`#d6ff3d`) glow accent, **Fraunces**
|
||||
serif + **JetBrains Mono**. The wallet is described in the project's own words as *"the
|
||||
CosmoGenesis surface for sending, receiving, and minting."* Tokens live in
|
||||
[`../design/cosmo-genesis.css`](../design/cosmo-genesis.css).
|
||||
|
||||
## Wallet UI risk scale (CosmoGenesis — reframes the verification labels; ADR-0026)
|
||||
|
||||
The wallet classifies every asset **automatically** into a three-tier risk scale. This is
|
||||
the user-facing *presentation* of the D-1/D-2/D-3 checks (spec §7) — the checks are
|
||||
unchanged; only the labels are. Replaces the "Verified / Unverified" wording in the UI.
|
||||
|
||||
- **Canonical / Standard** — 🟢 acid glow. Canonical contract (D-1) + fully backed (D-2).
|
||||
The calm default; the class chip is the signal, **no badge**.
|
||||
- **Risky** — 🟠 orange. Non-standard contract / uncertain backing / unknown-source B
|
||||
definition. PNV suppressed.
|
||||
- **High risk** — 🔴 red. Detected attack signature (e.g. issuer free-mints to self and
|
||||
sells it as a "backed" currency; underbacked T-001). Recover only literal BCH.
|
||||
|
||||
Acid glow is reserved for the canonical tier **and** for actions (Orbital/ASM, Mint, the
|
||||
central FAB, the selected tab) — it never marks a risky asset.
|
||||
|
||||
## Connection protocols (Apps tab; ADR-0026)
|
||||
|
||||
Both ride the WalletConnect v2 transport but speak different RPC dialects:
|
||||
|
||||
- **WalletConnect** (the BCH "Pat" spec) — WC v2 + the Paytaca Connector interface. Broad
|
||||
reach: Cashonize, Zapit, Paytaca; dApps incl. Cauldron, TapSwap, CashTokens Studio.
|
||||
- **CashConnect** (the "Jim" spec) — WC v2 + CashRPC; libauth templates, automatic UTXO
|
||||
selection + change. Currently **Cashonize-only**; required by frontier apps (e.g.
|
||||
**BCH Guru**). The scarce capability → a differentiator.
|
||||
- **Guidance:** implement **both**, auto-detect from the session URI, one honest
|
||||
transaction-preview either way; lead with CashConnect as the differentiator.
|
||||
|
||||
## Strategic / metaphor lexicon (uncatalogued — mindmap v6; expansions to confirm)
|
||||
|
||||
> Not yet integrated into the spec. **Do not use in UI copy until confirmed** — listed
|
||||
> here only so the vocabulary is tracked.
|
||||
|
||||
- **Environment** — the conserved BCH supply (21,000,000; invariant).
|
||||
- **Galaxy / orbital structure / Vessel** — metaphor for backing locked in a contract;
|
||||
*"Orbital Network = where orbits meet."*
|
||||
- **MGC**, **MES (Mathematical Exchange Standard)**, **Mathematical Singularity
|
||||
Network**, **The Replacement Standard**, **Discovery (vs Design)** — strategic framing
|
||||
vocabulary; expansions and canonical status pending.
|
||||
Loading…
Add table
Reference in a new issue