Modèle de tableau de bord d'administration HTML

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 February 2024

Formulaire de connexion animé

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>

Modèle de tableau de bord d'administration HTML

Recommandé

Générateur d'idées HTML

Ventilateur de bureau

Formulaire de connexion animé

HTML

CSS

JS

Recommandé

Générateur d'idées HTML

Ventilateur de bureau

Formulaire de connexion animé

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS