hyl.st
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
7 <title>boomarks</title>
8 <link
9 href="https://fonts.googleapis.com/css2?family=Doto&family=Alfa+Slab+One&family=Bebas+Neue&family=Bree+Serif&family=Caveat&family=Courier+Prime&family=Dosis&family=EB+Garamond&family=Permanent+Marker&family=Sedan+SC&family=Ultra&display=swap"
10 rel="stylesheet"
11 />
12 <link rel="icon" href="favicon.svg" type="image/svg+xml" />
13 <link rel="stylesheet" href="style.css" />
14 </head>
15
16 <body>
17 <!-- Login Modal -->
18 <dialog id="loginDialog" class="param-dialog">
19 <form method="dialog" class="param-form">
20 <h2>Connect to AT Protocol</h2>
21 <div class="param-group">
22 <label for="handleInput" class="param-label">Handle</label>
23 <input
24 type="text"
25 id="handleInput"
26 class="param-input"
27 placeholder="user.bsky.social"
28 />
29 </div>
30 <menu class="param-menu">
31 <button id="loginBtn" type="button" class="param-btn dark">Login</button>
32 <button id="guestViewBtn" type="button" class="param-btn">View Bookmarks</button>
33 </menu>
34 </form>
35 </dialog>
36
37 <div class="topbar">
38 <div style="flex-grow: 1">
39 <b><a id="headerTitle" href="">boomarks</a></b>
40 <img id="userAvatar" class="user-avatar" style="display: none;" />
41 <button id="logoutBtn" class="param-btn">Login</button>
42 <span id="viewingUser" class="viewing-user" style="display: none;"></span>
43 </div>
44 <img id="searchedUserAvatar" class="searched-user-avatar" style="display: none;" />
45 <input
46 type="text"
47 id="userSearchInput"
48 placeholder="user.bsky.social"
49 title="View another user's bookmarks"
50 style="display: none; margin-right: 0.5vw;"
51 />
52 <button id="openEmptyDialogBtn" data-umami-event="Open creation modal" class="param-btn"><span class="btn-text">Add</span> ➕</button>
53
54 <button id="viewToggleBtn" class="param-btn"><span class="btn-text">Grid</span> ⊞</button>
55 <button id="sortToggleBtn" data-umami-event="Sort" class="param-btn"><span class="btn-text">Sort</span> ▲</button>
56 <input
57 type="text"
58 id="searchInput"
59 placeholder="'demo' '#books'"
60 data-umami-event="Search"
61 />
62 </div>
63
64 <div class="containers"></div>
65
66 <!-- LEAVE THIS THIS LINE -->
67 <div class="footer">Made with <a href="https://github.com/earlyriser/woomarks">woomarks</a>.</div>
68
69 <dialog id="paramDialog" class="param-dialog">
70 <form method="dialog" class="param-form">
71 <div class="param-group">
72 <label for="paramTitle" class="param-label">Title</label>
73 <input
74 type="text"
75 id="paramTitle"
76 name="paramTitle"
77 class="param-input"
78 />
79 </div>
80
81 <div class="param-group">
82 <label for="paramUrl" class="param-label">URL</label>
83 <input
84 type="text"
85 id="paramUrl"
86 name="paramUrl"
87 class="param-input"
88 />
89 </div>
90
91 <div class="param-group">
92 <label for="tagsInput" class="param-label"
93 >Tags (comma-separated)</label
94 >
95 <input
96 id="tagsInput"
97 type="text"
98 class="param-input"
99 placeholder="e.g. work, music"
100 />
101 </div>
102
103 <p id="paramDialogCount" class="param-count"></p>
104
105 <menu class="param-menu">
106 <div class="menu-right">
107 <button
108 id="cancelBtn"
109 type="button"
110 value="cancel"
111 class="param-btn cancel"
112 >
113 Cancel
114 </button>
115 <button
116 id="saveBtn"
117 type="button"
118 value="default"
119 class="param-btn dark"
120 data-umami-event="Add bookmark"
121 >
122 Add bookmark
123 </button>
124 </div>
125 </menu>
126 </form>
127 </dialog>
128 </body>
129 <script type="module">
130 import { AtpAgent, Agent } from 'https://esm.sh/@atproto/api';
131 import { BrowserOAuthClient } from 'https://esm.sh/@atproto/oauth-client-browser';
132 window.AtpAgent = AtpAgent;
133 window.Agent = Agent;
134 window.BrowserOAuthClient = BrowserOAuthClient;
135 </script>
136 <script async src="./script.js"></script>
137</html>