Webleb - कोड स्निपेट्स - CSS और चार्ट के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

HTML

<!DOCTYPE html>

<head>

<title>Admin Dashboard</title>

<style>

:root {

--primary: #4e73df;

--secondary: #858796;

--success: #1cc88a;

--info: #36b9cc;

--warning: #f6c23e;

--danger: #e74a3b;

--light: #f8f9fc;

--dark: #5a5c69;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Nunito', sans-serif;

}

body {

background-color: #f8f9fc;

display: flex;

min-height: 100vh;

}

/* Sidebar */

.sidebar {

width: 250px;

background: linear-gradient(180deg, var(--primary) 0%, #224abe 100%);

color: white;

transition: all 0.3s;

position: fixed;

height: 100vh;

z-index: 100;

}

.sidebar-header {

padding: 1.5rem;

text-align: center;

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.sidebar-menu {

padding: 1rem 0;

}

.sidebar-menu li {

list-style: none;

padding: 0.75rem 1.5rem;

transition: all 0.3s;

}

.sidebar-menu li:hover {

background-color: rgba(255, 255, 255, 0.1);

}

.sidebar-menu li a {

color: rgba(255, 255, 255, 0.8);

text-decoration: none;

display: flex;

align-items: center;

}

.sidebar-menu li a i {

margin-right: 10px;

font-size: 1.1rem;

}

.sidebar-menu li.active {

background-color: rgba(255, 255, 255, 0.2);

}

.sidebar-menu li.active a {

color: white;

}

/* Main Content */

.main-content {

flex: 1;

margin-left: 250px;

transition: all 0.3s;

}

/* Top Navigation */

.top-nav {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem 1.5rem;

background-color: white;

box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);

position: sticky;

top: 0;

z-index: 50;

}

.search-bar {

display: flex;

align-items: center;

}

.search-bar input {

border: none;

background-color: var(--light);

padding: 0.5rem 1rem;

border-radius: 20px;

outline: none;

}

.user-menu {

display: flex;

align-items: center;

}

.user-menu img {

width: 40px;

height: 40px;

border-radius: 50%;

margin-right: 10px;

}

.user-menu .dropdown {

position: relative;

}

.user-menu .dropdown-content {

display: none;

position: absolute;

right: 0;

background-color: white;

min-width: 160px;

box-shadow: 0 8px 16px rgba(0,0,0,0.1);

z-index: 1;

border-radius: 5px;

}

.user-menu .dropdown:hover .dropdown-content {

display: block;

}

.dropdown-content a {

color: var(--dark);

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown-content a:hover {

background-color: var(--light);

}

/* Dashboard Content */

.dashboard-content {

padding: 1.5rem;

}

.page-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1.5rem;

}

.page-header h1 {

font-size: 1.75rem;

color: var(--dark);

}

.breadcrumb {

display: flex;

list-style: none;

}

.breadcrumb li {

margin-right: 0.5rem;

}

.breadcrumb li:after {

content: '/';

margin-left: 0.5rem;

color: var(--secondary);

}

.breadcrumb li:last-child:after {

content: '';

}

.breadcrumb a {

color: var(--secondary);

text-decoration: none;

}

.breadcrumb a:hover {

color: var(--primary);

}

/* Cards */

.cards {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 1.5rem;

margin-bottom: 1.5rem;

}

.card {

background-color: white;

border-radius: 0.35rem;

box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);

overflow: hidden;

}

.card-header {

padding: 1rem 1.25rem;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

font-weight: bold;

color: var(--dark);

}

.card-body {

padding: 1.25rem;

}

.stat-card {

display: flex;

align-items: center;

}

.stat-icon {

width: 50px;

height: 50px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin-right: 1rem;

font-size: 1.5rem;

color: white;

}

.stat-icon.primary {

background-color: var(--primary);

}

.stat-icon.success {

background-color: var(--success);

}

.stat-icon.warning {

background-color: var(--warning);

}

.stat-icon.danger {

background-color: var(--danger);

}

.stat-text h3 {

font-size: 1.5rem;

margin-bottom: 0.25rem;

color: var(--dark);

}

.stat-text p {

color: var(--secondary);

font-size: 0.875rem;

}

/* Charts */

.chart-container {

background-color: white;

border-radius: 0.35rem;

box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);

margin-bottom: 1.5rem;

overflow: hidden;

}

.chart-header {

padding: 1rem 1.25rem;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

font-weight: bold;

color: var(--dark);

}

.chart-body {

padding: 1.25rem;

height: 300px;

}

/* Tables */

.table-container {

background-color: white;

border-radius: 0.35rem;

box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);

overflow: hidden;

}

table {

width: 100%;

border-collapse: collapse;

}

th, td {

padding: 1rem;

text-align: left;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}

th {

background-color: var(--light);

color: var(--dark);

font-weight: bold;

}

tr:hover {

background-color: rgba(0, 0, 0, 0.01);

}

.badge {

padding: 0.25rem 0.5rem;

border-radius: 0.25rem;

font-size: 0.75rem;

font-weight: bold;

color: white;

}

