tldr-ext/options.html at main · 259a/tldr-ext · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Smart TL;DR — Settings</title>
  <link rel="stylesheet" href="options.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
  <div class="options-container">
    <div class="options-header">
      <span class="options-logo">⚡</span>
      <h1>Smart TL;DR</h1>
      <p class="options-subtitle">Configure your AI provider</p>
    </div>

    <div class="options-card">
      <div class="form-group">
        <label for="provider">Provider</label>
        <select id="provider">
          <option value="gemini">Gemini (Google)</option>
          <option value="openai">OpenAI</option>
          <option value="anthropic">Anthropic (Claude)</option>
          <option value="ollama">Ollama (Local)</option>
          <option value="lmstudio">LM Studio (Local)</option>
        </select>
      </div>

      <div class="form-group" id="apikey-group">
        <label for="apikey">API Key</label>
        <div class="input-wrapper">
          <input type="password" id="apikey" placeholder="Enter your API key">
          <button id="toggle-key" class="icon-btn" title="Show/Hide">👁️</button>
        </div>
      </div>

      <div class="form-group" id="model-group">
        <label for="model">Model <span class="hint">(leave blank for default)</span></label>
        <input type="text" id="model" placeholder="e.g. gpt-4o-mini">
      </div>

      <div class="form-group hidden" id="ollama-group">
        <label for="ollama-url">Ollama Base URL</label>
        <input type="text" id="ollama-url" placeholder="http://localhost:11434">
      </div>

      <div class="form-actions">
        <button id="test-btn" class="btn btn-secondary">Test Connection</button>
        <button id="save-btn" class="btn btn-primary">Save</button>
      </div>

      <div id="status" class="status hidden"></div>
    </div>

    <div class="options-footer">
      <a href="history.html" target="_blank" class="footer-link">📜 View History</a>
    </div>
  </div>

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