Skip to content

Commit 2d2739b

Browse files
UserArhamUserArham
authored
Create index2.html
1 parent abae23f commit 2d2739b

1 file changed

Lines changed: 189 additions & 0 deletions

File tree

‎index2.html‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>XP.quenq.com</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
8+
<!-- Android font -->
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
10+
11+
<style>
12+
:root {
13+
--bg: #0b0f1a;
14+
--surface: #12162a;
15+
--primary: #7c8cff;
16+
--on-surface: rgba(255,255,255,0.92);
17+
--on-muted: rgba(255,255,255,0.6);
18+
--elevation: 0 10px 40px rgba(0,0,0,.6);
19+
}
20+
21+
* {
22+
box-sizing: border-box;
23+
font-family: "Roboto", system-ui, sans-serif;
24+
}
25+
26+
html, body {
27+
margin: 0;
28+
width: 100%;
29+
height: 100%;
30+
background: radial-gradient(1200px at top, #1b1f3b, var(--bg));
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
}
35+
36+
/* Phone frame */
37+
.phone {
38+
width: 390px;
39+
height: 820px;
40+
background: black;
41+
border-radius: 34px;
42+
padding: 12px;
43+
box-shadow: 0 0 0 1px rgba(255,255,255,0.08),
44+
0 40px 120px rgba(0,0,0,0.8);
45+
}
46+
47+
/* App surface */
48+
.app {
49+
width: 100%;
50+
height: 100%;
51+
background: var(--surface);
52+
border-radius: 26px;
53+
overflow: hidden;
54+
display: flex;
55+
flex-direction: column;
56+
}
57+
58+
/* Status bar */
59+
.status {
60+
height: 28px;
61+
padding: 0 14px;
62+
display: flex;
63+
align-items: center;
64+
justify-content: space-between;
65+
font-size: 12px;
66+
color: var(--on-muted);
67+
}
68+
69+
/* App bar */
70+
.appbar {
71+
height: 56px;
72+
padding: 0 16px;
73+
display: flex;
74+
align-items: center;
75+
gap: 16px;
76+
background: linear-gradient(
77+
to bottom,
78+
rgba(255,255,255,0.05),
79+
rgba(255,255,255,0)
80+
);
81+
color: var(--on-surface);
82+
font-weight: 500;
83+
letter-spacing: .04em;
84+
}
85+
86+
/* Content */
87+
.content {
88+
flex: 1;
89+
position: relative;
90+
}
91+
92+
/* Loader */
93+
.loader {
94+
position: absolute;
95+
inset: 0;
96+
display: flex;
97+
align-items: center;
98+
justify-content: center;
99+
background: rgba(0,0,0,0.6);
100+
color: var(--on-surface);
101+
letter-spacing: .2em;
102+
font-size: 12px;
103+
z-index: 5;
104+
transition: opacity .5s ease;
105+
}
106+
107+
.loader.hidden {
108+
opacity: 0;
109+
pointer-events: none;
110+
}
111+
112+
iframe {
113+
width: 100%;
114+
height: 100%;
115+
border: none;
116+
}
117+
118+
/* Bottom navigation */
119+
.nav {
120+
height: 64px;
121+
display: flex;
122+
justify-content: space-around;
123+
align-items: center;
124+
background: rgba(255,255,255,0.04);
125+
border-top: 1px solid rgba(255,255,255,0.08);
126+
}
127+
128+
.nav div {
129+
width: 36px;
130+
height: 36px;
131+
border-radius: 50%;
132+
background: rgba(255,255,255,0.08);
133+
}
134+
135+
@media (max-width: 420px) {
136+
.phone {
137+
width: 100%;
138+
height: 100%;
139+
border-radius: 0;
140+
padding: 0;
141+
}
142+
.app {
143+
border-radius: 0;
144+
}
145+
}
146+
</style>
147+
</head>
148+
149+
<body>
150+
<div class="phone">
151+
<div class="app">
152+
153+
<div class="status">
154+
<span>12:42</span>
155+
<span>5G ▪︎ 82%</span>
156+
</div>
157+
158+
<div class="appbar">
159+
XP.QUENQ
160+
</div>
161+
162+
<div class="content">
163+
<div class="loader" id="loader">LOADING</div>
164+
<iframe
165+
src="https://xp.quenq.com"
166+
loading="eager"
167+
referrerpolicy="no-referrer">
168+
</iframe>
169+
</div>
170+
171+
<div class="nav">
172+
<div></div>
173+
<div></div>
174+
<div></div>
175+
</div>
176+
177+
</div>
178+
</div>
179+
180+
<script>
181+
const iframe = document.querySelector("iframe");
182+
const loader = document.getElementById("loader");
183+
184+
iframe.addEventListener("load", () => {
185+
loader.classList.add("hidden");
186+
});
187+
</script>
188+
</body>
189+
</html>

0 commit comments

Comments
 (0)