.badge-success {

background-color: var(--success);

}

.badge-warning {

background-color: var(--warning);

}

.badge-danger {

background-color: var(--danger);

}

/* Responsive */

@media (max-width: 768px) {

.sidebar {

width: 0;

overflow: hidden;

}

.main-content {

margin-left: 0;

}

.cards {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<h2>Admin Panel</h2>

</div>

<a href="#"><i class="fas fa-fw fa-tachometer-alt"></i> Dashboard</a>

</li>

<li>

<a href="#"><i class="fas fa-fw fa-users"></i> Users</a>

</li>

<li>

<a href="#"><i class="fas fa-fw fa-box"></i> Products</a>

</li>

<li>

<a href="#"><i class="fas fa-fw fa-shopping-cart"></i> Orders</a>

</li>

<li>

<a href="#"><i class="fas fa-fw fa-chart-bar"></i> Analytics</a>

</li>

<li>

<a href="#"><i class="fas fa-fw fa-cog"></i> Settings</a>

</li>

</ul>

</div>

</div>

<span>Muhammad Hazrady Wijaya <i class="fas fa-caret-down"></i></span>

<a href="#"><i class="fas fa-fw fa-user"></i> Profile</a>

<a href="#"><i class="fas fa-fw fa-cog"></i> Settings</a>

<a href="#"><i class="fas fa-fw fa-sign-out-alt"></i> Logout</a>

</div>

<h1>Dashboard</h1>

<li><a href="#">Dashboard</a></li>

</ul>

</div>

</div>

<p>Total Users</p>

</div>

</div>

<p>Total Orders</p>

</div>

</div>

<p>Total Products</p>

</div>

</div>

<p>Total Revenue</p>

</div>

<h3>Revenue Overview</h3>

</div>

</div>

<h3>Recent Orders</h3>

</div>

<table>

<thead>

<tr>

<th>Order ID</th>

<th>Customer</th>

<th>Amount</th>

<th>Status</th>

<th>Action</th>

</tr>

</thead>

<tbody>

<tr>

<td><span class="badge badge-success">Completed</span></td>

</tr>

<tr>

<td>Abdul syukur</td>

<td><span class="badge badge-success">Completed</span></td>

</tr>

<tr>

<td>Budi artono</td>

<td><span class="badge badge-warning">Processing</span></td>

</tr>

<tr>

<td>Reka Agustiana </td>

<td><span class="badge badge-danger">Cancelled</span></td>

</tr>

<tr>

<td>Wahyudi sudirman. Spd</td>

<td><span class="badge badge-success">Completed</span></td>

</tr>

</tbody>

</table>

</div>

// Initialize revenue chart

const revenueCtx = document.getElementById('revenueChart').getContext('2d');

const revenueChart = new Chart(revenueCtx, {

type: 'line',

data: {

labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

datasets: [{

label: 'Revenue',

data: [5000, 7500, 6500, 9000, 12000, 15000, 14000, 16000, 12500, 17000, 20000, 22000],

backgroundColor: 'rgba(78, 115, 223, 0.05)',

borderColor: 'rgba(78, 115, 223, 1)',

borderWidth: 2,

pointBackgroundColor: 'rgba(78, 115, 223, 1)',

pointBorderColor: '#fff',

pointHoverRadius: 5,

pointHoverBackgroundColor: 'rgba(78, 115, 223, 1)',

pointHoverBorderColor: '#fff',

pointHitRadius: 10,

pointBorderWidth: 2,

tension: 0.3

}]

},

options: {

maintainAspectRatio: false,

plugins: {

legend: {

display: false

}

},

scales: {

y: {

beginAtZero: true,

grid: {

color: 'rgba(0, 0, 0, 0.05)'

}

},

x: {

grid: {

display: false

}

});

// Toggle sidebar on mobile

document.querySelector('.sidebar-toggle').addEventListener('click', function() {

document.querySelector('.sidebar').classList.toggle('active');

document.querySelector('.main-content').classList.toggle('active');

});

// Dropdown functionality

document.querySelectorAll('.dropdown').forEach(function(dropdown) {

dropdown.addEventListener('click', function(e) {

e.stopPropagation();

this.querySelector('.dropdown-content').classList.toggle('show');

});

// Close dropdowns when clicking outside

window.addEventListener('click', function() {

document.querySelectorAll('.dropdown-content').forEach(function(dropdown) {

dropdown.classList.remove('show');

});

</script>

</body>

</html>

CSS और चार्ट के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

अनुशंसित

मेरी लड़की के लिए फूल

प्रोग्रेस बार के साथ पेज का HTML लोड हो रहा है

सीएसएस ग्लासमोर्फिज्म प्लेयर और ऐप आइकन यूआई

HTML

CSS

JS

अनुशंसित

मेरी लड़की के लिए फूल

प्रोग्रेस बार के साथ पेज का HTML लोड हो रहा है

सीएसएस ग्लासमोर्फिज्म प्लेयर और ऐप आइकन यूआई

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS