nandi.uk
This repository has no description
43 kB
1541 lines
1export const LANDING_PAGE = `<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Stigmergic</title>
7 <style>
8 :root {
9 --bg: #0d1117;
10 --surface: #161b22;
11 --border: #30363d;
12 --text: #e6edf3;
13 --text-muted: #8b949e;
14 --accent: #58a6ff;
15 --accent-hover: #79c0ff;
16 --prose-link: #d6a657;
17 --prose-link-hover: #f0c674;
18 --green: #3fb950;
19 --red: #f85149;
20 --yellow: #d29922;
21 --purple: #bc8cff;
22 }
23 * { margin: 0; padding: 0; box-sizing: border-box; }
24 body {
25 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
26 background: var(--bg);
27 color: var(--text);
28 line-height: 1.6;
29 min-height: 100vh;
30 }
31 header {
32 border-bottom: 1px solid var(--border);
33 padding: 1rem 2rem;
34 display: flex;
35 align-items: baseline;
36 gap: 1.5rem;
37 flex-wrap: wrap;
38 }
39 .header-spacer { flex: 1; }
40 .auth-area { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
41 .login-btn, .profile-chip {
42 border: 1px solid var(--border);
43 border-radius: 999px;
44 background: var(--surface);
45 color: var(--text-muted);
46 padding: 0.35rem 0.75rem;
47 font-size: 0.8125rem;
48 cursor: pointer;
49 }
50 .login-btn:hover, .profile-chip:hover { color: var(--prose-link-hover); border-color: var(--prose-link); }
51 header h1 {
52 font-size: 1.25rem;
53 font-weight: 600;
54 color: var(--accent);
55 }
56 .header-blurb {
57 font-size: 0.75rem;
58 color: var(--text-muted);
59 }
60 .header-blurb code {
61 font-size: 0.6875rem;
62 background: var(--surface);
63 padding: 0.125rem 0.375rem;
64 border-radius: 4px;
65 }
66 .header-nav { display: flex; gap: 1rem; }
67 .header-nav a { color: var(--text-muted); text-decoration: none; font-size: 0.8125rem; }
68 .header-nav a:hover { color: var(--accent); }
69 header nav { display: flex; gap: 1rem; align-items: center; }
70 header nav a, header nav button {
71 color: var(--text-muted);
72 text-decoration: none;
73 font-size: 0.875rem;
74 background: none;
75 border: none;
76 cursor: pointer;
77 padding: 0.25rem 0.75rem;
78 border-radius: 6px;
79 }
80 header nav a:hover, header nav button:hover {
81 color: var(--text);
82 background: var(--surface);
83 }
84 main {
85 max-width: 960px;
86 margin: 0 auto;
87 padding: 2rem;
88 }
89 .search-bar {
90 display: flex;
91 max-width: 480px;
92 margin: 0 auto 2rem;
93 }
94 .search-bar input {
95 flex: 1;
96 padding: 0.625rem 1rem;
97 border: 1px solid var(--border);
98 border-radius: 6px 0 0 6px;
99 background: var(--surface);
100 color: var(--text);
101 font-size: 0.875rem;
102 outline: none;
103 }
104 .search-bar input:focus { border-color: var(--accent); }
105 .search-bar button {
106 padding: 0.625rem 1.25rem;
107 background: var(--accent);
108 color: #fff;
109 border: none;
110 border-radius: 0 6px 6px 0;
111 cursor: pointer;
112 font-size: 0.875rem;
113 font-weight: 500;
114 }
115 .search-bar button:hover { background: var(--accent-hover); }
116 .search-hint {
117 text-align: center;
118 color: var(--text-muted);
119 font-size: 0.75rem;
120 margin-bottom: 2rem;
121 }
122
123 /* Explore layout */
124 .explore-page {
125 display: grid;
126 grid-template-columns: 1fr 240px;
127 gap: 2rem;
128 }
129 .pagination {
130 flex-wrap: wrap;
131 gap: 0.75rem;
132 }
133 .pagination-btn {
134 padding: 0.375rem 0.75rem;
135 font-size: 0.75rem;
136 }
137 .explore-sidebar h3 {
138 font-size: 0.875rem;
139 color: var(--text-muted);
140 margin-bottom: 0.75rem;
141 }
142 .collections-sidebar {
143 display: flex;
144 flex-direction: column;
145 gap: 0.5rem;
146 }
147 .sidebar-collection {
148 display: flex;
149 flex-direction: column;
150 padding: 0.5rem 0.75rem;
151 border-radius: 6px;
152 text-decoration: none;
153 color: inherit;
154 border: 1px solid transparent;
155 }
156 .sidebar-collection:hover {
157 background: var(--surface);
158 border-color: var(--border);
159 }
160 .sidebar-name { font-size: 0.8125rem; font-weight: 500; }
161 .sidebar-handle { font-size: 0.6875rem; color: var(--text-muted); }
162 .sidebar-empty { color: var(--text-muted); font-size: 0.75rem; }
163
164 /* Face feed */
165 .face-feed {
166 display: flex;
167 flex-direction: column;
168 gap: 1rem;
169 }
170 .face-card {
171 background: var(--surface);
172 border: 1px solid var(--border);
173 border-radius: 10px;
174 padding: 1rem 1.25rem;
175 transition: border-color 0.15s;
176 }
177 .face-card:hover { border-color: var(--accent); }
178 .face-top {
179 display: flex;
180 justify-content: space-between;
181 align-items: flex-start;
182 gap: 0.75rem;
183 margin-bottom: 0.5rem;
184 }
185 .face-header {
186 display: flex;
187 align-items: flex-start;
188 gap: 0.625rem;
189 text-decoration: none;
190 color: inherit;
191 flex: 1;
192 min-width: 0;
193 }
194 .face-header:hover .face-title { color: var(--accent); }
195 .face-favicon {
196 width: 20px;
197 height: 20px;
198 border-radius: 3px;
199 margin-top: 2px;
200 flex-shrink: 0;
201 }
202 .face-title-block { min-width: 0; }
203 .face-title {
204 font-size: 0.9375rem;
205 font-weight: 600;
206 color: var(--text);
207 line-height: 1.3;
208 overflow: hidden;
209 text-overflow: ellipsis;
210 white-space: nowrap;
211 }
212 .face-site {
213 font-size: 0.6875rem;
214 color: var(--text-muted);
215 }
216 .face-actions {
217 display: flex;
218 align-items: center;
219 gap: 0.5rem;
220 flex-shrink: 0;
221 }
222 .face-degree {
223 font-size: 0.625rem;
224 padding: 0.125rem 0.375rem;
225 border-radius: 8px;
226 background: var(--border);
227 color: var(--text-muted);
228 font-weight: 600;
229 }
230 .face-action-btn {
231 color: var(--text-muted);
232 font-size: 0.6875rem;
233 text-decoration: none;
234 }
235 .face-action-btn:hover { color: var(--accent); }
236 .face-desc {
237 font-size: 0.8125rem;
238 color: var(--text-muted);
239 line-height: 1.4;
240 margin-bottom: 0.75rem;
241 overflow: hidden;
242 text-overflow: ellipsis;
243 display: -webkit-box;
244 -webkit-line-clamp: 2;
245 -webkit-box-orient: vertical;
246 }
247
248 /* Face edges */
249 .face-edges {
250 display: flex;
251 gap: 1rem;
252 flex-wrap: wrap;
253 }
254 .face-neighbors {
255 flex: 1;
256 min-width: 200px;
257 }
258 .face-neighbors.incoming {
259 border-left: 2px solid var(--green);
260 padding-left: 0.75rem;
261 }
262 .face-neighbors.outgoing {
263 border-left: 2px solid var(--accent);
264 padding-left: 0.75rem;
265 }
266 .neighbors-label {
267 font-size: 0.625rem;
268 color: var(--text-muted);
269 text-transform: uppercase;
270 letter-spacing: 0.05em;
271 margin-bottom: 0.375rem;
272 font-weight: 600;
273 }
274 .face-neighbors.incoming .neighbors-label { color: var(--green); }
275 .face-neighbors.outgoing .neighbors-label { color: var(--accent); }
276 .neighbors-list {
277 display: flex;
278 flex-direction: column;
279 gap: 0.25rem;
280 }
281 .neighbor-pill {
282 display: flex;
283 align-items: center;
284 gap: 0.375rem;
285 text-decoration: none;
286 color: inherit;
287 padding: 0.25rem 0.5rem;
288 border-radius: 6px;
289 background: var(--bg);
290 border: 1px solid transparent;
291 transition: border-color 0.1s;
292 }
293 .neighbor-pill:hover { border-color: var(--border); }
294 .neighbor-pill:hover .pill-title { color: var(--accent); }
295 .pill-favicon {
296 width: 14px;
297 height: 14px;
298 border-radius: 2px;
299 flex-shrink: 0;
300 }
301 .pill-type {
302 font-size: 0.625rem;
303 color: var(--text-muted);
304 flex-shrink: 0;
305 }
306 .pill-title {
307 font-size: 0.75rem;
308 color: var(--text);
309 overflow: hidden;
310 text-overflow: ellipsis;
311 white-space: nowrap;
312 }
313
314 /* Connection items (resource page) */
315 .connection-item {
316 background: var(--surface);
317 border: 1px solid var(--border);
318 border-radius: 8px;
319 padding: 1rem 1.25rem;
320 transition: border-color 0.15s;
321 }
322 .connection-item:hover { border-color: var(--accent); }
323 .connection-item.compact {
324 padding: 0.5rem 0.75rem;
325 display: flex;
326 align-items: center;
327 gap: 0.5rem;
328 flex-wrap: wrap;
329 background: var(--bg);
330 border-radius: 6px;
331 }
332 .conn-type-badge {
333 font-size: 0.6875rem;
334 padding: 0.125rem 0.5rem;
335 border-radius: 12px;
336 background: var(--border);
337 color: var(--text);
338 }
339 .conn-uri {
340 color: var(--accent);
341 text-decoration: none;
342 font-size: 0.875rem;
343 font-weight: 500;
344 word-break: break-all;
345 }
346 .conn-uri:hover { text-decoration: underline; }
347 .conn-site {
348 font-size: 0.625rem;
349 color: var(--text-muted);
350 }
351 .conn-note-inline {
352 color: var(--text-muted);
353 font-size: 0.75rem;
354 }
355 .conn-handle-inline {
356 color: var(--text-muted);
357 font-size: 0.6875rem;
358 margin-left: auto;
359 }
360
361 /* Resource page header card */
362 .resource-header-card {
363 display: flex;
364 gap: 1rem;
365 padding: 1.25rem;
366 background: var(--surface);
367 border: 1px solid var(--border);
368 border-radius: 8px;
369 margin-bottom: 1rem;
370 }
371 .resource-favicon {
372 width: 32px;
373 height: 32px;
374 border-radius: 4px;
375 flex-shrink: 0;
376 }
377 .resource-meta { min-width: 0; }
378 .resource-title {
379 font-size: 1.125rem;
380 font-weight: 600;
381 color: var(--text);
382 margin-bottom: 0.25rem;
383 line-height: 1.3;
384 }
385 .resource-site {
386 font-size: 0.75rem;
387 color: var(--text-muted);
388 margin-bottom: 0.375rem;
389 }
390 .resource-desc {
391 font-size: 0.8125rem;
392 color: var(--text-muted);
393 line-height: 1.4;
394 }
395
396 /* Strata / View Island button */
397 .strata-btn {
398 background: var(--accent);
399 border: none;
400 color: #fff;
401 font-size: 0.75rem;
402 padding: 0.375rem 0.875rem;
403 border-radius: 999px;
404 cursor: pointer;
405 font-weight: 600;
406 text-decoration: none;
407 display: inline-flex;
408 align-items: center;
409 gap: 0.25rem;
410 transition: opacity 0.15s, transform 0.1s;
411 line-height: 1.4;
412 }
413 .strata-btn:hover { opacity: 0.85; }
414 .strata-btn:active { transform: scale(0.97); }
415 .strata-btn.compact {
416 font-size: 0.625rem;
417 padding: 0.0625rem 0.375rem;
418 margin-left: auto;
419 }
420
421 /* Modal */
422 .modal-overlay {
423 position: fixed;
424 top: 0; left: 0; right: 0; bottom: 0;
425 background: rgba(0,0,0,0.6);
426 display: flex;
427 align-items: center;
428 justify-content: center;
429 z-index: 1000;
430 }
431 .modal-content {
432 background: var(--surface);
433 border: 1px solid var(--border);
434 border-radius: 12px;
435 max-width: 560px;
436 width: 90%;
437 max-height: 80vh;
438 overflow-y: auto;
439 padding: 1.5rem;
440 }
441 .modal-wide {
442 max-width: 720px;
443 }
444 .modal-header {
445 display: flex;
446 justify-content: space-between;
447 align-items: center;
448 margin-bottom: 1rem;
449 }
450 .modal-header h2 {
451 font-size: 1rem;
452 color: var(--purple);
453 }
454 .modal-close {
455 background: none;
456 border: none;
457 color: var(--text-muted);
458 font-size: 1.5rem;
459 cursor: pointer;
460 line-height: 1;
461 }
462 .modal-close:hover { color: var(--text); }
463
464 /* Analysis results */
465 .analysis-loading {
466 text-align: center;
467 color: var(--text-muted);
468 padding: 2rem;
469 }
470 .spinner {
471 width: 24px;
472 height: 24px;
473 border: 2px solid var(--border);
474 border-top-color: var(--purple);
475 border-radius: 50%;
476 animation: spin 0.8s linear infinite;
477 margin: 0 auto 0.75rem;
478 }
479 @keyframes spin { to { transform: rotate(360deg); } }
480
481 .analysis-face-header {
482 display: flex;
483 justify-content: space-between;
484 align-items: flex-start;
485 margin-bottom: 0.5rem;
486 }
487 .analysis-face-title {
488 font-size: 1.0625rem;
489 font-weight: 600;
490 color: var(--text);
491 line-height: 1.3;
492 flex: 1;
493 min-width: 0;
494 }
495 .analysis-face-degree {
496 font-size: 0.6875rem;
497 padding: 0.125rem 0.5rem;
498 border-radius: 8px;
499 background: var(--border);
500 color: var(--text-muted);
501 font-weight: 600;
502 flex-shrink: 0;
503 margin-left: 0.75rem;
504 }
505 .analysis-face-desc {
506 font-size: 0.8125rem;
507 color: var(--text-muted);
508 line-height: 1.4;
509 margin-bottom: 0.75rem;
510 }
511 .analysis-type-badges {
512 display: flex;
513 flex-wrap: wrap;
514 gap: 0.375rem;
515 margin-bottom: 0.75rem;
516 }
517 .type-badge {
518 font-size: 0.625rem;
519 padding: 0.125rem 0.5rem;
520 border-radius: 8px;
521 background: var(--border);
522 color: var(--text);
523 }
524 .analysis-domains {
525 display: flex;
526 flex-wrap: wrap;
527 gap: 0.25rem;
528 margin-bottom: 1rem;
529 }
530 .domain-tag {
531 font-size: 0.625rem;
532 padding: 0.0625rem 0.375rem;
533 border-radius: 8px;
534 background: var(--bg);
535 border: 1px solid var(--border);
536 color: var(--text-muted);
537 }
538
539 .analysis-edges {
540 display: grid;
541 grid-template-columns: 1fr 1fr;
542 gap: 1rem;
543 margin-bottom: 1rem;
544 }
545 .analysis-neighbors h4 {
546 font-size: 0.6875rem;
547 text-transform: uppercase;
548 letter-spacing: 0.05em;
549 margin-bottom: 0.375rem;
550 font-weight: 600;
551 }
552 .analysis-neighbors.incoming h4 { color: var(--green); }
553 .analysis-neighbors.outgoing h4 { color: var(--accent); }
554 .analysis-neighbor {
555 display: flex;
556 align-items: center;
557 gap: 0.375rem;
558 padding: 0.25rem 0;
559 font-size: 0.75rem;
560 }
561 .neighbor-type {
562 color: var(--text-muted);
563 font-size: 0.625rem;
564 flex-shrink: 0;
565 }
566 .neighbor-link {
567 color: var(--accent);
568 text-decoration: none;
569 overflow: hidden;
570 text-overflow: ellipsis;
571 white-space: nowrap;
572 }
573 .neighbor-link:hover { text-decoration: underline; }
574 .neighbor-note {
575 color: var(--text-muted);
576 font-size: 0.625rem;
577 overflow: hidden;
578 text-overflow: ellipsis;
579 white-space: nowrap;
580 }
581
582 .analysis-section {
583 margin-bottom: 1.25rem;
584 }
585 .analysis-section h3 {
586 font-size: 0.875rem;
587 color: var(--text-muted);
588 margin-bottom: 0.5rem;
589 }
590 .citation-mini {
591 display: flex;
592 align-items: center;
593 gap: 0.5rem;
594 padding: 0.25rem 0;
595 }
596 .citation-mini-title {
597 font-size: 0.75rem;
598 color: var(--text);
599 }
600 .citation-mini-domain {
601 font-size: 0.625rem;
602 color: var(--text-muted);
603 }
604 .analysis-error {
605 color: var(--red);
606 padding: 1rem;
607 text-align: center;
608 }
609
610 /* Resource page */
611 .resource-page { }
612 .resource-uri {
613 font-size: 1rem;
614 color: var(--accent);
615 word-break: break-all;
616 margin-bottom: 1rem;
617 padding: 0.75rem 1rem;
618 background: var(--surface);
619 border: 1px solid var(--border);
620 border-radius: 6px;
621 }
622 .resource-actions {
623 display: flex;
624 gap: 0.75rem;
625 margin-bottom: 2rem;
626 }
627 .yoneda-section {
628 margin-bottom: 2rem;
629 }
630 .yoneda-section h3 {
631 font-size: 1rem;
632 margin-bottom: 0.75rem;
633 }
634 .yoneda-hint {
635 font-size: 0.6875rem;
636 color: var(--text-muted);
637 font-weight: 400;
638 }
639 .connection-list {
640 display: flex;
641 flex-direction: column;
642 gap: 0.5rem;
643 }
644
645 /* Graph page */
646 .graph-page { }
647 .graph-meta {
648 color: var(--text-muted);
649 font-size: 0.875rem;
650 margin-bottom: 2rem;
651 }
652 .graph-connections, .graph-nodes {
653 margin-bottom: 2rem;
654 }
655 .graph-connections h3, .graph-nodes h3 {
656 font-size: 1rem;
657 margin-bottom: 0.75rem;
658 }
659 .graph-node {
660 display: inline-block;
661 padding: 0.375rem 0.75rem;
662 margin: 0.25rem;
663 background: var(--surface);
664 border: 1px solid var(--border);
665 border-radius: 6px;
666 color: var(--accent);
667 text-decoration: none;
668 font-size: 0.8125rem;
669 }
670 .graph-node:hover { border-color: var(--accent); }
671
672 /* Connect page */
673 .pending { color: var(--yellow); }
674
675 /* Shared */
676 .back-link {
677 color: var(--accent);
678 text-decoration: none;
679 font-size: 0.875rem;
680 display: inline-block;
681 margin-right: 1rem;
682 margin-bottom: 1rem;
683 }
684 .back-link:hover { text-decoration: underline; }
685 .empty {
686 text-align: center;
687 padding: 2rem;
688 color: var(--text-muted);
689 }
690 #auth-status { display: none; }
691 #auth-status.visible { display: inline; }
692 #login-btn { display: inline; }
693 #login-btn.hidden { display: none; }
694 dialog#login-dialog {
695 border: 1px solid var(--border);
696 border-radius: 12px;
697 background: var(--surface);
698 color: var(--text);
699 padding: 1.5rem;
700 max-width: 380px;
701 width: 90%;
702 }
703 dialog#login-dialog::backdrop { background: rgba(0,0,0,0.55); }
704 dialog#login-dialog h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
705 dialog#login-dialog p { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.875rem; }
706 dialog#login-dialog input[type="text"] {
707 width: 100%;
708 padding: 0.5rem 0.75rem;
709 border: 1px solid var(--border);
710 border-radius: 8px;
711 background: var(--bg);
712 color: var(--text);
713 font-size: 0.9rem;
714 margin-bottom: 1rem;
715 outline: none;
716 }
717 dialog#login-dialog input[type="text"]:focus { border-color: var(--prose-link); }
718 .login-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
719 .login-cancel, .login-submit {
720 border: 1px solid var(--border);
721 border-radius: 8px;
722 padding: 0.4rem 1rem;
723 font-size: 0.8125rem;
724 cursor: pointer;
725 }
726 .login-cancel { background: var(--surface); color: var(--text-muted); }
727 .login-cancel:hover { color: var(--text); }
728 .login-submit { background: var(--prose-link); color: #0d1117; border-color: var(--prose-link); font-weight: 600; }
729 .login-submit:hover { background: var(--prose-link-hover); }
730
731 /* ── Islands feed ─────────────────────────────────────────────── */
732 .islands-feed {
733 display: flex;
734 flex-direction: column;
735 gap: 1rem;
736 }
737 .pagination {
738 display: flex;
739 align-items: center;
740 justify-content: center;
741 gap: 1.5rem;
742 margin-top: 2rem;
743 padding: 1.25rem 0;
744 border-top: 1px solid var(--border);
745 }
746 .pagination-btn {
747 display: inline-flex;
748 align-items: center;
749 gap: 0.375rem;
750 padding: 0.5rem 1.25rem;
751 border: 1px solid var(--border);
752 border-radius: 8px;
753 font-size: 0.8125rem;
754 font-weight: 500;
755 color: var(--text);
756 text-decoration: none;
757 background: var(--surface);
758 transition: all 0.15s;
759 }
760 .pagination-btn:hover:not(.disabled) {
761 border-color: var(--accent);
762 color: var(--accent);
763 background: var(--bg);
764 }
765 .pagination-btn.disabled {
766 opacity: 0.3;
767 pointer-events: none;
768 }
769 .pagination-info {
770 display: flex;
771 flex-direction: column;
772 align-items: center;
773 gap: 0.125rem;
774 }
775 .pagination-page {
776 font-size: 0.8125rem;
777 font-weight: 600;
778 color: var(--text);
779 }
780 .pagination-total {
781 font-size: 0.6875rem;
782 color: var(--text-muted);
783 }
784 .island-card {
785 background: var(--surface);
786 border: 1px solid var(--border);
787 border-radius: 10px;
788 padding: 1rem 1.25rem;
789 transition: border-color 0.15s;
790 }
791 .island-card:hover { border-color: var(--accent); }
792 .island-graph {
793 width: 100%;
794 height: 320px;
795 border-radius: 6px 6px 0 0;
796 background: var(--bg);
797 cursor: default;
798 }
799 .island-graph-link {
800 display: block;
801 overflow: hidden;
802 }
803 .island-graph-img {
804 width: 100%;
805 height: 240px;
806 object-fit: cover;
807 display: block;
808 background: #0d1117;
809 }
810 .island-card-graph {
811 position: relative;
812 border-radius: 6px 6px 0 0;
813 overflow: hidden;
814 }
815 .island-card-overlay {
816 position: absolute;
817 bottom: 0;
818 left: 0;
819 right: 0;
820 padding: 1.5rem 1rem 0.75rem;
821 background: linear-gradient(transparent, rgba(13,17,23,0.92));
822 font-size: 0.85rem;
823 font-weight: 600;
824 line-height: 1.3;
825 }
826 .island-card-overlay a {
827 color: #e6edf3;
828 text-decoration: none;
829 }
830 .island-card-overlay a:hover {
831 color: var(--prose-link);
832 }
833 .island-summary {
834 font-size: 0.85rem;
835 color: var(--fg-muted);
836 line-height: 1.4;
837 margin: 0;
838 padding: 0;
839 }
840 .island-title-preview {
841 display: block;
842 color: var(--text);
843 font-size: 1rem;
844 line-height: 1.35;
845 font-weight: 600;
846 text-decoration: none;
847 margin-bottom: 0.75rem;
848 }
849 .island-title-preview:hover { color: var(--prose-link); }
850 .island-card-themes { margin-bottom: 0.75rem; }
851 .island-graph-large {
852 width: 100%;
853 height: 400px;
854 border-radius: 8px;
855 background: var(--bg);
856 margin-bottom: 1.5rem;
857 border: 1px solid var(--border);
858 cursor: default;
859 }
860 .island-header {
861 display: flex;
862 justify-content: space-between;
863 align-items: center;
864 margin-bottom: 0.75rem;
865 }
866 .island-size {
867 font-size: 0.75rem;
868 color: var(--text-muted);
869 font-weight: 500;
870 }
871 .island-vertices {
872 display: flex;
873 flex-direction: column;
874 gap: 0.375rem;
875 margin-bottom: 0.5rem;
876 }
877 .island-vertex {
878 display: flex;
879 flex-direction: column;
880 gap: 0.125rem;
881 }
882 .vertex-link {
883 color: var(--accent);
884 text-decoration: none;
885 font-size: 0.875rem;
886 font-weight: 500;
887 overflow: hidden;
888 text-overflow: ellipsis;
889 white-space: nowrap;
890 }
891 .vertex-link:hover { text-decoration: underline; }
892 .vertex-title {
893 font-size: 0.875rem;
894 font-weight: 500;
895 color: var(--text);
896 overflow: hidden;
897 text-overflow: ellipsis;
898 white-space: nowrap;
899 }
900 .vertex-desc {
901 font-size: 0.75rem;
902 color: var(--text-muted);
903 overflow: hidden;
904 text-overflow: ellipsis;
905 white-space: nowrap;
906 }
907 .island-more {
908 font-size: 0.6875rem;
909 color: var(--text-muted);
910 margin-bottom: 0.5rem;
911 }
912 .island-edge-types {
913 display: flex;
914 flex-wrap: wrap;
915 gap: 0.375rem;
916 margin-bottom: 0.5rem;
917 }
918 .edge-type-badge {
919 font-size: 0.625rem;
920 padding: 0.125rem 0.5rem;
921 border-radius: 8px;
922 background: var(--border);
923 color: var(--text);
924 }
925 .island-notes {
926 display: flex;
927 flex-direction: column;
928 gap: 0.25rem;
929 }
930 .island-note {
931 font-size: 0.75rem;
932 color: var(--text-muted);
933 font-style: italic;
934 }
935
936 /* ── Island detail page ───────────────────────────────────────── */
937 .island-detail { }
938 .island-meta {
939 color: var(--text-muted);
940 font-size: 0.875rem;
941 margin-bottom: 1.5rem;
942 }
943 .pds-link {
944 color: var(--accent);
945 text-decoration: none;
946 font-size: 0.8rem;
947 }
948 .pds-link:hover { text-decoration: underline; }
949 .island-section {
950 margin-bottom: 1.5rem;
951 }
952 .island-section h3 {
953 font-size: 0.9375rem;
954 margin-bottom: 0.75rem;
955 }
956 .island-edge-detail {
957 display: flex;
958 align-items: center;
959 gap: 0.5rem;
960 flex-wrap: wrap;
961 padding: 0.375rem 0;
962 font-size: 0.8125rem;
963 border-bottom: 1px solid var(--border);
964 }
965 .island-edge-detail:last-child { border-bottom: none; }
966 .edge-source, .edge-target {
967 color: var(--accent);
968 overflow: hidden;
969 text-overflow: ellipsis;
970 white-space: nowrap;
971 max-width: 200px;
972 min-width: 0;
973 }
974 .edge-note {
975 color: var(--text-muted);
976 font-size: 0.6875rem;
977 flex-basis: 100%;
978 overflow-wrap: break-word;
979 word-break: break-word;
980 }
981 .edge-handle {
982 color: var(--text-muted);
983 font-size: 0.625rem;
984 flex-shrink: 0;
985 }
986 .island-actions {
987 margin-top: 1.5rem;
988 }
989
990 /* ── Strata prose page ─────────────────────────────────────────── */
991 .strata-page { max-width: 100%; overflow-x: hidden; }
992 #page-content { max-width: 100vw; overflow-x: hidden; }
993 .strata-section {
994 margin-bottom: 1.5rem;
995 }
996 .strata-section h3 {
997 font-size: 0.9375rem;
998 margin-bottom: 0.75rem;
999 color: var(--text-muted);
1000 }
1001 .section-link {
1002 font-size: 0.75rem;
1003 font-weight: 400;
1004 margin-left: 0.5rem;
1005 }
1006 .strata-relationships {
1007 display: flex;
1008 flex-direction: column;
1009 gap: 0.375rem;
1010 }
1011 .strata-rel-line {
1012 font-size: 0.875rem;
1013 line-height: 1.6;
1014 color: var(--text);
1015 padding: 0.25rem 0;
1016 }
1017 .arrow {
1018 font-weight: 600;
1019 font-size: 1rem;
1020 margin: 0 0.25rem;
1021 }
1022 .arrow-forward { color: var(--accent); }
1023 .arrow-back { color: var(--green); }
1024 .arrow-bidi { color: var(--purple); }
1025 .arrow-blocked { color: var(--red); }
1026 .entity-link {
1027 color: var(--accent);
1028 text-decoration: none;
1029 border-bottom: 1px dotted var(--accent);
1030 }
1031 .entity-link:hover {
1032 color: var(--accent-hover);
1033 border-bottom-style: solid;
1034 }
1035 .analysis-tension {
1036 padding: 0.5rem 0.75rem;
1037 border-left: 3px solid var(--red);
1038 background: rgba(248,81,73,0.05);
1039 border-radius: 0 6px 6px 0;
1040 margin-bottom: 0.5rem;
1041 font-size: 0.8125rem;
1042 }
1043 .analysis-question {
1044 padding: 0.5rem 0.75rem;
1045 border-left: 3px solid var(--yellow);
1046 background: rgba(210,153,34,0.05);
1047 border-radius: 0 6px 6px 0;
1048 margin-bottom: 0.5rem;
1049 font-size: 0.8125rem;
1050 }
1051 .synthesis-text {
1052 font-size: 0.9375rem;
1053 line-height: 1.7;
1054 color: var(--text);
1055 overflow-wrap: break-word;
1056 word-break: break-word;
1057 }
1058 .synthesis-text a {
1059 color: var(--prose-link);
1060 text-decoration: none;
1061 border-bottom: 1px solid rgba(214,166,87,0.45);
1062 }
1063 .synthesis-text a:hover {
1064 color: var(--prose-link-hover);
1065 border-bottom-color: var(--prose-link-hover);
1066 }
1067 .synthesis-text p { margin-bottom: 1rem; }
1068 .synthesis-text p:last-child { margin-bottom: 0; }
1069 .strata-btn.has-strata {
1070 /* same as base — kept for compat */
1071 }
1072 .island-summary-large {
1073 font-size: 1.0625rem;
1074 line-height: 1.5;
1075 color: var(--text);
1076 margin-bottom: 0.5rem;
1077 }
1078 .strata-edges {
1079 display: flex;
1080 flex-direction: column;
1081 gap: 0;
1082 }
1083 .strata-edge {
1084 display: flex;
1085 align-items: center;
1086 gap: 0.5rem;
1087 flex-wrap: wrap;
1088 padding: 0.375rem 0.5rem;
1089 font-size: 0.8125rem;
1090 border-bottom: 1px solid var(--border);
1091 color: var(--text);
1092 transition: background 0.1s;
1093 min-width: 0;
1094 overflow: hidden;
1095 }
1096 .strata-edge:hover {
1097 background: var(--surface);
1098 }
1099 .strata-edge-row:last-child .strata-edge { border-bottom: none; }
1100 .strata-edge-source, .strata-edge-target {
1101 color: var(--accent);
1102 overflow: hidden;
1103 text-overflow: ellipsis;
1104 white-space: nowrap;
1105 max-width: 60%;
1106 min-width: 0;
1107 }
1108 .strata-edge-node {
1109 display: inline-flex;
1110 flex-direction: row;
1111 align-items: baseline;
1112 min-width: 0;
1113 max-width: 42%;
1114 gap: 0.4rem;
1115 overflow: hidden;
1116 }
1117 a.strata-edge-link {
1118 text-decoration: none;
1119 color: var(--accent);
1120 }
1121 a.strata-edge-link:hover .strata-edge-title {
1122 text-decoration: underline;
1123 }
1124 .strata-edge-title {
1125 color: var(--text);
1126 overflow: hidden;
1127 text-overflow: ellipsis;
1128 white-space: nowrap;
1129 font-weight: 500;
1130 min-width: 0;
1131 }
1132 .strata-edge-url {
1133 color: var(--prose-link);
1134 overflow: hidden;
1135 text-overflow: ellipsis;
1136 white-space: nowrap;
1137 font-size: 0.6875rem;
1138 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1139 min-width: 0;
1140 }
1141 .strata-edge-url::before { content: "("; color: var(--text-muted); }
1142 .strata-edge-url::after { content: ")"; color: var(--text-muted); }
1143 .strata-edge-type {
1144 font-size: 0.6875rem;
1145 padding: 0.0625rem 0.375rem;
1146 border-radius: 8px;
1147 background: var(--border);
1148 color: var(--text);
1149 flex-shrink: 0;
1150 }
1151 .strata-edge-note {
1152 color: var(--text-muted);
1153 font-size: 0.6875rem;
1154 flex-basis: 100%;
1155 overflow-wrap: break-word;
1156 word-break: break-word;
1157 }
1158 .strata-edge-handle {
1159 color: var(--text-muted);
1160 font-size: 0.625rem;
1161 flex-shrink: 0;
1162 }
1163
1164 /* ── Island card footer ──────────────────────────────────────── */
1165 .island-card-footer {
1166 display: flex;
1167 justify-content: space-between;
1168 align-items: flex-start;
1169 padding: 0.75rem 1rem;
1170 border-top: 1px solid var(--border);
1171 gap: 1rem;
1172 }
1173 .island-card-meta {
1174 flex: 1;
1175 min-width: 0;
1176 display: flex;
1177 flex-direction: column;
1178 gap: 0.25rem;
1179 }
1180 .island-card-footer .island-summary {
1181 margin: 0;
1182 }
1183 .island-card-footer .strata-btn {
1184 flex-shrink: 0;
1185 align-self: center;
1186 }
1187 .island-centroid {
1188 font-size: 0.6875rem;
1189 color: var(--text-muted);
1190 overflow: hidden;
1191 text-overflow: ellipsis;
1192 white-space: nowrap;
1193 }
1194
1195 /* ── Theme tags (shared) ─────────────────────────────────────── */
1196 .theme-tags {
1197 display: flex;
1198 flex-wrap: wrap;
1199 gap: 0.375rem;
1200 }
1201 .theme-tag {
1202 padding: 0.25rem 0.625rem;
1203 border-radius: 12px;
1204 background: var(--border);
1205 color: var(--text);
1206 font-size: 0.75rem;
1207 display: inline-flex;
1208 align-items: center;
1209 gap: 0.25rem;
1210 }
1211 .theme-tag[contenteditable] { cursor: text; outline: none; }
1212 .theme-tag[contenteditable]:focus { background: var(--accent); color: #fff; }
1213 .theme-remove {
1214 cursor: pointer;
1215 opacity: 0.4;
1216 font-size: 0.875rem;
1217 line-height: 1;
1218 }
1219 .theme-remove:hover { opacity: 1; color: #f85149; }
1220 .theme-add {
1221 display: inline-flex;
1222 align-items: center;
1223 justify-content: center;
1224 width: 1.5rem;
1225 height: 1.5rem;
1226 border-radius: 12px;
1227 background: var(--border);
1228 color: var(--text-muted);
1229 font-size: 0.875rem;
1230 cursor: pointer;
1231 transition: all 0.15s;
1232 }
1233 .theme-add:hover { background: var(--accent); color: #fff; }
1234
1235 /* Editable fields */
1236 .editable { border-radius: 4px; transition: outline 0.15s, background 0.15s; outline: 1px solid transparent; }
1237 .strata-page.edit-mode .editable { cursor: text; outline: 1px dashed rgba(214,166,87,0.5); background: rgba(214,166,87,0.04); }
1238 .strata-page.edit-mode .editable:focus { outline: 1px solid var(--prose-link); background: rgba(214,166,87,0.08); }
1239 .strata-page.edit-mode [contenteditable="true"] { spellcheck: false; }
1240 .edit-toggle {
1241 display: inline-flex;
1242 align-items: center;
1243 gap: 0.35rem;
1244 margin-left: 0.75rem;
1245 padding: 0.25rem 0.625rem;
1246 border-radius: 999px;
1247 border: 1px solid var(--border);
1248 background: var(--surface);
1249 color: var(--text-muted);
1250 font-size: 0.75rem;
1251 cursor: pointer;
1252 }
1253 .edit-toggle:hover { color: var(--prose-link-hover); border-color: var(--prose-link); }
1254 .strata-page.edit-mode .edit-toggle { color: #0d1117; background: var(--prose-link); border-color: var(--prose-link); font-weight: 600; }
1255 .edit-mode-banner {
1256 display: none;
1257 margin: 0 0 1rem;
1258 padding: 0.625rem 0.875rem;
1259 border: 1px solid rgba(214,166,87,0.45);
1260 border-radius: 8px;
1261 background: rgba(214,166,87,0.08);
1262 color: var(--prose-link-hover);
1263 font-size: 0.8125rem;
1264 }
1265 .strata-page.edit-mode .edit-mode-banner { display: block; }
1266 .schema-migration-banner {
1267 margin: 0 0 1rem;
1268 padding: 0.75rem 1rem;
1269 border: 1px solid rgba(243,139,168,0.45);
1270 border-radius: 8px;
1271 background: rgba(243,139,168,0.08);
1272 color: #f38ba8;
1273 font-size: 0.8125rem;
1274 line-height: 1.6;
1275 }
1276 .schema-migration-banner.hidden { display: none; }
1277 .schema-migration-banner code {
1278 background: rgba(243,139,168,0.12);
1279 padding: 0.125rem 0.375rem;
1280 border-radius: 4px;
1281 font-size: 0.75rem;
1282 }
1283 .schema-migration-banner ul {
1284 margin: 0.375rem 0 0.375rem 1.25rem;
1285 padding: 0;
1286 font-size: 0.75rem;
1287 }
1288 .schema-migration-banner li { margin-bottom: 0.25rem; }
1289 .graph-actions {
1290 display: flex;
1291 justify-content: flex-end;
1292 margin: -0.5rem 0 1.25rem;
1293 }
1294 .strata-page:not(.edit-mode) .theme-remove,
1295 .strata-page:not(.edit-mode) .theme-add,
1296 .strata-page:not(.edit-mode) .list-add,
1297 .strata-page:not(.edit-mode) .edge-remove,
1298 .strata-page:not(.edit-mode) .edge-add-toggle { display: none; }
1299 .strata-edge-row {
1300 display: flex;
1301 align-items: center;
1302 gap: 0.25rem;
1303 }
1304 .edge-remove {
1305 cursor: pointer;
1306 opacity: 0.4;
1307 font-size: 0.875rem;
1308 line-height: 1;
1309 flex-shrink: 0;
1310 padding: 0 0.25rem;
1311 }
1312 .edge-remove:hover { opacity: 1; color: #f85149; }
1313 .edge-add-toggle {
1314 color: var(--text-muted);
1315 font-size: 0.8rem;
1316 cursor: pointer;
1317 padding: 0.375rem 0.5rem;
1318 opacity: 0.6;
1319 transition: opacity 0.15s;
1320 background: none;
1321 border: 1px dashed var(--border);
1322 border-radius: 4px;
1323 width: 100%;
1324 text-align: center;
1325 margin-top: 0.25rem;
1326 }
1327 .edge-add-toggle:hover { opacity: 1; }
1328 .edge-add-form {
1329 padding: 0.75rem;
1330 border: 1px solid var(--border);
1331 border-radius: 6px;
1332 margin-top: 0.25rem;
1333 background: var(--surface);
1334 display: flex;
1335 flex-direction: column;
1336 gap: 0.5rem;
1337 }
1338 .edge-add-form .form-field {
1339 display: flex;
1340 flex-direction: column;
1341 gap: 0.125rem;
1342 }
1343 .edge-add-form label {
1344 font-size: 0.75rem;
1345 color: var(--text-muted);
1346 text-transform: uppercase;
1347 letter-spacing: 0.05em;
1348 }
1349 .edge-input {
1350 font-size: 0.8125rem;
1351 padding: 0.25rem 0.5rem;
1352 border: 1px solid var(--border);
1353 border-radius: 4px;
1354 background: var(--bg);
1355 color: var(--text);
1356 }
1357 .edge-input:focus { outline: none; border-color: var(--accent); }
1358 .editable-list .list-add {
1359 color: var(--text-muted);
1360 font-size: 0.8rem;
1361 cursor: pointer;
1362 padding: 0.25rem 0;
1363 opacity: 0.6;
1364 transition: opacity 0.15s;
1365 }
1366 .editable-list .list-add:hover { opacity: 1; }
1367
1368 /* Diff highlight — brief glow on regenerated fields */
1369 .field-changed {
1370 animation: field-glow 2s ease-out;
1371 }
1372 @keyframes field-glow {
1373 0% { background: rgba(188,140,255,0.3); }
1374 100% { background: transparent; }
1375 }
1376
1377 /* Strata action bar */
1378 .strata-actions {
1379 display: flex;
1380 align-items: center;
1381 gap: 0.75rem;
1382 margin: 1.5rem 0;
1383 padding-top: 1rem;
1384 border-top: 1px solid var(--border);
1385 }
1386 .regenerate-btn {
1387 background: var(--accent);
1388 border-color: var(--accent);
1389 color: #fff;
1390 font-size: 0.75rem;
1391 padding: 0.375rem 1rem;
1392 }
1393 .regenerate-btn:hover { background: #79c0ff; border-color: #79c0ff; }
1394 .regenerate-btn:disabled { opacity: 0.5; cursor: wait; }
1395 .save-btn {
1396 background: #238636;
1397 border-color: #238636;
1398 color: #fff;
1399 font-size: 0.75rem;
1400 padding: 0.375rem 1rem;
1401 }
1402 .save-btn:hover { background: #2ea043; border-color: #2ea043; }
1403 .save-btn:disabled { opacity: 0.5; cursor: wait; }
1404 .save-status { font-size: 0.8rem; color: var(--text-muted); }
1405 .hidden { display: none !important; }
1406
1407 /* Hot edges */
1408 .highlights-count { font-size: 0.7rem; color: var(--accent); font-weight: 400; margin-left: 0.25rem; }
1409 .similar-islands {
1410 display: flex;
1411 flex-direction: column;
1412 gap: 0.5rem;
1413 }
1414 .similar-island {
1415 display: flex;
1416 flex-direction: column;
1417 gap: 0.25rem;
1418 padding: 0.625rem 0.75rem;
1419 border: 1px solid var(--border);
1420 border-radius: 8px;
1421 background: var(--surface);
1422 color: var(--text);
1423 text-decoration: none;
1424 transition: border-color 0.15s, background 0.15s;
1425 }
1426 .similar-island:hover {
1427 border-color: var(--accent);
1428 background: var(--surface-hover);
1429 }
1430 .similar-title {
1431 font-weight: 600;
1432 font-size: 0.9rem;
1433 }
1434 .similar-meta {
1435 color: var(--text-muted);
1436 font-size: 0.75rem;
1437 }
1438 .similar-record {
1439 color: var(--text-muted);
1440 font-family: var(--font-mono);
1441 font-size: 0.7rem;
1442 }
1443 .similar-shared {
1444 color: var(--accent);
1445 font-size: 0.72rem;
1446 line-height: 1.35;
1447 }
1448 .hot-edge { border-left: 2px solid var(--accent); padding-left: 0.5rem; }
1449 .hot-badge { color: var(--accent); font-size: 0.75rem; margin-right: 0.25rem; }
1450
1451 /* Search page */
1452 .search-page { max-width: 720px; margin: 0 auto; }
1453 .search-page h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
1454 .search-form { margin-bottom: 2rem; }
1455 .search-form .form-field { margin-bottom: 0.75rem; }
1456 .search-form input[type="text"] {
1457 width: 100%;
1458 padding: 0.625rem 1rem;
1459 border: 1px solid var(--border);
1460 border-radius: 6px;
1461 background: var(--surface);
1462 color: var(--text);
1463 font-size: 0.875rem;
1464 outline: none;
1465 }
1466 .search-form input:focus { border-color: var(--accent); }
1467 .search-result-card {
1468 background: var(--surface);
1469 border: 1px solid var(--border);
1470 border-radius: 8px;
1471 padding: 1rem 1.25rem;
1472 margin-bottom: 1rem;
1473 }
1474 .search-result-card.search-match-exact { }
1475 .search-result-card.search-match-domain { }
1476 .search-result-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.375rem; }
1477 .search-result-title { color: var(--accent); text-decoration: none; font-weight: 500; font-size: 1rem; }
1478 .search-result-title:hover { color: var(--accent-hover); text-decoration: underline; }
1479 .search-match-badge {
1480 font-size: 0.6875rem;
1481 padding: 0.125rem 0.5rem;
1482 border-radius: 999px;
1483 font-weight: 500;
1484 text-transform: uppercase;
1485 letter-spacing: 0.03em;
1486 }
1487 .search-match-badge.search-match-exact { background: rgba(63, 185, 80, 0.15); color: var(--green); }
1488 .search-match-badge.search-match-domain { background: rgba(210, 153, 34, 0.15); color: var(--yellow); }
1489 .search-result-meta { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; }
1490 .search-edges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem; }
1491 .search-edge { font-size: 0.75rem; color: var(--text-muted); background: var(--bg); padding: 0.125rem 0.5rem; border-radius: 4px; }
1492 .search-edge .edge-type { color: var(--purple); font-size: 0.6875rem; }
1493 .search-matched-urls { font-size: 0.75rem; color: var(--text-muted); }
1494 .search-matched-urls code { background: var(--bg); padding: 0.125rem 0.375rem; border-radius: 3px; font-size: 0.6875rem; }
1495 .search-centroid { font-size: 0.75rem; margin-bottom: 0.375rem; }
1496 .search-centroid a { color: var(--prose-link); text-decoration: none; word-break: break-all; }
1497 .search-centroid a:hover { color: var(--prose-link-hover); text-decoration: underline; }
1498 .search-centroid-label { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.5rem; }
1499 .search-edge-highlight { background: rgba(88, 166, 255, 0.08); border: 1px solid rgba(88, 166, 255, 0.2); }
1500 .search-edge-hit { color: var(--accent); font-weight: 600; }
1501 .search-create-island { margin-top: 1.5rem; padding: 1.25rem; background: var(--surface); border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
1502 .search-create-hint { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1rem; }
1503 .search-create-island .action-btn { display: inline-block; }
1504 .agent-docs {
1505 max-width: 980px;
1506 margin: 0 auto;
1507 padding: 2rem;
1508 }
1509 .agent-docs h2 { color: var(--accent); margin: 1.75rem 0 0.75rem; font-size: 1.25rem; }
1510 .agent-docs h3 { color: var(--prose-link); margin: 1.25rem 0 0.5rem; font-size: 1rem; }
1511 .agent-docs p, .agent-docs li { color: var(--text); margin-bottom: 0.625rem; }
1512 .agent-docs ul, .agent-docs ol { margin-left: 1.5rem; margin-bottom: 1rem; }
1513 .agent-docs code { background: var(--surface); border: 1px solid var(--border); padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.85em; }
1514 .agent-docs pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 0.75rem 0 1rem; }
1515 .agent-docs pre code { background: transparent; border: none; padding: 0; }
1516 .agent-docs .callout { border: 1px solid rgba(88,166,255,0.35); background: rgba(88,166,255,0.08); border-radius: 8px; padding: 1rem; margin: 1rem 0; }
1517 .agent-docs .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
1518 .agent-docs .card { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 1rem; }
1519 </style>
1520</head>
1521<body>
1522 <header>
1523 <h1>Stigmergic</h1>
1524 <p class="header-blurb">All content derived from <code>network.cosmik.connection</code> records on the AT Protocol</p>
1525 <nav class="header-nav">
1526 <a href="/">Explore</a>
1527 <a href="/search">Search</a>
1528 <a href="/agents">Agents</a>
1529 </nav>
1530 <div class="header-spacer"></div>
1531 <div class="auth-area">
1532 <button id="login-btn" class="login-btn" type="button">Login with ATProto</button>
1533 <span id="auth-status" title="Click to sign out"></span>
1534 </div>
1535 </header>
1536 <main>
1537 <div id="page-content"></div>
1538 </main>
1539 <script src="/app.js"></script>
1540</body>
1541</html>`;