OpenClaw Bot
129 lines
6.4 KiB
HTML
129 lines
6.4 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="theme-color" content="#101626" />
|
||
<meta name="rank-version" content="2.0.0-feedback-map-mvp" />
|
||
<title>Ranker — ranked feedback maps for messy decisions</title>
|
||
<link rel="stylesheet" href="/styles.css?v=2.0.0-feedback-map-mvp" />
|
||
</head>
|
||
<body>
|
||
<main class="page-shell">
|
||
<section class="hero" aria-labelledby="hero-title">
|
||
<nav class="topline" aria-label="Ranker navigation">
|
||
<a class="brand" href="#top" aria-label="Ranker home"><span>R</span>Ranker</a>
|
||
<div class="nav-links">
|
||
<a href="#try">Try it</a>
|
||
<a href="#proof">Output</a>
|
||
<a href="#why">Why</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="hero-grid" id="top">
|
||
<div class="hero-copy">
|
||
<p class="eyebrow">Decision feedback for scatterminds, builders, and structured people</p>
|
||
<h1 id="hero-title">Dump your options. See what deserves attention first.</h1>
|
||
<p class="lede">Ranker turns a messy list of ideas, features, offers, roadmap items, or next moves into a ranked feedback map: what to test, build, defer, or drop — and why.</p>
|
||
<div class="hero-actions">
|
||
<a class="button primary" href="#try">Rank a messy list</a>
|
||
<button class="button ghost" type="button" id="loadSampleTop">Load sample</button>
|
||
</div>
|
||
<div class="promise-row" aria-label="What Ranker returns">
|
||
<span>Do first</span>
|
||
<span>Validate next</span>
|
||
<span>Park safely</span>
|
||
<span>Expert reflections</span>
|
||
</div>
|
||
</div>
|
||
|
||
<article class="artifact-card" aria-label="Sample ranked feedback map">
|
||
<div class="artifact-head">
|
||
<span>Ranked Feedback Map</span>
|
||
<b>Fastest useful progress</b>
|
||
</div>
|
||
<ol class="mini-ranking">
|
||
<li><strong>Manual offer critique</strong><small>High signal, easy to test, clear buyer pain.</small></li>
|
||
<li><strong>Pricing calculator</strong><small>Useful, but generic unless paired with judgement.</small></li>
|
||
<li><strong>Client dashboard</strong><small>Park it. Too much machinery before proof.</small></li>
|
||
</ol>
|
||
<div class="mini-brief">
|
||
<strong>Pattern noticed</strong>
|
||
<p>Your strongest wedge is judgement, not automation. Test whether people want their offer criticized before building a platform around it.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="decision-tool" id="try" aria-labelledby="try-title">
|
||
<div class="tool-intro">
|
||
<p class="eyebrow">MVP · no account · no dashboard swamp</p>
|
||
<h2 id="try-title">Rank the pile</h2>
|
||
<p>Paste one idea plus the possible features, directions, offers, or next steps. Pick what the ranking should care about. Ranker gives a first-pass decision brief.</p>
|
||
</div>
|
||
|
||
<form class="rank-form" id="rankForm">
|
||
<label>
|
||
<span>Main idea or context</span>
|
||
<textarea name="idea" rows="4" placeholder="Example: I’m building a tool that helps freelancers package their services and decide what to sell first."></textarea>
|
||
</label>
|
||
|
||
<label>
|
||
<span>Options to rank <b>required</b></span>
|
||
<textarea name="optionsText" rows="9" required placeholder="One per line. Bullets, rambling, half-thoughts are fine.
|
||
- Offer critique
|
||
- Pricing calculator
|
||
- Proposal generator
|
||
- Client persona mapper
|
||
- Landing page copywriter
|
||
- Client dashboard"></textarea>
|
||
</label>
|
||
|
||
<fieldset class="mode-picker">
|
||
<legend>What should the ranking care about?</legend>
|
||
<label><input type="radio" name="mode" value="progress" checked /> <span>Fastest useful progress</span></label>
|
||
<label><input type="radio" name="mode" value="mvp" /> <span>Best MVP order</span></label>
|
||
<label><input type="radio" name="mode" value="revenue" /> <span>Revenue potential</span></label>
|
||
<label><input type="radio" name="mode" value="risk" /> <span>Risk reduction</span></label>
|
||
<label><input type="radio" name="mode" value="originality" /> <span>Most original</span></label>
|
||
</fieldset>
|
||
|
||
<label>
|
||
<span>Extra constraints <em>optional</em></span>
|
||
<input name="context" placeholder="Example: one week, solo builder, no paid ads, must be useful on mobile" />
|
||
</label>
|
||
|
||
<div class="form-actions">
|
||
<button class="button primary" type="submit">Create ranked feedback map</button>
|
||
<button class="button ghost" type="button" id="loadSample">Use sample</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<section class="results" id="results" aria-live="polite" hidden></section>
|
||
|
||
<section class="proof-section" id="proof" aria-labelledby="proof-title">
|
||
<div>
|
||
<p class="eyebrow">The artifact</p>
|
||
<h2 id="proof-title">A decision brief, not a vibes table.</h2>
|
||
</div>
|
||
<div class="proof-grid">
|
||
<article><strong>Ranked order</strong><p>Clear first-pass order with do / test / defer / park labels.</p></article>
|
||
<article><strong>Reason per item</strong><p>Every option gets a plain-language reason and concern.</p></article>
|
||
<article><strong>Expert reflections</strong><p>Product expert, scattermind simplifier, and structured operator lenses.</p></article>
|
||
<article><strong>Next 48 hours</strong><p>The output ends with a concrete move instead of more thinking fog.</p></article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="why-section" id="why" aria-labelledby="why-title">
|
||
<p class="eyebrow">Positioning</p>
|
||
<h2 id="why-title">Scattermind clarifies one idea. Ranker judges the possible moves.</h2>
|
||
<p>That makes Ranker broader: scattered people get relief, structured people get a second opinion, and builders get a defensible build order before they waste time on the wrong piece.</p>
|
||
</section>
|
||
</main>
|
||
|
||
<div class="toast" id="toast" hidden></div>
|
||
<script src="/app.js?v=2.0.0-feedback-map-mvp" type="module"></script>
|
||
</body>
|
||
</html>
|