igapyon · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026
diff --git a/index.html b/index.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+  <title>xlsx2md</title>
+  <style>
+    :root {
+      --bg: #f3efe6;
+      --surface: #fffdf8;
+      --text: #1f1d18;
+      --muted: #6b655b;
+      --primary: #8f3b1b;
+      --on-primary: #fffaf6;
+      --secondary-bg: #efe2d8;
+      --secondary-text: #4f4037;
+      --outline: #dfd2c4;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "BIZ UDPGothic", "Noto Sans JP", "Hiragino Sans", "Segoe UI", sans-serif;
+      background:
+        radial-gradient(circle at top left, rgba(143, 59, 27, 0.10), transparent 28%),
+        linear-gradient(180deg, #f7f2ea 0%, var(--bg) 100%);
+      color: var(--text);
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      padding: 24px;
+    }
+    .card {
+      width: min(760px, 100%);
+      background: var(--surface);
+      border: 1px solid var(--outline);
+      border-radius: 22px;
+      padding: 30px;
+      box-shadow: 0 16px 40px rgba(55, 39, 24, 0.10);
+    }
+    h1 {
+      margin: 0 0 12px;
+      font-size: clamp(2rem, 5vw, 2.8rem);
+      line-height: 1.1;
+      letter-spacing: -0.02em;
+    }
+    h2 {
+      margin: 0 0 10px;
+      font-size: 1.2rem;
+      line-height: 1.25;
+    }
+    p {
+      margin: 0 0 14px;
+      color: var(--muted);
+      line-height: 1.75;
+    }
+    ul {
+      margin: 0 0 16px;
+      padding-left: 1.2rem;
+      color: var(--muted);
+      line-height: 1.65;
+    }
+    .eyebrow {
+      display: inline-block;
+      margin-bottom: 12px;
+      padding: 0.3rem 0.65rem;
+      border-radius: 999px;
+      background: #f4e5d9;
+      color: #7b3d21;
+      font-size: 0.82rem;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+    .lead {
+      font-size: 1.02rem;
+      color: #4f4a40;
+    }
+    .link-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 8px;
+    }
+    .link-btn,
+    .link-btn-secondary {
+      display: inline-block;
+      text-decoration: none;
+      padding: 0.72rem 1.2rem;
+      border-radius: 999px;
+      font-weight: 700;
+      transition: transform 120ms ease, box-shadow 120ms ease;
+    }
+    .link-btn {
+      background: var(--primary);
+      color: var(--on-primary);
+      box-shadow: 0 10px 24px rgba(143, 59, 27, 0.24);
+    }
+    .link-btn-secondary {
+      background: var(--secondary-bg);
+      color: var(--secondary-text);
+      border: 1px solid #d8c2b4;
+    }
+    .link-btn:hover,
+    .link-btn-secondary:hover {
+      transform: translateY(-1px);
+    }
+    .divider {
+      border: 0;
+      border-top: 1px solid var(--outline);
+      margin: 22px 0;
+    }
+    .sub {
+      margin-top: 14px;
+      font-size: 0.9rem;
+      color: var(--muted);
+    }
+    .lang-block:last-child p:last-child {
+      margin-bottom: 0;
+    }
+  </style>
+</head>
+<body>
+  <main class="card">
+    <div class="eyebrow">Local Browser Tool</div>
+    <h1>xlsx2md</h1>
+    <p class="lead">
+      Excel (`.xlsx`) をローカルで読み込み、Markdown へ変換するブラウザベースのツールです。
+    </p>
+
+    <section class="lang-block" aria-label="English">
+      <h2>English</h2>
+      <p>
+        xlsx2md is a browser-based converter that reads Excel (`.xlsx`) files locally and turns them into Markdown.
+      </p>
+      <ul>
+        <li>Runs in the browser.</li>
+        <li>Converts all sheets automatically.</li>
+        <li>Supports display / raw / both output modes.</li>
+        <li>Includes analysis-oriented output such as tables, formulas, charts, and shapes.</li>
+      </ul>
+      <div class="link-row">
+        <a class="link-btn" href="./xlsx2md.html?v=202603190000">Open xlsx2md</a>
+        <a class="link-btn-secondary" href="https://github.com/igapyon/xlsx2md" target="_blank" rel="noopener noreferrer">GitHub</a>
+      </div>
+    </section>
+
+    <hr class="divider" />
+
+    <section class="lang-block" aria-label="日本語">
+      <h2>日本語</h2>
+      <p>
+        xlsx2md は、Excel (`.xlsx`) をローカルで読み込み、Markdown へ変換するブラウザベースのツールです。
+      </p>
+      <ul>
+        <li>ブラウザ内で動作します。</li>
+        <li>全シートを自動で変換します。</li>
+        <li>`display` / `raw` / `both` の出力モードを持ちます。</li>
+        <li>表、数式、グラフ、図形などの解析結果を Markdown に出力します。</li>
+      </ul>
+      <div class="link-row">
+        <a class="link-btn" href="./xlsx2md.html?v=202603190000">xlsx2md を開く</a>
+        <a class="link-btn-secondary" href="https://github.com/igapyon/xlsx2md" target="_blank" rel="noopener noreferrer">GitHub</a>
+      </div>
+    </section>
+  </main>
+
+  <script>
+    (() => {
+      const selector = 'a[href^="./xlsx2md.html"]';
+      const buildVersionStamp = () => {
+        const d = new Date();
+        return (
+          d.getFullYear().toString() +
+          String(d.getMonth() + 1).padStart(2, "0") +
+          String(d.getDate()).padStart(2, "0") +
+          String(d.getHours()).padStart(2, "0") +
+          String(d.getMinutes()).padStart(2, "0")
+        );
+      };
+      const stampAndGo = (anchor) => {
+        const u = new URL(anchor.getAttribute("href"), location.href);
+        u.searchParams.set("v", buildVersionStamp());
+        anchor.setAttribute("href", u.pathname + u.search);
+      };
+      document.addEventListener("click", (ev) => {
+        const a = ev.target.closest(selector);
+        if (!a) return;
+        stampAndGo(a);
+      }, true);
+      document.addEventListener("auxclick", (ev) => {
+        if (ev.button !== 1) return;
+        const a = ev.target.closest(selector);
+        if (!a) return;
+        stampAndGo(a);
+      }, true);
+    })();
+  </script>
+</body>
+</html>
diff --git a/lht-cmn/js/components.js b/lht-cmn/js/components.js
@@ -1524,10 +1524,13 @@ class LhtPageHero extends HTMLElement {
       titleMain.appendChild(help);
     }
 
-    if (actionHref && actionLabel) {
+    if (actionHref && (actionLabel || actionIconId)) {
       const actionLink = document.createElement("a");
       actionLink.href = actionHref;
       actionLink.className = "ms-hero-link";
+      if (!actionLabel) {
+        actionLink.classList.add("ms-hero-link--icon-only");
+      }
       actionLink.target = "_blank";
       actionLink.rel = "noopener noreferrer";
       if (actionAriaLabel) {
@@ -1545,9 +1548,11 @@ class LhtPageHero extends HTMLElement {
         iconSvg.appendChild(useNode);
         actionLink.appendChild(iconSvg);
       }
-      const labelNode = document.createElement("span");
-      labelNode.textContent = actionLabel;
-      actionLink.appendChild(labelNode);
+      if (actionLabel) {
+        const labelNode = document.createElement("span");
+        labelNode.textContent = actionLabel;
+        actionLink.appendChild(labelNode);
+      }
       titleMain.appendChild(actionLink);
     }
 

diff --git a/src/xlsx2md/css/app.css b/src/xlsx2md/css/app.css
@@ -12,10 +12,48 @@
   margin: 0 auto;
 }
 
+.md-icons {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
 .md-surface-card {
   padding: 28px;
 }
 
+.ms-hero-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #52606d;
+  text-decoration: none;
+  line-height: 1;
+  transition:
+    transform 0.16s ease,
+    color 0.16s ease,
+    opacity 0.16s ease;
+}
+
+.ms-hero-link:hover,
+.ms-hero-link:focus-visible {
+  transform: translateY(-1px);
+  color: #102a43;
+  opacity: 1;
+}
+
+.ms-hero-link--icon-only {
+  padding: 0.1rem;
+  opacity: 0.78;
+}
+
+.ms-btn-icon {
+  width: 1.05rem;
+  height: 1.05rem;
+  flex: 0 0 auto;
+}
+
 .md-card {
   background: rgba(255, 255, 255, 0.96);
   border: 1px solid rgba(148, 163, 184, 0.18);

diff --git a/xlsx2md-src.html b/xlsx2md-src.html
@@ -25,6 +25,11 @@
   <script src="lht-cmn/js/components.js" defer></script>
 </head>
 <body class="md-page">
+  <svg width="0" height="0" aria-hidden="true" focusable="false" class="md-icons">
+    <symbol id="md-icon-github" viewBox="0 0 16 16">
+      <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.5 7.5 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8Z"></path>
+    </symbol>
+  </svg>
   <main class="md-shell">
     <section class="md-card md-surface-card">
       <lht-page-hero
@@ -33,7 +38,10 @@
         icon="📘"
         help-label="xlsx2md の説明"
         help-wide
-        menu-home-href="../index.html"
+        action-href="https://github.com/igapyon/xlsx2md"
+        action-aria-label="Open xlsx2md repository"
+        action-icon-id="md-icon-github"
+        menu-home-href="./index.html"
         menu-home-label="トップへ戻る">
         `.xlsx` ファイルをローカルで解析し、地の文抽出・表検出・結合セル補完を行ったうえで Markdown を生成します。
       </lht-page-hero>