Plantilla HTML del panel de administración

286 AdminDashboard

Abrir en el editor Publica tu código

Plantilla HTML del panel de administración

Recomendado

14 May 2025

Un código de toninrazafison

17 May 2025

sitio web moderno

18 August 2024

Animación de título interactivo

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