<!
DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pro-User Dashboard | Dark UI</title>
<style>
/* CSS Variables for easy color management */
:root {
--primary: #6c5ce7;
--bg-dark: #0f0f1b;
--card-bg: #1e1e2f;
--text-main: #ffffff;
--text-dim: #a0a0a0;
--accent: #00cec9;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body {
background-color: var(--bg-dark);
color: var(--text-main);
display: flex;
min-height: 100vh;
}
/* Sidebar Navigation */
aside {
width: 260px;
background: var(--card-bg);
border-right: 1px solid #333;
padding: 2rem;
display: flex;
flex-direction: column;
position: fixed;
height: 100%;
}
.logo-area { font-size: 1.5rem; font-weight: 800; color: var(--accent); margin-bottom: 3rem; }
nav ul { list-style: none; }
nav ul li { margin-bottom: 1.5rem; }
nav ul li a {
text-decoration: none;
color: var(--text-dim);
font-size: 1.1rem;
transition: 0.3s;
display: block;
padding: 10px;
border-radius: 8px;
}
nav ul li a:hover { background: var(--primary); color: white; transform: translateX(10px); }
/* Main Content Area */
main {
margin-left: 260px;
padding: 3rem;
width: 100%;
}
/* Hero / Welcome Stats */
.welcome-banner {
background: linear-gradient(135deg, var(--primary), #a29bfe);
padding: 40px;
border-radius: 20px;
margin-bottom: 2rem;
animation: fadeIn 1s ease-out;
}
/* Grid Layout for Cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.stat-card {
background: var(--card-bg);
padding: 2rem;
border-radius: 15px;
border: 1px solid #2d2d44;
transition: 0.4s ease;
}
.stat-card:hover { border-color: var(--accent); box-shadow: 0 0 20px rgba(0, 206, 201, 0.2); }
.stat-number { font-size: 2.5rem; font-weight: bold; color: var(--accent); }
/* Experience Table Section */
.table-container {
margin-top: 3rem;
background: var(--card-bg);
padding: 1.5rem;
border-radius: 15px;
}
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th { text-align: left; color: var(--text-dim); padding: 15px; border-bottom: 1px solid #333; }
td { padding: 15px; border-bottom: 1px solid #2d2d44; }
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile Responsive */
@media (max-width: 768px) {
aside { width: 70px; padding: 1rem; }
aside span { display: none; } /* Text hide karega mobile pe */
main { margin-left: 70px; padding: 1.5rem; }
.logo-area { font-size: 1rem; }
}
</style>
</head>
<body>
<aside>
<div class="logo-area">⚡ PRO-DASH</div>
<nav>
<ul>
<li><a href="#">🏠 <span>Overview</span></a></li>
<li><a href="#">📊 <span>Analytics</span></a></li>
<li><a href="#">📂 <span>Projects</span></a></li>
<li><a href="#">⚙️<span>Settings</span></a></li>
</ul>
</nav>
</aside>
<main>
<div class="welcome-banner">
<h1>Namaste, User! 👋</h1>
<p>Aaj aapka workflow 25% zyada behtar hai.</p>
</div>
<div class="stats-grid">
<div class="stat-card">
<h3>Total Earnings</h3>
<div class="stat-number">$12,450</div>
<p style="color: #00ff00;">↑ 12% is mahine</p>
</div>
<div class="stat-card">
<h3>Active Projects</h3>
<div class="stat-number">18</div>
<p>3 projects deadline ke kareeb hain</p>
</div>
<div class="stat-card">
<h3>Client Satisfaction</h3>
<div class="stat-number">98%</div>
<p>Based on 200+ reviews</p>
</div>
</div>
<div class="table-container">
<h2>Recent Activities</h2>
<table>
<thead>
<tr>
<th>Project Name</th>
<th>Status</th>
<th>Progress</th>
<th>Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>E-commerce UI</td>
<td style="color: var(--accent);">Completed</td>
<td>100%</td>
<td>12 March 2026</td>
</tr>
<tr>
<td>Mobile App Fixes</td>
<td style="color: #fdcb6e;">In Progress</td>
<td>65%</td>
<td>20 March 2026</td>
</tr>
<tr>
<td>Database Setup</td>
<td style="color: #ff7675;">Pending</td>
<td>0%</td>
<td>25 March 2026</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
</html>
Is Code ki Khoobiyaan:
Glassmorphism Touch: Card designs thode translucent feel dete hain.
CSS Animation: Jab aap page refresh karenge, toh welcome-banner niche se upar slide hota hua dikhega.
Responsive Sidebar: Mobile par yeh sidebar patla ho jayega taaki screen space bache.
Semantic Structure: aside, main, aur nav jaise tags ka istemal search engines (SEO) ke liye best hai.