a01a53648f
Generated with tools/gen_manual_art.py (gemini-3-pro / 3.1-flash / 2.5-flash), consistent picture-book style, no text in images, ~480KB total. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
90 lines
4.2 KiB
HTML
90 lines
4.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>backnforth — How it works</title>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%231f6feb'/%3E%3C/svg%3E">
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; background: #fdf6ec; color: #26333b;
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
|
|
main { max-width: 640px; margin: 0 auto; padding: 20px 18px 60px; }
|
|
h1 { text-align: center; font-size: 30px; margin: 18px 0 4px; color: #1b6e63; }
|
|
.sub { text-align: center; font-size: 17px; opacity: .75; margin-bottom: 24px; }
|
|
.step { background: #fff; border-radius: 18px; padding: 20px; margin-top: 22px;
|
|
box-shadow: 0 3px 14px rgba(38,51,59,.08); }
|
|
.step img { width: 100%; border-radius: 12px; display: block; }
|
|
.step h2 { font-size: 22px; margin: 14px 0 6px; color: #1b6e63; }
|
|
.step .n { display: inline-block; background: #e8734a; color: #fff; border-radius: 50%;
|
|
width: 34px; height: 34px; line-height: 34px; text-align: center; font-size: 18px;
|
|
margin-right: 8px; }
|
|
.step p { font-size: 17px; line-height: 1.6; margin: 6px 0 0; }
|
|
.safety { background: #fff3e6; border: 2px solid #e8734a55; }
|
|
.go { display: block; text-align: center; background: #1b6e63; color: #fff;
|
|
text-decoration: none; font-size: 20px; padding: 18px; border-radius: 14px;
|
|
margin-top: 28px; }
|
|
.tiny { text-align: center; font-size: 13px; opacity: .6; margin-top: 18px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>backnforth</h1>
|
|
<div class="sub">Bilateral stimulation for therapy — on whatever screen you already have.</div>
|
|
|
|
<div class="step">
|
|
<img src="img/manual/01-cover.jpg" alt="" onerror="this.style.display='none'">
|
|
<h2>What is this?</h2>
|
|
<p>A gentle moving dot (and optional sound) that a patient follows with
|
|
their eyes while you guide the session. It runs in any web browser —
|
|
an old laptop, a second-hand phone, anything with a screen.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<img src="img/manual/02-open.jpg" alt="" onerror="this.style.display='none'">
|
|
<h2><span class="n">1</span>Open it</h2>
|
|
<p>Open the site on your computer. You'll see one big green
|
|
<strong>START</strong> button and a few large sliders. That's the whole
|
|
cockpit.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<img src="img/manual/03-link.jpg" alt="" onerror="this.style.display='none'">
|
|
<h2><span class="n">2</span>Give the patient a screen</h2>
|
|
<p>Easiest: tap <strong>Open patient screen</strong> and turn that window
|
|
to face them. Or tap <strong>Copy link</strong> and open it on their
|
|
phone or tablet — the two screens stay in sync by themselves.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<img src="img/manual/04-follow.jpg" alt="" onerror="this.style.display='none'">
|
|
<h2><span class="n">3</span>Press start</h2>
|
|
<p>The dot glides left and right. The patient follows it with their
|
|
eyes while you lead the session. Sound can tick from side to side too
|
|
if you want it.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<img src="img/manual/05-adjust.jpg" alt="" onerror="this.style.display='none'">
|
|
<h2><span class="n">4</span>Make it comfortable</h2>
|
|
<p>Slide between turtle and rabbit until the pace feels right. Change
|
|
the size, the color, the sound — the patient's screen updates
|
|
instantly.</p>
|
|
</div>
|
|
|
|
<div class="step safety">
|
|
<img src="img/manual/06-care.jpg" alt="" onerror="this.style.display='none'">
|
|
<h2>⚠️ Go gently</h2>
|
|
<p>Ask about seizure history before showing moving or pulsing visuals.
|
|
Bilateral stimulation can bring up strong feelings — this tool assists
|
|
a trained clinician, it isn't therapy by itself. Pause any time; the
|
|
stop button is always one tap away.</p>
|
|
</div>
|
|
|
|
<a class="go" href="easy.html">Open backnforth →</a>
|
|
<div class="tiny">Free and open source (MIT). Patient data never leaves
|
|
your device.</div>
|
|
</main>
|
|
</body>
|
|
</html>
|