Skip to content

Commit ed51ab5

Browse files
keeniGithubkeeniGithub
committed
redesign
1 parent 613cea1 commit ed51ab5

5 files changed

Lines changed: 158 additions & 35 deletions

File tree

‎src/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import WebsiteStatus from "./_components/status";
44

55
export default function App() {
66
return (
7-
<div className="flex flex-col min-h-screen">
7+
<div className="relative isolate min-h-screen text-white">
88
<Navbar />
9+
<div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-120 bg-[radial-gradient(circle_at_top,rgba(164,93,255,0.16),transparent_55%)]" />
910
<WebsiteStatus />
1011
<Footer />
1112
</div>

‎src/_components/footer.tsx‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,27 @@ export default function Footer() {
55
const currentYear = new Date().getFullYear();
66

77
return (
8-
<footer className="fixed bottom-0 left-0 right-0 px-6 py-4 border-t border-white/5">
9-
<div className="flex items-center justify-between max-w-2xl mx-auto flex-col md:flex-row gap-y-4">
10-
<a href={links.QUALSU.SITE} target="_blank" rel="noreferrer">
11-
<img src={images.LOGO} className="h-4 opacity-70 hover:opacity-100 transition-opacity duration-200" alt="Qualsu" />
12-
</a>
13-
<div className="flex items-center gap-5">
14-
<a href={links.QUALSU.SITE} target="_blank" rel="noreferrer" className="text-xs text-white/50 hover:text-white/70 transition-colors duration-150">Site</a>
15-
<a href={links.FEEDBACK.SITE} target="_blank" rel="noreferrer" className="text-xs text-white/50 hover:text-white/70 transition-colors duration-150">Feedback</a>
16-
<a href={links.QSU_ID.SITE} target="_blank" rel="noreferrer" className="text-xs text-white/50 hover:text-white/70 transition-colors duration-150">Qual ID</a>
8+
<footer className="px-3 pb-5 sm:px-6 md:px-8 lg:px-10">
9+
<div className="section-shell mx-auto mt-2 w-full max-w-270 rounded-[1.75rem] py-6 sm:py-8">
10+
<div className="relative z-10 mx-auto w-full max-w-5xl">
11+
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
12+
<span className="flex items-center sm:mb-0 space-x-3 rtl:space-x-reverse">
13+
<img src={images.LOGO} className="h-4" alt="Qualsu logo" />
14+
<span className="text-white">|</span>
15+
<img src={images.STATUS} className="h-6" alt="Status" />
16+
</span>
17+
<div className="flex items-center gap-5">
18+
<a href={links.QUALSU.SITE} target="_blank" rel="noreferrer" className="text-xs text-white/50 transition-colors duration-200 hover:text-white/80">Site</a>
19+
<a href={links.FEEDBACK.SITE} target="_blank" rel="noreferrer" className="text-xs text-white/50 transition-colors duration-200 hover:text-white/80">Feedback</a>
20+
<a href={links.QSU_ID.SITE} target="_blank" rel="noreferrer" className="text-xs text-white/50 transition-colors duration-200 hover:text-white/80">Qual ID</a>
21+
</div>
22+
</div>
23+
<hr className="my-5 border-white/10" />
24+
<span className="block text-xs text-white/40 sm:text-center">
25+
© 2021-{currentYear}
26+
<a href={links.QUALSU.SITE} target="_blank" rel="noreferrer" className="transition-colors duration-200 hover:text-white/75"> Qualsu</a>
27+
</span>
1728
</div>
18-
<span className="text-xs text-white/30">
19-
© 2021-{currentYear}
20-
<a href={links.QUALSU.SITE} target='_blank' className='hover:text-white/70 transition-colors duration-150'> Qualsu</a>
21-
</span>
2229
</div>
2330
</footer>
2431
);

‎src/_components/navbar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { pages } from "../config/routing/pages.route";
33

44
export default function Navbar() {
55
return (
6-
<nav className="fixed top-0 left-0 right-0 z-50">
7-
<div className="container mx-auto flex items-center px-6 py-5">
8-
<a href={pages.ROOT}>
9-
<img src={images.STATUS} alt="Qualsu logo" className="h-7 opacity-90 hover:opacity-100 transition-opacity duration-200" />
6+
<nav className="fixed top-0 left-0 right-0 z-50 px-4 pt-3 sm:px-6 md:px-8 lg:px-10">
7+
<div className="surface-panel mx-auto flex max-w-270 items-center justify-between rounded-2xl px-4 py-3 sm:px-5 sm:py-4">
8+
<a href={pages.ROOT} className="inline-flex items-center">
9+
<img src={images.STATUS} alt="Qualsu status" className="h-7" />
1010
</a>
1111
</div>
1212
</nav>

‎src/_components/status.tsx‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -68,25 +68,29 @@ export default function WebsiteStatus() {
6868
}, []);
6969

7070
return (
71-
<div className="flex justify-center items-center min-h-screen text-white px-4 pb-16">
72-
<div className="w-full max-w-md">
71+
<main className="px-3 pb-8 pt-24 sm:px-6 md:px-8 lg:px-10">
72+
<section className="section-shell mx-auto w-full max-w-270 rounded-[1.75rem]">
73+
<div className="relative z-10 mx-auto w-full max-w-3xl">
7374
{loading ? (
7475
<div className="space-y-8 animate-pulse">
75-
<div className="flex flex-col items-center gap-3">
76-
<div className="w-36 h-6 bg-white/8 rounded-full" />
76+
<div className="flex flex-col items-center gap-3 pt-2">
77+
<div className="h-6 w-44 rounded-full bg-white/8" />
78+
<div className="h-4 w-64 rounded-full bg-white/5" />
7779
</div>
7880
<div className="space-y-2">
7981
{Array.from({ length: services.length + 1 }).map((_, index) => (
80-
<div key={index} className="h-13 bg-white/4 rounded-xl" />
82+
<div key={index} className="h-14 rounded-xl border border-white/5 bg-white/4" />
8183
))}
8284
</div>
8385
<div className="flex justify-center">
84-
<div className="w-28 h-3 bg-white/5 rounded" />
86+
<div className="h-3 w-44 rounded bg-white/5" />
8587
</div>
8688
</div>
8789
) : (
8890
<div className="space-y-8">
89-
<div className="flex justify-center">
91+
<div className="flex flex-col items-center gap-3 pt-1">
92+
<h1 className="text-center text-3xl tracking-tight sm:text-4xl">Service Status</h1>
93+
<p className="text-center text-sm text-white/60">Realtime uptime for Qualsu products and public APIs</p>
9094
<span className={`inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs ${
9195
hasError ? 'bg-red-500/10 text-red-400' : 'bg-green-500/10 text-green-400'
9296
}`}>
@@ -102,7 +106,7 @@ export default function WebsiteStatus() {
102106
<div key={service.key}>
103107
<button
104108
type="button"
105-
className="w-full flex items-center justify-between px-4 py-3.5 rounded-xl hover:bg-white/4 transition-colors duration-150 text-left"
109+
className="surface-panel w-full text-left flex items-center justify-between rounded-xl px-4 py-3.5 transition-colors duration-150 hover:bg-white/8"
106110
onClick={() => setExpandedServiceKey((prev) => (prev === service.key ? null : service.key))}
107111
>
108112
<div className="flex items-center gap-3">
@@ -132,12 +136,15 @@ export default function WebsiteStatus() {
132136
</button>
133137

134138
{expandedServiceKey === service.key && (
135-
<div className="pb-2 space-y-0.5">
139+
<div className="mx-1 mt-1 space-y-1 rounded-xl border border-white/10 bg-white/7 p-2 pb-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]">
136140
{service.endpoints.map((endpoint) => (
137-
<div key={`${service.key}-${endpoint.type}`} className="flex items-center justify-between px-4 py-2 pl-11">
141+
<div
142+
key={`${service.key}-${endpoint.type}`}
143+
className="flex items-center justify-between rounded-xl border border-white/15 bg-white/10 px-4 py-2 pl-11"
144+
>
138145
<a
139-
className={`text-xs text-white/40 ${
140-
endpoint.type === 'Site' ? 'hover:text-white/70 cursor-pointer transition-colors duration-150' : 'cursor-default'
146+
className={`text-xs text-white/70 ${
147+
endpoint.type === 'Site' ? 'cursor-pointer transition-colors duration-150 hover:text-white' : 'cursor-default'
141148
}`}
142149
href={endpoint.type === 'Site' ? endpoint.url : undefined}
143150
target={endpoint.type === 'Site' ? '_blank' : undefined}
@@ -146,7 +153,7 @@ export default function WebsiteStatus() {
146153
{endpoint.type}
147154
</a>
148155
<div className="flex items-center gap-2">
149-
<span className="text-xs text-white/30">
156+
<span className="text-xs text-white/65">
150157
{endpoint.status === 'online'
151158
? `${endpoint.responseTime} ms`
152159
: endpoint.status === 'offline'
@@ -169,8 +176,9 @@ export default function WebsiteStatus() {
169176
<p className="text-center text-xs text-white/50">Updated {lastUpdated}</p>
170177
</div>
171178
)}
172-
</div>
173-
</div>
179+
</div>
180+
</section>
181+
</main>
174182
);
175183
}
176184

‎src/index.css‎

Lines changed: 109 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,118 @@
1010

1111
* {
1212
font-family: 'MultiroundPro', sans-serif;
13-
overflow-x: hidden;
13+
}
14+
15+
html {
16+
scroll-behavior: smooth;
1417
}
1518

1619
body {
17-
background: #0e0c11;
20+
position: relative;
21+
min-height: 100vh;
22+
color: #fff;
23+
overflow-x: hidden;
24+
background:
25+
radial-gradient(circle at top, rgba(121, 69, 202, 0.22), transparent 30%),
26+
radial-gradient(circle at 80% 20%, rgba(48, 144, 255, 0.1), transparent 18%),
27+
linear-gradient(135deg, rgb(25, 17, 24) 0%, rgb(34, 22, 33) 55%, rgb(19, 14, 21) 100%);
1828
-webkit-font-smoothing: antialiased;
1929
-moz-osx-font-smoothing: grayscale;
30+
}
31+
32+
body::before,
33+
body::after {
34+
content: '';
35+
position: fixed;
36+
inset: auto;
37+
border-radius: 9999px;
38+
pointer-events: none;
39+
filter: blur(90px);
40+
z-index: -1;
41+
}
42+
43+
body::before {
44+
top: 5rem;
45+
left: -4rem;
46+
width: 14rem;
47+
height: 14rem;
48+
background: rgba(129, 72, 196, 0.12);
49+
}
50+
51+
body::after {
52+
right: -5rem;
53+
bottom: 8rem;
54+
width: 18rem;
55+
height: 18rem;
56+
background: rgba(33, 181, 255, 0.1);
57+
}
58+
59+
#root {
60+
min-height: 100vh;
61+
}
62+
63+
.surface-panel {
64+
border: 1px solid rgba(255, 255, 255, 0.1);
65+
background: rgba(255, 255, 255, 0.05);
66+
box-shadow: 0 22px 80px rgba(0, 0, 0, 0.28);
67+
backdrop-filter: blur(24px);
68+
}
69+
70+
.section-shell {
71+
position: relative;
72+
overflow: hidden;
73+
margin: 1.5rem auto;
74+
width: calc(100% - 1.5rem);
75+
padding: 1.25rem 1rem;
76+
border: 1px solid rgba(255, 255, 255, 0.1);
77+
border-radius: 1rem;
78+
background: rgba(255, 255, 255, 0.05);
79+
box-shadow: 0 22px 80px rgba(0, 0, 0, 0.28);
80+
backdrop-filter: blur(24px);
81+
}
82+
83+
.section-shell::before {
84+
content: '';
85+
position: absolute;
86+
inset: 0;
87+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 35%, transparent 70%, rgba(255, 255, 255, 0.03));
88+
pointer-events: none;
89+
}
90+
91+
.nav-link {
92+
padding: 0.5rem 1rem;
93+
border-radius: 9999px;
94+
color: rgba(255, 255, 255, 0.8);
95+
font-size: 0.875rem;
96+
transition: background-color 0.2s ease, color 0.2s ease;
97+
}
98+
99+
.nav-link:hover {
100+
background: rgba(255, 255, 255, 0.08);
101+
color: #fff;
102+
}
103+
104+
@media (min-width: 640px) {
105+
.section-shell {
106+
margin: 2rem auto;
107+
width: calc(100% - 3rem);
108+
padding: 1.5rem;
109+
border-radius: 2rem;
110+
}
111+
}
112+
113+
@media (min-width: 768px) {
114+
.section-shell {
115+
margin: 2.5rem auto;
116+
width: calc(100% - 4rem);
117+
padding: 2rem;
118+
}
119+
}
120+
121+
@media (min-width: 1024px) {
122+
.section-shell {
123+
margin: 2.5rem auto;
124+
width: calc(100% - 5rem);
125+
padding: 2.5rem;
126+
}
20127
}

0 commit comments

Comments
 (0)