aboutsummaryrefslogtreecommitdiff
path: root/src/options/options.html
blob: d317f1e309088740a41286e6b3789c9d8c71b989 (plain)
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>AI Compose Settings</title>
    <style>
      body {
        font-family: system-ui, sans-serif;
        margin: 0;
        padding: 16px;
        width: 360px;
        background: var(--bg);
        color: var(--fg);
      }
      h2 {
        margin-top: 0;
        font-size: 1.1rem;
      }
      label {
        display: block;
        margin: 12px 0 6px;
        font-size: 0.9rem;
      }
      input {
        width: 100%;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--input-bg);
        color: var(--fg);
      }
      button {
        margin-top: 14px;
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        background: var(--accent);
        color: white;
        font-weight: 500;
        cursor: pointer;
      }
      p#msg {
        margin-top: 10px;
        font-size: 0.85rem;
        color: var(--accent);
      }
      @media (prefers-color-scheme: light) {
        :root {
          --bg: #ffffff;
          --fg: #111111;
          --border: #cccccc;
          --input-bg: #f9f9f9;
          --accent: #3b82f6;
        }
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #1e1e1e;
          --fg: #f5f5f5;
          --border: #444444;
          --input-bg: #2a2a2a;
          --accent: #60a5fa;
        }
      }
    </style>
  </head>
  <body>
    <h2>Settings</h2>
    <label for="endpoint">Proxy Endpoint</label>
    <input id="endpoint" type="url" />
    <label for="token">Auth Token</label>
    <input id="token" type="text" />
    <button id="save">Save</button>
    <p id="msg"></p>

    <script src="../browser-polyfill.js"></script>
    <script src="options.js"></script>
  </body>
</html>