Skip to content

Commit 4e2b82f

Browse files
DevEchoX2DevEchoX2
authored
Create settings.html
1 parent 0d6fad3 commit 4e2b82f

File tree

1 file changed

+323
-0
lines changed

1 file changed

+323
-0
lines changed

‎settings.html‎

Lines changed: 323 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,323 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Vision Settings</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
9+
<style>
10+
:root {
11+
--vision-purple: #8b5cf6;
12+
--vision-purple-dark: #6d28d9;
13+
--vision-bg: #0f0f10;
14+
--vision-surface: #1c1c1e;
15+
}
16+
17+
body {
18+
font-family: 'Inter', sans-serif;
19+
margin: 0;
20+
background-color: var(--vision-bg);
21+
color: white;
22+
height: 100vh;
23+
display: flex;
24+
flex-direction: column;
25+
overflow: hidden;
26+
user-select: none;
27+
}
28+
29+
/* Tab Header */
30+
.tab-bar {
31+
display: flex;
32+
gap: 12px;
33+
padding: 1.5rem 1.5rem 0.5rem;
34+
flex-shrink: 0;
35+
}
36+
37+
.settings-tab {
38+
flex: 1;
39+
padding: 12px;
40+
background: rgba(139, 92, 246, 0.1);
41+
border: 1px solid rgba(139, 92, 246, 0.2);
42+
border-radius: 12px;
43+
font-size: 13px;
44+
font-weight: 700;
45+
text-align: center;
46+
cursor: pointer;
47+
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
48+
color: rgba(255, 255, 255, 0.6);
49+
}
50+
51+
.settings-tab.active {
52+
background: var(--vision-purple);
53+
border-color: var(--vision-purple);
54+
color: white;
55+
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
56+
transform: translateY(-2px);
57+
}
58+
59+
/* Content Area */
60+
.content-container {
61+
flex: 1;
62+
padding: 1.5rem;
63+
overflow-y: auto;
64+
scrollbar-width: none;
65+
}
66+
67+
.content-container::-webkit-scrollbar { display: none; }
68+
69+
.tab-content { display: none; }
70+
.tab-content.active { display: block; animation: fadeIn 0.3s ease; }
71+
72+
@keyframes fadeIn {
73+
from { opacity: 0; transform: translateY(10px); }
74+
to { opacity: 1; transform: translateY(0); }
75+
}
76+
77+
.section-header {
78+
font-size: 2.25rem;
79+
font-weight: 800;
80+
margin-bottom: 0.5rem;
81+
letter-spacing: -0.02em;
82+
}
83+
84+
.section-desc {
85+
font-size: 14px;
86+
color: #a1a1aa;
87+
margin-bottom: 1.5rem;
88+
font-weight: 500;
89+
}
90+
91+
.divider {
92+
height: 1px;
93+
background: rgba(255, 255, 255, 0.1);
94+
margin-bottom: 2rem;
95+
}
96+
97+
/* Controls */
98+
.control-group { margin-bottom: 1.5rem; }
99+
.control-label {
100+
display: block;
101+
font-size: 14px;
102+
font-weight: 600;
103+
margin-bottom: 8px;
104+
color: white;
105+
}
106+
107+
.vision-select {
108+
width: auto;
109+
min-width: 180px;
110+
background: rgba(139, 92, 246, 0.15);
111+
border: 1px solid rgba(139, 92, 246, 0.3);
112+
border-radius: 10px;
113+
padding: 10px 32px 10px 16px;
114+
color: white;
115+
font-size: 13px;
116+
font-weight: 600;
117+
outline: none;
118+
cursor: pointer;
119+
appearance: none;
120+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
121+
background-repeat: no-repeat;
122+
background-position: right 12px center;
123+
background-size: 14px;
124+
}
125+
126+
.vision-select:focus {
127+
border-color: var(--vision-purple);
128+
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
129+
}
130+
131+
.vision-btn {
132+
background: var(--vision-purple);
133+
color: white;
134+
padding: 10px 20px;
135+
border-radius: 10px;
136+
font-size: 13px;
137+
font-weight: 700;
138+
transition: all 0.2s;
139+
}
140+
141+
.vision-btn:hover { background: var(--vision-purple-dark); transform: scale(1.02); }
142+
.vision-btn:active { transform: scale(0.98); }
143+
144+
.info-text {
145+
font-size: 13px;
146+
color: #71717a;
147+
margin-top: 2rem;
148+
line-height: 1.6;
149+
font-weight: 500;
150+
}
151+
152+
.accent-text { color: var(--vision-purple); font-weight: 700; }
153+
</style>
154+
</head>
155+
<body>
156+
<div class="tab-bar">
157+
<div class="settings-tab active" data-tab="proxy">Proxy</div>
158+
<div class="settings-tab" data-tab="appearance">Appearance</div>
159+
<div class="settings-tab" data-tab="cloak">Cloak</div>
160+
<div class="settings-tab" data-tab="data">Data</div>
161+
</div>
162+
163+
<div class="content-container">
164+
<!-- Proxy Tab -->
165+
<div id="proxy" class="tab-content active">
166+
<h1 class="section-header">Proxy</h1>
167+
<p class="section-desc">Options to change how the search functionality works.</p>
168+
<div class="divider"></div>
169+
170+
<div class="control-group">
171+
<label class="control-label">Choose your proxy service</label>
172+
<select class="vision-select">
173+
<option>Ultraviolet (Default)</option>
174+
<option disabled>Vision Node (Beta)</option>
175+
</select>
176+
</div>
177+
178+
<div class="control-group">
179+
<label class="control-label">Choose the transport the proxy uses</label>
180+
<select class="vision-select">
181+
<option>Epoxy</option>
182+
<option>Libcurl</option>
183+
</select>
184+
</div>
185+
186+
<div class="control-group">
187+
<label class="control-label">Choose a search engine</label>
188+
<select id="engine-select" class="vision-select">
189+
<option value="https://www.google.com/search?q=">Google</option>
190+
<option value="https://duckduckgo.com/?q=">DuckDuckGo</option>
191+
<option value="https://www.bing.com/search?q=">Bing</option>
192+
<option value="https://search.yahoo.com/search?p=">Yahoo</option>
193+
</select>
194+
</div>
195+
196+
<p class="info-text">
197+
If the proxy stops working, please go to your <span class="accent-text">site settings</span> and clear all site data, then reload. (Make sure to export any data before this)
198+
</p>
199+
</div>
200+
201+
<!-- Appearance Tab -->
202+
<div id="appearance" class="tab-content">
203+
<h1 class="section-header">Appearance</h1>
204+
<p class="section-desc">Customize the look and feel of your Vision environment.</p>
205+
<div class="divider"></div>
206+
207+
<div class="control-group">
208+
<label class="control-label">Vision Theme</label>
209+
<select class="vision-select">
210+
<option>Deep Purple (Default)</option>
211+
<option>Midnight Cyan</option>
212+
<option>Crimson Void</option>
213+
</select>
214+
</div>
215+
216+
<div class="control-group">
217+
<label class="control-label">New Tab Wallpaper</label>
218+
<p class="text-xs text-zinc-500 mb-2">Configure this in the New Tab page settings panel.</p>
219+
</div>
220+
</div>
221+
222+
<!-- Cloak Tab -->
223+
<div id="cloak" class="tab-content">
224+
<h1 class="section-header">Cloak</h1>
225+
<p class="section-desc">Tab cloaking and About:Blank stealth mode.</p>
226+
<div class="divider"></div>
227+
228+
<div class="control-group">
229+
<label class="control-label">About:Blank Cloak</label>
230+
<p class="text-xs text-zinc-500 mb-4">Launches the current session inside a hidden about:blank window to hide from history and trackers.</p>
231+
<button id="cloak-btn" class="vision-btn">Launch Cloak</button>
232+
</div>
233+
234+
<div class="control-group">
235+
<label class="control-label">Tab Title Cloak</label>
236+
<select class="vision-select">
237+
<option>None (Default)</option>
238+
<option>Google Docs</option>
239+
<option>Canvas</option>
240+
<option>My Drive</option>
241+
</select>
242+
</div>
243+
</div>
244+
245+
<!-- Data Tab -->
246+
<div id="data" class="tab-content">
247+
<h1 class="section-header">Data</h1>
248+
<p class="section-desc">Manage your registry, history, and stored visions.</p>
249+
<div class="divider"></div>
250+
251+
<div class="control-group">
252+
<label class="control-label">History</label>
253+
<button onclick="clearData('vision_history')" class="vision-btn bg-red-500/20 text-red-400 border border-red-500/30 hover:bg-red-500/40">Clear Browsing History</button>
254+
</div>
255+
256+
<div class="control-group">
257+
<label class="control-label">Bookmarks</label>
258+
<button onclick="clearData('vision_bookmarks')" class="vision-btn bg-red-500/20 text-red-400 border border-red-500/30 hover:bg-red-500/40">Clear All Bookmarks</button>
259+
</div>
260+
</div>
261+
</div>
262+
263+
<script>
264+
const tabs = document.querySelectorAll('.settings-tab');
265+
const contents = document.querySelectorAll('.tab-content');
266+
const engineSelect = document.getElementById('engine-select');
267+
const cloakBtn = document.getElementById('cloak-btn');
268+
269+
// Tab Switching Logic
270+
tabs.forEach(tab => {
271+
tab.onclick = () => {
272+
tabs.forEach(t => t.classList.remove('active'));
273+
contents.forEach(c => c.classList.remove('active'));
274+
275+
tab.classList.add('active');
276+
document.getElementById(tab.dataset.tab).classList.add('active');
277+
};
278+
});
279+
280+
// Search Engine Logic
281+
function updateEngine() {
282+
const current = localStorage.getItem('vision_search_engine') || 'https://www.google.com/search?q=';
283+
engineSelect.value = current;
284+
}
285+
286+
engineSelect.onchange = () => {
287+
localStorage.setItem('vision_search_engine', engineSelect.value);
288+
};
289+
290+
// About:Blank Cloak Logic
291+
cloakBtn.onclick = () => {
292+
const win = window.open('about:blank', '_blank');
293+
if (win) {
294+
const doc = win.document;
295+
const iframe = doc.createElement('iframe');
296+
const style = iframe.style;
297+
298+
doc.title = 'My Drive - Google Drive';
299+
style.position = 'fixed';
300+
style.top = '0';
301+
style.left = '0';
302+
style.bottom = '0';
303+
style.right = '0';
304+
style.width = '100%';
305+
style.height = '100%';
306+
style.border = 'none';
307+
308+
iframe.src = window.parent.location.href;
309+
doc.body.appendChild(iframe);
310+
}
311+
};
312+
313+
function clearData(key) {
314+
if (confirm('Are you sure you want to purge this data segment? This cannot be undone.')) {
315+
localStorage.removeItem(key);
316+
alert('Data purged from registry.');
317+
}
318+
}
319+
320+
updateEngine();
321+
</script>
322+
</body>
323+
</html>

0 commit comments

Comments
 (0)