Skip to content

Commit 4f8eb6d

Browse files
DevEchoX2DevEchoX2
authored
Update index.html
1 parent 2d0375b commit 4f8eb6d

1 file changed

Lines changed: 59 additions & 84 deletions

File tree

‎index.html‎

Lines changed: 59 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,17 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Vision Browser</title>
6+
<title>Vision</title>
77
<script src="https://cdn.tailwindcss.com"></script>
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet">
1111
<style>
1212
:root {
1313
--bg-dark: #000000;
14-
--bg-ui: #0a0a0a;
15-
--bg-tab-active: #141414;
16-
--accent: #ffffff;
17-
--border: rgba(255, 255, 255, 0.1);
14+
--bg-ui: #050505;
15+
--bg-tab-active: #0f0f0f;
16+
--border: rgba(255, 255, 255, 0.06);
1817
}
1918

2019
body {
@@ -31,9 +30,9 @@
3130
.tab-bar {
3231
display: flex;
3332
align-items: flex-end;
34-
height: 44px;
33+
height: 38px;
3534
background: var(--bg-dark);
36-
padding: 0 10px;
35+
padding: 0 12px;
3736
border-bottom: 1px solid var(--border);
3837
}
3938

@@ -50,66 +49,59 @@
5049
position: relative;
5150
display: flex;
5251
align-items: center;
53-
height: 36px;
54-
min-width: 140px;
55-
max-width: 200px;
56-
background: #080808;
52+
height: 30px;
53+
min-width: 150px;
54+
max-width: 210px;
55+
background: #000;
5756
color: #555;
58-
padding: 0 16px;
59-
margin-right: 4px;
57+
padding: 0 14px;
58+
margin-right: 2px;
6059
cursor: pointer;
6160
border-radius: 10px 10px 0 0;
62-
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
61+
transition: all 0.2s ease;
6362
font-size: 11px;
6463
font-weight: 500;
6564
user-select: none;
6665
flex-shrink: 0;
6766
}
6867

6968
.tab:hover {
70-
background: #111;
71-
color: #aaa;
72-
transform: translateY(-1px);
73-
}
74-
75-
.tab:active {
76-
transform: scale(0.97);
69+
color: #999;
7770
}
7871

7972
.tab.active {
8073
background: var(--bg-tab-active);
8174
color: #fff;
8275
z-index: 10;
83-
transform: translateY(0);
8476
}
8577

8678
.tab.active::before,
8779
.tab.active::after {
8880
content: '';
8981
position: absolute;
9082
bottom: 0;
91-
width: 12px;
92-
height: 12px;
83+
width: 10px;
84+
height: 10px;
9385
background: var(--bg-tab-active);
9486
pointer-events: none;
9587
}
9688

9789
.tab.active::before {
98-
left: -12px;
99-
mask-image: radial-gradient(circle at 0 0, transparent 12px, black 12px);
100-
-webkit-mask-image: radial-gradient(circle at 0 0, transparent 12px, black 12px);
90+
left: -10px;
91+
mask-image: radial-gradient(circle at 0 0, transparent 10px, black 10px);
92+
-webkit-mask-image: radial-gradient(circle at 0 0, transparent 10px, black 10px);
10193
}
10294

10395
.tab.active::after {
104-
right: -12px;
105-
mask-image: radial-gradient(circle at 100% 0, transparent 12px, black 12px);
106-
-webkit-mask-image: radial-gradient(circle at 100% 0, transparent 12px, black 12px);
96+
right: -10px;
97+
mask-image: radial-gradient(circle at 100% 0, transparent 10px, black 10px);
98+
-webkit-mask-image: radial-gradient(circle at 100% 0, transparent 10px, black 10px);
10799
}
108100

109101
.tab-icon {
110102
width: 14px;
111103
height: 14px;
112-
margin-right: 10px;
104+
margin-right: 8px;
113105
flex-shrink: 0;
114106
}
115107

@@ -121,50 +113,49 @@
121113
}
122114

