-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (135 loc) · 5.09 KB
/
index.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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
<title>Menu Principal</title>
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- Bootstrap Icons (opcional) -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
rel="stylesheet"
/>
</head>
<body class="bg-light">
<!-- Container principal (sem vh-100) para permitir rolagem em telas muito altas/estreitas -->
<div class="container py-5">
<!-- Logo centralizada -->
<div class="text-center mb-4">
<img
src="assets/img/logo.svg"
alt="Logo"
class="img-fluid"
style="max-width: 150px"
/>
</div>
<!-- Grade de opções -->
<!-- Usando col-12 no XS, col-sm-6 no SM, col-md-4 no MD, col-lg-3 no LG, etc. -->
<div class="row g-3 justify-content-center text-center">
<!-- Reservatórios -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<a
href="reservatorios.html"
class="btn btn-light p-4 w-100 d-flex flex-column align-items-center justify-content-center shadow"
style="border-radius: 1rem"
>
<i class="bi bi-water fs-1"></i>
<span class="mt-2 fw-semibold">Reservatórios</span>
</a>
</div>
<!-- Estação Fluviométricas -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<button
class="btn btn-light p-4 w-100 d-flex flex-column align-items-center justify-content-center shadow"
style="border-radius: 1rem"
>
<i class="bi bi-droplet fs-1"></i>
<span class="mt-2 fw-semibold">Estação Fluviométricas</span>
</button>
</div>
<!-- Previsão do Tempo e Precipitação -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<button
class="btn btn-light p-4 w-100 d-flex flex-column align-items-center justify-content-center shadow"
style="border-radius: 1rem"
>
<i class="bi bi-cloud-sun fs-1"></i>
<span class="mt-2 fw-semibold"
>Previsão do Tempo e Precipitação</span
>
</button>
</div>
<!-- Demanda Hídrica -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<button
class="btn btn-light p-4 w-100 d-flex flex-column align-items-center justify-content-center shadow"
style="border-radius: 1rem"
>
<i class="bi bi-graph-up fs-1"></i>
<span class="mt-2 fw-semibold">Demanda Hídrica</span>
</button>
</div>
<!-- Balanço Hídrico -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<button
class="btn btn-light p-4 w-100 d-flex flex-column align-items-center justify-content-center shadow"
style="border-radius: 1rem"
>
<i class="bi bi-bar-chart fs-1"></i>
<span class="mt-2 fw-semibold">Balanço Hídrico</span>
</button>
</div>
<!-- Índice de Seca -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<button
class="btn btn-light p-4 w-100 d-flex flex-column align-items-center justify-content-center shadow"
style="border-radius: 1rem"
>
<i class="bi bi-thermometer-sun fs-1"></i>
<span class="mt-2 fw-semibold">Índice de Seca</span>
</button>
</div>
<!-- Queimadas -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<a
class="btn btn-light p-4 w-100 d-flex flex-column align-items-center justify-content-center shadow"
style="border-radius: 1rem"
>
<i class="bi bi-fire fs-1"></i>
<span class="mt-2 fw-semibold">Queimadas</span>
</a>
</div>
<!-- Boletins -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<a
href="boletim.html"
class="btn btn-light p-4 w-100 d-flex flex-column align-items-center justify-content-center shadow"
style="border-radius: 1rem"
>
<i class="bi bi-journal-text fs-1"></i>
<span class="mt-2 fw-semibold">Boletins</span>
</a>
</div>
<!-- Links Úteis -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<button
class="btn btn-light p-4 w-100 d-flex flex-column align-items-center justify-content-center shadow"
style="border-radius: 1rem"
>
<i class="bi bi-link-45deg fs-1"></i>
<span class="mt-2 fw-semibold">Links Úteis</span>
</button>
</div>
</div>
</div>
<!-- Scripts Bootstrap (se precisar) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>