Rest_APItutorial/index.html at main · Neto-User/Rest_APItutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guia de APIs – Lobby</title>
    <!-- Inclui o CDN do Tailwind CSS para estilização moderna e responsiva -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Link para o arquivo CSS externo -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-container">
        <!-- Título principal da página -->
        <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900 mb-12 text-center leading-tight">
            Guia de APIs – Lobby
        </h1>

        <!-- Menu de Navegação - Grid Responsivo -->
        <nav class="w-full max-w-4xl px-4">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Botão/Link: O que é Cache -->
                <a href="CacheExplorer/index.html" class="btn-link block p-6 bg-white rounded-xl shadow-md hover:bg-indigo-50 hover:border-indigo-300 border border-gray-200 text-center">
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">O que é Cache de Servidor?</h2>
                    <p class="text-gray-600 text-sm">Entenda como o cache otimiza o desempenho.</p>
                </a>

                <!-- Botão/Link: Swagger -->
                <a href="swaggerPage/index.html" class="btn-link block p-6 bg-white rounded-xl shadow-md hover:bg-indigo-50 hover:border-indigo-300 border border-gray-200 text-center">
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">Swagger</h2>
                    <p class="text-gray-600 text-sm">O Menu de Restaurante para Desenvolvedores.</p>
                </a>

                <!-- Botão/Link: HTTP e HTTPS -->
                <a href="HTTP vs HTTPS/index.html" class="btn-link block p-6 bg-white rounded-xl shadow-md hover:bg-indigo-50 hover:border-indigo-300 border border-gray-200 text-center">
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">Entendendo o HTTP e HTTPS</h2>
                    <p class="text-gray-600 text-sm">Diferenças e importância da segurança.</p>
                </a>

                <!-- Botão/Link: O que é R8OS -->
                <a href="HateoasPage/index.html" class="btn-link block p-6 bg-white rounded-xl shadow-md hover:bg-indigo-50 hover:border-indigo-300 border border-gray-200 text-center">
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">Explorando o HATEOAS</h2>
                    <p class="text-gray-600 text-sm">Hypermedia como o Motor do Estado da Aplicação.</p>
                </a>

                <!-- Botão/Link: WebServices -->
                <a href="WebservicesPage/index.html" class="btn-link block p-6 bg-white rounded-xl shadow-md hover:bg-indigo-50 hover:border-indigo-300 border border-gray-200 text-center">
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">WebServices</h2>
                    <p class="text-gray-600 text-sm">Entenda o universo dos WebServices.</p>
                </a>

                <!-- Botão/Link: REST e SOAP -->
                <a href="Rest-SoupPage/index.html" class="btn-link block p-6 bg-white rounded-xl shadow-md hover:bg-indigo-50 hover:border-indigo-300 border border-gray-200 text-center">
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">REST e SOAP</h2>
                    <p class="text-gray-600 text-sm">Compare e contraste as arquiteturas.</p>
                </a>

                <!-- Botão/Link: Parâmetros de uma API -->
                <a href="ParâmetrosApi/index.html" class="btn-link block p-6 bg-white rounded-xl shadow-md hover:bg-indigo-50 hover:border-indigo-300 border border-gray-200 text-center">
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">Parâmetros de API</h2>
                    <p class="text-gray-600 text-sm">Path, Query, Body e Header.</p>
                </a>

                <!-- Botão/Link: Verbos HTTP -->
                <a href="VerbosHTTP/index.html" class="btn-link block p-6 bg-white rounded-xl shadow-md hover:bg-indigo-50 hover:border-indigo-300 border border-gray-200 text-center">
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">Verbos HTTP</h2>
                    <p class="text-gray-600 text-sm">Conheça as ações padrão do HTTP.</p>
                </a>
            </div>
        </nav>
    </div>

    <!-- Rodapé da página -->
    <footer class="w-full bg-gray-100 py-4 mt-auto text-center text-gray-600 text-sm border-t border-gray-200">
        <p>&copy; 2025 &#x1F4BB; <a href="https://github.com/Neto-User" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline">github.com/Neto-User</a></p>
    </footer>

    <!-- Link para o arquivo JavaScript externo (opcional, pode ser adicionado se precisar de JS customizado) -->
    <script src="script.js"></script>
</body>
</html>