Modelo HTML para Painel de Administração

10 AdminDashboard

Abrir no Editor Video Publique Seu Código

Modelo HTML para Painel de Administração

Recomendado

11 February 2026

Exemplo de detecção de planos de rastreamento de mãos em Realidade Aumentada WebXR

22 September 2025

Jogo de cubo 3D HTML com estatísticas e personalização

26 December 2024

Matrix é um diretório de página inicial

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>

Modelo HTML para Painel de Administração

Recomendado

Exemplo de detecção de planos de rastreamento de mãos em Realidade Aumentada WebXR

Jogo de cubo 3D HTML com estatísticas e personalização

Matrix é um diretório de página inicial

HTML

CSS

JS

Recomendado

Exemplo de detecção de planos de rastreamento de mãos em Realidade Aumentada WebXR

Jogo de cubo 3D HTML com estatísticas e personalização

Matrix é um diretório de página inicial

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS