unlock.html raw
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title>Smesh Signer - Unlock</title>
6 <link rel="stylesheet" type="text/css" href="styles.css" />
7 <script src="scripts.js"></script>
8 <style>
9 /* Prevent white flash on load */
10 html { background-color: #0a0a0a; }
11 @media (prefers-color-scheme: light) {
12 html { background-color: #ffffff; }
13 }
14
15 body {
16 background: var(--background);
17 height: 100vh;
18 width: 100vw;
19 color: var(--foreground);
20 font-size: 16px;
21 margin: 0;
22 display: flex;
23 flex-direction: column;
24 }
25
26 .color-primary {
27 color: var(--primary);
28 }
29
30 .page {
31 height: 100%;
32 display: flex;
33 flex-direction: column;
34 padding: var(--size);
35 box-sizing: border-box;
36 }
37
38 .header {
39 text-align: center;
40 font-size: 1.25rem;
41 font-weight: 500;
42 padding: var(--size) 0;
43 }
44
45 .content {
46 flex: 1;
47 display: flex;
48 flex-direction: column;
49 justify-content: center;
50 align-items: center;
51 gap: 16px;
52 }
53
54 .logo-frame {
55 padding: 0;
56 display: flex;
57 align-items: center;
58 justify-content: center;
59 }
60
61 .logo-frame img {
62 display: block;
63 }
64
65 .input-group {
66 width: 100%;
67 max-width: 280px;
68 display: flex;
69 }
70
71 .input-group input {
72 flex: 1;
73 padding: 10px 12px;
74 border: 1px solid var(--border);
75 border-right: none;
76 border-radius: 6px 0 0 6px;
77 background: var(--background);
78 color: var(--foreground);
79 font-size: 14px;
80 }
81
82 .input-group input:focus {
83 outline: none;
84 border-color: var(--primary);
85 }
86
87 .input-group button {
88 padding: 10px 12px;
89 border: 1px solid var(--border);
90 border-radius: 0 6px 6px 0;
91 background: var(--background-light);
92 color: var(--muted-foreground);
93 cursor: pointer;
94 }
95
96 .input-group button:hover {
97 background: var(--muted);
98 }
99
100 .unlock-btn {
101 width: 100%;
102 max-width: 280px;
103 padding: 10px 16px;
104 border: none;
105 border-radius: 6px;
106 background: var(--primary);
107 color: var(--primary-foreground);
108 font-size: 14px;
109 font-weight: 500;
110 cursor: pointer;
111 display: flex;
112 align-items: center;
113 justify-content: center;
114 gap: 8px;
115 }
116
117 .unlock-btn:hover:not(:disabled) {
118 opacity: 0.9;
119 }
120
121 .unlock-btn:disabled {
122 opacity: 0.5;
123 cursor: not-allowed;
124 }
125
126 .alert {
127 position: fixed;
128 bottom: var(--size);
129 left: 50%;
130 transform: translateX(-50%);
131 padding: 10px 16px;
132 border-radius: 6px;
133 font-size: 14px;
134 display: flex;
135 align-items: center;
136 gap: 8px;
137 }
138
139 .alert-danger {
140 background: var(--destructive);
141 color: var(--destructive-foreground);
142 }
143
144 .hidden {
145 display: none !important;
146 }
147
148 .deriving-overlay {
149 position: fixed;
150 top: 0;
151 left: 0;
152 right: 0;
153 bottom: 0;
154 background: rgba(0, 0, 0, 0.8);
155 display: flex;
156 flex-direction: column;
157 align-items: center;
158 justify-content: center;
159 gap: 16px;
160 z-index: 1000;
161 }
162
163 .spinner {
164 width: 40px;
165 height: 40px;
166 border: 3px solid var(--muted);
167 border-top-color: var(--primary);
168 border-radius: 50%;
169 animation: spin 1s linear infinite;
170 }
171
172 @keyframes spin {
173 to { transform: rotate(360deg); }
174 }
175
176 .deriving-text {
177 color: var(--foreground);
178 font-size: 14px;
179 }
180
181 .host-info {
182 text-align: center;
183 font-size: 13px;
184 color: var(--muted-foreground);
185 margin-top: 8px;
186 }
187
188 .host-name {
189 color: var(--primary);
190 font-weight: 500;
191 }
192 </style>
193 </head>
194 <body>
195 <div class="page">
196 <div class="header">
197 <span class="brand">Smesh Signer</span>
198 </div>
199
200 <div class="content">
201 <div class="logo-frame">
202 <img src="logo.svg" height="100" width="100" alt="" />
203 </div>
204
205 <div id="hostInfo" class="host-info hidden">
206 <span class="host-name" id="hostSpan"></span><br>
207 is requesting access
208 </div>
209
210 <div class="input-group sam-mt">
211 <input
212 id="passwordInput"
213 type="password"
214 placeholder="vault password"
215 autocomplete="current-password"
216 />
217 <button id="togglePassword" type="button">
218 <i class="bi bi-eye"></i>
219 </button>
220 </div>
221
222 <button id="unlockBtn" type="button" class="unlock-btn" disabled>
223 <i class="bi bi-box-arrow-in-right"></i>
224 <span>Unlock</span>
225 </button>
226 </div>
227 </div>
228
229 <!-- Deriving overlay -->
230 <div id="derivingOverlay" class="deriving-overlay hidden">
231 <div class="spinner"></div>
232 <div class="deriving-text">Unlocking vault...</div>
233 </div>
234
235 <!-- Error alert -->
236 <div id="errorAlert" class="alert alert-danger hidden">
237 <i class="bi bi-exclamation-triangle"></i>
238 <span id="errorMessage">Invalid password</span>
239 </div>
240
241 <script src="unlock.js"></script>
242 </body>
243 </html>
244