Index page finalizada

Skycosta · Apr 11, 2024 · 2646d72 · 2646d72
1 parent 485cb82
commit 2646d72
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 112 deletions.
diff --git a/cadastrar_consulta.html b/cadastrar_consulta.html
@@ -11,8 +11,6 @@
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="menu-lateral.css">
 </head>
-
-
 <body>
     <nav id="menu-lateral">
         <span class="btn-accordion">
@@ -37,23 +35,14 @@ <h2>PORTAL MED</h2>
             </ul>
             <a href="login.html">Sair</a>
         </div>
-        <script>
-            $(".btn-accordion").on("click", () => {
-                $(".btn-accordion img").toggleClass("invert");
-                $("#menu-lateral").toggleClass("hidden");
-            })
-        </script>
+        <script src="script-navbar.js"></script>
     </nav>
-
-
-    <header>
-        <div class="header-content">
-            <h1><img src="./assets/imagem_cadastrar_consulta.png" alt="Consultas"> Cadastrar nova consulta </h1>
-        </div>
-    </header>
-
     <main>
-
+        <header>
+            <div class="header-content">
+                <h1><img src="./assets/imagem_cadastrar_consulta.png" alt="Consultas"> Cadastrar nova consulta </h1>
+            </div>
+        </header>
         <div class="section-wrapper">
             <div class="filter-section">
                 <h1>Escolha a <span style="color: #5978E5;">especialidade</span> e siga sua prioridade. <br> Os profissionais serão listados por <span style="color: #5978E5;">ordem de disponibilidade</span></h1>

diff --git a/cadastro_medico.html b/cadastro_medico.html
@@ -35,22 +35,14 @@ <h2>PORTAL MED</h2>
             </ul>
             <a href="login.html">Sair</a>
         </div>
-        <script>
-            $(".btn-accordion").on("click", () => {
-                $(".btn-accordion img").toggleClass("invert");
-                $("#menu-lateral").toggleClass("hidden");
-            })
-        </script>
+        <script src="script-navbar.js"></script>
     </nav>
-
-    <header>
-        <div class="header-content">
-            <h1><img src="./assets/imagem_pacientes.png" alt="Consultas"> Cadastrar novo paciente </h1>
-        </div>
-    </header>
-
     <main>
-
+        <header>
+            <div class="header-content">
+                <h1><img src="./assets/imagem_pacientes.png" alt="Consultas"> Cadastrar novo paciente </h1>
+            </div>
+        </header>
         <div class="section-wrapper">
             <div class="filter-section">
                 <h1>Dados Pessoais</h1>
@@ -81,7 +73,6 @@ <h1>Dados Pessoais</h1>
                     </div>    
                 </div>
             </div>
-
             <div class="filter-section">
                 <h1>Dados de Contato</h1>
                 <div class="filter-container">
@@ -117,10 +108,10 @@ <h1>Dados Complementares</h1>
                 </div>
             </div>
         </div>
+        <footer>
+            <button class="cadastrar-button"> <a href="./cadasto_sucesso.html">Cadastrar médico</a></button>
+            <img src="assets/imagem_logo.png" alt="Logo do Aplicativo" class="logo-footer">
+        </footer>
     </main>
-    <footer>
-        <button class="cadastrar-button"> <a href="./cadasto_sucesso.html">Cadastrar médico</a></button>
-        <img src="assets/imagem_logo.png" alt="Logo do Aplicativo" class="logo-footer">
-    </footer>
 </body>
 </html>
diff --git a/cadastro_paciente.html b/cadastro_paciente.html
@@ -36,14 +36,8 @@ <h2>PORTAL MED</h2>
             </ul>
             <a href="login.html">Sair</a>
         </div>
-        <script>
-            $(".btn-accordion").on("click", () => {
-                $(".btn-accordion img").toggleClass("invert");
-                $("#menu-lateral").toggleClass("hidden");
-            })
-        </script>
+        <script src="script-navbar.js"></script>
     </nav>
-
     <main>
         <div class="section-wrapper">
             <div class="filter-section">
