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
No EOL
4.7 KiB
HTML
135 lines
No EOL
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> |