Modelo HTML do painel de registro do site

610 thedashboard1

Abrir no Editor Video Publique Seu Código

Modelo HTML do painel de registro do site

Recomendado

14 September 2024

Calculadora Simples

26 March 2025

Formulário de várias etapas com barra de progresso usando jQuery e CSS3

14 October 2024

Um modelo de página da web para "Anes Development" com uma mensagem de boas-vindas e navegação.

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>

Recomendado

Calculadora Simples

Formulário de várias etapas com barra de progresso usando jQuery e CSS3

Um modelo de página da web para "Anes Development" com uma mensagem de boas-vindas e navegação.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS