Plantilla HTML del panel de registro del sitio web

733 thedashboard1

Abrir en el editor Publica tu código

Plantilla HTML del panel de registro del sitio web

Recomendado

14 March 2026

Fútbol de muñecos de trapo

1 August 2024

Formulario de tarjeta de crédito - VueJs

9 March 2026

Código del editor HTML de pantalla completa

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