Admin Dashboard Template HTML CSS

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --success: #4cc9f0;
            --info: #4895ef;
            --warning: #f72585;
            --danger: #e63946;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --sidebar-width: 250px;
            --header-height: 60px;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background-color: #f5f7fb;
            color: var(--dark);
        }

/* Header */
        .header {
            position: fixed;
            top: 0;
            left: var(--sidebar-width);
            right: 0;
            height: var(--header-height);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }

.header-search {
            display: flex;
            align-items: center;
        }

.header-search input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 250px;
        }

.header-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }

.notification-icon, .profile {
            cursor: pointer;
        }

.profile img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }

/* Sidebar */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--sidebar-width);
            height: 100vh;
            background-color: var(--dark);
            color: white;
            padding-top: 20px;
            transition: all 0.3s ease;
            z-index: 200;
        }

.sidebar-header {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

.sidebar-header h3 {
            font-size: 24px;
            font-weight: 600;
        }

.sidebar-menu {
            padding: 0 15px;
        }

.menu-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            border-radius: 5px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.menu-item:hover, .menu-item.active {
            background-color: var(--primary);
        }

.menu-item i {
            margin-right: 10px;
            font-size: 18px;
            width: 24px;
            text-align: center;
        }

/* Main Content */
        .main-content {
            margin-left: var(--sidebar-width);
            margin-top: var(--header-height);
            padding: 20px;
        }

.dashboard-title {
            margin-bottom: 20px;
        }

.stats-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

.stat-card {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

.stat-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

.stat-card-header h4 {
            color: var(--gray);
            font-size: 16px;
            font-weight: 500;
        }

.stat-card-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

.stat-card-value {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 5px;
        }

.stat-card-change {
            font-size: 14px;
            color: var(--success);
            display: flex;
            align-items: center;
        }

.stat-card-change i {
            margin-right: 5px;
        }

.chart-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

.chart-card {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

.chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

.chart-header h4 {
            font-size: 18px;
            font-weight: 600;
        }

.date-selector {
            display: flex;
            align-items: center;
            gap: 10px;
        }

.date-selector select {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

.recent-activity {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

.activity-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

.activity-header h4 {
            font-size: 18px;
            font-weight: 600;
        }

.view-all {
            color: var(--primary);
            cursor: pointer;
        }

.activity-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

.activity-item {
            display: flex;
            align-items: center;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

.activity-item-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 15px;
        }

.activity-item-info h5 {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
        }

.activity-item-info p {
            font-size: 14px;
            color: var(--gray);
        }

/* Responsive Design */
        @media (max-width: 991px) {
            .stats-container {
                grid-template-columns: repeat(2, 1fr);
            }
            .chart-container {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 768px) {
            :root {
                --sidebar-width: 70px;
            }
            .sidebar-header h3, .menu-item span {
                display: none;
            }
            .menu-item {
                justify-content: center;
            }
            .menu-item i {
                margin-right: 0;
            }
            .header {
                left: var(--sidebar-width);
            }
        }

@media (max-width: 576px) {
            .stats-container {
                grid-template-columns: 1fr;
            }
            .header-search input {
                width: 150px;
            }
        }

/* Toggle button for sidebar */
        .toggle-sidebar {
            display: none;
            position: fixed;
            top: 15px;
            left: 15px;
            z-index: 300;
            cursor: pointer;
            background-color: var(--primary);
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

@media (max-width: 576px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .header {
                left: 0;
            }
            .main-content {
                margin-left: 0;
            }
            .toggle-sidebar {
                display: flex;
            }
            .sidebar.open {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    
    <div class="toggle-sidebar" id="toggleSidebar">
        <i class="fas fa-bars"></i>
    </div>

<div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>Admin Panel</h3>
        </div>
        <div class="sidebar-menu">
            <div class="menu-item active">
                <i class="fas fa-tachometer-alt"></i>
                <span>Dashboard</span>
            </div>
            <div class="menu-item">
                <i class="fas fa-users"></i>
                <span>Users</span>
            </div>
            <div class="menu-item">
                <i class="fas fa-file-alt"></i>
                <span>Content</span>
            </div>
            <div class="menu-item">
                <i class="fas fa-chart-line"></i>
                <span>Analytics</span>
            </div>
            <div class="menu-item">
                <i class="fas fa-shopping-cart"></i>
                <span>Sales</span>
            </div>
            <div class="menu-item">
                <i class="fas fa-cog"></i>
                <span>Settings</span>
            </div>
        </div>
    </div>

<div class="header">
        <div class="header-search">
            <input type="text" placeholder="Search...">
        </div>
        <div class="header-right">
            <div class="notification-icon">
                <i class="fas fa-bell"></i>
            </div>
            <div class="profile">
                <img src="/api/placeholder/100/100" alt="Profile">
            </div>
        </div>
    </div>

<div class="main-content">
        <div class="dashboard-title">
            <h2>Dashboard Overview</h2>
        </div>

<div class="stats-container">
            <div class="stat-card">
                <div class="stat-card-header">
                    <h4>Total Users</h4>
                    <div class="stat-card-icon" style="background-color: var(--primary);">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
                <div class="stat-card-value">4,385</div>
                <div class="stat-card-change">
                    <i class="fas fa-arrow-up"></i>
                    +12.5% from last month
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-card-header">
                    <h4>Revenue</h4>
                    <div class="stat-card-icon" style="background-color: var(--success);">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                </div>
                <div class="stat-card-value">$43,284</div>
                <div class="stat-card-change">
                    <i class="fas fa-arrow-up"></i>
                    +8.3% from last month
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-card-header">
                    <h4>Orders</h4>
                    <div class="stat-card-icon" style="background-color: var(--info);">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                </div>
                <div class="stat-card-value">1,247</div>
                <div class="stat-card-change">
                    <i class="fas fa-arrow-up"></i>
                    +5.7% from last month
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-card-header">
                    <h4>Conversion Rate</h4>
                    <div class="stat-card-icon" style="background-color: var(--warning);">
                        <i class="fas fa-chart-pie"></i>
                    </div>
                </div>
                <div class="stat-card-value">3.2%</div>
                <div class="stat-card-change">
                    <i class="fas fa-arrow-up"></i>
                    +0.8% from last month
                </div>
            </div>
        </div>

<div class="chart-container">
            <div class="chart-card">
                <div class="chart-header">
                    <h4>Sales Overview</h4>
                    <div class="date-selector">
                        <select id="salesPeriod">
                            <option value="week">This Week</option>
                            <option value="month" selected>This Month</option>
                            <option value="year">This Year</option>
                        </select>
                    </div>
                </div>
                <canvas id="salesChart"></canvas>
            </div>
            <div class="chart-card">
                <div class="chart-header">
                    <h4>Traffic Sources</h4>
                </div>
                <canvas id="trafficChart"></canvas>
            </div>
        </div>

<div class="recent-activity">
            <div class="activity-header">
                <h4>Recent Activity</h4>
                <div class="view-all">View All</div>
            </div>
            <div class="activity-list">
                <div class="activity-item">
                    <div class="activity-item-icon" style="background-color: var(--primary);">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <div class="activity-item-info">
                        <h5>New user registered</h5>
                        <p>John Doe created an account</p>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-item-icon" style="background-color: var(--success);">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <div class="activity-item-info">
                        <h5>New sale</h5>
                        <p>Jane Smith purchased Premium Plan</p>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-item-icon" style="background-color: var(--info);">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div class="activity-item-info">
                        <h5>New content published</h5>
                        <p>Admin published new article</p>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-item-icon" style="background-color: var(--warning);">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="activity-item-info">
                        <h5>System alert</h5>
                        <p>Server load at 82% capacity</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

// Menu Item Click
        const menuItems = document.querySelectorAll('.menu-item');
        menuItems.forEach(item => {
            item.addEventListener('click', function() {
                menuItems.forEach(i => i.classList.remove('active'));
                this.classList.add('active');
            });
        });

// Sales Chart
        const salesCtx = document.getElementById('salesChart').getContext('2d');
        const salesChart = new Chart(salesCtx, {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                datasets: [{
                    label: 'Sales',
                    data: [12, 19, 15, 17, 21, 18, 25, 31, 28, 33, 29, 35],
                    backgroundColor: 'rgba(67, 97, 238, 0.2)',
                    borderColor: 'rgba(67, 97, 238, 1)',
                    borderWidth: 2,
                    tension: 0.3,
                    pointBackgroundColor: 'rgba(67, 97, 238, 1)',
                    pointBorderColor: 'rgba(67, 97, 238, 1)',
                    pointRadius: 3
                }, {
                    label: 'Revenue',
                    data: [32, 39, 35, 41, 46, 38, 51, 58, 52, 61, 55, 68],
                    backgroundColor: 'rgba(76, 201, 240, 0.2)',
                    borderColor: 'rgba(76, 201, 240, 1)',
                    borderWidth: 2,
                    tension: 0.3,
                    pointBackgroundColor: 'rgba(76, 201, 240, 1)',
                    pointBorderColor: 'rgba(76, 201, 240, 1)',
                    pointRadius: 3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                        align: 'end'
                    }
                }
            }
        });

// Traffic Chart
        const trafficCtx = document.getElementById('trafficChart').getContext('2d');
        const trafficChart = new Chart(trafficCtx, {
            type: 'doughnut',
            data: {
                labels: ['Direct', 'Social', 'Organic', 'Referral'],
                datasets: [{
                    data: [35, 25, 30, 10],
                    backgroundColor: [
                        'rgba(67, 97, 238, 1)',
                        'rgba(76, 201, 240, 1)',
                        'rgba(247, 37, 133, 1)',
                        'rgba(114, 9, 183, 1)'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    }
                },
                cutout: '70%'
            }
        });

// Sales Period Selector
        document.getElementById('salesPeriod').addEventListener('change', function() {
            let data;
            switch(this.value) {
                case 'week':
                    data = [5, 8, 12, 7, 10, 9, 11];
                    salesChart.data.labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
                    break;
                case 'month':
                    data = [12, 19, 15, 17, 21, 18, 25, 31, 28, 33, 29, 35];
                    salesChart.data.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                    break;
                case 'year':
                    data = [210, 240, 280, 320, 350];
                    salesChart.data.labels = ['2019', '2020', '2021', '2022', '2023'];
                    break;
            }
            
            salesChart.data.datasets[0].data = data;
            // Generate second dataset with higher values
            salesChart.data.datasets[1].data = data.map(value => value * 2);
            salesChart.update();
        });

// Set canvas heights for better visualization
        document.getElementById('salesChart').height = 300;
        document.getElementById('trafficChart').height = 300;
    </script>
</body>
</html>

Admin Dashboard Template HTML CSS

Recommended

CSS Gradient Button

Big bang html

HTML Login Form (French)

HTML

CSS

JS

Recommended

CSS Gradient Button

Big bang html

HTML Login Form (French)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS