PageSourceSearch

https://mediaflowing.com/zh

html mediaflowing.com collected 2026-10-02 01:35:28 UTC 48,929 bytes, 731 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="scroll-smooth">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <!-- Pretty locale URLs (/zh /en) need root-relative assets -->
8 
8<script>
9 (function () {
10 if (location.protocol === 'file:') return;
11 var b = document.createElement('base');
12 b.href = '/';
13 document.head.appendChild(b);
14 })();
15 </script>
15
16	 <title data-t="seo.title">MediaFlow — Free Video Downloader & Open-Source Media Tools for PC</title>
17
18	 <!-- SEO Meta Tags -->
19	 <meta name="description" data-t="seo.description"
20	 content="Download videos from YouTube, TikTok, Bilibili, and more — free, open-source video downloader with local transcription, image compression, subtitles, and AI enhance. No paywalls, no accounts, runs on your PC.">
21	 <meta name="keywords" data-t="seo.keywords"
22	 content="video downloader, download video, youtube video downloader, tiktok video downloader, bilibili video downloader, douyin video downloader, mediaflow, local media tools, offline transcription, whisper, yt-dlp, image compress, subtitle tools, batch download, open source, free">
23	 <meta name="author" content="MediaFlow">
24	 <meta name="theme-color" content="#0b0c12">
25	 <link rel="canonical" href="https://mediaflowing.com/">
26	 <link rel="icon" type="image/png" href="src/assets/images/logo.png?v=20260817">
27	 <link rel="apple-touch-icon" href="src/assets/images/logo.png?v=20260817">
28
29	 <!-- Structured Data (JSON-LD) for Rich Results -->
30	 
30<script type="application/ld+json">
31	 {
32	 "@context": "https://schema.org",
33	 "@type": "SoftwareApplication",
34	 "name": "MediaFlow",
35	 "applicationCategory": "MultimediaApplication",
36	 "operatingSystem": "Windows 10, Windows 11",
37	 "url": "https://mediaflowing.com/",
38	 "downloadUrl": "https://pub-e5d657b6a1234015991d4efd11c3efb8.r2.dev/downloads/MediaFlow%20Setup%202.4.6.exe",
39	 "sameAs": ["https://github.com/Kevinlabs26/MediaFlow"],
40	 "offers": {
41	 "@type": "Offer",
42	 "price": "0",
43	 "priceCurrency": "USD",
44	 "category": "Free open-source software"
45	 },
46	 "featureList": "Local media capture, Video downloader for YouTube/TikTok/Bilibili, Local transcription, Image compression, Batch queues, AI enhance, Subtitle studio, Creator & editor tools",
47	 "screenshot": "https://mediaflowing.com/assets/hero-app1.png?v=20260817",
48	 "softwareVersion": "2.4.6"
49	 }
50	 </script>
50
51
52	 <!-- Open Graph / Facebook -->
53	 <meta property="og:type" content="website">
54	 <meta property="og:site_name" content="MediaFlow">
55	 <meta property="og:url" content="https://mediaflowing.com/">
56	 <meta property="og:title" data-t="seo.title" content="MediaFlow — Free Video Downloader & Open-Source Media Tools for PC">
57	 <meta property="og:description" data-t="seo.description"
58	 content="Download, transcribe, compress, and create — 100% free and open source, running entirely on your PC.">
59	 <meta property="og:image" content="https://mediaflowing.com/assets/hero-app1.png?v=20260817">
60
61	 <!-- Twitter -->
62	 <meta name="twitter:card" content="summary_large_image">
63	 <meta name="twitter:url" content="https://mediaflowing.com/">
64	 <meta name="twitter:title" data-t="seo.title" content="MediaFlow — Free Video Downloader & Open-Source Media Tools for PC">
65	 <meta name="twitter:description" data-t="seo.description"
66	 content="Local-first desktop toolkit for Windows. Completely free and open source. No paywalls, no accounts.">
67	 <meta name="twitter:image" content="https://mediaflowing.com/assets/hero-app1.png?v=20260817">
68
69 <!-- Styles -->
70 <link rel="stylesheet" href="src/assets/css/tailwind.css?v=20260818">
71 <link rel="preconnect" href="https://fonts.googleapis.com">
72 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
73 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
74 <link rel="preload" as="image" href="assets/hero-app1.webp?v=20260817" type="image/webp" fetchpriority="high">
75 <link rel="stylesheet" href="src/assets/css/main.css?v=20260817">
76</head>
77
78<body class="antialiased selection:bg-accent-500 selection:text-white overflow-x-hidden font-sans text-zinc-200 bg-ink-900">
79
80 <!-- Ambient background glows -->
81 <div class="bg-glow" aria-hidden="true"></div>
82 <div class="bg-grid" aria-hidden="true"></div>
83
84 <!-- Navbar: glass sticky bar + mobile drawer -->
85 <nav class="fixed w-full z-[200] site-nav" id="navbar">
86 <div class="site-nav-inner">
87 <a href="#" class="flex items-center space-x-2.5 min-w-0" aria-label="MediaFlow home">
88 <img src="src/assets/images/logo.png?v=20260817" alt="" class="w-9 h-9 rounded-xl shrink-0" width="36" height="36">
89 <span class="font-bold text-lg tracking-tight text-white">MediaFlow</span>
90 </a>
91
92	 <div class="hidden md:flex items-center space-x-7 text-sm font-medium text-zinc-400">
93	 <a href="#download" class="nav-link hover:text-white transition" data-t="nav.download">Download</a>
94	 <a href="#features" class="nav-link hover:text-white transition" data-t="nav.features">Features</a>
95	 <a href="#how" class="nav-link hover:text-white transition" data-t="nav.how">How it works</a>
96	 <a href="#donate" class="nav-link hover:text-white transition" data-t="nav.donate">Donate</a>
97	 <a href="#faq" class="nav-link hover:text-white transition" data-t="nav.faq">FAQ</a>
98	 </div>
99
100	 <div class="flex items-center gap-2 sm:gap-3">
101	 <button type="button" id="theme-toggle" class="icon-btn" aria-label="Toggle theme" aria-pressed="false">
102	 <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
103	 <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
104	 </button>
105	 <div class="lang-dropdown-container">
106 <button id="lang-menu-btn" type="button"
107 class="flex items-center gap-2 px-2.5 sm:px-3 py-1.5 rounded-lg border border-white/10 bg-white/5 hover:border-white/25 transition text-xs font-semibold text-zinc-300">
108 <span id="current-lang-name">EN</span>
109 <svg class="w-4 h-4 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
110 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
111 </svg>
112 </button>
113 <div id="lang-dropdown"
114 class="lang-dropdown-menu glass rounded-xl border border-white/10 p-1.5 shadow-2xl"
115 role="menu" aria-label="Language">
116 <a href="/" class="lang-item px-3 py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white block" data-locale-switch="en-US" hreflang="en">English</a>
117 <a href="/zh" class="lang-item px-3 py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white block" data-locale-switch="zh-CN" hreflang="zh-CN">简体中文</a>
118 <a href="/zh-tw" class="lang-item px-3 py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white block" data-locale-switch="zh-TW" hreflang="zh-TW">繁體中文</a>
119 <a href="/ja" class="lang-item px-3 py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white block" data-locale-switch="ja-JP" hreflang="ja">日本語</a>
120 <a href="/ko" class="lang-item px-3 py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white block" data-locale-switch="ko-KR" hreflang="ko">한국어</a>
121 <a href="/fr" class="lang-item px-3 py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white block" data-locale-switch="fr-FR" hreflang="fr">Français</a>
122 <a href="/de" class="lang-item px-3 py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white block" data-locale-switch="de-DE" hreflang="de">
122Deutsch</a>
123 <a href="/es" class="lang-item px-3 py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white block" data-locale-switch="es-ES" hreflang="es">Español</a>
124 <a href="/pt" class="lang-item px-3 py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white block" data-locale-switch="pt-PT" hreflang="pt">Português</a>
125 <a href="/ru" class="lang-item px-3 py-2 rounded-lg text-xs font-medium text-zinc-400 hover:text-white block" data-locale-switch="ru-RU" hreflang="ru">Русский</a>
126 </div>
127 </div>
128
129	 <a href="#donate"
130	 class="hidden sm:inline-flex px-5 py-2.5 rounded-lg text-sm font-semibold text-white btn-glow"
131	 data-t="nav.btn">
132	 Donate
133	 </a>
134
135 <button type="button" id="nav-menu-btn" class="nav-menu-btn md:hidden" aria-controls="mobile-nav" aria-expanded="false" aria-label="Open menu">
136 <svg class="nav-menu-icon-open w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
137 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16"></path>
138 </svg>
139 <svg class="nav-menu-icon-close w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
140 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l12 12M6 18L18 6"></path>
141 </svg>
142 </button>
143 </div>
144 </div>
145
146 <div id="mobile-nav" class="mobile-nav md:hidden" hidden>
147 <div class="mobile-nav-panel">
148	 <a href="#download" class="mobile-nav-link js-mobile-nav-link" data-t="nav.download">Download</a>
149	 <a href="#features" class="mobile-nav-link js-mobile-nav-link" data-t="nav.features">Features</a>
150	 <a href="#how" class="mobile-nav-link js-mobile-nav-link" data-t="nav.how">How it works</a>
151 <a href="#faq" class="mobile-nav-link js-mobile-nav-link" data-t="nav.faq">FAQ</a>
152 <a href="#donate" class="mobile-nav-cta js-mobile-nav-link" data-t="nav.btn">Donate</a>
153 <a href="https://pub-e5d657b6a1234015991d4efd11c3efb8.r2.dev/downloads/MediaFlow%20Setup%202.4.6.exe" class="mobile-nav-download js-win-download js-mobile-nav-link" data-download-source="nav-mobile" data-t="hero.installWin" target="_blank" rel="noopener noreferrer">Download Free for Windows</a>
154 </div>
155 </div>
156 </nav>
157
158 <!-- Hero / Download anchor -->
159 <header id="download" class="pt-32 md:pt-40 pb-16 px-6 text-center relative scroll-mt-24">
160 <div class="max-w-5xl mx-auto">
161 <p class="inline-flex items-center gap-2 text-xs font-semibold text-accent-400 mb-6 px-3 py-1.5 rounded-full border border-accent-500/30 bg-accent-500/10 tracking-wide" data-t="hero.badge">
162 <span class="w-1.5 h-1.5 rounded-full bg-accent-400" aria-hidden="true"></span>
163 Local-first · Free &amp; open source
164 </p>
165	 <h1 class="text-4xl sm:text-6xl md:text-7xl font-extrabold mb-7 leading-[1.06] tracking-tight text-white" data-t="hero.title">
166	 Free video downloader that stays on <span class="gradient-text">your PC</span>
167	 </h1>
168	 <p class="text-lg md:text-xl text-zinc-400 mb-10 max-w-2xl mx-auto leading-relaxed" data-t="hero.desc">
169	 Download videos from YouTube, TikTok, Bilibili, and more. Transcribe, compress, subtitle, and create — free, open source, and offline on your machine.
170	 </p>
171
172	 <div class="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
173	 <a href="https://pub-e5d657b6a1234015991d4efd11c3efb8.r2.dev/downloads/MediaFlow%20Setup%202.4.6.exe"
174	 class="js-win-download px-10 py-4 rounded-2xl text-white font-semibold text-lg btn-glow-strong flex items-center justify-center gap-2.5"
175	 data-download-source="hero" target="_blank" rel="noopener noreferrer">
176	 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
177	 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
178	 d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
179	 </svg>
180	 <span data-t="hero.installWin">Download Free for Windows</span>
181	 </a>
182	 <a href="#donate"
183	 class="px-10 py-4 rounded-2xl font-semibold text-lg text-zinc-200 border border-white/15 bg-white/5 hover:bg-white/10 hover:border-white/30 transition flex items-center justify-center gap-2.5">
184	 <svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
185	 <span data-t="hero.btnDonateLabel">Support the project</span>
186	 </a>
187	 </div>
188	 <p class="mt-4 text-xs text-zinc-500 max-w-md mx-auto" data-t="hero.ctaNote">Free · Open source · No account · Windows 10/11</p>
189
190	 <div class="hero-secondary-links mt-9 flex flex-wrap justify-center items-center gap-3">
191	 <a href="https://github.com/Kevinlabs26/MediaFlow"
192	 class="js-community-github hero-secondary-link"
193	 target="_blank" rel="noopener noreferrer">
194	 <svg class="w-4 h-4 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
195	 <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
196	 </svg>
197	 <span data-t="hero.linkCommunity">Open Source on GitHub</span>
198	 </a>
199	 <a href="#" id="hero-mac-link"
200	 class="js-mac-download hero-secondary-link notranslate"
201	 translate="no">
202	 <span data-t="hero.installMac" data-role="mac-label" class="notranslate" translate="no">macOS</span>
203	 </a>
204	 <a href="https://chromewebstore.google.com/detail/mediaflow-helper-pro/hlgkefmhlcpcfhhiepkkjebilnjlghon"
205	 id="hero-extension-link"
206	 class="js-extension-download hero-secondary-link"
207	 target="_blank" rel="noopener noreferrer">
208	 <span data-t="hero.linkExtension">Browser Extension</span>
209	 </a>
210	 </div>
211
212	 <!-- Stats -->
213	 <div class="hero-stats mt-10">
214	 <div class="hero-stat">
215	 <b>$0</b><span data-t="hero.statFree">Free forever</span>
216	 </div>
217	 <div class="hero-stat">
218	 <b>Apache 2.0</b><span data-t="hero.statOs">Open source</span>
219	 </div>
220	 <div class="hero-stat">
221	 <b>100%</b><span data-t="hero.statLocal">Local &amp; offline</span>
222	 </div>
223	 <div class="hero-stat">
224	 <b>0</b><span data-t="hero.statAccount">Accounts required</span>
225	 </div>
226	 </div>
227
228	 <!-- Unified product showcase -->
229	 <div class="product-showcase mt-16 md:mt-24 max-w-5xl mx-auto reveal" id="product-showcase" data-showcase>
230	 <div class="hero-app-glow" aria-hidden="true"></div>
231	 <div class="product-showcase-stage group relative">
232	 <div class="product-frame product-showcase-main">
233	 <img id="showcase-main-img"
234	 src="assets/hero-app1.webp?v=20260817"
235	 alt="MediaFlow desktop app"
236	 class="w-full h-auto object-cover"
237	 width="1600"
238	 height="900"
239	 fetchpriority="high"
240	 decoding="async">
241	 <button type="button" id="showcase-prev" class="product-showcase-nav product-showcase-nav-prev" aria-label="Previous screenshot">
242	 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
243	 </button>
244	 <button type="button" id="showcase-next" class="product-showcase-nav product-showcase-nav-next" aria-label="Next screenshot">
245	 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
246	 </button>
247	 <div class="product-showcase-badge" aria-live="polite">
248	 <span id="showcase-current">1</span><span class="product-showcase-badge-sep">/</span><span id="showcase-total">7</span>
249	 </div>
250	 </div>
251	 <p class="product-showcase-caption mt-3 text-xs sm:text-sm text-zinc-500" data-t="hero.proofCaption">Real product UI — runs entirely on your PC</p>
252	 </div>
253
254	 <div class="product-showcase-rail mt-5">
255	 <div class="product-showcase-rail-head">
256	 <p class="text-sm font-medium text-zinc-400" data-t="hero.galleryTitle">More workflows</p>
257	 <p class="text-xs text-zinc-600 hidden sm:block" data-t="hero.galleryHint">Click a preview to switch</p>
258	 </div>
259	 	 <div class="product-showcase-thumbs" role="tablist" aria-label="Product screenshots">
260	 <button type="button" class="product-thumb is-active" role="tab" aria-selected="true" data-showcase-index="0" data-src="assets/hero-app1.webp?v=20260817" data-alt="MediaFlow overview">
261	 <img src="assets/hero-app1.webp?v=20260817" alt="" loading="eager" decoding="async">
262	 </button>
263	 <button type="button" class="product-thumb" role="tab" aria-selected="false" data-showcase-index="1" data-src="assets/hero-app2.webp?v=20260817" data-alt="Workflow 2">
264	 <img src="assets/hero-app2.webp?v=20260817" alt="" loading="lazy" decoding="async">
265	 </button>
266	 <button type="button" class="product-thumb" role="tab" aria-selected="false" data-showcase-index="2" data-src="assets/hero-app3.webp?v=20260817" data-alt="Workflow 3">
267	 <img src="assets/hero-app3.webp?v=20260817" alt="" loading="lazy" decoding="async">
268	 </button>
269	 <button type="button" class="product-thumb" role="tab" aria-selected="false" data-showcase-index="3" data-src="assets/hero-app4.webp?v=20260817" data-alt="Workflow 4">
270	 <img src="assets/hero-app4.webp?v=20260817" alt="" loading="lazy" decoding="async">
271	 </button>
272	 <button type="button" class="product-thumb" role="tab" aria-selected="false" data-showcase-index="4" data-src="assets/hero-app5.webp?v=20260817" data-alt="Workflow 5">
273	 <img src="assets/hero-app5.webp?v=20260817" alt="" loading="lazy" decoding="async">
274	 </button>
275	 <button type="button" class="product-thumb" role="tab" aria-selected="false" data-showcase-index="5" data-src="assets/hero-app6.webp?v=20260817" data-alt="Workflow 6">
276	 <img src="assets/hero-app6.webp?v=20260817" alt="" loading="lazy" decoding="async">
277	 </button>
278	 <button type="button" class="product-thumb" role="tab" aria-selected="false" data-showcase-index="6" data-src="assets/hero-app7.webp?v=20260817" data-alt="Workflow 7">
279	 <img src="assets/hero-app7.webp?v=20260817" alt="" loading="lazy" decoding="async">
280	 </button>
281	 </div>
282	 </div>
283	 </div>
284	 </div>
285	 </header>
286
287 <!-- Features: user jobs -->
288 <section id="features" class="py-20 md:py-24 reveal">
289 <div class="site-container">
290 <div class="text-center max-w-2xl mx-auto mb-12 md:mb-16">
291 <p class="text-xs font-semibold text-accent-400 tracking-widest uppercase mb-3" data-t="features.eyebrow">What you can finish</p>
292 <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white" data-t="features.title">Built for real media jobs</h2>
293 <p class="text-zinc-400" data-t="features.subtitle">Every feature is included — no limits, no upsells.</p>
294 </div>
295	 <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-5 reveal reveal-stagger">
296	 <article class="feature-card glass p-6">
297	 <div class="feature-icon mb-4">
298	 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
299 </div>
300 <h3 class="text-base font-semibold mb-2 text-white" data-t="features.f1_title">Archive before links die</h3>
301 <p class="text-sm text-zinc-400 leading-relaxed" data-t="features.f1_desc">Download and save local copies from supported public sources — unlimited downloads, always free.</p>
302 </article>
303 <article class="feature-card glass p-6">
304 <div class="feature-icon mb-4">
305 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/></svg>
306 </div>
307 <h3 class="text-base font-semibold mb-2 text-white" data-t="features.f2_title">Turn video into text</h3>
308 <p class="text-sm text-zinc-400 leading-relaxed" data-t="features.f2_desc">Local transcription for subtitles and notes. Your media stays on disk — no cloud account wall.</p>
309 </article>
310 <article class="feature-card glass p-6">
311 <div class="feature-icon mb-4">
312 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
313 </div>
314 <h3 class="text-base font-semibold mb-2 text-white" data-t="features.f3_title">Compress images fast</h3>
315 <p class="text-sm text-zinc-400 leading-relaxed" data-t="features.f3_desc">Shrink and convert images for shipping, backup, or web — right next to your media workflow.</p>
316 </article>
317 <article class="feature-card glass p-6">
318 <div class="feature-icon mb-4">
319 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
320 </div>
321 <div class="flex items-center gap-2 mb-2">
322 <h3 class="text-base font-semibold text-white" data-t="features.f4_title">Batch, AI &amp; studio</h3>
323 </div>
324	 <p class="text-sm text-zinc-400 leading-relaxed" data-t="features.f4_desc">Queues, AI enhance, editor, subtitles, mobile bridge — all included.</p>
325 </article>
326 </div>
327 </div>
328 </section>
329
330 <!-- Everything included / no limits band -->
331 <section id="features-full" class="py-16 md:py-20 relative reveal">
332 <div class="site-container">
333	 <div class="glass band-card rounded-2xl p-8 md:p-12 text-center relative overflow-hidden">
334	 <div class="feature-band-glow" aria-hidden="true"></div>
335 <h2 class="text-2xl md:text-3xl font-bold mb-3 text-white" data-t="all.title">Everything. Free. Forever.</h2>
336 <p class="text-zinc-400 max-w-2xl mx-auto mb-8" data-t="all.subtitle">MediaFlow used to have a paid “Pro” tier. Not anymore — every tool is unlocked for everyone, with the source code open on GitHub.</p>
337 <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3 text-left">
338 <div class="all-chip" data-t="all.i1">Unlimited batch &amp; queue downloads</div>
339 <div class="all-chip" data-t="all.i2">AI image &amp; video enhance</div>
340 <div class="all-chip" data-t="all.i3">Timeline video editor</div>
341 <div class="all-chip" data-t="all.i4">Subtitle translation &amp; dubbing</div>
342 <div class="all-chip" data-t="all.i5">Creator tools &amp; mobile bridge</div>
343 <div class="all-chip" data-t="all.i6">Browser extension</div>
344	 </div>
345	 </div>
346	 </div>
347	 </section>
348
349	 <!-- How it works -->
350	 <section id="how" class="py-20 md:py-24 reveal scroll-mt-24">
351	 <div class="site-container">
352	 <div class="text-center max-w-2xl mx-auto mb-12 md:mb-16">
353	 <p class="text-xs font-semibold text-accent-400 tracking-widest uppercase mb-3" data-t="how.eyebrow">How it works</p>
354	 <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white" data-t="how.title">From link to finished file in three steps</h2>
355	 <p class="text-zinc-400" data-t="how.subtitle">No accounts, no cloud, no paywalls — just your machine.</p>
356	 </div>
357
358	 <div class="grid md:grid-cols-3 gap-5 reveal reveal-stagger">
359	 <div class="step-card">
360	 <div class="step-head">
361	 <span class="step-num">1</span>
362	 <span class="step-icon" aria-hidden="true">
363	 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
364	 </span>
365	 </div>
366	 <h3 class="text-lg font-semibold mb-2 text-white" data-t="how.s1_title">Download &amp; install</h3>
367	 <p class="text-sm text-zinc-400 leading-relaxed" data-t="how.s1_desc">Grab the Windows installer and run it — free, forever, no account needed.</p>
368	 </div>
369
370	 <div class="step-card">
371	 <div class="step-head">
372	 <span class="step-num">2</span>
373	 <span class="step-icon" aria-hidden="true">
374	 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
375	 </span>
376	 </div>
377	 <h3 class="text-lg font-semibold mb-2 text-white" data-t="how.s2_title">Paste a link or pick a file</h3>
378 <p class="text-sm text-zinc-400 leading-relaxed" data-t="how.s2_desc">Download from a supported video URL, or drop in audio and images to process.</p>
379	 </div>
380
381	 <div class="step-card">
382	 <div class="step-head">
383	 <span class="step-num">3</span>
384	 <span class="step-icon" aria-hidden="true">
385	 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M9 17H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2h-4"/><polyline points="13 13 9 17 13 21 17 17 13 13"/>
385<line x1="9" y1="17" x2="16" y2="17"/></svg>
386	 </span>
387	 </div>
388	 <h3 class="text-lg font-semibold mb-2 text-white" data-t="how.s3_title">Export locally</h3>
389	 <p class="text-sm text-zinc-400 leading-relaxed" data-t="how.s3_desc">Download, transcribe, compress, or edit — everything stays on your PC.</p>
390	 </div>
391	 </div>
392	 </div>
393	 </section>
394
395	 <!-- Security Section -->
396	 <section id="security" class="py-20 md:py-24 reveal">
397 <div class="site-container">
398 <div class="text-center mb-12">
399 <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white" data-t="security.title">Privacy by Design</h2>
400 <p class="text-zinc-400 max-w-2xl mx-auto" data-t="security.subtitle">We believe your media belongs to
401 you. That's why MediaFlow processes everything locally on your machine.</p>
402 </div>
403
404 <div class="grid md:grid-cols-3 gap-5">
405 <div class="glass p-7 rounded-2xl">
406 <h3 class="text-lg font-semibold mb-3 text-white" data-t="security.item1_title">Offline &amp; Local</h3>
407 <p class="text-zinc-400 text-sm leading-relaxed" data-t="security.item1_desc">All AI transcription
408 and video processing happens on your computer's hardware. No internet required for processing.
409 </p>
410 </div>
411 <div class="glass p-7 rounded-2xl">
412 <h3 class="text-lg font-semibold mb-3 text-white" data-t="security.item2_title">No Cloud Uploads</h3>
413 <p class="text-zinc-400 text-sm leading-relaxed" data-t="security.item2_desc">We never see your
414 files. Unlike other services, we don't upload your personal media to any remote server.</p>
415 </div>
416 <div class="glass p-7 rounded-2xl">
417 <h3 class="text-lg font-semibold mb-3 text-white" data-t="security.item3_title">Zero Analytics</h3>
418 <p class="text-zinc-400 text-sm leading-relaxed" data-t="security.item3_desc">We do not track your
419 capture history, your watch history, or your transcripts. Your privacy is paramount.</p>
420 </div>
421 </div>
422 </div>
423 </section>
424
425 <!-- FAQ Section -->
426 <section id="faq" class="py-20 md:py-24 reveal">
427 <div class="max-w-3xl mx-auto px-6">
428 <h2 class="text-3xl md:text-4xl font-bold text-center mb-4 text-white" data-t="faq.title">Frequently Asked Questions</h2>
429 <p class="text-center text-zinc-500 text-sm mb-10 max-w-xl mx-auto" data-t="faq.subtitle">Straight answers before you install — not marketing slogans.</p>
430 <div class="space-y-3">
431 <div class="faq-item glass rounded-xl overflow-hidden active">
432 <button type="button" class="faq-header w-full flex items-center justify-between p-5 text-left">
433 <span class="font-semibold text-white" data-t="faq.q1">How is MediaFlow free?</span>
434 <svg class="faq-icon w-5 h-5 text-zinc-500 transition-transform duration-300 shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
435 </button>
436 <div class="faq-answer px-5">
437 <p class="text-zinc-400 pb-5 text-sm leading-relaxed" data-t="faq.a1">MediaFlow is completely free and open source under the Apache 2.0 license. Every feature — batch downloads, AI enhance, editor, subtitles, mobile bridge — is unlocked for everyone. If you find it useful, you're welcome to supp
437ort the project with a small donation, but nothing is ever gated behind payment.</p>
438 </div>
439 </div>
440 <div class="faq-item glass rounded-xl overflow-hidden">
441 <button type="button" class="faq-header w-full flex items-center justify-between p-5 text-left">
442 <span class="font-semibold text-white" data-t="faq.q2">Where does my media go? Is anything uploaded?</span>
443 <svg class="faq-icon w-5 h-5 text-zinc-500 transition-transform duration-300 shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
444 </button>
445 <div class="faq-answer px-5">
446 <p class="text-zinc-400 pb-5 text-sm leading-relaxed" data-t="faq.a2">Capture, convert, and most AI steps run on your PC and write to folders you choose. We do not run a media cloud for your videos. Optional online pieces (some TTS/API keys you configure yourself) never require uploading your library to us.</p>
447 </div>
448 </div>
449 <div class="faq-item glass rounded-xl overflow-hidden">
450 <button type="button" class="faq-header w-full flex items-center justify-between p-5 text-left">
451 <span class="font-semibold text-white" data-t="faq.q3">Which sites can I download from?</span>
452 <svg class="faq-icon w-5 h-5 text-zinc-500 transition-transform duration-300 shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
453 </button>
454 <div class="faq-answer px-5">
455 <p class="text-zinc-400 pb-5 text-sm leading-relaxed" data-t="faq.a3">Downloads use the same open tooling many archival apps use (yt-dlp under the hood). Major public platforms work when the tool supports them — but sites change often, so a specific page can break until engines update. Private, login-gated, or geo-blocked content may need cookies/proxy and is not guaranteed. Only download content you have the right to save.</p>
456 </div>
457 </div>
458 <div class="faq-item glass rounded-xl overflow-hidden">
459 <button type="button" class="faq-header w-full flex items-center justify-between p-5 text-left">
460 <span class="font-semibold text-white" data-t="faq.q4">Do I need a powerful GPU or gaming PC?</span>
461 <svg class="faq-icon w-5 h-5 text-zinc-500 transition-transform duration-300 shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
462 </button>
463 <div class="faq-answer px-5">
464 <p class="text-zinc-400 pb-5 text-sm leading-relaxed" data-t="faq.a4">No for everyday use. Download, compress, convert, and light editing run fine on a normal Windows laptop. Local transcription and heavy AI enhance are faster with a GPU, but can fall back to CPU (slower).</p>
465 </div>
466 </div>
467 <div class="faq-item glass rounded-xl overflow-hidden">
468 <button type="button" class="faq-header w-full flex items-center justify-between p-5 text-left">
469 <span class="font-semibold text-white" data-t="faq.q5">Windows warns me when I install — is that normal?</span>
470 <svg class="faq-icon w-5 h-5 text-zinc-500 transition-transform duration-300 shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
471 </button>
472 <div class="faq-answer px-5">
473 <p class="text-zinc-400 pb-5 text-sm leading-relaxed" data-t="faq.a5">It can happen for new or low-reputation installers (SmartScreen). Always download from this official site. If Windows blocks the file, use “More info → Run anyway” only when you trust the source. Signed builds reduce warnings over time; until then, treat any third-party mirror as unsafe.</p>
474 </div>
475 </div>
476 <div class="faq-item glass rounded-xl overflow-hidden">
477 <button type="button" class="faq-header w-full flex items-center justify-between p-5 text-left">
478 <span class="font-semibold text-white" data-t="faq.q6">Is there a Mac version?</span>
479 <svg class="faq-icon w-5 h-5 text-zinc-500 transition-transform duration-300 shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
480 </button>
481 <div class="faq-answer px-5">
482 <p class="text-zinc-400 pb-5 text-sm leading-relaxed" data-t="faq.a6">The shipping installer today is Windows 10/11. macOS is listed as coming soon — no public Mac package until the download button is live. Prefer Windows for production use right now.</p>
483 </div>
484 </div>
485 <div class="faq-item glass rounded-xl overflow-hidden">
486 <button type="button" class="faq-header w-full flex items-center justify-between p-5 text-left">
487 <span class="font-semibold text-white" data-t="faq.q7">What if I don't have a paid AI API?</span>
488 <svg class="faq-icon w-5 h-5 text-zinc-500 transition-transform duration-300 shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
489 </button>
490 <div class="faq-answer px-5">
491 <p class="text-zinc-400 pb-5 text-sm leading-relaxed" data-t="faq.a7">AI features like translation and transcription can use the free Groq API — plenty for personal use. Just paste your Groq key in Settings. Local transcription (Whisper) also runs offline at no cost.</p>
492 </div>
493 </div>
494 </div>
495	 </div>
496	 </section>
497
498	 <!-- Donate Section -->
499	 <section id="donate" class="donate-band py-20 md:py-24 reveal">
500 <div class="site-container text-center">
501	 <div class="donate-heart" aria-hidden="true">
502	 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
503	 </div>
504 <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white" data-t="donate.title">Support MediaFlow</h2>
505 <p class="text-zinc-400 max-w-2xl mx-auto mb-10" data-t="donate.subtitle">No paywalls, no feature locks — donations are voluntary and keep this open-source project alive.</p>
506
507	 <div class="donate-grid grid sm:grid-cols-2 lg:grid-cols-3 gap-5 text-left reveal reveal-stagger">
508	 <a class="donate-card" id="donate-ko-fi" target="_blank" rel="noopener noreferrer"
509	 href="https://ko-fi.com/kevinlabs">
510	 <div class="donate-card-icon" aria-hidden="true">
511	 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M17 8h1a4 4 0 110 8h-1"/><path d="M3 8h14v6a5 5 0 01-5 5H8a5 5 0 01-5-5V8z"/></svg>
512	 </div>
513	 <div class="donate-card-title" data-t="donate.kofi.title">Ko-fi · Buy me a coffee</div>
514	 <div class="donate-card-desc" data-t="donate.kofi.desc">A one-time or monthly tip on Ko-fi. Any amount is appreciated.</div>
515	 <span class="donate-qr" aria-hidden="true">
516	 <img data-qr-img alt="" width="168" height="168" loading="lazy" decoding="async">
517	 </span>
518	 <span class="donate-scan-hint" data-t="donate.scan">Scan with your phone</span>
519	 <div class="donate-card-cta">
520	 <span data-t="donate.cta">Donate</span>
521	 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
522	 </div>
523	 </a>
524 <a class="donate-card" id="donate-buyme" target="_blank" rel="noopener noreferrer"
525 href="https://buymeacoffee.com/kevinlabs26">
526 	 <div class="donate-card-icon" aria-hidden="true">
527 	 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M6 8h11v6a5 5 0 01-5 5H9a3 3 0 01-3-3V8z"/><path d="M17 10h1a3 3 0 110 6h-1"/><path d="M9 5h6"/></svg>
528 	 </div>
529 	 <div class="donate-card-title">Buy Me a Coffee</div>
530 	 <div class="donate-card-desc">Support the project with a coffee. Every contribution helps.</div>
531 	 <span class="donate-qr" aria-hidden="true">
532 	 <img data-qr-img alt="" width="168" height="168" loading="lazy" decoding="async">
533 	 </span>
534 	 <span class="donate-scan-hint" data-t="donate.scan">Scan with your phone</span>
535 	 <div class="donate-card-cta">
536 	 <span data-t="donate.cta">Donate</span>
537 	 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
538 	 </div>
539 	 </a>
540 <a class="donate-card" id="donate-lemon" target="_blank" rel="noopener noreferrer"
541	 href="https://kevinlabs.lemonsqueezy.com/checkout/buy/7b60b363-50b5-4233-a982-91a0611eccd6">
542	 <div class="donate-card-icon donate-card-icon-lemon" aria-hidden="true">
543	 <svg width="28" height="28" viewBox="0 0 32 32" fill="none"><path d="M22.7 7.2c2.2 1.6 3.8 4.2 3.8 7.5 0 6.2-5.2 11.1-11.7 11.1-3.2 0-6.2-1.2-8.4-3.2 1.3-6.9 5.8-13.4 16.3-15.4Z" fill="currentColor"/><path d="M21.8 7.8c-2.8-.2-5.7.8-7.6 2.9-2.1 2.3-2.8 5.7-1.9 8.6" stroke="#121212" stroke-width="1.8" stroke-linecap="round"/>
543<path d="M22.5 7.5c1.5-1.8 3.4-2.4 5.4-2.2-1 2-2.5 3.1-4.6 3.2" fill="currentColor"/></svg>
544	 </div>
545	 <div class="donate-card-title" data-t="donate.lemon.title">Lemon Squeezy</div>
546	 <div class="donate-card-desc" data-t="donate.lemon.desc">One-time or monthly donation, global payment methods accepted.</div>
547	 <span class="donate-qr" aria-hidden="true">
548	 <img data-qr-img alt="" width="168" height="168" loading="lazy" decoding="async">
549	 </span>
550 <span class="donate-scan-hint" data-t="donate.scan">Scan with your phone</span>
551 <div class="donate-card-cta">
552 <span data-t="donate.lemon.cta">Open Lemon Squeezy</span>
553	 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
554	 </div>
555	 </a>
556 </div>
557
558 <p class="donate-trust-note" data-t="donate.trust">Donations help cover development, build services, and project infrastructure. Payment details are handled by the payment provider.</p>
559 <p class="mt-6 text-sm text-zinc-500" data-t="donate.thanks">Thank you to every supporter — you keep this project going.</p>
560 </div>
561 </section>
562
563	 <!-- Final CTA banner -->
564	 <section class="cta-banner py-16 md:py-20 reveal" id="cta">
565	 <div class="max-w-3xl mx-auto px-6">
566	 <div class="cta-card">
567	 <div class="cta-glow" aria-hidden="true"></div>
568	 <h2 class="text-3xl md:text-4xl font-bold mb-3 text-white" data-t="cta.title">Keep your media on your PC — for free</h2>
569	 <p class="text-zinc-300 mb-8 max-w-xl mx-auto" data-t="cta.subtitle">Everything included, nothing locked. Open source, Apache 2.0 licensed.</p>
570	 <div class="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
571	 <a href="https://pub-e5d657b6a1234015991d4efd11c3efb8.r2.dev/downloads/MediaFlow%20Setup%202.4.6.exe"
572	 class="js-win-download px-10 py-4 rounded-2xl text-white font-semibold text-lg btn-glow-strong inline-flex items-center justify-center gap-2.5"
573	 data-download-source="cta" target="_blank" rel="noopener noreferrer">
574	 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
575	 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
576	 </svg>
577	 <span data-t="hero.installWin">Download Free for Windows</span>
578	 </a>
579	 <a href="#donate"
580	 class="px-10 py-4 rounded-2xl font-semibold text-lg text-white border border-white/20 bg-white/10 hover:bg-white/15 hover:border-white/30 transition inline-flex items-center justify-center gap-2.5">
581	 <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
582	 <span data-t="hero.btnDonateLabel">Support the project</span>
583	 </a>
584	 </div>
585	 </div>
586	 </div>
587	 </section>
588
589	 <!-- Footer -->
590	 <footer class="site-footer">
591 <div class="site-footer-inner">
592 <div class="footer-grid">
593 <div class="footer-brand">
594 <div class="flex items-center gap-2.5 mb-3">
595 <img src="src/assets/images/logo.png?v=20260817" alt="" class="w-8 h-8 rounded-xl" width="32" height="32">
596 <span class="font-semibold text-white">MediaFlow</span>
597 </div>
598 <p class="footer-tagline text-zinc-400" data-t="footer.tagline">A local media downloader for Windows. Download, transcribe, and compress offline — free and open source.</p>
599 <p class="footer-status mt-4 text-zinc-500" id="footer-status" data-t="footer.status" data-footer-status>
600 Windows 10/11 · macOS coming soon · v2.4.0
601 </p>
602 </div>
603
604 <div class="footer-col">
605 <h3 class="footer-heading text-zinc-300" data-t="footer.colProduct">Product</h3>
606 <ul class="footer-links">
607 <li><a href="#download" data-t="nav.download">Download</a></li>
608 <li><a href="#features" data-t="nav.features">Features</a></li>
609 <li><a href="#donate" data-t="nav.donate">Donate</a></li>
610 <li><a href="#faq" data-t="nav.faq">FAQ</a></li>
611 </ul>
612 </div>
613
614 <div class="footer-col">
615 <h3 class="footer-heading text-zinc-300" data-t="footer.colCommunity">Community</h3>
616 <ul class="footer-links">
617 <li>
618 <a href="https://github.com/Kevinlabs26/MediaFlow"
619 class="js-community-github" target="_blank" rel="noopener noreferrer"
620 data-t="hero.linkCommunity">Open Source on GitHub</a>
621 </li>
622 <li>
623 <a href="https://chromewebstore.google.com/detail/mediaflow-helper
623-pro/hlgkefmhlcpcfhhiepkkjebilnjlghon"
624 class="js-extension-download" target="_blank" rel="noopener noreferrer"
625 data-t="hero.linkExtension">Browser Extension</a>
626 </li>
627 <li><a href="mailto:[email protected]" data-t="footer.contact">Contact Support</a></li>
628 </ul>
629 </div>
630
631 <div class="footer-col">
632 <h3 class="footer-heading text-zinc-300" data-t="footer.colLegal">Legal</h3>
633 <ul class="footer-links">
634 <li><a href="/privacy.html" data-t="footer.privacy">Privacy Policy</a></li>
635 <li><a href="/terms.html" data-t="footer.terms">Terms of Service</a></li>
636 </ul>
637 </div>
638 </div>
639
640 <div class="footer-bottom">
641 <p class="text-zinc-500" data-t="footer.copy">&copy; 2026 MediaFlow. Apache 2.0 Licensed · Free &amp; Open Source.</p>
642 <p class="footer-opensource text-zinc-500" data-t="footer.opensource">Powered by Open Source: FFmpeg &amp; Whisper</p>
643 </div>
644 </div>
645 </footer>
646
647 <!-- Donation popup (timed, once per day) -->
648 <div id="donate-popup" class="donate-popup" role="dialog" aria-modal="true" aria-labelledby="donate-popup-title" aria-hidden="true">
649 <div class="donate-popup-card">
650 <button type="button" id="donate-popup-close" class="donate-popup-close" aria-label="Close">
651 <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M6 18L18 6"/></svg>
652 </button>
653 <div class="donate-popup-icon" aria-hidden="true">
654 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
655 </div>
656 <h3 id="donate-popup-title" data-t="donate.popupTitle">Enjoying MediaFlow?</h3>
657 <p class="donate-popup-desc" data-t="donate.popupDesc">It's free and open source. A small coffee keeps the project alive.</p>
658 <div class="donate-popup-buttons">
659 <a href="#" id="donate-popup-ko-fi" target="_blank" rel="noopener noreferrer" class="donate-popup-btn btn-glow">
660 <span data-t="donate.popupKoFi">Buy me a coffee</span>
661 </a>
662 <a href="#" id="donate-popup-lemon" target="_blank" rel="noopener noreferrer" class="donate-popup-btn">
663 <span data-t="donate.popupLemon">Lemon Squeezy</span>
664 </a>
665 </div>
666 <button type="button" id="donate-popup-later" class="donate-popup-later" data-t="donate.popupLater">Maybe later</button>
667 </div>
668 </div>
669
670 <div id="download-toast"
671 class="download-toast notranslate pointer-events-none fixed bottom-6 left-1/2 z-[300] w-[min(92vw,28rem)] -translate-x-1/2 rounded-lg border border-white/10 bg-ink-800 px-5 py-4 text-left shadow-xl opacity-0"
672 translate="no"
673 aria-live="polite" aria-hidden="true">
674 <p id="download-toast-title" class="notranslate text-sm font-semibold text-white" translate="no">Coming Soon</p>
675 <p id="download-toast-message" class="notranslate mt-1 text-sm text-zinc-400" translate="no">MediaFlow is available for Windows now. The macOS build is not ready yet — please use Windows or check back later.</p>
676 </div>
677
678 <!-- Mascot pet -->
679 <div class="pet-wrap" id="pet">
680     <div class="pet-bubble" id="pet-bubble" hidden>
681         <button type="button" class="pet-bubble-close" id="pet-close" aria-label="Hide pet" title="Hide">&times;</button>
682         <span class="pet-msg" data-t="pet.b1">Meow~ Don't mind me, I'm just watching your videos 😺</span>
683         <span class="pet-msg" data-t="pet.b2">Hey! You're downloading videos too? Soulmate! 🐾</span>
684         <span class="pet-msg" data-t="pet.b3">Human~ The kibble is running low. Spare a fish snack? 🐟</span>
685         <span class="pet-msg" data-t="pet.b4">Purr purr… this computer is so warm (rubs) 🧡</span>
686         <span class="pet-msg" data-t="pet.b5">Meow~ The dev says if no one donates, he'll take my fish away 😿</span>
687         <span class="pet-msg" data-t="pet.b6">Feed me = high-quality HD luck for your videos. Fair deal! 🍀</span>
688         <span class="pet-action" data-t="pet.a1">Licking paw… 🐾</span>
689         <span class="pet-action" data-t="pet.a2">Purring… 🥰</span>
690         <span class="pet-action" data-t="pet.a3">Yawn~ getting sleepy 😴</span>
691         <span class="pet-action" data-t="pet.a4">Meow! 🙀</span>
692     </div>
693     <button type="button" class="pet-ball" id="pet-ball" aria-label="MediaFlow mascot">
694         <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
695             <path d="M12 17 L7 4 L21 10 Z" fill="#f59e0b"/>
696             <path d="M40 17 L45 4 L31 10 Z" fill="#f59e0b"/>
697             <path d="M12 17 L10 9 L18 13 Z" fill="#fb923c"/>
698             <path d="M40 17 L42 9 L34 13 Z" fill="#fb923c"/>
699             <path class="pet-tail" d="M38 44 q11 -3 9 -13 q-0.6 -3 -2.4 -2.2" stroke="#f97316" stroke-width="3.4" stroke-linecap="round" fill="none"/>
700             <ellipse cx="26" cy="43" rx="14" ry="9" fill="#f97316"/>
701             <ellipse class="pet-paw pet-paw-r" cx="33.5" cy="48.5" rx="4" ry="2.6" fill="#fdba74"/>
702             <ellipse cx="26" cy="23" rx="16" ry="13" fill="#f97316"/>
703             <g class="pet-eyes">
704                 <ellipse cx="20" cy="22" rx="2.6" ry="3" fill="#3b2f2f"/>
705                 <ellipse cx="32" cy="22" rx="2.6" ry="3" fill="#3b2f2f"/>
706                 <circle cx="21" cy="21" r="1" fill="#fff"/>
707                 <circle cx="33" cy="21" r="1" fill="#fff"/>
708             </g>
709             <ellipse class="pet-mouth-open" cx="26" cy="30" rx="5.5" ry="4" fill="#3b2f2f" opacity="0"/>
710             <ellipse class="pet-mouth-open" cx="24" cy="28.6" rx="2.2" ry="1.5" fill="#fda4af" opacity="0"/>
711             <ellipse cx="26" cy="27.5" rx="4.2" ry="3" fill="#fff5e6" opacity=".9"/>
712             <path d="M23.4 27.8 q2.6 2 5.2 0" stroke="#3b2f2f" stroke-width="1.1" fill="none" stroke-linecap="round"/>
713             <path d="M26 26.8 v1.6" stroke="#3b2f2f" stroke-width="1"/>
714             <circle cx="26" cy="27.4" r="1.1" fill="#fda4af"/>
715             <g stroke="#fbbf24" stroke-width="1.1" stroke-linecap="round">
716                 <path d="M10 23 h5.5 M9.5 26 h5.5 M42 23 h-5.5 M42.5 26 h-5.5"/>
717             </g>
718             <circle cx="15" cy="26.5" r="2.1" fill="#fdba74" opacity=".75"/>
719             <circle cx="37" cy="26.5" r="2.1" fill="#fdba74" opacity=".75"/>
720             <ellipse class="pet-paw pet-paw-l" cx="18.5" cy="48.5" rx="4" ry="2.6" fill="#fdba74"/>
721         </svg>
722     </button>
723     <button type="button" class="pet-reopen" id="pet-reopen" title="Show pet" hidden>&#128008;</button>
724 </div>
725
726 <!-- Scripts -->
727 
727<script src="src/assets/js/main.js?v=20260818c"></script>
vendor: 1 bytes, line 727
727
728<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"13a39ee355ae429ab56ec19a150da0a4","r":1,"spa":2}' crossorigin="anonymous"></script>
728
729</body>
730
731</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.