generated from coulomb/repo-seed
208 lines
7.8 KiB
HTML
208 lines
7.8 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>
|
|
|
|
<div class="wn-app obs-app">
|
|
<wn-sidebar id="obs-sidebar">
|
|
<wn-sidebar-group label="Observatory">
|
|
<wn-sidebar-item icon="activity" active data-section="cost-floor" id="nav-cost-floor">
|
|
Cost Floor
|
|
</wn-sidebar-item>
|
|
<wn-sidebar-item icon="lightbulb" data-section="value-range" id="nav-value-range">
|
|
Value Range
|
|
</wn-sidebar-item>
|
|
<wn-sidebar-item icon="users" data-section="market-price" id="nav-market-price">
|
|
Market Price
|
|
</wn-sidebar-item>
|
|
</wn-sidebar-group>
|
|
</wn-sidebar>
|
|
|
|
<main class="wn-main obs-main">
|
|
<wn-page-header id="page-header"></wn-page-header>
|
|
|
|
<section class="obs-panel obs-panel--active" id="panel-cost-floor" data-section="cost-floor">
|
|
<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>
|
|
</section>
|
|
|
|
<section class="obs-panel" id="panel-value-range" data-section="value-range" hidden>
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Current position</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<div class="obs-metric-grid" id="value-summary"></div>
|
|
</section>
|
|
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Segment bands</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<p class="lead obs-section-note" id="value-range-notes"></p>
|
|
<div class="obs-value-grid" id="value-segments"></div>
|
|
</section>
|
|
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Value drivers</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<div class="obs-field-sheet" id="value-drivers"></div>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="obs-panel" id="panel-market-price" data-section="market-price" hidden>
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Market span</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<div class="obs-metric-grid" id="market-summary"></div>
|
|
</section>
|
|
|
|
<section class="obs-section">
|
|
<div class="obs-section__head">
|
|
<wn-eyebrow>Competitive alternatives</wn-eyebrow>
|
|
<div class="obs-section__rule"></div>
|
|
</div>
|
|
<p class="lead obs-section-note" id="market-notes"></p>
|
|
<div class="obs-table-wrap">
|
|
<table class="wn-table--native obs-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Alternative</th>
|
|
<th>Category</th>
|
|
<th class="obs-num">Price / mo</th>
|
|
<th>Signal</th>
|
|
<th>Features</th>
|
|
<th>Evidence</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="market-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</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>
|
|
</div>
|
|
|
|
<script src="/ui/app.js"></script>
|
|
</body>
|
|
</html> |