Um Código por códice

1064 codex

Abrir no Editor Publique Seu Código

Recomendado

5 June 2025

Um Código por alejandrokundrah

18 June 2025

Um código da ByBy.inc

3 June 2025

Um Código por alejandrokundrah

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 por alejandrokundrah

Um código da ByBy.inc

Um Código por alejandrokundrah

HTML

CSS

JS

Recomendado

Um Código por alejandrokundrah

Um código da ByBy.inc

Um Código por alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS