-
Notifications
You must be signed in to change notification settings - Fork 0
/
tools.html
executable file
·159 lines (142 loc) · 7.83 KB
/
tools.html
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Consulta CEP e CNPJ com a ToolsDev. Ferramentas fáceis e rápidas para buscar informações de endereços e empresas.">
<meta name="keywords" content="CEP, CNPJ, consulta, ferramentas, ToolsDev">
<meta name="author" content="ToolsDev">
<title>ToolsDev | Ferramentas fáceis e rápidas para buscar informações, entre outras ferramentas.</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white flex flex-col min-h-screen"
style="background-image: url('/static/images/body.jpg'); background-size: cover; background-position: center;">
<!-- Navbar -->
<nav class="bg-[#4c4c4c] fixed w-full top-0 left-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between h-16 items-center">
<!-- Logo -->
<a href="/" class="flex items-center">
<img src="static/images/logo.svg" alt="ToolsDev Logo" class="h-8 w-auto">
</a>
<!-- Campo de Pesquisa -->
<div class="relative hidden md:block">
<input type="text" id="search-input" placeholder="Pesquisar..."
class="bg-white text-gray-900 p-2 pl-10 rounded-md w-80 border focus:outline-none focus:ring-2 focus:ring-[#5c5c5c]">
<button id="search-btn" class="absolute left-0 top-0 mt-2 ml-2 text-gray-500">
<i class="fas fa-search"></i>
</button>
</div>
<!-- Links de Navegação -->
<div class="hidden md:flex space-x-8">
<a href="/logout" class="text-white hover:text-pink-100">
<i class='bx bx-exit text-2xl'></i>
</a> <!-- Link de logout para desktop -->
</div>
<!-- Botão Menu Hamburguer (mobile) -->
<div class="flex items-center md:hidden">
<button id="menu-btn" class="hover:bg-[#5c5c5c] p-2 rounded">
<i class="fas fa-bars text-white"></i>
</button>
</div>
</div>
<!-- Links de Navegação (mobile) -->
<div id="mobile-menu" class="hidden md:hidden">
<a href="/logout" class="block px-4 py-2 text-white hover:text-pink-100">
<i class='bx bx-exit'></i> Sair
</a><!-- Link de logout para mobile -->
</div>
</nav>
<!-- Conteúdo da Página -->
<main class="flex-grow pt-20 container mx-auto p-8 overflow-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Card para CEP -->
<div class="bg-[#646464] p-6 rounded-lg border-[#ae32c4] border-double border-4 cursor-pointer hover:bg-[#5c5c5c]" id="cep-card"
data-title="Consulta CEP">
<h2 class="text-xl font-semibold text-[#eb96fa] flex items-center space-x-2">
<i class="fas fa-map-marker-alt"></i>
<span>Consulta de CEP</span>
</h2>
<p class="text-[#f3c6fc]">Clique para consultar informações de CEP.</p>
</div>
<!-- Card para CNPJ -->
<div class="bg-[#646464] p-6 rounded-lg border-[#ae32c4] border-double border-4 cursor-pointer hover:bg-[#5c5c5c]" id="cnpj-card"
data-title="Consulta CNPJ">
<h2 class="text-xl font-semibold text-[#eb96fa] flex items-center space-x-2">
<i class="fas fa-building"></i>
<span>Consulta de CNPJ</span>
</h2>
<p class="text-[#f3c6fc]">Clique para consultar informações de CNPJ.</p>
</div>
<div class="bg-[#646464] p-6 rounded-lg border-[#ae32c4] border-double border-4 cursor-pointer hover:bg-[#5c5c5c]" id="bank-card"
data-title="Consulta ISPB">
<h2 class="text-xl font-semibold text-[#eb96fa] flex items-center space-x-2">
<i class="fas fa-bank"></i>
<span>Consulta de ISPB Bancos</span>
</h2>
<p class="text-[#f3c6fc]">Clique para consultar informações de ISPB.</p>
</div>
</div>
</main>
<!-- Footer Fixo -->
<footer class="bg-[#4c4c4c] text-white py-4 mt-auto">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<!-- Seção de Logo e Copyright -->
<div class="mb-4 md:mb-0 text-center md:text-left">
<p class="text-sm mt-2">© ToolsDev. Todos os direitos reservados.</p>
</div>
<!-- Links de Navegação -->
<div class="flex space-x-4">
<a href="#" class="text-gray-300 hover:text-blue-400 flex items-center space-x-2">
<i class='bx bxl-github text-2xl'></i>
<span class="hidden md:inline"></span>
</a>
</div>
</div>
</div>
</footer>
<!-- Modal de Consulta CEP -->
<div id="cep-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex justify-center items-center">
<div class="bg-[#646464] p-8 rounded-lg shadow-lg max-w-md w-full">
<h2 class="text-2xl font-bold mb-4 text-white">Buscar CEP</h2>
<form id="cep-form">
<input type="text" id="cep" name="cep" placeholder="Digite o CEP"
class="border p-2 rounded mb-4 w-full">
<button type="submit" class="bg-sky-700 text-white p-2 rounded w-full">Buscar</button>
</form>
<div id="cep-result" class="bg-gray-100 p-4 rounded mt-4"></div>
<button id="close-cep-modal" class="mt-4 bg-red-500 text-white p-2 rounded w-full">Fechar</button>
</div>
</div>
<!-- Modal de Consulta ISPB -->
<div id="bank-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex justify-center items-center">
<div class="bg-[#646464] p-8 rounded-lg shadow-lg max-w-md w-full">
<h2 class="text-2xl font-bold mb-4 text-white">Buscar ISPB</h2>
<form id="bank-form">
<input type="text" id="bank" name="bank" placeholder="Digite o ISPB"
class="border p-2 rounded mb-4 w-full">
<button type="submit" class="bg-sky-700 text-white p-2 rounded w-full">Buscar</button>
</form>
<div id="code-result" class="bg-gray-100 p-4 rounded mt-4"></div>
<button id="close-bank-modal" class="mt-4 bg-red-500 text-white p-2 rounded w-full">Fechar</button>
</div>
</div>
<!-- Modal de Consulta CNPJ -->
<div id="cnpj-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex justify-center items-center">
<div class="bg-[#646464] p-8 rounded-lg shadow-lg max-w-md w-full">
<h2 class="text-2xl font-bold mb-4 text-white">Buscar CNPJ</h2>
<form id="cnpj-form">
<input type="text" id="cnpj" name="cnpj" placeholder="Digite o CNPJ"
class="border p-2 rounded mb-4 w-full">
<button type="submit" class="bg-sky-700 text-white p-2 rounded w-full">Buscar</button>
</form>
<div id="cnpj-result" class="bg-gray-100 p-4 rounded mt-4"></div>
<button id="close-cnpj-modal" class="mt-4 bg-red-500 text-white p-2 rounded w-full">Fechar</button>
</div>
</div>
<!-- Script para Toggle do Menu Mobile e Modais -->
<script src="static/main.js"></script>
</body>
</html>