Bootstrap
Card
Dashboard
Quota
Html
Widget Bootstrap de compteur de quota utilisateurs avec design moderne et indicateurs visuels.
<!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>Quota Utilisateurs | AngularForAll</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
:root {
--primary-color: #6a11cb;
--gradient-primary: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
--soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
--text-color-dark: #2c3e50;
--text-color-muted: #7f8c8d;
}
body {
background-color: #f4f6f9;
font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}
.quota-card {
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--soft-shadow);
transition: all 0.3s ease;
background: white;
}
.quota-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.card-header-custom {
background: var(--gradient-primary);
color: white;
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.card-header-custom h5 {
margin: 0;
font-weight: 600;
display: flex;
align-items: center;
}
.card-header-custom i {
margin-right: 10px;
opacity: 0.8;
}
.circular-chart-container {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
}
.circular-chart {
width: 100%;
height: 100%;
border-radius: 50%;
background: conic-gradient(var(--primary-color) 0% 20%, #e9ecef 20% 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}
.chart-center {
width: 160px;
height: 160px;
background: white;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.chart-center .quota-number {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1;
}
.chart-center .quota-label {
font-size: 0.9rem;
color: var(--text-color-muted);
margin-top: 5px;
}
.quota-status {
display: flex;
justify-content: space-between;
padding: 15px 20px;
border-top: 1px solid #f1f3f5;
}
.quota-warning {
background-color: #f8f9fa;
border-top: 3px solid #2575fc;
padding: 15px;
margin-top: 15px;
border-radius: 0 0 20px 20px;
}
.quota-warning small {
color: var(--text-color-muted);
display: flex;
align-items: center;
}
.quota-warning i {
color: #2575fc;
margin-right: 10px;
}
@media (max-width: 768px) {
.circular-chart-container {
width: 150px;
height: 150px;
}
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="quota-card" aria-labelledby="quota-title">
<div class="card-header-custom">
<h5 id="quota-title">
<i class="fas fa-users"></i>
Quota Utilisateurs
</h5>
<span class="badge badge-light">Entreprise</span>
</div>
<div class="text-center py-4">
<div class="circular-chart-container">
<div
class="circular-chart"
role="progressbar"
aria-valuenow="2"
aria-valuemin="0"
aria-valuemax="10"
aria-label="Utilisateurs : 2 sur 10"
>
<div class="chart-center">
<div class="quota-number">2/10</div>
<div class="quota-label">Utilisateurs</div>
</div>
</div>
</div>
<div class="quota-status">
<div class="text-left">
<small class="text-muted">Status</small>
</div>
<div class="text-right text-success font-weight-bold">Quota non atteint</div>
</div>
</div>
<div class="quota-warning">
<small>
<i class="fas fa-exclamation-triangle"></i>
Vous approchez du quota maximum d'utilisateurs autorisés par votre pack.
</small>
</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.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>