Skip to content

Commit 695bdb7

Browse files
tharun9772tharun9772
authored
Create index.html
1 parent 1c35c51 commit 695bdb7

1 file changed

Lines changed: 340 additions & 0 deletions

File tree

‎apps/zodiac/index.html‎

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
2+
<!doctype html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<script>
8+
const DEFAULT_TITLE = "Zodiac - Unblocked On Bloxcraft UBG";
9+
10+
function applySavedSettings(){
11+
const savedTitle = localStorage.getItem("z_title");
12+
const savedIcon = localStorage.getItem("z_icon");
13+
const savedLeave = localStorage.getItem("z_leave");
14+
15+
document.title = savedTitle && savedTitle.trim() ? savedTitle : DEFAULT_TITLE;
16+
17+
let icon = document.querySelector("link[rel='icon']");
18+
if(!icon){
19+
icon = document.createElement("link");
20+
icon.rel = "icon";
21+
document.head.appendChild(icon);
22+
}
23+
if(savedIcon && savedIcon.trim()){
24+
icon.href = savedIcon;
25+
}
26+
27+
window.onbeforeunload = savedLeave === "true" ? () => true : null;
28+
}
29+
30+
applySavedSettings();
31+
32+
window.addEventListener("storage", e => {
33+
if(e.key === "z_title"){
34+
document.title = e.newValue && e.newValue.trim() ? e.newValue : DEFAULT_TITLE;
35+
}
36+
37+
if(e.key === "z_icon"){
38+
let icon = document.querySelector("link[rel='icon']");
39+
if(!icon){
40+
icon = document.createElement("link");
41+
icon.rel = "icon";
42+
document.head.appendChild(icon);
43+
}
44+
if(e.newValue && e.newValue.trim()){
45+
icon.href = e.newValue;
46+
}
47+
}
48+
49+
if(e.key === "z_leave"){
50+
window.onbeforeunload = e.newValue === "true" ? () => true : null;
51+
}
52+
});
53+
</script>
54+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
55+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
56+
57+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
58+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script>
59+
60+
<style>
61+
body{
62+
margin:0;
63+
font-family:Inter;
64+
color:#e5e5e5;
65+
overflow:hidden;
66+
}
67+
68+
#bg{
69+
position:fixed;
70+
inset:0;
71+
z-index:-1;
72+
}
73+
74+
.topbar{
75+
position:fixed;
76+
top:10px;
77+
left:50%;
78+
transform:translateX(-50%);
79+
display:flex;
80+
gap:18px;
81+
padding:10px 18px;
82+
border-radius:999px;
83+
background:rgba(0,0,0,0.4);
84+
backdrop-filter:blur(10px);
85+
z-index:999999999999;
86+
}
87+
88+
.topbar button{
89+
background:none;
90+
border:none;
91+
color:white;
92+
cursor:pointer;
93+
}
94+
95+
#homeUI{
96+
position:absolute;
97+
top:50%;
98+
left:50%;
99+
transform:translate(-50%,-50%);
100+
display:flex;
101+
flex-direction:column;
102+
align-items:center;
103+
gap:20px;
104+
opacity:0;
105+
animation:fadeIn 0.6s ease forwards;
106+
}
107+
108+
@keyframes fadeIn{
109+
from{opacity:0;transform:translate(-50%,-60%);}
110+
to{opacity:1;transform:translate(-50%,-50%);}
111+
}
112+
113+
.title{
114+
font-size:64px;
115+
font-weight:800;
116+
letter-spacing:10px;
117+
}
118+
119+
.clock{
120+
width:80px;
121+
height:80px;
122+
border-radius:50%;
123+
border:2px solid rgba(255,255,255,0.2);
124+
position:relative;
125+
}
126+
127+
.hand{
128+
position:absolute;
129+
left:50%;
130+
bottom:50%;
131+
transform-origin:bottom;
132+
transform:translateX(-50%);
133+
background:white;
134+
}
135+
136+
.hour{height:20px;width:2px;}
137+
.minute{height:28px;width:2px;opacity:0.7;}
138+
.second{height:34px;width:1px;opacity:0.4;}
139+
140+
.search{
141+
position:relative;
142+
width:260px;
143+
height:38px;
144+
}
145+
146+
.search input{
147+
position:absolute;
148+
inset:0;
149+
width:100%;
150+
height:100%;
151+
border-radius:999px;
152+
border:none;
153+
background:rgba(0,0,0,0.45);
154+
color:white;
155+
text-align:center;
156+
font-size:14px;
157+
}
158+
159+
.search input::placeholder{
160+
text-align:center;
161+
color:rgba(255,255,255,0.7);
162+
}
163+
164+
.search i{
165+
position:absolute;
166+
left:12px;
167+
top:50%;
168+
transform:translateY(-50%);
169+
font-size:13px;
170+
opacity:0.7;
171+
pointer-events:none;
172+
}
173+
174+
#frameOverlay{
175+
position:fixed;
176+
inset:0;
177+
z-index:9999;
178+
pointer-events:none;
179+
}
180+
181+
#frameOverlay iframe{
182+
width:100%;
183+
height:100%;
184+
border:none;
185+
background:transparent;
186+
pointer-events:auto;
187+
}
188+
</style>
189+
</head>
190+
191+
<body>
192+
193+
<div id="bg"></div>
194+
195+
<div class="topbar">
196+
<button onclick="goHome()"><i class="fa-solid fa-house"></i></button>
197+
<button onclick="loadPage('games.html')"><i class="fa-solid fa-gamepad"></i></button>
198+
<button onclick="loadPage('apps.html')"><i class="fa-solid fa-box"></i></button>
199+
<button onclick="window.open('https://discord.gg/cloudmoon','_blank')"><i class="fa-brands fa-discord"></i></button>
200+
<button onclick="loadPage('settings.html')"><i class="fa-solid fa-gear"></i></button>
201+
</div>
202+
203+
<div id="homeUI">
204+
<div class="title">ZODIAC</div>
205+
206+
<div class="clock">
207+
<div class="hand hour" id="h"></div>
208+
<div class="hand minute" id="m"></div>
209+
<div class="hand second" id="s"></div>
210+
</div>
211+
212+
<div class="search">
213+
<i class="fa-solid fa-magnifying-glass"></i>
214+
<input id="searchBox" placeholder="search the web">
215+
</div>
216+
</div>
217+
218+
<div id="frameOverlay"></div>
219+
220+
<script>
221+
const BASES=[
222+
"https://raw.githubusercontent.com/Darkdragonzxs/zd-pages/main/",
223+
"https://cdn.jsdelivr.net/gh/Darkdragonzxs/zd-pages@latest/",
224+
"https://raw.githack.com/Darkdragonzxs/zd-pages/main/"
225+
];
226+
227+
VANTA.FOG({
228+
el:"#bg",
229+
highlightColor:0x444444,
230+
midtoneColor:0x222222,
231+
lowlightColor:0x111111,
232+
baseColor:0x000000
233+
});
234+
235+
function updateClock(){
236+
const n=new Date();
237+
const h=n.getHours()%12;
238+
const m=n.getMinutes();
239+
const s=n.getSeconds();
240+
241+
document.getElementById("h").style.transform=`translateX(-50%) rotate(${h*30+m/2}deg)`;
242+
document.getElementById("m").style.transform=`translateX(-50%) rotate(${m*6}deg)`;
243+
document.getElementById("s").style.transform=`translateX(-50%) rotate(${s*6}deg)`;
244+
}
245+
setInterval(updateClock,1000);
246+
updateClock();
247+
248+
function safe(h){
249+
return h.replace(/<\/script>/gi,'</scr'+'ipt>');
250+
}
251+
252+
async function fetchPage(f){
253+
for(const b of BASES){
254+
try{
255+
const r=await fetch(b+f);
256+
if(r.ok) return await r.text();
257+
}catch{}
258+
}
259+
}
260+
261+
async function loadPage(f){
262+
const html=safe(await fetchPage(f));
263+
const blob=new Blob([html],{type:"text/html"});
264+
openFrame(URL.createObjectURL(blob));
265+
}
266+
267+
function openFrame(url){
268+
document.getElementById("homeUI").style.display="none";
269+
const container=document.getElementById("frameOverlay");
270+
container.innerHTML="";
271+
const iframe=document.createElement("iframe");
272+
iframe.src=url;
273+
container.appendChild(iframe);
274+
}
275+
276+
function goHome(){
277+
document.getElementById("frameOverlay").innerHTML="";
278+
document.getElementById("homeUI").style.display="flex";
279+
}
280+
281+
document.getElementById("searchBox").addEventListener("keydown",e=>{
282+
if(e.key!=="Enter") return;
283+
284+
let v=e.target.value.trim();
285+
if(!v) return;
286+
287+
let url=v.startsWith("http")
288+
? v
289+
: "https://search.brave.com/search?q="+encodeURIComponent(v);
290+
291+
launchBrowser(url);
292+
});
293+
294+
async function launchBrowser(target){
295+
if(!/^(https?:\/\/|data:)/i.test(target)){
296+
target = "https://html.duckduckgo.com/?q=" + encodeURIComponent(target);
297+
}
298+
299+
let html = await fetch("https://cdn.jsdelivr.net/gh/darkdragonzxs/sandstone@latest/index.html")
300+
.then(r => r.text());
301+
302+
html = html.replace(/<\/script>/gi, '</scr' + 'ipt>');
303+
304+
html = html.replace(
305+
"</body>",
306+
`<scr`+`ipt>
307+
history.replaceState({}, "", "#${target}");
308+
location.hash = "${target}";
309+
</scr`+`ipt></body>`
310+
);
311+
312+
const blob = new Blob([html], { type: "text/html" });
313+
const blobUrl = URL.createObjectURL(blob);
314+
315+
openFrame(blobUrl + "#" + target);
316+
}
317+
</script>
318+
<script>
319+
window.addEventListener("storage", e => {
320+
if(e.key === "z_title"){
321+
document.title = e.newValue || "zodiac";
322+
}
323+
324+
if(e.key === "z_icon"){
325+
let link = document.querySelector("link[rel='icon']");
326+
if(!link){
327+
link = document.createElement("link");
328+
link.rel = "icon";
329+
document.head.appendChild(link);
330+
}
331+
link.href = e.newValue;
332+
}
333+
334+
if(e.key === "z_leave"){
335+
window.onbeforeunload = e.newValue === "true" ? () => true : null;
336+
}
337+
});
338+
</script>
339+
</body>
340+
</html>

0 commit comments

Comments
 (0)