diff --git a/index.html b/index.html
new file mode 100644
index 0000000..556d68e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>超級快速的離線國語辭典！</title>
+<style>
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
+    background: #fafaf7;
+    color: #222;
+    line-height: 1.6;
+  }
+  header {
+    padding: 16px 24px;
+    background: #fff;
+    border-bottom: 1px solid #e5e5e0;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+  .top-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+  .dict-switch {
+    display: flex;
+    border: 1px solid #d0d0c8;
+    border-radius: 6px;
+    overflow: hidden;
+    background: #fff;
+  }
+  .dict-btn {
+    padding: 9px 14px;
+    font-size: 14px;
+    background: #fff;
+    border: none;
+    cursor: pointer;
+    color: #555;
+    transition: background 0.1s;
+    font-family: inherit;
+  }
+  .dict-btn + .dict-btn {
+    border-left: 1px solid #e5e5e0;
+  }
+  .dict-btn:hover { background: #f5f5f0; }
+  .dict-btn.active {
+    background: #333;
+    color: #fff;
+  }
+  .dict-btn:disabled {
+    opacity: 0.5;
+    cursor: wait;
+  }
+  #search {
+    flex: 1;
+    padding: 10px 14px;
+    font-size: 16px;
+    border: 1px solid #d0d0c8;
+    border-radius: 6px;
+    background: #fff;
+  }
+  #search:focus {
+    outline: none;
+    border-color: #888;
+  }
+  #status {
+    font-size: 13px;
+    color: #777;
+    white-space: nowrap;
+  }
+  main {
+    display: flex;
+    max-width: 1400px;
+    margin: 0 auto;
+    height: calc(100vh - 73px);
+  }
+  #list {
+    width: 240px;
+    border-right: 1px solid #e5e5e0;
+    overflow-y: auto;
+    background: #fff;
+  }
+  .item {
+    padding: 10px 16px;
+    border-bottom: 1px solid #f0f0ec;
+    cursor: pointer;
+    transition: background 0.1s;
+  }
+  .item:hover { background: #f5f5f0; }
+  .item.active { background: #e8e8df; }
+  .item-name {
+    font-size: 18px;
+    font-weight: 600;
+    margin-right: 8px;
+  }
+  .item-zhuyin {
+    font-size: 12px;
+    color: #888;
+  }
+  #detail {
+    flex: 1;
+    overflow-y: auto;
+    padding: 28px 36px;
+  }
+  .empty {
+    color: #999;
+    text-align: center;
+    margin-top: 40px;
+    font-size: 14px;
+  }
+  .detail-name {
+    font-size: 48px;
+    font-weight: 700;
+    margin: 0 0 4px;
+    line-height: 1.2;
+  }
+  .detail-zhuyin {
+    font-size: 20px;
+    color: #555;
+    margin-bottom: 24px;
+  }
+  .detail-content {
+    font-size: 16px;
+    white-space: pre-wrap;
+    line-height: 1.9;
+  }
+  .more-hint {
+    padding: 12px 16px;
+    color: #999;
+    font-size: 12px;
+    text-align: center;
+  }
+  @media (max-width: 700px) {
+    main { flex-direction: column; height: auto; }
+    #list { width: 100%; max-height: 40vh; }
+    #detail { padding: 20px; }
+    .detail-name { font-size: 36px; }
+    .top-row { flex-wrap: wrap; }
+    #search { order: 3; width: 100%; flex: none; }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="top-row">
+    <div class="dict-switch">
+      <button class="dict-btn active" data-dict="0">重編修訂本</button>
+      <button class="dict-btn" data-dict="1">簡編本</button>
+    </div>
+    <input id="search" type="text" placeholder="載入中⋯⋯" disabled>
+    <div id="status">準備中</div>
+  </div>
+</header>
+<main>
+  <div id="list"></div>
+  <div id="detail">
+    <div class="empty">在上方輸入想查的字詞</div>
+  </div>
+</main>
+
+<script>
+// ========================================
+// 設定區：改成你的 CSV 檔名
+const DICT_FILES = [
+  { name: '重編修訂本', file: 'dict_revised.csv' },
+  { name: '簡編本',     file: 'dict_concise.csv' },
+];
+// ========================================
+
+/**
+ * 自製 CSV parser
+ * 支援：欄位用雙引號包起來、雙引號內可有換行、""表示一個雙引號
+ * 不支援：複雜的引號跳脫（你的資料用不到）
+ *
+ * 規則（RFC 4180）：
+ *   - 一行一筆資料，欄位用逗號分隔
+ *   - 若欄位包含逗號、雙引號、或換行，整個欄位用 " 包起來
+ *   - 若被包起來的欄位內含 "，用兩個 "" 表示一個 "
+ *
+ * 用狀態機掃過去：兩個狀態 = 「在引號內」或「在引號外」
+ */
+function parseCSV(text) {
+  const rows = [];
+  let row = [];
+  let field = '';
+  let inQuotes = false;
+  const len = text.length;
+
+  for (let i = 0; i < len; i++) {
+    const ch = text[i];
+
+    if (inQuotes) {
+      if (ch === '"') {
+        // 看下一個字元
+        if (text[i + 1] === '"') {
+          // 兩個雙引號 = 一個雙引號
+          field += '"';
+          i++;
+        } else {
+          // 引號結束
+          inQuotes = false;
+        }
+      } else {
+        // 引號內的任何字元（包括換行、逗號）都是欄位內容
+        field += ch;
+      }
+    } else {
+      if (ch === '"') {
+        // 進入引號（通常出現在欄位開頭）
+        inQuotes = true;
+      } else if (ch === ',') {
+        // 欄位結束
+        row.push(field);
+        field = '';
+      } else if (ch === '\n') {
+        // 列結束
+        row.push(field);
+        rows.push(row);
+        row = [];
+        field = '';
+      } else if (ch === '\r') {
+        // 忽略 CR，等下個字元（通常會接 LF）
+      } else {
+        field += ch;
+      }
+    }
+  }
+
+  // 處理最後一個欄位/列（檔案結尾可能沒有換行）
+  if (field !== '' || row.length > 0) {
+    row.push(field);
+    rows.push(row);
+  }
+
+  return rows;
+}
+
+/**
+ * 把第一列當 header，其餘轉成 [{欄位名: 值}, ...]
+ */
+function rowsToObjects(rows) {
+  if (rows.length === 0) return [];
+  const headers = rows[0];
+  const result = [];
+  for (let i = 1; i < rows.length; i++) {
+    const row = rows[i];
+    if (row.length === 1 && row[0] === '') continue; // 跳過空行
+    const obj = {};
+    for (let j = 0; j < headers.length; j++) {
+      obj[headers[j]] = row[j] || '';
+    }
+    result.push(obj);
+  }
+  return result;
+}
+
+const dicts = DICT_FILES.map(d => ({
+  ...d,
+  data: null,
+  loading: false,
+  loaded: false,
+  error: null,
+}));
+
+let currentDictIdx = 0;
+let filtered = [];
+let activeIndex = -1;
+let searchTimer = null;
+
+const $search = document.getElementById('search');
+const $status = document.getElementById('status');
+const $list = document.getElementById('list');
+const $detail = document.getElementById('detail');
+const $btns = document.querySelectorAll('.dict-btn');
+
+async function loadDict(idx) {
+  const dict = dicts[idx];
+  if (dict.loaded || dict.loading) return;
+  dict.loading = true;
+
+  try {
+    if (idx === currentDictIdx) {
+      $status.textContent = `下載 ${dict.name}⋯⋯`;
+    }
+
+    // 用 streaming fetch + 進度回報
+    const response = await fetch(dict.file);
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const total = +response.headers.get('Content-Length') || 0;
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder('utf-8');
+    let received = 0;
+    let text = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      received += value.length;
+      text += decoder.decode(value, { stream: true });
+      if (idx === currentDictIdx && total) {
+        const pct = Math.round(received / total * 100);
+        $status.textContent = `下載 ${dict.name}：${pct}%`;
+      }
+    }
+    text += decoder.decode();
+
+    if (idx === currentDictIdx) {
+      $status.textContent = `解析 ${dict.name}⋯⋯`;
+    }
+
+    // 解析放到下一個 frame，避免卡 UI
+    await new Promise(r => setTimeout(r, 0));
+    const rows = parseCSV(text);
+    const objects = rowsToObjects(rows);
+
+    dict.data = objects.filter(o => o['字詞名']);
+    dict.loaded = true;
+    dict.loading = false;
+
+    if (idx === currentDictIdx) {
+      onDictReady();
+    }
+  } catch (err) {
+    dict.error = err.message;
+    dict.loading = false;
+    if (idx === currentDictIdx) {
+      $status.textContent = `載入失敗：${err.message}`;
+    }
+  }
+}
+
+function onDictReady() {
+  const dict = dicts[currentDictIdx];
+  $search.disabled = false;
+  $search.placeholder = `搜尋 ${dict.data.length.toLocaleString()} 筆字詞⋯⋯`;
+  $status.textContent = `${dict.name}：${dict.data.length.toLocaleString()} 筆`;
+  $btns.forEach((b, i) => {
+    b.disabled = false;
+    b.classList.toggle('active', i === currentDictIdx);
+  });
+
+  if ($search.value.trim()) {
+    doSearch($search.value);
+  } else {
+    $search.focus();
+  }
+}
+
+async function switchDict(idx) {
+  if (idx === currentDictIdx) return;
+  currentDictIdx = idx;
+  $btns.forEach((b, i) => b.classList.toggle('active', i === idx));
+
+  const dict = dicts[idx];
+  if (dict.loaded) {
+    onDictReady();
+  } else if (dict.error) {
+    $status.textContent = `載入失敗：${dict.error}`;
+    $btns.forEach(b => b.disabled = false);
+  } else {
+    $search.disabled = true;
+    $status.textContent = `載入 ${dict.name}⋯⋯`;
+    await loadDict(idx);
+  }
+}
+
+function render() {
+  if (filtered.length === 0) {
+    $list.innerHTML = '<div class="empty" style="padding:20px;">沒有匹配的字詞</div>';
+    $detail.innerHTML = '<div class="empty">沒有匹配的字詞</div>';
+    activeIndex = -1;
+    return;
+  }
+
+  const MAX = 500;
+  const slice = filtered.slice(0, MAX);
+  const moreHint = filtered.length > MAX
+    ? `<div class="more-hint">⋯⋯還有 ${filtered.length - MAX} 筆未顯示，請縮小搜尋範圍</div>`
+    : '';
+
+  $list.innerHTML = slice.map((item, i) => `
+    <div class="item ${i === activeIndex ? 'active' : ''}" data-i="${i}">
+      <span class="item-name">${escapeHtml(item['字詞名'] || '')}</span>
+      <span class="item-zhuyin">${escapeHtml(item['注音一式'] || '')}</span>
+    </div>
+  `).join('') + moreHint;
+
+  if (activeIndex < 0 || activeIndex >= filtered.length) {
+    activeIndex = 0;
+  }
+  renderDetail();
+}
+
+function renderDetail() {
+  const item = filtered[activeIndex];
+  if (!item) {
+    $detail.innerHTML = '<div class="empty">沒有匹配的字詞</div>';
+    return;
+  }
+
+  $detail.innerHTML = `
+    <h1 class="detail-name">${escapeHtml(item['字詞名'] || '')}</h1>
+    <div class="detail-zhuyin">${escapeHtml(item['注音一式'] || '')}</div>
+    <div class="detail-content">${escapeHtml(item['釋義'] || '')}</div>
+  `;
+
+  $list.querySelectorAll('.item').forEach((el, i) => {
+    el.classList.toggle('active', i === activeIndex);
+  });
+}
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, c => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+  }[c]));
+}
+
+function doSearch(q) {
+  q = q.trim();
+  const dict = dicts[currentDictIdx];
+  if (!dict.loaded) return;
+
+  if (!q) {
+    filtered = [];
+    $list.innerHTML = '<div class="empty" style="padding:20px;">在上方輸入想查的字詞</div>';
+    $detail.innerHTML = '<div class="empty">在上方輸入想查的字詞</div>';
+    $status.textContent = `${dict.name}：${dict.data.length.toLocaleString()} 筆`;
+    return;
+  }
+
+  filtered = dict.data.filter(item => (item['字詞名'] || '').includes(q));
+
+  filtered.sort((a, b) => {
+    const an = a['字詞名'] || '';
+    const bn = b['字詞名'] || '';
+    const aExact = an === q ? 0 : 1;
+    const bExact = bn === q ? 0 : 1;
+    if (aExact !== bExact) return aExact - bExact;
+    const aStart = an.startsWith(q) ? 0 : 1;
+    const bStart = bn.startsWith(q) ? 0 : 1;
+    if (aStart !== bStart) return aStart - bStart;
+    return an.length - bn.length;
+  });
+
+  activeIndex = 0;
+  render();
+  $status.textContent = `${dict.name}｜匹配 ${filtered.length.toLocaleString()} 筆`;
+}
+
+$search.addEventListener('input', e => {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => doSearch(e.target.value), 100);
+});
+
+$list.addEventListener('click', e => {
+  const item = e.target.closest('.item');
+  if (!item) return;
+  activeIndex = +item.dataset.i;
+  renderDetail();
+});
+
+$search.addEventListener('keydown', e => {
+  if (filtered.length === 0) return;
+  const maxIdx = Math.min(filtered.length, 500) - 1;
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    activeIndex = Math.min(activeIndex + 1, maxIdx);
+    renderDetail();
+    scrollActiveIntoView();
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    activeIndex = Math.max(activeIndex - 1, 0);
+    renderDetail();
+    scrollActiveIntoView();
+  }
+});
+
+function scrollActiveIntoView() {
+  const el = $list.querySelector('.item.active');
+  if (el) el.scrollIntoView({ block: 'nearest' });
+}
+
+$btns.forEach((btn, i) => {
+  btn.addEventListener('click', () => switchDict(i));
+});
+
+// 先載第一本，第二本背景延遲載
+loadDict(0).then(() => {
+  setTimeout(() => loadDict(1), 500);
+});
+</script>
+</body>
+</html>
