WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!-- Replace with your HTML Code (Leave empty if not needed) --> <!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> <!-- Statistics Grid --> <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> <!-- Recent Registrations Table --> <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>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!-- Replace with your HTML Code (Leave empty if not needed) --> <!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> <!-- Statistics Grid --> <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> <!-- Recent Registrations Table --> <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>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */