feat: creating the rooms section.

PabloValentin94 · Oct 22, 2024 · 7e3bfd8 · 7e3bfd8
1 parent 1748957
commit 7e3bfd8
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 18 deletions.
diff --git a/Assets/CSS/Global.css b/Assets/CSS/Global.css
@@ -2,17 +2,6 @@
 
 @import url("./Menu.css");
 
-/* Colors: */
-
-*:root {
-
-    --main-color: #B20000;
-    --page-color: #FFFFFF;
-    --neutral-color: #000000;
-    --contrast-color: #005C6D;
-
-}
-
 /* Styles: */
 
 * {

diff --git a/Assets/CSS/Menu.css b/Assets/CSS/Menu.css
@@ -2,6 +2,17 @@
 
 @import url("https://unpkg.com/[email protected]/css/boxicons.min.css");
 
+/* Colors: */
+
+*:root {
+
+    --main-color: #B20000;
+    --page-color: #FFFFFF;
+    --neutral-color: #000000;
+    --contrast-color: #005C6D;
+
+}
+
 /* Styles: */
 
 #menu {

diff --git a/Assets/CSS/Rooms.css b/Assets/CSS/Rooms.css
@@ -0,0 +1,62 @@
+/* Resources: */
+
+@import url("./Global.css");
+
+/* Styles: */
+
+#rooms {
+
+    height: auto;
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 15px;
+    background-color: transparent;
+    padding: 80px 15px 15px 15px;
+
+}
+
+#rooms h1 {
+
+    font-size: 35px;
+    font-weight: bolder;
+    text-transform: uppercase;
+    text-align: center;
+    color: var(--main-color);
+    margin-bottom: 25px;
+
+}
+
+#rooms .room {
+
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--neutral-color);
+    border-radius: 10px;
+    text-decoration: none;
+    padding: 15px;
+    cursor: pointer;
+
+}
+
+#rooms .room h2 {
+
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--neutral-color);
+    text-align: center;
+    transition: 0.5s;
+
+}
+
+#rooms .room:hover h2 {
+
+    color: var(--main-color);
+
+}
diff --git a/Assets/JS/Global.js b/Assets/JS/Global.js
@@ -1,3 +1,14 @@
+/*
+
+    Diferença entre Eventos ON e addEventListener:
+
+    Eventos ON (onclick, onload, etc.): Só permite definir uma função para um determinado evento (Causa mau funcionamento se dois scripts
+                                        diferentes acessarem o evento de um mesmo elemento.).
+
+    addEventListener (click, load, etc.): Permite definir várias funções para um mesmo evento de um elemento.
+
+*/
+
 // Constants and Variables:
 
 const assets_root_folder = (window.location.pathname.split("/").pop() === "Index.html") ? "./" : "../";
@@ -59,6 +70,7 @@ async function ADD_Menu()
                     '<nav>' +
 
                         `<a href="${index_root_folder}Index.html"> Início </a>` +
+                        `<a href="${pages_root_folder}Rooms.html"> Salas </a>` +
                         `<a href="${pages_root_folder}Team.html"> Desenvolvedores </a>` +
 
                     '</nav>' +
@@ -75,7 +87,7 @@ async function ADD_Menu()
 
 // Events:
 
-window.onload = async function() {
+window.addEventListener("load", function() {
 
     ADD_Favicon();
 
@@ -102,4 +114,4 @@ window.onload = async function() {
 
     }
 
-}
+});
diff --git a/Assets/JS/Rooms.js b/Assets/JS/Rooms.js
@@ -0,0 +1,45 @@
+// Constants and Variables:
+
+const rooms = [
+
+    {name: "Laboratório 04"},
+    {name: "Laboratório 09"},
+    {name: "Laboratório 02"},
+    {name: "Laboratório 06"}
+
+];
+
+// Functions:
+
+function ADD_Rooms()
+{
+
+    const rooms_list = document.getElementById("rooms").innerHTML;
+
+    let rooms_inserts = "";
+
+    rooms.forEach(room => {
+
+        rooms_inserts = rooms_inserts.concat(
+
+            '<a class="room" href="#">' +
+
+                `<h2 class="room-name"> ${room.name} </h2>` +
+
+            '</a>'
+
+        );
+
+    });
+
+    document.getElementById("rooms").innerHTML = rooms_list.concat(rooms_inserts);
+
+}
+
+// Events:
+
+window.addEventListener("load", function() {
+
+    ADD_Rooms();
+
+});
diff --git a/Pages/Login.html b/Pages/Login.html
@@ -30,10 +30,10 @@
 
                         <section id="data">
 
-                            <label for="email"> Insira seu e-mail institucional: </label>
+                            <label for="email"> Digite seu e-mail institucional: </label>
                             <input type="email" id="email" name="email" maxlength="50" required>
 
-                            <label for="password"> Insira sua senha do Agenda Fatec: </label>
+                            <label for="password"> Digite sua senha do Agenda Fatec: </label>
                             <input type="password" id="password" name="password" maxlength="20" required>
 
                             <div id="buttons">

diff --git a/Pages/Register.html b/Pages/Register.html
@@ -30,13 +30,13 @@
 
                         <section id="data">
 
-                            <label for="name"> Insira seu nome completo: </label>
+                            <label for="name"> Digite seu nome completo: </label>
                             <input type="text" id="name" name="name" maxlength="75" required>
 
-                            <label for="email"> Insira seu e-mail institucional: </label>
+                            <label for="email"> Digite seu e-mail institucional: </label>
                             <input type="email" id="email" name="email" maxlength="50" required>
 
-                            <label for="password"> Insira sua senha do Agenda Fatec: </label>
+                            <label for="password"> Crie uma senha: </label>
                             <input type="password" id="password" name="password" maxlength="20" required>
 
                             <div id="buttons">

diff --git a/Pages/Rooms.html b/Pages/Rooms.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+    <head>
+
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title> Salas | Agenda Fatec </title>
+
+        <script defer type="text/javascript" src="../Assets/JS/Global.js">  </script>
+        <script defer type="text/javascript" src="../Assets/JS/Rooms.js">  </script>
+
+        <link rel="stylesheet" type="text/css" href="../Assets/CSS/Rooms.css">
+
+        <!-- Favicon (Global.js) -->
+
+    </head>
+
+    <body>
+
+        <!-- Menu (Global.js) -->
+
+        <div id="container">
+
+            <!-- Header (Global.js) -->
+
+            <main>
+
+                <section id="rooms">
+
+                    <h1> Salas da Fatec Jahu </h1>
+
+                </div>
+
+            </main>
+
+        </div>
+
+    </body>
+
+</html>