aztomiq 1.0.0

package/scripts/utils/migrate-icons.js

@@ -0,0 +1,67 @@
+const fs = require('fs-extra');
+const path = require('path');
+const yaml = require('js-yaml');
+
+const mapping = {
+  '✍️': 'pen-tool',
+  '⚖️': 'scale',
+  '🔖': 'bookmark',
+  '💼': 'briefcase',
+  '📈': 'line-chart',
+  '⏰': 'clock',
+  '🗓️': 'calendar-clock',
+  '📅': 'calendar-days',
+  '👾': 'code',
+  '🧾': 'receipt',
+  '🔒': 'lock',
+  '💸': 'banknote',
+  '💻': 'braces',
+  '🔑': 'key',
+  '🏠': 'landmark',
+  '📝': 'pilcrow',
+  '🌙': 'moon',
+  '🔐': 'key-round',
+  '📋': 'clipboard',
+  '％': 'percent',
+  '🔳': 'qr-code',
+  '🎲': 'dices',
+  '🏦': 'landmark',
+  '🏥': 'shield-plus',
+  '↔️': 'file-diff',
+  '🧹': 'wand-2',
+  '🔄': 'refresh-cw',
+  '⏳': 'stopwatch',
+  '📏': 'ruler',
+  '🔗': 'link',
+  '🆔': 'fingerprint',
+  '👨‍💻': 'code-2',
+  '📊': 'bar-chart-3'
+};
+
+const featuresDir = path.join(__dirname, '../../src/features');
+
+async function transform() {
+  const features = await fs.readdir(featuresDir);
+  for (const feature of features) {
+    const configPath = path.join(featuresDir, feature, 'tool.yaml');
+    if (await fs.pathExists(configPath)) {
+      let content = await fs.readFile(configPath, 'utf8');
+      let changed = false;
+
+      for (const [emoji, lucide] of Object.entries(mapping)) {
+        if (content.includes(emoji)) {
+          // Use regex to replace exactly the icon value or items icon
+          content = content.split(emoji).join(lucide);
+          changed = true;
+        }
+      }
+
+      if (changed) {
+        await fs.writeFile(configPath, content);
+        console.log(`✅ Updated ${feature}/tool.yaml`);
+      }
+    }
+  }
+}
+
+transform();

package/src/includes/breadcrumbs.ejs

@@ -0,0 +1,100 @@
+<% const isHome=(typeof pageUrl==='undefined' || pageUrl==='' || pageUrl==='/' ); const hasValidConfig=typeof toolConfig
+  !=='undefined' && (toolConfig.translationKey || toolConfig.defaultTitle); if (!isHome && hasValidConfig &&
+  !toolConfig.hideBreadcrumbs) { const catId=toolConfig.category; const cat=global.categories && catId ?
+  global.categories[catId] : null; const toolTitle=toolConfig.translationKey ? t(toolConfig.translationKey + '.title' )
+  : toolConfig.defaultTitle; %>
+  <nav class="breadcrumbs-container" aria-label="Breadcrumb">
+    <ol class="breadcrumbs-list">
+      <li class="breadcrumb-item">
+        <a href="<%= rootPath %><%= locale %>/" class="breadcrumb-link" title="<%= t('nav.home') || 'Home' %>">
+          <i data-lucide="home"></i>
+        </a>
+      </li>
+
+      <% if (cat) { %>
+        <li class="breadcrumb-separator">
+          <i data-lucide="chevron-right"></i>
+        </li>
+        <li class="breadcrumb-item">
+          <a href="<%= rootPath %><%= locale %>/categories/#cat-<%= catId %>" class="breadcrumb-link">
+            <%= t(cat.translation_key) %>
+          </a>
+        </li>
+        <% } %>
+
+          <li class="breadcrumb-separator">
+            <i data-lucide="chevron-right"></i>
+          </li>
+          <li class="breadcrumb-item active" aria-current="page">
+            <span class="breadcrumb-current">
+              <%= toolTitle %>
+            </span>
+          </li>
+    </ol>
+  </nav>
+
+  <style>
+    .breadcrumbs-container {
+      padding: 1rem 0;
+      margin-bottom: 1rem;
+      font-size: 0.85rem;
+      color: var(--text-muted);
+    }
+
+    .breadcrumbs-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .breadcrumb-item {
+      display: flex;
+      align-items: center;
+    }
+
+    .breadcrumb-link {
+      color: var(--text-muted);
+      text-decoration: none;
+      transition: color 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .breadcrumb-link i {
+      width: 14px;
+      height: 14px;
+    }
+
+    .breadcrumb-link:hover {
+      color: var(--primary-color);
+    }
+
+    .breadcrumb-separator {
+      color: var(--border-color);
+      display: flex;
+      align-items: center;
+    }
+
+    .breadcrumb-separator i {
+      width: 14px;
+      height: 14px;
+    }
+
+    .breadcrumb-current {
+      font-weight: 500;
+      color: var(--text-color);
+    }
+
+    @media (max-width: 600px) {
+      .breadcrumbs-container {
+        padding: 0.75rem 0;
+        font-size: 0.75rem;
+      }
+    }
+  </style>
+  <% } %>

package/src/includes/cloud-tags.ejs

@@ -0,0 +1,120 @@
+<% const tagMap={}; tools.forEach(tool=> {
+  if (tool.status === 'active' && tool.tags && Array.isArray(tool.tags)) {
+  tool.tags.forEach(tag => {
+  const normalized = tag.toLowerCase().trim();
+  if (normalized) {
+  tagMap[normalized] = (tagMap[normalized] || 0) + 1;
+  }
+  });
+  }
+  });
+
+  const sortedTags = Object.keys(tagMap).sort((a, b) => tagMap[b] - tagMap[a]);
+  const displayTags = sortedTags.slice(0, 25);
+  %>
+
+  <% if (displayTags.length> 0) { %>
+    <section class="tag-cloud-section container">
+      <div class="section-header">
+        <h2 class="section-title">
+          <i data-lucide="tags"></i>
+          <%= t('home.tag_cloud_title') || 'Từ khóa phổ biến' %>
+        </h2>
+        <p class="section-desc">Tìm kiếm bộ công cụ theo nhu cầu của bạn</p>
+      </div>
+
+      <div class="tag-cloud">
+        <% displayTags.forEach(tag=> {
+          const count = tagMap[tag];
+          const sizeClass = count > 3 ? 'tag-lg' : (count > 1 ? 'tag-md' : 'tag-sm');
+          %>
+          <a href="<%= rootPath %><%= locale %>/categories/" class="cloud-tag <%= sizeClass %>">
+            #<%= tag %>
+          </a>
+          <% }); %>
+      </div>
+    </section>
+
+    <style>
+      .tag-cloud-section {
+        padding: 4rem 0;
+        margin-top: 3rem;
+        border-top: 1px solid var(--border-color);
+      }
+
+      .section-header {
+        margin-bottom: 2rem;
+        text-align: center;
+      }
+
+      .section-title {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        font-size: 1.75rem;
+        font-weight: 800;
+        margin-bottom: 0.5rem;
+      }
+
+      .section-desc {
+        color: var(--text-muted);
+        font-size: 1rem;
+      }
+
+      .tag-cloud {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 12px;
+        max-width: 900px;
+        margin: 0 auto;
+      }
+
+      .cloud-tag {
+        text-decoration: none;
+        padding: 6px 16px;
+        border-radius: 50px;
+        background: var(--card-bg);
+        border: 1px solid var(--border-color);
+        color: var(--text-color);
+        font-weight: 500;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        display: inline-block;
+      }
+
+      .cloud-tag:hover {
+        border-color: var(--primary-color);
+        color: var(--primary-color);
+        transform: translateY(-2px) scale(1.05);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+      }
+
+      .tag-sm {
+        font-size: 0.85rem;
+        opacity: 0.7;
+      }
+
+      .tag-md {
+        font-size: 1rem;
+        font-weight: 600;
+        opacity: 0.85;
+      }
+
+      .tag-lg {
+        font-size: 1.15rem;
+        font-weight: 700;
+        background: linear-gradient(135deg, var(--card-bg), var(--bg-hover));
+        border-color: var(--primary-color);
+        color: var(--primary-color);
+      }
+
+      [data-theme="dark"] .cloud-tag {
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      [data-theme="dark"] .tag-lg {
+        background: rgba(59, 130, 246, 0.1);
+      }
+    </style>
+    <% } %>

package/src/includes/footer.ejs

@@ -0,0 +1,37 @@
+<footer class="site-footer">
+  <div class="container footer-inner">
+    <div class="footer-col">
+      <h3>
+        <%= t('footer.about_title') || 'AZtomiq' %>
+      </h3>
+      <p>
+        <%= t('footer.about_desc') || 'A modern framework for utility sites.' %>
+      </p>
+    </div>
+    <div class="footer-col">
+      <h4>
+        <%= t('footer.links_title') || 'Links' %>
+      </h4>
+      <ul>
+        <li><a href="<%= rootPath %><%= locale %>/privacy/">
+            <%= t('footer.policy') || 'Privacy Policy' %>
+          </a></li>
+        <li><a href="<%= rootPath %><%= locale %>/terms/">
+            <%= t('footer.terms') || 'Terms of Service' %>
+          </a></li>
+        <li><a href="<%= rootPath %><%= locale %>/changelog/">
+            <%= t('footer.changelog') || 'Version History' %>
+          </a></li>
+        <li><a href="<%= global.site.github %>" target="_blank" rel="noopener">
+            GitHub
+          </a></li>
+      </ul>
+    </div>
+    <div class="footer-copyright">
+      <span>
+        <%= t('footer.copyright') || '© 2025 AZtomiq' %>
+      </span>
+      <span>v<%= packageVersion || '1.0.0' %></span>
+    </div>
+  </div>
+</footer>

package/src/includes/generator.ejs

@@ -0,0 +1,226 @@
+<!-- Auto-generated UI -->
+<% if (typeof toolConfig !=='undefined' && toolConfig.inputs) { %>
+
+  <section class="tool-container">
+    <div class="page-header">
+      <div style="display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0.5rem;">
+        <h1 style="margin-bottom: 0;">
+          <i data-lucide="<%= toolConfig.icon %>"></i>
+          <%= t(toolConfig.translationKey + '.title' ) %>
+        </h1>
+        <% if (typeof toolConfig !=='undefined' && toolConfig.meta && toolConfig.meta.version) { %>
+          <span class="version-badge" id="open-changelog">v<%= toolConfig.meta.version %></span>
+          <% } %>
+      </div>
+      <p>
+        <%= t(toolConfig.translationKey + '.desc' ) %>
+      </p>
+    </div>
+
+    <div class="calculator-card">
+
+      <!-- Output Section -->
+      <% if (toolConfig.output) { %>
+        <div class="password-display">
+          <% if (toolConfig.output.type==='textarea' ) { %>
+            <textarea id="<%= toolConfig.output.id %>" <%=toolConfig.output.readonly ? 'readonly' : '' %>
+            placeholder="<%= t(toolConfig.output.placeholder) %>" 
+            rows="<%= toolConfig.output.rows || 1 %>"></textarea>
+            <% } %>
+
+              <div class="display-actions">
+                <% if (toolConfig.actions.secondary) { %>
+                  <% toolConfig.actions.secondary.forEach(function(action) { %>
+                    <button class="btn-icon" onclick="<%= action['function'] %>()" title="<%= t(action.title) %>">
+                      <i data-lucide="<%= action.icon %>"></i>
+                    </button>
+                    <% }); %>
+                      <% } %>
+                        <!-- Regenerate Button -->
+                        <button class="btn-icon" onclick="<%= toolConfig.actions.primary['function'] %>()"
+                          title="Regenerate"><i data-lucide="refresh-cw"></i></button>
+              </div>
+        </div>
+        <% } %>
+
+          <!-- Strength Meter -->
+          <% if (toolConfig.id==='password-generator' ) { %>
+            <div class="strength-meter">
+              <div class="strength-bar" id="strength-bar"></div>
+              <span id="strength-text">Strength</span>
+            </div>
+            <% } %>
+
+              <!-- Inputs Section -->
+              <div class="controls-grid">
+                <% for (let i=0; i < toolConfig.inputs.length; i++) { const input=toolConfig.inputs[i]; let
+                  isPair=false; let input2=null; if (input.layout==='half' && toolConfig.inputs[i+1] &&
+                  toolConfig.inputs[i+1].layout==='half' ) { isPair=true; input2=toolConfig.inputs[i+1]; i++; } %>
+
+                  <% if (input.type==='group' ) { %>
+                    <!-- Group -->
+                    <div class="control-box">
+                      <h3>
+                        <%= t(input.label) %>
+                      </h3>
+                      <% input.items.forEach(function(item) { %>
+                        <label class="checkbox-container">
+                          <input type="<%= item.type %>" id="<%= item.id %>" <%=item.default ? 'checked' : '' %>>
+                          <span>
+                            <%= t(item.label) %>
+                          </span>
+                        </label>
+                        <% }); %>
+                    </div>
+
+                    <% } else if (isPair) { %>
+                      <!-- Paired Inputs -->
+                      <div class="control-box full-width"
+                        style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+                        <!-- First Input -->
+                        <div>
+                          <label class="control-label">
+                            <%= t(input.label) %>
+                              <% if (input.displayValue) { %> <span id="<%= input.id %>-val">
+                                  <%= input.default %>
+                                </span>
+                                <% } %>
+                          </label>
+                          <% if (input.type==='range' ) { %>
+                            <input type="range" id="<%= input.id %>" min="<%= input.min %>" max="<%= input.max %>"
+                              value="<%= input.default %>"
+                              oninput="if(document.getElementById('<%= input.id %>-val')) document.getElementById('<%= input.id %>-val').innerText = this.value">
+                            <% } else if (input.type==='number' ) { %>
+                              <input type="number" id="<%= input.id %>" min="<%= input.min %>" max="<%= input.max %>"
+                                value="<%= input.default %>" class="form-input">
+                              <% } %>
+                        </div>
+
+                        <!-- Second Input -->
+                        <div>
+                          <label class="control-label">
+                            <%= t(input2.label) %>
+                              <% if (input2.displayValue) { %> <span id="<%= input2.id %>-val">
+                                  <%= input2.default %>
+                                </span>
+                                <% } %>
+                          </label>
+                          <% if (input2.type==='range' ) { %>
+                            <input type="range" id="<%= input2.id %>" min="<%= input2.min %>" max="<%= input2.max %>"
+                              value="<%= input2.default %>"
+                              oninput="if(document.getElementById('<%= input2.id %>-val')) document.getElementById('<%= input2.id %>-val').innerText = this.value">
+                            <% } else if (input2.type==='number' ) { %>
+                              <input type="number" id="<%= input2.id %>" min="<%= input2.min %>" max="<%= input2.max %>"
+                                value="<%= input2.default %>" class="form-input">
+                              <% } %>
+                        </div>
+                      </div>
+
+                      <% } else if (input.type==='select' ) { %>
+                        <!-- Select Input -->
+                        <div class="control-box">
+                          <label for="<%= input.id %>">
+                            <%= t(input.label) %>
+                          </label>
+                          <select id="<%= input.id %>">
+                            <% input.options.forEach(function(opt) { %>
+                              <option value="<%= opt.value %>" <%=input.default===opt.value ? 'selected' : '' %>><%=
+                                  t(opt.label) %>
+                              </option>
+                              <% }); %>
+                          </select>
+                        </div>
+
+                        <% } else if (input.type==='icon_select' ) { %>
+                          <!-- Icon Select (for type: icon_select) -->
+                          <div class="control-box">
+                            <label for="<%= input.id %>">
+                              <%= t(input.label) %>
+                            </label>
+                            <div class="icon-select-grid">
+                              <% input.options.forEach(function(opt) { %>
+                                <label class="icon-option">
+                                  <input type="radio" name="<%= input.id %>" value="<%= opt.value %>"
+                                    <%=input.default===opt.value ? 'checked' : '' %>>
+                                  <span class="icon-label" title="<%= t(opt.label) %>">
+                                    <i data-lucide="<%= opt.icon %>"></i>
+                                  </span>
+                                </label>
+                                <% }); %>
+                            </div>
+                          </div>
+
+                          <% } else if (input.type==='textarea' ) { %>
+                            <!-- Textarea Input -->
+                            <div class="control-box full-width">
+                              <label for="<%= input.id %>" class="control-label">
+                                <%= t(input.label) %>
+                              </label>
+                              <textarea id="<%= input.id %>" rows="<%= input.rows || 5 %>"
+                                placeholder="<%= input.placeholder ? t(input.placeholder) : '' %>" class="form-input"
+                                style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-card); color: var(--text-primary); font-family: inherit; resize: vertical;"><%= input.default || '' %></textarea>
+                            </div>
+
+                            <% } else { %>
+                              <!-- Single/Orphan Input (number/range) -->
+                              <div class="control-box">
+                                <label class="control-label">
+                                  <%= t(input.label) %>
+                                    <% if (input.displayValue) { %> <span id="<%= input.id %>-val">
+                                        <%= input.default %>
+                                      </span>
+                                      <% } %>
+                                </label>
+                                <% if (input.type==='range' ) { %>
+                                  <input type="range" id="<%= input.id %>" min="<%= input.min %>" max="<%= input.max %>"
+                                    value="<%= input.default %>"
+                                    oninput="if(document.getElementById('<%= input.id %>-val')) document.getElementById('<%= input.id %>-val').innerText = this.value">
+                                  <% } else if (input.type==='number' ) { %>
+                                    <input type="number" id="<%= input.id %>" min="<%= input.min %>"
+                                      max="<%= input.max %>" value="<%= input.default %>" class="form-input">
+                                    <% } %>
+                              </div>
+                              <% } %>
+
+                                <% } %>
+              </div>
+
+              <!-- Primary Action -->
+              <button class="btn btn-primary btn-block" onclick="<%= toolConfig.actions.primary['function'] %>()"
+                style="margin-top: 1.5rem;">
+                <%= t(toolConfig.actions.primary.label) %>
+              </button>
+
+    </div>
+
+    <!-- Content Guide Section -->
+    <% if (toolConfig.guide) { %>
+      <section class="info-section">
+        <h2>
+          <%= t(toolConfig.guide.title) %>
+        </h2>
+        <% if (toolConfig.guide.items) { %>
+          <ul>
+            <% toolConfig.guide.items.forEach(function(item) { %>
+              <li>
+                <% if (item.title) { %><strong>
+                    <%= t(item.title) %>:
+                  </strong>
+                  <% } %>
+                    <%= t(item.content) %>
+              </li>
+              <% }); %>
+          </ul>
+          <% } %>
+      </section>
+      <% } else if (toolConfig.id==='password-generator' ) { %>
+        <div class="info-section">
+          <h2>Why use a strong password?</h2>
+          <p>Using a unique, random password for every account is the single best thing you can do to protect your
+            digital life.</p>
+          <p>We generate passwords locally on your device. Nothing is sent to our servers.</p>
+        </div>
+        <% } %>
+
+  </section>
+  <% } %>

package/src/includes/head.ejs

@@ -0,0 +1,73 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>
+  <%= title %>
+</title>
+<% const metaDesc=(toolConfig && toolConfig.translationKey) ? t(toolConfig.translationKey + '.desc' ) :
+  t('meta.description'); const ogImgPath=(toolConfig && toolConfig.ogImage) ? toolConfig.ogImage : global.site.og_image;
+  %>
+  <meta name="description" content="<%= metaDesc %>">
+  <% const kws=(toolConfig && toolConfig.keywords) ? toolConfig.keywords : global.site.keywords; if (kws && kws.length>
+    0) {
+    %>
+    <meta name="keywords" content="<%= kws.join(', ') %>">
+    <% } %>
+
+      <!-- Canonical URL -->
+      <link rel="canonical" href="<%= global.site.url %>/<%= locale %>/<%= pageUrl %>" />
+
+      <!-- Hreflang Tags for Multi-language -->
+      <% const otherLocale=locale==='vi' ? 'en' : 'vi' ; %>
+        <link rel="alternate" hreflang="vi" href="<%= global.site.url %>/vi/<%= pageUrl %>" />
+        <link rel="alternate" hreflang="en" href="<%= global.site.url %>/en/<%= pageUrl %>" />
+        <link rel="alternate" hreflang="x-default" href="<%= global.site.url %>/vi/<%= pageUrl %>" />
+
+        <!-- Open Graph / Facebook -->
+        <meta property="og:type" content="<%= toolConfig && toolConfig.id ? 'article' : 'website' %>" />
+        <meta property="og:url" content="<%= global.site.url %>/<%= locale %>/<%= pageUrl %>" />
+        <meta property="og:title" content="<%= title %>" />
+        <meta property="og:description" content="<%= metaDesc %>" />
+        <meta property="og:image" content="<%= global.site.url %><%= ogImgPath %>" />
+        <meta property="og:site_name" content="AZtomiq" />
+        <meta property="og:locale" content="<%= locale === 'vi' ? 'vi_VN' : 'en_US' %>" />
+        <meta property="og:locale:alternate" content="<%= otherLocale === 'vi' ? 'vi_VN' : 'en_US' %>" />
+
+        <!-- Twitter Card -->
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:url" content="<%= global.site.url %>/<%= locale %>/<%= pageUrl %>" />
+        <meta name="twitter:title" content="<%= title %>" />
+        <meta name="twitter:description" content="<%= metaDesc %>" />
+        <meta name="twitter:image" content="<%= global.site.url %><%= ogImgPath %>" />
+
+        <!-- Author & Copyright -->
+        <meta name="author" content="<%= global.site.author %>" />
+        <meta name="robots" content="index, follow" />
+
+        <!-- Stylesheets -->
+        <link rel="stylesheet" href="<%= asset('assets/css/global.css') %>">
+        <% if (toolConfig && toolConfig._assets && toolConfig._assets.css) { %>
+          <link rel="stylesheet" href="<%= toolConfig._assets.css %>">
+          <% } %>
+            <link rel="icon" type="image/svg+xml" href="<%= rootPath %>assets/images/logo.svg">
+            <link rel="manifest" href="<%= rootPath %>manifest.json">
+
+            <!-- Lucide Icons Library -->
+            <script src="https://unpkg.com/lucide@latest"></script>
+
+            <script src="<%= asset('assets/js/user-mode.js') %>"></script>
+
+            <!-- Dark Mode Script (Blocking) -->
+            <script>
+              const savedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+              document.documentElement.setAttribute('data-theme', savedTheme);
+            </script>
+
+            <!-- Vercel Analytics (Commented to fix 404 in non-Vercel environments)
+  <script>
+    window.va = window.va || function () { (window.va.q = window.va.q || []).push(arguments); };
+  </script>
+  <script defer src="/_vercel/analytics/script.js"></script>
+  -->
+
+            <!-- Schema.org Structured Data -->
+            <%- include('schema.ejs') %>

package/src/includes/header-data-only.ejs

@@ -0,0 +1,43 @@
+<!-- Search Overlay / Modal (Reusable by hidden header mode) -->
+<div id="search-modal" class="search-modal">
+  <div class="search-overlay"></div>
+  <div class="search-container">
+    <div class="search-header">
+      <span class="search-icon" aria-hidden="true"><i data-lucide="search"></i></span>
+      <input type="text" id="search-input" placeholder="<%= t('nav.search_placeholder') %>" autocomplete="off"
+        aria-label="<%= t('nav.search_placeholder') %>">
+      <button id="close-search" class="close-search"
+        aria-label="<%= locale === 'vi' ? 'Đóng tìm kiếm' : 'Close search' %>">&times;</button>
+    </div>
+    <div id="search-results" class="search-results">
+      <!-- Results will be injected here -->
+    </div>
+    <div class="search-footer">
+      <div class="search-hints">
+        <span><kbd>↵</kbd> Select</span>
+        <span><kbd>↑↓</kbd> Navigate</span>
+        <span><kbd>esc</kbd> Close</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Embed i18n data for client-side JS -->
+<script id="i18n-data" type="application/json">
+  {
+    "search_no_results": "<%= t('nav.search_no_results') %>"
+  }
+</script>
+
+<!-- Embed tools data for client-side search -->
+<script id="tools-data" type="application/json">
+  <% const translate = t; %>
+  <%- JSON.stringify(tools.filter(t => t.status === 'active' || t.status === 'not-ready' || t.status === 'legacy').map(tool => ({ 
+    id: tool.id, 
+    link: rootPath + locale + tool.link, 
+    icon: tool.icon, 
+    title: translate(tool.translationKey + '.title'),
+    desc: translate(tool.translationKey + '.desc'),
+    category: translate('home.cats.' + tool.category + '.title') || tool.category
+  }))) %>
+</script>