Modèle HTML du panneau d'administration visiteur

560 newmove

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML du panneau d'administration visiteur

Recommandé

13 April 2024

Bouton bascule HTML CSS

13 January 2026

Modèle HTML de site web de films

5 November 2025

Extrait de code HTML pour menu burger

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