Modello di dashboard di amministrazione HTML

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

8 June 2025

Gioco di abbinamento dei colori

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>

Modello di dashboard di amministrazione HTML

Consigliato

Un codice di alejandrokundrah

Un codice di mematixd3162

Gioco di abbinamento dei colori

HTML

CSS

JS

Consigliato

Un codice di alejandrokundrah

Un codice di mematixd3162

Gioco di abbinamento dei colori

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS