renderg.host
A Chrome extension to quickly capture URLs into Semble Collections at https://semble.so
semble.so
at-proto
semble
chrome-extension
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Semble Quick Capture</title>
8 <link rel="preconnect" href="https://fonts.googleapis.com">
9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap"
11 rel="stylesheet">
12 <link rel="stylesheet" href="styles.css">
13</head>
14
15<body>
16 <!-- Auth Screen -->
17 <div id="loginScreen" class="screen hidden">
18 <div class="container">
19 <h2 class="title">Semble Quick Capture</h2>
20 <p class="subtitle">Sign in with your Bluesky account</p>
21
22 <form class="form-stack">
23 <div class="form-group">
24 <label class="form-label">@Handle</label>
25 <input type="text" id="loginHandle" placeholder="you.bsky.social" class="input-filled"
26 autocomplete="username">
27 </div>
28
29 <div class="form-group">
30 <label class="form-label">App Password</label>
31 <input type="password" id="loginPassword" placeholder="Your password" class="input-filled"
32 autocomplete="password">
33 <p class="form-hint">
34 Generate an <a href="https://bsky.app/settings/app-passwords" target="_blank" rel="noopener noreferrer"
35 class="form-link">App Password</a>. No account? <a href="https://bsky.app" target="_blank"
36 rel="noopener noreferrer" class="form-link">Sign up
37 on Bluesky</a>
38 </p>
39 </div>
40
41 <button id="loginButton" type="button" class="btn btn-primary">
42 Sign in
43 </button>
44
45 <div id="loginError" class="alert alert-error hidden"></div>
46 </form>
47 </div>
48 </div>
49
50 <!-- Main Capture Screen -->
51 <div id="captureScreen" class="screen hidden">
52 <!-- Header -->
53 <div class="header">
54 <h1 class="header-title">Semble</h1>
55 <button id="logoutButton" class="btn-link">Sign Out</button>
56 </div>
57
58 <!-- Content -->
59 <div class="container">
60 <form class="form-stack">
61 <!-- URL Display -->
62 <div class="form-group">
63 <label class="form-label">URL</label>
64 <div class="url-display" id="currentUrl">Assembling...</div>
65 </div>
66
67 <!-- Note Input -->
68 <div class="form-group">
69 <label class="form-label">Note (optional)</label>
70 <textarea id="noteInput" rows="3" placeholder="Add your thoughts..." class="input-filled"></textarea>
71 </div>
72
73 <!-- Collection Dropdown -->
74 <div class="form-group">
75 <label class="form-label">Collection</label>
76 <select id="collectionSelect" class="input-filled">
77 <option value="">Assembling collections...</option>
78 </select>
79 </div>
80
81 <!-- Submit Button -->
82 <button id="submitButton" type="button" class="btn btn-primary" disabled>
83 Add to Collection
84 </button>
85
86 <!-- Status Message -->
87 <div id="statusMessage" class="alert hidden"></div>
88 </form>
89 </div>
90 </div>
91
92 <!-- Loading Screen -->
93 <div id="loadingScreen" class="screen">
94 <div class="loading-container">
95 <div class="spinner"></div>
96 <p class="loading-text">Assembling...</p>
97 </div>
98 </div>
99
100 <script src="popup.js"></script>
101</body>
102
103</html>