Skip to content

Commit

Permalink
add ManutençãoHosp Novo design Home
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cruz-Andre
Cruz-Andre committed Mar 17, 2024
1 parent 3555890 commit b4a1850
Show file tree
Hide file tree
Showing 9 changed files with 513 additions and 72 deletions.
14 changes: 7 additions & 7 deletions Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@
<h3>Previsão de conclusão e entrega: Maio de 2024</h3>
<h3>Autor: André Cruz</h3>

![](https://progress-bar.dev/18/?title=Overal%20Progress)
![](https://progress-bar.dev/33/?title=Overal%20Progress)
<br>

<br>

<h3>A aplicação web possui(rá) as seguintes funcionalidades:</h3>

- Página inicial com as informações dos estoques de bolsas de sangue por tipo sanguíneo em cada hospital ![](https://progress-bar.dev/30/)
- Página de cadastro de usuários/doadores ![](https://progress-bar.dev/40/)
- Página de login de usuários ![](https://progress-bar.dev/40/)
- Página de cadastro de hospitais e quantidade de bolsas de sangue por tipo sanguíneo ![](https://progress-bar.dev/0/)
- Página inicial com as informações dos estoques de bolsas de sangue por tipo sanguíneo em cada hospital ![](https://progress-bar.dev/50/)
- Página de cadastro de usuários/doadores ![](https://progress-bar.dev/50/)
- Página de login de usuários ![](https://progress-bar.dev/50/)
- Página de Manutenção de hospitais ![](https://progress-bar.dev/50/)
- Página de Manutenção de usuários/doadores ![](https://progress-bar.dev/0/)
- Página de Manutenção de hospitais ![](https://progress-bar.dev/0/)
- Back-End CRUD ![](https://progress-bar.dev/0/)
- ~~Agendamento de doação de sangue~~

<h3>O projeto está em desenvolvimento utilizando as seguintes tecnologias:</h3>
Expand All @@ -34,5 +34,5 @@

# TO-DO
- ~~Novo logotipo;~~ :white_check_mark:
- Novo design e substituir o bootstrap/tailwind por CSS vanila
- ~~Novo design e substituir o bootstrap/tailwind por CSS vanila~~ :white_check_mark:
- As funcionalidades descritas acima.
89 changes: 66 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,98 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/jpg" href="img/logoBancoDeSangueNew.png">
<link rel="stylesheet" type="text/css" href="./styles/header.css">
<link rel="stylesheet" type="text/css" href="./styles/style.css">
<link rel="stylesheet" type="text/css" href="./styles/styleIndex.css">
<link rel="stylesheet" type="text/css" href="./styles/footer.css">
<title>Banco de Sangue</title>
</head>

<body>

<header>
<nav class="navbar">
<img src="img/logoBancoDeSangueNew.png" alt="logo Doação">
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#doacao">Locais de Doação</a></li>
<li><a href="#">Home</a></li>
<!-- <li><a href="#doacao">Locais de Doação</a></li> -->
</ul>
<ul class="login">
<li><a href="pages/login.html">Logar</a></li>
<li><a href="pages/cadastro.html">Cadastrar</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h1>Quantidade de Bolsas de Sangue por Tipo Sanguíneo</h1>
<div class="hospital">
<h2>Hospital A</h2>
<p>Tipo A: 50 bolsas</p>
<p>Tipo B: 30 bolsas</p>
<p>Tipo AB: 20 bolsas</p>
<p>Tipo O: 40 bolsas</p>
</div>
<div class="hospital">
<h2>Hospital B</h2>
<p>Tipo A: 40 bolsas</p>
<p>Tipo B: 25 bolsas</p>
<p>Tipo AB: 15 bolsas</p>
<p>Tipo O: 35 bolsas</p>
</div>
<section class="caixa">
<h2>Quantidade de Bolsas de Sangue por Tipo Sanguíneo</h2>
<label for="filtrarTabela">Filtre:</label>
<input type="text" name="filtro" value="" id="filtrarTabela" placeholder="Digite o nome do hospital">
<table>
<thead>
<tr>
<th rowspan="2">Hospital</th>
<th colspan="8">Tipo Sanguíneo</th>
</tr>
<tr>
<th>A+</th>
<th>A-</th>
<th>B+</th>
<th>B-</th>
<th>AB+</th>
<th>AB-</th>
<th>O+</th>
<th>O-</th>
</tr>
</thead>
<tbody id="tabelaHospitais">
<tr class="hospital" id="primeiroHospital">
<td class="infoNome">Santa Casa</td>
<td class="infoApos">1234</td>
<td class="infoAneg">5678</td>
<td class="infoBpos">9012</td>
<td class="infoBneg">1005</td>
<td class="infoABpos">2006</td>
<td class="infoABneg">3007</td>
<td class="infoOpos">4008</td>
<td class="infoOneg">5009</td>
</tr>

<tr class="hospital">
<td class="infoNome">Mãe de Deus</td>
<td class="infoApos">1234</td>
<td class="infoAneg">5678</td>
<td class="infoBpos">9012</td>
<td class="infoBneg">1005</td>
<td class="infoABpos">2006</td>
<td class="infoABneg">3007</td>
<td class="infoOpos">4008</td>
<td class="infoOneg">5009</td>
</tr>

<tr class="hospital">
<td class="infoNome">Pronto Socorro</td>
<td class="infoApos">1234</td>
<td class="infoAneg">5678</td>
<td class="infoBpos">9012</td>
<td class="infoBneg">1005</td>
<td class="infoABpos">2006</td>
<td class="infoABneg">3007</td>
<td class="infoOpos">4008</td>
<td class="infoOneg">5009</td>
</tr>
</tbody>
</table>
<!-- Adicione informações para outros hospitais aqui -->
</section>
</main>

<!-- Rodapé -->
<footer>
<p class="rodape__texto">&copy; André Cruz - <span id="ano"></span> - Doação de Sangue</p>
</footer>

<script type="module" src="./js/ano.js"></script>

</body>

</html>
12 changes: 11 additions & 1 deletion pages/cadastro.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<h2>Cadastro de Doadores</h2>
</div>

<div class="formCampos ">
<div class="formCampos">
<div class="formCamposDiv">
<div class="formCampoDivNome">
<label for="nomeCompleto">Nome Completo</label>
Expand Down Expand Up @@ -100,6 +100,16 @@ <h2>Cadastro de Doadores</h2>
>
</div>

<div class="formCampoDivDataNasc">
<label for="dataNasc">Data de Nascimento</label>
<input
type="date"
name="dataNasc"
id="dataNasc"
autocomplete="dataNasc"
>
</div>

<div class="formCampoDivEmail">
<label for="email">E-mail</label>
<input
Expand Down
160 changes: 160 additions & 0 deletions pages/manutencaoHospitais.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/jpg" href="img/logoBancoDeSangueNew.png">
<link rel="stylesheet" type="text/css" href="../styles/header.css">
<link rel="stylesheet" type="text/css" href="../styles/styleManutecaoHospital.css">
<link rel="stylesheet" type="text/css" href="../styles/footer.css">
<title>Banco de Sangue</title>
</head>

<body>

<header>
<nav class="navbar">
<img src="../img/logoBancoDeSangueNew.png" alt="logo Doação">
<ul class="menu">
<li><a href="#">Manutenção Hospital</a></li>
<!-- <li><a href="#doacao">Locais de Doação</a></li> -->
</ul>
<ul class="login">
<li><a href="#">Sair</a></li>
<!-- <li><a href="pages/cadastro.html">Cadastrar</a></li> -->
</ul>
</nav>
</header>

<main>
<section class="caixa">
<h2>Quantidade de Bolsas de Sangue por Tipo Sanguíneo</h2>
<label for="filtrarTabela">Filtre:</label>
<input type="text" name="filtro" value="" id="filtrarTabela" placeholder="Digite o nome do hospital">
<table>
<thead>
<tr>
<th rowspan="2">#</th>
<th rowspan="2">Hospital</th>
<th colspan="8">Tipo Sanguíneo</th>
</tr>
<tr>
<th>A+</th>
<th>A-</th>
<th>B+</th>
<th>B-</th>
<th>AB+</th>
<th>AB-</th>
<th>O+</th>
<th>O-</th>
</tr>
</thead>
<tbody id="tabelaHospitais">
<tr class="hospital" id="primeiroHospital">
<td class="infoCodigo">1</td>
<td class="infoNome">Santa Casa</td>
<td class="infoApos">1234</td>
<td class="infoAneg">5678</td>
<td class="infoBpos">9012</td>
<td class="infoBneg">1005</td>
<td class="infoABpos">2006</td>
<td class="infoABneg">3007</td>
<td class="infoOpos">4008</td>
<td class="infoOneg">5009</td>
</tr>

<tr class="hospital">
<td class="infoCodigo">2</td>
<td class="infoNome">Mãe de Deus</td>
<td class="infoApos">1234</td>
<td class="infoAneg">5678</td>
<td class="infoBpos">9012</td>
<td class="infoBneg">1005</td>
<td class="infoABpos">2006</td>
<td class="infoABneg">3007</td>
<td class="infoOpos">4008</td>
<td class="infoOneg">5009</td>
</tr>

<tr class="hospital">
<td class="infoCodigo">3</td>
<td class="infoNome">Pronto Socorro</td>
<td class="infoApos">1234</td>
<td class="infoAneg">5678</td>
<td class="infoBpos">9012</td>
<td class="infoBneg">1005</td>
<td class="infoABpos">2006</td>
<td class="infoABneg">3007</td>
<td class="infoOpos">4008</td>
<td class="infoOneg">5009</td>
</tr>
</tbody>
</table>
<button id="preencherHosp" class="botao btoPreencher">Preencher Campos</button>
<!-- Adicione informações para outros hospitais aqui -->
</section>

<section class="caixa">
<h2 id="tituloForm">Manutenção dos Hospitais</h2>
<ul id="mensagensErro">
<li></li>
</ul>
<form id="formAdiciona">
<div class="grupo1">
<label for="nomeHosp">Nome do Hospital:</label>
<input id="nomeHosp" name="nomeHosp" type="text" placeholder="Digite o nome do Hospital" class="campo">
</div>
<div class="grupo2">
<div class="sangueA">
<label for="Amais">Sangue A+</label>
<input id="Amais" name="Amais" type="number" class="campo campo-medio">

<label for="Amenos">Sangue A-</label>
<input id="Amenos" name="Amenos" type="number" class="campo campo-medio">
</div>

<div class="sangueB">
<label for="Bmais">Sangue B+</label>
<input id="Bmais" name="Bmais" type="number" class="campo campo-medio">

<label for="Bmenos">Sangue B-</label>
<input id="Bmenos" name="Bmenos" type="number" class="campo campo-medio">
</div>

<div class="sangueAB">
<label for="ABmais">Sangue AB+</label>
<input id="ABmais" name="ABmais" type="number" class="campo campo-medio">


<label for="ABmenos">Sangue AB-</label>
<input id="ABmenos" name="ABmenos" type="number" class="campo campo-medio">
</div>

<div class="sangueO">
<label for="Omais">Sangue O+</label>
<input id="Omais" name="Omais" type="number" class="campo campo-medio">

<label for="Omenos">Sangue O-</label>
<input id="Omenos" name="Omenos" type="number" class="campo campo-medio">
</div>
</div>

<div class="botoes">
<button id="atualizarHosp">Atualizar</button>
<button id="cadastrarHosp">Cadastrar</button>
</div>
</form>
</section>
</main>

<!-- Rodapé -->
<footer>
<p class="rodape__texto">&copy; André Cruz - <span id="ano"></span> - Doação de Sangue</p>
</footer>

<script type="module" src="./js/ano.js"></script>

</body>

</html>
4 changes: 2 additions & 2 deletions styles/cadastro.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,11 +119,11 @@ main {
grid-column: span 5 / span 5;
}

.formCampoDivTipo, .formCampoDivCEP {
.formCampoDivTipo, .formCampoDivCEP, .formCampoDivUF {
grid-column: span 2 / span 2;
}

.formCampoDivBairro, .formCampoDivCidade, .formCampoDivUF, .formCampoDivSenha {
.formCampoDivBairro, .formCampoDivCidade, .formCampoDivDataNasc, .formCampoDivSenha {
grid-column: span 3 / span 3;
}

Expand Down
20 changes: 13 additions & 7 deletions styles/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,19 @@ header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: space-around;
}

.navbar li {
display: inline;
margin-right: 20px;
.navbar ul {
margin: 0;
padding: 0;
}

.navbar li a:hover {
.navbar ul li {
list-style: none;
}

.navbar ul li a:hover {
color: #a35552;
}

Expand All @@ -35,6 +39,8 @@ header {

.login {
display: flex;
justify-content: end;
flex-wrap: wrap;
justify-content: center;
column-gap: 1rem;
font-size: 2rem;
}
}
Loading

0 comments on commit b4a1850

Please sign in to comment.