Skip to content

Commit 07e804a

Browse files
DevEchoX2DevEchoX2
authored
Update index.html
1 parent 35ec698 commit 07e804a

1 file changed

Lines changed: 87 additions & 62 deletions

File tree

‎index.html‎

Lines changed: 87 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@
88
<script src="/bm/index.js"></script>
99
<script src="/sj/scramjet.all.js"></script>
1010
<script>
11+
if (window.self !== window.top) {
12+
try {
13+
if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
14+
document.documentElement.innerHTML = '<body style="background:#000;color:#333;display:flex;align-items:center;justify-content:center;height:100vh;font-family:sans-serif;margin:0;">Refused to nest Vision Browser.</body>';
15+
window.stop();
16+
}
17+
} catch (e) {}
18+
}
19+
1120
if ("serviceWorker" in navigator) {
1221
async function sw() {
1322
await navigator.serviceWorker.register("/sj/sw.js").then(() => {
@@ -26,6 +35,7 @@
2635
--text-dim: #777777;
2736
--border: rgba(255, 255, 255, 0.05);
2837
--input-gray: #121212;
38+
--accent: #8b5cf6;
2939
}
3040

3141
body {
@@ -44,68 +54,76 @@
4454
align-items: flex-end;
4555
padding-left: 8px;
4656
padding-top: 8px;
47-
height: 42px;
57+
height: 46px;
4858
background: var(--bg);
4959
z-index: 30;
5060
}
5161

5262
.tabs-container {
5363
display: flex;
5464
align-items: flex-end;
55-
gap: 0;
65+
gap: 2px;
5666
}
5767

5868
.tab {
5969
position: relative;
60-
height: 34px;
61-
width: 190px;
62-
padding: 0 14px;
70+
height: 38px;
71+
width: 200px;
72+
padding: 0 16px;
6373
display: flex;
6474
align-items: center;
6575
font-size: 11px;
66-
font-weight: 500;
76+
font-weight: 600;
6777
color: var(--text-dim);
6878
cursor: pointer;
6979
user-select: none;
70-
transition: color 0.2s;
71-
border-radius: 10px 10px 0 0;
80+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
81+
border-radius: 12px 12px 0 0;
82+
background: rgba(255,255,255,0.02);
83+
}
84+
85+
.tab:hover {
86+
background: rgba(255,255,255,0.05);
87+
color: #eee;
7288
}
7389

7490
.tab.active {
7591
background: var(--tab-active);
7692
color: #fff;
7793
z-index: 10;
94+
box-shadow: 0 -4px 15px rgba(139, 92, 246, 0.1);
7895
}
7996

80-
.tab.active::before,
81-
.tab.active::after {
82-
content: "";
83-
position: absolute;
84-
bottom: 0;
85-
width: 16px;
86-
height: 16px;
87-
background: var(--tab-active);
88-
pointer-events: none;
97+
.tab.active .tab-text {
98+
font-weight: 900;
99+
letter-spacing: 0.3px;
100+
text-transform: uppercase;
101+
font-size: 10px;
89102
}
90103

91104
.tab.active::before {
92-
left: -16px;
93-
-webkit-mask-image: radial-gradient(circle at 0 0, transparent 16px, black 16px);
94-
mask-image: radial-gradient(circle at 0 0, transparent 16px, black 16px);
95-
}
96-
97-
.tab.active::after {
98-
right: -16px;
99-
-webkit-mask-image: radial-gradient(circle at 100% 0, transparent 16px, black 16px);
100-
mask-image: radial-gradient(circle at 100% 0, transparent 16px, black 16px);
105+
content: "";
106+
position: absolute;
107+
top: 0;
108+
left: 0;
109+
right: 0;
110+
height: 3px;
111+
background: var(--accent);
112+
border-radius: 12px 12px 0 0;
113+
box-shadow: 0 0 12px var(--accent);
101114
}
102115

103116
.tab-favicon {
104-
width: 14px;
105-
height: 14px;
117+
width: 16px;
118+
height: 16px;
106119
margin-right: 10px;
107-
border-radius: 3px;
120+
border-radius: 4px;
108121
flex-shrink: 0;
122+
filter: grayscale(0.2);
123+
}
124+
125+
.tab.active .tab-favicon {
126+
filter: grayscale(0);
109127
}
110128

111129
.tab-text {
@@ -116,10 +134,10 @@
116134
}
117135

118136
.tab-close {
119-
margin-left: 6px;
120-
width: 16px;
121-
height: 16px;
122-
border-radius: 4px;
137+
margin-left: 8px;
138+
width: 18px;
139+
height: 18px;
140+
border-radius: 6px;
123141
display: flex;
124142
align-items: center;
125143
justify-content: center;
@@ -128,11 +146,11 @@
128146
}
129147

130148
.tab:hover .tab-close, .tab.active .tab-close { opacity: 0.4; }
131-
.tab-close:hover { opacity: 1 !important; background: rgba(255,255,255,0.1); }
149+
.tab-close:hover { opacity: 1 !important; background: rgba(255,255,255,0.15); color: #ff4444; }
132150

133151
.nav-bar {
134152
background: var(--nav-bg);
135-
height: 48px;
153+
height: 52px;
136154
display: flex;
137155
align-items: center;
138156
padding: 0 16px;
@@ -143,56 +161,58 @@
143161

144162
.nav-controls {
145163
display: flex;
146-
gap: 6px;
147-
margin-right: 16px;
164+
gap: 8px;
165+
margin-right: 20px;
148166
}
149167

150168
.nav-btn {
151-
width: 30px;
152-
height: 30px;
169+
width: 32px;
170+
height: 32px;
153171
display: flex;
154172
align-items: center;
155173
justify-content: center;
156-
border-radius: 8px;
157-
color: #444;
174+
border-radius: 10px;
175+
color: #555;
158176
transition: all 0.2s;
159177
}
160178

161-
.nav-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
179+
.nav-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
162180

163181
.address-box {
164182
position: relative;
165183
width: 100%;
166-
max-width: 950px;
184+
max-width: 900px;
167185
margin: 0 auto;
168186
}
169187

170188
.address-bar {
171189
width: 100%;
172-
height: 34px;
190+
height: 36px;
173191
background: var(--input-gray);
174192
border: 1px solid var(--border);
175-
border-radius: 17px;
176-
padding: 0 40px;
193+
border-radius: 18px;
194+
padding: 0 44px;
177195
font-size: 13px;
178-
color: #888;
196+
color: #aaa;
179197
outline: none;
180-
transition: all 0.2s;
198+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
181199
text-align: center;
200+
font-weight: 500;
182201
}
183202

184203
.address-bar:focus {
185-
border-color: #333;
204+
border-color: var(--accent);
186205
color: #fff;
187206
background: #181818;
207+
box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
188208
}
189209

190210
.address-icon {
191211
position: absolute;
192-
left: 14px;
212+
left: 16px;
193213
top: 50%;
194214
transform: translateY(-50%);
195-
color: #333;
215+
color: #444;
196216
}
197217

198218
.viewport {
@@ -214,39 +234,40 @@
214234
.webview.active { display: block; }
215235

216236
#add-tab {
217-
width: 28px;
218-
height: 28px;
237+
width: 32px;
238+
height: 32px;
219239
display: flex;
220240
align-items: center;
221241
justify-content: center;
222242
margin-bottom: 4px;
223-
margin-left: 20px;
224-
color: #333;
225-
border-radius: 6px;
243+
margin-left: 12px;
244+
color: #444;
245+
border-radius: 10px;
226246
transition: all 0.2s;
247+
background: rgba(255,255,255,0.02);
227248
}
228-
#add-tab:hover { color: #fff; background: rgba(255,255,255,0.05); }
249+
#add-tab:hover { color: #fff; background: rgba(255,255,255,0.08); transform: rotate(90deg); }
229250
</style>
230251
</head>
231252
<body>
232253

233254
<div class="tab-strip">
234255
<div class="tabs-container" id="tabs-container"></div>
235256
<button id="add-tab" title="New Tab">
236-
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
257+
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
237258
</button>
238259
</div>
239260

240261
<div class="nav-bar">
241262
<div class="nav-controls">
242-
<button class="nav-btn" id="back" title="Back"><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>
243-
<button class="nav-btn" id="forward" title="Forward"><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>
244-
<button class="nav-btn" id="reload" title="Reload"><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>
263+
<button class="nav-btn" id="back" title="Back"><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>
264+
<button class="nav-btn" id="forward" title="Forward"><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>
265+
<button class="nav-btn" id="reload" title="Reload"><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>
245266
</div>
246267

247268
<div class="address-box">
248269
<div class="address-icon">
249-
<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
270+
<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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
250271
</div>
251272
<input type="text" id="address-input" class="address-bar" placeholder="Vision Search" autocomplete="off" spellcheck="false">
252273
</div>
@@ -301,6 +322,10 @@
301322
targetUrl = `https://www.google.com/search?q=${encodeURIComponent(val)}`;
302323
}
303324

325+
if (targetUrl.includes(window.location.host) && !targetUrl.includes('newtab.html')) {
326+
return 'newtab.html';
327+
}
328+
304329
if (scramjet) {
305330
return scramjet.encodeUrl(targetUrl);
306331
}

0 commit comments

Comments
 (0)