123115
.tab-close {
124-
width: 18px;
125-
height: 18px;
116+
width: 16px;
117+
height: 16px;
126118
display: flex;
127119
align-items: center;
128120
justify-content: center;
129121
border-radius: 4px;
130-
margin-left: 8px;
122+
margin-left: 6px;
131123
opacity: 0;
132124
transition: all 0.2s;
133125
}
134126

135127
.tab:hover .tab-close, .tab.active .tab-close {
136-
opacity: 0.6;
128+
opacity: 0.5;
137129
}
138130

139131
.tab-close:hover {
140-
background: rgba(255,255,255,0.15);
132+
background: rgba(255,255,255,0.1);
141133
opacity: 1 !important;
142-
color: #ff4d4d;
143134
}
144135

145136
.nav-bar {
146-
height: 48px;
137+
height: 42px;
147138
background: var(--bg-ui);
148139
display: flex;
149140
align-items: center;
150-
padding: 0 16px;
151-
gap: 16px;
141+
padding: 0 12px;
142+
gap: 12px;
152143
border-bottom: 1px solid var(--border);
153144
}
154145

155146
.nav-btn {
156-
width: 32px;
157-
height: 32px;
147+
width: 28px;
148+
height: 28px;
158149
display: flex;
159150
align-items: center;
160151
justify-content: center;
161-
border-radius: 8px;
152+
border-radius: 6px;
162153
color: #666;
163-
transition: all 0.2s;
154+
transition: all 0.15s;
164155
}
165156

166157
.nav-btn:hover {
167-
background: rgba(255,255,255,0.08);
158+
background: rgba(255,255,255,0.06);
168159
color: #fff;
169160
}
170161

@@ -177,25 +168,25 @@
177168

178169
.address-bar {
179170
width: 100%;
180-
height: 32px;
171+
height: 28px;
181172
background: #000;
182-
border: 1px solid rgba(255,255,255,0.1);
183-
border-radius: 8px;
184-
padding: 0 40px;
185-
color: #eee;
186-
font-size: 13px;
173+
border: 1px solid rgba(255,255,255,0.06);
174+
border-radius: 6px;
175+
padding: 0 36px;
176+
color: #ddd;
177+
font-size: 12px;
187178
font-family: 'JetBrains Mono', monospace;
188179
outline: none;
189180
transition: border-color 0.2s;
190181
}
191182

192183
.address-bar:focus {
193-
border-color: #555;
184+
border-color: #333;
194185
}
195186

196187
.address-icon {
197188
position: absolute;
198-
left: 12px;
189+
left: 10px;
199190
top: 50%;
200191
transform: translateY(-50%);
201192
color: #444;
@@ -220,41 +211,39 @@
220211
}
221212

222213
#add-tab-btn {
223-
width: 32px;
224-
height: 32px;
225-
margin-bottom: 6px;
226-
margin-left: 6px;
214+
width: 28px;
215+
height: 28px;
216+
margin-bottom: 4px;
217+
margin-left: 4px;
227218
display: flex;
228219
align-items: center;
229220
justify-content: center;
230-
border-radius: 8px;
221+
border-radius: 6px;
231222
color: #444;
232223
transition: all 0.2s;
233224
}
234225
#add-tab-btn:hover {
235-
background: rgba(255,255,255,0.08);
236226
color: #fff;
237-
transform: rotate(90deg);
238227
}
239228
</style>
240229
</head>
241230
<body>
242231
<div class="tab-bar">
243232
<div class="tabs-list" id="tabs-list"></div>
244233
<button id="add-tab-btn">
245-
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
234+
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
246235
</button>
247236
</div>
248237

249238
<div class="nav-bar">
250239
<div class="flex gap-1">
251-
<button class="nav-btn" id="back-btn"><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg></button>
252-
<button class="nav-btn" id="forward-btn"><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button>
253-
<button class="nav-btn" id="refresh-btn"><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button>
240+
<button class="nav-btn" id="back-btn"><svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg></button>
241+
<button class="nav-btn" id="forward-btn"><svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button>
242+
<button class="nav-btn" id="refresh-btn"><svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button>
254243
</div>
255244

