web/index.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="#101018"><meta name="description" content="Orbit turns your live Codex allowance into a clear plan to reset."><title>Orbit — Make every percent count</title><link rel="icon" href="icon.svg"><link rel="stylesheet" href="style.css"><script src="app.js" defer></script></head><body>
<div class="ambient" aria-hidden="true"></div><div class="starfield" aria-hidden="true"><i style="--x:64.55%;--y:69.03%;--size:2.1px;--duration:5.0s;--delay:-0.7s"></i><i style="--x:81.78%;--y:33.31%;--size:1.4px;--duration:8.1s;--delay:-1.8s"></i><i style="--x:90.15%;--y:48.64%;--size:1.1px;--duration:8.6s;--delay:-5.7s"></i><i style="--x:8.72%;--y:82.34%;--size:1.9px;--duration:7.7s;--delay:-6.6s"></i><i style="--x:98.29%;--y:2.17%;--size:2.2px;--duration:7.2s;--delay:-2.5s"></i><i style="--x:61.02%;--y:33.77%;--size:1.8px;--duration:7.5s;--delay:-5.2s"></i><i style="--x:10.68%;--y:39.02%;--size:1.4px;--duration:7.7s;--delay:-9.3s"></i><i style="--x:77.01%;--y:52.46%;--size:1.2px;--duration:7.5s;--delay:-2.7s"></i><i style="--x:98.74%;--y:17.77%;--size:2.2px;--duration:4.1s;--delay:-7.8s"></i><i style="--x:34.94%;--y:56.69%;--size:1.5px;--duration:5.5s;--delay:-4.4s"></i><i style="--x:80.95%;--y:35.21%;--size:1.4px;--duration:7.9s;--delay:-1.8s"></i><i style="--x:36.02%;--y:51.10%;--size:1.6px;--duration:4.8s;--delay:-7.6s"></i><i style="--x:48.94%;--y:9.87%;--size:1.4px;--duration:4.3s;--delay:-3.4s"></i><i style="--x:12.20%;--y:25.67%;--size:1.7px;--duration:7.4s;--delay:-3.0s"></i><i style="--x:46.42%;--y:50.78%;--size:1.7px;--duration:8.5s;--delay:-2.2s"></i><i style="--x:76.79%;--y:54.76%;--size:2.1px;--duration:7.4s;--delay:-0.0s"></i><i style="--x:6.63%;--y:78.32%;--size:1.4px;--duration:7.1s;--delay:-1.0s"></i><i style="--x:56.09%;--y:40.83%;--size:1.6px;--duration:4.0s;--delay:-9.0s"></i><i style="--x:83.71%;--y:72.99%;--size:1.7px;--duration:5.1s;--delay:-1.9s"></i><i style="--x:83.11%;--y:32.95%;--size:1.5px;--duration:8.4s;--delay:-3.4s"></i><i style="--x:98.32%;--y:18.80%;--size:2.0px;--duration:5.5s;--delay:-1.4s"></i><i style="--x:46.31%;--y:80.97%;--size:1.1px;--duration:7.0s;--delay:-8.6s"></i><i style="--x:3.98%;--y:48.62%;--size:1.4px;--duration:6.3s;--delay:-8.3s"></i><i style="--x:43.84%;--y:30.49%;--size:1.2px;--duration:8.1s;--delay:-1.5s"></i><i style="--x:71.11%;--y:97.57%;--size:1.8px;--duration:8.5s;--delay:-1.2s"></i><i style="--x:60.59%;--y:59.98%;--size:1.1px;--duration:6.2s;--delay:-3.1s"></i><i style="--x:13.37%;--y:39.86%;--size:1.1px;--duration:8.6s;--delay:-1.7s"></i><i style="--x:54.49%;--y:69.83%;--size:1.0px;--duration:8.7s;--delay:-9.2s"></i><i style="--x:57.86%;--y:51.54%;--size:2.0px;--duration:7.0s;--delay:-2.2s"></i><i style="--x:92.14%;--y:20.66%;--size:1.7px;--duration:6.7s;--delay:-7.7s"></i><i style="--x:36.83%;--y:62.58%;--size:1.3px;--duration:7.5s;--delay:-1.6s"></i><i style="--x:35.26%;--y:51.55%;--size:1.9px;--duration:8.5s;--delay:-9.6s"></i><i style="--x:47.11%;--y:7.42%;--size:1.7px;--duration:6.9s;--delay:-7.3s"></i><i style="--x:5.70%;--y:78.19%;--size:1.2px;--duration:8.2s;--delay:-9.8s"></i><i style="--x:54.36%;--y:44.43%;--size:1.8px;--duration:4.7s;--delay:-6.6s"></i><i style="--x:84.28%;--y:91.66%;--size:1.8px;--duration:7.6s;--delay:-9.6s"></i><i style="--x:38.47%;--y:33.60%;--size:2.2px;--duration:4.3s;--delay:-3.5s"></i><i style="--x:73.85%;--y:92.41%;--size:2.0px;--duration:4.9s;--delay:-8.0s"></i><i style="--x:22.69%;--y:52.24%;--size:1.7px;--duration:8.9s;--delay:-2.2s"></i><i style="--x:35.22%;--y:30.90%;--size:1.4px;--duration:4.8s;--delay:-4.0s"></i><i style="--x:27.11%;--y:26.40%;--size:2.0px;--duration:4.5s;--delay:-4.6s"></i><i style="--x:5.03%;--y:6.51%;--size:2.0px;--duration:7.9s;--delay:-9.3s"></i><i style="--x:11.86%;--y:76.38%;--size:1.4px;--duration:7.9s;--delay:-5.7s"></i><i style="--x:43.44%;--y:61.09%;--size:1.3px;--duration:6.7s;--delay:-8.4s"></i><i style="--x:64.17%;--y:74.21%;--size:2.2px;--duration:4.6s;--delay:-7.7s"></i><i style="--x:95.05%;--y:53.36%;--size:1.4px;--duration:7.2s;--delay:-1.1s"></i><i style="--x:75.24%;--y:72.99%;--size:1.0px;--duration:6.7s;--delay:-4.9s"></i><i style="--x:72.70%;--y:42.28%;--size:1.1px;--duration:4.1s;--delay:-2.8s"></i><i style="--x:10.37%;--y:18.31%;--size:1.7px;--duration:8.4s;--delay:-1.8s"></i><i style="--x:55.90%;--y:48.20%;--size:1.8px;--duration:8.8s;--delay:-3.7s"></i><i style="--x:58.47%;--y:48.76%;--size:1.2px;--duration:6.3s;--delay:-9.7s"></i><i style="--x:73.33%;--y:20.41%;--size:1.4px;--duration:5.0s;--delay:-4.1s"></i><i style="--x:46.16%;--y:14.15%;--size:1.5px;--duration:8.9s;--delay:-3.9s"></i><i style="--x:63.62%;--y:95.72%;--size:1.5px;--duration:5.7s;--delay:-4.4s"></i><i style="--x:16.70%;--y:7.80%;--size:1.2px;--duration:7.4s;--delay:-7.8s"></i><i style="--x:76.69%;--y:14.78%;--size:1.3px;--duration:8.6s;--delay:-7.2s"></i><i style="--x:39.17%;--y:73.32%;--size:1.3px;--duration:4.5s;--delay:-9.1s"></i><i style="--x:85.53%;--y:48.93%;--size:1.5px;--duration:8.6s;--delay:-5.6s"></i><i style="--x:95.95%;--y:2.01%;--size:1.8px;--duration:5.3s;--delay:-7.1s"></i><i style="--x:91.18%;--y:3.06%;--size:1.8px;--duration:8.1s;--delay:-4.8s"></i><i style="--x:13.03%;--y:49.04%;--size:1.8px;--duration:6.7s;--delay:-5.6s"></i><i style="--x:32.73%;--y:32.69%;--size:1.3px;--duration:7.6s;--delay:-0.1s"></i><i style="--x:59.51%;--y:65.41%;--size:1.5px;--duration:6.1s;--delay:-7.8s"></i><i style="--x:50.27%;--y:6.56%;--size:1.9px;--duration:8.9s;--delay:-9.8s"></i><i style="--x:85.38%;--y:5.20%;--size:1.7px;--duration:4.9s;--delay:-8.3s"></i><i style="--x:13.53%;--y:49.62%;--size:2.1px;--duration:5.0s;--delay:-7.6s"></i><i style="--x:96.65%;--y:43.49%;--size:1.6px;--duration:4.4s;--delay:-9.1s"></i><i style="--x:16.65%;--y:73.64%;--size:1.9px;--duration:5.3s;--delay:-9.8s"></i><i style="--x:91.87%;--y:61.57%;--size:1.5px;--duration:6.4s;--delay:-4.4s"></i><i style="--x:65.75%;--y:96.74%;--size:1.1px;--duration:5.4s;--delay:-5.3s"></i><i style="--x:62.14%;--y:68.40%;--size:2.1px;--duration:8.2s;--delay:-3.7s"></i><i style="--x:41.11%;--y:55.52%;--size:2.1px;--duration:5.1s;--delay:-1.5s"></i><i style="--x:31.25%;--y:69.80%;--size:1.8px;--duration:6.2s;--delay:-5.0s"></i><i style="--x:67.44%;--y:84.00%;--size:1.0px;--duration:6.5s;--delay:-0.3s"></i><i style="--x:76.27%;--y:48.85%;--size:2.1px;--duration:7.5s;--delay:-7.8s"></i></div>
<div class="shell"><nav class="topbar" aria-label="Main navigation"><a class="brand" href="#" aria-label="Orbit home"><span class="brand-icon">o<span>•</span></span>orbit<span class="brand-label">FIND YOUR FLOW</span></a><div class="nav-actions"><button class="nav" id="connectionOpen"><span class="nav-symbol">◉</span> Connection</button><button class="nav" id="settingsOpen"><span class="nav-symbol">⚙</span> Preferences</button></div></nav>
<main><header class="hero"><span class="eyebrow"><i></i> USAGE. TIME. BALANCE.</span><h1>ORBIT</h1><p class="subtitle">MAKE EVERY PERCENT COUNT</p></header>
<div class="dashboard">
<section class="toolbar"><div class="connection"><i id="led"></i><strong id="connectionText">Connecting</strong><span id="lastSync">Loading your local usage reading…</span></div><label class="window-select"><span class="sr-only">Usage window</span><select id="windowSelect" aria-label="Usage window"><option>Weekly allowance</option></select></label><button id="refresh" class="button ghost refresh-button" aria-label="Refresh usage">↻ <span>Refresh</span></button></section>
<section id="connectPanel" class="connect-panel" hidden><div><span class="kicker">AUTOMATIC BY DESIGN</span><h2>Your usage, on your computer.</h2><p>Ask Codex to Start Orbit. Keep this computer awake and signed in to Codex for fresh readings.</p><div class="actions"><a class="button primary" href="/">Check connection ↻</a><span id="download" hidden></span><button class="text-button" id="demo">Explore a demo</button></div><p class="fine">Tracking and history stay on your computer. No pairing or publisher account is needed.</p></div><div class="connect-art" aria-hidden="true"><span>◉</span><span>⇄</span><span class="brand-icon">p•</span></div></section>
<div id="demoBanner" class="demo-banner" hidden>Demo mode · illustrative numbers, not your account <button id="exitDemo" class="text-button">Connect live data →</button></div>
<section class="panel trajectory"><div class="section-heading"><div><span class="kicker">THE PATH TO RESET</span><h2>Your rhythm, in view.</h2></div></div><p id="insight" class="insight">100% at the start. 0% at reset. Your actual balance alongside it.</p><div class="history-toolbar"><div class="chart-switch" role="group" aria-label="Chart time range"><button id="weekView" type="button" aria-pressed="true">Week</button><button id="dayView" type="button" aria-pressed="false">Day</button></div><span id="paceBadge" class="badge">Waiting for data</span><span class="fine" id="chartRange">24 hours from your reset time</span><label><span class="sr-only">History period</span><select id="historyView"><option value="current">This period</option><option value="long">Last 4 periods</option></select></label></div><div class="chart-wrap"><svg id="chart" viewBox="0 0 1000 255" role="img" aria-label="Remaining allowance over time"></svg><div class="chart-empty" id="chartEmpty">Your live plan will appear here.<span>No spreadsheets. No manual check-ins.</span></div></div><div class="chart-footer"><div class="legend"><span><i class="purple-line"></i>Target · even pacing</span><span><i class="pink-dot"></i>Actual balance</span><span><i class="gap-line"></i>Change during gaps</span></div></div><p class="fine history-note" id="historyNote">History begins with your first recorded reading.</p><div id="milestones" class="milestones"></div></section>
<section class="metrics"><article class="panel balance-panel"><div class="panel-top"><span class="kicker">AVAILABLE NOW</span><span class="chip">Allowance</span></div><div class="balance-layout"><div><div class="balance-number" id="remaining">—<span>%</span></div><p id="used">Waiting for your balance</p></div><div class="ring-wrap"><svg viewBox="0 0 140 140" aria-hidden="true"><circle class="ring-track" cx="70" cy="70" r="56"/><circle id="ring" class="ring-value" cx="70" cy="70" r="56"/></svg><span class="ring-symbol">✦</span></div></div><div class="panel-bottom"><span id="balanceCaption">Automatically synced from Codex</span><span class="purple">↗</span></div></article>
<article class="panel target-panel"><div class="panel-top"><span class="kicker">IDEAL BALANCE</span><span class="purple">◎</span></div><div class="balance-number" id="targetRemaining">—<span>%</span></div><p id="targetCaption">Even pacing from 100% to 0%</p><div class="pace-callout" id="targetDifference">Waiting for the reset time</div></article>
<article class="panel pace-panel"><div class="panel-top"><span class="kicker">YOUR HOURLY PACE</span><span class="spark">ϟ</span></div><div class="rate-number" id="hourly">—<small>% / hour</small></div><p id="rateCaption">A steady rate to reach your goal</p><div class="pace-callout" id="quarter">Your next move appears here.</div></article>
<article class="panel reset-panel"><div class="panel-top"><span class="kicker">NEXT RESET</span><button class="text-button reset-edit" id="resetOverrideOpen" type="button">Set reset time</button></div><div class="countdown" id="countdown">—<small>waiting for sync</small></div><p id="resetDate">Your reset time comes from Codex</p><div class="time-track"><div id="timeBar"></div></div><div class="track-label"><span>Week started</span><span>Fresh start</span></div></article></section>
<section class="bottom-grid" hidden><article class="panel focus-panel"><div class="focus-icon">✧</div><div><span class="kicker">NEXT 30 MINUTES</span><h2 id="sessionTarget">Make space for focused work.</h2><p id="sessionDetail">We’ll translate your balance into a useful session budget.</p></div><button class="button ghost" id="focusButton">Start focus timer</button><button class="text-button" id="focusCancel" hidden>End session</button></article><article class="panel plan-panel"><div><span class="kicker">YOUR PLAN</span><h2 id="planSummary">Use it all. Finish at reset.</h2><p id="planDetail">0% reserve · all remaining time</p></div><button class="icon-button" id="planEdit" aria-label="Edit pacing preferences">↗</button></article></section>
</div><footer><span>ORBIT <span class="footer-dot">/</span> Make every percent count.</span><span id="footerStatus">Local tracking · read-only account access</span></footer></main></div>
<dialog id="settings"><form method="dialog" id="preferences"><div class="section-heading"><div><span class="kicker">MAKE IT YOURS</span><h2>Your pacing preferences</h2></div><button class="icon-button" value="cancel" aria-label="Close preferences" formnovalidate>×</button></div><label>Leave a little room at reset<select id="reserve"><option value="0">Use 100% — no reserve</option><option value="1">Keep 1% in reserve</option><option value="2">Keep 2% in reserve</option><option value="5">Keep 5% in reserve</option><option value="10">Keep 10% in reserve</option></select></label><label>Time you expect to work before reset<select id="workHours"><option value="0">All remaining time</option><option value="1">1 hour</option><option value="2">2 hours</option><option value="4">4 hours</option><option value="8">8 hours</option><option value="16">16 hours</option><option value="24">24 hours</option><option value="40">40 hours</option></select></label><p class="fine">Working hours are a budget for future work. Update it when your plans change. These preferences affect your hourly and session budgets. The target chart always runs from 100% to 0% across the full allowance period.</p><button class="button primary" id="savePrefs" value="save">Save preferences</button></form></dialog>
<dialog id="resetOverrideDialog"><form id="resetOverrideForm"><div class="section-heading"><div><span class="kicker">PLAN AHEAD</span><h2>Announced reset</h2></div><button type="button" class="icon-button" id="resetOverrideCancel" aria-label="Close reset time">&times;</button></div><label>Reset date and time<input type="datetime-local" id="resetTimeInput" required></label><p class="fine" id="resetTimezone"></p><p class="fine">Adjusts your target graph and hourly pace. Your actual balance stays live. Saved in this browser until Codex detects a new allowance period.</p><p class="fine">This plans for an announcement; it does not reset your allowance.</p><div class="reset-actions"><button class="button primary" type="submit">Use this reset time</button><button class="text-button" id="resetOverrideClear" type="button">Use automatic reset</button></div></form></dialog><dialog id="connectionDialog"><div class="section-heading"><div><span class="kicker">CONNECTED, NOT COMPLICATED</span><h2>About your live connection</h2></div><button class="icon-button" id="closeConnection" aria-label="Close connection details">×</button></div><div class="connection-copy"><p>Orbit checks your signed-in Codex allowance every 60 seconds on this computer. No prompts are sent. Readings and history stay local.</p><p>The tracker runs with the dashboard closed. This computer must be awake and online for fresh readings. After a restart, ask Codex to Start Orbit. Windows users can optionally ask Enable Orbit startup for automatic tracking at sign-in.</p><p>This dashboard is local to this computer. Preferences and announced-reset overrides are saved in this browser. Ask Stop Orbit to stop tracking.</p><p class="fine">Independent companion for Codex. Not affiliated with OpenAI.</p></div></dialog><div class="toast" role="status" id="toast" hidden></div></body></html>