Plantilla HTML del panel de administración de visitantes

732 newmove

Abrir en el editor Publica tu código

Plantilla HTML del panel de administración de visitantes

Recomendado

26 March 2026

Fragmento de código HTML de marcador de posición

1 April 2025

Lista de tareas inteligentes

14 November 2025

Formulario de inicio de sesión y registro 3D HTML 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>

CSS