256245
<div class="address-bar-container">
257-
<div class="address-icon"><svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></div>
246+
<div class="address-icon"><svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></div>
258247
<input type="text" class="address-bar" id="address-input" placeholder="Vision Search">
259248
</div>
260249
</div>
@@ -292,14 +281,10 @@
292281
function getEmbedUrl(input) {
293282
const val = input.trim();
294283
if (!val) return 'newtab.html';
295-
296284
const isDomain = val.includes('.') && !val.includes(' ');
297-
298285
if (isDomain) {
299286
let url = val;
300-
if (!url.startsWith('http')) {
301-
url = 'https://' + url;
302-
}
287+
if (!url.startsWith('http')) url = 'https://' + url;
303288
return `/active/embed.html?url=${url}`;
304289
} else {
305290
return `/active/embed.html?url=https://www.google.com/search?q=${encodeURIComponent(val)}`;
@@ -312,38 +297,32 @@
312297
id,
313298
url,
314299
title,
315-
favicon: url === 'newtab.html' ? FAVICON_SERVICE + 'vision.inc' : FAVICON_SERVICE + extractDomain(url)
300+
favicon: url === 'newtab.html' ? FAVICON_SERVICE + 'google.com' : FAVICON_SERVICE + extractDomain(url)
316301
};
317302
tabs.push(tab);
318-
319303
const iframe = document.createElement('iframe');
320304
iframe.id = `iframe-${id}`;
321305
iframe.className = 'webview';
322306
iframe.src = url;
323307
viewport.appendChild(iframe);
324-
325308
setActiveTab(id);
326309
}
327310

328311
function setActiveTab(id) {
329312
activeTabId = id;
330313
const currentTab = tabs.find(t => t.id === id);
331-
332314
document.querySelectorAll('.webview').forEach(ifrm => {
333315
ifrm.classList.toggle('active', ifrm.id === `iframe-${id}`);
334316
});
335-
336317
if (currentTab.url === 'newtab.html') {
337318
addressInput.value = '';
338319
} else {
339320
if (currentTab.url.includes('url=')) {
340-
const target = currentTab.url.split('url=')[1];
341-
addressInput.value = decodeURIComponent(target);
321+
addressInput.value = decodeURIComponent(currentTab.url.split('url=')[1]);
342322
} else {
343323
addressInput.value = currentTab.url;
344324
}
345325
}
346-
347326
renderTabs();
348327
}
349328

@@ -357,11 +336,9 @@
357336
setActiveTab(tab.id);
358337
return;
359338
}
360-
361339
const index = tabs.findIndex(t => t.id === id);
362340
tabs = tabs.filter(t => t.id !== id);
363341
document.getElementById(`iframe-${id}`).remove();
364-
365342
if (activeTabId === id) {
366343
const nextTab = tabs[index] || tabs[index - 1];
367344
setActiveTab(nextTab.id);
@@ -388,7 +365,7 @@
388365

389366
const close = document.createElement('div');
390367
close.className = 'tab-close';
391-
close.innerHTML = `<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>`;
368+
close.innerHTML = `<svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>`;
392369
close.onclick = (e) => closeTab(tab.id, e);
393370

394371
tabEl.appendChild(icon);
@@ -402,11 +379,9 @@
402379
if (e.key === 'Enter') {
403380
const url = getEmbedUrl(addressInput.value);
404381
const currentTab = tabs.find(t => t.id === activeTabId);
405-
406382
currentTab.url = url;
407-
currentTab.title = addressInput.value.trim() || 'Vision Page';
383+
currentTab.title = addressInput.value.trim() || 'Vision';
408384
currentTab.favicon = FAVICON_SERVICE + extractDomain(url);
409-
410385
document.getElementById(`iframe-${activeTabId}`).src = url;
411386
renderTabs();
412387
addressInput.blur();

0 commit comments

Comments
 (0)