-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathoptions.html
More file actions
233 lines (214 loc) · 10.6 KB
/
options.html
File metadata and controls
233 lines (214 loc) · 10.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KaiSign Settings</title>
<link rel="stylesheet" href="options.css">
</head>
<body>
<div class="settings-container">
<!-- Header -->
<header class="settings-header">
<div class="header-logo">KS</div>
<div class="header-info">
<h1>KaiSign Settings</h1>
<p>Configure your transaction analysis preferences</p>
</div>
</header>
<!-- Storage Settings -->
<section class="settings-section">
<div class="section-header">
<div class="section-icon">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
<h2 class="section-title">Storage</h2>
</div>
<div class="section-content">
<div class="setting-item">
<div class="setting-info">
<span class="setting-label">Maximum Transactions</span>
<span class="setting-description">Number of transactions to keep in history</span>
</div>
<div class="setting-control">
<input type="number" id="maxTransactions" min="10" max="500" value="100">
</div>
</div>
<div class="setting-item">
<div class="setting-info">
<span class="setting-label">Auto-export on Limit</span>
<span class="setting-description">Automatically export data before clearing old transactions</span>
</div>
<div class="setting-control">
<label class="toggle">
<input type="checkbox" id="autoExport">
<span class="toggle-slider"></span>
</label>
</div>
</div>
<div class="storage-info">
<div class="storage-bar">
<div class="storage-bar-fill" id="storageBar" style="width: 0%"></div>
</div>
<span class="storage-text" id="storageText">Loading...</span>
</div>
</div>
</section>
<!-- Display Settings -->
<section class="settings-section">
<div class="section-header">
<div class="section-icon">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"/>
<path d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z"/>
</svg>
</div>
<h2 class="section-title">Display</h2>
</div>
<div class="section-content">
<div class="setting-item">
<div class="setting-info">
<span class="setting-label">Transaction Notifications</span>
<span class="setting-description">Show popup notifications when transactions are detected</span>
</div>
<div class="setting-control">
<label class="toggle">
<input type="checkbox" id="notifications" checked>
<span class="toggle-slider"></span>
</label>
</div>
</div>
</div>
</section>
<!-- Name Resolution -->
<section class="settings-section">
<div class="section-header">
<div class="section-icon">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
</svg>
</div>
<h2 class="section-title">Name Resolution</h2>
</div>
<div class="section-content">
<p class="section-description">Resolve addresses to human-readable names (ENS on Ethereum, Basenames on Base)</p>
<div class="form-group">
<label>
<input type="checkbox" id="enableNameResolution" checked>
Enable name resolution
</label>
<small>Show ENS/Basenames instead of truncated addresses when available</small>
</div>
</div>
</section>
<!-- RPC Settings -->
<section class="settings-section">
<div class="section-header">
<div class="section-icon">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M5.315 4.489c.165-.083.375-.02.468.137l2 3.38c.093.156.047.357-.104.463L5.5 10.309v1.19a.3.3 0 0 1-.3.3H4.2a.3.3 0 0 1-.3-.3V9.5l-2.4-1.603a.3.3 0 0 1-.1-.463l2-3.38a.3.3 0 0 1 .468-.137l1.447.724 1.447-.724z"/>
</svg>
</div>
<h2 class="section-title">RPC Endpoints</h2>
</div>
<div class="section-content">
<p class="section-description">Configure custom RPC endpoints for each network. Leave empty to use defaults.</p>
<div id="rpcEndpointsList" class="rpc-endpoints-list">
<!-- Dynamic entries added by JS -->
</div>
<button type="button" class="btn btn-secondary" id="addRpcBtn" style="margin-top: var(--space-md);">
+ Add Chain
</button>
</div>
</section>
<!-- Developer Settings -->
<section class="settings-section">
<div class="section-header">
<div class="section-icon">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0zm2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0z"/>
</svg>
</div>
<h2 class="section-title">Developer</h2>
</div>
<div class="section-content">
<p class="section-description">Configure backend endpoints for local development</p>
<div class="form-group">
<label for="backendApiUrl">Backend API URL</label>
<input type="text" id="backendApiUrl" placeholder="Leave empty for default">
<small>Override API endpoint for local development (e.g., http://localhost:3000)</small>
</div>
</div>
</section>
<!-- Data Management -->
<section class="settings-section">
<div class="section-header">
<div class="section-icon">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
</svg>
</div>
<h2 class="section-title">Data Management</h2>
</div>
<div class="section-content">
<div class="data-actions">
<div class="data-action">
<div class="data-action-icon">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</div>
<h4>Export All Data</h4>
<p>Download all transactions, RPC activity, and settings</p>
<button class="btn btn-primary" id="exportAllBtn">Export JSON</button>
</div>
<div class="data-action">
<div class="data-action-icon">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
</svg>
</div>
<h4>Import Data</h4>
<p>Restore data from a previously exported file</p>
<button class="btn btn-secondary" id="importBtn">Import JSON</button>
<input type="file" id="fileInput" accept=".json" style="display: none;">
</div>
<div class="data-action">
<div class="data-action-icon">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
</div>
<h4>Clear All Data</h4>
<p>Permanently delete all stored data</p>
<button class="btn btn-danger" id="clearAllBtn">Clear Data</button>
</div>
</div>
</div>
</section>
<!-- Save Button -->
<div class="button-group">
<button class="btn btn-primary" id="saveBtn" style="width: 100%;">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M10.354 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
<path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12z"/>
</svg>
Save Settings
</button>
</div>
<!-- Footer -->
<footer class="settings-footer">
<p>KaiSign v<span id="version">1.1.0</span> | <a href="https://www.kaisign.xyz" target="_blank">KaiSign</a></p>
</footer>
</div>
<!-- Toast -->
<div class="toast" id="toast"></div>
<script src="options.js"></script>
</body>
</html>