@@ -107,10 +101,10 @@ <h1>Dados Complementares</h1>
                 </div>
             </div>
         </div>
+        <footer>
+            <button class="cadastrar-button"> <a href="./cadasto_sucesso.html">Cadastrar paciente</a></button>
+            <img src="assets/imagem_logo.png" alt="Logo do Aplicativo" class="logo-footer">
+        </footer>
     </main>
-    <footer>
-        <button class="cadastrar-button"> <a href="./cadasto_sucesso.html">Cadastrar paciente</a></button>
-        <img src="assets/imagem_logo.png" alt="Logo do Aplicativo" class="logo-footer">
-    </footer>
 </body>
 </html>
diff --git a/cadastro_sucesso.html b/cadastro_sucesso.html
@@ -36,23 +36,14 @@ <h2>PORTAL MED</h2>
             </ul>
             <a href="login.html">Sair</a>
         </div>
-        <script>
-            $(".btn-accordion").on("click", () => {
-                $(".btn-accordion img").toggleClass("invert");
-                $("#menu-lateral").toggleClass("hidden");
-            })
-        </script>
-    </nav>
-
-
-    <header>
-        <div class="header-content">
-            <h1><img src="./assets/imagem_cadastrar_consulta.png" alt="Consultas"> Novo Cadastro </h1>
-        </div>
-    </header>
-
+        <script src="script-navbar.js"></script>
+    </nav>    
     <main>
-
+        <header>
+            <div class="header-content">
+                <h1><img src="./assets/imagem_cadastrar_consulta.png" alt="Consultas"> Novo Cadastro </h1>
+            </div>
+        </header>
         <div class="section-wrapper">
             <div class="filter-section">
                 <H1><img src="./assets/cadastro_sucesso.png" alt="Cadastro-com-sucesso"></H1>
@@ -61,10 +52,10 @@ <h1><span style="color: #5978E5;">Cadastro realizado com sucesso!</span></h1>
                 </div>
             </div>
         </div>
+        <footer>
+            <button class="cadastrar-button"><a href="index.html">Voltar</a></button>
+            <img src="assets/imagem_logo.png" alt="Logo do Aplicativo" class="logo-footer">
+        </footer>
     </main>
-    <footer>
-        <button class="cadastrar-button"><a href="index.html">Voltar</a></button>
-        <img src="assets/imagem_logo.png" alt="Logo do Aplicativo" class="logo-footer">
-    </footer>
 </body>
 </html>
diff --git a/consultas.html b/consultas.html
@@ -7,12 +7,10 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
-    <title>Portal Med</title>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="menu-lateral.css">
+    <title>Portal Med</title>
 </head>
-
-
 <body>
     <nav id="menu-lateral">
         <span class="btn-accordion">
@@ -37,22 +35,15 @@ <h2>PORTAL MED</h2>
             </ul>
             <a href="login.html">Sair</a>
         </div>
-        <script>
-            $(".btn-accordion").on("click", () => {
-                $(".btn-accordion img").toggleClass("invert");
-                $("#menu-lateral").toggleClass("hidden");
-            })
-        </script>
+        <script src="script-navbar.js"></script>
     </nav>
-
-    <header>
-        <div class="header-content">
-            <h1><img src="./assets/imagem_consultas.png" alt="Consultas"> Consultas </h1>
-        </div>
-    </header>
 
     <main>
-
+        <header>
+            <div class="header-content">
+                <h1><img src="./assets/imagem_consultas.png" alt="Consultas"> Consultas </h1>
+            </div>
+        </header>
         <div class="section-wrapper">
             <div class="filter-section">
                 <h1>Filtro de Pesquisa</h1>

