Redesign the About page around Apple's interface guidelines

docs/localization.js

@@ -31,6 +31,10 @@
       introTitle: "必要な数字だけを、<br>いつでも見える場所に。",
       introBody: "メニューバーでは残量をすばやく確認。詳しく見たいときはダッシュボードとウィジェットから、5時間枠、週次枠、今日のトークン数を追えます。ダッシュボードは最長90日間の推移と、前日・前7日・前30日・前90日との比較にも対応します。",
       promoAria: "Token Meterの画面",
+      promoHint: "ドラッグまたはスワイプで切り替え",
+      promoPrev: "前の画面",
+      promoNext: "次の画面",
+      skipToContent: "本文へスキップ",
       promoGlanceAlt: "メニューバーのポップオーバーと3サイズのウィジェットでClaudeとCodexの残量を表示するMac",
       promoGlanceCaption: "メニューバーとウィジェットで、残量をひと目で。",
       promoDashboardAlt: "日別の推移、トークン内訳、モデル別使用量を表示するToken Meterのダッシュボード",
@@ -111,6 +115,10 @@
       introTitle: "Only the numbers you need,<br>always within sight.",
       introBody: "Check remaining usage in the menu bar. Open the dashboard or widget for the 5-hour limit, weekly limit, and today's token count. The dashboard goes back up to 90 days and compares any period against the one before it.",
       promoAria: "Token Meter screenshots",
+      promoHint: "Drag or swipe to browse",
+      promoPrev: "Previous screen",
+      promoNext: "Next screen",
+      skipToContent: "Skip to content",
       promoGlanceAlt: "A Mac showing the Token Meter menu bar popover and widgets with Claude and Codex usage",
       promoGlanceCaption: "Menu bar and widgets — usage at a glance.",
       promoDashboardAlt: "The Token Meter dashboard showing daily trends, a token breakdown, and per-model usage",
@@ -191,6 +199,10 @@
       introTitle: "只看需要的数据，<br>随时尽收眼底。",
       introBody: "在菜单栏快速查看剩余用量，需要详情时，可通过仪表盘和小组件查看 5 小时限额、每周限额和今日 Token 数量。仪表盘最长可回溯 90 天，并支持与前一日、前 7 天、前 30 天、前 90 天对比。",
       promoAria: "Token Meter 界面截图",
+      promoHint: "拖动或滑动切换",
+      promoPrev: "上一张",
+      promoNext: "下一张",
+      skipToContent: "跳到正文",
       promoGlanceAlt: "Mac 上显示 Token Meter 菜单栏弹窗和小组件中的 Claude 与 Codex 用量",
       promoGlanceCaption: "菜单栏与小组件，用量一目了然。",
       promoDashboardAlt: "Token Meter 仪表盘显示每日趋势、Token 明细和各模型用量",
@@ -271,6 +283,10 @@
       introTitle: "필요한 수치만,<br>언제나 한눈에.",
       introBody: "메뉴 막대에서 잔여량을 빠르게 확인하세요. 자세한 내용은 대시보드와 위젯에서 5시간 한도, 주간 한도, 오늘의 토큰 수를 확인할 수 있습니다. 대시보드는 최대 90일 추이와 함께 전일, 이전 7일, 이전 30일, 이전 90일 대비 비교를 지원합니다.",
       promoAria: "Token Meter 화면 스크린샷",
+      promoHint: "드래그하거나 스와이프해서 넘기기",
+      promoPrev: "이전 화면",
+      promoNext: "다음 화면",
+      skipToContent: "본문으로 건너뛰기",
       promoGlanceAlt: "Token Meter 메뉴 막대 팝오버와 위젯에 Claude와 Codex 잔여량이 표시된 Mac",
       promoGlanceCaption: "메뉴 막대와 위젯으로 잔여량을 한눈에.",
       promoDashboardAlt: "일별 추이, 토큰 내역, 모델별 사용량을 보여 주는 Token Meter 대시보드",

docs/releases.html

@@ -4,13 +4,15 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Token Meterのアップデート履歴とリリースノートです。" data-i18n-content="metaDescription">
-  <meta name="theme-color" content="#f5f7f9">
+  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
   <title data-i18n="releasesTitle">Token Meter - リリースノート</title>
   <link rel="icon" href="assets/token-meter-icon.png">
   <link rel="apple-touch-icon" href="assets/token-meter-icon.png">
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="styles.css?v=1.2.6-3">
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <script src="localization.js?v=1.2.6-2" defer></script>
+  <script src="localization.js?v=1.2.6-3" defer></script>
+  <script src="interactions.js?v=1.2.6-3" defer></script>
   <style>
     .releases-hero {
       background: var(--surface);
@@ -119,7 +121,7 @@
       <img src="assets/token-meter-icon.png" alt="" width="24" height="24">
       <span>Token Meter</span>
     </a>
-    <a class="header-download" href="https://github.com/TakeruF/token_meter/releases/download/v1.2.6/TokenMeter-1.2.6.zip" data-i18n="navDownload">ダウンロード</a>
+    <a class="header-download" data-press href="https://github.com/TakeruF/token_meter/releases/download/v1.2.6/TokenMeter-1.2.6.zip" data-i18n="navDownload">ダウンロード</a>
   </nav>
 
   <main>
@@ -160,10 +162,10 @@ <h1 data-i18n="releasesTitle">リリースノート</h1>
         </a>
       </div>
       <div class="language-switcher" role="group" aria-label="言語を選択" data-i18n-aria-label="languageAria">
-        <button type="button" lang="ja" data-language="ja">日本語</button>
-        <button type="button" lang="en" data-language="en">English</button>
-        <button type="button" lang="zh-CN" data-language="zh-CN">中文</button>
-        <button type="button" lang="ko" data-language="ko">한국어</button>
+        <button type="button" data-press lang="ja" data-language="ja">日本語</button>
+        <button type="button" data-press lang="en" data-language="en">English</button>
+        <button type="button" data-press lang="zh-CN" data-language="zh-CN">中文</button>
+        <button type="button" data-press lang="ko" data-language="ko">한국어</button>
       </div>
       <p class="footer-domain">takeruf.github.io/token_meter</p>
       <p class="footer-copyright">© 2026 Takeru Fujii · Apache License 2.0</p>