Bootstrap
Dashboard
Card
Metriques
Html
Template Bootstrap de dashboard avec cartes de métriques, graphiques et tableaux de bord.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard Cards | AngularForAll</title>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
<!-- IcoFont -->
<link href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
:root {
--primary-color: #6a11cb;
--secondary-color: #2575fc;
--text-dark: #2c3e50;
--text-muted: #7f8c8d;
--bg-light: #f4f6f9;
}
body {
background-color: var(--bg-light);
font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}
.dashboard-card {
border: none;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
margin-bottom: 25px;
transition: all 0.3s ease;
}
.dashboard-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.card-header-custom {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
color: white;
padding: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.card-header-custom h5 {
margin: 0;
display: flex;
align-items: center;
font-weight: 600;
}
.card-header-custom i {
margin-right: 10px;
opacity: 0.8;
}
.table-hover-custom {
margin-bottom: 0;
}
.table-hover-custom tbody tr:hover {
background-color: rgba(37, 117, 252, 0.05);
cursor: pointer;
}
.status-badge {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
border-radius: 3px;
}
.status-pending {
background-color: #ffc107;
color: white;
}
.status-completed {
background-color: #28a745;
color: white;
}
.status-active {
background-color: #17a2b8;
color: white;
}
.icon-circle {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(37, 117, 252, 0.1);
color: var(--secondary-color);
}
@media (max-width: 768px) {
.table-responsive-stack tr {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
border: 1px solid #f1f3f5;
}
.table-responsive-stack td {
display: flex;
justify-content: space-between;
text-align: right;
border-bottom: 1px solid #f1f3f5;
}
}
</style>
</head>
<body>
<div class="container-fluid py-4">
<div class="row">
<!-- Card 1: Dernières commandes -->
<div class="col-md-6 col-lg-4">
<div class="card dashboard-card">
<div class="card-header-custom">
<h5>
<i class="uil uil-shopping-cart"></i>
Dernières commandes
</h5>
</div>
<div class="table-responsive">
<table class="table table-hover table-hover-custom mb-0">
<thead>
<tr>
<th>N° Cmd</th>
<th>Créé par</th>
<th>Date</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>John Doe</td>
<td>2023-06-15</td>
<td><span class="status-badge status-pending">En cours</span></td>
</tr>
<tr>
<td>#5678</td>
<td>Jane Smith</td>
<td>2023-06-14</td>
<td><span class="status-badge status-completed">Livrée</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Card 2: Derniers tickets -->
<div class="col-md-6 col-lg-4">
<div class="card dashboard-card">
<div class="card-header-custom">
<h5>
<i class="uil uil-ticket"></i>
Derniers tickets
</h5>
</div>
<div class="table-responsive">
<table class="table table-hover table-hover-custom mb-0">
<thead>
<tr>
<th>N° Support</th>
<th>Objet</th>
<th>Créé par</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td>#9012</td>
<td>Problème technique</td>
<td>Alice Johnson</td>
<td><span class="status-badge status-active">Ouvert</span></td>
</tr>
<tr>
<td>#3456</td>
<td>Demande de support</td>
<td>Bob Williams</td>
<td><span class="status-badge status-completed">Résolu</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Card 3: Users List -->
<div class="col-md-6 col-lg-4">
<div class="card dashboard-card">
<div class="card-header-custom">
<h5>
<i class="uil uil-users-alt"></i>
Liste des Utilisateurs
</h5>
</div>
<div class="table-responsive">
<table class="table table-hover table-hover-custom mb-0">
<thead>
<tr>
<th>Nom</th>
<th>Rôle</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td>Emma Wilson</td>
<td>Admin</td>
<td><span class="status-badge status-active">Actif</span></td>
</tr>
<tr>
<td>Michael Brown</td>
<td>Utilisateur</td>
<td><span class="status-badge status-pending">Inactif</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Card 4: Users Activity -->
<div class="col-md-6 col-lg-4">
<div class="card dashboard-card">
<div class="card-header-custom">
<h5>
<i class="uil uil-chart-line"></i>
Activité Utilisateurs
</h5>
</div>
<div class="table-responsive">
<table class="table table-hover table-hover-custom mb-0">
<thead>
<tr>
<th>Utilisateur</th>
<th>Date</th>
<th>Opération</th>
<th>Appareil</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sarah Lee</td>
<td>2023-06-15</td>
<td>Connexion</td>
<td>Mobile</td>
</tr>
<tr>
<td>David Kim</td>
<td>2023-06-14</td>
<td>Mise à jour</td>
<td>Desktop</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Card 5: Modules Disponibles -->
<div class="col-md-6 col-lg-4">
<div class="card dashboard-card">
<div class="card-header-custom">
<h5>
<i class="uil uil-apps"></i>
Modules Disponibles
</h5>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="icon-circle mr-3">
<i class="fas fa-users"></i>
</div>
<span>Gestion Utilisateurs</span>
</div>
<span class="badge badge-primary badge-pill">Actif</span>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="icon-circle mr-3">
<i class="fas fa-chart-bar"></i>
</div>
<span>Reporting</span>
</div>
<span class="badge badge-secondary badge-pill">Inactif</span>
</div>
</div>
</div>
</div>
<!-- Card 6: Configuration App -->
<div class="col-md-6 col-lg-4">
<div class="card dashboard-card">
<div class="card-header-custom">
<h5>
<i class="uil uil-setting"></i>
Configuration App
</h5>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="icon-circle mr-3">
<i class="fas fa-globe"></i>
</div>
<span>Langue</span>
</div>
<span class="text-muted">Français</span>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="icon-circle mr-3">
<i class="fas fa-palette"></i>
</div>
<span>Thème</span>
</div>
<span class="text-muted">Clair</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>