Skip to content

Commit 06b625f

Browse files
DevEchoX2DevEchoX2
authored
Refactor newtab.html styles and layout
Updated styles for body and glass-card elements, adjusted background settings, and modified search form layout. Removed unused elements and optimized JavaScript functionality.
1 parent 04617b6 commit 06b625f

1 file changed

Lines changed: 29 additions & 149 deletions

File tree

‎newtab.html‎

Lines changed: 29 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,17 @@
1616
font-family: 'Inter', sans-serif;
1717
margin: 0;
1818
overflow: hidden;
19-
background: var(--default-gradient);
20-
background-size: cover;
21-
background-position: center;
22-
background-repeat: no-repeat;
19+
background: transparent;
2320
height: 100vh;
2421
color: white;
2522
display: flex;
2623
align-items: center;
2724
justify-content: center;
2825
user-select: none;
29-
transition: background 0.5s ease;
3026
}
3127

3228
.glass-card {
33-
background: rgba(0, 0, 0, 0.2);
29+
background: rgba(0, 0, 0, 0.4);
3430
backdrop-filter: blur(25px);
3531
border: 1px solid rgba(255, 255, 255, 0.1);
3632
border-radius: 40px;
@@ -39,15 +35,6 @@
3935
width: 100%;
4036
max-width: 600px;
4137
text-align: center;
42-
transition: transform 0.3s ease;
43-
position: relative;
44-
z-index: 10;
45-
}
46-
47-
.search-container {
48-
position: relative;
49-
margin-top: 2rem;
50-
width: 100%;
5138
}
5239

5340
.search-input {
@@ -60,7 +47,6 @@
6047
font-size: 1.25rem;
6148
color: white;
6249
outline: none;
63-
transition: all 0.2s ease;
6450
}
6551

6652
.search-input:focus {
@@ -69,23 +55,6 @@
6955
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.3);
7056
}
7157

72-
.search-icon {
73-
position: absolute;
74-
left: 24px;
75-
top: 50%;
76-
transform: translateY(-50%);
77-
color: rgba(255, 255, 255, 0.6);
78-
}
79-
80-
.clock {
81-
font-size: 1.2rem;
82-
font-weight: 600;
83-
letter-spacing: 0.1em;
84-
text-transform: uppercase;
85-
color: rgba(255, 255, 255, 0.8);
86-
margin-top: 1rem;
87-
}
88-
8958
.brand-title {
9059
font-size: 5rem;
9160
font-weight: 800;
@@ -96,7 +65,6 @@
9665
margin-bottom: 0.5rem;
9766
}
9867

99-
/* Customize Panel */
10068
#customize-trigger {
10169
position: absolute;
10270
bottom: 2rem;
@@ -108,14 +76,6 @@
10876
border-radius: 12px;
10977
color: rgba(255, 255, 255, 0.7);
11078
cursor: pointer;
111-
transition: all 0.2s ease;
112-
z-index: 20;
113-
}
114-
115-
#customize-trigger:hover {
116-
background: rgba(0, 0, 0, 0.5);
117-
color: white;
118-
transform: translateY(-2px);
11979
}
12080

12181
#customize-panel {
@@ -128,23 +88,12 @@
12888
border: 1px solid rgba(255, 255, 255, 0.1);
12989
border-radius: 20px;
13090
padding: 1.5rem;
131-
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
13291
display: none;
13392
flex-direction: column;
13493
gap: 1rem;
13594
z-index: 30;
13695
}
13796

138-
.customize-option {
139-
display: flex;
140-
align-items: center;
141-
justify-content: space-between;
142-
gap: 1rem;
143-
font-size: 0.9rem;
144-
font-weight: 500;
145-
color: rgba(255, 255, 255, 0.9);
146-
}
147-
14897
.btn-action {
14998
padding: 0.5rem 1rem;
15099
background: #4c1d95;
@@ -153,11 +102,6 @@
153102
cursor: pointer;
154103
transition: background 0.2s;
155104
text-align: center;
156-
width: 100%;
157-
}
158-
159-
.btn-action:hover {
160-
background: #7c3aed;
161105
}
162106

163107
input[type="color"] {
@@ -169,161 +113,97 @@
169113
cursor: pointer;
170114
background: none;
171115
}
172-
173-
input[type="color"]::-webkit-color-swatch-wrapper {
174-
padding: 0;
175-
}
176-
177-
input[type="color"]::-webkit-color-swatch {
178-
border: 2px solid rgba(255, 255, 255, 0.2);
179-
border-radius: 50%;
180-
}
181116
</style>
182117
</head>
183118
<body>
184119
<div class="glass-card">
185120
<h1 class="brand-title">Vision</h1>
186-
<div id="clock" class="clock">00:00:00 — JAN 01</div>
121+
<div id="clock" class="text-xl font-semibold opacity-80 mb-8">00:00:00</div>
187122

188-
<form id="search-form" class="search-container">
189-
<div class="search-icon">
123+
<form id="search-form" class="relative">
124+
<div class="absolute left-6 top-1/2 -translate-y-1/2 text-white/50">
190125
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
191126
</div>
192127
<input type="text" id="search-input" class="search-input" placeholder="What's your next vision?" autofocus autocomplete="off">
193128
</form>
194129

195-
<div class="mt-8 flex gap-3 justify-center">
130+
<div class="mt-8 flex gap-4 justify-center">
196131
<a href="#" class="p-3 bg-white/5 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors">
197132
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
198133
</a>
199134
<a href="#" class="p-3 bg-white/5 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors">
200135
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
201136
</a>
202-
<a href="#" class="p-3 bg-white/5 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors">
203-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
204-
</a>
205137
</div>
206138
</div>
207139

