Skip to content

Commit d7a3763

Browse files
Neto-UserNeto-User
committed
add file
1 parent 542e7e2 commit d7a3763

3 files changed

Lines changed: 174 additions & 0 deletions

File tree

‎swaggerPage/index.html‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Swagger: O Menu dos Desenvolvedores</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
<body class="antialiased">
14+
15+
<header class="text-center py-12 md:py-20 bg-white">
16+
<div class="container mx-auto px-6">
17+
<h1 class="text-4xl md:text-6xl font-bold accent-text mb-4">Swagger</h1>
18+
<p class="text-xl md:text-2xl text-gray-700">O Menu de Restaurante para Desenvolvedores</p>
19+
</div>
20+
</header>
21+
22+
<main class="container mx-auto px-6 py-12">
23+
24+
<section id="analogy" class="mb-20">
25+
<div class="text-center mb-12">
26+
<h2 class="text-3xl font-bold mb-2">A Analogia do Restaurante</h2>
27+
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Para entender o Swagger, imagine que uma API é a cozinha de um restaurante. Ela prepara e entrega os "pratos" (dados) que outras aplicações pedem.</p>
28+
</div>
29+
<div class="grid md:grid-cols-2 gap-8 items-stretch">
30+
<div class="card p-8">
31+
<div class="flex items-center mb-4">
32+
<span class="text-5xl mr-4">🍽️</span>
33+
<h3 class="text-2xl font-semibold">O Restaurante</h3>
34+
</div>
35+
<ul class="space-y-4 text-gray-700">
36+
<li><strong class="accent-text">Cardápio:</strong> Lista todos os pratos disponíveis.</li>
37+
<li><strong class="accent-text">Pratos:</strong> As comidas que você pode pedir (Ex: Filé de Frango).</li>
38+
<li><strong class="accent-text">Ingredientes:</strong> O que vem em cada prato (Ex: Arroz, batatas).</li>
39+
<li><strong class="accent-text">Pedido:</strong> Como pedir ao garçom (Ex: "Quero um filé").</li>
40+
</ul>
41+
</div>
42+
<div class="card p-8">
43+
<div class="flex items-center mb-4">
44+
<span class="text-5xl mr-4">💻</span>
45+
<h3 class="text-2xl font-semibold">A API com Swagger</h3>
46+
</div>
47+
<ul class="space-y-4 text-gray-700">
48+
<li><strong class="accent-text">Documentação Swagger:</strong> O "menu" digital e interativo da API.</li>
49+
<li><strong class="accent-text">Endpoints:</strong> As "ações" que você pode solicitar (Ex: `/pessoas`).</li>
50+
<li><strong class="accent-text">Resposta:</strong> Os dados que a API retorna (Ex: Nome, idade).</li>
51+
<li><strong class="accent-text">Requisição:</strong> Como solicitar a informação (Ex: Enviar um ID).</li>
52+
</ul>
53+
</div>
54+
</div>
55+
</section>
56+
57+
<section id="features" class="mb-20">
58+
<div class="text-center mb-12">
59+
<h2 class="text-3xl font-bold mb-2">O Cardápio Interativo</h2>
60+
<p class="text-lg text-gray-600 max-w-3xl mx-auto">O Swagger cria uma página web que funciona como um menu completo e funcional. Clique nas abas abaixo para explorar o que ele oferece.</p>
61+
</div>
62+
<div class="max-w-4xl mx-auto">
63+
<div class="flex flex-wrap justify-center gap-2 mb-6">
64+
<button data-tab="endpoints" class="tab-button active text-sm md:text-base font-semibold py-2 px-4 rounded-full transition-colors duration-300">O que a API oferece?</button>
65+
<button data-tab="request" class="tab-button text-sm md:text-base font-semibold py-2 px-4 rounded-full transition-colors duration-300">Como "pedir"?</button>
66+
<button data-tab="response" class="tab-button text-sm md:text-base font-semibold py-2 px-4 rounded-full transition-colors duration-300">O que você recebe?</button>
67+
<button data-tab="test" class="tab-button text-sm md:text-base font-semibold py-2 px-4 rounded-full transition-colors duration-300">Experimente na Hora!</button>
68+
</div>
69+
<div class="card p-8 min-h-[12rem]">
70+
<div id="endpoints" class="tab-content active">
71+
<h4 class="text-xl font-bold accent-text mb-2">Endpoints: Os "Pratos" da API</h4>
72+
<p class="text-gray-700">O Swagger lista todas as operações disponíveis, como buscar usuários (`/usuarios`), criar um novo livro (`/livros`) ou deletar um produto (`/produtos`). É a lista completa do que a "cozinha" pode preparar para você.</p>
73+
</div>
74+
<div id="request" class="tab-content">
75+
<h4 class="text-xl font-bold accent-text mb-2">Requisições: Fazendo o Pedido</h4>
76+
<p class="text-gray-700">Para cada endpoint, o Swagger detalha exatamente o que você precisa enviar. Por exemplo, para buscar um usuário específico, ele informa que você precisa fornecer um `ID` numérico. Não há como errar o pedido.</p>
77+
</div>
78+
<div id="response" class="tab-content">
79+
<h4 class="text-xl font-bold accent-text mb-2">Respostas: O Prato que Chega à Mesa</h4>
80+
<p class="text-gray-700">Ele mostra a estrutura exata dos dados que você receberá de volta. Se você pedir por um usuário, saberá que receberá um objeto contendo `nome`, `idade` e `email`. Sem surpresas no que vem no prato.</p>
81+
</div>
82+
<div id="test" class="tab-content">
83+
<h4 class="text-xl font-bold accent-text mb-2">Teste Interativo: A "Prova" do Prato</h4>
84+
<p class="text-gray-700">A melhor parte: você pode fazer requisições de teste diretamente na página da documentação. É como provar uma amostra do prato antes de pedi-lo, garantindo que é exatamente o que você espera.</p>
85+
</div>
86+
</div>
87+
</div>
88+
</section>
89+
90+
<section id="importance" class="mb-20">
91+
<div class="text-center mb-12">
92+
<h2 class="text-3xl font-bold mb-2">Por que isso é tão importante?</h2>
93+
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Swagger resolve um grande problema no mundo do desenvolvimento: a documentação manual, que é propensa a erros e desatualização.</p>
94+
</div>
95+
<div class="grid md:grid-cols-2 gap-8">
96+
<div class="card p-8 border-t-4 border-red-400">
97+
<h3 class="text-2xl font-semibold text-red-500 mb-4">❌ Antes do Swagger</h3>
98+
<div class="space-y-4 text-gray-700">
99+
<p><strong class="font-semibold">Processo Manual:</strong> A documentação era feita em arquivos de texto ou planilhas. Qualquer mudança na API exigia uma atualização manual, que muitas vezes era esquecida.</p>
100+
<p><strong class="font-semibold">Documentação Desatualizada:</strong> Desenvolvedores consumiam a API baseados em um "cardápio" antigo. Pediam um prato com arroz, mas ele agora vinha com purê. Isso causava bugs e frustração.</p>
101+
</div>
102+
</div>
103+
<div class="card p-8 border-t-4 border-green-400">
104+
<h3 class="text-2xl font-semibold text-green-500 mb-4">✅ Com o Swagger</h3>
105+
<div class="space-y-4 text-gray-700">
106+
<p><strong class="font-semibold">Processo Automático:</strong> O Swagger gera a documentação a partir do próprio código da API. Se o "chef" (desenvolvedor) muda um ingrediente, o cardápio é atualizado instantaneamente.</p>
107+
<p><strong class="font-semibold">Fonte Única da Verdade:</strong> O cardápio é sempre um reflexo fiel da cozinha. O que você vê é exatamente o que você recebe, criando um contrato claro e confiável entre a API e quem a utiliza.</p>
108+
</div>
109+
</div>
110+
</div>
111+
</section>
112+
113+
</main>
114+
115+
<footer class="secondary-bg py-8">
116+
<div class="container mx-auto px-6 text-center text-gray-600">
117+
<p class="font-bold text-lg mb-2">Swagger transforma o caos em organização.</p>
118+
<p>Ele cria um sistema claro, automatizado e eficiente, simplificando a vida de todos os desenvolvedores envolvidos.</p>
119+
</div>
120+
</footer>
121+
122+
<script src="script.js"></script>
123+
</body>
124+
</html>

