Modello HTML del pannello di amministrazione dei visitatori

351 newmove

Apri nell'Editor Video Pubblica il Tuo Codice

Modello HTML del pannello di amministrazione dei visitatori

Consigliato

18 September 2024

Hacker Login (AGGIORNAMENTO) Edizione Turca

17 March 2025

CodePen Home Cipher Quest: Decifratore di codici

30 January 2025

CodePen Home Disegna un cuore ❤️✍️

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>

Modello HTML del pannello di amministrazione dei visitatori

Consigliato

Hacker Login (AGGIORNAMENTO) Edizione Turca

CodePen Home Cipher Quest: Decifratore di codici

CodePen Home Disegna un cuore ❤️✍️

HTML

CSS

JS

Consigliato

Hacker Login (AGGIORNAMENTO) Edizione Turca

CodePen Home Cipher Quest: Decifratore di codici

CodePen Home Disegna un cuore ❤️✍️

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS