<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultra Glass Dashboard</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}
body{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:
radial-gradient(circle at 20% 20%, #a5b4fc 0%, transparent 40%),
radial-gradient(circle at 80% 30%, #67e8f9 0%, transparent 45%),
radial-gradient(circle at 50% 80%, #c7d2fe 0%, transparent 45%),
#eef2ff;
}
.container{
width:1200px;
display:grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 150px;
gap:22px;
}
.card{
position:relative;
border-radius:28px;
padding:18px;
overflow:hidden;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(45px) saturate(200%);
-webkit-backdrop-filter: blur(45px) saturate(200%);
border:1px solid rgba(255,255,255,0.35);
box-shadow:
0 20px 40px rgba(0,0,0,0.10),
inset 0 1px 0 rgba(255,255,255,0.6);
}
.title{
font-size:13px;
color:#1f2937;
}
.value{
font-size:28px;
font-weight:600;
margin-top:6px;
color:#0f172a;
}
/* GRID */
.c1{grid-column: span 3;}
.c2{grid-column: span 3;}
.c3{grid-column: span 3;}
.c4{grid-column: span 3;}
.c5{grid-column: span 8; grid-row: span 2;}
.c6{grid-column: span 4;}
.c7{grid-column: span 4;}
.c8{grid-column: span 4;}
.c9{grid-column: span 4;}
.c10{grid-column: span 6;}
.c11{grid-column: span 6;}
/* CHART BOX */
.chart-box{
position:absolute;
inset:50px 15px 15px 15px;
}
/* CANVAS */
canvas{
width:100%;
height:100%;
}
/* simple chart style */
svg{
width:100%;
height:100%;
}
.line{
stroke:#6366f1;
stroke-width:3;
fill:none;
}
.dot{
fill:#6366f1;
}
</style>
</head>
<body>
Revenue$12K
Users8.3K
Growth+18%
Sessions22K
<!-- REAL LINE CHART (NO LIBRARY) -->
Performance
<svg viewBox="0 0 100 50">
<polyline
points="0,40 15,25 30,30 45,10 60,20 75,15 100,5" />
<circle cx="0" cy="40" r="1.5"/>
<circle cx="15" cy="25" r="1.5"/>
<circle cx="30" cy="30" r="1.5"/>
<circle cx="45" cy="10" r="1.5"/>
<circle cx="60" cy="20" r="1.5"/>
<circle cx="75" cy="15" r="1.5"/>
<circle cx="100" cy="5" r="1.5"/>
</svg>
Traffic
<!-- SIMPLE DONUT -->
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30"
stroke="#6366f1" stroke-width="10" fill="none"
stroke-dasharray="120 200"/>
<circle cx="50" cy="50" r="30"
stroke="#22c55e" stroke-width="10" fill="none"
stroke-dasharray="80 200"/>
<circle cx="50" cy="50" r="30"
stroke="#06b6d4" stroke-width="10" fill="none"
stroke-dasharray="50 200"/>
</svg>
Orders1240
Conversion4.6%
Visitors92K
Analytics
Reports
</body>
</html>]]>
