diff --git a/AppResources/ASSET_NOTICES.md b/AppResources/ASSET_NOTICES.md index 2718b87..6a0a62d 100644 --- a/AppResources/ASSET_NOTICES.md +++ b/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 diff --git a/docs/WEBSITE.md b/docs/WEBSITE.md index 77cc84c..134341c 100644 --- a/docs/WEBSITE.md +++ b/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 ``; 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: diff --git a/website/app.js b/website/app.js index 58e325e..990162c 100644 --- a/website/app.js +++ b/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: "从第一个视频开始，
让处理变简单。", downloadBody: "下载最新版本。MP4Flow 免费、开源；视频只在你的 Mac 上处理。", - getLatest: "获取最新版本", viewSource: "查看源代码 ↗", downloadNote: "macOS 13+ · 需要 FFmpeg 与 ffprobe · 支持 Apple 芯片与 Intel", + getLatest: "获取最新版本", viewSource: "查看源代码 ", 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.
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 ↗", downloadNote: "macOS 13+ · FFmpeg and ffprobe required · Apple silicon & Intel", + getLatest: "Get the latest release", viewSource: "View source ", 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本から。
動画処理をもっと簡単に。", downloadBody: "最新版をダウンロード。MP4Flow は無料かつオープンソースで、動画はあなたの Mac にとどまります。", - getLatest: "最新版を入手", viewSource: "ソースコードを見る ↗", downloadNote: "macOS 13+ · FFmpeg と ffprobe が必要 · AppleシリコンとIntel対応", + getLatest: "最新版を入手", viewSource: "ソースコードを見る ", 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の実際の作業画面", diff --git a/website/assets/tabler-icons.svg b/website/assets/tabler-icons.svg new file mode 100644 index 0000000..f352b3f --- /dev/null +++ b/website/assets/tabler-icons.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/index.html b/website/index.html index 6c16099..49b1b8a 100644 --- a/website/index.html +++ b/website/index.html @@ -35,7 +35,7 @@ MP4Flow｜智能转换、剪切、裁切、旋转的 macOS 视频转 MP4 工具 - + + diff --git a/website/styles.css b/website/styles.css index 9c6bf21..a4907ef 100644 --- a/website/styles.css +++ b/website/styles.css @@ -32,7 +32,8 @@ nav a, .language-picker { color: #52627f; font-size: .88rem; font-weight: 720; } nav a { transition: color .18s ease; } nav a:hover { color: var(--blue); } .language-picker { min-height: 38px; display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 8px; border: 1px solid #d7e1ef; border-radius: 999px; color: #425574; background: rgba(255, 255, 255, .82); box-shadow: 0 1px 2px rgba(15, 37, 79, .04); } -.language-globe { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } +.tabler-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } +.language-globe { width: 16px; height: 16px; flex: 0 0 auto; } .language-picker:focus-within { border-color: #aac1ee; box-shadow: 0 7px 16px rgba(36, 104, 242, .13); } .language-option { min-width: 29px; height: 30px; padding: 0 6px; border: 0; border-radius: 999px; color: #596a87; background: transparent; cursor: pointer; font: 780 .72rem/1 Inter, "SF Pro Display", "PingFang SC", "Hiragino Sans", system-ui, sans-serif; transition: color .18s ease, background-color .18s ease, box-shadow .18s ease; } .language-option:hover { color: var(--blue); background: #edf3ff; } @@ -81,7 +82,7 @@ h3 { margin-bottom: 10px; font-size: 1.18rem; letter-spacing: -.035em; } .tool-card { position: relative; min-height: 264px; display: flex; flex-direction: column; padding: 23px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(155deg, #fff, #fbfcff); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; } .tool-card:hover { z-index: 1; border-color: #b5caee; box-shadow: 0 17px 34px rgba(27, 68, 133, .1); transform: translateY(-4px); } .tool-card-top { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #dce7fb; border-radius: 14px; color: var(--blue); background: #f2f6ff; } -.tool-card-top svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } +.tool-card-top svg { width: 29px; height: 29px; } .tool-card h3 { margin-top: 25px; } .tool-card p { margin-bottom: 19px; color: var(--muted); font-size: .89rem; line-height: 1.7; } .tool-detail { display: block; width: fit-content; max-width: 100%; margin-top: auto; padding: 7px 9px; border-radius: 7px; color: #53709d; background: #f3f7fe; font-size: .72rem; font-weight: 720; line-height: 1.45; white-space: normal; } @@ -95,7 +96,8 @@ h3 { margin-bottom: 10px; font-size: 1.18rem; letter-spacing: -.035em; } .workflow ol { margin: 2px 0 0 15px; padding: 0 0 0 30px; border-left: 1px solid #d5e1f4; list-style: none; } .workflow li { position: relative; display: block; padding: 0 0 27px; } .workflow li:last-child { padding-bottom: 0; }.workflow li > span { position: absolute; top: -2px; left: -46px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #cbdcff; border-radius: 50%; color: var(--blue); background: #f2f6ff; } -.workflow li > span svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } +.workflow li > span svg { width: 17px; height: 17px; } +.button-icon { width: 15px; height: 15px; margin-left: 4px; flex: 0 0 auto; } .workflow h3 { margin-bottom: 5px; }.workflow p { max-width: 420px; margin-bottom: 0; color: var(--muted); font-size: .91rem; line-height: 1.68; } .download-panel { position: relative; margin: 0 0 88px; padding: 88px 30px 84px; overflow: hidden; border: 1px solid #d5e2f8; border-radius: 25px; text-align: center; background: radial-gradient(circle at 50% 0, #fff 0, #f1f6ff 55%, #edf4ff 100%); }