OpenClaw Bot
133 lines
7.1 KiB
HTML
133 lines
7.1 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="#f3eee4" />
|
||
<meta name="rank-version" content="2.2.2-proof-plan-alias" />
|
||
<title>Ranker — feedback front door for messy decisions</title>
|
||
<link rel="stylesheet" href="/styles.css?v=2.2.2-proof-plan-alias" />
|
||
</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">Feedback intake for ideas, features, offers, and next moves</p>
|
||
<h1 id="hero-title">Submit the mess. Get a defended first move.</h1>
|
||
<p class="lede">Ranker is the front door to useful feedback: paste the messy backlog as-is, choose the judgement lens, and get a decision brief with reasons, risks, expert reflections, and next steps.</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 · feedback front door · no account · no dashboard swamp</p>
|
||
<h2 id="try-title">Send a decision brief to the room</h2>
|
||
<p>Paste the backlog, rough notes, feature dump, possible next moves, or a raw Scattermind Concept Map JSON export. Ranker will extract candidates when it can; use the optional candidate box only if you already have a cleaner list.</p>
|
||
</div>
|
||
|
||
<form class="rank-form" id="rankForm">
|
||
<label>
|
||
<span>Paste the messy backlog / idea dump / Concept Map JSON <b>required</b></span>
|
||
<textarea name="idea" rows="8" required placeholder="Example: I’m building a tool that helps freelancers package their services and decide what to sell first. Maybe offer critique, pricing calculator, proposal generator, landing page copywriter, client persona mapper, and some kind of dashboard later? I only have a week and want the fastest useful proof.
|
||
|
||
Or paste a Scattermind Concept Map JSON object here; Ranker will preserve source provenance and extract the build order."></textarea>
|
||
</label>
|
||
|
||
<label>
|
||
<span>Candidate moves, if you want to separate them <em>optional</em></span>
|
||
<textarea name="optionsText" rows="7" placeholder="Optional. One per line is easiest, but bullets and 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 judgement optimize for?</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="validation" /> <span>Fastest validation</span></label>
|
||
<label><input type="radio" name="mode" value="revenue" /> <span>Revenue potential</span></label>
|
||
<label><input type="radio" name="mode" value="risk" /> <span>Safest proof order</span></label>
|
||
<label><input type="radio" name="mode" value="learning" /> <span>Biggest assumption test</span></label>
|
||
<label><input type="radio" name="mode" value="originality" /> <span>Most original</span></label>
|
||
</fieldset>
|
||
|
||
<label>
|
||
<span>Constraints the feedback should respect <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.2.2-proof-plan-alias" type="module"></script>
|
||
</body>
|
||
</html>
|