init

2026-06-15 01:06:05 +07:00
commit 6e42f05b55
15 changed files with 3410 additions and 0 deletions
@@ -0,0 +1,17 @@
+<!-- static/header/header.html -->
+<header class="app-header">
+  <nav class="header-nav">
+    <div class="nav-container">
+      <ul class="nav-links">
+        <li>
+          <a href="/" class="nav-link" data-nav="transcription">📝 Phiên Âm</a>
+        </li>
+        <li>
+          <a href="/scraperZLibrary" class="nav-link" data-nav="scraper"
+            >📚 Z-Library Scraper</a
+          >
+        </li>
+      </ul>
+    </div>
+  </nav>
+</header>
@@ -0,0 +1,187 @@
+// static/header/headerLoader.js
+(function () {
+  "use strict";
+
+  // Configuration
+  const CONFIG = {
+    headerPath: "/static/header/header.html",
+    insertPosition: "afterbegin",
+    containerSelector: "body",
+    activeClass: "active",
+    version: "1.0",
+  };
+
+  // Styles
+  const styles = `
+    <style id="header-component-styles">
+      .app-header {
+        background: #fff;
+        border-bottom: 1px solid #e0e0e0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+        width: 100%;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+      }
+
+      .header-nav {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+      }
+
+      .nav-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 64px;
+      }
+
+      .nav-brand {
+        font-size: 18px;
+        font-weight: 500;
+        color: #111;
+        letter-spacing: -0.3px;
+      }
+
+      .nav-links {
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        gap: 32px;
+      }
+
+      .nav-link {
+        text-decoration: none;
+        color: #444;
+        font-size: 15px;
+        font-weight: 400;
+        padding: 8px 0;
+        transition: all 0.15s ease;
+        border-bottom: 2px solid transparent;
+      }
+
+      .nav-link:hover {
+        color: #111;
+        border-bottom-color: #ccc;
+      }
+
+      .nav-link.active {
+        color: #111;
+        border-bottom-color: #111;
+        font-weight: 500;
+      }
+
+      /* Ensure content doesn't hide behind fixed header */
+      body {
+        padding-top: 64px !important;
+        margin: 0;
+      }
+
+      /* Mobile responsive */
+      @media (max-width: 600px) {
+        .nav-container {
+          flex-direction: column;
+          height: auto;
+          padding: 16px 0;
+          gap: 12px;
+        }
+
+        .nav-links {
+          gap: 24px;
+        }
+        
+        body {
+          padding-top: 100px !important;
+        }
+      }
+    </style>
+  `;
+
+  // Load header function
+  async function loadHeader() {
+    try {
+      // Fetch header HTML
+      const response = await fetch(`${CONFIG.headerPath}?v=${CONFIG.version}`);
+
+      if (!response.ok) {
+        throw new Error(`Failed to load header: ${response.status}`);
+      }
+
+      const headerHTML = await response.text();
+
+      // Inject styles if not already present
+      if (!document.getElementById("header-component-styles")) {
+        document.head.insertAdjacentHTML("beforeend", styles);
+      }
+
+      // Insert header
+      const container = document.querySelector(CONFIG.containerSelector);
+      container.insertAdjacentHTML(CONFIG.insertPosition, headerHTML);
+
+      // Highlight active link
+      highlightActiveLink();
+
+      console.log("✅ Header component loaded v" + CONFIG.version);
+    } catch (error) {
+      console.error("❌ Error loading header:", error);
+      createFallbackHeader();
+    }
+  }
+
+  // Highlight current page link
+  function highlightActiveLink() {
+    const currentPath = window.location.pathname;
+    const links = document.querySelectorAll(".nav-link");
+
+    links.forEach((link) => {
+      const href = link.getAttribute("href");
+
+      // Check if current path matches
+      if (
+        currentPath === href ||
+        (href !== "/" && currentPath.startsWith(href))
+      ) {
+        link.classList.add(CONFIG.activeClass);
+      }
+
+      // Special case for root
+      if (currentPath === "/" && href === "/transcription") {
+        link.classList.add(CONFIG.activeClass);
+      }
+    });
+  }
+
+  // Fallback header in case of error
+  function createFallbackHeader() {
+    const fallback = document.createElement("div");
+    fallback.style.cssText = `
+      padding: 15px 20px;
+      background: #fff;
+      border-bottom: 1px solid #e0e0e0;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 1000;
+    `;
+    fallback.innerHTML = `
+      <div style="max-width: 1200px; margin: 0 auto; display: flex; gap: 30px;">
+        <a href="/" style="color: #111; text-decoration: none;">📝 Phiên Âm</a>
+        <a href="/scraperZLibrary" style="color: #111; text-decoration: none;">📚 Z-Library Scraper</a>
+      </div>
+    `;
+    document.body.insertAdjacentElement("afterbegin", fallback);
+    document.body.style.paddingTop = "50px";
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", loadHeader);
+  } else {
+    loadHeader();
+  }
+})();