Added script file and favicon

Quantum4HEP · Oct 29, 2024 · e28db75 · e28db75
1 parent e142a06
commit e28db75
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 55 deletions.
diff --git a/favicon.png b/favicon.png
diff --git a/future.html b/future.html
@@ -13,24 +13,13 @@
 
     <!-- Link to Font or Icon libraries (optional) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
     <!-- Include any external JavaScript or CSS libraries (optional) -->
 </head>
 <body>
 
     <!-- Header Section -->
-    <header>
-        <h1>Quantum4HEP</h1>
-        <nav>
-            <ul>
-                <li><a href="index.html">Home</a></li>
-                <li><a href="projects.html">Projects</a></li>
-                <li><a href="peoples.html">Peoples</a></li>
-                <li><a href="future.html">Future Ideas</a></li>
-                <li><a href="https://github.com/Quantum4HEP">Github Repository</a></li>
-            </ul>
-        </nav>
-    </header>
+    <div id="header"></div>
 
     <!-- Main Content Section  
     <main>
@@ -61,6 +50,6 @@ <h2>Our Services</h2>
     </footer>
 
     <!-- Link to JavaScript file (optional) -->
-    <!--<script src="script.js"></script> -->
+    <script src="script.js"></script>
 </body>
 </html>
diff --git a/header.html b/header.html
@@ -1,4 +1,4 @@
-<!-- header.html -->
+<!--  -->
     <header>
         <h1><img src="Quantum4hep_logo.png" alt="Quantum4HEP Logo" width="200" height="200"> Quantum4HEP</h1>
 

diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 
     <!-- Link to Font or Icon libraries (optional) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
     <!-- Include any external JavaScript or CSS libraries (optional) -->
 </head>
 <body>
@@ -50,15 +50,7 @@ <h2>Our Services</h2>
     </footer>
 
     <!-- Link to JavaScript file (optional) -->
-    <!--<script src="script.js"></script> -->
-    <script>
-        // Load the header.html content into the #header div
-        fetch("header.html")
-            .then(response => response.text())
-            .then(data => {
-                document.getElementById("header").innerHTML = data;
-            })
-            .catch(error => console.error('Error loading header:', error));
-    </script>
+    <script src="script.js"></script>
+
 </body>
 </html>
diff --git a/peoples.html b/peoples.html
@@ -13,24 +13,13 @@
 
     <!-- Link to Font or Icon libraries (optional) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
     <!-- Include any external JavaScript or CSS libraries (optional) -->
 </head>
 <body>
 
     <!-- Header Section -->
-    <header>
-        <h1>Quantum4HEP</h1>
-        <nav>
-            <ul>
-                <li><a href="index.html">Home</a></li>
-                <li><a href="projects.html">Projects</a></li>
-                <li><a href="peoples.html">Peoples</a></li>
-                <li><a href="future.html">Future Ideas</a></li>
-                <li><a href="https://github.com/Quantum4HEP">Github Repository</a></li>
-            </ul>
-        </nav>
-    </header>
+    <div id="header"></div>
 
     <!-- Main Content Section  
     <main>
@@ -61,6 +50,6 @@ <h2>Our Services</h2>
     </footer>
 
     <!-- Link to JavaScript file (optional) -->
-    <!--<script src="script.js"></script> -->
+    <script src="script.js"></script>
 </body>
 </html>
diff --git a/projects.html b/projects.html
@@ -13,25 +13,13 @@
 
     <!-- Link to Font or Icon libraries (optional) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
     <!-- Include any external JavaScript or CSS libraries (optional) -->
 </head>
 <body>
 
     <!-- Header Section -->
-    <header>
-        <h1>Quantum4HEP</h1>
-        <img src="Quantum4hep_logo.png" alt="Quantum4HEP Logo" width="200" height="100">
-        <nav>
-            <ul>
-                <li><a href="index.html">Home</a></li>
-                <li><a href="projects.html">Projects</a></li>
-                <li><a href="peoples.html">Peoples</a></li>
-                <li><a href="future.html">Future Ideas</a></li>
-                <li><a href="https://github.com/Quantum4HEP">Github Repository</a></li>
-            </ul>
-        </nav>
-    </header>
+    <div id="header"></div>
 
     <!-- Main Content Section  
     <main>
@@ -62,6 +50,6 @@ <h2>Our Services</h2>
     </footer>
 
     <!-- Link to JavaScript file (optional) -->
-    <!--<script src="script.js"></script> -->
+    <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,18 @@
+async function loadHeader() {
+    try {
+        const response = await fetch("header.html");
+
+        // Check if the file was found
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.text();
+        document.getElementById("header").innerHTML = data;
+    } catch (error) {
+        console.error("Error loading header:", error);
+    }
+}
+
+// Call the function to load the header
+loadHeader();