178 lines
6.3 KiB
JavaScript
178 lines
6.3 KiB
JavaScript
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}`);
|
||
});
|