Rewild Your Web
me.webbeef.org
web
browser
dweb
1<!doctype html>
2<html>
3 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
4 <head>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Settings</title>
7 <link rel="stylesheet" href="//theme.localhost:8888/index.css" />
8 <link rel="stylesheet" href="//shared.localhost:8888/fonts/fonts.css" />
9 <link
10 rel="stylesheet"
11 href="//shared.localhost:8888/third_party/lucide/lucide.css"
12 />
13 <script type="module" src="//shared.localhost:8888/lucide_icon.js"></script>
14 <link rel="icon" href="./logo.png" />
15 <link rel="stylesheet" href="index.css" />
16 </head>
17 <body>
18 <aside class="settings-sidebar">
19 <h1>Settings</h1>
20 <nav class="settings-nav">
21 <a href="#general" class="nav-item active" data-category="general">
22 <lucide-icon name="settings"></lucide-icon>
23 <span>General</span>
24 </a>
25 <a href="#search" class="nav-item" data-category="search">
26 <lucide-icon name="search"></lucide-icon>
27 <span>Search</span>
28 </a>
29 <a href="#theme" class="nav-item" data-category="theme">
30 <lucide-icon name="palette"></lucide-icon>
31 <span>Theme</span>
32 </a>
33 <a href="#keyboard" class="nav-item" data-category="keyboard">
34 <lucide-icon name="keyboard"></lucide-icon>
35 <span>Keyboard</span>
36 </a>
37 <a href="#developer" class="nav-item" data-category="developer">
38 <lucide-icon name="code"></lucide-icon>
39 <span>Developer</span>
40 </a>
41 </nav>
42 </aside>
43 <main class="settings-content">
44 <header class="mobile-header">
45 <div class="back-button" aria-label="Back">
46 <lucide-icon name="arrow-left"></lucide-icon>
47 </div>
48 <h2 class="mobile-title">Settings</h2>
49 </header>
50 <section id="general" class="settings-category">
51 <details open>
52 <summary>
53 <lucide-icon name="settings"></lucide-icon>
54 <span>General</span>
55 </summary>
56 <div class="category-content">
57 <label for="new-view-url" class="category-description">
58 Enter the URL of the new view page
59 </label>
60 <input type="text" id="new-view-url" />
61
62 <label for="homescreen-url" class="category-description">
63 Enter the URL of the homescreen
64 </label>
65 <input type="text" id="homescreen-url" />
66
67 <label for="user-agent" class="category-description">
68 Customize your User-Agent string
69 </label>
70 <input type="text" id="user-agent" />
71 </div>
72 </details>
73 </section>
74 <section id="search" class="settings-category">
75 <details>
76 <summary>
77 <lucide-icon name="search"></lucide-icon>
78 <span>Search</span>
79 </summary>
80 <div class="category-content">
81 <label for="search-engine-list" class="category-description">
82 Choose your search engine
83 </label>
84 <select id="search-engine-list"></select>
85 </div>
86 </details>
87 </section>
88 <section id="theme" class="settings-category">
89 <details>
90 <summary>
91 <lucide-icon name="palette"></lucide-icon>
92 <span>Theme</span>
93 </summary>
94 <div class="category-content">
95 <label for="theme-grid" class="category-description">
96 Choose your visual theme
97 </label>
98 <div id="theme-grid" class="theme-grid"></div>
99 </div>
100 </details>
101 </section>
102 <section id="keyboard" class="settings-category">
103 <details>
104 <summary>
105 <lucide-icon name="keyboard"></lucide-icon>
106 <span>Keyboard</span>
107 </summary>
108 <div class="category-content">
109 <div class="setting-row">
110 <div class="setting-info">
111 <label for="virtual-keyboard-toggle" class="setting-label">
112 Virtual Keyboard
113 </label>
114 <span class="setting-description">
115 Use an on-screen keyboard in input fields
116 </span>
117 </div>
118 <label class="toggle-switch">
119 <input type="checkbox" id="virtual-keyboard-toggle" />
120 <span class="toggle-slider"></span>
121 </label>
122 </div>
123 </div>
124 </details>
125 </section>
126 <section id="developer" class="settings-category">
127 <details>
128 <summary>
129 <lucide-icon name="code"></lucide-icon>
130 <span>Developer</span>
131 </summary>
132 <div class="category-content">
133 <div class="setting-row">
134 <div class="setting-info">
135 <label for="mobile-simulation-toggle" class="setting-label">
136 Mobile Simulation
137 </label>
138 <span class="setting-description">
139 Force mobile UI mode regardless of screen size (requires reload)
140 </span>
141 </div>
142 <label class="toggle-switch">
143 <input type="checkbox" id="mobile-simulation-toggle" />
144 <span class="toggle-slider"></span>
145 </label>
146 </div>
147 <div class="setting-row">
148 <div class="setting-info">
149 <label for="devtools-toggle" class="setting-label">
150 DevTools Server
151 </label>
152 <span class="setting-description">
153 Enable the remote debugging server (requires restart)
154 </span>
155 </div>
156 <label class="toggle-switch">
157 <input type="checkbox" id="devtools-toggle" />
158 <span class="toggle-slider"></span>
159 </label>
160 </div>
161 <div class="setting-row">
162 <div class="setting-info">
163 <label for="devtools-port" class="setting-label">
164 DevTools Port
165 </label>
166 <span class="setting-description">
167 Port number for the remote debugging server
168 </span>
169 </div>
170 <input type="number" id="devtools-port" min="1" max="65535" class="number-input" />
171 </div>
172 </div>
173 </details>
174 </section>
175 </main>
176 <script type="module" src="index.js"></script>
177 </body>
178</html>