-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (136 loc) · 6.35 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="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Which Medicine</title>
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="icon" type="image/x-icon" href="assets/logo-flat.png">
<script src="boot.js"></script>
</head>
<body class="container-fluid">
<header class="row bg-light-grey">
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="assets/logo-small.png" alt="Logo Pequena" />
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header bg-light-grey">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body bg-light-grey">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3 gap-4">
<li class="nav-item d-md-none">
<a class="nav-link" href="pages/login/login.html">
<img class="perfil" src="assets/icon-profile.png" alt="Ícone de Perfil" />
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-active" aria-current="page" href="index.html">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/user-med-list/user-med-list.html">Medicamentos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/about/about.html">Sobre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/info/info.html">Informações</a>
</li>
<li class="nav-item ps-4 d-none d-md-block">
<a href="pages/login/login.html">
<img class="perfil" src="assets/icon-profile.png" alt="Ícone de Perfil" />
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<main class="row">
<div class="col-md-7 offset-md-2 d-flex flex-column justify-content-center align-items-center">
<figure class="mt-5">
<img class="img-fluid" src="assets/logo.png" alt="pílulas" />
</figure>
<h4 class="text-center mb-5" inert>Sua saúde em segurança</h4>
<div class="d-flex justify-content-center align-items-center">
<figure class="col-auto pb-5">
<img class="img-fluid" src="assets/vertical-vs.png" alt="VS" inert />
</figure>
<form>
<div class="d-flex flex-column gap-3 inputs-comparacao">
<select id="medicamento-1" class="form-select">
<option value="">Selecione um medicamento</option>
</select>
<select id="medicamento-2" class="form-select">
<option value="">Selecione um medicamento</option>
</select>
<button type="button" id="botao-comparacao-1" class="botao-comparacao text-btn d-none d-md-block">Comparar</button>
<button type="button" id="botao-comparacao-2" class="botao-comparacao text-btn-sm d-block d-md-none">Comparar</button>
<div class="modal fade modal-init" id="modal-erro" tabindex="-1" role="dialog"
aria-labelledby="modalErroLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content text-center">
<div class="modal-main">
<h5 class="modal-title" id="modalErroLabel">Medicamentos não encontrados</h5>
<div class="my-3">
<img src="./assets/error-icon.png" alt="Ícone de sucesso" style="width: 60px;">
</div>
<p>Verifique a ortografia e tente novamente.</p>
<p>Você pode sugerir a inclusão no seu perfil.</p>
<button id="fechar-btn" type="button" class="btn btn-primary mt-2"
data-bs-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<figure class="col-md-3 p-0 m-0 d-none d-xl-block">
<img class="img-fluid" src="assets/background-pill.png" alt="pílulas" />
</figure>
</main>
<section class="row bg-light-blue">
<div id="cards-noticias" class="container-fluid my-5 px-5 d-flex flex-wrap justify-content-center gap-5">
</div>
</section>
<footer class="row">
<div class="container d-flex justify-content-between align-items-center bg-secondary-blue">
<div class="copyright">
<p inert>Copyright © 2024 Which Medicine. Todos os direitos reservados.</p>
</div>
<div class="social-media-icons d-flex gap-3">
<a href="">
<img src="assets/icon-instagram.png" alt="Instagram" />
</a>
<a href="">
<img src="assets/icon-facebook.png" alt="Facebook" />
</a>
<a href="">
<img src="assets/icon-x.png" alt="X" />
</a>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>