Modèle de tableau de bord d'administration HTML

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 March 2024

Effet de carte Flips 3D

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é

Code HTML du menu latéral

Un code par alejandrokundrah

Effet de carte Flips 3D

HTML

CSS

JS

Recommandé

Code HTML du menu latéral

Un code par alejandrokundrah

Effet de carte Flips 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS