Project Gallery
Explore Smart Admin Panel in detail
1
/1
100%
Project Overview
Smart Admin Panel
Project Description
A fully responsive admin panel developed with HTML, CSS, and JavaScript, focused on usability, performance, and a modern user experience.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Mobile Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script> <style>
</style>
</head>
<body>
<div class="sidebar" id="sidebar">
<div class="p-3">
<h4 class="text-primary"><i class="fas fa-tachometer-alt"></i> Dashboard</h4>
<nav class="nav flex-column">
<a class="nav-link" href="#" onclick="toggleSubmenu('home-submenu')"><i class="fas fa-home"></i> Home <i class="fas fa-chevron-down float-end"></i></a>
<div class="submenu" id="home-submenu">
<a class="nav-link" href="#">Overview</a>
<a class="nav-link" href="#">Reports</a>
</div>
<a class="nav-link" href="#" onclick="toggleSubmenu('analytics-submenu')"><i class="fas fa-chart-line"></i> Analytics <i class="fas fa-chevron-down float-end"></i></a>
<div class="submenu" id="analytics-submenu">
<a class="nav-link" href="#">Charts</a>
<a class="nav-link" href="#">Metrics</a>
</div>
<a class="nav-link" href="#"><i class="fas fa-users"></i> Users</a>
<a class="nav-link" href="#"><i class="fas fa-cog"></i> Settings</a>
</nav>
</div>
</div>
<div class="main-content" id="main-content">
<div class="header d-flex justify-content-between align-items-center">
<button class="btn btn-outline-secondary d-md-none" id="toggle-sidebar"><i class="fas fa-bars"></i></button>
<h5 class="mb-0">Enhanced Dashboard</h5>
<div class="d-flex align-items-center">
<button class="btn btn-outline-secondary me-2" id="dark-mode-toggle"><i class="fas fa-moon"></i></button>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
<i class="fas fa-user"></i> User
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#addItemModal">Add Item</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid p-4">
<div class="alert alert-info alert-dismissible fade show" role="alert">
<i class="fas fa-info-circle"></i> Welcome! Data updates every 5 seconds.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<div class="row">
<div class="col-md-3 mb-4">
<div class="card fade-in">
<div class="card-body text-center">
<i class="fas fa-eye fa-2x text-primary mb-2"></i>
<h5>Views</h5>
<p class="display-4" id="views-count">1,234</p>
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card fade-in">
<div class="card-body text-center">
<i class="fas fa-shopping-cart fa-2x text-success mb-2"></i>
<h5>Sales</h5>
<p class="display-4" id="sales-count">$5,678</p>
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card fade-in">
<div class="card-body text-center">
<i class="fas fa-users fa-2x text-warning mb-2"></i>
<h5>Users</h5>
<p class="display-4" id="users-count">890</p>
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card fade-in">
<div class="card-body text-center">
<i class="fas fa-tasks fa-2x text-danger mb-2"></i>
<h5>Tasks</h5>
<div class="progress mt-2">
<div class="progress-bar bg-danger" role="progressbar" style="width: 75%"></div>
</div>
<p class="mt-2">75% Complete</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-chart-line"></i> Sales Trend</h5>
<div class="chart-container">
<canvas id="lineChart"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-chart-bar"></i> Monthly Revenue</h5>
<div class="chart-container">
<canvas id="barChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-chart-pie"></i> User Distribution</h5>
<div class="chart-container">
<canvas id="pieChart"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-table"></i> Recent Data</h5>
<table id="dataTable" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr><td>Item 1</td><td>100</td><td>Active</td></tr>
<tr><td>Item 2</td><td>200</td><td>Inactive</td></tr>
<tr><td>Item 3</td><td>300</td><td>Active</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal for Adding Item -->
<div class="modal fade" id="addItemModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Item</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="itemName" class="form-label">Name</label>
<input type="text" class="form-control" id="itemName">
</div>
<div class="mb-3">
<label for="itemValue" class="form-label">Value</label>
<input type="number" class="form-control" id="itemValue">
</div>
<div class="mb-3">
<label for="itemStatus" class="form-label">Status</label>
<select class="form-select" id="itemStatus">
<option>Active</option>
<option>Inactive</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="addItem()">Add Item</button>
</div>
</div>
</div>
</div>
</body>
</html>CSS
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
transition: background 0.3s ease;
min-height: 100vh;
}
body.dark-mode {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: #ecf0f1;
}
.sidebar {
width: 280px;
height: 100vh;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
body.dark-mode .sidebar {
background: #34495e;
color: #ecf0f1;
}
.sidebar.collapsed {
transform: translateX(-280px);
}
.sidebar .nav-link {
color: #495057;
padding: 15px 20px;
transition: all 0.2s ease;
}
body.dark-mode .sidebar .nav-link {
color: #bdc3c7;
}
.sidebar .nav-link:hover {
background: #e9ecef;
color: #000;
}
body.dark-mode .sidebar .nav-link:hover {
background: #2c3e50;
color: #fff;
}
.submenu {
display: none;
padding-left: 20px;
}
.submenu.show {
display: block;
}
.main-content {
margin-left: 280px;
transition: margin-left 0.3s ease;
}
.main-content.expanded {
margin-left: 0;
}
.header {
background: #fff;
padding: 15px 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: background 0.3s ease;
}
body.dark-mode .header {
background: #34495e;
color: #ecf0f1;
}
.card {
border: none;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
body.dark-mode .card {
background: #2c3e50;
color: #ecf0f1;
}
.chart-container {
position: relative;
height: 300px;
}
.progress {
height: 10px;
border-radius: 5px;
}
.alert {
border-radius: 10px;
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-280px);
}
.main-content {
margin-left: 0;
}
.sidebar.show {
transform: translateX(0);
}
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}JavaScript
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Sidebar toggle
const toggleBtn = document.getElementById('toggle-sidebar');
const sidebar = document.getElementById('sidebar');
toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('show');
});
// Submenu toggle
function toggleSubmenu(id) {
const submenu = document.getElementById(id);
submenu.classList.toggle('show');
}
// Dark mode toggle
const darkModeToggle = document.getElementById('dark-mode-toggle');
darkModeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
const icon = darkModeToggle.querySelector('i');
icon.classList.toggle('fa-moon');
icon.classList.toggle('fa-sun');
});
// Charts
const lineCtx = document.getElementById('lineChart').getContext('2d');
const lineChart = new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3],
borderColor: '#3498db',
backgroundColor: 'rgba(52, 152, 219, 0.2)',
tension: 0.1
}]
},
options: { responsive: true, maintainAspectRatio: false }
});
const barCtx = document.getElementById('barChart').getContext('2d');
const barChart = new Chart(barCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Revenue',
data: [65, 59, 80, 81, 56, 55],
backgroundColor: '#e74c3c'
}]
},
options: { responsive: true, maintainAspectRatio: false }
});
const pieCtx = document.getElementById('pieChart').getContext('2d');
const pieChart = new Chart(pieCtx, {
type: 'pie',
data: {
labels: ['Desktop', 'Mobile', 'Tablet'],
datasets: [{
data: [300, 50, 100],
backgroundColor: ['#f39c12', '#9b59b6', '#1abc9c']
}]
},
options: { responsive: true, maintainAspectRatio: false }
});
// DataTable
$(document).ready(function() {
$('#dataTable').DataTable();
});
// Simulate real-time updates
setInterval(() => {
document.getElementById('views-count').textContent = (Math.floor(Math.random() * 2000) + 1000).toLocaleString();
document.getElementById('sales-count').textContent = '$' + (Math.floor(Math.random() * 10000) + 5000).toLocaleString();
document.getElementById('users-count').textContent = Math.floor(Math.random() * 1000) + 800;
}, 5000);
// Add item function
function addItem() {
const name = document.getElementById('itemName').value;
const value = document.getElementById('itemValue').value;
const status = document.getElementById('itemStatus').value;
if (name && value) {
const table = $('#dataTable').DataTable();
table.row.add([name, value, status]).draw();
$('#addItemModal').modal('hide');
document.getElementById('itemName').value = '';
document.getElementById('itemValue').value = '';
}
}
</script>