86 lines
2.8 KiB
HTML
86 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Clickthrough Control</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Clickthrough Control Panel</h1>
|
|
<p>Most actions use HTTP; screenshots stream over WebSocket when refreshed.</p>
|
|
</header>
|
|
|
|
<section class="card">
|
|
<h2>Grid bootstrap</h2>
|
|
<form id="grid-form">
|
|
<label>
|
|
Width
|
|
<input type="number" name="width" value="640" min="1" required />
|
|
</label>
|
|
<label>
|
|
Height
|
|
<input type="number" name="height" value="480" min="1" required />
|
|
</label>
|
|
<label>
|
|
Rows
|
|
<input type="number" name="rows" value="3" min="1" required />
|
|
</label>
|
|
<label>
|
|
Columns
|
|
<input type="number" name="columns" value="3" min="1" required />
|
|
</label>
|
|
<label class="stretch">
|
|
Screenshot (base64)
|
|
<textarea name="screenshot" id="screenshot" rows="3">AA==</textarea>
|
|
</label>
|
|
<button type="submit">Init grid</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="card" id="grid-details">
|
|
<h2>Grid status</h2>
|
|
<div id="grid-meta">No grid yet.</div>
|
|
<pre id="descriptor" class="monospace"></pre>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Planner & Actions</h2>
|
|
<label>
|
|
Preferred label
|
|
<input type="text" id="preferred-label" placeholder="button" />
|
|
</label>
|
|
<div class="button-row">
|
|
<button type="button" id="plan-button">Preview plan</button>
|
|
<button type="button" id="run-action">Run action</button>
|
|
</div>
|
|
<pre id="plan-output" class="monospace">Plan preview will appear here.</pre>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Refresh Screenshot</h2>
|
|
<textarea id="refresh-screenshot" rows="3" placeholder="Paste new base64 screenshot"></textarea>
|
|
<label>
|
|
Memo
|
|
<input type="text" id="refresh-memo" placeholder="Describe the scene" />
|
|
</label>
|
|
<button type="button" id="refresh-button">Refresh grid</button>
|
|
<p class="note">Refresh triggers /stream/screenshots so the UI can redraw.</p>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Summary & history</h2>
|
|
<pre id="summary" class="monospace">No data yet.</pre>
|
|
<pre id="history" class="monospace">History will show here.</pre>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Websocket log</h2>
|
|
<pre id="ws-log" class="monospace">Waiting for updates…</pre>
|
|
</section>
|
|
</main>
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|