Modello HTML della dashboard di registrazione del sito Web

15 thedashboard1

Apri nell'Editor Pubblica il Tuo Codice

Modello HTML della dashboard di registrazione del sito Web

Consigliato

26 December 2024

Un codice di logicarray833

21 January 2025

Pagina di destinazione dell'agenzia immobiliare

9 October 2025

Animazione CSS: effetto cerchio di caricamento

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>

Consigliato

Un codice di logicarray833

Pagina di destinazione dell'agenzia immobiliare

Animazione CSS: effetto cerchio di caricamento

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS