Unify website icons with Tabler Outline

AppResources/ASSET_NOTICES.md

@@ -6,7 +6,7 @@ The bundled `NotoSansSC-Variable.ttf` identifies itself as Noto Sans SC and is d
 
 ## Interface icons and installer artwork
 
-MP4Flow ships a curated set of Tabler Icons Outline SVGs in `Sources/FastConvert/Resources/TablerOutline`. They are sourced from [tabler/tabler-icons](https://github.com/tabler/tabler-icons), release `v3.49.0`, and are used unchanged as monochrome interface marks. Tabler Icons are licensed under the MIT License; the copyright notice and full licence are reproduced below.
+MP4Flow ships a curated set of Tabler Icons Outline SVGs in `Sources/FastConvert/Resources/TablerOutline`. The website reuses the same icon paths in `website/assets/tabler-icons.svg`. They are sourced from [tabler/tabler-icons](https://github.com/tabler/tabler-icons), release `v3.49.0`, and are used unchanged as monochrome interface marks. Tabler Icons are licensed under the MIT License; the copyright notice and full licence are reproduced below.
 
 Copyright (c) 2020-2026 Paweł Kuna
 

docs/WEBSITE.md

@@ -11,6 +11,13 @@
 
 `website/` is a source directory, not part of the public URL. Keep the public address and existing external links unchanged.
 
+## Interface icons
+
+- Website UI icons use `website/assets/tabler-icons.svg`, a local SVG sprite with paths copied unchanged from the app's curated Tabler Icons Outline v3.49.0 set in `Sources/FastConvert/Resources/TablerOutline/`.
+- Reference icons with `<use href="assets/tabler-icons.svg#icon-name">`; don't add hand-drawn UI glyphs or a second icon family. If a needed icon is not in the app's curated set, add and license it in both places.
+- The MP4Flow brand mark and favicon are product artwork, not interface glyphs, so they remain the real app icon.
+- Attribution and MIT terms are recorded in [`AppResources/ASSET_NOTICES.md`](../AppResources/ASSET_NOTICES.md).
+
 ## Local preview
 
 Run from the repository root:

website/app.js

@@ -16,7 +16,7 @@ const copy = {
     workflowEyebrow: "FROM FILE TO MP4", workflowTitle: "从添加视频到完成导出，清晰简单。", stepOneTitle: "添加视频", stepOneBody: "拖入文件，或从 Finder 选择素材。",
     stepTwoTitle: "转换或编辑", stepTwoBody: "选择智能转换，或在开始前剪切、裁切、旋转。", stepThreeTitle: "在本机导出", stepThreeBody: "查看清晰的进度，完成后直接在 Finder 中打开文件。",
     downloadEyebrow: "FREE. OPEN SOURCE. ON YOUR MAC.", downloadTitle: "从第一个视频开始，<br />让处理变简单。", downloadBody: "下载最新版本。MP4Flow 免费、开源；视频只在你的 Mac 上处理。",
-    getLatest: "获取最新版本", viewSource: "查看源代码 <span aria-hidden=\"true\">↗</span>", downloadNote: "macOS 13+ · 需要 FFmpeg 与 ffprobe · 支持 Apple 芯片与 Intel",
+    getLatest: "获取最新版本", viewSource: "查看源代码 <svg class=\"button-icon tabler-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><use href=\"assets/tabler-icons.svg#external-link\"></use></svg>", downloadNote: "macOS 13+ · 需要 FFmpeg 与 ffprobe · 支持 Apple 芯片与 Intel",
     footerTagline: "智能转换、剪切、裁切、旋转，全部在 Mac 本地完成。", footerGithub: "GitHub", footerPrivacy: "隐私", footerLicense: "MIT 许可证",
     pageTitle: "MP4Flow｜智能转换、剪切、裁切、旋转的 macOS 视频转 MP4 工具", pageDescription: "MP4Flow：免费开源的原生 macOS 视频转 MP4 工具。智能转换、剪切、裁切、旋转，全部本地完成。",
     ogTitle: "MP4Flow｜智能转换、剪切、裁切、旋转，全部在 Mac 本地完成", ogDescription: "免费开源的原生 macOS 视频转 MP4 工具。极速处理、不上传视频、不用登录。", ogLocale: "zh_CN", socialImageAlt: "MP4Flow 真实软件工作界面，展示在 Mac 本地完成的视频转换",
@@ -40,7 +40,7 @@ const copy = {
     workflowEyebrow: "FROM FILE TO MP4", workflowTitle: "From your first file to a finished video.", stepOneTitle: "Add video", stepOneBody: "Drop in a file or choose media from Finder.",
     stepTwoTitle: "Convert or edit", stepTwoBody: "Choose Smart Convert, or trim, crop, and rotate before starting.", stepThreeTitle: "Export locally", stepThreeBody: "Follow a clear progress state, then open the completed file in Finder.",
     downloadEyebrow: "FREE. OPEN SOURCE. ON YOUR MAC.", downloadTitle: "Start with one video.<br />Make handling it simple.", downloadBody: "Download the latest release. MP4Flow is free and open source, and your video stays on your Mac.",
-    getLatest: "Get the latest release", viewSource: "View source <span aria-hidden=\"true\">↗</span>", downloadNote: "macOS 13+ · FFmpeg and ffprobe required · Apple silicon & Intel",
+    getLatest: "Get the latest release", viewSource: "View source <svg class=\"button-icon tabler-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><use href=\"assets/tabler-icons.svg#external-link\"></use></svg>", downloadNote: "macOS 13+ · FFmpeg and ffprobe required · Apple silicon & Intel",
     footerTagline: "Smart Convert, trim, crop, and rotate — all on your Mac.", footerGithub: "GitHub", footerPrivacy: "Privacy", footerLicense: "MIT License",
     pageTitle: "MP4Flow — Smart Convert, Trim, Crop & Rotate Video to MP4 on macOS", pageDescription: "MP4Flow is a free, open-source native macOS video-to-MP4 converter with Smart Convert, trim, crop, rotate, and local processing.",
     ogTitle: "MP4Flow — Smart Convert, Trim, Crop & Rotate Video on Mac", ogDescription: "A free, open-source native macOS video-to-MP4 app. Fast where possible, processed locally, with no account or upload.", ogLocale: "en_US", socialImageAlt: "MP4Flow's real macOS workspace showing video processed locally",
@@ -64,7 +64,7 @@ const copy = {
     workflowEyebrow: "FROM FILE TO MP4", workflowTitle: "動画の追加から書き出しまで、迷わず。", stepOneTitle: "動画を追加", stepOneBody: "ファイルをドロップするか、Finder から素材を選びます。",
     stepTwoTitle: "変換または編集", stepTwoBody: "スマート変換を選ぶか、開始前にトリミング、クロップ、回転を行います。", stepThreeTitle: "このMacで書き出し", stepThreeBody: "分かりやすい進行状況を確認し、完了したファイルを Finder で開きます。",
     downloadEyebrow: "FREE. OPEN SOURCE. ON YOUR MAC.", downloadTitle: "最初の1本から。<br />動画処理をもっと簡単に。", downloadBody: "最新版をダウンロード。MP4Flow は無料かつオープンソースで、動画はあなたの Mac にとどまります。",
-    getLatest: "最新版を入手", viewSource: "ソースコードを見る <span aria-hidden=\"true\">↗</span>", downloadNote: "macOS 13+ · FFmpeg と ffprobe が必要 · AppleシリコンとIntel対応",
+    getLatest: "最新版を入手", viewSource: "ソースコードを見る <svg class=\"button-icon tabler-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><use href=\"assets/tabler-icons.svg#external-link\"></use></svg>", downloadNote: "macOS 13+ · FFmpeg と ffprobe が必要 · AppleシリコンとIntel対応",
     footerTagline: "スマート変換、トリミング、クロップ、回転。すべて Mac 上で完結します。", footerGithub: "GitHub", footerPrivacy: "プライバシー", footerLicense: "MIT ライセンス",
     pageTitle: "MP4Flow｜macOSで動画をMP4に変換・トリミング・クロップ・回転", pageDescription: "MP4Flow は、スマート変換、トリミング、クロップ、回転を備えた、無料・オープンソースのネイティブ macOS 動画 MP4 変換アプリです。すべてローカルで処理します。",
     ogTitle: "MP4Flow｜Macで動画をスマート変換、トリミング、クロップ、回転", ogDescription: "無料・オープンソースのネイティブ macOS 動画 MP4 変換アプリ。可能な限り高速で、アップロードもアカウント登録も不要です。", ogLocale: "ja_JP", socialImageAlt: "Mac上でローカル処理するMP4Flowの実際の作業画面",

website/index.html

@@ -35,7 +35,7 @@
     <title>MP4Flow｜智能转换、剪切、裁切、旋转的 macOS 视频转 MP4 工具</title>
     <link rel="icon" type="image/png" sizes="1024x1024" href="assets/mp4flow-app-icon.png" />
     <link rel="apple-touch-icon" href="assets/mp4flow-app-icon.png" />
-    <link rel="stylesheet" href="styles.css?v=20261018.1" />
+    <link rel="stylesheet" href="styles.css?v=20261018.2" />
     <script id="software-schema" type="application/ld+json">
       {
         "@context": "https://schema.org",
@@ -74,9 +74,8 @@
         <a href="#download" data-i18n="navDownload">下载</a>
       </nav>
       <div class="language-picker" role="group" aria-label="Language" data-i18n-aria-label="languagePickerLabel">
-        <svg class="language-globe" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-          <circle cx="12" cy="12" r="8.5"></circle>
-          <path d="M3.8 12h16.4M12 3.5c2.3 2.3 3.5 5.1 3.5 8.5S14.3 18.2 12 20.5C9.7 18.2 8.5 15.4 8.5 12S9.7 5.8 12 3.5Z"></path>
+        <svg class="language-globe tabler-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+          <use href="assets/tabler-icons.svg#language"></use>
         </svg>
         <button class="language-option" type="button" data-language="zh" aria-label="切换到中文" aria-pressed="true">中</button>
         <button class="language-option" type="button" data-language="en" aria-label="Switch to English" aria-pressed="false">EN</button>
@@ -117,25 +116,25 @@ <h2 id="tools-title" data-i18n="toolsTitle">不只转换，<br />四种核心处
         </div>
         <div class="tool-grid">
           <article class="tool-card tool-card-convert">
-            <div class="tool-card-top" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4"></path><path d="M3 8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -8"></path></svg></div>
+            <div class="tool-card-top" aria-hidden="true"><svg class="tabler-icon" viewBox="0 0 24 24"><use href="assets/tabler-icons.svg#video"></use></svg></div>
             <h3 data-i18n="toolOneTitle">智能转换</h3>
             <p data-i18n="toolOneBody">自动选择合适的 MP4 路径，尽可能直接封装；需要兼容时再使用硬件或软件转码。</p>
             <span class="tool-detail" data-i18n="toolOneDetail">兼容、清晰、节省空间</span>
           </article>
           <article class="tool-card tool-card-trim">
-            <div class="tool-card-top" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M8.12 8.12l12.76 12.76m-12.76-5L20.88 3.12"></path></svg></div>
+            <div class="tool-card-top" aria-hidden="true"><svg class="tabler-icon" viewBox="0 0 24 24"><use href="assets/tabler-icons.svg#scissors"></use></svg></div>
             <h3 data-i18n="toolTwoTitle">剪切</h3>
             <p data-i18n="toolTwoBody">拖动时间范围，配合前后步进，找到更准确的起止画面，再导出需要的片段。</p>
             <span class="tool-detail" data-i18n="toolTwoDetail">精确选择起止范围</span>
           </article>
           <article class="tool-card tool-card-crop">
-            <div class="tool-card-top" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M8 5v10a1 1 0 0 0 1 1h10"></path><path d="M5 8h10a1 1 0 0 1 1 1v10"></path></svg></div>
+            <div class="tool-card-top" aria-hidden="true"><svg class="tabler-icon" viewBox="0 0 24 24"><use href="assets/tabler-icons.svg#crop"></use></svg></div>
             <h3 data-i18n="toolThreeTitle">裁切</h3>
             <p data-i18n="toolThreeBody">直接拖动裁切框，或输入位置和尺寸；宽高比选项让常用画幅更容易确定。</p>
             <span class="tool-detail" data-i18n="toolThreeDetail">拖动、数值、宽高比</span>
           </article>
           <article class="tool-card tool-card-rotate">
-            <div class="tool-card-top" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M19.95 11a8 8 0 1 0 -.5 4m.5 5v-5h-5"></path></svg></div>
+            <div class="tool-card-top" aria-hidden="true"><svg class="tabler-icon" viewBox="0 0 24 24"><use href="assets/tabler-icons.svg#rotate"></use></svg></div>
             <h3 data-i18n="toolFourTitle">旋转</h3>
             <p data-i18n="toolFourBody">把方向不对的画面转正；支持 90° 和 180° 旋转，并保持视频画面比例。</p>
             <span class="tool-detail" data-i18n="toolFourDetail">90° / 180°，不拉伸</span>
@@ -165,15 +164,15 @@ <h2 id="workflow-title" data-i18n="workflowTitle">从添加视频到完成导出
         </div>
         <ol>
           <li>
-            <span aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 16V4m0 0L7 9m5-5 5 5M5 14v5h14v-5"></path></svg></span>
+            <span aria-hidden="true"><svg class="tabler-icon" viewBox="0 0 24 24"><use href="assets/tabler-icons.svg#video"></use></svg></span>
             <div><h3 data-i18n="stepOneTitle">添加视频</h3><p data-i18n="stepOneBody">拖入文件，或从 Finder 选择素材。</p></div>
           </li>
           <li>
-            <span aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 6h16M7 12h10m-7 6h4"></path><circle cx="9" cy="6" r="2"></circle><circle cx="14" cy="12" r="2"></circle><circle cx="12" cy="18" r="2"></circle></svg></span>
+            <span aria-hidden="true"><svg class="tabler-icon" viewBox="0 0 24 24"><use href="assets/tabler-icons.svg#bolt"></use></svg></span>
             <div><h3 data-i18n="stepTwoTitle">转换或编辑</h3><p data-i18n="stepTwoBody">选择智能转换，或在开始前剪切、裁切、旋转。</p></div>
           </li>
           <li>
-            <span aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 4v11m0 0 4-4m-4 4-4-4M5 15v4h14v-4"></path></svg></span>
+            <span aria-hidden="true"><svg class="tabler-icon" viewBox="0 0 24 24"><use href="assets/tabler-icons.svg#download"></use></svg></span>
             <div><h3 data-i18n="stepThreeTitle">在本机导出</h3><p data-i18n="stepThreeBody">查看清晰的进度，完成后直接在 Finder 中打开文件。</p></div>
           </li>
         </ol>
@@ -185,7 +184,7 @@ <h2 id="download-title" data-i18n="downloadTitle">从第一个视频开始，<br
         <p data-i18n="downloadBody">下载最新版本。MP4Flow 免费、开源；视频只在你的 Mac 上处理。</p>
         <div class="hero-actions">
           <a class="button button-primary" href="https://github.com/ixiehao/MP4Flow/releases/latest" data-i18n="getLatest">获取最新版本</a>
-          <a class="button button-quiet" href="https://github.com/ixiehao/MP4Flow" data-i18n="viewSource">查看源代码 <span aria-hidden="true">↗</span></a>
+          <a class="button button-quiet" href="https://github.com/ixiehao/MP4Flow" data-i18n-html="viewSource">查看源代码 <svg class="button-icon tabler-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="assets/tabler-icons.svg#external-link"></use></svg></a>
         </div>
         <p class="download-note" data-i18n="downloadNote">macOS 13+ · 需要 FFmpeg 与 ffprobe · 支持 Apple 芯片与 Intel</p>
       </section>
@@ -222,6 +221,6 @@ <h2 id="install-dialog-title" data-i18n="installTitle">安装 FFmpeg</h2>
       <p class="install-help" data-i18n-html="installHelp">还没有 Homebrew？请先访问 <a href="https://brew.sh/" target="_blank" rel="noreferrer">brew.sh</a> 安装。</p>
     </dialog>
 
-    <script src="app.js?v=20261018.1"></script>
+    <script src="app.js?v=20261018.2"></script>
   </body>
 </html>