Skip to content

Commit e709afb

Browse files
DevEchoX2DevEchoX2
authored
Update index.html
1 parent 7b8edb6 commit e709afb

1 file changed

Lines changed: 21 additions & 51 deletions

File tree

‎index.html‎

Lines changed: 21 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
<style>
1111
:root {
1212
--bg-main: #000000;
13-
--bg-toolbar: rgba(10, 10, 11, 0.9);
13+
--bg-toolbar: #0a0a0b;
1414
--bg-tab-active: #000000;
15-
--bg-tab-inactive: #0a0a0a;
15+
--bg-tab-inactive: #050505;
1616
--text-main: #ffffff;
1717
--text-dim: #a1a1aa;
1818
--accent-purple: #8b5cf6;
@@ -28,20 +28,10 @@
2828
user-select: none;
2929
}
3030

31-
/* Global Background Layer - The actual "whole site" background */
32-
#global-bg {
33-
position: fixed;
34-
inset: 0;
35-
z-index: -1;
36-
background-size: cover;
37-
background-position: center;
38-
transition: background 0.5s ease, opacity 0.5s ease;
39-
}
40-
41-
/* Tab Styling - Now strictly black as requested */
31+
/* Tab Styling - Solid black as requested */
4232
.tab {
4333
position: relative;
44-
height: 38px;
34+
height: 42px;
4535
min-width: 160px;
4636
max-width: 240px;
4737
padding: 0 16px;
@@ -50,38 +40,38 @@
5040
font-size: 13px;
5141
font-weight: 500;
5242
cursor: pointer;
53-
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
43+
transition: all 0.2s ease;
5444
border-top-left-radius: 10px;
5545
border-top-right-radius: 10px;
5646
z-index: 1;
57-
border-left: 1px solid rgba(255,255,255,0.05);
58-
border-right: 1px solid rgba(255,255,255,0.05);
47+
border: 1px solid rgba(255,255,255,0.05);
48+
border-bottom: none;
49+
margin-right: -1px;
5950
}
6051

6152
.tab.inactive {
6253
background: var(--bg-tab-inactive);
6354
color: var(--text-dim);
64-
opacity: 0.6;
65-
border-bottom: 1px solid rgba(255,255,255,0.05);
55+
opacity: 0.7;
6656
}
6757

6858
.tab.inactive:hover {
6959
opacity: 1;
70-
background: #111;
60+
background: #080808;
7161
}
7262

7363
.tab.active {
7464
background: var(--bg-tab-active);
7565
color: var(--text-main);
7666
z-index: 10;
67+
border-top: 2px solid var(--accent-purple);
7768
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
78-
border-bottom: none;
7969
}
8070

8171
/* Toolbar */
8272
#main-toolbar {
8373
background: var(--bg-toolbar);
84-
backdrop-filter: blur(15px);
74+
border-bottom: 1px solid rgba(255,255,255,0.05);
8575
}
8676

8777
.tool-capsule {
@@ -107,20 +97,19 @@
10797
.tool-btn:hover {
10898
background: rgba(255, 255, 255, 0.08);
10999
color: white;
110-
transform: scale(1.05);
111100
}
112101

113102
/* Address Bar */
114103
#address-bar-wrapper {
115-
background: rgba(0, 0, 0, 0.4);
104+
background: rgba(0, 0, 0, 0.6);
116105
border: 1px solid rgba(255, 255, 255, 0.08);
117-
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
106+
border-radius: 14px;
118107
transition: all 0.2s ease;
119108
}
120109

121110
#address-bar-wrapper:focus-within {
122111
border-color: var(--accent-purple);
123-
background: rgba(0, 0, 0, 0.6);
112+
background: rgba(0, 0, 0, 0.8);
124113
}
125114

126115
/* Side Panel */
@@ -183,28 +172,26 @@
183172
}
184173

185174
.viewport { background: transparent; }
186-
iframe { width: 100%; height: 100%; border: none; background: white; }
175+
iframe { width: 100%; height: 100%; border: none; background: transparent; }
187176
.no-scrollbar::-webkit-scrollbar { display: none; }
188177
</style>
189178
</head>
190179
<body class="h-screen flex flex-col">
191-
<div id="global-bg"></div>
192-
193-
<div id="tab-strip" class="flex items-end px-4 pt-3 h-14 gap-0 overflow-x-auto no-scrollbar bg-black/40 backdrop-blur-md">
180+
<div id="tab-strip" class="flex items-end px-4 pt-4 h-14 gap-0 overflow-x-auto no-scrollbar bg-black">
194181
<button id="add-tab-btn" class="mb-2 ml-2 p-2 rounded-lg hover:bg-white/10 transition-colors text-gray-500">
195182
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
196183
</button>
197184
</div>
198185

