Skip to content

Commit fc1d8e5

Browse files
DevEchoX2DevEchoX2
authored
Create newtab.html
1 parent 2a4b231 commit fc1d8e5

1 file changed

Lines changed: 163 additions & 0 deletions

File tree

‎newtab.html‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Vision</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
11+
<style>
12+
body {
13+
font-family: 'Inter', sans-serif;
14+
background-color: #000;
15+
color: #fff;
16+
margin: 0;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
height: 100vh;
21+
overflow: hidden;
22+
}
23+
24+
.container {
25+
width: 100%;
26+
max-width: 500px;
27+
text-align: center;
28+
padding: 2rem;
29+
}
30+
31+
.time {
32+
font-size: 6rem;
33+
font-weight: 700;
34+
letter-spacing: -4px;
35+
margin-bottom: 0.25rem;
36+
line-height: 1;
37+
}
38+
39+
.date {
40+
font-size: 0.75rem;
41+
text-transform: uppercase;
42+
letter-spacing: 0.4em;
43+
color: #444;
44+
margin-bottom: 3.5rem;
45+
}
46+
47+
.search-box {
48+
position: relative;
49+
width: 100%;
50+
}
51+
52+
.search-input {
53+
width: 100%;
54+
background: #0a0a0a;
55+
border: 1px solid #1a1a1a;
56+
border-radius: 30px;
57+
padding: 1.25rem 2rem;
58+
color: #fff;
59+
font-size: 1.1rem;
60+
outline: none;
61+
transition: border-color 0.3s;
62+
}
63+
64+
.search-input:focus {
65+
border-color: #333;
66+
}
67+
68+
.search-icon {
69+
position: absolute;
70+
right: 1.5rem;
71+
top: 50%;
72+
transform: translateY(-50%);
73+
color: #333;
74+
}
75+
76+
.footer {
77+
position: fixed;
78+
bottom: 2rem;
79+
left: 2rem;
80+
right: 2rem;
81+
display: flex;
82+
justify-content: space-between;
83+
align-items: center;
84+
font-size: 10px;
85+
color: #333;
86+
text-transform: uppercase;
87+
letter-spacing: 0.1em;
88+
}
89+
90+
.status-pill {
91+
background: #0a0a0a;
92+
border: 1px solid #1a1a1a;
93+
padding: 4px 10px;
94+
border-radius: 4px;
95+
display: flex;
96+
align-items: center;
97+
gap: 8px;
98+
}
99+
100+
.battery-bar {
101+
width: 18px;
102+
height: 8px;
103+
border: 1px solid #333;
104+
position: relative;
105+
}
106+
.battery-bar::after {
107+
content: '';
108+
position: absolute;
109+
left: 0;
110+
top: 0;
111+
height: 100%;
112+
width: 10%;
113+
background: #444;
114+
}
115+
</style>
116+
</head>
117+
<body>
118+
<div class="container">
119+
<div class="date" id="date">-- --- --</div>
120+
<div class="time" id="time">00:00</div>
121+
122+
<div class="search-box">
123+
<input type="text" id="input" class="search-input" placeholder="Vision Search" autocomplete="off">
124+
<div class="search-icon">
125+
<svg width="20" height="20" 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>
126+
</div>
127+
</div>
128+
</div>
129+
130+
<div class="footer">
131+
<div class="status-pill">
132+
<div class="battery-bar"></div>
133+
<span>10% Power</span>
134+
</div>
135+
<div class="flex gap-4">
136+
<span id="small-time">00:00</span>
137+
<span>Vision OS v1.0</span>
138+
</div>
139+
</div>
140+
141+
<script>
142+
function tick() {
143+
const now = new Date();
144+
const t = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
145+
document.getElementById('time').textContent = t;
146+
document.getElementById('small-time').textContent = t;
147+
148+
const options = { weekday: 'short', month: 'short', day: 'numeric' };
149+
document.getElementById('date').textContent = now.toLocaleDateString('en-US', options).toUpperCase();
150+
}
151+
152+
setInterval(tick, 1000);
153+
tick();
154+
155+
const input = document.getElementById('input');
156+
input.onkeydown = (e) => {
157+
if (e.key === 'Enter' && input.value.trim()) {
158+
window.parent.postMessage({ type: 'navigate', query: input.value.trim() }, '*');
159+
}
160+
}
161+
</script>
162+
</body>
163+
</html>

0 commit comments

Comments
 (0)