Modèle HTML du tableau de bord d'inscription au site Web

732 thedashboard1

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML du tableau de bord d'inscription au site Web

Recommandé

20 December 2025

Visualisation de réseaux neuronaux 3D (Three.js)

16 March 2026

Chargeur HTML du jeu Ragdoll Archers

9 November 2025

Code CSS, HTML et JavaScript pour montre connectée 3D

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Registrations Dashboard</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f7f9;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 20px;
        }
        h1 {
            color: #0056b3;
            border-bottom: 3px solid #e9ecef;
            padding-bottom: 15px;
            margin-bottom: 25px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .stat-label {
            font-size: 1em;
            color: #6c757d;
            margin-bottom: 5px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .stat-value {
            font-size: 3em;
            font-weight: 700;
            color: #007bff;
        }
        .recent-registrations h2 {
            color: #343a40;
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }
        th {
            background-color: #007bff;
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.9em;
        }
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        tr:hover {
            background-color: #e9f0f7;
        }
    </style>
</head>
<body>

<div class="container">
        <h1>Website Registrations Dashboard</h1>

<div class="stats-grid">
            
            <div class="stat-card">
                <div class="stat-label">Total Users Registered</div>
                <div class="stat-value">14,521</div>
            </div>

<div class="stat-card">
                <div class="stat-label">Registrations Today</div>
                <div class="stat-value">87</div>
            </div>

<div class="stat-card">
                <div class="stat-label">Registrations This Week</div>
                <div class="stat-value">593</div>
            </div>

<div class="stat-card">
                <div class="stat-label">Conversion Rate (MoM)</div>
                <div class="stat-value">3.4%</div>
            </div>

</div>

<div class="recent-registrations">
            <h2>Recent Activity</h2>
            <table>
                <thead>
                    <tr>
                        <th>User ID</th>
                        <th>Email Address</th>
                        <th>Registration Date</th>
                        <th>Source</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>#10045</td>
                        <td>alice.j@example.com</td>
                        <td>2023-10-27 14:30</td>
                        <td>Google Ads</td>
                        <td>Active</td>
                    </tr>
                    <tr>
                        <td>#10044</td>
                        <td>mark.t@example.net</td>
                        <td>2023-10-27 14:15</td>
                        <td>Organic Search</td>
                        <td>Active</td>
                    </tr>
                    <tr>
                        <td>#10043</td>
                        <td>sara.p@example.org</td>
                        <td>2023-10-27 13:55</td>
                        <td>Direct Traffic</td>
                        <td>Pending Verification</td>
                    </tr>
                    <tr>
                        <td>#10042</td>
                        <td>johnny.b@example.com</td>
                        <td>2023-10-27 11:20</td>
                        <td>Social Media</td>
                        <td>Active</td>
                    </tr>
                    <tr>
                        <td>#10041</td>
                        <td>emma.w@example.co</td>
                        <td>2023-10-26 18:01</td>
                        <td>Referral Link</td>
                        <td>Active</td>
                    </tr>
                </tbody>
            </table>
        </div>

</div>

</body>
</html>

CSS