Updated index.html, main.js and styles.css

suobset · Dec 3, 2023 · f2339d2 · f2339d2
1 parent 5847dba
commit f2339d2
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -6,23 +6,54 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css"> <!-- Link to the external CSS file -->
-    <title>Your Map</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/ol3/4.6.5/ol.css" type="text/css">
+    <script src="https://cdn.jsdelivr.net/ol3/4.6.5/ol.js"></script>
+      <!-- cdnjs link to import all of font awesome's icons -->
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+      <!-- link to google font for nav links -->
+      <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=Alata&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
+
+      <!-- link to google font for title  -->
+      <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=Alata&family=Poppins:wght@900&display=swap" rel="stylesheet">
+
+    <title>Assert Map</title>
 </head>
 <body>
-    <!-- Top menu bar -->
-    <div id="top-menu-bar">
-        <!-- Add your menu items or content here -->
-        <a href="./pages/about.html">About</a> | <a href="./pages/documentation.html">Documentation</a> | <a href="./pages/datasets.html">Datasets</a>
-    </div>
+    <header class="header">
+        <div class="website-name">
+            <a href="index.html" class="title">ASSERT</a>
+        <h3 class="title-extended">AI Supported Smart Electricity Restoration Tool</h3>
+        </div>
+        <!-- Container for menu and close icons(initially hidden) -->
+        <div class="menu-and-close-icon">
+            <i class="fa-solid fa-bars fa-2lg" id="open-icon" style="color: #383d03;"></i>
+            <i class="fa-solid fa-x fa-2lg" id="close-icon" style="color: #383d03;"></i>
+        </div>
+        <!-- Navigation menu -->
+        <nav class="menu-items">
+            <a href="./pages/about.html" class="nav-link">About</a>
+            <a href="./pages/datasets.html" class="nav-link">Datasets</a>
+            <a href="./pages/documentation.html" class="nav-link">Documentation</a>
+        </nav>
+    </header>
 
     <!-- Leaflet map iframe -->
     <div id="leaflet-map" alt="leaflet-map">
         <iframe src="./pages/map.html"></iframe>
     </div>
-
+
+    <script src="main.js"></script>
+
     <!-- Footer -->
     <div id="footer">
-        <p>ASSERT Alpha v0.0.2 | UMass iCons</p>
+        <p>ASSERT Alpha v0.0.3 | UMass iCons</p>
     </div>
+
+    <script src="main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -0,0 +1,27 @@
+document.addEventListener("DOMContentLoaded", function () {
+    // Select the navigation bar, open icon, and close icon from the HTML and store in variables
+    const menuIcon = document.getElementById("open-icon");
+    const navBar = document.querySelector(".menu-items");
+    const closeIcon = document.getElementById("close-icon");
+
+    // Add event listeners to close the menu icon, display the close icon and the
+    // navbar when the user clicks to open the menu
+    menuIcon.addEventListener("click", () => {
+        // Toggle the "open" class on the navigation bar to show it
+        navBar.classList.toggle("open");
+
+        // Hide the menu icon and display the close icon
+        menuIcon.style.display = "none";
+        closeIcon.style.display = "block";
+    });
+
+    // Add event listener to close the menu on click of the close icon
+    closeIcon.addEventListener("click", () => {
+        // Remove the "open" class from the navigation bar to hide it
+        navBar.classList.remove("open");
+
+        // Display the menu icon and hide the close icon
+        menuIcon.style.display = "flex";
+        closeIcon.style.display = "none";
+    });
+});
diff --git a/styles.css b/styles.css
@@ -6,6 +6,84 @@ body, html {
     overflow: hidden;
 }
 
+.header{
+    background: #FBFFF7;
+    position: fixed;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 65px;
+}
+
+
+.menu-and-close-icon{
+    cursor: pointer;
+    display: flex;
+    justify-content: flex-start;
+}
+
+#open-icon, #close-icon{
+    padding-right: 30px; 
+}
+
+#close-icon{
+    display: none;
+    cursor: pointer;
+}
+
+.menu-items{
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    top: 45px;
+    right: 0;
+    padding: 5%;
+    background: rgba(251, 255, 247, 0.66);
+}
+
+.menu-items.open{
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.nav-link{
+    display: flex;
+    flex-direction: column;
+    font-size: 25px;
+    font-family: 'Alata', sans-serif;
+    text-decoration: none;
+    line-height: 50px;
+    color: #383D03;
+    align-items: center;
+}
+
+.nav-link:hover{
+    background: rgba(56,61,3,0.45);
+}
+
+.website-name{
+    display: flex;
+    flex-direction: column;
+    line-height: 10px;
+    padding-left: 10px;
+    padding-top: 20px;
+}
+
+.title{
+    font-family: 'Alata', sans-serif;
+    font-family: 'Poppins', sans-serif;
+    color: #383D03;
+    text-decoration: none;
+    font-size: 35px;
+    letter-spacing: 17px;
+}
+
+.title-extended{
+  font-size: 17px;;
+}
+
 #top-menu-bar {
     width: 100%;
     background-color: #333;