Plantilla HTML del panel de administración

616 AdminDashboard

Abrir en el editor Publica tu código

Plantilla HTML del panel de administración

Recomendado

13 January 2026

Código HTML5 del juego Moto X3M 5 Pool Party

7 December 2024

Un código de slowlogic9

19 November 2025

Código HTML para el inicio de sesión de Google y el menú adaptable

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>

CSS