HTML-Admin-Dashboard-Vorlage

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

19 November 2025

HTML-Admin-Dashboard-Vorlage mit CSS und Diagrammen

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>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f7f6;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

header {
            background-color: #2c3e50;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

header h1 {
            margin: 0;
            font-size: 24px;
        }

.user-info {
            font-size: 16px;
        }

.container {
            display: flex;
            flex: 1;
        }

nav.sidebar {
            width: 220px;
            background-color: #34495e;
            color: white;
            padding-top: 20px;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }

nav.sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

nav.sidebar ul li a {
            display: block;
            padding: 15px 20px;
            color: white;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

nav.sidebar ul li a:hover,
        nav.sidebar ul li a.active {
            background-color: #2c3e50;
        }

main.content {
            flex-grow: 1;
            padding: 20px;
            background-color: #ecf0f1;
        }

.dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

.card {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.2s ease;
        }

.card:hover {
            transform: translateY(-5px);
        }

.card h3 {
            margin-top: 0;
            color: #34495e;
        }

.card p {
            font-size: 2em;
            color: #2c3e50;
            margin: 10px 0;
        }

.recent-activity,
        .settings-section {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

.recent-activity ul {
            list-style: none;
            padding: 0;
        }

.recent-activity ul li {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            color: #555;
        }

.recent-activity ul li:last-child {
            border-bottom: none;
        }

footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 14px;
            box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <header>
        <h1>Admin Dashboard</h1>
        <div class="user-info">
            Welcome, Admin! | <a href="#" style="color: white; text-decoration: none;">Logout</a>
        </div>
    </header>

<div class="container">
        <nav class="sidebar">
            <ul>
                <li><a href="#" class="active">Dashboard</a></li>
                <li><a href="#">Users</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Orders</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Settings</a></li>
            </ul>
        </nav>

<main class="content">
            <h2>Overview</h2>
            <div class="dashboard-grid">
                <div class="card">
                    <h3>Total Users</h3>
                    <p>1,234</p>
                </div>
                <div class="card">
                    <h3>New Orders</h3>
                    <p>78</p>
                </div>
                <div class="card">
                    <h3>Revenue</h3>
                    <p>$56,789</p>
                </div>
                <div class="card">
                    <h3>Pending Tasks</h3>
                    <p>12</p>
                </div>
            </div>

<div class="recent-activity">
                <h3>Recent Activity</h3>
                <ul>
                    <li>User 'John Doe' registered. <small>2 minutes ago</small></li>
                    <li>Order #1001 placed by 'Jane Smith'. <small>1 hour ago</small></li>
                    <li>Product 'Laptop Pro' updated. <small>Yesterday</small></li>
                    <li>Report 'Monthly Sales' generated. <small>2 days ago</small></li>
                </ul>
            </div>

<div class="settings-section">
                <h3>Quick Settings</h3>
                <p>Manage your dashboard preferences here.</p>
                <button style="padding: 10px 15px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">Update Profile</button>
                <button style="padding: 10px 15px; background-color: #e74c3c; color: white; border: none; border-radius: 5px; cursor: pointer; margin-left: 10px;">Clear Cache</button>
            </div>
        </main>
    </div>

HTML-Admin-Dashboard-Vorlage mit CSS und Diagrammen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS