Quick-API-Client/options.html at main · jomardyan/Quick-API-Client · 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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quick API Client Options</title>
  <link rel="stylesheet" href="options.css">
</head>
<body data-theme="light">
  <main class="shell">
    <header class="top">
      <div>
        <p class="eyebrow">Chrome / Edge extension</p>
        <h1>Quick API Client – Options</h1>
        <p class="sub">Set defaults, theme, and startup behavior.</p>
      </div>
      <div class="actions">
        <button id="saveBtn" class="primary">Save</button>
        <button id="resetBtn" class="ghost">Reset to defaults</button>
      </div>
    </header>

    <div class="content-area">
    <section class="panel">
      <div class="row">
        <label for="themeSelect">Theme</label>
        <select id="themeSelect">
          <option value="light">Light</option>
          <option value="dark">Dark</option>
        </select>
        <p class="hint">Applies to popup and options pages.</p>
      </div>

      <div class="row">
        <label for="defaultUrl">Default URL</label>
        <input id="defaultUrl" type="text" placeholder="https://api.example.com/resource">
      </div>

      <div class="row dual">
        <div>
          <label for="timeoutSeconds">Request timeout (seconds)</label>
          <input id="timeoutSeconds" type="number" min="1" max="60" step="1" value="15">
          <p class="hint">Max time to wait before aborting a request.</p>
        </div>
        <div>
          <label for="historySize">History size</label>
          <input id="historySize" type="number" min="0" max="50" step="1" value="8">
          <p class="hint">0 disables history; otherwise recent requests kept in popup (max 50).</p>
        </div>
      </div>

      <div class="row">
        <label for="defaultQuery">Default query params</label>
        <textarea id="defaultQuery" rows="3" placeholder='[{"key":"q","value":"test"}] or lines: q: test'></textarea>
        <p class="hint">JSON array of key/value objects, or one per line as key: value.</p>
      </div>

      <div class="row">
        <label for="defaultHeaders">Default headers</label>
        <textarea id="defaultHeaders" rows="4" placeholder='[{"key":"Accept","value":"application/json"}] or lines: Accept: application/json'></textarea>
      </div>

      <div class="row">
        <label for="defaultBody">Default body</label>
        <textarea id="defaultBody" rows="5" placeholder='{"name":"Ada"}'></textarea>
      </div>

      <div class="row check-grid">
        <label class="check">
          <input id="restoreLast" type="checkbox">
          <span>Restore last request when opening popup</span>
        </label>
        <label class="check">
          <input id="historyEnabled" type="checkbox" checked>
          <span>Enable request history in popup</span>
        </label>
      </div>

      <div class="row">
        <button id="clearHistoryBtn" class="ghost align-start">Clear saved history</button>
      </div>
    </section>

    <section class="panel" id="environments">
      <div class="row">
        <div class="label-inline">
          <label>Environments</label>
          <div class="pill-actions">
            <button id="addEnvBtn" class="ghost small">+ New</button>
            <button id="deleteEnvBtn" class="ghost small">Delete</button>
          </div>
        </div>
        <p class="hint">Use <code>{{VAR_NAME}}</code> in URL, headers, and body. Select the active environment in the popup toolbar.</p>
      </div>
      <div class="row">
        <label for="envNameSelect">Environment</label>
        <select id="envNameSelect">
          <option value="">No environments yet — click + New</option>
        </select>
      </div>
      <div id="envEditor" class="env-editor" style="display:none">
        <div class="row">
          <label for="envNameInput">Name</label>
          <input id="envNameInput" type="text" placeholder="Production">
        </div>
        <div class="row">
          <label for="envVarsInput">Variables</label>
          <textarea id="envVarsInput" rows="6" placeholder='[{"key":"base_url","value":"https://api.example.com"}]&#10;or one per line:&#10;base_url: https://api.example.com&#10;api_version: v2'></textarea>
          <p class="hint">JSON array <code>[{"key":"…","value":"…"}]</code> or one <code>key: value</code> per line.</p>
        </div>
        <div class="row">
          <button id="saveEnvBtn" class="primary align-start">Save environment</button>
        </div>
      </div>
    </section>

    <p id="status" class="status hint" role="status" aria-live="polite"></p>
    </div>
  </main>
  <!-- Confirmation Modal -->
  <div id="confirmModal" class="modal" role="alertdialog" aria-labelledby="confirmModalMessage" aria-modal="true">
    <div class="modal-content" style="max-width: 380px;">
      <div class="modal-body">
        <p id="confirmModalMessage" style="font-size: 14px; color: var(--md-sys-color-on-surface); padding: 4px 0 12px;"></p>
      </div>
      <div class="modal-footer">
        <button id="confirmModalOkBtn" class="primary">Delete</button>
        <button id="confirmModalCancelBtn" class="ghost">Cancel</button>
      </div>
    </div>
  </div>

  <script src="defaults.js"></script>
  <script src="popup/ui.js"></script>
  <script src="options.js"></script>
</body>
</html>