📚 Pré-requisitos Teóricos: este projeto aplica conceitos ensinados em Módulo 04: HTML5 e CSS3. Recomendado revisar antes de começar.

🎨 Painel Administrativo Responsivo com CSS Grid & Dark Mode

v1.0 — Engenharia de Software & Práticas Profissionais

Trilha de Especialização Pedagógica

—`

🎯 Objetivo & Escopo do Projeto

Dashboard profissional construído com CSS Grid moderno (Layout de 12 colunas, Grid Template Areas), Flexbox, variáveis CSS customizadas para alternância instantânea de Dark/Light mode sem dependências.

—`

🛠️ Código de Exemplo da Implementação

<!DOCTYPE html>
<html lang="pt-BR" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>Enterprise Dashboard — CSS Grid</title>
  <style>
    :root { --bg: #ffffff; --text: #1a1a1a; --card: #f4f4f4; }
    [data-theme="dark"] { --bg: #121212; --text: #f0f0f0; --card: #1e1e1e; }
    body { background: var(--bg); color: var(--text); font-family: sans-serif; margin: 0; }
    .dashboard { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
    .sidebar { background: var(--card); padding: 20px; }
    .content { padding: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
    .metric-card { background: var(--card); padding: 20px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="dashboard">
    <aside class="sidebar"><h2>Admin Panel</h2></aside>
    <main class="content">
      <div class="metric-card"><h3>Vendas Hoje</h3><p>R$ 45.280,00</p></div>
      <div class="metric-card"><h3>Novos Usuários</h3><p>+ 1.420</p></div>
    </main>
  </div>
</body>
</html>

—`

🚀 Como Executar no Laboratório

1. Abra o terminal na pasta deste projeto

No seu editor/IDE, abra a pasta deste projeto (File > Open Folder) ou navegue via terminal:

cd web_02_dashboard_css_grid

2. Execute a aplicação ou testes

npm install
npm run dev
# ou abrir index.html no navegador

[!TIP] Dica para execução a partir da raiz do repositório: Se você abriu o repositório completo no VS Code, basta navegar até a pasta antes de executar: cd proj_aplicacoes_full_stack/projetos/web_02_dashboard_css_grid

⬅️ Ver Todos os Projetos no Super-Hub 🏠 Página Inicial do Portal