Plantilla HTML del panel de administración de visitantes

22 newmove

Abrir en el editor Video Publica tu código

Plantilla HTML del panel de administración de visitantes

Recomendado

11 July 2025

Ruleta de decisiones HTML: ¡Gira la rueda!

23 March 2024

Página de inicio de sesión HTML

16 October 2025

Ejemplo de elemento de carga animado CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visitor Admin Panel</title>
    <style>
        :root {
            --primary: #2563eb;
            --secondary: #64748b;
            --dark: #1e293b;
            --light: #f8fafc;
            --success: #22c55e;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            display: flex;
            background-color: var(--light);
            color: var(--dark);
        }

/* Sidebar */
        aside {
            width: 240px;
            background-color: var(--dark);
            color: white;
            height: 100vh;
            position: fixed;
            padding: 20px;
        }

aside h2 {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: var(--primary);
        }

nav ul {
            list-style: none;
            padding: 0;
        }

nav li {
            padding: 12px 0;
            border-bottom: 1px solid #334155;
            cursor: pointer;
            transition: 0.3s;
        }

nav li:hover {
            color: var(--primary);
        }

/* Main Content */
        main {
            margin-left: 280px;
            padding: 40px;
            width: 100%;
        }

header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

/* Stats Cards */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

.card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

.card h3 {
            margin: 0;
            font-size: 0.9rem;
            color: var(--secondary);
        }

.card p {
            font-size: 1.8rem;
            font-weight: bold;
            margin: 10px 0 0 0;
        }

/* Table */
        .table-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

table {
            width: 100%;
            border-collapse: collapse;
        }

th {
            text-align: left;
            padding: 12px;
            border-bottom: 2px solid var(--light);
            color: var(--secondary);
        }

td {
            padding: 12px;
            border-bottom: 1px solid var(--light);
        }

.status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
        }

.status-online { background: #dcfce7; color: #166534; }
        .status-offline { background: #f1f5f9; color: #475569; }

button {
            background: var(--primary);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<aside>
        <h2>AdminPanel</h2>
        <nav>
            <ul>
                <li>Dashboard</li>
                <li style="color: var(--primary)">Live Visitors</li>
                <li>Analytics</li>
                <li>User Behavior</li>
                <li>Settings</li>
            </ul>
        </nav>
    </aside>

<main>
        <header>
            <h1>Visitor Insights</h1>
            <button>Export CSV</button>
        </header>

<section class="stats-container">
            <div class="card">
                <h3>Total Visitors</h3>
                <p>12,405</p>
            </div>
            <div class="card">
                <h3>Active Now</h3>
                <p style="color: var(--success)">42</p>
            </div>
            <div class="card">
                <h3>Avg. Session</h3>
                <p>4m 12s</p>
            </div>
            <div class="card">
                <h3>Bounce Rate</h3>
                <p>32.1%</p>
            </div>
        </section>

<section class="table-container">
            <h3>Recent Activity</h3>
            <table>
                <thead>
                    <tr>
                        <th>IP Address</th>
                        <th>Location</th>
                        <th>Browser</th>
                        <th>Page Path</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>192.168.1.45</td>
                        <td>New York, US</td>
                        <td>Chrome / Win10</td>
                        <td>/pricing</td>
                        <td><span class="status status-online">Active</span></td>
                    </tr>
                    <tr>
                        <td>172.16.254.1</td>
                        <td>London, UK</td>
                        <td>Safari / MacOS</td>
                        <td>/home</td>
                        <td><span class="status status-online">Active</span></td>
                    </tr>
                    <tr>
                        <td>88.102.34.12</td>
                        <td>Berlin, DE</td>
                        <td>Firefox / Linux</td>
                        <td>/docs/api</td>
                        <td><span class="status status-offline">5m ago</span></td>
                    </tr>
                    <tr>
                        <td>104.22.11.90</td>
                        <td>Tokyo, JP</td>
                        <td>Edge / Win11</td>
                        <td>/contact</td>
                        <td><span class="status status-online">Active</span></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>

</body>
</html>

Recomendado

Ruleta de decisiones HTML: ¡Gira la rueda!

Página de inicio de sesión HTML

Ejemplo de elemento de carga animado CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS