Refactor static serving: use Blueprint static_folder, inline header

- Disable Flask default /static/ folder (static_folder=None in app.py)
- Add headerRoute blueprint to serve views/header/ at /assets/header/
- Configure transcription and scraper blueprints with static_folder
  pointing to their respective views/ subfolders
- Inline header HTML directly in headerLoader.js (remove fetch call)
- Update all HTML templates to use new /assets/... URLs

app.py

@@ -3,10 +3,12 @@ from flask import Flask
 from config import Config
 from routes.transcriptionRoute import transcription_bp
 from routes.scraperZLibraryRoute import scraperZLibraryRoute
+from routes.headerRoute import header_bp
 
 def create_app():
     """Application factory function"""
-    app = Flask(__name__, template_folder='views')
+    # static_folder=None → tắt hoàn toàn thư mục /static mặc định của Flask
+    app = Flask(__name__, template_folder='views', static_folder=None)
     
     # Load configuration
     app.config.from_object(Config)
@@ -18,6 +20,7 @@ def create_app():
     Config.init_app()
     
     # Register blueprints
+    app.register_blueprint(header_bp)
     app.register_blueprint(transcription_bp)
     app.register_blueprint(scraperZLibraryRoute, url_prefix='/scraperZLibrary')
     

routes/headerRoute.py

@@ -0,0 +1,11 @@
+# routes/headerRoute.py
+from flask import Blueprint
+
+# Blueprint để serve headerLoader.js từ views/header/
+# → URL: /assets/header/headerLoader.js
+header_bp = Blueprint(
+    'header',
+    __name__,
+    static_folder='../views/header',
+    static_url_path='/assets/header',
+)

routes/scraperZLibraryRoute.py

@@ -2,8 +2,15 @@
 from flask import Blueprint
 from controllers.scraperZLibraryController import ScraperController
 
-# Create blueprint
+# Blueprint với static_folder trỏ vào views/scraperZLibraryPages
-scraperZLibraryRoute = Blueprint('scraperZLibrary', __name__)
+# → Flask serve CSS/JS qua URL /scraperZLibrary/assets/scraper/...
+# Lưu ý: static_url_path chỉ cần phần sau /scraperZLibrary/ (url_prefix đã được thêm khi register)
+scraperZLibraryRoute = Blueprint(
+    'scraperZLibrary',
+    __name__,
+    static_folder='../views/scraperZLibraryPages',
+    static_url_path='/assets/scraper',
+)
 
 # Define routes
 scraperZLibraryRoute.route('/', methods=['GET'])(ScraperController.index)

routes/transcriptionRoute.py

@@ -2,8 +2,14 @@
 from flask import Blueprint
 from controllers.transcriptionController import TranscriptionController
 
-# Create blueprint
+# Blueprint với static_folder trỏ vào views/transcriptionPages
-transcription_bp = Blueprint('transcription', __name__)
+# → Flask serve CSS/JS qua URL /assets/transcription/...
+transcription_bp = Blueprint(
+    'transcription',
+    __name__,
+    static_folder='../views/transcriptionPages',
+    static_url_path='/assets/transcription',
+)
 
 # Define routes
 transcription_bp.route('/', methods=['GET'])(TranscriptionController.index)

views/header/headerLoader.js

@@ -0,0 +1,234 @@
+// views/header/headerLoader.js
+(function () {
+  "use strict";
+
+  // Configuration
+  const CONFIG = {
+    insertPosition: "afterbegin",
+    containerSelector: "body",
+    activeClass: "active",
+    version: "1.1",
+  };
+
+  // Header HTML inlined — không cần fetch file nữa
+  const headerHTML = `
+<header class="app-header">
+  <nav class="header-nav">
+    <div class="nav-container">
+      <!-- Left: Brand -->
+      <div class="nav-left">
+        <a href="/" class="nav-brand">KYLONG.</a>
+      </div>
+
+      <!-- Center: Navigation -->
+      <div class="nav-center">
+        <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</a>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Right: Utility -->
+      <div class="nav-right">
+        <span class="status-badge"><span class="dot"></span> Online</span>
+      </div>
+    </div>
+  </nav>
+</header>`;
+
+  const styles = `
+    <style id="header-component-styles">
+      @import url('https://db.onlinewebfonts.com/c/5ac3fe7c6abd2f62067f266d89671492?family=HelveticaNowDisplay-Medium');
+      @import url('https://db.onlinewebfonts.com/c/1aa3377e489837a26d019bba501e779d?family=HelveticaNowDisplayW01-Rg');
+
+      .app-header {
+        background: rgba(244, 243, 239, 0.85);
+        backdrop-filter: blur(20px) saturate(1.4);
+        -webkit-backdrop-filter: blur(20px) saturate(1.4);
+        border-bottom: 1px solid rgba(10,10,10,0.06);
+        position: fixed;
+        top: 0; left: 0; right: 0;
+        z-index: 1000;
+        width: 100%;
+      }
+
+      /* top-edge glint */
+      .app-header::before {
+        content: '';
+        position: absolute;
+        inset: 0 0 auto 0;
+        height: 1px;
+        background: linear-gradient(90deg,
+          transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
+        pointer-events: none;
+      }
+
+      .header-nav {
+        max-width: 1280px;
+        margin: 0 auto;
+        padding: 0 24px;
+        position: relative;
+      }
+
+      .nav-container {
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        align-items: center;
+        height: 54px;
+        gap: 16px;
+      }
+      
+      .nav-left { display: flex; align-items: center; justify-content: flex-start; }
+      .nav-center { display: flex; align-items: center; justify-content: center; }
+      .nav-right { display: flex; align-items: center; justify-content: flex-end; }
+
+      .nav-brand {
+        font-family: 'HelveticaNowDisplay-Medium', 'Helvetica Neue', Arial, sans-serif;
+        font-size: 14px;
+        font-weight: 700;
+        color: #0a0a0a;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        text-decoration: none;
+      }
+
+      .nav-links {
+        display: flex;
+        align-items: center;
+        list-style: none;
+        margin: 0;
+        padding: 4px;
+        gap: 4px;
+        background: rgba(10,10,10,0.04);
+        border-radius: 9999px;
+        border: 1px solid rgba(10,10,10,0.05);
+        box-shadow: inset 0 1px 3px rgba(10,10,10,0.02);
+      }
+      
+      .nav-links li {
+        display: flex;
+        margin: 0;
+        padding: 0;
+      }
+
+      .nav-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: 'HelveticaNowDisplayW01-Rg', 'Helvetica Neue', Arial, sans-serif;
+        text-decoration: none;
+        color: rgba(10,10,10,0.50);
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        padding: 6px 18px;
+        border-radius: 9999px;
+        border: 1px solid transparent;
+        transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
+        white-space: nowrap;
+        line-height: 1;
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      .nav-link:hover {
+        color: #0a0a0a;
+      }
+
+      .nav-link.active {
+        color: #0a0a0a;
+        background: #ffffff;
+        border-color: rgba(10,10,10,0.08);
+        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
+      }
+      
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: rgba(10,10,10,0.45);
+      }
+      
+      .status-badge .dot {
+        width: 6px; height: 6px;
+        background: #22c55e;
+        border-radius: 50%;
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
+      }
+
+      body {
+        padding-top: 54px !important;
+        margin: 0;
+      }
+
+      @media (max-width: 600px) {
+        .nav-container { 
+          grid-template-columns: auto 1fr auto; 
+          height: 48px; 
+          gap: 10px; 
+        }
+        .nav-center { order: 3; grid-column: 1 / -1; margin-top: -8px; margin-bottom: 8px; }
+        .nav-right { grid-column: 3; }
+        .nav-brand { font-size: 12px; }
+        .nav-link { font-size: 12px; padding: 5px 14px; }
+        body { padding-top: 90px !important; }
+        .app-header { padding-bottom: 8px; }
+      }
+    </style>
+  `;
+
+  // Inject header directly (no fetch needed)
+  function loadHeader() {
+    // Inject styles if not already present
+    if (!document.getElementById("header-component-styles")) {
+      document.head.insertAdjacentHTML("beforeend", styles);
+    }
+
+    // Insert header HTML inline
+    const container = document.querySelector(CONFIG.containerSelector);
+    container.insertAdjacentHTML(CONFIG.insertPosition, headerHTML);
+
+    // Highlight active link
+    highlightActiveLink();
+
+    console.log("✅ Header component loaded v" + CONFIG.version);
+  }
+
+  // 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);
+      }
+    });
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", loadHeader);
+  } else {
+    loadHeader();
+  }
+})();

