generated from coulomb/repo-seed
tegwick
9c1c2142fc
Introduce ui/ dashboard (dark observatory layout), JSON API, and local dev server. All metrics load from expense and payment record ledgers. Links Claude design reference for visual alignment.
107 lines
3.1 KiB
HTML
107 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Coulomb Economic Observatory</title>
|
|
<link rel="stylesheet" href="/ui/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<header class="topbar">
|
|
<div>
|
|
<p class="eyebrow">Adaptive Pricing · Coulomb Social MVP</p>
|
|
<h1>Economic Observatory</h1>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<label>
|
|
Period
|
|
<select id="period-select"></select>
|
|
</label>
|
|
<span class="badge" id="liquidity-badge">—</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero-grid" id="hero-grid"></section>
|
|
|
|
<section class="panel budget-panel">
|
|
<div class="panel-head">
|
|
<h2>Liquidity & Budget</h2>
|
|
<p id="budget-caption">Operator liquidity pool</p>
|
|
</div>
|
|
<div class="budget-bar">
|
|
<div class="budget-fill" id="budget-fill"></div>
|
|
</div>
|
|
<div class="budget-stats" id="budget-stats"></div>
|
|
</section>
|
|
|
|
<div class="split-grid">
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<h2>Monthly Net Liquidity</h2>
|
|
<p>Member net payments minus infrastructure</p>
|
|
</div>
|
|
<div class="chart" id="liquidity-chart"></div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<h2>Infrastructure Stack</h2>
|
|
<p>Domains, hosting, and Stripe reference</p>
|
|
</div>
|
|
<div id="infra-stack"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<h2>Monthly Ledger</h2>
|
|
<p>Computed from expense and payment record tables</p>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Period</th>
|
|
<th>Members</th>
|
|
<th>Gross</th>
|
|
<th>Infrastructure</th>
|
|
<th>Processing</th>
|
|
<th>Net liquidity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="history-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<h2>Pricing Model Registry</h2>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="pricing-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<p>
|
|
Design reference:
|
|
<a id="design-link" href="#" target="_blank" rel="noreferrer">Claude design share</a>
|
|
· Totals computed programmatically from ledgers · Customer cost-pass-through billing not active
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
<script src="/ui/app.js"></script>
|
|
</body>
|
|
</html> |