Spaces:
Running on Zero
Running on Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>The Unwritten Almanac</title> | |
| <link rel="stylesheet" href="/static/styles.css" /> | |
| </head> | |
| <body> | |
| <svg class="icon-sprite" aria-hidden="true"> | |
| <symbol id="icon-quill" viewBox="0 0 24 24"> | |
| <path d="M20 4c-6 1-11 5-13 11l-2 5 5-2c6-2 10-7 11-13z" /> | |
| <path d="M9 15c2-3 4-5 7-7" /> | |
| </symbol> | |
| <symbol id="icon-gap" viewBox="0 0 24 24"> | |
| <path d="M12 3v4M12 17v4M3 12h4M17 12h4" /> | |
| <circle cx="12" cy="12" r="3.2" /> | |
| </symbol> | |
| <symbol id="icon-plan" viewBox="0 0 24 24"> | |
| <path d="M5 4h11l3 3v13H5z" /> | |
| <path d="M9 9h6M9 13h6M9 17h3" /> | |
| </symbol> | |
| <symbol id="icon-rank" viewBox="0 0 24 24"> | |
| <path d="M6 20V10M12 20V4M18 20v-7" /> | |
| </symbol> | |
| <symbol id="icon-example" viewBox="0 0 24 24"> | |
| <path d="M12 3l2.2 5.6L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.8-.4z" /> | |
| </symbol> | |
| <symbol id="icon-download" viewBox="0 0 24 24"> | |
| <path d="M12 4v11M7 11l5 5 5-5M5 20h14" /> | |
| </symbol> | |
| <symbol id="icon-reset" viewBox="0 0 24 24"> | |
| <path d="M4 5v5h5" /> | |
| <path d="M5.5 14a7 7 0 1 0 1.2-6.7L4 10" /> | |
| </symbol> | |
| <symbol id="icon-search" viewBox="0 0 24 24"> | |
| <circle cx="11" cy="11" r="6" /> | |
| <path d="M16 16l4 4" /> | |
| </symbol> | |
| <symbol id="icon-x" viewBox="0 0 24 24"> | |
| <path d="M6 6l12 12M18 6L6 18" /> | |
| </symbol> | |
| <symbol id="icon-check" viewBox="0 0 24 24"> | |
| <path d="M5 12l4 4 10-11" /> | |
| </symbol> | |
| <symbol id="icon-mic" viewBox="0 0 24 24"> | |
| <path d="M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z" /> | |
| <path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6" /> | |
| </symbol> | |
| <symbol id="icon-upload" viewBox="0 0 24 24"> | |
| <path d="M12 17V4M7 9l5-5 5 5M5 20h14" /> | |
| </symbol> | |
| </svg> | |
| <div class="desk-glow"></div> | |
| <main id="atlas-view" class="atlas-shell" aria-label="Live project atlas"> | |
| <section class="atlas-stage"> | |
| <header class="atlas-topbar"> | |
| <div class="atlas-title-block"> | |
| <p class="atlas-kicker">Live project atlas</p> | |
| <h1>Idea Map</h1> | |
| </div> | |
| <form id="atlas-search-form" class="atlas-search" role="search"> | |
| <label class="sr-only" for="atlas-search">Search the project atlas</label> | |
| <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg> | |
| <input | |
| id="atlas-search" | |
| type="search" | |
| autocomplete="off" | |
| spellcheck="false" | |
| placeholder="Search projects, ideas, quests..." | |
| /> | |
| <button id="atlas-search-clear" class="atlas-search-clear" type="button" title="Clear search" hidden> | |
| <svg class="icon" aria-hidden="true"><use href="#icon-x"></use></svg> | |
| </button> | |
| </form> | |
| <div class="atlas-actions"> | |
| <span id="atlas-status" class="atlas-status" aria-live="polite">Loading atlas.</span> | |
| <button id="refresh-dashboard" class="btn btn-ghost" type="button" title="Refresh the project atlas"> | |
| <svg class="icon"><use href="#icon-reset"></use></svg> | |
| Refresh map | |
| </button> | |
| <button id="open-advisor" class="btn btn-ink" type="button" title="Open the idea advisor"> | |
| <svg class="icon"><use href="#icon-quill"></use></svg> | |
| Open advisor | |
| </button> | |
| </div> | |
| </header> | |
| <section class="atlas-layout"> | |
| <aside class="atlas-panel atlas-left" aria-label="Atlas filters"> | |
| <div class="atlas-stat-grid" id="atlas-stats"></div> | |
| <section id="atlas-search-section" class="atlas-section atlas-search-section" hidden> | |
| <div class="eyebrow">Best matches</div> | |
| <p id="atlas-search-summary" class="atlas-search-summary"></p> | |
| <div id="atlas-search-results" class="atlas-list"></div> | |
| </section> | |
| <section class="atlas-section"> | |
| <div class="eyebrow">Clusters</div> | |
| <div id="atlas-clusters" class="atlas-list"></div> | |
| </section> | |
| <section class="atlas-section"> | |
| <div class="eyebrow">Quests</div> | |
| <div id="atlas-quests" class="atlas-list"></div> | |
| </section> | |
| </aside> | |
| <section class="atlas-map-wrap" aria-label="Embedding project map"> | |
| <svg id="atlas-svg" class="atlas-svg" viewBox="0 0 100 100" role="img" aria-label="Project embedding map"></svg> | |
| <div id="atlas-refresh-progress" class="atlas-refresh-progress" hidden></div> | |
| </section> | |
| <aside class="atlas-panel atlas-right" aria-label="Project details"> | |
| <section class="atlas-section"> | |
| <div class="eyebrow">Selected project</div> | |
| <div id="atlas-detail" class="atlas-detail"></div> | |
| </section> | |
| <section class="atlas-section"> | |
| <div class="eyebrow">Cluster report</div> | |
| <div id="atlas-report" class="atlas-report"></div> | |
| </section> | |
| </aside> | |
| </section> | |
| </section> | |
| </main> | |
| <main id="advisor-view" class="almanac advisor-shell" hidden> | |
| <section class="sheet" aria-label="The Unwritten Almanac"> | |
| <header class="masthead"> | |
| <div class="masthead-l"> | |
| <svg class="crest" viewBox="0 0 64 64" aria-hidden="true"> | |
| <g | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="1.5" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| > | |
| <path d="M32 30c-6-12-18-16-26-10 2 9 9 17 20 18" /> | |
| <path d="M32 30c6-12 18-16 26-10-2 9-9 17-20 18" /> | |
| <path d="M32 32c-5 9-14 12-21 9 2-6 7-11 15-12" opacity=".6" /> | |
| <path d="M32 32c5 9 14 12 21 9-2-6-7-11-15-12" opacity=".6" /> | |
| <path | |
| d="M32 20c-2.4 0-4 2-4 6s1.6 14 4 18c2.4-4 4-14 4-18s-1.6-6-4-6z" | |
| fill="currentColor" | |
| fill-opacity=".08" | |
| /> | |
| <circle cx="28.5" cy="24.5" r="2.3" fill="currentColor" fill-opacity=".15" /> | |
| <circle cx="35.5" cy="24.5" r="2.3" fill="currentColor" fill-opacity=".15" /> | |
| <circle cx="28.5" cy="24.5" r=".7" fill="currentColor" /> | |
| <circle cx="35.5" cy="24.5" r=".7" fill="currentColor" /> | |
| <path d="M30 19c-1-2-2-3.4-3.6-4M34 19c1-2 2-3.4 3.6-4" /> | |
| </g> | |
| </svg> | |
| <div> | |
| <h1>The Unwritten Almanac</h1> | |
| <div class="sub">Originality map and build plan for your next idea</div> | |
| </div> | |
| </div> | |
| <div class="masthead-r"> | |
| <div id="provenance" class="provenance" aria-live="polite">Opening the current map.</div> | |
| <button id="open-atlas" class="btn btn-ghost" type="button" title="Return to the atlas">Atlas</button> | |
| </div> | |
| </header> | |
| <nav class="mobile-nav" aria-label="Sections"> | |
| <button type="button" class="active" data-tab="page">Page</button> | |
| <button type="button" data-tab="proof">Evidence</button> | |
| <button type="button" data-tab="almanac">Board</button> | |
| </nav> | |
| <div id="spread" class="spread" data-tab="page"> | |
| <aside class="col col-margin" aria-label="Idea board and setup"> | |
| <section class="section"> | |
| <div class="eyebrow">Idea board <span id="idea-count" class="count">0</span></div> | |
| <div id="ideas" class="idea-list"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="eyebrow">Builder profile</div> | |
| <div id="profile" class="profile-grid"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="eyebrow">Goals <span id="goal-count" class="count">0</span></div> | |
| <div id="goals" class="goal-list"></div> | |
| </section> | |
| </aside> | |
| <section class="col col-page" aria-label="Current idea"> | |
| <form id="turn-form" class="composer"> | |
| <label class="sr-only" for="message">Describe your idea</label> | |
| <textarea | |
| id="message" | |
| name="message" | |
| class="prompt" | |
| rows="2" | |
| autocomplete="off" | |
| placeholder="A local-first agent that helps..." | |
| ></textarea> | |
| <div class="underline"></div> | |
| <div class="toolbar voice-row" aria-label="Voice input"> | |
| <button id="record-voice" class="btn btn-voice" type="button" title="Record an idea"> | |
| <svg class="icon"><use href="#icon-mic"></use></svg> | |
| Speak | |
| </button> | |
| <button id="upload-voice" class="btn btn-ghost" type="button" title="Transcribe a voice note"> | |
| <svg class="icon"><use href="#icon-upload"></use></svg> | |
| Voice note | |
| </button> | |
| <input id="voice-file" type="file" accept="audio/*" hidden /> | |
| </div> | |
| <div class="toolbar command-row" aria-label="Advisor commands"> | |
| <button id="submit" class="btn btn-ink" type="submit" title="Score this idea against the map"> | |
| <svg class="icon"><use href="#icon-quill"></use></svg> | |
| Score idea | |
| </button> | |
| <div class="menu" data-menu="actions"> | |
| <button | |
| type="button" | |
| id="actions-trigger" | |
| class="btn menu-trigger" | |
| aria-haspopup="true" | |
| aria-expanded="false" | |
| title="More advisor actions" | |
| > | |
| Actions | |
| <span class="caret" aria-hidden="true">▾</span> | |
| </button> | |
| <div class="menu-list" id="actions-menu" role="menu" hidden> | |
| <button type="button" class="menu-item" role="menuitem" data-command="write bolder and find whitespace"> | |
| <svg class="icon"><use href="#icon-gap"></use></svg> | |
| <span class="mi-text"><strong>Find a gap</strong><small>An under-explored direction to try</small></span> | |
| </button> | |
| <button type="button" class="menu-item" role="menuitem" data-command="make a build plan"> | |
| <svg class="icon"><use href="#icon-plan"></use></svg> | |
| <span class="mi-text"><strong>Make a plan</strong><small>Draft build steps for the current idea</small></span> | |
| </button> | |
| <button type="button" class="menu-item" role="menuitem" data-command="compare ideas"> | |
| <svg class="icon"><use href="#icon-rank"></use></svg> | |
| <span class="mi-text"><strong>Compare ideas</strong><small>Rank the ideas on your board</small></span> | |
| </button> | |
| </div> | |
| </div> | |
| <span class="spacer"></span> | |
| <div class="menu" data-menu="more"> | |
| <button | |
| type="button" | |
| id="more-trigger" | |
| class="btn btn-ghost menu-trigger btn-icon" | |
| aria-haspopup="true" | |
| aria-expanded="false" | |
| title="Export and session options" | |
| aria-label="More options" | |
| > | |
| <span class="caret-dots" aria-hidden="true">⋯</span> | |
| </button> | |
| <div class="menu-list menu-list-right" id="more-menu" role="menu" hidden> | |
| <button type="button" id="load-demo" class="menu-item" role="menuitem" aria-label="Load example idea board"> | |
| <svg class="icon"><use href="#icon-example"></use></svg> | |
| Example board | |
| </button> | |
| <button type="button" id="export-notes" class="menu-item" role="menuitem" aria-label="Export build notes" disabled> | |
| <svg class="icon"><use href="#icon-download"></use></svg> | |
| Build notes | |
| </button> | |
| <button type="button" id="export-chapter" class="menu-item" role="menuitem" aria-label="Export idea-board chapter" disabled> | |
| <svg class="icon"><use href="#icon-download"></use></svg> | |
| Chapter | |
| </button> | |
| <button type="button" id="export-artifact" class="menu-item" role="menuitem" aria-label="Export current page as PNG" disabled> | |
| <svg class="icon"><use href="#icon-download"></use></svg> | |
| Page PNG | |
| </button> | |
| <button type="button" id="reset-session" class="menu-item menu-item-danger" role="menuitem" aria-label="Reset session"> | |
| <svg class="icon"><use href="#icon-reset"></use></svg> | |
| Reset session | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| <div id="corrections" class="marginalia" aria-live="polite"></div> | |
| <div id="turn-progress" class="turn-progress" hidden aria-live="polite"> | |
| <div class="turn-stage"> | |
| <span id="turn-stage-icon" class="ts-icon">🪶</span> | |
| <span id="turn-stage-text" class="ts-text">Thinking</span> | |
| <span id="turn-tokens" class="ts-tokens"></span> | |
| <span id="turn-eta" class="ts-eta"></span> | |
| </div> | |
| <div class="turn-bar" role="progressbar" aria-label="Turn progress"> | |
| <div id="turn-bar-fill" class="turn-bar-fill"></div> | |
| </div> | |
| <div id="tool-chips" class="tool-chips"></div> | |
| </div> | |
| <article class="fate"> | |
| <span id="verdict-stamp" class="verdict-stamp verdict-ready"> | |
| <span class="seal-dot"></span> | |
| <span id="verdict">READY</span> | |
| </span> | |
| <p id="ink" class="prophecy"> | |
| The book is open. Describe a project idea, compare it against the current map, then turn the result into | |
| concrete build steps. | |
| </p> | |
| </article> | |
| <section class="section plan"> | |
| <div class="eyebrow">Build path</div> | |
| <ol id="plan" class="plan-list"></ol> | |
| </section> | |
| </section> | |
| <aside class="col col-proof" aria-label="Score and evidence"> | |
| <section class="section"> | |
| <div class="eyebrow">Score</div> | |
| <div class="seal-wrap"> | |
| <div id="seal" class="seal"> | |
| <span id="overall" class="seal-overall">0.0</span> | |
| <span class="seal-of">out of ten</span> | |
| </div> | |
| <div class="seal-meta"> | |
| <div id="seal-verdict" class="v ready">READY</div> | |
| <div id="seal-copy" class="t">No idea has been scored yet.</div> | |
| </div> | |
| </div> | |
| <div id="score" class="quadrants" aria-label="Score breakdown"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="eyebrow">Idea map</div> | |
| <div id="wood-map" class="wood-map"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="eyebrow">Closest project echoes</div> | |
| <div id="projects" class="project-list"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="eyebrow">Directions to test</div> | |
| <div id="whitespace" class="whitespace-list"></div> | |
| </section> | |
| </aside> | |
| </div> | |
| </section> | |
| </main> | |
| <script type="module" src="/static/app.js"></script> | |
| </body> | |
| </html> | |