Merge pull request #8 from frc9611/dev

Dev
frc9611 · Jan 13, 2024 · 09ef70c · 09ef70c
2 parents 74da225 + e744f71
commit 09ef70c
Show file tree

Hide file tree

Showing 10 changed files with 597 additions and 305 deletions.
diff --git a/index.html b/index.html
@@ -5,14 +5,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CyberRain - Home</title>
-    <link rel="stylesheet" href="./styles/global.def.css">
-    <link rel="stylesheet" href="./styles/index.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;600;700&display=swap" rel="stylesheet">
     <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon">
+    <!-- Globals -->
+    <link rel="stylesheet" href="./styles/global/normalize.css">
+    <script src="./javascripts/disable-scroll.js" defer></script>
+    <!-- Prio-loads -->
+    <script src="./javascripts/loading-state-manager.js" defer></script>
+    <!-- Page CSS file -->
+    <link rel="stylesheet" href="./styles/index.css">
     <!-- Components -->
     <script src="./javascripts/components/mobile-dropdown-menu.js" defer></script>
+    <link rel="stylesheet" href="./styles/components/layout.css">
+    <link rel="stylesheet" href="./styles/components/loading.css">
 </head>
 
 <body>
@@ -128,7 +135,7 @@
                 </div>
                 <div class="legal-part">
                     <span class="copyright">©2024 - CyberRain</span>
-                    <img src="./assets/sesi-senai-logo.png" alt="Logo do SESI e logo do SENAI">
+                    <img src="./assets/sesi-senai-logo.png" alt="Logo do SESI e logo do SENAI" class="sesi-senai-logo">
                 </div>
             </section>
             <section class="footer-section-contact-us">
@@ -230,6 +237,16 @@
             <button id="dropdown-menu-close-button">Fechar Menu</button>
         </div>
     </div>
+
+    <div id="page-loading">
+        <div id="loading-bar">
+            <div id="loading-bar-effect"></div>
+        </div>
+        <div class="loading-page-content-wrapper">
+            <img src="./assets/cr-header-logo.png" alt="Logo da CyberRain" class="logo">
+            <div id="ignore-load-button" class="yellow-unfilled-button">Pular</div>
+        </div>
+    </div>
 </body>
 
-</html>
+</html>
diff --git a/javascripts/components/mobile-dropdown-menu.js b/javascripts/components/mobile-dropdown-menu.js
@@ -1,4 +1,4 @@
-const d = document;
+var d = document;
 
 /** @type {HTMLButtonElement} */
 const dropdownOpenButton = d.querySelector("#open-dropdown-button");
@@ -17,18 +17,21 @@ dropdownOpenButton.addEventListener("click", () => {
     backdrop.style.display = "flex";
     dropdownOpenButtonIcon.classList.add("dropdown-icon-open");
     dropdownMenu.classList.add("dropdown-menu-open");
+    disableScroll();
 });
 
 dropdownCloseButton.addEventListener("click", () => {
     backdrop.style.display = "none";
     dropdownOpenButtonIcon.classList.remove("dropdown-icon-open");
     dropdownMenu.classList.remove("dropdown-menu-open");
+    enableScroll();
 });
 
 dropdownMenuOptions.forEach((option) => {
     option.addEventListener("click", () => {
         backdrop.style.display = "none";
         dropdownOpenButtonIcon.classList.remove("dropdown-icon-open");
         dropdownMenu.classList.remove("dropdown-menu-open");
+        enableScroll();
     })
 });
diff --git a/javascripts/disable-scroll.js b/javascripts/disable-scroll.js
@@ -0,0 +1,14 @@
+function disableScroll() {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+
+    window.onscroll = function() {
+        window.scrollTo(scrollLeft, scrollTop);
+    };
+
+    d.documentElement.style.overflowX = "hidden";
+}
+
+function enableScroll() {
+    window.onscroll = function() {};
+}
diff --git a/javascripts/loading-state-manager.js b/javascripts/loading-state-manager.js
@@ -0,0 +1,18 @@
+var w = window;
+var d = document;
+
+window.scrollTo(0, 0);
+disableScroll();
+
+/** @type {HTMLDivElement} */
+const loading = document.querySelector("#page-loading");
+/** @type {HTMLButtonElement} */
+const ignoreLoadButton = document.querySelector("#ignore-load-button");
+
+function endUpLoading() {
+    loading.style.display = "none";
+    enableScroll();
+}
+
+ignoreLoadButton.addEventListener("click", endUpLoading);
+w.addEventListener("load", endUpLoading);
diff --git a/not-implemented.html b/not-implemented.html
@@ -5,12 +5,17 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CyberRain - Not Implemented</title>
-    <link rel="stylesheet" href="./styles/global.def.css">
-    <link rel="stylesheet" href="./styles/not-implemented.css">
+    <!-- Globals -->
+    <link rel="stylesheet" href="./styles/global/normalize.css">
+    <!-- Prio-loads -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Page CSS file -->
+    <link rel="stylesheet" href="./styles/not-implemented.css">
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;600;700&display=swap" rel="stylesheet">
     <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon">
+    <!-- Components -->
+    <script src="./javascripts/loading-state-manager.js" defer></script>
 </head>
 
 <body>