Skip to content

Commit 864be8e

Browse files
DevEchoX2DevEchoX2
authored
Update newtab.html
1 parent a344d4a commit 864be8e

File tree

1 file changed

+127
-49
lines changed

1 file changed

+127
-49
lines changed

‎newtab.html‎

Lines changed: 127 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<script src="https://cdn.tailwindcss.com"></script>
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<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">
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
1111
<style>
1212
body {
1313
font-family: 'Inter', sans-serif;
@@ -19,58 +19,70 @@
1919
justify-content: center;
2020
height: 100vh;
2121
overflow: hidden;
22+
background-size: cover;
23+
background-position: center;
24+
background-repeat: no-repeat;
2225
}
2326

2427
.container {
2528
width: 100%;
26-
max-width: 500px;
29+
max-width: 440px;
2730
text-align: center;
2831
padding: 2rem;
32+
position: relative;
33+
z-index: 10;
34+
}
35+
36+
.liquid-panel {
37+
background: #000000;
38+
padding: 3rem 2rem;
39+
display: flex;
40+
flex-direction: column;
41+
align-items: center;
2942
}
3043

3144
.time {
32-
font-size: 6rem;
45+
font-size: 5rem;
3346
font-weight: 700;
34-
letter-spacing: -4px;
47+
letter-spacing: -3px;
3548
margin-bottom: 0.25rem;
3649
line-height: 1;
3750
}
3851

3952
.date {
40-
font-size: 0.75rem;
53+
font-size: 0.7rem;
4154
text-transform: uppercase;
42-
letter-spacing: 0.4em;
43-
color: #444;
44-
margin-bottom: 3.5rem;
55+
letter-spacing: 0.3em;
56+
color: #666;
57+
margin-bottom: 2.5rem;
4558
}
4659

4760
.search-box {
4861
position: relative;
4962
width: 100%;
63+
max-width: 320px;
5064
}
5165

5266
.search-input {
5367
width: 100%;
54-
background: #0a0a0a;
55-
border: 1px solid #1a1a1a;
56-
border-radius: 30px;
57-
padding: 1.25rem 2rem;
68+
background: #111;
69+
border: none;
70+
border-radius: 24px;
71+
padding: 0.8rem 1.5rem;
5872
color: #fff;
59-
font-size: 1.1rem;
73+
font-size: 0.95rem;
6074
outline: none;
61-
transition: border-color 0.3s;
75+
text-align: center;
76+
transition: all 0.2s ease;
6277
}
6378

64-
.search-input:focus {
65-
border-color: #333;
79+
.search-input:hover {
80+
background: #181818;
6681
}
6782

68-
.search-icon {
69-
position: absolute;
70-
right: 1.5rem;
71-
top: 50%;
72-
transform: translateY(-50%);
73-
color: #333;
83+
.search-input:focus {
84+
background: #202020;
85+
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
7486
}
7587

7688
.footer {
@@ -82,59 +94,89 @@
8294
justify-content: space-between;
8395
align-items: center;
8496
font-size: 10px;
85-
color: #333;
97+
color: #666;
8698
text-transform: uppercase;
8799
letter-spacing: 0.1em;
100+
z-index: 20;
88101
}
89102

90103
.status-pill {
91-
background: #0a0a0a;
92-
border: 1px solid #1a1a1a;
93-
padding: 4px 10px;
94-
border-radius: 4px;
104+
background: #000;
105+
border: 1px solid #111;
106+
padding: 6px 12px;
95107
display: flex;
96108
align-items: center;
97109
gap: 8px;
110+
border-radius: 4px;
98111
}
99112

100-
.battery-bar {
101-
width: 18px;
102-
height: 8px;
113+
.battery-container {
114+
width: 20px;
115+
height: 10px;
103116
border: 1px solid #333;
104117
position: relative;
118+
padding: 1px;
119+
border-radius: 1px;
105120
}
106-
.battery-bar::after {
107-
content: '';
108-
position: absolute;
109-
left: 0;
110-
top: 0;
121+
122+
.battery-fill {
111123
height: 100%;
112-
width: 10%;
113-
background: #444;
124+
background: #fff;
125+
width: 0%;
126+
transition: width 0.3s;
127+
}
128+
129+
.wallpaper-btn {
130+
position: fixed;
131+
top: 1.5rem;
132+
right: 1.5rem;
133+
background: #000;
134+
border: 1px solid #111;
135+
color: #666;
136+
padding: 6px 12px;
137+
font-size: 10px;
138+
text-transform: uppercase;
139+
cursor: pointer;
140+
transition: all 0.2s;
141+
z-index: 30;
142+
border-radius: 4px;
143+
}
144+
145+
.wallpaper-btn:hover {
146+
border-color: #333;
147+
color: #fff;
148+
}
149+
150+
#file-input {
151+
display: none;
114152
}
115153
</style>
116154
</head>
117-
<body>
155+
<body id="page-body">
156+
<input type="file" id="file-input" accept="image/gif, image/jpeg, image/png">
157+
<button class="wallpaper-btn" onclick="document.getElementById('file-input').click()">Vision Paper</button>
158+
118159
<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>
160+
<div class="liquid-panel">
161+
<div class="date" id="date">-- --- --</div>
162+
<div class="time" id="time">00:00</div>
163+
164+
<div class="search-box">
165+
<input type="text" id="input" class="search-input" placeholder="Search Vision" autocomplete="off">
126166
</div>
127167
</div>
128168
</div>
129169

130170
<div class="footer">
131171
<div class="status-pill">
132-
<div class="battery-bar"></div>
133-
<span>10% Power</span>
172+
<div class="battery-container">
173+
<div class="battery-fill" id="battery-fill"></div>
174+
</div>
175+
<span id="battery-text">--%</span>
134176
</div>
135-
<div class="flex gap-4">
177+
<div class="flex gap-6">
136178
<span id="small-time">00:00</span>
137-
<span>Vision OS v1.0</span>
179+
<span>Vision Core v1.3</span>
138180
</div>
139181
</div>
140182

@@ -149,8 +191,44 @@
149191
document.getElementById('date').textContent = now.toLocaleDateString('en-US', options).toUpperCase();
150192
}
151193

194+
async function updateBattery() {
195+
try {
196+
const battery = await navigator.getBattery();
197+
const setLevel = () => {
198+
const level = Math.round(battery.level * 100);
199+
document.getElementById('battery-text').textContent = level + '%';
200+
document.getElementById('battery-fill').style.width = level + '%';
201+
};
202+
setLevel();
203+
battery.onlevelchange = setLevel;
204+
} catch (e) {
205+
document.getElementById('battery-text').textContent = 'AC';
206+
document.getElementById('battery-fill').style.width = '100%';
207+
}
208+
}
209+
210+
const fileInput = document.getElementById('file-input');
211+
fileInput.addEventListener('change', (e) => {
212+
const file = e.target.files[0];
213+
if (file) {
214+
const reader = new FileReader();
215+
reader.onload = (event) => {
216+
const url = event.target.result;
217+
document.body.style.backgroundImage = `url(${url})`;
218+
localStorage.setItem('vision_wallpaper', url);
219+
};
220+
reader.readAsDataURL(file);
221+
}
222+
});
223+
224+
const savedWallpaper = localStorage.getItem('vision_wallpaper');
225+
if (savedWallpaper) {
226+
document.body.style.backgroundImage = `url(${savedWallpaper})`;
227+
}
228+
152229
setInterval(tick, 1000);
153230
tick();
231+
updateBattery();
154232

155233
const input = document.getElementById('input');
156234
input.onkeydown = (e) => {

0 commit comments

Comments
 (0)