‎swaggerPage/script.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const tabButtons = document.querySelectorAll('.tab-button');
2+
const tabContents = document.querySelectorAll('.tab-content');
3+
4+
tabButtons.forEach(button => {
5+
button.addEventListener('click', () => {
6+
const tabId = button.dataset.tab;
7+
8+
tabButtons.forEach(btn => {
9+
btn.classList.remove('active');
10+
});
11+
button.classList.add('active');
12+
13+
tabContents.forEach(content => {
14+
if (content.id === tabId) {
15+
content.classList.add('active');
16+
} else {
17+
content.classList.remove('active');
18+
}
19+
});
20+
});
21+
});

‎swaggerPage/style.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
body {
2+
font-family: 'Inter', sans-serif;
3+
background-color: #F8F9FA;
4+
color: #212529;
5+
}
6+
.accent-bg { background-color: #007BFF; }
7+
.accent-text { color: #007BFF; }
8+
.accent-border { border-color: #007BFF; }
9+
.secondary-bg { background-color: #E9ECEF; }
10+
.card {
11+
background-color: white;
12+
border-radius: 0.75rem;
13+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
14+
transition: transform 0.3s ease, box-shadow 0.3s ease;
15+
}
16+
.card:hover {
17+
transform: translateY(-5px);
18+
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
19+
}
20+
.tab-button.active {
21+
background-color: #007BFF;
22+
color: white;
23+
}
24+
.tab-content {
25+
display: none;
26+
}
27+
.tab-content.active {
28+
display: block;
29+
}

0 commit comments

Comments
 (0)