Modèle de tableau de bord d'administration HTML

1,596 thedashboard

Ouvrir dans l'éditeur Publiez votre code

Modèle de tableau de bord d'administration HTML

Recommandé

16 March 2026

Chargeur HTML du jeu Ragdoll Archers

11 March 2026

Code d'intégration du jeu 10 Minutes Till Dawn

21 December 2024

mot de passe de connexion

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>

CSS