olho/options.html at main · CarlasHub/olho · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Olho Settings</title>
    <link rel="stylesheet" href="src/shared/renaissance-theme.css" />
    <link rel="stylesheet" href="options.css" />
  </head>
  <body>
    <div class="olho-app-shell options-shell">
      <div class="olho-main-shell">
        <header class="header olho-topbar">
          <div>
            <p class="eyebrow"><img class="eyebrow-icon" src="icons/icon-32.png" alt="" aria-hidden="true" /> Olho</p>
            <h1>Settings</h1>
          </div>
          <nav class="olho-nav olho-header-nav" aria-label="Olho sections">
            <a class="olho-nav-link" href="popup.html">Capture</a>
            <a class="olho-nav-link" href="record.html">Record</a>
            <a class="olho-nav-link" href="gallery.html">Memory</a>
            <a class="olho-nav-link" href="export-report.html">Export</a>
            <a class="olho-nav-link" href="options.html" aria-current="page">Settings</a>
            <a class="olho-nav-link" href="privacy.html">Privacy</a>
          </nav>
          <span class="status-pill" data-state="info">Local Configuration</span>
        </header>

        <main class="layout settings-layout">
          <aside class="card settings-nav-card" aria-label="Settings categories">
            <h2 class="settings-nav-title">Categories</h2>
            <nav class="settings-nav" aria-label="Settings sections">
              <button type="button" class="settings-nav-btn active" data-settings-target="generalSettings">General</button>
              <button type="button" class="settings-nav-btn" data-settings-target="captureSettings">Capture</button>
              <button type="button" class="settings-nav-btn" data-settings-target="editorSettings">Editor</button>
              <button type="button" class="settings-nav-btn" data-settings-target="exportSettings">Export</button>
              <button type="button" class="settings-nav-btn" data-settings-target="memorySettings">Memory</button>
              <button type="button" class="settings-nav-btn" data-settings-target="recordingSettings">Recording</button>
              <button type="button" class="settings-nav-btn" id="settingsStorageNavBtn" data-settings-target="storageSettings">Storage</button>
              <button type="button" class="settings-nav-btn" data-settings-target="shortcutsSettings">Shortcuts</button>
              <button type="button" class="settings-nav-btn" data-settings-target="privacySettings">Privacy</button>
              <button type="button" class="settings-nav-btn" data-settings-target="permissionsSettings">Permissions</button>
              <button type="button" class="settings-nav-btn" data-settings-target="advancedSettings">Advanced</button>
            </nav>
          </aside>

          <form id="optionsForm" class="card settings-main-card" aria-labelledby="options-heading">
            <h2 id="options-heading">Local Preferences</h2>

            <details class="section-disclosure settings-group" id="generalSettings" data-settings-section="generalSettings" open>
              <summary>General</summary>
              <label class="field">
                <span>Default after-capture action</span>
                <select id="defaultAfterCaptureAction">
                  <option value="editor">Open editor</option>
                  <option value="library">Save to Memory</option>
                  <option value="download">Download file</option>
                  <option value="clipboard">Copy to clipboard</option>
                </select>
              </label>
              <label class="field">
                <span>Default save location</span>
                <select id="defaultSaveLocation" disabled>
                  <option value="local_library">Local library (required)</option>
                </select>
              </label>
            </details>

            <details class="section-disclosure settings-group" id="captureSettings" data-settings-section="captureSettings">
              <summary>Capture</summary>
              <label class="field">
                <span>Capture delay</span>
                <select id="captureDelaySeconds">
                  <option value="0">Off</option>
                  <option value="3">3 seconds</option>
                  <option value="5">5 seconds</option>
                  <option value="10">10 seconds</option>
                </select>
              </label>
              <label class="field">
                <span>Thumbnail size</span>
                <select id="thumbnailSize">
                  <option value="160">160 px</option>
                  <option value="240">240 px</option>
                  <option value="320">320 px</option>
                  <option value="480">480 px</option>
                </select>
              </label>
              <label class="field">
                <input type="checkbox" id="autoDownload" />
                <span>Auto-download after capture</span>
              </label>
            </details>

            <details class="section-disclosure settings-group" id="editorSettings" data-settings-section="editorSettings">
              <summary>Editor</summary>
              <p class="hint">Editor actions, crop/resize behaviour, and annotation defaults are managed locally.</p>
              <label class="field">
                <span>Skip editor</span>
                <select id="skipEditorMode">
                  <option value="never">Never</option>
                  <option value="always">Always</option>
                  <option value="fullPageOnly">Only for full-page captures</option>
                </select>
              </label>
            </details>

            <details class="section-disclosure settings-group" id="exportSettings" data-settings-section="exportSettings">
              <summary>Export</summary>
              <label class="field">
                <span>Default export format</span>
                <select id="defaultExportFormat">
                  <option value="png">PNG</option>
                  <option value="jpg">JPG</option>
                  <option value="webp">WebP</option>
                  <option value="pdf">PDF</option>
                </select>
              </label>
              <p class="hint">All exports are local files generated in this browser profile.</p>
            </details>

            <details class="section-disclosure settings-group" id="memorySettings" data-settings-section="memorySettings">
              <summary>Memory</summary>
              <label class="field">
                <input type="checkbox" id="autoSave" />
                <span>Auto-save captures to the local library</span>
              </label>
              <label class="field">
                <input type="checkbox" id="askBeforeDeleting" />
                <span>Ask before moving items to trash</span>
              </label>
            </details>

            <details class="section-disclosure settings-group" id="recordingSettings" data-settings-section="recordingSettings">
              <summary>Recording</summary>
              <label class="field">
                <input type="checkbox" id="soundToggle" />
                <span>Play a sound after capture</span>
              </label>
              <p class="hint">Recording output is saved locally as WebM.</p>
            </details>

            <details class="section-disclosure settings-group" id="privacySettings" data-settings-section="privacySettings" open>
              <summary>Privacy</summary>
              <label class="field">
                <input type="checkbox" id="privacyLocalOnlyMode" checked disabled />
                <span>Privacy local-only mode (locked on)</span>
              </label>
              <label class="field">
                <input type="checkbox" id="storeSourceUrl" />
                <span>Store source URL in capture metadata (optional and potentially sensitive)</span>
              </label>
            </details>

            <button type="submit" class="primary">Save Settings</button>
          </form>

          <section class="card settings-support-card" data-settings-section="privacySettings" aria-labelledby="privacy-heading">
            <h2 id="privacy-heading">Privacy</h2>
            <p>Olho runs locally in your browser. Captures and recordings are stored in local IndexedDB and stay under your control.</p>
            <ul class="list">
              <li>No analytics</li>
              <li>No cloud sync</li>
              <li>No accounts</li>
              <li>No remote logging</li>
            </ul>
          </section>

          <section class="card settings-support-card" id="permissionsSettings" data-settings-section="permissionsSettings" aria-labelledby="permissions-heading">
            <h2 id="permissions-heading">Permission Explanations</h2>
            <ul class="list">
              <li><strong>activeTab</strong>: capture the current tab when you click capture actions.</li>
              <li><strong>tabs</strong>: open Olho pages (editor, gallery, recorder, reports).</li>
              <li><strong>scripting</strong>: draw capture overlays and full-page progress on target pages.</li>
              <li><strong>clipboardWrite</strong>: copy local files to clipboard when you explicitly choose copy actions.</li>
              <li><strong>storage</strong>: save settings and local media metadata.</li>
              <li><strong>desktopCapture</strong>: start screen/tab/window recording through browser picker.</li>
              <li><strong>downloads</strong>: export files to your Downloads folder when you choose export.</li>
              <li><strong>offscreen</strong>: run local offscreen DOM processing for video poster thumbnails.</li>
            </ul>
          </section>

          <section class="card settings-support-card" id="storageSettings" data-settings-section="storageSettings" aria-labelledby="storage-heading">
            <h2 id="storage-heading">Storage</h2>
            <div id="storageStats" class="storage-stats"></div>
            <div id="pressureSummary" class="hint">Storage pressure: calculating...</div>
            <div class="actions">
              <button type="button" id="refreshUsageBtn">Refresh Usage</button>
              <button type="button" id="emptyTrashBtn" class="ghost">Empty Trash</button>
              <button type="button" id="deleteLargeBtn" class="ghost">Delete Largest 10</button>
              <button type="button" id="deleteAllBtn" class="danger">Delete All Local Data</button>
            </div>
            <p class="hint">
              Export first if you need backups. Delete removes captures, recordings, folders, and blobs from this browser profile.
            </p>
          </section>

          <section class="card settings-support-card" id="shortcutsSettings" data-settings-section="shortcutsSettings" aria-labelledby="shortcuts-heading">
            <h2 id="shortcuts-heading">Shortcuts</h2>
            <p>Use extension command shortcuts configured in Chrome extension settings for capture and recording actions.</p>
          </section>

          <section class="card settings-support-card" id="advancedSettings" data-settings-section="advancedSettings" aria-labelledby="advanced-heading">
            <h2 id="advanced-heading">Advanced</h2>
            <p>Local data maintenance actions stay under your control. No cloud sync, no remote execution, no telemetry.</p>
          </section>

          <p id="status" class="status" role="status" aria-live="polite"></p>
        </main>
      </div>
    </div>

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