diff --git a/footer.css b/footer.css
@@ -0,0 +1,13 @@
+footer {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    padding: 20px;
+}
+
+footer img {
+    width: 70px;
+}
diff --git a/index.css b/index.css
@@ -0,0 +1,39 @@
+.card img {
+    width: 40px;
+}
+
+.card * {
+    text-decoration: none;
+}
+
+.col {
+    width: 100%;
+    height: max-content;
+    padding: 20px;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 150px;
+    border-radius: 5px;
+    background-color: #F0F9FF;
+    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
+    color: #000;
+}
+
+.card-body {
+    margin: 20px;
+}
+
+.card * {
+    font-weight: 400;
+}
+
+.cards-container {
+    display: grid;
+    width: 100%;
+    gap: 0 20px;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
+}
diff --git a/index.html b/index.html
@@ -8,6 +8,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="footer.css">
     <link rel="stylesheet" href="menu-lateral.css">
     <title>Portal Med</title>
 </head>
@@ -35,34 +37,42 @@ <h2>PORTAL MED</h2>
             </ul>
             <a href="login.html">Sair</a>
         </div>
-        <script>
-            $(".btn-accordion").on("click", () => {
-                $(".btn-accordion img").toggleClass("invert");
-                $("#menu-lateral").toggleClass("hidden");
-            })
-        </script>
+        <script src="script-navbar.js"></script>
     </nav>
     <main>
-        <section class="botao-section">
-            <div class="consulta-div">
-                <a href="./consultas.html">
-                    <img src="./assets/imagem_consultas.png" alt="Consultas">
-                    <h1>Consultas</h1>
-                    <h2></h2> 
-                </a>
-            </div>
-            <div class="paciente-div">
-                <img src="./assets/imagem_pacientes.png" alt="Pacientes">
-                <h1><a href="./cadastro_paciente.html">Cadastrar Pacientes</a></h1>             
-            </div>
-            <div class="paciente-div">
-                <img src="./assets/imagem_pacientes.png" alt="Pacientes">
-                <h1><a href="./cadastro_medico.html">Cadastrar Médicos</a></h1>               
+        <section class="main-container">
+            <div class="cards-container">
+                <div class="col">
+                    <a class="card" href="consultas.html">
+                        <div class="card-body">
+                            <img src="./assets/imagem_consultas.png" alt="Consultas">
+                            <h5>Consultas</h5>
+                        </div>
+                    </a>
+                </div>
+                <div class="col">
+                    <a class="card" href="cadastro_paciente.html">
+                        <div class="card-body">
+                            <img src="./assets/imagem_pacientes.png" alt="Cadastrar Pacientes">
+                            <h5>Cadastrar Pacientes</h5>
+                        </div>
+                    </a>
+                </div>
+                <div class="col">
+                    <a class="card" href="cadastro_medico.html">
+                        <div class="card-body">
+                            <img src="./assets/imagem_pacientes.png" alt="Cadastrar Médicos">
+                            <h5>Cadastrar Médicos</h5>
+                        </div>
+                    </a>
+                </div>
             </div>
         </section>
+        <script>
+        </script>
+        <footer>
+            <img src="assets/imagem_logo.png" alt="Logo do Aplicativo" class="logo-footer">
+        </footer>
     </main>
-    <footer>
-        <img src="assets/imagem_logo.png" alt="Logo do Aplicativo" class="logo-footer">
-    </footer>
 </body>
 </html>
diff --git a/login.css b/login.css
@@ -68,7 +68,7 @@ body{
        border-radius: 10px;
        font-size: 15px;
        width: 100%;
-       border: #21080847   solid thin;
+       border: #21080847 solid thin;
 
    }
 

diff --git a/menu-lateral.css b/menu-lateral.css
@@ -15,6 +15,7 @@
     transform: translateX(100%);
     top: 0;
     right: 0;
+    z-index: 999;
 }
 
 #menu-lateral .btn-accordion img {
@@ -29,10 +30,8 @@
     padding: 20px;
     box-sizing: border-box;
     text-align: center;
-    position: fixed;
-    left: 0;
+    position: sticky;
     top: 0;
-    transition: transform 0.5s ease-in-out;
 }
 
 #menu-lateral .titulo {
@@ -122,5 +121,5 @@
 }
 
 .hidden {
-    transform: translateX(-100%);
+    transform: translateX(-245px);
 }