Um Código por códice

646 codex

Abrir no Editor Publique Seu Código

Recomendado

30 June 2025

Portfólio do desenvolvedor HTML V2

14 May 2025

Um Código por toninrazafison

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Statistics Dashboard</title>
    <style>
        /* Basic styling for a clean dashboard look */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
            color: #333;
        }
        .dashboard-container {
            max-width: 1200px;
            margin: 20px auto;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5em;
            font-weight: 600;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        .stat-card {
            background-color: #e8f4f8; /* Light blue */
            padding: 25px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease-in-out;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .stat-card h3 {
            margin-top: 0;
            color: #34495e;
            font-size: 1.2em;
            margin-bottom: 15px;
            font-weight: 500;
        }
        .stat-card p {
            font-size: 2.8em;
            font-weight: bold;
            color: #2980b9; /* Blue */
            margin: 0;
        }
        /* Color variations for stat cards */
        .stat-card.red { background-color: #fdeaea; }
        .stat-card.red p { color: #e74c3c; }
        .stat-card.green { background-color: #eafdeb; }
        .stat-card.green p { color: #27ae60; }
        .stat-card.purple { background-color: #f4e8fd; }
        .stat-card.purple p { color: #8e44ad; }

.chart-section {
            background-color: #fdfdfd;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            margin-top: 30px;
        }
        .chart-section h2 {
            color: #34495e;
            margin-top: 0;
            margin-bottom: 25px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            font-size: 1.8em;
            font-weight: 500;
        }
        .placeholder-chart {
            height: 250px;
            background-color: #ecf0f1;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7f8c8d;
            font-style: italic;
            font-size: 1.1em;
            border: 1px dashed #bdc3c7;
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <h1>Admin Statistics Dashboard</h1>

<div class="stats-grid">
            <div class="stat-card">
                <h3>Total Users</h3>
                <p>1,234</p>
            </div>
            <div class="stat-card red">
                <h3>New Signups (Today)</h3>
                <p>45</p>
            </div>
            <div class="stat-card green">
                <h3>Active Sessions</h3>
                <p>789</p>
            </div>
            <div class="stat-card purple">
                <h3>Monthly Revenue</h3>
                <p>$12,345.67</p>
            </div>
        </div>

<div class="chart-section">
            <h2>User Growth Over Time</h2>
            <div class="placeholder-chart">
                [Placeholder for a Line Chart showing user growth trends]
            </div>
        </div>

<div class="stats-grid">
            <div class="stat-card">
                <h3>Bounce Rate</h3>
                <p>35.2%</p>
            </div>
            <div class="stat-card">
                <h3>Avg. Session Duration</h3>
                <p>03:45</p>
            </div>
            <div class="stat-card">
                <h3>Total Orders</h3>
                <p>567</p>
            </div>
            <div class="stat-card">
                <h3>Conversion Rate</h3>
                <p>4.8%</p>
            </div>
        </div>

<div class="chart-section">
            <h2>Top Selling Products</h2>
            <div class="placeholder-chart">
                [Placeholder for a Bar Chart showing product sales]
            </div>
        </div>

<div class="chart-section">
            <h2>Geographic Distribution</h2>
            <div class="placeholder-chart">
                [Placeholder for a World Map or Pie Chart showing user locations]
            </div>
        </div>
    </div>
</body>
</html>

Um Código por códice

Recomendado

Um código de Metr

Portfólio do desenvolvedor HTML V2

Um Código por toninrazafison

HTML

CSS

JS

Recomendado

Um código de Metr

Portfólio do desenvolvedor HTML V2

Um Código por toninrazafison

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS