finally started building out the personnel files. Need to add the content sections still, and finish the header to include the rank image and tab image, as well as add the scripts to get from database.... whew yeah its nowhere near done

2023-03-29 14:06:44 -04:00
parent 83fd1d74ce
commit 09bda9fbfd
2 changed files with 186 additions and 10 deletions
--- a/Page/profile.html
+++ b/Page/profile.html
@@ -1,12 +1,76 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Profile Page</title>
-    <link rel="stylesheet" href="styles2.css">
-  </head>
-  <body>
-    <h1>Profile Page</h1>

-  </body>
+<head>
+  <meta charset="UTF-8">
+  <title>Profile Page</title>
+  <link rel="stylesheet" href="styles2.css">
+</head>
+
+<body>
+  <nav class="navbar">
+    <ul class="nav-links">
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Users</a></li>
+      <li><a href="#">Stuff</a></li>
+      <li><a href="#">Things</a></li>
+    </ul>
+  </nav>
+  <div id="profileWrapper">
+    <div id="fileHeader">
+      <div id="images">
+
+      </div>
+      <div id="details">
+        <h1>Name:</h1>
+        <h1>Rank:</h1>
+        <h1>Unit:</h1>
+      </div>
+      <div class="subnav">
+        <ul class="subnav-links">
+          <li><a href="#" class="active">Personnel File</a></li>
+          <li><a href="#">Activity History</a></li>
+          <li><a href="#">Shadowbox</a></li>
+        </ul>
+        <script>
+          // Get the subnav links
+          const subnavLinks = document.querySelectorAll('.subnav-links a');
+        
+          // Add click event listener to each link
+          subnavLinks.forEach(link => {
+            link.addEventListener('click', function () {
+              // Remove "active" class from all links
+              subnavLinks.forEach(link => link.classList.remove('active'));
+              // Add "active" class to clicked link
+              this.classList.add('active');
+        
+              // Get the index of the clicked link
+              const index = Array.from(subnavLinks).indexOf(this);
+        
+              // Hide all content divs
+              const contentDivs = document.querySelectorAll('.content');
+              contentDivs.forEach(div => div.classList.remove('shown'));
+        
+              // Show the corresponding content div
+              contentDivs[index].classList.add('shown');
+            });
+          });
+        </script>
+      </div>
+    </div>
+    <!-- Personnel File -->
+    <div class="content shown">
+      hello
+    </div>
+    <!-- Activity History -->
+    <div class="content">
+      hello2
+    </div>
+    <!-- Shadowbox -->
+    <div class="content">
+      hello3
+    </div>
+  </div>
+</body>
+
 </html>