feat: catalogo de herois Marvel e DC com express e bootstrap
This commit is contained in:
anderson committed
commit
5f6ad89128
4 files changed
+254
No files matched your search
@@ -0,0 +1,177 @@
|
||||
const express = require('express');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3030;
|
||||
|
||||
// Função geradora de layout com o CDN do Bootstrap 5
|
||||
function layout(titulo, conteudo) {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${titulo}</title>
|
||||
<!-- Bootstrap 5 CSS via CDN -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<nav class="navbar navbar-dark bg-dark mb-4">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="/">Catálogo de Heróis</a>
|
||||
<div>
|
||||
<a class="btn btn-outline-danger btn-sm me-2" href="/marvel">Marvel</a>
|
||||
<a class="btn btn-outline-primary btn-sm" href="/dc">DC Comics</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="container">
|
||||
${conteudo}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
// 1. Página inicial – Rota /
|
||||
app.get('/', (req, res) => {
|
||||
const conteudo =
|
||||
` <div class="p-4 mb-4 bg-white rounded-3 shadow-sm border">
|
||||
<h1 class="display-6 fw-bold">Catálogo de Heróis</h1>
|
||||
<p class="lead text-muted">Bem-vindo ao catálogo interativo dos universos Marvel e DC.</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 border-danger shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-danger fw-bold">Universo Marvel</h5>
|
||||
<p class="card-text text-secondary">Acesse os personagens, quadrinhos e sagas da Casa das Ideias.</p>
|
||||
<a href="/marvel" class="btn btn-danger">Explorar Marvel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 border-primary shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-primary fw-bold">Universo DC</h5>
|
||||
<p class="card-text text-secondary">Descubra os heróis e protetores lendários da Liga da Justiça.</p>
|
||||
<a href="/dc" class="btn btn-primary">Explorar DC</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h3 class="h4 mb-3">Personagens em Destaque</h3>
|
||||
<div class="list-group shadow-sm">
|
||||
<a href="/personagem/marvel/Thor" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Thor
|
||||
<span class="badge bg-danger rounded-pill">Marvel</span>
|
||||
</a>
|
||||
<a href="/personagem/marvel/Homem-Aranha" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Homem-Aranha
|
||||
<span class="badge bg-danger rounded-pill">Marvel</span>
|
||||
</a>
|
||||
<a href="/personagem/dc/Batman" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Batman
|
||||
<span class="badge bg-primary rounded-pill">DC</span>
|
||||
</a>
|
||||
<a href="/personagem/dc/Superman" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Superman
|
||||
<span class="badge bg-primary rounded-pill">DC</span>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
res.send(layout('Catálogo de Heróis', conteudo));
|
||||
});
|
||||
|
||||
// 2. Rotas das empresas – Rota /marvel
|
||||
app.get('/marvel', (req, res) => {
|
||||
const conteudo =
|
||||
` <div class="card border-danger shadow-sm mb-4">
|
||||
<div class="card-header bg-danger text-white fw-bold">
|
||||
Marvel Comics
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
A Marvel Comics é famosa por criar personagens humanos, com dilemas reais e poderes extraordinários, atuando nos Vingadores, X-Men e no cosmos.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4 mb-3">Personagens Disponíveis:</h5>
|
||||
<div class="list-group mb-4">
|
||||
<a href="/personagem/marvel/Thor" class="list-group-item list-group-item-action">Thor</a>
|
||||
<a href="/personagem/marvel/Homem-Aranha" class="list-group-item list-group-item-action">Homem-Aranha</a>
|
||||
</div>
|
||||
|
||||
<a href="/" class="btn btn-outline-secondary">← Voltar para a Página Inicial</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
res.send(layout('Marvel Comics', conteudo));
|
||||
});
|
||||
|
||||
// 2. Rotas das empresas – Rota /dc
|
||||
app.get('/dc', (req, res) => {
|
||||
const conteudo =
|
||||
` <div class="card border-primary shadow-sm mb-4">
|
||||
<div class="card-header bg-primary text-white fw-bold">
|
||||
DC Comics
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
A DC Comics abriga alguns dos maiores ícones míticos dos quadrinhos, como a Liga da Justiça e protetores de cidades clássicas como Gotham e Metrópolis.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4 mb-3">Personagens Disponíveis:</h5>
|
||||
<div class="list-group mb-4">
|
||||
<a href="/personagem/dc/Batman" class="list-group-item list-group-item-action">Batman</a>
|
||||
<a href="/personagem/dc/Superman" class="list-group-item list-group-item-action">Superman</a>
|
||||
</div>
|
||||
|
||||
<a href="/" class="btn btn-outline-secondary">← Voltar para a Página Inicial</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
res.send(layout('DC Comics', conteudo));
|
||||
});
|
||||
|
||||
// 3. Rota com parâmetros obrigatórios – /personagem/:empresa/:nome
|
||||
app.get('/personagem/:empresa/:nome', (req, res) => {
|
||||
const { empresa, nome } = req.params;
|
||||
const isMarvel = empresa.toLowerCase() === 'marvel';
|
||||
const corTema = isMarvel ? 'danger' : 'primary';
|
||||
|
||||
const conteudo =
|
||||
` <div class="card border-${corTema} shadow-sm">
|
||||
<div class="card-header bg-${corTema} text-white fw-bold">
|
||||
Ficha do Personagem
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title fw-bold">${nome}</h2>
|
||||
<p class="card-text">
|
||||
Editora / Universo:
|
||||
<span class="badge bg-${corTema} text-uppercase fs-6">${empresa}</span>
|
||||
</p>
|
||||
|
||||
<div class="mt-4 pt-3 border-top">
|
||||
<a href="/${empresa.toLowerCase()}" class="btn btn-outline-${corTema} me-2">
|
||||
← Ver todos da ${empresa.toUpperCase()}
|
||||
</a>
|
||||
<a href="/" class="btn btn-outline-secondary">Página Inicial</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
res.send(layout(`${nome} - Detalhes`, conteudo));
|
||||
});
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Servidor rodando em http://localhost:${PORT}`);
|
||||
});
|
||||
Reference in new issue
Block a user