small updates

6 files changed, 17 insertions, 53 deletions

diff --git a/index.html b/index.html
index d8011667..5143b0cb 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,5 @@
 <!DOCTYPE html5>
 <html lang="en">
-<script src="/src/js/includeheader.js"></script>
-<script src="./index.js"></script>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -23,8 +21,7 @@
     </head>
     <body>
         <!-- headers -->
-        <div include-header="/src/html/headers.html"></div>
-        <script>includeHeader();</script>
+        <div header page="Home"></div>
 
         <!-- index page -->
         <div class="wrapper">
@@ -49,5 +46,6 @@
         <script src="/src/js/index.js"></script>
         <script src="/src/js/tilt.js"></script>
         <script src="/src/js/tilt.conf.js"></script>
+        <script src="/src/js/header.js"></script>
     </body>
 </html>
diff --git a/src/css/style.css b/src/css/style.css
index d9bf3c56..2fbd7daa 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -75,6 +75,7 @@ body {
 .animate.animation--delay-p5s {
   animation-delay: 0.5s;
 }
+
 .animate.animation--delay-p3s {
   animation-delay: 0.3s;
 }
@@ -135,6 +136,7 @@ header {
     margin-right: 5mm;
     padding-top: 3mm;
     padding-bottom: 3mm;
+    border-radius: 8px;
     color: #F4E8C1;
 }
 
@@ -160,6 +162,7 @@ header {
 
 .navBar a:hover {
   background: rgba(255, 255, 255, 0.2);
+  outline: ridge rgba(128, 128, 128, .6);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   transition: all 1s
diff --git a/src/html/headers.html b/src/js/header.js
index ccc4a6bc..91320021 100644
--- a/src/html/headers.html
+++ b/src/js/header.js
@@ -1,3 +1,9 @@
+let header = document.querySelector('[header]');
+let newElement = document.createElement('div');
+let page = header.getAttribute('page');
+
+console.log(page);
+newElement.innerHTML = `
 <!-- header -->
 <header id="navBarHeader">
     <nav class="navBar">
@@ -10,3 +16,7 @@
         </div>
     </nav> 
 </header>
+`;
+
+header.appendChild(newElement);
+document.getElementById("btn"+page).setAttribute('class', 'active');
diff --git a/src/js/includeheader.js b/src/js/includeheader.js
deleted file mode 100644
index 5ac7d067..00000000
--- a/src/js/includeheader.js
+++ /dev/null
@@ -1,47 +0,0 @@
-function includeHeader() {
-  var z, i, elmnt, file, xhttp;
-  // loop through a collection of all HTML elements
-  z = document.getElementsByTagName("*");
-  for (i = 0; i < z.length; i++) {
-    elmnt = z[i];
-    // search for elements with a certain attribute
-    file = elmnt.getAttribute("include-header");
-    if (file) {
-      // make an HTTP request using the attribute value as the file name
-      xhttp = new XMLHttpRequest();
-      xhttp.onreadystatechange = function() {
-        if (this.readyState == 4) {
-          if (this.status == 200) {
-            elmnt.innerHTML = this.responseText;
-            setActiveLink(); // Set the active link after including the HTML
-          }
-          if (this.status == 404) {
-            elmnt.innerHTML = "Page not found.";
-          }
-          // remove the attribute and call this function once more
-          elmnt.removeAttribute("include-header");
-          includeHeader();
-        }
-      };
-      xhttp.open("GET", file, true);
-      xhttp.send();
-      // exit the function
-      return;
-    }
-  }
-}
-
-// Set the active link based on the current page
-function setActiveLink() {
-  var currentPath = window.location.pathname;
-  var navLinks = document.getElementsByClassName("navBar")[0].getElementsByTagName("a");
-  for (var i = 0; i < navLinks.length; i++) {
-    var link = navLinks[i];
-    var href = link.getAttribute("href");
-    if (href === currentPath) {
-      link.classList.add("active");
-    } else {
-      link.classList.remove("active");
-    }
-  }
-}
diff --git a/tmp/.htmltest/htmltest.log b/tmp/.htmltest/htmltest.log
index ce8eac15..6b001a77 100644
--- a/tmp/.htmltest/htmltest.log
+++ b/tmp/.htmltest/htmltest.log
@@ -1,5 +1,5 @@
+target does not exist --- index.html --> ./index.js
 alt attribute missing --- index.html --> 
 src attribute missing --- index.html --> 
 target does not exist --- pages/info/about.html --> /images/self.jpg
-target does not exist --- pages/repo/github/repos.html --> images/favicon.png
 missing doctype --- src/html/headers.html --> <nil>
diff --git a/tmp/.htmltest/refcache.json b/tmp/.htmltest/refcache.json
index 12dbf99e..3f2b0ec8 100644
--- a/tmp/.htmltest/refcache.json
+++ b/tmp/.htmltest/refcache.json
@@ -1 +1 @@
-{"https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css":{"StatusCode":206,"LastSeen":"2023-10-03T16:37:13.229451+08:00"}}
+{"https://avatars.githubusercontent.com/u/97672521":{"StatusCode":206,"LastSeen":"2023-10-05T19:03:42.583545+08:00"},"https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css":{"StatusCode":206,"LastSeen":"2023-10-03T16:37:13.229451+08:00"}}