diff --git a/header.css b/header.css
new file mode 100644
index 0000000..0968158
--- /dev/null
+++ b/header.css
@@ -0,0 +1,79 @@
+ /* Header Bar Styles */
+ .header-bar {
+ position: absolute; /* Ensures it stays at the top of the page, not fixed on the screen */
+ top: 0;
+ left: 0;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 5px 10px;
+ background-color: #3b3b3b00;
+ color: var(--text-color);
+ z-index: 1000; /* Ensures it stays above other content */
+ transition: background-color 0.3s ease, color 0.3s ease;
+ margin-bottom: 50px;
+ }
+
+ .header-link {
+ color: #4e4e4e;
+ font-size: 20px;
+ text-decoration: none;
+ font-weight: bold;
+ margin-left: 10px;
+ }
+
+ .header-link:hover {
+ color: #757575;
+ }
+
+ /* Dropdown menu styles */
+ .dropdown {
+ position: relative;
+ }
+
+ .dropbtn {
+ background-color: #505050ec;
+ color: white;
+ padding: 8px 16px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+ margin-right: 15px;
+ }
+
+ .dropbtn:hover {
+ background-color: #333;
+ }
+
+ .dropdown-content {
+ display: none;
+ position: absolute;
+ right: 0;
+ background-color: #1d1d1d;
+ border: 1px solid #535353;
+ border-radius: 5px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ z-index: 1001;
+ min-width: 220px;
+ max-height: 380px; /* Set a maximum height for the dropdown */
+ overflow-y: auto; /* Enable vertical scrolling */
+ padding: 10px 0;
+ }
+
+ .dropdown-content a {
+ color: white;
+ text-decoration: none;
+ padding: 8px 16px;
+ display: block;
+ font-size: 14px;
+ }
+
+ .dropdown-content a:hover {
+ background-color: #535353;
+ }
+
+ .dropdown.show .dropdown-content {
+ display: block;
+ }
\ No newline at end of file
diff --git a/header.js b/header.js
new file mode 100644
index 0000000..ae7a14a
--- /dev/null
+++ b/header.js
@@ -0,0 +1,47 @@
+// ADD HEADER
+fetch('https://kay-who-codes.github.io/Kay-App-Assets/Full-Header.html')
+ .then(response => {
+ if (!response.ok) {
+ throw new Error('Failed to load header');
+ }
+ return response.text();
+ })
+ .then(data => {
+ document.getElementById('header').innerHTML = data;
+
+ // Update the header link dynamically
+ const headerLink = document.querySelector('.header-link');
+ if (headerLink) {
+ // Option 1: Extract from URL
+ const pathSegments = window.location.pathname.split('/').filter(segment => segment);
+ const repoName = pathSegments[0] || 'APP_NAME_GOES_HERE';
+ const appName = repoName.replace(/-/g, ' ');
+
+ headerLink.textContent = appName;
+ headerLink.href = `https://github.com/kay-who-codes/${repoName}`;
+ }
+
+ // Add event listeners after injecting the header
+ const dropbtn = document.querySelector('.dropbtn');
+ if (dropbtn) {
+ dropbtn.addEventListener('click', toggleDropdown);
+ }
+
+ // Close dropdown when clicking outside
+ window.addEventListener('click', (event) => {
+ const dropdown = document.querySelector('.dropdown');
+ if (dropdown && !dropdown.contains(event.target)) {
+ dropdown.classList.remove('show');
+ }
+ });
+ })
+ .catch(error => {
+ console.error('Error loading header:', error);
+ document.getElementById('header').innerHTML = 'Header failed to load.
';
+ });
+
+// Toggle dropdown visibility
+function toggleDropdown() {
+ const dropdown = document.querySelector('.dropdown');
+ dropdown.classList.toggle('show');
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 03f518e..1fdd7cd 100644
--- a/index.html
+++ b/index.html
@@ -5,40 +5,13 @@
🌍 World Times
-
-
-
-
-
+
+
+
+
+
+
+
@@ -54,7 +27,8 @@ 🏴 London:
-
-
-
+
+
+
+