options.html raw
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title>Smesh Signer - Options</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 box-sizing: border-box;
22 }
23
24 .page {
25 height: 100%;
26 display: flex;
27 flex-direction: column;
28 align-items: center;
29 overflow-y: auto;
30 }
31
32 .container {
33 max-width: 1200px;
34 box-sizing: border-box;
35 width: 100%;
36 padding-left: 1rem;
37 padding-right: 1rem;
38 }
39
40 .logo {
41 height: 60px;
42 width: 60px;
43 border-radius: 100%;
44 border: 2px solid var(--secondary);
45
46 img {
47 height: 100%;
48 width: 100%;
49 }
50 }
51
52 .brand-name {
53 font-weight: 700;
54 font-size: 1.5rem;
55 letter-spacing: 4px;
56 color: var(--secondary);
57 }
58
59 .main-header {
60 padding-top: 50px;
61 font-size: 50px;
62 font-weight: 500;
63 }
64
65 .sub-header {
66 padding-top: 28px;
67 font-size: 20px;
68 max-width: 460px;
69 text-align: right;
70 line-height: 1.4;
71
72 .accent {
73 color: var(--secondary);
74 border: 1px solid var(--secondary);
75 border-radius: 4px;
76 padding: 2px 4px;
77 }
78 }
79
80 .middle {
81 margin-top: 68px;
82 width: 100%;
83 background: var(--background-light);
84 display: flex;
85 flex-direction: row;
86 justify-content: center;
87 padding-bottom: 24px;
88 }
89
90 .option-label {
91 font-size: 20px;
92 margin-bottom: 0px;
93 margin-top: 16px;
94 }
95
96 .option-text {
97 color: gray;
98
99 margin-top: 4px;
100 }
101
102 .snapshots-list {
103 margin-top: 8px;
104 }
105 </style>
106 </head>
107 <body>
108 <div class="page">
109 <div class="container sam-flex-row gap" style="margin-top: 16px">
110 <div class="logo">
111 <img src="logo.svg" alt="" />
112 </div>
113 <span class="brand-name">Smesh Signer</span>
114 <span>OPTIONS</span>
115 </div>
116
117 <div class="container sam-flex-column center">
118 <span class="main-header"> Nostr Identity Manager & Signer </span>
119 <span class="sub-header">
120 Manage and switch between
121 <span class="accent">multiple identities</span>
122 while interacting with Nostr apps
123 </span>
124 </div>
125
126 <div class="middle">
127 <div class="container sam-flex-column">
128 <!-- VAULT SNAPSHOTS -->
129 <span class="option-label">Vault Snapshots</span>
130 <span class="option-text">
131 Importing a previously exported vault snapshot is not
132 <b>directly</b>
133 possible in the extension's popup window. This is due to the
134 browser's limitation of automatically closing the popup when it
135 loses focus, making it impossible to select a file there.
136 </span>
137 <span class="option-text">
138 To work around this, import your snapshot here first,
139 then use the extension popup to load it into the vault.
140 </span>
141 <span class="option-text">
142 <b>
143 Importing a snapshot here does NOT automatically load it into your vault!
144 </b>
145 </span>
146 <span class="option-text">
147 <b>
148 The data remains inside this browser and is NOT sent to any server!
149 </b>
150 </span>
151
152 <div class="sam-mt-h sam-flex-row gap">
153 <button id="uploadSnapshotsButton" class="btn btn-primary">
154 Import Snapshots
155 </button>
156
157 <button id="deleteSnapshotsButton" class="btn btn-danger">
158 Delete Snapshots
159 </button>
160 </div>
161
162 <ul id="snapshotsList" class="snapshots-list">
163 <!-- will be filled by JS -->
164 </ul>
165 </div>
166 </div>
167 </div>
168
169 <input
170 id="uploadSnapshotInput"
171 type="file"
172 multiple
173 style="position: absolute; top: 0; display: none"
174 accept=".json"
175 />
176 <script src="options.js"></script>
177 </body>
178 </html>
179