208-
<!-- Customize Trigger -->
209140
<button id="customize-trigger" title="Customize Background">
210-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"/><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
141+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"/><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M12 2v2"/><path d="M12 20v2"/></svg>
211142
</button>
212143

213-
<!-- Customize Panel -->
214144
<div id="customize-panel">
215145
<div class="text-lg font-bold mb-2 text-purple-400">Appearance</div>
216-
217-
<div class="customize-option">
218-
<span>Background Image</span>
219-
<label class="btn-action">
220-
Upload
221-
<input type="file" id="bg-upload" accept="image/*" class="hidden">
222-
</label>
223-
</div>
224-
225-
<div class="customize-option">
226-
<span>Background Color</span>
227-
<input type="color" id="bg-color" value="#4c1d95">
228-
</div>
229-
230-
<div class="border-t border-white/10 pt-4 mt-2">
231-
<button id="bg-reset" class="btn-action bg-white/10 hover:bg-white/20">Reset to Default</button>
146+
<div class="flex flex-col gap-3">
147+
<div class="flex justify-between items-center text-sm">
148+
<span>Wallpaper</span>
149+
<label class="btn-action">
150+
Upload
151+
<input type="file" id="bg-upload" accept="image/*" class="hidden">
152+
</label>
153+
</div>
154+
<div class="flex justify-between items-center text-sm">
155+
<span>Color</span>
156+
<input type="color" id="bg-color" value="#4c1d95">
157+
</div>
158+
<button id="bg-reset" class="btn-action bg-white/10">Reset</button>
232159
</div>
233160
</div>
234161

235162
<script>
236163
const clockEl = document.getElementById('clock');
237164
const searchForm = document.getElementById('search-form');
238165
const searchInput = document.getElementById('search-input');
239-
240166
const customizeTrigger = document.getElementById('customize-trigger');
241167
const customizePanel = document.getElementById('customize-panel');
242168
const bgUpload = document.getElementById('bg-upload');
243169
const bgColor = document.getElementById('bg-color');
244170
const bgReset = document.getElementById('bg-reset');
245171

246-
// Clock Update
247172
function updateClock() {
248173
const now = new Date();
249-
const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
250-
const dateStr = now.toLocaleDateString([], { month: 'short', day: '2-digit' }).toUpperCase();
251-
clockEl.textContent = `${timeStr} — ${dateStr}`;
174+
clockEl.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
252175
}
253-
254176
setInterval(updateClock, 1000);
255177
updateClock();
256178

257-
// Search Logic
258179
searchForm.onsubmit = (e) => {
259180
e.preventDefault();
260181
const query = searchInput.value.trim();
261-
if (query) {
262-
window.parent.postMessage({ type: 'navigate', query }, '*');
263-
}
182+
if (query) window.parent.postMessage({ type: 'navigate', query }, '*');
264183
};
265184

266-
// Customize Panel Toggle
267185
customizeTrigger.onclick = (e) => {
268186
e.stopPropagation();
269-
const isVisible = customizePanel.style.display === 'flex';
270-
customizePanel.style.display = isVisible ? 'none' : 'flex';
187+
customizePanel.style.display = customizePanel.style.display === 'flex' ? 'none' : 'flex';
271188
};
272189

273-
document.addEventListener('click', (e) => {
274-
if (!customizePanel.contains(e.target) && e.target !== customizeTrigger) {
275-
customizePanel.style.display = 'none';
276-
}
277-
});
278-
279-
// Background Logic
280190
function setBackground(type, value) {
281-
if (type === 'image') {
282-
document.body.style.background = `url(${value})`;
283-
document.body.style.backgroundSize = 'cover';
284-
document.body.style.backgroundPosition = 'center';
285-
localStorage.setItem('vision_bg_type', 'image');
286-
localStorage.setItem('vision_bg_value', value);
287-
} else if (type === 'color') {
288-
document.body.style.background = value;
289-
localStorage.setItem('vision_bg_type', 'color');
290-
localStorage.setItem('vision_bg_value', value);
291-
} else {
292-
document.body.style.background = 'var(--default-gradient)';
293-
localStorage.removeItem('vision_bg_type');
294-
localStorage.removeItem('vision_bg_value');
295-
}
296-
}
297-
298-
// Load persisted background
299-
const savedType = localStorage.getItem('vision_bg_type');
300-
const savedValue = localStorage.getItem('vision_bg_value');
301-
if (savedType && savedValue) {
302-
setBackground(savedType, savedValue);
303-
if (savedType === 'color') bgColor.value = savedValue;
191+
localStorage.setItem('vision_bg_type', type);
192+
localStorage.setItem('vision_bg_value', value);
193+
window.parent.postMessage({ type: 'bg-update' }, '*');
304194
}
305195

306196
bgUpload.onchange = (e) => {
307197
const file = e.target.files[0];
308198
if (!file) return;
309-
310199
const reader = new FileReader();
311-
reader.onload = (event) => {
312-
setBackground('image', event.target.result);
313-
};
200+
reader.onload = (event) => setBackground('image', event.target.result);
314201
reader.readAsDataURL(file);
315202
};
316203

317-
bgColor.oninput = (e) => {
318-
setBackground('color', e.target.value);
319-
};
320-
321-
bgReset.onclick = () => {
322-
setBackground('default');
323-
bgColor.value = '#4c1d95';
324-
};
204+
bgColor.oninput = (e) => setBackground('color', e.target.value);
205+
bgReset.onclick = () => setBackground('default', '');
325206

326-
// Inform browser shell of our title
327207
window.parent.postMessage({ type: 'metadata', title: 'Vision Home' }, '*');
328208
</script>
329209
</body>

0 commit comments

Comments
 (0)