<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Acme App</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f7fa; color: #333; }
        nav { background: #1a1a2e; padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; }
        nav .logo { color: #fff; font-size: 20px; font-weight: 700; }
        nav .links a { color: #ccc; text-decoration: none; margin-left: 24px; font-size: 14px; }
        nav .links a:hover { color: #fff; }
        .dashboard { padding: 40px 32px; max-width: 960px; margin: 0 auto; }
        .welcome { background: #fff; border-radius: 12px; padding: 32px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .welcome h1 { color: #1a1a2e; margin-bottom: 8px; }
        .welcome p { color: #666; font-size: 15px; }
        .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
        .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .card h3 { color: #1a1a2e; margin-bottom: 8px; }
        .card .stat { font-size: 32px; font-weight: 700; color: #4361ee; }
        .card p { color: #666; font-size: 13px; margin-top: 4px; }
    </style>
</head>
<body>
    <nav>
        <div class="logo">Acme App</div>
        <div class="links">
            <a href="/dashboard">Dashboard</a>
            <a href="/">Log Out</a>
        </div>
    </nav>
    <div class="dashboard">
        <div class="welcome">
            <h1>Welcome, {{ email }}!</h1>
            <p>Here's an overview of your workspace. You have 3 active projects and 12 tasks due this week.</p>
        </div>
        <div class="cards">
            <div class="card">
                <h3>Active Projects</h3>
                <div class="stat">3</div>
                <p>2 on track, 1 needs attention</p>
            </div>
            <div class="card">
                <h3>Tasks Due</h3>
                <div class="stat">12</div>
                <p>This week</p>
            </div>
            <div class="card">
                <h3>Team Members</h3>
                <div class="stat">8</div>
                <p>All active</p>
            </div>
        </div>
    </div>
</body>
</html>
