Modèle HTML du panneau d'administration visiteur

675 newmove

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML du panneau d'administration visiteur

Recommandé

12 December 2025

Démo de jeu de combat Ragdoll (HTML, CSS, JS)

26 July 2025

Éditeur HTML en ligne | CodeCanvas - Outil de développement web gratuit

1 August 2024

Conception de l'interface utilisateur de la carte produit

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