Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>boomarks</title> <link 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" rel="stylesheet" /> <link rel="icon" href="favicon.svg" type="image/svg+xml" /> <link rel="stylesheet" href="style.css" /> </head>
<body> <!-- Login Modal --> <dialog id="loginDialog" class="param-dialog"> <form method="dialog" class="param-form"> <h2>Connect to AT Protocol</h2> <div class="param-group"> <label for="handleInput" class="param-label">Handle</label> <input type="text" id="handleInput" class="param-input" placeholder="user.bsky.social" /> </div> <menu class="param-menu"> <button id="loginBtn" type="button" class="param-btn dark">Login</button> <button id="guestViewBtn" type="button" class="param-btn">View Bookmarks</button> </menu> </form> </dialog>
<div class="topbar"> <div style="flex-grow: 1"> <b><a id="headerTitle" href="">boomarks</a></b> <img id="userAvatar" class="user-avatar" style="display: none;" /> <button id="logoutBtn" class="param-btn">Login</button> <span id="viewingUser" class="viewing-user" style="display: none;"></span> </div> <img id="searchedUserAvatar" class="searched-user-avatar" style="display: none;" /> <input type="text" id="userSearchInput" placeholder="user.bsky.social" title="View another user's bookmarks" style="display: none; margin-right: 0.5vw;" /> <button id="openEmptyDialogBtn" data-umami-event="Open creation modal" class="param-btn"><span class="btn-text">Add</span> ➕</button>
<button id="viewToggleBtn" class="param-btn"><span class="btn-text">Grid</span> ⊞</button> <button id="sortToggleBtn" data-umami-event="Sort" class="param-btn"><span class="btn-text">Sort</span> ▲</button> <input type="text" id="searchInput" placeholder="'demo' '#books'" data-umami-event="Search" /> </div>
<div class="containers"></div>
<!-- LEAVE THIS THIS LINE --> <div class="footer">Made with <a href="https://github.com/earlyriser/woomarks">woomarks</a>.</div>
<dialog id="paramDialog" class="param-dialog"> <form method="dialog" class="param-form"> <div class="param-group"> <label for="paramTitle" class="param-label">Title</label> <input type="text" id="paramTitle" name="paramTitle" class="param-input" /> </div>
<div class="param-group"> <label for="paramUrl" class="param-label">URL</label> <input type="text" id="paramUrl" name="paramUrl" class="param-input" /> </div>
<div class="param-group"> <label for="tagsInput" class="param-label" >Tags (comma-separated)</label > <input id="tagsInput" type="text" class="param-input" placeholder="e.g. work, music" /> </div>
<p id="paramDialogCount" class="param-count"></p>
<menu class="param-menu"> <div class="menu-right"> <button id="cancelBtn" type="button" value="cancel" class="param-btn cancel" > Cancel </button> <button id="saveBtn" type="button" value="default" class="param-btn dark" data-umami-event="Add bookmark" > Add bookmark </button> </div> </menu> </form> </dialog> </body> <script type="module"> import { AtpAgent, Agent } from 'https://esm.sh/@atproto/api'; import { BrowserOAuthClient } from 'https://esm.sh/@atproto/oauth-client-browser'; window.AtpAgent = AtpAgent; window.Agent = Agent; window.BrowserOAuthClient = BrowserOAuthClient; </script> <script async src="./script.js"></script></html>