Bootstrap
Bootstrap5
Dashboard
Admin
Widgets
Html
Template Bootstrap 5 de tableau de bord administrateur avec différents widgets et graphiques.
<!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>Dashbord Admin Bootstrap 5 07 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: #f0f2f8;
overflow-x: hidden;
}
/* Sidebar Styles */
.sidebar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 280px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 2px 0 20px rgba(0,0,0,0.1);
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-header h3 {
font-weight: 700;
font-size: 1.5rem;
margin: 0;
}
.sidebar-header p {
font-size: 0.8rem;
opacity: 0.8;
margin: 0;
}
.sidebar-menu {
padding: 1.5rem 0;
}
.sidebar-menu .nav-link {
color: rgba(255,255,255,0.8);
padding: 0.75rem 1.5rem;
margin: 0.25rem 0;
transition: all 0.3s;
border-radius: 0;
}
.sidebar-menu .nav-link:hover {
color: white;
background: rgba(255,255,255,0.1);
padding-left: 2rem;
}
.sidebar-menu .nav-link.active {
color: white;
background: rgba(255,255,255,0.15);
border-left: 4px solid white;
}
.sidebar-menu .nav-link i {
width: 24px;
margin-right: 12px;
}
/* Main Content */
.main-content {
margin-left: 280px;
transition: all 0.3s ease;
}
/* Top Navbar */
.top-navbar {
background: white;
padding: 1rem 2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 999;
}
/* Stats Cards */
.stat-card {
background: white;
border-radius: 20px;
padding: 1.5rem;
transition: all 0.3s ease;
border: none;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
/* Chart Cards */
.chart-card {
background: white;
border-radius: 20px;
padding: 1.5rem;
border: none;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
height: 100%;
}
/* Activity List */
.activity-item {
padding: 1rem 0;
border-bottom: 1px solid #eef2f6;
transition: all 0.3s;
}
.activity-item:hover {
background: #f8f9fa;
padding-left: 0.5rem;
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
/* Table Styles */
.table-custom {
border-radius: 20px;
overflow: hidden;
}
.table-custom thead th {
background: #f8f9fa;
border: none;
padding: 1rem;
font-weight: 600;
}
.table-custom tbody td {
padding: 1rem;
vertical-align: middle;
}
/* Badge Styles */
.badge-status {
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 500;
}
/* Responsive */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.active {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.top-navbar {
padding: 1rem;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeInUp {
animation: fadeInUp 0.6s ease forwards;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<h3>
<i class="bi bi-robot"></i> AI Admin
</h3>
<p>Intelligent Dashboard</p>
</div>
<div class="sidebar-menu">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="bi bi-speedometer2"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-graph-up"></i> Analytics
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-chat-dots"></i> AI Chat
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-database"></i> Models
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-people"></i> Users
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-gear"></i> Settings
</a>
</li>
</ul>
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<!-- Top Navbar -->
<div class="top-navbar">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<button class="btn btn-link d-md-none" id="sidebarToggle">
<i class="bi bi-list fs-3"></i>
</button>
<h5 class="mb-0 ms-2">Bienvenue, Admin</h5>
</div>
<div class="d-flex align-items-center gap-3">
<div class="dropdown">
<button class="btn btn-link position-relative" data-bs-toggle="dropdown">
<i class="bi bi-bell fs-5"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
3
</span>
</button>
<div class="dropdown-menu dropdown-menu-end">
<h6 class="dropdown-header">Notifications</h6>
<a class="dropdown-item" href="#">Nouveau modèle IA disponible</a>
<a class="dropdown-item" href="#">Analyse terminée</a>
<a class="dropdown-item" href="#">Mise à jour système</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-link" data-bs-toggle="dropdown">
<img src="https://ui-avatars.com/api/?background=667eea&color=fff&name=Admin"
class="rounded-circle" width="40" height="40" alt="Avatar">
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
<i class="bi bi-person"></i> Profile
</a>
<a class="dropdown-item" href="#">
<i class="bi bi-shield"></i> Privacy
</a>
<hr class="dropdown-divider">
<a class="dropdown-item" href="#">
<i class="bi bi-box-arrow-right"></i> Logout
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container-fluid px-4 py-4">
<!-- Stats Cards -->
<div class="row g-4 mb-4">
<div class="col-md-6 col-xl-3">
<div class="stat-card animate-fadeInUp">
<div class="d-flex justify-content-between align-items-start">
<div>
<p class="text-muted mb-1">Total Users</p>
<h2 class="fw-bold mb-0">12,847</h2>
<small class="text-success">
<i class="bi bi-arrow-up"></i> +12.5%
</small>
</div>
<div class="stat-icon bg-primary bg-opacity-10 text-primary">
<i class="bi bi-people"></i>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="stat-card animate-fadeInUp" style="animation-delay: 0.1s;">
<div class="d-flex justify-content-between align-items-start">
<div>
<p class="text-muted mb-1">AI Models</p>
<h2 class="fw-bold mb-0">24</h2>
<small class="text-success">
<i class="bi bi-arrow-up"></i> +3 nouveaux
</small>
</div>
<div class="stat-icon bg-success bg-opacity-10 text-success">
<i class="bi bi-cpu"></i>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="stat-card animate-fadeInUp" style="animation-delay: 0.2s;">
<div class="d-flex justify-content-between align-items-start">
<div>
<p class="text-muted mb-1">API Calls</p>
<h2 class="fw-bold mb-0">2.4M</h2>
<small class="text-success">
<i class="bi bi-arrow-up"></i> +23.1%
</small>
</div>
<div class="stat-icon bg-info bg-opacity-10 text-info">
<i class="bi bi-cloud-upload"></i>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="stat-card animate-fadeInUp" style="animation-delay: 0.3s;">
<div class="d-flex justify-content-between align-items-start">
<div>
<p class="text-muted mb-1">Accuracy Rate</p>
<h2 class="fw-bold mb-0">96.8%</h2>
<small class="text-success">
<i class="bi bi-arrow-up"></i> +4.2%
</small>
</div>
<div class="stat-icon bg-warning bg-opacity-10 text-warning">
<i class="bi bi-graph-up"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Charts Row -->
<div class="row g-4 mb-4">
<div class="col-lg-8">
<div class="chart-card">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="fw-bold mb-0">AI Model Performance</h5>
<select class="form-select w-auto">
<option>Last 7 days</option>
<option>Last 30 days</option>
<option>Last 90 days</option>
</select>
</div>
<canvas id="performanceChart" height="300"></canvas>
</div>
</div>
<div class="col-lg-4">
<div class="chart-card">
<h5 class="fw-bold mb-3">Model Distribution</h5>
<canvas id="distributionChart" height="300"></canvas>
<div class="mt-3">
<div class="d-flex justify-content-between mb-2">
<span><i class="bi bi-circle-fill text-primary"></i> NLP Models</span>
<span class="fw-bold">45%</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span><i class="bi bi-circle-fill text-success"></i> Vision Models</span>
<span class="fw-bold">30%</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span><i class="bi bi-circle-fill text-warning"></i> Speech Models</span>
<span class="fw-bold">25%</span>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Activity & Top Models -->
<div class="row g-4 mb-4">
<div class="col-lg-6">
<div class="chart-card">
<h5 class="fw-bold mb-3">Recent AI Activity</h5>
<div class="activity-list">
<div class="activity-item d-flex align-items-center">
<div class="activity-icon bg-primary bg-opacity-10 text-primary me-3">
<i class="bi bi-robot"></i>
</div>
<div class="flex-grow-1">
<p class="mb-0 fw-semibold">New model trained: GPT-4 Fine-tune</p>
<small class="text-muted">2 minutes ago</small>
</div>
<i class="bi bi-three-dots text-muted"></i>
</div>
<div class="activity-item d-flex align-items-center">
<div class="activity-icon bg-success bg-opacity-10 text-success me-3">
<i class="bi bi-bar-chart"></i>
</div>
<div class="flex-grow-1">
<p class="mb-0 fw-semibold">Analytics report generated</p>
<small class="text-muted">1 hour ago</small>
</div>
<i class="bi bi-three-dots text-muted"></i>
</div>
<div class="activity-item d-flex align-items-center">
<div class="activity-icon bg-warning bg-opacity-10 text-warning me-3">
<i class="bi bi-database"></i>
</div>
<div class="flex-grow-1">
<p class="mb-0 fw-semibold">Dataset updated: Training data v3.2</p>
<small class="text-muted">3 hours ago</small>
</div>
<i class="bi bi-three-dots text-muted"></i>
</div>
<div class="activity-item d-flex align-items-center">
<div class="activity-icon bg-info bg-opacity-10 text-info me-3">
<i class="bi bi-cloud-check"></i>
</div>
<div class="flex-grow-1">
<p class="mb-0 fw-semibold">API deployment successful</p>
<small class="text-muted">5 hours ago</small>
</div>
<i class="bi bi-three-dots text-muted"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="chart-card">
<h5 class="fw-bold mb-3">Top Performing Models</h5>
<div class="table-responsive">
<table class="table table-custom">
<thead>
<tr>
<th>Model Name</th>
<th>Accuracy</th>
<th>Requests</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i class="bi bi-robot text-primary"></i> GPT-4 Turbo
</td>
<td>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" style="width: 98%"></div>
</div>
<small>98.2%</small>
</td>
<td>1.2M</td>
<td><span class="badge bg-success">Active</span></td>
</tr>
<tr>
<td>
<i class="bi bi-cpu text-primary"></i> Claude 3
</td>
<td>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" style="width: 96%"></div>
</div>
<small>96.5%</small>
</td>
<td>892K</td>
<td><span class="badge bg-success">Active</span></td>
</tr>
<tr>
<td>
<i class="bi bi-gem text-primary"></i> Gemini Pro
</td>
<td>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-warning" style="width: 94%"></div>
</div>
<small>94.8%</small>
</td>
<td>756K</td>
<td><span class="badge bg-warning">Updating</span></td>
</tr>
<tr>
<td>
<i class="bi bi-stars text-primary"></i> Llama 3
</td>
<td>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-info" style="width: 92%"></div>
</div>
<small>92.3%</small>
</td>
<td>634K</td>
<td><span class="badge bg-success">Active</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- System Status -->
<div class="row">
<div class="col-12">
<div class="chart-card">
<h5 class="fw-bold mb-3">System Health Status</h5>
<div class="row g-3">
<div class="col-md-3 col-6">
<div class="text-center p-3 bg-light rounded">
<i class="bi bi-hdd-stack fs-2 text-primary"></i>
<p class="mb-0 mt-2">Storage</p>
<h6 class="fw-bold">342GB / 512GB</h6>
<div class="progress" style="height: 4px;">
<div class="progress-bar bg-primary" style="width: 67%"></div>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="text-center p-3 bg-light rounded">
<i class="bi bi-cpu fs-2 text-success"></i>
<p class="mb-0 mt-2">CPU Usage</p>
<h6 class="fw-bold">23%</h6>
<div class="progress" style="height: 4px;">
<div class="progress-bar bg-success" style="width: 23%"></div>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="text-center p-3 bg-light rounded">
<i class="bi bi-memory fs-2 text-warning"></i>
<p class="mb-0 mt-2">RAM Usage</p>
<h6 class="fw-bold">5.2GB / 16GB</h6>
<div class="progress" style="height: 4px;">
<div class="progress-bar bg-warning" style="width: 32%"></div>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="text-center p-3 bg-light rounded">
<i class="bi bi-cloud-upload fs-2 text-info"></i>
<p class="mb-0 mt-2">API Latency</p>
<h6 class="fw-bold">142ms</h6>
<div class="progress" style="height: 4px;">
<div class="progress-bar bg-info" style="width: 28%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Sidebar Toggle for Mobile
document.getElementById('sidebarToggle')?.addEventListener('click', function() {
document.getElementById('sidebar').classList.toggle('active');
});
// Performance Chart
const ctx1 = document.getElementById('performanceChart').getContext('2d');
new Chart(ctx1, {
type: 'line',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'GPT-4',
data: [65, 72, 78, 82, 88, 85, 92],
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
tension: 0.4,
fill: true
}, {
label: 'Claude 3',
data: [60, 68, 75, 79, 84, 82, 89],
borderColor: '#764ba2',
backgroundColor: 'rgba(118, 75, 162, 0.1)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Distribution Chart
const ctx2 = document.getElementById('distributionChart').getContext('2d');
new Chart(ctx2, {
type: 'doughnut',
data: {
labels: ['NLP Models', 'Vision Models', 'Speech Models'],
datasets: [{
data: [45, 30, 25],
backgroundColor: ['#667eea', '#28a745', '#ffc107'],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Auto-refresh data simulation
setInterval(() => {
console.log('Dashboard auto-refresh');
}, 30000000);
</script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur