Skip to content

Commit

Permalink
add cadastro page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cruz-Andre
Cruz-Andre committed Mar 2, 2024
1 parent a467b9f commit 0a31b7f
Show file tree
Hide file tree
Showing 5 changed files with 239 additions and 109 deletions.
109 changes: 109 additions & 0 deletions cadastro.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!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/styleCadastro.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Banco de Sangue</title>
</head>

<body>
<form>
<div class="space-y-12">
<div class="border-b border-gray-900/10 pb-12">
<h2 class="text-base font-semibold leading-7 text-gray-900">Cadastro de Doadores</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">This information will be displayed publicly so be careful what you share.</p>
</div>
</div>

<div class="border-b border-gray-900/10 pb-12">
<!-- <h2 class="text-base font-semibold leading-7 text-gray-900">Personal Information</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">Use a permanent address where you can receive mail.</p> -->

<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-5">
<div class="sm:col-span-5">
<label for="nomeCompleto" class="block text-sm font-medium leading-6 text-gray-900">Nome Completo</label>
<div class="mt-2">
<input type="text" name="nomeCompleto" id="nomeCompleto" autocomplete="nomeCompleto"
class="block w-full p-3 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-4 focus:ring-[#9B0602] focus:outline-none sm:leading-6">
</div>
</div>

<div class="sm:col-span-2">
<label for="tipoSangue" class="block text-sm font-medium leading-6 text-gray-900">Tipo Sanguíneo</label>
<div class="mt-2">
<input id="tipoSangue" name="tipoSangue" type="text" autocomplete="tipoSangue"
class="block w-full p-3 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-4 focus:ring-[#9B0602] focus:outline-none sm:leading-6">
</div>
</div>

<div class="sm:col-span-5">
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">E-mail</label>
<div class="mt-2">
<input id="email" name="email" type="email" autocomplete="email"
class="block w-full p-3 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-4 focus:ring-[#9B0602] focus:outline-none sm:leading-6">
</div>
</div>

<div class="col-span-3">
<label for="bairro" class="block text-sm font-medium leading-6 text-gray-900">Bairro</label>
<div class="mt-2">
<input type="text" name="bairro" id="bairro" autocomplete="bairro"
class="block w-full p-3 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-4 focus:ring-[#9B0602] focus:outline-none sm:leading-6">
</div>
</div>

<div class="sm:col-span-3">
<label for="cidade" class="block text-sm font-medium leading-6 text-gray-900">Cidade</label>
<div class="mt-2">
<input type="text" name="cidade" id="cidade" autocomplete="cidade"
class="block w-full p-3 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-4 focus:ring-[#9B0602] focus:outline-none sm:leading-6">
</div>
</div>

<div class="sm:col-span-3">
<label for="estado" class="block text-sm font-medium leading-6 text-gray-900">Estado</label>
<div class="mt-2">
<input type="text" name="estado" id="estado" autocomplete="estado"
class="block w-full p-3 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-4 focus:ring-[#9B0602] focus:outline-none sm:leading-6">
</div>
</div>

<div class="sm:col-span-2">
<label for="postal-code" class="block text-sm font-medium leading-6 text-gray-900">ZIP / Postal
code</label>
<div class="mt-2">
<input type="text" name="postal-code" id="postal-code" autocomplete="postal-code"
class="block w-full p-3 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-4 focus:ring-[#9B0602] focus:outline-none sm:leading-6">
</div>
</div>
</div>
</div>
</div>

<div class="mt-6 flex items-center justify-end gap-x-6">
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
<button
type="submit"
class="rounded-md
bg-[#9B0602]
px-3 py-2
text-sm
font-semibold
text-white
shadow-sm
hover:bg-[#9B0602]
focus-visible:outline
focus-visible:outline-2
focus-visible:outline-offset-2"
>
Save
</button>
</div>
</form>
</body>

</html>
90 changes: 47 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,53 +2,57 @@
<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/style.css">
<title>Banco de Sangue</title>
<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/style.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="#agendar">Agendar Doação</a></li>
</ul>
<ul class="login">
<li><a href="login.html">Logar</a></li>
<!-- <li><a href="#cadastro">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>
<!-- Adicione informações para outros hospitais aqui -->
</section>
</main>
<footer>
<p class="rodape__texto">&copy; André Cruz - <span id="ano"></span> Doação de Sangue</p>
</footer>

<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="#agendar">Agendar Doação</a></li>
</ul>
<ul class="login">
<li><a href="login.html">Logar</a></li>
<!-- <li><a href="#cadastro">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>
<!-- Adicione informações para outros hospitais aqui -->
</section>
</main>

<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>
<script type="module" src="./js/ano.js"></script>

</body>

</html>
60 changes: 30 additions & 30 deletions login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,41 @@
<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">
<script src="https://cdn.tailwindcss.com"></script>
<title>Banco de Sangue</title>
<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">
<script src="https://cdn.tailwindcss.com"></script>
<title>Banco de Sangue</title>
</head>

<body>
<div class="min-h-screen bg-gray-100 flex items-center justify-center">
<div class="bg-white p-8 rounded-lg shadow-lg w-[400px]" id="miq9gmx5qk8">
<div class="flex justify-center mb-4">
<img src="img/logoBancoDeSangueNew.png" width="100" height="100" alt="Logo"
class="object-contain object-center" style="aspect-ratio: 100 / 100; object-fit: cover;" />
</div>
<h2 class="text-2xl font-bold text-center mb-8">Faça seu Login</h2>
<form class="space-y-6">
<div>
<label class="text-sm font-medium text-gray-700 block mb-2" for="nome">
Usuário
</label>
<input class="w-full p-3 border border-gray-300 rounded-md" id="nome" placeholder="" type="text" />
</div>
<div>
<label class="text-sm font-medium text-gray-700 block mb-2" for="senha">
Senha
</label>
<input class="w-full p-3 border border-gray-300 rounded-md" id="senha" placeholder="" type="password" />
</div>
<button
class="inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 w-full bg-[#9B0602] text-white py-3 rounded-md hover:bg-red-600 font-bold text-lg">
Entrar
</button>
</form>
<div class="min-h-screen bg-gray-100 flex items-center justify-center">
<div class="bg-white p-8 rounded-lg shadow-lg w-[400px]" id="miq9gmx5qk8">
<div class="flex justify-center mb-4">
<img src="img/logoBancoDeSangueNew.png" width="100" height="100" alt="Logo" class="object-contain object-center"
style="aspect-ratio: 100 / 100; object-fit: cover;" />
</div>
<h2 class="text-2xl font-bold text-center mb-8">Faça seu Login</h2>
<form class="space-y-6">
<div>
<label class="text-sm font-medium text-gray-700 block mb-2" for="usuario">
Usuário
</label>
<input class="w-full p-3 border border-gray-300 rounded-md" id="usuario" placeholder="" type="text" />
</div>
<div>
<label class="text-sm font-medium text-gray-700 block mb-2" for="senha">
Senha
</label>
<input class="w-full p-3 border border-gray-300 rounded-md" id="senha" placeholder="" type="password" />
</div>
<button
class="inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 w-full bg-[#9B0602] text-white py-3 rounded-md hover:bg-red-600 font-bold text-lg">
Entrar
</button>
</form>
</div>
</div>
</body>

</html>
Loading

0 comments on commit 0a31b7f

Please sign in to comment.