riseup-squad21/clinicApp/layout padrao.html

112 lines
5.9 KiB
HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Crud + Layout</title>
<link rel="stylesheet" href="global.css" />
<!-- css da página -->
<link rel="stylesheet" href="#" />
</head>
<body>
<main>
<!-- Overlay só aparece em mobile quando menu está ativo -->
<div class="overlay" id="overlay"></div>
<div class="flex">
<!-- Botão hambúrguer só aparece em mobile -->
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
<div class="div-sidebar">
<div class="abas">
<a href="#" aria-label="Página inicial" class="logo1">
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
</a>
<ul>
<li>
<a href="pages/pacientes/paciente.html" aria-label="Pacientes">
<img src="/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
<p>Pacientes</p>
</a>
</li>
<li>
<a href="pages/dashboard/dashboard.html" aria-label="Pacientes">
<img src="/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
<p>Dashboard</p>
</a>
</li>
<li>
<a href="pages/agendamento/agendamento.html" aria-label="Cadastro de usuários">
<img src="/clinicApp/assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
<p>Médicos</p>
</a>
</li>
<li>
<a href="pages/laudo/laudoMedico.html" aria-label="Documentos">
<img src="/clinicApp/assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
<p>Laúdos</p>
</a>
</li>
<li>
<a href="#" aria-label="Documentos">
<img src="assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
<p>Agenda</p>
</a>
</li>
<li>
<a href="#" aria-label="Configurações">
<img src="assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
<p>Settings</p>
</a>
</li>
</ul>
</div>
<div class="perfil-medico-sidebar">
<h3>Dr. Rafael Andrade</h3>
<p>Núcleo de Especialidades</p>
</div>
</div>
</section>
<section class="section-main">
<nav class="nav" role="banner">
<div class="div-search">
<input type="text" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
<button class="search-button" aria-label="Buscar">
<img src="assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
</button>
</div>
<div>
<ul class="icon-lista">
<li>
<a href="#" aria-label="Ajuda"><img src="assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
</li>
<li>
<button id="music" aria-label="Notificações"><img src="assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
</li>
<!--button ta gerando um fundo branco, botei ID pra retirar o background-->
<li>
<a href="#" aria-label="Perfil do usuário"><img src="assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
</li>
</ul>
</div>
</nav>
<div class="main-contain">
<h1>Gerenciador</h1>
</div>
</section>
</div>
</main>
<script src="scriptGlobal.js"></script>
</body>
</html>