devbot/index.html at main · RMCMinor/devbot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DevBot · Chat</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="app" role="main">
      <header class="topbar">
        <div class="brand">
          <span class="caret">&gt;_</span>
          <span class="title">DevBot</span>
          <span class="chip">coding</span>
        </div>
        <div class="actions">
          <button id="themeToggle" class="ghost" aria-label="Toggle theme" title="Toggle theme (Alt+T)">
            &#9788;
          </button>
          <button id="clearChat" class="ghost" aria-label="Clear chat" title="Clear (Alt+K)">
            &#128465;
          </button>
        </div>
      </header>

      <section id="chat" class="chat" aria-live="polite" aria-relevant="additions" aria-label="Chat transcript"></section>

      <form id="composer" class="composer" autocomplete="off" aria-label="Message composer">
        <label class="sr-only" for="prompt">Message DevBot</label>
        <textarea id="prompt" name="prompt" rows="1" placeholder="Ask about code… (Enter to send, Shift+Enter for new line)" spellcheck="true"></textarea>
        <button id="send" class="send" type="submit" aria-label="Send">Send</button>
      </form>

      <footer class="hint" aria-hidden="true">
        <span>Tip: Use ``` code fences — they’ll render nicely.</span>
      </footer>
    </main>
    <script src="script.js"></script>
  </body>
</html>