2025-08-15 14:55:23 +03:00
|
|
|
<head>
|
|
|
|
|
<title>My Custom Dashboard</title>
|
|
|
|
|
<icon src="https://cdn-icons-png.flaticon.com/512/1828/1828774.png">
|
|
|
|
|
<meta name="theme-color" content="#1a202c">
|
|
|
|
|
<meta name="description" content="A stylish no-script dashboard">
|
|
|
|
|
|
|
|
|
|
<font name="roboto" src="https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2" />
|
2025-08-30 14:19:03 +03:00
|
|
|
<postprocess preset="rblur" />
|
2025-08-15 14:55:23 +03:00
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
h1 { text-[#ffffff] text-3xl font-bold }
|
|
|
|
|
h2 { text-[#cbd5e1] text-xl }
|
|
|
|
|
p { text-[#94a3b8] text-base }
|
|
|
|
|
button { bg-[#4ade80] text-[#ffffff] hover:bg-[#22c55e] active:bg-[#15803d] }
|
|
|
|
|
.card { bg-[#1e293b] text-[#f8fafc] rounded-xl p-4 shadow-lg }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body style="bg-[#0f172a] p-8 text-white font-roboto">
|
|
|
|
|
<h1 style="text-center mb-4">📊 My Dashboard</h1>
|
|
|
|
|
|
|
|
|
|
<!-- Top Summary Cards -->
|
|
|
|
|
<div style="flex flex-row gap-4 justify-center flex-wrap">
|
|
|
|
|
<div style="card w-48 h-24 flex flex-col justify-center items-center">
|
|
|
|
|
<h2 style="text-red-500">Users</h2>
|
|
|
|
|
<p>1,240</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="card w-48 h-24 flex flex-col justify-center items-center">
|
|
|
|
|
<h2>Sales</h2>
|
|
|
|
|
<p>$9,842</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="card w-48 h-24 flex flex-col justify-center items-center">
|
|
|
|
|
<h2>Visitors</h2>
|
|
|
|
|
<p>3,590</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<separator direction="horizontal" />
|
|
|
|
|
|
|
|
|
|
<!-- User Info Panel -->
|
|
|
|
|
<h2 style="text-center mt-6">👤 User Panel</h2>
|
|
|
|
|
<div style="flex flex-row gap-4 justify-center mt-2">
|
|
|
|
|
<div style="card w-64">
|
|
|
|
|
<p>Name: Jane Doe</p>
|
|
|
|
|
<p>Email: jane@example.com</p>
|
|
|
|
|
<p>Status: <span style="text-[#22c55e]">Active</span></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="card w-64">
|
|
|
|
|
<p>Plan: Pro</p>
|
|
|
|
|
<p>Projects: 8</p>
|
|
|
|
|
<p>Tasks: 42</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<separator direction="horizontal" />
|
|
|
|
|
|
|
|
|
|
<!-- Recent Activity Log -->
|
|
|
|
|
<h2 style="text-center mt-6">📝 Recent Activity</h2>
|
|
|
|
|
<ul style="w-[80%] mt-2 flex justify-center flex-column gap-2">
|
|
|
|
|
<li style="bg-[#334155] px-4 py-2 rounded-xl mb-1">✅ Task "Update UI" marked as complete</li>
|
|
|
|
|
<li style="bg-[#334155] px-4 py-2 rounded-xl mb-1">🔔 New comment on "Bug Fix #224"</li>
|
|
|
|
|
<li style="bg-[#334155] px-4 py-2 rounded-xl mb-1">📤 Exported report "Q2 Metrics"</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<separator direction="horizontal" />
|
|
|
|
|
|
|
|
|
|
<!-- Action Buttons -->
|
|
|
|
|
<h2 style="text-center mt-6">🔧 Actions</h2>
|
|
|
|
|
<div style="flex flex-row gap-2 justify-center mt-2">
|
|
|
|
|
<button style="rounded-lg px-4 py-2">Create Report</button>
|
|
|
|
|
<button style="rounded-lg px-4 py-2 bg-[#3b82f6] hover:bg-[#2563eb] active:bg-[#1e40af]">Invite User</button>
|
|
|
|
|
<button style="rounded-lg px-4 py-2 bg-[#facc15] text-[#000] hover:bg-[#eab308] active:bg-[#ca8a04]">Upgrade Plan</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
