build-small-hackathon/hackathon-advisor
16
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <title>The Unwritten Almanac</title>7 <link rel="stylesheet" href="/static/styles.css" />8 </head>9 <body>10 <svg class="icon-sprite" aria-hidden="true">11 <symbol id="icon-quill" viewBox="0 0 24 24">12 <path d="M20 4c-6 1-11 5-13 11l-2 5 5-2c6-2 10-7 11-13z" />13 <path d="M9 15c2-3 4-5 7-7" />14 </symbol>15 <symbol id="icon-gap" viewBox="0 0 24 24">16 <path d="M12 3v4M12 17v4M3 12h4M17 12h4" />17 <circle cx="12" cy="12" r="3.2" />18 </symbol>19 <symbol id="icon-plan" viewBox="0 0 24 24">20 <path d="M5 4h11l3 3v13H5z" />21 <path d="M9 9h6M9 13h6M9 17h3" />22 </symbol>23 <symbol id="icon-rank" viewBox="0 0 24 24">24 <path d="M6 20V10M12 20V4M18 20v-7" />25 </symbol>26 <symbol id="icon-example" viewBox="0 0 24 24">27 <path d="M12 3l2.2 5.6L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.8-.4z" />28 </symbol>29 <symbol id="icon-download" viewBox="0 0 24 24">30 <path d="M12 4v11M7 11l5 5 5-5M5 20h14" />31 </symbol>32 <symbol id="icon-reset" viewBox="0 0 24 24">33 <path d="M4 5v5h5" />34 <path d="M5.5 14a7 7 0 1 0 1.2-6.7L4 10" />35 </symbol>36 <symbol id="icon-search" viewBox="0 0 24 24">37 <circle cx="11" cy="11" r="6" />38 <path d="M16 16l4 4" />39 </symbol>40 <symbol id="icon-x" viewBox="0 0 24 24">41 <path d="M6 6l12 12M18 6L6 18" />42 </symbol>43 <symbol id="icon-chat" viewBox="0 0 24 24">44 <path d="M4 5h16v11H9l-5 4z" />45 <path d="M8 9h8M8 12h5" />46 </symbol>47 <symbol id="icon-check" viewBox="0 0 24 24">48 <path d="M5 12l4 4 10-11" />49 </symbol>50 <symbol id="icon-mic" viewBox="0 0 24 24">51 <path d="M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z" />52 <path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6" />53 </symbol>54 <symbol id="icon-upload" viewBox="0 0 24 24">55 <path d="M12 17V4M7 9l5-5 5 5M5 20h14" />56 </symbol>57 </svg>58 59 <div class="desk-glow"></div>60 <main id="atlas-view" class="atlas-shell" aria-label="Live project atlas">61 <section class="atlas-stage">62 <header class="atlas-topbar">63 <div class="atlas-title-block">64 <p class="atlas-kicker">Live project atlas</p>65 <h1>Idea Map</h1>66 </div>67 <form id="atlas-search-form" class="atlas-search" role="search">68 <label class="sr-only" for="atlas-search">Search the project atlas</label>69 <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>70 <input71 id="atlas-search"72 type="search"73 autocomplete="off"74 spellcheck="false"75 placeholder="Search projects, ideas, quests..."76 />77 <button id="atlas-search-clear" class="atlas-search-clear" type="button" title="Clear search" hidden>78 <svg class="icon" aria-hidden="true"><use href="#icon-x"></use></svg>79 </button>80 </form>81 <div class="atlas-actions">82 <span id="atlas-status" class="atlas-status" aria-live="polite">Loading atlas.</span>83 <button id="refresh-dashboard" class="btn btn-ghost" type="button" title="Refresh the project atlas">84 <svg class="icon"><use href="#icon-reset"></use></svg>85 Refresh map86 </button>87 <button88 id="open-atlas-chat"89 class="btn btn-ghost"90 type="button"91 title="Chat with the atlas guide"92 aria-haspopup="dialog"93 aria-controls="atlas-chat"94 >95 <svg class="icon"><use href="#icon-chat"></use></svg>96 Ask the atlas97 </button>98 <button id="open-advisor" class="btn btn-ink" type="button" title="Open the idea advisor">99 <svg class="icon"><use href="#icon-quill"></use></svg>100 Open advisor101 </button>102 </div>103 </header>104 105 <section class="atlas-layout">106 <aside class="atlas-panel atlas-left" aria-label="Atlas filters">107 <div class="atlas-stat-grid" id="atlas-stats"></div>108 <section id="atlas-search-section" class="atlas-section atlas-search-section" hidden>109 <div class="eyebrow">Best matches</div>110 <p id="atlas-search-summary" class="atlas-search-summary"></p>111 <div id="atlas-search-results" class="atlas-list"></div>112 </section>113 <section class="atlas-section">114 <div class="eyebrow">Clusters</div>115 <div id="atlas-clusters" class="atlas-list"></div>116 </section>117 <section class="atlas-section">118 <div class="eyebrow">Quests</div>119 <div id="atlas-quests" class="atlas-list"></div>120 </section>121 </aside>122 123 <section class="atlas-map-wrap" aria-label="Embedding project map">124 <svg id="atlas-svg" class="atlas-svg" viewBox="0 0 100 100" role="img" aria-label="Project embedding map"></svg>125 <div id="atlas-refresh-progress" class="atlas-refresh-progress" hidden></div>126 </section>127 128 <aside class="atlas-panel atlas-right" aria-label="Project details">129 <section class="atlas-section">130 <div class="eyebrow">Selected project</div>131 <div id="atlas-detail" class="atlas-detail"></div>132 </section>133 <section class="atlas-section">134 <div class="eyebrow">Cluster report</div>135 <div id="atlas-report" class="atlas-report"></div>136 </section>137 </aside>138 </section>139 140 <div id="atlas-chat-scrim" class="atlas-chat-scrim" hidden></div>141 <aside142 id="atlas-chat"143 class="atlas-chat-drawer"144 role="dialog"145 aria-modal="false"146 aria-label="Atlas guide chat"147 hidden148 >149 <header class="atlas-chat-header">150 <div class="atlas-chat-title">151 <p class="atlas-kicker">Atlas guide</p>152 <h2>Ask the field</h2>153 </div>154 <div class="atlas-chat-header-actions">155 <button id="atlas-chat-clear" class="atlas-chat-iconbtn" type="button" title="Clear conversation">156 <svg class="icon"><use href="#icon-reset"></use></svg>157 </button>158 <button id="atlas-chat-close" class="atlas-chat-iconbtn" type="button" title="Close chat" aria-label="Close chat">159 <svg class="icon"><use href="#icon-x"></use></svg>160 </button>161 </div>162 </header>163 <div id="atlas-chat-action" class="atlas-chat-action" hidden></div>164 <div id="atlas-chat-log" class="atlas-chat-log"></div>165 <div id="atlas-chat-status" class="sr-only" role="status" aria-live="polite"></div>166 <div id="atlas-chat-suggestions" class="atlas-chat-suggestions"></div>167 <form id="atlas-chat-form" class="atlas-chat-composer">168 <label class="sr-only" for="atlas-chat-input">Ask about the atlas</label>169 <input170 id="atlas-chat-input"171 type="text"172 autocomplete="off"173 spellcheck="false"174 placeholder="Ask what everyone is building..."175 />176 <button id="atlas-chat-send" class="btn btn-ink" type="submit">Ask</button>177 </form>178 </aside>179 </section>180 </main>181 182 <main id="advisor-view" class="almanac advisor-shell" hidden>183 <section class="sheet" aria-label="The Unwritten Almanac">184 <header class="masthead">185 <div class="masthead-l">186 <svg class="crest" viewBox="0 0 64 64" aria-hidden="true">187 <g188 fill="none"189 stroke="currentColor"190 stroke-width="1.5"191 stroke-linecap="round"192 stroke-linejoin="round"193 >194 <path d="M32 30c-6-12-18-16-26-10 2 9 9 17 20 18" />195 <path d="M32 30c6-12 18-16 26-10-2 9-9 17-20 18" />196 <path d="M32 32c-5 9-14 12-21 9 2-6 7-11 15-12" opacity=".6" />197 <path d="M32 32c5 9 14 12 21 9-2-6-7-11-15-12" opacity=".6" />198 <path199 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"200 fill="currentColor"201 fill-opacity=".08"202 />203 <circle cx="28.5" cy="24.5" r="2.3" fill="currentColor" fill-opacity=".15" />204 <circle cx="35.5" cy="24.5" r="2.3" fill="currentColor" fill-opacity=".15" />205 <circle cx="28.5" cy="24.5" r=".7" fill="currentColor" />206 <circle cx="35.5" cy="24.5" r=".7" fill="currentColor" />207 <path d="M30 19c-1-2-2-3.4-3.6-4M34 19c1-2 2-3.4 3.6-4" />208 </g>209 </svg>210 <div>211 <h1>The Unwritten Almanac</h1>212 <div class="sub">Originality map and build plan for your next idea</div>213 </div>214 </div>215 <div class="masthead-r">216 <div id="provenance" class="provenance" aria-live="polite">Opening the current map.</div>217 <button id="open-atlas" class="btn btn-ghost" type="button" title="Return to the atlas">Atlas</button>218 </div>219 </header>220 221 <nav class="mobile-nav" aria-label="Sections">222 <button type="button" class="active" data-tab="page">Page</button>223 <button type="button" data-tab="proof">Evidence</button>224 <button type="button" data-tab="almanac">Board</button>225 </nav>226 227 <div id="spread" class="spread" data-tab="page">228 <aside class="col col-margin" aria-label="Idea board and setup">229 <section class="section">230 <div class="eyebrow">Idea board <span id="idea-count" class="count">0</span></div>231 <div id="ideas" class="idea-list"></div>232 </section>233 234 <section class="section">235 <div class="eyebrow">Builder profile</div>236 <div id="profile" class="profile-grid"></div>237 </section>238 239 <section class="section">240 <div class="eyebrow">Goals <span id="goal-count" class="count">0</span></div>241 <div id="goals" class="goal-list"></div>242 </section>243 </aside>244 245 <section class="col col-page" aria-label="Current idea">246 <form id="turn-form" class="composer">247 <label class="sr-only" for="message">Describe your idea</label>248 <textarea249 id="message"250 name="message"251 class="prompt"252 rows="2"253 autocomplete="off"254 placeholder="A local-first agent that helps..."255 ></textarea>256 <div class="underline"></div>257 258 <div class="toolbar voice-row" aria-label="Voice input">259 <button id="record-voice" class="btn btn-voice" type="button" title="Record an idea">260 <svg class="icon"><use href="#icon-mic"></use></svg>261 Speak262 </button>263 <button id="upload-voice" class="btn btn-ghost" type="button" title="Transcribe a voice note">264 <svg class="icon"><use href="#icon-upload"></use></svg>265 Voice note266 </button>267 <input id="voice-file" type="file" accept="audio/*" hidden />268 </div>269 270 <div class="toolbar command-row" aria-label="Advisor commands">271 <button id="submit" class="btn btn-ink" type="submit" title="Score this idea against the map">272 <svg class="icon"><use href="#icon-quill"></use></svg>273 Score idea274 </button>275 276 <div class="menu" data-menu="actions">277 <button278 type="button"279 id="actions-trigger"280 class="btn menu-trigger"281 aria-haspopup="true"282 aria-expanded="false"283 title="More advisor actions"284 >285 Actions286 <span class="caret" aria-hidden="true">▾</span>287 </button>288 <div class="menu-list" id="actions-menu" role="menu" hidden>289 <button type="button" class="menu-item" role="menuitem" data-command="write bolder and find whitespace">290 <svg class="icon"><use href="#icon-gap"></use></svg>291 <span class="mi-text"><strong>Find a gap</strong><small>An under-explored direction to try</small></span>292 </button>293 <button type="button" class="menu-item" role="menuitem" data-command="make a build plan">294 <svg class="icon"><use href="#icon-plan"></use></svg>295 <span class="mi-text"><strong>Make a plan</strong><small>Draft build steps for the current idea</small></span>296 </button>297 <button type="button" class="menu-item" role="menuitem" data-command="compare ideas">298 <svg class="icon"><use href="#icon-rank"></use></svg>299 <span class="mi-text"><strong>Compare ideas</strong><small>Rank the ideas on your board</small></span>300 </button>301 </div>302 </div>303 304 <span class="spacer"></span>305 306 <div class="menu" data-menu="more">307 <button308 type="button"309 id="more-trigger"310 class="btn btn-ghost menu-trigger btn-icon"311 aria-haspopup="true"312 aria-expanded="false"313 title="Export and session options"314 aria-label="More options"315 >316 <span class="caret-dots" aria-hidden="true">⋯</span>317 </button>318 <div class="menu-list menu-list-right" id="more-menu" role="menu" hidden>319 <button type="button" id="load-demo" class="menu-item" role="menuitem" aria-label="Load example idea board">320 <svg class="icon"><use href="#icon-example"></use></svg>321 Example board322 </button>323 <button type="button" id="export-notes" class="menu-item" role="menuitem" aria-label="Export build notes" disabled>324 <svg class="icon"><use href="#icon-download"></use></svg>325 Build notes326 </button>327 <button type="button" id="export-chapter" class="menu-item" role="menuitem" aria-label="Export idea-board chapter" disabled>328 <svg class="icon"><use href="#icon-download"></use></svg>329 Chapter330 </button>331 <button type="button" id="export-artifact" class="menu-item" role="menuitem" aria-label="Export current page as PNG" disabled>332 <svg class="icon"><use href="#icon-download"></use></svg>333 Page PNG334 </button>335 <button type="button" id="reset-session" class="menu-item menu-item-danger" role="menuitem" aria-label="Reset session">336 <svg class="icon"><use href="#icon-reset"></use></svg>337 Reset session338 </button>339 </div>340 </div>341 </div>342 </form>343 344 <div id="corrections" class="marginalia" aria-live="polite"></div>345 346 <div id="turn-progress" class="turn-progress" hidden aria-live="polite">347 <div class="turn-stage">348 <span id="turn-stage-icon" class="ts-icon">🪶</span>349 <span id="turn-stage-text" class="ts-text">Thinking</span>350 <span id="turn-tokens" class="ts-tokens"></span>351 <span id="turn-eta" class="ts-eta"></span>352 </div>353 <div class="turn-bar" role="progressbar" aria-label="Turn progress">354 <div id="turn-bar-fill" class="turn-bar-fill"></div>355 </div>356 <div id="tool-chips" class="tool-chips"></div>357 </div>358 359 <article class="fate">360 <span id="verdict-stamp" class="verdict-stamp verdict-ready">361 <span class="seal-dot"></span>362 <span id="verdict">READY</span>363 </span>364 <p id="ink" class="prophecy">365 The book is open. Describe a project idea, compare it against the current map, then turn the result into366 concrete build steps.367 </p>368 </article>369 370 <section class="section plan">371 <div class="eyebrow">Build path</div>372 <ol id="plan" class="plan-list"></ol>373 </section>374 </section>375 376 <aside class="col col-proof" aria-label="Score and evidence">377 <section class="section">378 <div class="eyebrow">Score</div>379 <div class="seal-wrap">380 <div id="seal" class="seal">381 <span id="overall" class="seal-overall">0.0</span>382 <span class="seal-of">out of ten</span>383 </div>384 <div class="seal-meta">385 <div id="seal-verdict" class="v ready">READY</div>386 <div id="seal-copy" class="t">No idea has been scored yet.</div>387 </div>388 </div>389 <div id="score" class="quadrants" aria-label="Score breakdown"></div>390 </section>391 392 <section class="section">393 <div class="eyebrow">Idea map</div>394 <div id="wood-map" class="wood-map"></div>395 </section>396 397 <section class="section">398 <div class="eyebrow">Closest project echoes</div>399 <div id="projects" class="project-list"></div>400 </section>401 402 <section class="section">403 <div class="eyebrow">Directions to test</div>404 <div id="whitespace" class="whitespace-list"></div>405 </section>406 </aside>407 </div>408 </section>409 </main>410 411 <script type="module" src="/static/app.js"></script>412 </body>413</html>414