views/scraperZLibraryPages/scraperZLibraryMain.html

@@ -7,7 +7,7 @@
     <title>Tìm Kiếm Sách Z-Library</title>
     <link rel="stylesheet" href="https://db.onlinewebfonts.com/c/5ac3fe7c6abd2f62067f266d89671492?family=HelveticaNowDisplay-Medium" />
     <link rel="stylesheet" href="https://db.onlinewebfonts.com/c/1aa3377e489837a26d019bba501e779d?family=HelveticaNowDisplayW01-Rg" />
-    <link rel="stylesheet" href="/static/scraperZLibraryPages/scraperZLibraryMain.css" />
+    <link rel="stylesheet" href="/scraperZLibrary/assets/scraper/scraperZLibraryMain.css" />
   </head>
   <body>
     <div class="container">
@@ -73,7 +73,7 @@
       </div>
     </div>
 
-    <script src="/static/scraperZLibraryPages/scraperZLibraryMain.js"></script>
+    <script src="/scraperZLibrary/assets/scraper/scraperZLibraryMain.js"></script>
-    <script src="/static/header/headerLoader.js?v=1.0"></script>
+    <script src="/assets/header/headerLoader.js?v=1.1"></script>
   </body>
 </html>

views/transcriptionPages/transcriptionMain.html

@@ -7,7 +7,7 @@
     <title>Phiên Âm</title>
     <link rel="stylesheet" href="https://db.onlinewebfonts.com/c/5ac3fe7c6abd2f62067f266d89671492?family=HelveticaNowDisplay-Medium" />
     <link rel="stylesheet" href="https://db.onlinewebfonts.com/c/1aa3377e489837a26d019bba501e779d?family=HelveticaNowDisplayW01-Rg" />
-    <link rel="stylesheet" href="/static/transcriptionPages/transcriptionMain.css" />
+    <link rel="stylesheet" href="/assets/transcription/transcriptionMain.css" />
   </head>
   <body>
     <div class="container">
@@ -105,7 +105,7 @@
       </div>
     </div>
 
-    <script src="/static/transcriptionPages/transcriptionMain.js"></script>
+    <script src="/assets/transcription/transcriptionMain.js"></script>
-    <script src="/static/header/headerLoader.js?v=1.0"></script>
+    <script src="/assets/header/headerLoader.js?v=1.1"></script>
   </body>
 </html>

views/transcriptionPages/transcriptionReview.html

@@ -7,7 +7,7 @@
     <title>Transcript - {{ filename }}</title>
     <link rel="stylesheet" href="https://db.onlinewebfonts.com/c/5ac3fe7c6abd2f62067f266d89671492?family=HelveticaNowDisplay-Medium" />
     <link rel="stylesheet" href="https://db.onlinewebfonts.com/c/1aa3377e489837a26d019bba501e779d?family=HelveticaNowDisplayW01-Rg" />
-    <link rel="stylesheet" href="/static/transcriptionPages/transcriptionReview.css" />
+    <link rel="stylesheet" href="/assets/transcription/transcriptionReview.css" />
   </head>
   <body>
     <div class="container">
@@ -24,6 +24,6 @@
 
       <div class="transcript">{{ content }}</div>
     </div>
-    <script src="/static/transcriptionPages/transcriptionReview.js"></script>
+    <script src="/assets/transcription/transcriptionReview.js"></script>
   </body>
 </html>