Ein Code für Codex

1213 codex

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

15 October 2024

Schaltflächen für den Dunkelmodus und den Nachtmodus

24 June 2025

Ein Code von Metehan

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>

Ein Code für Codex

Empfohlen

Schaltflächen für den Dunkelmodus und den Nachtmodus

Ein Code von Mete

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Schaltflächen für den Dunkelmodus und den Nachtmodus

Ein Code von Mete

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS