collin/strudel-claude
pre-demo / index.html
| 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>Strudel × Claude</title> |
| 7 | <link rel="stylesheet" href="/src/style.css" /> |
| 8 | </head> |
| 9 | <body> |
| 10 | <div id="app"> |
| 11 | <!-- FAR LEFT: session sidebar --> |
| 12 | <aside id="sidebar"> |
| 13 | <header class="pane-header sidebar-header"> |
| 14 | <span class="logo">🌀 Strudel × Claude</span> |
| 15 | <button id="sidebar-hide" class="icon-btn" title="Hide tracks">«</button> |
| 16 | </header> |
| 17 | <button id="new-session" class="new-session">＋ New track</button> |
| 18 | <nav id="session-list" class="session-list" aria-label="Tracks"></nav> |
| 19 | |
| 20 | <div class="sidebar-footer"> |
| 21 | <button id="theme-btn" class="key-btn" aria-haspopup="dialog" aria-expanded="false"> |
| 22 | <span aria-hidden="true">◐</span> |
| 23 | <span id="theme-state">Theme</span> |
| 24 | </button> |
| 25 | <div id="theme-panel" class="key-panel" role="dialog" aria-label="Theme" hidden> |
| 26 | <label class="key-label" for="site-theme">Lighting</label> |
| 27 | <select id="site-theme" class="key-select"></select> |
| 28 | <label class="key-label key-label-spaced" for="code-theme">Code colors</label> |
| 29 | <select id="code-theme" class="key-select"></select> |
| 30 | <p class="key-note"> |
| 31 | The code pane shares the site background, so a code theme sets syntax |
| 32 | colors only. |
| 33 | </p> |
| 34 | </div> |
| 35 | |
| 36 | <button id="prompt-btn" class="key-btn" aria-haspopup="dialog" aria-expanded="false"> |
| 37 | <span aria-hidden="true">📜</span> |
| 38 | <span id="prompt-state">System prompt</span> |
| 39 | </button> |
| 40 | </div> |
| 41 | </aside> |
| 42 | |
| 43 | <!-- MIDDLE: Strudel IDE --> |
| 44 | <section id="ide"> |
| 45 | <header class="pane-header"> |
| 46 | <div class="ide-title"> |
| 47 | <button id="sidebar-show" class="icon-btn" title="Show tracks" hidden>☰</button> |
| 48 | <span class="logo" aria-hidden="true">🌀</span> |
| 49 | <button id="song-title" class="song-title" type="button" title="Rename track"></button> |
| 50 | </div> |
| 51 | <div class="transport"> |
| 52 | <button id="playstop" class="btn btn-transport">▶ Play</button> |
| 53 | </div> |
| 54 | </header> |
| 55 | <div id="editor"></div> |
| 56 | <div class="status"> |
| 57 | <span id="ide-status">ready</span> |
| 58 | </div> |
| 59 | </section> |
| 60 | |
| 61 | <!-- RIGHT: Claude chat --> |
| 62 | <section id="chat"> |
| 63 | <header class="pane-header chat-header"> |
| 64 | <button id="model-btn" class="key-btn" aria-haspopup="dialog" aria-expanded="false"> |
| 65 | <span aria-hidden="true">✦</span> |
| 66 | <span id="model-state">Model</span> |
| 67 | </button> |
| 68 | <div id="model-panel" class="key-panel" role="dialog" aria-label="Model" hidden> |
| 69 | <label class="key-label" for="model-select">Claude model</label> |
| 70 | <select id="model-select" class="key-select"></select> |
| 71 | <p id="model-note" class="key-note"></p> |
| 72 | </div> |
| 73 | |
| 74 | <button id="key-btn" class="key-btn" aria-haspopup="dialog" aria-expanded="false"> |
| 75 | <span aria-hidden="true">🔑</span> |
| 76 | <span id="key-state">Add API key</span> |
| 77 | </button> |
| 78 | <div id="key-panel" class="key-panel" role="dialog" aria-label="Anthropic API key" hidden> |
| 79 | <label class="key-label" for="key-input">Anthropic API key</label> |
| 80 | <input |
| 81 | id="key-input" |
| 82 | class="key-input" |
| 83 | type="password" |
| 84 | placeholder="sk-ant-…" |
| 85 | autocomplete="off" |
| 86 | spellcheck="false" |
| 87 | /> |
| 88 | <p id="key-note" class="key-note"></p> |
| 89 | <div class="key-actions"> |
| 90 | <button id="key-save" class="btn btn-send" type="button">Save</button> |
| 91 | <button id="key-clear" class="btn" type="button" hidden>Remove</button> |
| 92 | </div> |
| 93 | </div> |
| 94 | </header> |
| 95 | <div id="messages"></div> |
| 96 | <form id="chat-form"> |
| 97 | <div class="composer"> |
| 98 | <textarea |
| 99 | id="chat-input" |
| 100 | rows="2" |
| 101 | placeholder="e.g. dark rolling techno with a deep bass and off-beat hats" |
| 102 | ></textarea> |
| 103 | <button id="send" class="btn btn-send" type="submit">Send</button> |
| 104 | </div> |
| 105 | </form> |
| 106 | </section> |
| 107 | </div> |
| 108 | |
| 109 | <!-- System prompt editor: a modal rather than a header popover, because the |
| 110 | prompt is a few hundred lines of Markdown. --> |
| 111 | <div id="prompt-modal" class="modal" hidden> |
| 112 | <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="prompt-title"> |
| 113 | <header class="modal-header"> |
| 114 | <h2 id="prompt-title">System prompt</h2> |
| 115 | <button id="prompt-close" class="icon-btn" type="button" title="Close">✕</button> |
| 116 | </header> |
| 117 | <textarea id="prompt-text" class="prompt-text" spellcheck="false"></textarea> |
| 118 | <p id="prompt-note" class="key-note"></p> |
| 119 | <div class="key-actions"> |
| 120 | <button id="prompt-save" class="btn btn-send" type="button">Save</button> |
| 121 | <button id="prompt-reset" class="btn" type="button" hidden>Reset to default</button> |
| 122 | </div> |
| 123 | </div> |
| 124 | </div> |
| 125 | |
| 126 | <script type="module" src="/src/main.js"></script> |
| 127 | </body> |
| 128 | </html> |