199-
<div id="main-toolbar" class="h-16 px-4 flex items-center gap-4 border-b border-white/5 z-20 shadow-xl relative">
186+
<div id="main-toolbar" class="h-16 px-4 flex items-center gap-4 z-20 shadow-xl relative">
200187
<div class="flex items-center gap-1 text-gray-400">
201188
<button id="back-btn" class="p-2 hover:bg-white/10 rounded-lg transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg></button>
202189
<button id="forward-btn" class="p-2 hover:bg-white/10 rounded-lg transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg></button>
203190
<button id="refresh-btn" class="p-2 hover:bg-white/10 rounded-lg transition-all ml-1"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"></path><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg></button>
204191
</div>
205192

206193
<div class="flex-1 flex items-center h-full">
207-
<div id="address-bar-wrapper" class="w-full flex items-center h-10 px-4 rounded-xl group">
194+
<div id="address-bar-wrapper" class="w-full flex items-center h-10 px-4 group">
208195
<div id="address-icon" class="flex items-center text-gray-500 group-focus-within:text-purple-400 mr-3">
209196
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
210197
</div>
@@ -249,9 +236,9 @@ <h2 id="side-panel-title" class="font-black text-[10px] tracking-widest uppercas
249236
</div>
250237
</div>
251238

252-
<div id="viewport-container" class="flex-1 relative overflow-hidden"></div>
239+
<div id="viewport-container" class="flex-1 relative overflow-hidden bg-white"></div>
253240

254-
<div class="h-8 bg-black/90 text-[9px] font-bold uppercase tracking-[0.2em] text-gray-600 px-5 flex items-center justify-between border-t border-white/5 z-30">
241+
<div class="h-8 bg-black text-[9px] font-bold uppercase tracking-[0.2em] text-gray-600 px-5 flex items-center justify-between border-t border-white/5 z-30">
255242
<div class="flex items-center gap-6">
256243
<div class="flex items-center gap-2">
257244
<div class="w-1.5 h-1.5 rounded-full bg-purple-500 animate-pulse"></div>
@@ -278,23 +265,8 @@ <h2 id="side-panel-title" class="font-black text-[10px] tracking-widest uppercas
278265
const sidePanelTitle = document.getElementById('side-panel-title');
279266
const sidePanelIframe = document.getElementById('side-panel-iframe');
280267
const closeSidePanel = document.getElementById('close-side-panel');
281-
const globalBg = document.getElementById('global-bg');
282268
const zoomDisplay = document.getElementById('zoom-display');
283269

284-
function applyGlobalBackground() {
285-
const type = localStorage.getItem('vision_bg_type');
286-
const value = localStorage.getItem('vision_bg_value');
287-
if (type === 'image') {
288-
globalBg.style.background = `url(${value})`;
289-
globalBg.style.backgroundSize = 'cover';
290-
globalBg.style.backgroundPosition = 'center';
291-
} else if (type === 'color') {
292-
globalBg.style.background = value;
293-
} else {
294-
globalBg.style.background = 'linear-gradient(135deg, #050507 0%, #1a1a2e 100%)';
295-
}
296-
}
297-
298270
function getFavicon(url) {
299271
if (!url || url === 'newtab.html') return null;
300272
try {
@@ -456,7 +428,6 @@ <h2 id="side-panel-title" class="font-black text-[10px] tracking-widest uppercas
456428

457429
window.addEventListener('message', (e) => {
458430
if (e.data.type === 'navigate') navigate(e.data.query);
459-
if (e.data.type === 'bg-update') applyGlobalBackground();
460431
if (e.data.type === 'metadata') updateTab(activeTabId, { title: e.data.title, favicon: e.data.favicon || getFavicon(tabs.find(t => t.id === activeTabId).url) });
461432
if (e.data.type === 'request-current-tab') {
462433
const t = tabs.find(t => t.id === activeTabId);
@@ -475,7 +446,6 @@ <h2 id="side-panel-title" class="font-black text-[10px] tracking-widest uppercas
475446
closeSidePanel.onclick = () => sidePanel.classList.remove('open');
476447

477448
if (!loadSession()) createTab();
478-
applyGlobalBackground();
479449
setInterval(() => {
480450
const now = new Date();
481451
currentDatetimeEl.textContent = `${now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} — ${now.toLocaleDateString([], { month: 'short', day: '2-digit' })}`;

0 commit comments

Comments
 (0)