Webleb - Extraits de Code - Modèle de tableau de bord d'administration HTML avec CSS et graphiques

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>

Modèle de tableau de bord d'administration HTML avec CSS et graphiques

Recommandé

Un code par Liamgilles76

Un code de Metehan

Un code de Metehan

HTML

CSS

JS

Recommandé

Un code par Liamgilles76

Un code de Metehan

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS