141 lines
6.1 KiB
HTML
141 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>myadhd.dev — ADHD-friendly tools for focus, tasks and momentum</title>
|
||
<meta name="description" content="Free, ADHD-friendly tools: task breaker, focus timer with time-blindness support, a dopamine menu, and a one-thing mode. No signup, everything stays in your browser.">
|
||
<meta name="theme-color" content="#14141c">
|
||
<link rel="canonical" href="https://myadhd.dev/">
|
||
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
<meta property="og:title" content="myadhd.dev — ADHD-friendly tools">
|
||
<meta property="og:description" content="Break down scary tasks, tame time blindness, and build momentum. Free, no signup, data stays in your browser.">
|
||
<meta property="og:type" content="website">
|
||
</head>
|
||
<body>
|
||
<header class="top">
|
||
<a class="logo" href="/">myadhd<span>.dev</span></a>
|
||
<nav class="tabs" role="tablist">
|
||
<a href="#breaker" data-tab="breaker" class="tab">Break it down</a>
|
||
<a href="#timer" data-tab="timer" class="tab">Focus timer</a>
|
||
<a href="#dopamine" data-tab="dopamine" class="tab">Dopamine menu</a>
|
||
<a href="#now" data-tab="now" class="tab">One thing</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
|
||
<!-- ============ TASK BREAKER ============ -->
|
||
<section id="breaker" class="tool" hidden>
|
||
<div class="tool-head">
|
||
<h1>Break it down</h1>
|
||
<p class="sub">Big scary tasks are just 5–10 small boring ones wearing a trench coat. Name the monster; we'll slice it.</p>
|
||
</div>
|
||
<div class="card">
|
||
<form id="breaker-form" class="row">
|
||
<input id="breaker-input" type="text" placeholder="The big scary task… e.g. 'do my taxes'" autocomplete="off">
|
||
<button class="btn" type="submit">Break it down</button>
|
||
</form>
|
||
<div id="breaker-out" hidden>
|
||
<div class="progress-wrap"><div id="breaker-progress" class="progress"></div></div>
|
||
<p class="tiny" id="breaker-count"></p>
|
||
<ul id="breaker-steps" class="steps"></ul>
|
||
<div class="row gap">
|
||
<button class="btn ghost" id="breaker-add" type="button">+ add step</button>
|
||
<button class="btn ghost" id="breaker-reset" type="button">start over</button>
|
||
</div>
|
||
</div>
|
||
<p class="tiny">Steps are editable — click any of them to rewrite it your way. Everything saves in this browser.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FOCUS TIMER ============ -->
|
||
<section id="timer" class="tool" hidden>
|
||
<div class="tool-head">
|
||
<h1>Focus timer</h1>
|
||
<p class="sub">A timer for time-blind brains: you always see how much time is left, how much is gone, and what phase you're in.</p>
|
||
</div>
|
||
<div class="card center">
|
||
<div class="presets">
|
||
<button class="chip preset" data-min="10">10 min</button>
|
||
<button class="chip preset" data-min="25">25 min</button>
|
||
<button class="chip preset" data-min="45">45 min</button>
|
||
<button class="chip preset break" data-min="5">5 min break</button>
|
||
<button class="chip preset break" data-min="15">15 min break</button>
|
||
</div>
|
||
<div class="timer-wrap">
|
||
<svg viewBox="0 0 220 220" class="ring" aria-hidden="true">
|
||
<circle class="ring-bg" cx="110" cy="110" r="100"/>
|
||
<circle id="ring-fg" class="ring-fg" cx="110" cy="110" r="100"/>
|
||
</svg>
|
||
<div class="timer-readout">
|
||
<div id="timer-time" class="timer-time">25:00</div>
|
||
<div id="timer-phase" class="timer-phase">pick a length</div>
|
||
</div>
|
||
</div>
|
||
<div class="row center gap">
|
||
<button class="btn" id="timer-start">start</button>
|
||
<button class="btn ghost" id="timer-reset">reset</button>
|
||
</div>
|
||
<p class="tiny" id="timer-note">Tip: 25 minutes is a suggestion, not a law. The best length is the one you'll actually start.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ DOPAMINE MENU ============ -->
|
||
<section id="dopamine" class="tool" hidden>
|
||
<div class="tool-head">
|
||
<h1>Dopamine menu</h1>
|
||
<p class="sub">Quick, healthy mood hits so your brain stops hijacking you for worse ones. Pick how long you have.</p>
|
||
</div>
|
||
<div class="card center">
|
||
<div class="presets">
|
||
<button class="chip menu-pick" data-min="5">5 min</button>
|
||
<button class="chip menu-pick" data-min="15">15 min</button>
|
||
<button class="chip menu-pick" data-min="30">30 min</button>
|
||
<button class="chip menu-pick" data-min="60">60 min</button>
|
||
</div>
|
||
<div id="menu-item" class="menu-item" hidden>
|
||
<p id="menu-text" class="menu-text"></p>
|
||
</div>
|
||
<div class="row center gap" id="menu-actions" hidden>
|
||
<button class="btn ghost" id="menu-reroll">something else</button>
|
||
<button class="btn" id="menu-done">did it ✓</button>
|
||
</div>
|
||
<p class="tiny" id="menu-streak"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ ONE THING ============ -->
|
||
<section id="now" class="tool" hidden>
|
||
<div class="tool-head">
|
||
<h1>One thing</h1>
|
||
<p class="sub">Not the whole task. Not the project. The next physical action your hands can actually do.</p>
|
||
</div>
|
||
<div class="card center">
|
||
<form id="now-form" class="row">
|
||
<input id="now-input" type="text" placeholder="The next physical action… e.g. 'open the tax folder'" autocomplete="off">
|
||
<button class="btn" type="submit">lock it in</button>
|
||
</form>
|
||
<div id="now-view" hidden>
|
||
<p class="now-label">the one thing:</p>
|
||
<p id="now-text" class="now-text"></p>
|
||
<div class="row center gap">
|
||
<button class="btn" id="now-done">done ✓</button>
|
||
<button class="btn ghost" id="now-edit">change</button>
|
||
</div>
|
||
<p class="tiny">If it still feels too big, start with the 2-minute version: just open the thing and look at it.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer class="foot">
|
||
<p><strong>myadhd.dev</strong> — free tools, no signup, no tracking. Everything you type or save lives only in this browser (localStorage). Clear your browser data and it's gone.</p>
|
||
<p class="tiny">Not medical advice. Just friendly scaffolding for a brain that works differently.</p>
|
||
</footer>
|
||
|
||
<script src="/static/app.js" defer></script>
|
||
</body>
|
||
</html>
|