generated from coulomb/repo-seed
tegwick
da3b7d66f0
Vendor whynot-design Layer 1 (tokens, CSS) and Layer 2 (<wn-*> components) via scripts/sync-whynot-design.sh with a pinned ref. Migrate the observatory shell to canonical web components, keep observatory-specific layout in styles.css, and add vendor integrity tests plus correct JS MIME types on the dev server.
135 lines
4.7 KiB
HTML
135 lines
4.7 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/vendor/whynot-design/colors_and_type.css" />
|
|
<link rel="stylesheet" href="/ui/vendor/whynot-design/components.css" />
|
|
<link rel="stylesheet" href="/ui/styles.css" />
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"lit": "https://esm.sh/lit@3.2.1",
|
|
"lit/": "https://esm.sh/lit@3.2.1/"
|
|
}
|
|
}
|
|
</script>
|
|
<script type="module" src="/ui/vendor/whynot-design/index.js"></script>
|
|
</head>
|
|
<body>
|
|
<wn-top-nav brand="adaptive-pricing" slug="coulomb · observatory">
|
|
<div slot="right" class="obs-period" id="period-control">
|
|
<wn-eyebrow>Period</wn-eyebrow>
|
|
<wn-select id="period-select"></wn-select>
|
|
</div>
|
|
<wn-tag slot="right" id="liquidity-badge">—</wn-tag>
|
|
</wn-top-nav>
|
|
|
|
<main class="wn-main obs-main">
|
|
<wn-page-header
|
|
eyebrow="Economic Observatory · MVP"
|
|
title="Operator liquidity"
|
|
lede="Ledger-backed view of infrastructure spend, member payments, and remaining budget. Customer cost-pass-through billing is not active."
|
|
id="page-header"
|
|
></wn-page-header>
|
|
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Snapshot</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<div class="obs-metric-grid" id="metric-grid"></div>
|
|
</section>
|
|
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Liquidity & budget</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<wn-banner variant="info" title="Budget position" id="budget-banner">
|
|
<p id="budget-caption">—</p>
|
|
</wn-banner>
|
|
<div class="obs-budget-meter" aria-hidden="true">
|
|
<div class="obs-budget-meter__fill" id="budget-fill"></div>
|
|
</div>
|
|
<div class="obs-field-sheet" id="budget-stats"></div>
|
|
</section>
|
|
|
|
<div class="obs-split">
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Monthly net liquidity</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<p class="lead obs-section-note">Member net payments minus infrastructure, by period.</p>
|
|
<div class="obs-liquidity-list" id="liquidity-chart"></div>
|
|
</section>
|
|
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Infrastructure stack</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<p class="lead obs-section-note">Domains, hosting, and Stripe reference rates.</p>
|
|
<div id="infra-stack"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Monthly ledger</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<p class="lead obs-section-note">Computed from expense and payment record tables.</p>
|
|
<div class="obs-table-wrap">
|
|
<table class="wn-table--native obs-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Period</th>
|
|
<th>Members</th>
|
|
<th class="obs-num">Gross</th>
|
|
<th class="obs-num">Infrastructure</th>
|
|
<th class="obs-num">Processing</th>
|
|
<th class="obs-num">Net liquidity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="history-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Pricing model registry</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<div class="obs-table-wrap">
|
|
<table class="wn-table--native obs-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="obs-footer">
|
|
<p class="small">
|
|
Design:
|
|
<a id="design-link" href="#" target="_blank" rel="noreferrer">Claude design share</a>
|
|
·
|
|
<span class="mono" id="design-ref-label">whynot-design</span>
|
|
· totals computed programmatically from ledgers
|
|
</p>
|
|
</footer>
|
|
</main>
|
|
|
|
<script src="/ui/app.js"></script>
|
|
</body>
|
|
</html> |