177 lines
6.1 KiB
HTML
177 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Rabby</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<aside class="rail" aria-label="Primary navigation">
|
|
<div class="brand-mark" aria-label="Rabby">R</div>
|
|
<button class="rail-icon active" title="Dashboard">⌂</button>
|
|
<button class="rail-icon" title="Approvals">✓</button>
|
|
<button class="rail-icon" title="Activity">↗</button>
|
|
<button class="rail-icon" title="Settings">⚙</button>
|
|
</aside>
|
|
|
|
<aside class="wallet-panel">
|
|
<header class="brand-row">
|
|
<div>
|
|
<p class="eyebrow">Rabby Wallet MVP</p>
|
|
<h1>Clean multi-chain wallet</h1>
|
|
</div>
|
|
<span class="status-dot">Modeled</span>
|
|
</header>
|
|
|
|
<section class="account-card">
|
|
<div class="account-topline">
|
|
<span>Main Wallet</span>
|
|
<button class="ghost-button">•••</button>
|
|
</div>
|
|
<strong id="account-address">0x1111…1111</strong>
|
|
<p>Seed phrase · Ethereum + Base</p>
|
|
<div class="account-actions">
|
|
<button>Send</button>
|
|
<button>Receive</button>
|
|
<button>Swap</button>
|
|
</div>
|
|
</section>
|
|
|
|
<nav class="side-list">
|
|
<a class="active"><span>Portfolio</span><b id="portfolio-total">$0.00</b></a>
|
|
<a><span>Dapp permissions</span><b id="dapp-count">MVP</b></a>
|
|
<a><span>Approvals at risk</span><b id="risk-count">0</b></a>
|
|
<a><span>Customization</span><b>Theme</b></a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="content">
|
|
<header class="topbar">
|
|
<div>
|
|
<p class="eyebrow">RabbyHub/Rabby inspired UI</p>
|
|
<h2>Portfolio dashboard</h2>
|
|
</div>
|
|
<div class="top-actions">
|
|
<button class="secondary">Lock</button>
|
|
<button class="primary">Connect dapp</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero-grid">
|
|
<article class="balance-card">
|
|
<p>Total balance</p>
|
|
<strong id="hero-total">$0.00</strong>
|
|
<span>Across modeled token balances</span>
|
|
</article>
|
|
<article class="metric-card">
|
|
<p>Chains</p>
|
|
<strong id="chain-count">0</strong>
|
|
<span>Custom RPC ready</span>
|
|
</article>
|
|
<article class="metric-card warning">
|
|
<p>High-risk approvals</p>
|
|
<strong id="approval-risk">0</strong>
|
|
<span>Review before signing</span>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="two-column">
|
|
<article class="panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<p class="eyebrow">Assets</p>
|
|
<h3>Token balances</h3>
|
|
</div>
|
|
<button class="ghost-button">Refresh</button>
|
|
</div>
|
|
<div id="token-list" class="asset-list"></div>
|
|
</article>
|
|
|
|
<article class="panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<p class="eyebrow">Security</p>
|
|
<h3>Approvals</h3>
|
|
</div>
|
|
<button class="ghost-button">Revoke</button>
|
|
</div>
|
|
<div id="approval-list" class="approval-list"></div>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="two-column lower">
|
|
<article class="panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<p class="eyebrow">Activity</p>
|
|
<h3>Recent wallet events</h3>
|
|
</div>
|
|
</div>
|
|
<div id="activity-list" class="activity-list"></div>
|
|
</article>
|
|
|
|
<article class="panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<p class="eyebrow">Settings</p>
|
|
<h3>Customization</h3>
|
|
</div>
|
|
</div>
|
|
<div id="settings-summary" class="settings-grid"></div>
|
|
<div class="settings-form">
|
|
<p class="eyebrow">Persistent customization</p>
|
|
<label for="theme-select">Theme</label>
|
|
<div class="vault-row">
|
|
<select id="theme-select">
|
|
<option value="rabby-light">Rabby light</option>
|
|
<option value="rabby-dark">Rabby dark</option>
|
|
<option value="rabby-system">System</option>
|
|
</select>
|
|
<button id="save-settings" class="secondary" type="button">Save settings</button>
|
|
</div>
|
|
<small id="settings-status">Customization persists through the Rust config store.</small>
|
|
</div>
|
|
<div class="vault-form">
|
|
<p class="eyebrow">Encrypted local state</p>
|
|
<label for="vault-passphrase">Demo vault passphrase</label>
|
|
<div class="vault-row">
|
|
<input id="vault-passphrase" type="password" value="correct horse battery staple" />
|
|
<button id="save-vault" class="secondary" type="button">Save vault</button>
|
|
</div>
|
|
<small id="vault-status">AES-256-GCM + Argon2id runtime wired through Tauri.</small>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="panel terminal-panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<p class="eyebrow">Local terminal</p>
|
|
<h3>Run a local shell command</h3>
|
|
</div>
|
|
<button id="run-terminal" class="primary" type="button">Run</button>
|
|
</div>
|
|
<div class="terminal-form">
|
|
<input id="terminal-command" value="printf 'hello from Rabby local terminal'" />
|
|
<pre id="terminal-output">Local command runtime is wired through Tauri.</pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel feature-panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<p class="eyebrow">Feature record</p>
|
|
<h3>RabbyHub MVP coverage</h3>
|
|
</div>
|
|
<a class="doc-link" href="../docs/rabbyhub-mvp-feature-inventory.md">docs/rabbyhub-mvp-feature-inventory.md</a>
|
|
</div>
|
|
<div id="wallet-features" class="feature-grid"></div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|