-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpopup.html
More file actions
304 lines (269 loc) · 14 KB
/
popup.html
File metadata and controls
304 lines (269 loc) · 14 KB
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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QueryBoost</title>
<link rel="stylesheet" href="src/popup.css" />
<style>
html, body {
width: 320px;
overflow-x: hidden;
}
</style>
</head>
<body>
<!-- Header -->
<header class="qb-header">
<div class="qb-logo" aria-hidden="true">
<img src="icons/icon32.png" alt="QueryBoost Logo">
</div>
<div class="qb-header-text">
<div class="qb-title">QueryBoost</div>
<div class="qb-tagline">Silent AI query enhancement</div>
</div>
<!-- Tab nav pills -->
<nav class="qb-tabs" aria-label="Settings sections">
<button class="qb-tab qb-tab-active" data-tab="main">Main</button>
<button class="qb-tab" data-tab="settings">Settings</button>
<button class="qb-tab" data-tab="custom">Custom</button>
<button class="qb-tab" data-tab="stats">Stats</button>
</nav>
</header>
<!-- ═══ TAB: MAIN ═══ -->
<main class="qb-body qb-panel" id="panel-main">
<!-- On/Off Toggle -->
<div class="qb-toggle-row" id="qb-toggle-row">
<div class="qb-toggle-label">
<span class="qb-toggle-label-main">Enhancement</span>
<span class="qb-toggle-label-sub" id="qb-toggle-status">Loading…</span>
</div>
<label class="qb-toggle" aria-label="Toggle query enhancement">
<input type="checkbox" id="qb-toggle-input" />
<span class="qb-toggle-track"></span>
</label>
</div>
<!-- Status Cards -->
<div class="qb-status-grid" id="qb-status-grid">
<div class="qb-card" id="qb-platform-card">
<span class="qb-card-label">Platform</span>
<span class="qb-card-value" id="qb-platform-value">
<span class="dot"></span>
<span id="qb-platform-name">Detecting…</span>
</span>
</div>
<div class="qb-card">
<span class="qb-card-label">Last Boost</span>
<span class="qb-card-value">
<span id="qb-last-type">No boosts yet</span>
</span>
</div>
<div class="qb-card qb-card-wide">
<span class="qb-card-label">Lifetime Boosts</span>
<span class="qb-card-value">
<span class="qb-count-num" id="qb-boost-count">0</span>
<span class="qb-count-label">queries enhanced</span>
</span>
</div>
<div class="qb-card qb-card-wide" id="qb-last-boost-card">
<span class="qb-card-label">Last Boost</span>
<span class="qb-card-value" id="qb-last-boost-time" style="font-size:12px;color:#55556a;">No boosts recorded yet</span>
</div>
</div>
<!-- Domain Mode Card -->
<div class="qb-card qb-card-wide">
<span class="qb-card-label">Domain Mode</span>
<span class="qb-card-value" style="flex-direction:column;align-items:flex-start;gap:6px;">
<span style="font-size:11px;color:#8888a0;" id="qb-mode-desc">Tunes the AI's register to your context</span>
<select class="qb-select" id="qb-domain-select" aria-label="Domain mode">
<option value="general">🌐 General</option>
<option value="developer">💻 Developer</option>
<option value="student">🎓 Student</option>
<option value="researcher">🔬 Researcher</option>
<option value="writer">✍️ Writer</option>
</select>
<!-- #4: persona prefix preview -->
<span class="qb-mode-persona" id="qb-mode-persona" style="display:none;"></span>
</span>
</div>
<!-- Prompt Mode Card -->
<div class="qb-card qb-card-wide" id="qb-prompt-mode-card">
<span class="qb-card-label">Prompt Mode</span>
<span class="qb-card-value" style="flex-direction:column;align-items:flex-start;gap:6px;">
<div style="display:flex;gap:8px;width:100%;">
<button class="qb-prompt-mode-btn qb-prompt-mode-active" id="qb-prompt-default-btn" data-mode="default">
⚡ Default
</button>
<button class="qb-prompt-mode-btn" id="qb-prompt-custom-btn" data-mode="custom">
✏️ My Custom
</button>
</div>
<span style="font-size:11px;color:#8888a0;line-height:1.5;" id="qb-prompt-mode-desc">
Using the built-in universal prompt
</span>
</span>
</div>
<!-- #9: Last boost detail card -->
<div class="qb-card qb-card-wide qb-last-boost-detail" id="qb-last-boost-detail-card" style="display:none;">
<span class="qb-card-label" style="display:flex;justify-content:space-between;align-items:center;">
Last Boost Details
<button class="qb-detail-toggle" id="qb-detail-toggle" aria-expanded="false">Show ▾</button>
</span>
<div id="qb-last-boost-detail" class="qb-last-boost-detail-body" style="display:none;"></div>
</div>
<!-- How it works blurb -->
<div class="qb-card" style="flex-direction:row;align-items:flex-start;gap:8px;min-height:unset;">
<span style="font-size:15px;margin-top:1px;flex-shrink:0;">🔍</span>
<span style="font-size:11px;color:#8888a0;line-height:1.55;">
Wraps queries with a universal enhancement prompt before sending. Click the icon in the toast to preview. Use <strong style="color:var(--qb-accent);">Settings</strong> for transparency & confirm mode.
</span>
</div>
<!-- Manual test / demo button -->
<div class="qb-card qb-card-wide" style="gap:8px;padding:10px 14px;">
<span class="qb-card-label" style="margin-bottom:2px;">Test Enhancement</span>
<span style="font-size:11px;color:#8888a0;line-height:1.5;margin-bottom:6px;">
Type any query into the AI input on the active tab, then click below to preview the enhancement without submitting.
</span>
<button class="qb-btn qb-btn-primary" id="qb-test-boost-btn" style="width:100%;">⚡ Preview Boost on Active Tab</button>
<div id="qb-test-boost-result" style="display:none;font-size:11px;line-height:1.5;margin-top:6px;padding:8px 10px;border-radius:8px;background:rgba(124,106,247,0.08);border:1px solid rgba(124,106,247,0.2);color:#a78bfa;"></div>
</div>
</main>
<!-- ═══ TAB: SETTINGS ═══ -->
<main class="qb-body qb-panel qb-panel-hidden" id="panel-settings">
<!-- Confirm Mode Toggle (ON by default) -->
<div class="qb-toggle-row" style="border:1px solid rgba(0,225,170,0.22);border-radius:10px;padding:10px 12px;background:rgba(0,225,170,0.04);margin-bottom:4px;">
<div class="qb-toggle-label">
<span class="qb-toggle-label-main" style="color:#00e1aa;">✦ Confirm Before Sending</span>
<span class="qb-toggle-label-sub">Show a before/after preview and approve every boost</span>
</div>
<label class="qb-toggle" aria-label="Toggle confirm mode">
<input type="checkbox" id="qb-confirm-input" checked />
<span class="qb-toggle-track"></span>
</label>
</div>
<div style="font-size:10px;color:#55556a;padding:0 2px 8px;line-height:1.5;">
When ON: a modal shows your original vs enhanced query — you choose what to send.<br>
When OFF: queries are enhanced and submitted automatically (silent mode).
</div>
<!-- Transparency Toggle -->
<div class="qb-toggle-row">
<div class="qb-toggle-label">
<span class="qb-toggle-label-main">Wrapper Transparency</span>
<span class="qb-toggle-label-sub">Show injected wrapper text in toast preview</span>
</div>
<label class="qb-toggle" aria-label="Toggle wrapper transparency">
<input type="checkbox" id="qb-transparency-input" />
<span class="qb-toggle-track"></span>
</label>
</div>
<!-- Platform tuning summary -->
<div class="qb-card qb-card-wide">
<span class="qb-card-label">Platform Tuning</span>
<div class="qb-platform-tuning-list">
<div class="qb-pt-row"><span class="qb-pt-name">🟠 Claude</span><span class="qb-pt-desc">Flowing prose, section headers</span></div>
<div class="qb-pt-row"><span class="qb-pt-name">🟢 ChatGPT</span><span class="qb-pt-desc">Clean markdown</span></div>
<div class="qb-pt-row"><span class="qb-pt-name">🔵 Gemini</span><span class="qb-pt-desc">Concise, factual, bullets</span></div>
<div class="qb-pt-row"><span class="qb-pt-name">🟣 Perplexity</span><span class="qb-pt-desc">Scannable, cited</span></div>
</div>
</div>
<!-- Data management -->
<div class="qb-card qb-card-wide" style="gap:8px;">
<span class="qb-card-label">Data Management</span>
<button class="qb-btn qb-btn-danger" id="qb-reset-feedback">🗑 Clear feedback data</button>
</div>
</main>
<!-- ═══ TAB: CUSTOM WRAPPERS ═══ -->
<main class="qb-body qb-panel qb-panel-hidden" id="panel-custom">
<div class="qb-custom-intro">
Tell the AI how you like to work — your language, expertise level, and preferences. Applied to every query automatically.
</div>
<div class="qb-custom-type-picker">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;">
<label class="qb-card-label">Your personal instructions</label>
<button class="qb-btn qb-btn-ghost qb-btn-xs" id="qb-example-btn" title="Load a personal example into the editor">📋 Use example</button>
</div>
</div>
<!-- Quick-insert preference chips -->
<div class="qb-chips" id="qb-chips">
<button class="qb-chip" data-insert="Respond in [your language].">+ My language</button>
<button class="qb-chip" data-insert="Assume I am a software developer.">+ I'm a developer</button>
<button class="qb-chip" data-insert="Keep answers short and to the point.">+ Keep it short</button>
<button class="qb-chip" data-insert="Always include a practical code example.">+ Always use examples</button>
<button class="qb-chip" data-insert="Assume I am a beginner — explain everything clearly.">+ Beginner level</button>
<button class="qb-chip" data-insert="Do not use markdown formatting — plain text only.">+ No markdown</button>
</div>
<!-- Sync storage usage meter -->
<div class="qb-storage-meter" id="qb-storage-meter">
<div class="qb-storage-meter-header">
<span class="qb-card-label">Sync storage used</span>
<span class="qb-storage-val" id="qb-storage-val">–</span>
</div>
<div class="qb-storage-track">
<div class="qb-storage-bar" id="qb-storage-bar" style="width:0%"></div>
</div>
<span class="qb-storage-limit">100 KB limit — custom wrappers count toward this</span>
</div>
<textarea
class="qb-custom-textarea"
id="qb-custom-textarea"
placeholder="Write your instructions here — {{query}} is optional. Without {{query}} (query is auto-added at the top): Respond in Spanish. Be concise. Use bullet points. With {{query}} (you control placement): I am a 21-year-old student. {{query}} Explain simply. Skip advanced details."
rows="7"
spellcheck="false"
></textarea>
<!-- #3: live preview pane -->
<div class="qb-custom-preview-section" id="qb-custom-preview-section">
<div class="qb-card-label qb-preview-label-row">
Live preview
<span class="qb-preview-sample-note">using sample query</span>
</div>
<div class="qb-custom-preview-box" id="qb-custom-preview-box">Type your wrapper above to see a preview…</div>
</div>
<div class="qb-custom-actions">
<button class="qb-btn qb-btn-primary" id="qb-custom-save">Save</button>
<button class="qb-btn qb-btn-ghost" id="qb-custom-clear">Reset to default</button>
</div>
<div class="qb-custom-status" id="qb-custom-status"></div>
<!-- #7: export / import -->
<div class="qb-import-export-row">
<button class="qb-btn qb-btn-ghost qb-btn-xs" id="qb-export-btn" title="Download all custom wrappers as JSON">↑ Export JSON</button>
<button class="qb-btn qb-btn-ghost qb-btn-xs" id="qb-import-btn" title="Import wrappers from a JSON file">↓ Import JSON</button>
<input type="file" id="qb-import-file" accept=".json" style="display:none;" />
</div>
<div id="qb-custom-list-section">
<ul class="qb-custom-list" id="qb-custom-list">
<li class="qb-custom-empty">No custom instructions yet — using the smart default.<br>Add yours above to personalize every response.</li>
</ul>
</div>
</main>
<!-- ═══ TAB: STATS ═══ -->
<main class="qb-body qb-panel qb-panel-hidden" id="panel-stats">
<div class="qb-card-label" style="margin-bottom:8px;">Feedback Summary</div>
<div id="qb-feedback-summary" class="qb-ab-col"></div>
<div class="qb-card-label" style="margin-top:14px;margin-bottom:6px;">Recent Feedback</div>
<ul class="qb-feedback-log" id="qb-feedback-log">
<li class="qb-feedback-empty">No feedback recorded yet.</li>
</ul>
</main>
<div class="qb-divider"></div>
<!-- Footer -->
<footer class="qb-footer">
<a href="https://github.com/omerTT/queryboost" target="_blank" rel="noopener noreferrer" class="qb-footer-link">
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13
-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66
.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15
-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09
2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82
2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01
2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
GitHub
</a>
<a id="qb-privacy-link" href="#" class="qb-footer-link">🔒 Privacy</a>
<span class="qb-version">v2.1.0</span>
</footer>
<script src="src/constants.js"></script>
<script src="src/popup.js"></script>
</body>
</html>