Movses AslanyanandClaude Opus 5.5
79a41bf869
Wrap Submit and Load burst in one full-width .row and Result, Chaos and Service health in a second. Each .row splits its width evenly between its panels (gap subtracted first) and stacks below 900px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Ledgerline</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Ledgerline</h1>
|
|
<p class="tagline">a deliberately imperfect payments backend</p>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="row">
|
|
<section id="submit-panel">
|
|
<h2>Submit a transaction</h2>
|
|
<form id="tx-form">
|
|
<label>Account
|
|
<select id="account-select"></select>
|
|
</label>
|
|
<label>Amount (minor units)
|
|
<input type="number" id="amount-input" value="1000" min="0">
|
|
</label>
|
|
<label>Merchant
|
|
<input type="text" id="merchant-input" value="Corner Store">
|
|
</label>
|
|
<fieldset>
|
|
<legend>Kind</legend>
|
|
<label><input type="radio" name="kind" value="deposit" checked> deposit</label>
|
|
<label><input type="radio" name="kind" value="withdrawal"> withdrawal</label>
|
|
<label><input type="radio" name="kind" value="purchase"> purchase</label>
|
|
</fieldset>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section id="load-panel">
|
|
<h2>Load burst</h2>
|
|
<label>N
|
|
<select id="burst-n">
|
|
<option value="10">10</option>
|
|
<option value="50">50</option>
|
|
<option value="200">200</option>
|
|
</select>
|
|
</label>
|
|
<button id="burst-button">Fire burst</button>
|
|
<table id="burst-table">
|
|
<thead>
|
|
<tr><th>count</th><th>success</th><th>errors</th><th>min</th><th>mean</th><th>p50</th><th>p95</th><th>max</th></tr>
|
|
</thead>
|
|
<tbody><tr><td colspan="8">no burst run yet</td></tr></tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<section id="result-panel">
|
|
<h2>Result</h2>
|
|
<p>Round-trip: <span id="result-rtt">--</span> ms · request_id: <code id="result-request-id">--</code></p>
|
|
<pre id="result-json">(nothing yet)</pre>
|
|
</section>
|
|
|
|
<section id="chaos-panel">
|
|
<h2>Chaos</h2>
|
|
<div id="chaos-flags"></div>
|
|
<div id="chaos-profiles">
|
|
<button data-profile="clean">clean</button>
|
|
<button data-profile="light">light</button>
|
|
<button data-profile="nightmare">nightmare</button>
|
|
<button data-profile="random">random</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="health-panel">
|
|
<h2>Service health</h2>
|
|
<div id="health-strip"></div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|