Admin Dashboard Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!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> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <div class="dashboard"> <!-- Sidebar --> <div class="sidebar"> <div class="sidebar-header"> <h3>Admin<span>Pro</span></h3> <i class="fas fa-times close-sidebar"></i> </div> <div class="sidebar-menu"> <ul> <li><a href="#" class="active"><i class="fas fa-home"></i> <span class="menu-text">Dashboard</span></a></li> <li><a href="#"><i class="fas fa-user"></i> <span class="menu-text">Users</span></a></li> <li><a href="#"><i class="fas fa-box"></i> <span class="menu-text">Products</span></a></li> <li><a href="#"><i class="fas fa-shopping-cart"></i> <span class="menu-text">Orders</span></a></li> <li><a href="#"><i class="fas fa-chart-line"></i> <span class="menu-text">Analytics</span></a></li> <li><a href="#"><i class="fas fa-envelope"></i> <span class="menu-text">Messages</span></a></li> <li><a href="#"><i class="fas fa-cog"></i> <span class="menu-text">Settings</span></a></li> <li><a href="#"><i class="fas fa-question-circle"></i> <span class="menu-text">Help</span></a></li> </ul> </div> </div> <div class="sidebar-overlay"></div> <!-- Main Content --> <div class="main-content"> <!-- Header --> <header class="header"> <div class="header-left"> <div class="toggle-sidebar"> <i class="fas fa-bars"></i> </div> <div class="search-box"> <i class="fas fa-search"></i> <input type="text" placeholder="Search..."> </div> </div> <div class="header-right"> <div class="notification"> <i class="fas fa-bell"></i> <span class="notification-count">3</span> </div> <div class="user-profile"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User"> </div> </div> </header> <!-- Content --> <div class="content"> <div class="page-title"> <h2>Dashboard Overview</h2> <ul class="breadcrumb"> <li>Home</li> <li>Dashboard</li> </ul> </div> <!-- Cards Grid --> <div class="cards-grid"> <div class="card"> <div class="card-header"> <div> <div class="card-title">Total Revenue</div> <div class="card-value">$24,780</div> </div> <div class="card-icon primary"> <i class="fas fa-dollar-sign"></i> </div> </div> <div class="card-footer positive"> <i class="fas fa-arrow-up"></i> 12% from last month </div> </div> <div class="card"> <div class="card-header"> <div> <div class="card-title">Total Orders</div> <div class="card-value">1,245</div> </div> <div class="card-icon success"> <i class="fas fa-shopping-cart"></i> </div> </div> <div class="card-footer positive"> <i class="fas fa-arrow-up"></i> 8% from last month </div> </div> <div class="card"> <div class="card-header"> <div> <div class="card-title">Active Users</div> <div class="card-value">845</div> </div> <div class="card-icon warning"> <i class="fas fa-users"></i> </div> </div> <div class="card-footer negative"> <i class="fas fa-arrow-down"></i> 3% from last month </div> </div> <div class="card"> <div class="card-header"> <div> <div class="card-title">Conversion Rate</div> <div class="card-value">3.6%</div> </div> <div class="card-icon danger"> <i class="fas fa-chart-pie"></i> </div> </div> <div class="card-footer positive"> <i class="fas fa-arrow-up"></i> 1.2% from last month </div> </div> </div> <!-- Charts Section --> <div class="charts-section"> <div class="chart-card"> <div class="chart-header"> <h3 class="chart-title">Revenue Overview</h3> <div class="chart-actions"> <select> <option>Last 7 Days</option> <option>Last Month</option> <option>Last Year</option> </select> </div> </div> <div class="chart-container"> <!-- Chart will be rendered here by JavaScript --> <canvas id="revenueChart"></canvas> </div> </div> <div class="chart-card"> <div class="chart-header"> <h3 class="chart-title">Traffic Sources</h3> </div> <div class="chart-container"> <!-- Chart will be rendered here by JavaScript --> <canvas id="trafficChart"></canvas> </div> </div> </div> <!-- Recent Orders Section --> <div class="recent-orders"> <div class="chart-header"> <h3 class="chart-title">Recent Orders</h3> <div class="chart-actions"> <select> <option>Last 7 Days</option> <option>Last Month</option> </select> </div> </div> <div class="table-responsive"> <table> <thead> <tr> <th>Order ID</th> <th>Customer</th> <th>Date</th> <th>Amount</th> <th>Status</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>#ORD-7841</td> <td>John Smith</td> <td>12 Jun 2023</td> <td>$125.00</td> <td><span class="status completed">Completed</span></td> <td> <div class="table-actions"> <button><i class="fas fa-eye"></i></button> <button><i class="fas fa-edit"></i></button> <button><i class="fas fa-trash"></i></button> </div> </td> </tr> <tr> <td>#ORD-7840</td> <td>Sarah Johnson</td> <td>11 Jun 2023</td> <td>$245.50</td> <td><span class="status pending">Pending</span></td> <td> <div class="table-actions"> <button><i class="fas fa-eye"></i></button> <button><i class="fas fa-edit"></i></button> <button><i class="fas fa-trash"></i></button> </div> </td> </tr> <tr> <td>#ORD-7839</td> <td>Michael Brown</td> <td>10 Jun 2023</td> <td>$78.30</td> <td><span class="status completed">Completed</span></td> <td> <div class="table-actions"> <button><i class="fas fa-eye"></i></button> <button><i class="fas fa-edit"></i></button> <button><i class="fas fa-trash"></i></button> </div> </td> </tr> <tr> <td>#ORD-7838</td> <td>Emily Davis</td> <td>09 Jun 2023</td> <td>$342.00</td> <td><span class="status cancelled">Cancelled</span></td> <td> <div class="table-actions"> <button><i class="fas fa-eye"></i></button> <button><i class="fas fa-edit"></i></button> <button><i class="fas fa-trash"></i></button> </div> </td> </tr> <tr> <td>#ORD-7837</td> <td>Robert Wilson</td> <td>08 Jun 2023</td> <td>$156.75</td> <td><span class="status completed">Completed</span></td> <td> <div class="table-actions"> <button><i class="fas fa-eye"></i></button> <button><i class="fas fa-edit"></i></button> <button><i class="fas fa-trash"></i></button> </div> </td> </tr> </tbody> </table> </div> </div> <!-- Top Products Section --> <div class="top-products"> <div class="chart-card"> <div class="chart-header"> <h3 class="chart-title">Top Products</h3> </div> <div class="product-list"> <div class="product-card"> <div class="product-image"> <img src="https://via.placeholder.com/60" alt="Product"> </div> <div class="product-info"> <div class="product-name">Wireless Headphones</div> <div class="product-category">Electronics</div> <div class="product-price">$129.99</div> <div class="product-stats positive"> <i class="fas fa-arrow-up"></i> 24% sales </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://via.placeholder.com/60" alt="Product"> </div> <div class="product-info"> <div class="product-name">Smart Watch</div> <div class="product-category">Wearables</div> <div class="product-price">$199.99</div> <div class="product-stats positive"> <i class="fas fa-arrow-up"></i> 18% sales </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://via.placeholder.com/60" alt="Product"> </div> <div class="product-info"> <div class="product-name">Bluetooth Speaker</div> <div class="product-category">Audio</div> <div class="product-price">$89.99</div> <div class="product-stats negative"> <i class="fas fa-arrow-down"></i> 5% sales </div> </div> </div> </div> </div> <!-- Activity Timeline --> <div class="activity-timeline"> <div class="chart-header"> <h3 class="chart-title">Recent Activity</h3> </div> <div class="timeline-list"> <div class="timeline-item"> <div class="timeline-icon"> <i class="fas fa-shopping-cart"></i> </div> <div class="timeline-content"> <div class="timeline-title">New Order Received</div> <div class="timeline-time">10 minutes ago</div> <div class="timeline-desc">Order #ORD-7841 for $125.00</div> </div> </div> <div class="timeline-item"> <div class="timeline-icon"> <i class="fas fa-user"></i> </div> <div class="timeline-content"> <div class="timeline-title">New User Registered</div> <div class="timeline-time">25 minutes ago</div> <div class="timeline-desc">Michael Brown joined the platform</div> </div> </div> <div class="timeline-item"> <div class="timeline-icon"> <i class="fas fa-box"></i> </div> <div class="timeline-content"> <div class="timeline-title">Product Added</div> <div class="timeline-time">1 hour ago</div> <div class="timeline-desc">New product "Wireless Earbuds" added to inventory</div> </div> </div> <div class="timeline-item"> <div class="timeline-icon"> <i class="fas fa-truck"></i> </div> <div class="timeline-content"> <div class="timeline-title">Order Shipped</div> <div class="timeline-time">2 hours ago</div> <div class="timeline-desc">Order #ORD-7839 has been shipped</div> </div> </div> </div> </div> </div> <!-- Footer --> <div class="footer"> <p>© 2023 AdminPro Dashboard. All rights reserved.</p> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </body> </html>
CSS
/* CSS will go here */ :root { --primary: #4361ee; --secondary: #3f37c9; --accent: #4895ef; --danger: #f72585; --success: #4cc9f0; --warning: #f8961e; --light: #f8f9fa; --dark: #212529; --gray: #6c757d; --light-gray: #e9ecef; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: #f5f7fb; color: var(--dark); overflow-x: hidden; } .dashboard { display: flex; min-height: 100vh; } /* Sidebar Styles */ .sidebar { width: 250px; background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; position: fixed; height: 100vh; z-index: 100; } .sidebar-header { padding: 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--light-gray); } .sidebar-header h3 { color: var(--primary); font-size: 1.3rem; } .sidebar-menu { padding: 20px 0; } .sidebar-menu ul { list-style: none; } .sidebar-menu li { margin-bottom: 5px; } .sidebar-menu a { display: flex; align-items: center; padding: 12px 20px; color: var(--gray); text-decoration: none; transition: all 0.3s; } .sidebar-menu a:hover, .sidebar-menu a.active { background-color: rgba(67, 97, 238, 0.1); color: var(--primary); border-left: 3px solid var(--primary); } .sidebar-menu i { margin-right: 10px; font-size: 1.1rem; } .sidebar-menu .menu-text { font-size: 0.9rem; } /* Main Content Styles */ .main-content { flex: 1; margin-left: 250px; transition: all 0.3s; } /* Header Styles */ .header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 10; } .header-left { display: flex; align-items: center; } .toggle-sidebar { font-size: 1.5rem; margin-right: 20px; cursor: pointer; color: var(--gray); } .search-box { position: relative; } .search-box input { padding: 10px 15px 10px 40px; border-radius: 30px; border: 1px solid var(--light-gray); outline: none; width: 250px; transition: all 0.3s; } .search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); } .search-box i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gray); } .header-right { display: flex; align-items: center; } .notification, .user-profile { position: relative; margin-left: 20px; cursor: pointer; } .notification i, .user-profile img { font-size: 1.3rem; color: var(--gray); } .user-profile img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .notification-count { position: absolute; top: -5px; right: -5px; background-color: var(--danger); color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: bold; } /* Content Area Styles */ .content { padding: 20px; } .page-title { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; } .page-title h2 { font-size: 1.5rem; color: var(--dark); } .breadcrumb { display: flex; list-style: none; font-size: 0.9rem; color: var(--gray); } .breadcrumb li { margin-right: 10px; } .breadcrumb li:after { content: '/'; margin-left: 10px; } .breadcrumb li:last-child:after { content: ''; } /* Cards Grid */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .card-icon { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; } .card-icon.primary { background-color: var(--primary); } .card-icon.success { background-color: var(--success); } .card-icon.warning { background-color: var(--warning); } .card-icon.danger { background-color: var(--danger); } .card-title { font-size: 0.9rem; color: var(--gray); margin-bottom: 5px; } .card-value { font-size: 1.8rem; font-weight: 600; color: var(--dark); } .card-footer { margin-top: 15px; font-size: 0.8rem; color: var(--gray); display: flex; align-items: center; } .card-footer i { margin-right: 5px; } .card-footer.positive { color: var(--success); } .card-footer.negative { color: var(--danger); } /* Charts Section */ .charts-section { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 30px; } .chart-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .chart-title { font-size: 1.1rem; font-weight: 500; color: var(--dark); } .chart-actions select { padding: 5px 10px; border-radius: 5px; border: 1px solid var(--light-gray); outline: none; background: white; color: var(--gray); } .chart-container { height: 300px; position: relative; } /* Recent Orders Section */ .recent-orders { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); margin-bottom: 30px; } .table-responsive { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--light-gray); } th { font-weight: 500; color: var(--gray); font-size: 0.9rem; } td { font-size: 0.9rem; color: var(--dark); } .status { padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; } .status.completed { background-color: rgba(76, 201, 240, 0.1); color: var(--success); } .status.pending { background-color: rgba(248, 150, 30, 0.1); color: var(--warning); } .status.cancelled { background-color: rgba(247, 37, 133, 0.1); color: var(--danger); } .table-actions { display: flex; } .table-actions button { background: none; border: none; cursor: pointer; color: var(--gray); margin-right: 10px; font-size: 1rem; transition: color 0.3s; } .table-actions button:hover { color: var(--primary); } /* Top Products Section */ .top-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; } .product-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); display: flex; align-items: center; } .product-image { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; margin-right: 15px; } .product-image img { width: 100%; height: 100%; object-fit: cover; } .product-info { flex: 1; } .product-name { font-size: 0.9rem; font-weight: 500; margin-bottom: 5px; color: var(--dark); } .product-category { font-size: 0.8rem; color: var(--gray); margin-bottom: 5px; } .product-price { font-size: 0.9rem; font-weight: 600; color: var(--primary); } .product-stats { display: flex; align-items: center; font-size: 0.8rem; color: var(--gray); } .product-stats i { margin-right: 5px; } .product-stats.positive { color: var(--success); } .product-stats.negative { color: var(--danger); } /* Activity Timeline */ .activity-timeline { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .timeline-item { display: flex; padding: 15px 0; position: relative; } .timeline-item:not(:last-child) { border-bottom: 1px solid var(--light-gray); } .timeline-icon { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(67, 97, 238, 0.1); display: flex; align-items: center; justify-content: center; margin-right: 15px; color: var(--primary); font-size: 1rem; } .timeline-content { flex: 1; } .timeline-title { font-size: 0.9rem; font-weight: 500; color: var(--dark); margin-bottom: 5px; } .timeline-time { font-size: 0.8rem; color: var(--gray); } .timeline-desc { font-size: 0.8rem; color: var(--gray); margin-top: 5px; } /* Footer */ .footer { text-align: center; padding: 20px; color: var(--gray); font-size: 0.9rem; border-top: 1px solid var(--light-gray); } /* Responsive Styles */ @media (max-width: 1200px) { .charts-section { grid-template-columns: 1fr; } } @media (max-width: 992px) { .sidebar { transform: translateX(-100%); position: fixed; z-index: 1000; } .sidebar.active { transform: translateX(0); } .main-content { margin-left: 0; } .sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: none; } .sidebar-overlay.active { display: block; } } @media (max-width: 768px) { .header { flex-direction: column; align-items: flex-start; } .header-left, .header-right { width: 100%; justify-content: space-between; } .search-box { width: 100%; } .search-box input { width: 100%; } .cards-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 576px) { .cards-grid { grid-template-columns: 1fr; } .page-title { flex-direction: column; align-items: flex-start; } .breadcrumb { margin-top: 10px; } }
JavaScript
// Toggle Sidebar const toggleSidebar = document.querySelector('.toggle-sidebar'); const closeSidebar = document.querySelector('.close-sidebar'); const sidebar = document.querySelector('.sidebar'); const sidebarOverlay = document.querySelector('.sidebar-overlay'); toggleSidebar.addEventListener('click', () => { sidebar.classList.add('active'); sidebarOverlay.classList.add('active'); }); closeSidebar.addEventListener('click', () => { sidebar.classList.remove('active'); sidebarOverlay.classList.remove('active'); }); sidebarOverlay.addEventListener('click', () => { sidebar.classList.remove('active'); sidebarOverlay.classList.remove('active'); }); // Charts // Revenue Chart const revenueCtx = document.getElementById('revenueChart').getContext('2d'); const revenueChart = new Chart(revenueCtx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Revenue', data: [12000, 15000, 18000, 14000, 20000, 24000], backgroundColor: 'rgba(67, 97, 238, 0.1)', borderColor: 'rgba(67, 97, 238, 1)', borderWidth: 2, tension: 0.4, fill: true }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: false, grid: { drawBorder: false } }, x: { grid: { display: false } } } } }); // Traffic Chart const trafficCtx = document.getElementById('trafficChart').getContext('2d'); const trafficChart = new Chart(trafficCtx, { type: 'doughnut', data: { labels: ['Direct', 'Referral', 'Social', 'Organic'], datasets: [{ data: [35, 25, 20, 20], backgroundColor: [ 'rgba(67, 97, 238, 1)', 'rgba(76, 201, 240, 1)', 'rgba(248, 150, 30, 1)', 'rgba(247, 37, 133, 1)' ], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right' } }, cutout: '70%' } });
Output Preview
Desktop
Mobile
Fullscreen