Modèle HTML de tableau de bord d'administration

14 AdminDashboard

Ouvrir dans l'éditeur Video Publiez votre code

Modèle HTML de tableau de bord d'administration

Recommandé

21 September 2024

Curseur de déplacement rotatif

7 July 2023

Formulaire de connexion/inscription version 2

24 July 2024

Modèle de site Web d'application

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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #4f46e5;
            --secondary: #64748b;
            --dark: #1e293b;
            --light: #f8fafc;
            --sidebar-width: 260px;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, sans-serif;
        }

body {
            background-color: #f1f5f9;
            display: flex;
        }

/* Sidebar */
        .sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            background: var(--dark);
            color: white;
            position: fixed;
            padding: 1.5rem;
        }

.sidebar-brand {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

.nav-link {
            display: flex;
            align-items: center;
            padding: 0.8rem 1rem;
            color: #94a3b8;
            text-decoration: none;
            border-radius: 8px;
            margin-bottom: 0.5rem;
            transition: 0.3s;
        }

.nav-link:hover, .nav-link.active {
            background: var(--primary);
            color: white;
        }

.nav-link i {
            margin-right: 12px;
            width: 20px;
        }

/* Main Content */
        .main-content {
            margin-left: var(--sidebar-width);
            width: calc(100% - var(--sidebar-width));
            padding: 2rem;
        }

.header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

.user-profile {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.user-profile img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

/* Stats Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

.card {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

.card-title {
            color: var(--secondary);
            font-size: 0.875rem;
            text-transform: uppercase;
            font-weight: 600;
        }

.card-value {
            font-size: 1.875rem;
            font-weight: bold;
            margin: 0.5rem 0;
            color: var(--dark);
        }

.card-trend {
            font-size: 0.875rem;
        }

.trend-up { color: #10b981; }
        .trend-down { color: #ef4444; }

/* Table */
        .data-table-container {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }

th {
            text-align: left;
            padding: 12px;
            border-bottom: 2px solid #f1f5f9;
            color: var(--secondary);
            font-weight: 600;
        }

td {
            padding: 12px;
            border-bottom: 1px solid #f1f5f9;
            color: var(--dark);
        }

.status {
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
        }

.status-paid { background: #dcfce7; color: #166534; }
        .status-pending { background: #fef9c3; color: #854d0e; }

@media (max-width: 768px) {
            .sidebar { width: 70px; padding: 1rem; }
            .sidebar-brand span, .nav-link span { display: none; }
            .main-content { margin-left: 70px; width: calc(100% - 70px); }
        }
    </style>
</head>
<body>

<aside class="sidebar">
        <div class="sidebar-brand">
            <i class="fas fa-bolt"></i>
            <span>AdminPro</span>
        </div>
        <nav>
            <a href="#" class="nav-link active">
                <i class="fas fa-chart-pie"></i>
                <span>Dashboard</span>
            </a>
            <a href="#" class="nav-link">
                <i class="fas fa-users"></i>
                <span>Users</span>
            </a>
            <a href="#" class="nav-link">
                <i class="fas fa-shopping-cart"></i>
                <span>Orders</span>
            </a>
            <a href="#" class="nav-link">
                <i class="fas fa-box"></i>
                <span>Products</span>
            </a>
            <a href="#" class="nav-link">
                <i class="fas fa-cog"></i>
                <span>Settings</span>
            </a>
        </nav>
    </aside>

<main class="main-content">
        <header class="header">
            <h1>Dashboard Overview</h1>
            <div class="user-profile">
                <div style="text-align: right">
                    <div style="font-weight: bold">Alex Johnson</div>
                    <div style="font-size: 0.8rem; color: var(--secondary)">Super Admin</div>
                </div>
                <img src="https://ui-avatars.com/api/?name=Alex+Johnson&background=4f46e5&color=fff" alt="Profile">
            </div>
        </header>

<div class="stats-grid">
            <div class="card">
                <div class="card-title">Total Revenue</div>
                <div class="card-value">$54,230</div>
                <div class="card-trend trend-up">
                    <i class="fas fa-arrow-up"></i> 12% since last month
                </div>
            </div>
            <div class="card">
                <div class="card-title">Active Users</div>
                <div class="card-value">1,240</div>
                <div class="card-trend trend-up">
                    <i class="fas fa-arrow-up"></i> 5.4% since last week
                </div>
            </div>
            <div class="card">
                <div class="card-title">New Orders</div>
                <div class="card-value">452</div>
                <div class="card-trend trend-down">
                    <i class="fas fa-arrow-down"></i> 2.1% since yesterday
                </div>
            </div>
            <div class="card">
                <div class="card-title">Pending Tasks</div>
                <div class="card-value">12</div>
                <div class="card-trend">No change</div>
            </div>
        </div>

<div class="data-table-container">
            <h3>Recent Transactions</h3>
            <table>
                <thead>
                    <tr>
                        <th>Customer</th>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John Doe</td>
                        <td>Oct 24, 2023</td>
                        <td>$120.00</td>
                        <td><span class="status status-paid">Paid</span></td>
                        <td><i class="fas fa-ellipsis-h" style="cursor:pointer"></i></td>
                    </tr>
                    <tr>
                        <td>Sarah Smith</td>
                        <td>Oct 23, 2023</td>
                        <td>$850.50</td>
                        <td><span class="status status-pending">Pending</span></td>
                        <td><i class="fas fa-ellipsis-h" style="cursor:pointer"></i></td>
                    </tr>
                    <tr>
                        <td>Mike Wilson</td>
                        <td>Oct 22, 2023</td>
                        <td>$45.00</td>
                        <td><span class="status status-paid">Paid</span></td>
                        <td><i class="fas fa-ellipsis-h" style="cursor:pointer"></i></td>
                    </tr>
                    <tr>
                        <td>Emma Davis</td>
                        <td>Oct 22, 2023</td>
                        <td>$210.00</td>
                        <td><span class="status status-paid">Paid</span></td>
                        <td><i class="fas fa-ellipsis-h" style="cursor:pointer"></i></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>

</body>
</html>

Modèle HTML de tableau de bord d'administration

Recommandé

Curseur de déplacement rotatif

Formulaire de connexion/inscription version 2

Modèle de site Web d'application

HTML

CSS

JS

Recommandé

Curseur de déplacement rotatif

Formulaire de connexion/inscription version 2

Modèle de site Web d'application

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS