index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Status Page</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main class="card">
<div class="accent"></div>
<div class="header">
<div class="dot"></div>
<span>All systems operational</span>
</div>
<div class="list">
<div class="row">
<div class="led"></div>
<span>API</span>
<div class="bars"><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div>
<span>100%</span>
</div>
<div class="row">
<div class="led warn"></div>
<span>Database</span>
<div class="bars"><div class="bar"></div><div class="bar"></div><div class="bar down"></div><div class="bar"></div><div class="bar"></div></div>
<span>98%</span>
</div>
<div class="row">
<div class="led"></div>
<span>CDN</span>
<div class="bars"><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div>
<span>100%</span>
</div>
</div>
</main>
</body>
</html>
styles.css
* {
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #050608;
font-family: system-ui, sans-serif;
}
.card {
width: 420px;
border-radius: 4px;
overflow: hidden;
position: relative;
background: #111816;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 0 60px rgba(34,197,94,0.05), 0 30px 80px rgba(0,0,0,0.6);
}
.card::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
border-top: 2px solid #22c55e;
border-left: 2px solid #22c55e;
}
.card::after {
content: "";
position: absolute;
bottom: 10px;
right: 10px;
width: 20px;
height: 20px;
border-bottom: 2px solid #22c55e;
border-right: 2px solid #22c55e;
}
.accent {
height: 2px;
background: linear-gradient(90deg, transparent, #22c55e, transparent);
}
.header {
padding: 32px 28px 24px;
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
font-weight: 700;
color: #dcfce7;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 10px rgba(34,197,94,0.5);
}
.list {
padding: 0 28px 32px;
}
.row {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 0;
border-top: 1px solid rgba(255,255,255,0.06);
font-size: 14px;
color: rgba(255,255,255,0.9);
}
.row span:last-child {
width: 40px;
text-align: right;
}
.led {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34,197,94,0.4);
}
.led.warn {
background: #f59e0b;
box-shadow: 0 0 6px rgba(245,158,11,0.4);
}
.bars {
display: flex;
gap: 2px;
margin-left: auto;
}
.bar {
width: 6px;
height: 20px;
border-radius: 2px;
background: rgba(34,197,94,0.5);
}
.bar.down {
background: rgba(245,158,11,0.5);
}
