Skip to content

Commit 2b2e2f4

Browse files
DevEchoX2DevEchoX2
authored
Update newtab.html
1 parent b488435 commit 2b2e2f4

1 file changed

Lines changed: 106 additions & 42 deletions

File tree

‎newtab.html‎

Lines changed: 106 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>New Tab</title>
6+
<title>Start</title>
77
<script src="https://cdn.tailwindcss.com"></script>
88
<style>
99
body {
@@ -18,77 +18,139 @@
1818
overflow: hidden;
1919
background-size: cover;
2020
background-position: center;
21+
transition: background 0.5s ease;
2122
}
22-
.container {
23+
24+
body::before {
25+
content: "";
26+
position: absolute;
27+
top: 50%;
28+
left: 50%;
29+
width: 500px;
30+
height: 500px;
31+
background: radial-gradient(circle, rgba(255,255,255,0.02) 0%, transparent 70%);
32+
transform: translate(-50%, -50%);
33+
z-index: 0;
34+
pointer-events: none;
35+
}
36+
37+
.content-wrap {
2338
text-align: center;
24-
max-width: 450px;
25-
width: 90%;
39+
display: flex;
40+
flex-direction: column;
41+
align-items: center;
2642
z-index: 10;
2743
}
44+
2845
.clock {
29-
font-size: 5rem;
30-
font-weight: 800;
31-
letter-spacing: -4px;
32-
margin-bottom: 2.5rem;
33-
opacity: 0.9;
46+
font-size: 6.5rem;
47+
font-weight: 900;
48+
letter-spacing: -6px;
49+
margin-bottom: 1.5rem;
50+
opacity: 0.85;
51+
user-select: none;
52+
text-shadow: 0 10px 30px rgba(0,0,0,0.5);
53+
}
54+
55+
.search-container {
56+
position: relative;
57+
width: 340px; /* Adjusted to be slightly longer but still compact */
58+
transition: width 0.3s ease;
3459
}
35-
.search-pill {
60+
61+
.search-input {
3662
width: 100%;
37-
height: 48px;
63+
height: 44px;
3864
background: #121212;
39-
border: 1px solid rgba(255, 255, 255, 0.08);
40-
border-radius: 24px;
65+
border: 1px solid rgba(255, 255, 255, 0.05);
66+
border-radius: 22px;
4167
color: #fff;
42-
font-size: 15px;
68+
font-size: 14px;
4369
outline: none;
44-
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
45-
padding: 0 24px;
46-
text-align: left;
47-
box-shadow: 0 4px 30px rgba(0,0,0,0.5);
70+
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
71+
padding: 0 20px;
72+
text-align: center;
73+
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
4874
}
49-
.search-pill::placeholder {
50-
color: #555;
75+
76+
.search-input::placeholder {
77+
color: #444;
78+
transition: opacity 0.2s;
5179
}
52-
.search-pill:focus, .search-pill:hover {
53-
background: #1a1a1a;
54-
border-color: rgba(255, 255, 255, 0.12);
55-
box-shadow: 0 8px 40px rgba(0,0,0,0.8);
80+
81+
.search-input:focus {
82+
width: 380px;
83+
border-color: rgba(255, 255, 255, 0.15);
84+
background: #181818;
85+
box-shadow: 0 8px 40px rgba(0,0,0,0.7);
5686
}
57-
.appearance-btn {
87+
88+
.search-input:focus::placeholder {
89+
opacity: 0;
90+
}
91+
92+
.footer-controls {
5893
position: fixed;
59-
bottom: 2rem;
60-
right: 2rem;
94+
bottom: 24px;
95+
right: 24px;
96+
display: flex;
97+
gap: 16px;
98+
}
99+
100+
.control-btn {
61101
font-size: 10px;
62-
color: #444;
102+
color: #333;
63103
cursor: pointer;
64104
text-transform: uppercase;
65105
letter-spacing: 2px;
66-
transition: color 0.2s;
106+
transition: all 0.2s;
107+
background: none;
108+
border: none;
109+
padding: 4px 8px;
110+
border-radius: 4px;
111+
}
112+
113+
.control-btn:hover {
114+
color: #777;
115+
background: rgba(255,255,255,0.03);
116+
}
117+
118+
@media (max-width: 600px) {
119+
.clock { font-size: 4rem; letter-spacing: -3px; }
120+
.search-container { width: 240px; }
121+
.search-input:focus { width: 280px; }
67122
}
68-
.appearance-btn:hover { color: #888; }
69123
</style>
70124
</head>
71125
<body>
72-
<div class="container">
126+
<div class="content-wrap">
73127
<div class="clock" id="clock">00:00</div>
74-
<input type="text" class="search-pill" id="search" placeholder="Search Vision" autocomplete="off" spellcheck="false">
128+
<div class="search-container">
129+
<input type="text" class="search-input" id="search" placeholder="Vision Search" autocomplete="off" spellcheck="false">
130+
</div>
75131
</div>
76132

77133
<input type="file" id="bg-upload" style="display:none" accept="image/*">
78-
<div class="appearance-btn" onclick="document.getElementById('bg-upload').click()">Customize View</div>
134+
<div class="footer-controls">
135+
<button class="control-btn" onclick="document.getElementById('bg-upload').click()">Customize</button>
136+
</div>
79137

80138
<script>
81139
function updateClock() {
82140
const now = new Date();
83-
document.getElementById('clock').textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
141+
const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
142+
document.getElementById('clock').textContent = time;
84143
}
85144
setInterval(updateClock, 1000);
86145
updateClock();
87146

88-
const search = document.getElementById('search');
89-
search.onkeydown = (e) => {
90-
if (e.key === 'Enter' && search.value.trim()) {
91-
window.parent.postMessage({ type: 'navigate', query: search.value.trim() }, '*');
147+
const searchInput = document.getElementById('search');
148+
searchInput.onkeydown = (e) => {
149+
if (e.key === 'Enter' && searchInput.value.trim()) {
150+
window.parent.postMessage({
151+
type: 'navigate',
152+
query: searchInput.value.trim()
153+
}, '*');
92154
}
93155
};
94156

@@ -99,16 +161,18 @@
99161
const reader = new FileReader();
100162
reader.onload = (ev) => {
101163
document.body.style.backgroundImage = `url(${ev.target.result})`;
102-
localStorage.setItem('vision_bg', ev.target.result);
164+
localStorage.setItem('vision_start_bg', ev.target.result);
103165
};
104166
reader.readAsDataURL(file);
105167
}
106168
};
107169

108-
const savedBg = localStorage.getItem('vision_bg');
109-
if (savedBg) document.body.style.backgroundImage = `url(${savedBg})`;
170+
const savedBg = localStorage.getItem('vision_start_bg');
171+
if (savedBg) {
172+
document.body.style.backgroundImage = `url(${savedBg})`;
173+
}
110174

111-
window.parent.postMessage({ type: 'meta-update', title: 'New Tab' }, '*');
175+
window.parent.postMessage({ type: 'meta-update', title: 'Start' }, '*');
112176
</script>
113177
</body>
114178
</html>

0 commit comments

Comments
 (0)