<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Premium White UI</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Arial, sans-serif;
}
/* BACKGROUND */
body{
background: radial-gradient(circle at top, #0b1411, #050807);
color:#fff;
}
/* WRAPPER */
.wrapper{
min-height:100vh;
padding:40px;
background-image:
linear-gradient(rgba(0,255,170,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,170,0.05) 1px, transparent 1px);
background-size:42px 42px;
}
/* HEADER (SAFE - NO OVERWRITE) */
.header{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:35px;
}
.header h1{
color:#ffffff;
font-size:30px;
font-weight:700;
letter-spacing:0.5px;
}
.header p{
color:rgba(255,255,255,0.75);
margin-top:8px;
font-size:14px;
}
.tag{
display:flex;
align-items:center;
gap:10px;
padding:10px 14px;
border-radius:50px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(0,255,170,0.25);
backdrop-filter: blur(10px);
}
.tag div{
color:#fff;
}
/* MAIN PANEL */
.panel{
display:flex;
gap:22px;
padding:24px;
border-radius:22px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.07);
backdrop-filter: blur(14px);
box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
/* LEFT CARD */
.left{
flex:1;
padding:24px;
border-radius:18px;
background:linear-gradient(135deg, rgba(0,255,150,0.18), rgba(0,120,90,0.18));
border:1px solid rgba(0,255,170,0.25);
position:relative;
overflow:hidden;
}
.left h2{
color:#fff;
font-size:20px;
line-height:1.4;
font-weight:600;
}
/* glow */
.left::after{
content:"";
position:absolute;
width:180px;
height:180px;
right:-60px;
bottom:-60px;
background:radial-gradient(circle, rgba(0,255,170,0.35), transparent 70%);
border-radius:50%;
}
/* RIGHT GRID */
.right{
flex:2;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}
/* CARDS */
.card{
padding:18px;
border-radius:16px;
background:rgba(0,0,0,0.55);
border:1px solid rgba(0,255,170,0.15);
position:relative;
color:#fff;
transition:0.25s;
}
.card:hover{
transform:translateY(-5px);
border-color:rgba(0,255,170,0.4);
box-shadow:0 0 20px rgba(0,255,170,0.15);
}
.card span{
position:absolute;
top:10px;
right:12px;
color:#00ffb3;
font-weight:700;
}
/* STATS */
.stats{
margin-top:28px;
padding:26px;
border-radius:22px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.07);
backdrop-filter: blur(14px);
}
.stats h2{
color:#fff;
margin-bottom:20px;
}
/* ROW */
.row{
display:flex;
justify-content:space-between;
gap:30px;
}
/* BOX */
.box{
text-align:center;
}
/* CIRCLE */
.circle{
width:140px;
height:140px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
position:relative;
background:conic-gradient(#00ffb3 0% 70%, #1a1a1a 70% 100%);
box-shadow:0 0 25px rgba(0,255,170,0.15);
transition:0.3s;
}
.circle:hover{
transform:scale(1.05);
}
.circle::after{
content:"";
width:110px;
height:110px;
background:#050807;
border-radius:50%;
position:absolute;
}
.circle span{
position:relative;
font-size:22px;
font-weight:700;
color:#fff;
}
/* DESC */
.desc{
margin-top:10px;
font-size:12px;
color:rgba(255,255,255,0.75);
}
</style>
</head>
<body>
<!-- HEADER (SAFE) -->
<h1>LUMI Startup Dashboard</h1>
<p>Premium analytics experience for modern startups</p>
<img decoding="async" src="https://i.pravatar.cc/100" width="32" height="32" style="border-radius:50%">
@designer_contact
<!-- PANEL -->
<h2>Smart financial insights that improve your decisions daily</h2>
N1Expense analytics system
N2Smart budget tracking
N3AI spending insights
N4Real-time financial data
N5Visual dashboard UI
N6Replace manual sheets
<!-- STATS -->
<h2>Performance Results</h2>
70%
Clarity improvement
55%
Spending reduction
92%
User confidence
</body>
</html>]]>
