Un código por códice

1,540 codex

Abrir en el editor Publica tu código

Recomendado

13 May 2026

Código fuente HTML5 del juego Drive Mad

14 June 2025

Un código de Metehan

20 February 2026

Plantilla HTML y CSS para portafolio de diseñador web

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>

CSS