(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Margin</title>
7 <link rel="preconnect" href="https://fonts.googleapis.com" />
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9 <link
10 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
11 rel="stylesheet"
12 />
13 <link rel="stylesheet" href="sidepanel.css" />
14 </head>
15
16 <body>
17 <div class="sidebar">
18 <header class="sidebar-header">
19 <div class="sidebar-brand">
20 <span class="sidebar-logo">
21 <img src="../icons/logo.svg" alt="Margin" width="20" height="20" />
22 </span>
23 <span class="sidebar-title">Margin</span>
24 </div>
25 <div id="user-info" class="user-info" style="display: none">
26 <span id="user-handle" class="user-handle"></span>
27 </div>
28 </header>
29
30 <div id="current-page-info" class="current-page-info">
31 <div class="page-favicon"></div>
32 <span id="current-page-url" class="page-url">Loading...</span>
33 </div>
34
35 <div class="sidebar-content">
36 <div id="loading" class="loading">
37 <div class="spinner"></div>
38 <span>Loading...</span>
39 </div>
40
41 <div id="login-prompt" class="login-prompt" style="display: none">
42 <span class="login-at-logo">@</span>
43 <h2 class="login-title">Sign in with AT Protocol</h2>
44 <p class="login-text">
45 Connect your Bluesky account to annotate, highlight, and bookmark
46 the web.
47 </p>
48 <button id="sign-in" class="btn btn-primary">Sign In</button>
49 </div>
50
51 <div id="main-content" style="display: none">
52 <div class="tabs">
53 <button class="tab-btn active" data-tab="page">This Page</button>
54 <button class="tab-btn" data-tab="highlights">Highlights</button>
55 <button class="tab-btn" data-tab="bookmarks">Bookmarks</button>
56 </div>
57
58 <div id="tab-page" class="tab-content active">
59 <div class="quick-actions">
60 <button
61 id="bookmark-page"
62 class="btn btn-secondary btn-icon-text"
63 title="Bookmark this page"
64 >
65 <svg
66 width="14"
67 height="14"
68 viewBox="0 0 24 24"
69 fill="none"
70 stroke="currentColor"
71 stroke-width="2"
72 stroke-linecap="round"
73 stroke-linejoin="round"
74 >
75 <path
76 d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
77 ></path>
78 </svg>
79 Bookmark
80 </button>
81 <button
82 id="refresh-annotations"
83 class="btn btn-secondary btn-icon-text"
84 title="Refresh"
85 >
86 <svg
87 width="14"
88 height="14"
89 viewBox="0 0 24 24"
90 fill="none"
91 stroke="currentColor"
92 stroke-width="2"
93 stroke-linecap="round"
94 stroke-linejoin="round"
95 >
96 <path
97 d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
98 ></path>
99 <path d="M3 3v5h5"></path>
100 <path
101 d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"
102 ></path>
103 <path d="M16 21h5v-5"></path>
104 </svg>
105 Refresh
106 </button>
107 </div>
108
109 <div class="create-form">
110 <div class="form-header">
111 <span class="form-title">New Annotation</span>
112 </div>
113 <textarea
114 id="annotation-text"
115 class="annotation-input"
116 placeholder="Write your annotation..."
117 rows="3"
118 ></textarea>
119 <div class="form-actions">
120 <button
121 id="submit-annotation"
122 class="btn btn-primary btn-small"
123 >
124 Post
125 </button>
126 </div>
127 </div>
128
129 <div class="annotations-section">
130 <div class="section-header">
131 <span class="section-title">Annotations on this page</span>
132 <span id="annotation-count" class="annotation-count">0</span>
133 </div>
134 <div id="annotations" class="annotations-list"></div>
135 <div id="empty" class="empty-state" style="display: none">
136 <span class="empty-icon">
137 <svg
138 width="32"
139 height="32"
140 viewBox="0 0 24 24"
141 fill="none"
142 stroke="currentColor"
143 stroke-width="2"
144 stroke-linecap="round"
145 stroke-linejoin="round"
146 >
147 <path d="M22 12h-6l-2 3h-4l-2-3H2"></path>
148 <path
149 d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
150 ></path>
151 </svg>
152 </span>
153 <p class="empty-text">No annotations yet</p>
154 <p class="empty-hint">
155 Select text and right-click to annotate or highlight
156 </p>
157 </div>
158 </div>
159 </div>
160
161 <div id="tab-highlights" class="tab-content">
162 <div class="section-header">
163 <span class="section-title">My Highlights</span>
164 </div>
165 <div id="highlights-list" class="annotations-list"></div>
166 <div
167 id="highlights-empty"
168 class="empty-state"
169 style="display: none"
170 >
171 <span class="empty-icon">
172 <svg
173 width="32"
174 height="32"
175 viewBox="0 0 24 24"
176 fill="none"
177 stroke="currentColor"
178 stroke-width="2"
179 stroke-linecap="round"
180 stroke-linejoin="round"
181 >
182 <path d="m9 11-6 6v3h9l3-3"></path>
183 <path
184 d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"
185 ></path>
186 </svg>
187 </span>
188 <p class="empty-text">No highlights yet</p>
189 <p class="empty-hint">
190 Select text on any page and right-click → Highlight
191 </p>
192 </div>
193 </div>
194
195 <div id="tab-bookmarks" class="tab-content">
196 <div class="section-header">
197 <span class="section-title">My Bookmarks</span>
198 </div>
199 <div id="bookmarks-list" class="bookmarks-list"></div>
200 <div id="bookmarks-empty" class="empty-state" style="display: none">
201 <span class="empty-icon">
202 <svg
203 width="32"
204 height="32"
205 viewBox="0 0 24 24"
206 fill="none"
207 stroke="currentColor"
208 stroke-width="2"
209 stroke-linecap="round"
210 stroke-linejoin="round"
211 >
212 <path
213 d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
214 ></path>
215 </svg>
216 </span>
217 <p class="empty-text">No bookmarks yet</p>
218 <p class="empty-hint">
219 Right-click on any page → Bookmark this page
220 </p>
221 </div>
222 </div>
223 </div>
224 </div>
225
226 <footer class="sidebar-footer">
227 <a href="#" id="open-web" class="sidebar-link">Open Margin Web</a>
228 <button id="toggle-settings" class="btn-icon" title="Settings">
229 <svg
230 width="16"
231 height="16"
232 viewBox="0 0 24 24"
233 fill="none"
234 stroke="currentColor"
235 stroke-width="2"
236 stroke-linecap="round"
237 stroke-linejoin="round"
238 >
239 <circle cx="12" cy="12" r="3"></circle>
240 <path
241 d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
242 ></path>
243 </svg>
244 </button>
245 </footer>
246
247 <div id="settings-view" class="settings-view" style="display: none">
248 <div class="settings-header">
249 <h3 class="settings-title">Settings</h3>
250 <button id="close-settings" class="btn-icon">×</button>
251 </div>
252 <div class="setting-item">
253 <div
254 style="
255 display: flex;
256 justify-content: space-between;
257 align-items: center;
258 "
259 >
260 <div>
261 <label>Show page overlays</label>
262 <p class="setting-help" style="margin-top: 2px">
263 Display highlights, badges, and tooltips on pages
264 </p>
265 </div>
266 <label class="toggle-switch">
267 <input type="checkbox" id="overlay-toggle" checked />
268 <span class="toggle-slider"></span>
269 </label>
270 </div>
271 </div>
272 <div class="setting-item">
273 <label for="api-url">API URL</label>
274 <input
275 type="url"
276 id="api-url"
277 placeholder="http://localhost:8080"
278 class="settings-input"
279 />
280 <p class="setting-help">Enter your Margin backend URL</p>
281 </div>
282 <div class="setting-item">
283 <label for="theme-select">Theme</label>
284 <div class="theme-toggle-group">
285 <button class="theme-btn active" data-theme="system">Auto</button>
286 <button class="theme-btn" data-theme="light">Light</button>
287 <button class="theme-btn" data-theme="dark">Dark</button>
288 </div>
289 </div>
290 <button id="save-settings" class="btn btn-primary" style="width: 100%">
291 Save
292 </button>
293 <button
294 id="sign-out"
295 class="btn btn-secondary"
296 style="width: 100%; margin-top: 8px"
297 >
298 Sign Out
299 </button>
300 </div>
301
302 <div
303 id="collection-selector"
304 class="collection-selector"
305 style="display: none"
306 >
307 <div
308 class="selector-header"
309 style="
310 display: flex;
311 justify-content: space-between;
312 align-items: center;
313 margin-bottom: 12px;
314 padding-bottom: 8px;
315 border-bottom: 1px solid var(--border);
316 "
317 >
318 <h3 class="selector-title" style="margin: 0; font-size: 14px">
319 Add to Collection
320 </h3>
321 <button id="close-collection-selector" class="btn-icon">×</button>
322 </div>
323 <div
324 id="collection-loading"
325 class="spinner"
326 style="display: none; margin: 20px auto"
327 ></div>
328 <div
329 id="collection-list"
330 class="collection-list"
331 style="
332 display: flex;
333 flex-direction: column;
334 gap: 4px;
335 max-height: 200px;
336 overflow-y: auto;
337 "
338 ></div>
339 <div id="collections-empty" class="empty-state" style="display: none">
340 <p class="empty-text">No collections found</p>
341 </div>
342 </div>
343 </div>
344
345 <script src="sidepanel.js"></script>
346 </body>
347</html>