Publish YouTubeDL 1.4.5 and website on Gitea
Check extension and helper / check (push) Canceled after 0s
Check extension and helper / check (push) Canceled after 0s
This commit is contained in:
DepressedCat committed
commit
5f2aad00f4
97 files changed
+8451
No files matched your search
Whitespace-only changes.
+35
@@ -0,0 +1,35 @@
|
||||
const root = document.documentElement;
|
||||
const systemDark = matchMedia("(prefers-color-scheme: dark)");
|
||||
const currentTheme = () => root.dataset.theme || (systemDark.matches ? "dark" : "light");
|
||||
const themeButton = document.getElementById("theme-toggle");
|
||||
function labelTheme() { themeButton.setAttribute("aria-label", `Включить ${currentTheme() === "dark" ? "светлую" : "тёмную"} тему`); }
|
||||
labelTheme();
|
||||
themeButton.addEventListener("click", () => {
|
||||
root.dataset.theme = currentTheme() === "dark" ? "light" : "dark";
|
||||
try { localStorage.setItem("ytdl-site-theme", root.dataset.theme); } catch { /* Session-only theme. */ }
|
||||
labelTheme();
|
||||
});
|
||||
systemDark.addEventListener("change", labelTheme);
|
||||
|
||||
for (const button of document.querySelectorAll("[data-screenshot]")) button.addEventListener("click", () => {
|
||||
const theme = button.dataset.screenshot;
|
||||
const screenshot = document.getElementById("menu-screenshot");
|
||||
screenshot.src = `assets/menu-${theme}.png`;
|
||||
screenshot.alt = `Меню YouTubeDL в ${theme === "dark" ? "тёмной" : "светлой"} теме: качество видео, звук, формат, кодек и папка сохранения`;
|
||||
for (const peer of document.querySelectorAll("[data-screenshot]")) peer.setAttribute("aria-pressed", String(peer === button));
|
||||
});
|
||||
|
||||
let copyTimer;
|
||||
for (const button of document.querySelectorAll("[data-copy]")) button.addEventListener("click", async () => {
|
||||
const status = document.getElementById("copy-status");
|
||||
try { await navigator.clipboard.writeText(button.dataset.copy); status.textContent = `Скопировано: ${button.dataset.copy}`; }
|
||||
catch { status.textContent = `Скопируйте адрес вручную: ${button.dataset.copy}`; }
|
||||
status.hidden = false;
|
||||
clearTimeout(copyTimer); copyTimer = setTimeout(() => { status.hidden = true; }, 5500);
|
||||
});
|
||||
|
||||
// Content stays visible if JavaScript or IntersectionObserver is unavailable.
|
||||
if ("IntersectionObserver" in window && !matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||||
const observer = new IntersectionObserver(entries => { for (const entry of entries) if (entry.isIntersecting) { entry.target.classList.add("shown"); observer.unobserve(entry.target); } }, { threshold: 0.07 });
|
||||
for (const element of document.querySelectorAll(".reveal")) { element.classList.add("will-reveal"); observer.observe(element); }
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect width="48" height="48" rx="13" fill="#39bdeb"/><path d="M24 10v20m-8-8 8 8 8-8M12 31v7h24v-7" fill="none" stroke="#0d2b38" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 263 B |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
+102
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="description" content="YouTubeDL — расширение для Edge и Chrome на Windows. Скачивайте видео и Shorts, выбирайте качество, сохраняйте аудио и конвертируйте локально с NVIDIA NVENC или AMD AMF.">
|
||||
<meta name="theme-color" content="#10161d">
|
||||
<meta property="og:title" content="YouTubeDL — Видео. Звук. Ваш выбор.">
|
||||
<meta property="og:description" content="Кнопка скачивания прямо на YouTube. Качество, звук, формат и папка под вашим контролем. Расширение и отдельный помощник для Windows.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://git.lonarpgproxy.space/extention/youtubedl/">
|
||||
<meta property="og:image" content="https://git.lonarpgproxy.space/extention/youtubedl/assets/github-cover.png">
|
||||
<meta property="og:locale" content="ru_RU">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="canonical" href="https://git.lonarpgproxy.space/extention/youtubedl/">
|
||||
<link rel="icon" type="image/svg+xml" href="assets/mark.svg">
|
||||
<title>YouTubeDL — Видео. Звук. Ваш выбор.</title>
|
||||
<script src="theme.js"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="app.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip" href="#main">Перейти к содержимому</a>
|
||||
<header class="site-header">
|
||||
<div class="wrap header-inner">
|
||||
<a class="brand" href="#" aria-label="YouTubeDL — начало"><img src="assets/mark.svg" alt="" width="34" height="34"><span>YouTubeDL</span></a>
|
||||
<nav aria-label="Основная навигация"><a href="#features">Возможности</a><a href="#install">Установка</a><a href="#privacy">Данные</a><a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL" target="_blank" rel="noopener noreferrer">Gitea <span aria-hidden="true">↗</span></a></nav>
|
||||
<button class="theme-button" id="theme-toggle" type="button" aria-label="Переключить тему" title="Переключить тему"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M20.4 13A8.5 8.5 0 0 1 11 3.6 8.5 8.5 0 1 0 20.4 13Z"/></svg></button>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main">
|
||||
<section class="hero" aria-labelledby="hero-title">
|
||||
<img class="hero-art" src="assets/hero.png" alt="" fetchpriority="high" width="1774" height="887">
|
||||
<div class="wrap hero-inner">
|
||||
<div class="hero-copy">
|
||||
<p class="overline hero-overline"><span class="live-dot" aria-hidden="true"></span> ДЛЯ EDGE И CHROME · WINDOWS</p>
|
||||
<h1 id="hero-title">Из YouTube.<br>В <span>вашу папку.</span></h1>
|
||||
<p class="hero-description">Ролики, Shorts или только звук.<br>Выберите качество и формат —<br>остальное сделает YouTubeDL.</p>
|
||||
<div class="hero-actions"><a class="button primary" href="#install">Установить расширение <span aria-hidden="true">↓</span></a><a class="hero-link" href="#features">Посмотреть возможности <span aria-hidden="true">↗</span></a></div>
|
||||
<p class="hero-note">Бесплатно · Для Windows · Обработка на вашем компьютере</p>
|
||||
</div>
|
||||
<div class="hero-bottom"><span>ВИДЕО. ЗВУК. ВАШ ВЫБОР.</span><a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/releases/tag/v1.4.5">Выпуск 1.4.5 <span aria-hidden="true">↗</span></a></div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="format-strip"><div class="wrap"><p>Один ролик.<br><strong>Ваш формат.</strong></p><div class="format-list" aria-label="Форматы"><span>MP4</span><span>MKV</span><span>WebM</span><i aria-hidden="true"></i><span>MP3</span><span>M4A</span><span>Opus</span><span>FLAC</span><span>WAV</span></div></div></div>
|
||||
<section class="section wrap product-section" id="features" aria-labelledby="features-title">
|
||||
<div class="product-copy reveal">
|
||||
<p class="overline">01 / ВСЁ ПОД РУКОЙ</p>
|
||||
<h2 id="features-title">Один клик.<br>Именно <em>ваши</em><br>настройки.</h2>
|
||||
<p class="section-lead">Кнопка «Скачать» появляется рядом с «Подписаться», на превью и в Shorts. При нажатии загрузчик использует сохранённые параметры.</p>
|
||||
<div class="control-example" aria-label="Пример кнопок на YouTube"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3v12m-5-5 5 5 5-5M4 15v5h16v-5"/></svg>Скачать</span><span class="gear-example" aria-hidden="true">⚙</span></div>
|
||||
<p class="quiet">Нужно изменить качество, звук или папку? Откройте ⚙ рядом. Без промежуточных меню при каждом скачивании.</p>
|
||||
<ul class="feature-list"><li><b>Качество источника</b><span>Разрешение, FPS, HDR и язык аудио. Вплоть до 4K/8K, если они доступны у ролика.</span></li><li><b>Видео и звук вместе</b><span>Раздельные дорожки автоматически соединяются. Можно сохранить только видео или только аудио.</span></li><li><b>Файл там, где удобно</b><span>Рабочая папка и папка сохранения могут находиться на разных дисках. Совпадающие имена получают номер; готовые файлы не перезаписываются.</span></li></ul>
|
||||
</div>
|
||||
<figure class="product-visual reveal">
|
||||
<div class="visual-toolbar"><span><i aria-hidden="true"></i> ИНТЕРФЕЙС РАСШИРЕНИЯ</span><div class="screenshot-switch" role="group" aria-label="Тема скриншота"><button type="button" data-screenshot="dark" aria-pressed="true">Тёмная</button><button type="button" data-screenshot="light" aria-pressed="false">Светлая</button></div></div>
|
||||
<div class="screenshot-stage"><img id="menu-screenshot" src="assets/menu-dark.png" alt="Меню YouTubeDL в тёмной теме: качество видео, звук, формат, кодек и папка сохранения" width="520" height="892" loading="lazy"></div>
|
||||
<figcaption>Настоящий интерфейс с тестовыми метаданными.<br>Тема меню подстраивается под YouTube; её можно сменить вручную.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="processing-section" aria-labelledby="processing-title"><div class="wrap processing-inner">
|
||||
<div class="reveal"><p class="overline">02 / БЕЗ ЛИШНИХ ДЕЙСТВИЙ</p><h2 id="processing-title">Две дорожки.<br><em>Один готовый файл.</em></h2><p class="section-lead">Помощник скачивает видео и звук, соединяет их и при необходимости меняет формат. Вы видите каждый этап.</p><p class="quiet">Две операции одновременно, отмена и «Показать файл». Закрытие меню не прерывает скачивание. История загрузок и ошибок открывается в отдельной вкладке.</p></div>
|
||||
<div class="pipeline reveal" aria-label="Этапы обработки"><div class="tracks"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="m10 9 5 3-5 3Z"/></svg>Видео</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 10v4m4-8v12m4-15v18m4-14v10m4-6v2"/></svg>Звук</span></div><div class="pipeline-line" aria-hidden="true"></div><div class="merged-file"><img src="assets/mark.svg" alt="" width="36" height="36"><div><b>Готовый файл</b><small>В вашей папке</small></div><span aria-hidden="true">✓</span></div><div class="stages"><span>Скачать</span><span>Объединить</span><span>Сохранить</span></div><p>Совместимые дорожки копируются без перекодирования — это обычно быстрее всего.</p></div>
|
||||
</div></section>
|
||||
<section class="section wrap gpu-section" aria-labelledby="gpu-title">
|
||||
<div class="gpu-intro reveal"><p class="overline">03 / ЖЕЛЕЗО ИМЕЕТ ЗНАЧЕНИЕ</p><h2 id="gpu-title">Если конвертировать,<br>то <em>с ускорением.</em></h2><p class="section-lead">NVIDIA NVENC и AMD AMF для H.264, HEVC и AV1. YouTubeDL определяет карту и проверяет кодировщики пробным запуском FFmpeg.</p></div>
|
||||
<div class="gpu-facts reveal"><article><span class="fact-number">01</span><div><h3>Проверка, а не наклейка</h3><p>В меню показаны реальная карта и доступные кодеки. В «Авто» при необходимости используется CPU.</p></div></article><article><span class="fact-number">02</span><div><h3>GPU ускоряет конвертацию</h3><p>Скачивание зависит от сети и YouTube. Аудио и VP9 обрабатываются процессором.</p></div></article><article><span class="fact-number">03</span><div><h3>Честно о проверках</h3><p>NVENC проверен на RTX 5080. AMD AMF реализован; успешное кодирование на физической AMD-карте пока не проверено.</p></div></article></div>
|
||||
</section>
|
||||
<section class="install-section" id="install" aria-labelledby="install-title"><div class="wrap">
|
||||
<div class="install-heading reveal"><div><p class="overline">04 / НАЧНЁМ</p><h2 id="install-title">Два скачивания.<br><em>Один комплект.</em></h2></div><p>Windows 10/11 x64<br>Edge или Chrome 120+<br><span>Без прав администратора</span></p></div>
|
||||
<div class="download-grid reveal">
|
||||
<article class="download-card"><div class="download-card-top"><span class="package-number">1</span><span class="package-tag">БРАУЗЕР</span><span class="version">v1.4.5</span></div><h3>Расширение</h3><p>Кнопки на YouTube, настройки и уведомления. Устанавливается распакованным.</p><a class="button primary package-link" data-download="extension" href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/releases/download/v1.4.5/YouTubeDL-1.4.5.zip">Скачать расширение <span aria-hidden="true">↓</span></a><small>ZIP · <span id="extension-size">Небольшой архив</span></small></article>
|
||||
<article class="download-card helper-card"><div class="download-card-top"><span class="package-number">2</span><span class="package-tag">КОМПЬЮТЕР</span><span class="version">v1.3.2</span></div><h3>Локальный помощник</h3><p>Скачивает, соединяет и конвертирует. Все необходимые компоненты уже внутри.</p><a class="button secondary package-link" data-download="helper" href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/releases/download/v1.4.5/YouTubeDL-Helper-Setup.exe">Скачать помощник <span aria-hidden="true">↓</span></a><small>EXE · 124,3 МиБ · устанавливается отдельно</small></article>
|
||||
</div>
|
||||
<p class="download-note">Оба файла размещены в <a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/releases/latest">релизах Gitea ↗</a>. Помощник не встроен в ZIP. <a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/src/branch/main/INSTALL.md#проверка-скачанных-файлов">Проверка SHA256 и подробности</a>.</p>
|
||||
<ol class="install-steps reveal">
|
||||
<li><span>01</span><div><h3>Распакуйте и загрузите расширение</h3><p>Оставьте распакованный ZIP в постоянной папке. Откройте страницу расширений, включите «Режим разработчика» → «Загрузить распакованное расширение» → выберите папку <code>extension</code>.</p><div class="browser-addresses"><button type="button" class="copy-address" data-copy="edge://extensions">edge://extensions <span>Копировать</span></button><button type="button" class="copy-address" data-copy="chrome://extensions">chrome://extensions <span>Копировать</span></button></div></div></li>
|
||||
<li><span>02</span><div><h3>Запустите помощник</h3><p>Откройте отдельно скачанный <code>YouTubeDL-Helper-Setup.exe</code>. Дождитесь установки. Python, yt-dlp, EJS, Node.js, FFmpeg и FFprobe уже в комплекте; для установки после скачивания интернет не нужен.</p></div></li>
|
||||
<li><span>03</span><div><h3>Обновите YouTube и пройдите мастер</h3><p>Откройте ⚙, нажмите «Проверить подключение», выберите папку, качество и формат. Зелёный индикатор подтверждает реальный ответ помощника. Затем загрузчик будет использовать эти настройки.</p></div></li>
|
||||
</ol>
|
||||
<p class="full-guide"><a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/src/branch/main/INSTALL.md">Полная инструкция, обновление и удаление <span aria-hidden="true">↗</span></a></p>
|
||||
</div></section>
|
||||
<section class="section wrap privacy-section" id="privacy" aria-labelledby="privacy-title">
|
||||
<div class="reveal"><p class="overline">05 / ПОНЯТНО О ДАННЫХ</p><h2 id="privacy-title">Ваш компьютер.<br><em>Ваша обработка.</em></h2><p class="section-lead">У проекта нет аналитики, рекламы и сервера для конвертации ваших роликов. Исходники доступны для просмотра.</p><a class="text-link" href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/src/branch/main/PRIVACY.md">Прочитать полный список данных и разрешений ↗</a></div>
|
||||
<dl class="privacy-facts reveal"><div><dt>Что остаётся локально</dt><dd>Настройки, папка и до 30 последних операций в браузере: названия, ссылки, статусы, пути и ошибки. Помощник отдельно хранит до 30 готовых загрузок. GPU и версии компонентов проверяются для работы приложения.</dd></div><div><dt>Вход — только по согласию</dt><dd>Доступ к cookies YouTube необязателен. Они передаются локальному помощнику и используются в запросах к YouTube; в файлы cookies и историю не записываются. Разрешение можно отозвать.</dd></div><div><dt>Куда идут запросы</dt><dd>К YouTube и его медиасерверам, к официальным источникам обновлений и GitHub для скачиваний и сайта. Эти сервисы видят обычные данные сетевого запроса, включая IP.</dd></div></dl>
|
||||
</section>
|
||||
<section class="faq-section"><div class="wrap faq-inner"><div><p class="overline">ОСТАЛИСЬ ДЕТАЛИ?</p><h2>Частые вопросы.</h2><p class="quiet">Если ответа здесь нет,<br><a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/issues">напишите в задачи проекта ↗</a></p></div><div class="faqs">
|
||||
<details><summary>Почему нужен отдельный помощник?<span aria-hidden="true">+</span></summary><p>Браузерное расширение не может запускать FFmpeg и напрямую работать с произвольной папкой Windows. Локальный Native Messaging помощник выполняет скачивание и обработку. Все зависимости собраны в один EXE; отдельно устанавливать Python или FFmpeg не нужно.</p></details>
|
||||
<details><summary>Как работают обновления?<span aria-hidden="true">+</span></summary><p>Обновление компонентов проверяет и скачивает совместимые обновления Python, Node.js, yt-dlp с библиотеками, EJS и FFmpeg/FFprobe. Автопроверка включена по умолчанию: раз в сутки, пока помощник работает, между операциями. Её можно выключить. Новые версии самого расширения и кода помощника устанавливаются вручную из Releases.</p></details>
|
||||
<details><summary>Нужно входить в YouTube?<span aria-hidden="true">+</span></summary><p>Для многих открытых роликов — нет. Если YouTube требует вход или проверку, откройте ролик в текущем профиле и при необходимости включите «Использовать вход в YouTube». Вход на сайте сам по себе не авторизует отдельный загрузчик. Авторизация не гарантирует обход ограничений.</p></details>
|
||||
<details><summary>Будет ли работать 4K, 8K и HDR?<span aria-hidden="true">+</span></summary><p>Если эти дорожки есть у источника. Разрешение не увеличивается искусственно. Для HDR используйте исходный кодек, HEVC или AV1; HDR → H.264 без тонального преобразования отклоняется. FLAC/WAV тоже не восстанавливают уже потерянное качество звука.</p></details>
|
||||
<details><summary>Как удалить всё?<span aria-hidden="true">+</span></summary><p>Удалите помощник кнопкой в меню или через приложения Windows, затем расширение из браузера. Скачанные файлы и история помощника сохраняются. Для удаления истории после удаления помощника удалите <code>%LOCALAPPDATA%\YouTubeDL\Helper\data</code>. Настройки расширения удаляются вместе с расширением.</p></details>
|
||||
<details><summary>Есть другие ОС или магазин расширений?<span aria-hidden="true">+</span></summary><p>Сейчас опубликована сборка для Windows 10/11 x64 и Edge/Chrome 120+. Firefox, macOS, Linux и Windows ARM не входят в неё. В магазинах браузеров расширение пока не опубликовано. Плейлисты, скачивание каналов и DRM-контент не заявляются.</p></details>
|
||||
<details><summary>Можно изменять расширение и публиковать свои версии?<span aria-hidden="true">+</span></summary><p><a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/src/branch/main/LICENSE">Лицензия</a> разрешает использование по назначению и запрещает изменения, самостоятельные форки и распространение собственного кода без письменного разрешения, с учётом исключений в её тексте. Сторонние компоненты сохраняют свои лицензии.</p></details>
|
||||
</div></div></section>
|
||||
<section class="closing"><div class="wrap"><img src="assets/mark.svg" alt="" width="48" height="48"><h2>Видео. Звук.<br><span>Ваш выбор.</span></h2><a class="button primary" href="#install">Скачать YouTubeDL <span aria-hidden="true">↓</span></a></div></section>
|
||||
</main>
|
||||
<footer class="site-footer"><div class="wrap footer-top"><a class="brand" href="#"><img src="assets/mark.svg" alt="" width="28" height="28"><span>YouTubeDL</span></a><div><a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL">Исходники ↗</a><a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/src/branch/main/PRIVACY.md">Данные</a><a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/src/branch/main/LICENSE">Лицензия</a><a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/src/branch/main/THIRD_PARTY.md">Компоненты</a><a href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/issues">Поддержка</a></div></div><div class="wrap footer-bottom"><p>© 2026 OwnerLink. YouTubeDL распространяется по ограниченной пользовательской лицензии.</p><p>Независимый проект. Не связан с YouTube/Google, NVIDIA или AMD. Сохраняйте контент, который вы вправе скачивать.</p><p>На сайте нет счётчиков и собственных cookies. Хостинг — собственный сервер проекта.</p></div></footer>
|
||||
<div id="copy-status" class="copy-status" role="status" aria-live="polite" hidden></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
Sitemap: https://git.lonarpgproxy.space/extention/youtubedl/sitemap.xml
|
||||
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://git.lonarpgproxy.space/extention/youtubedl/</loc></url></urlset>
|
||||
@@ -0,0 +1,35 @@
|
||||
@layer base, layout, components, responsive;
|
||||
@layer base {
|
||||
:root{color-scheme:light;--paper:#f6f6f2;--surface:#fff;--ink:#18232a;--muted:#5b686f;--line:#dce1de;--soft:#e9eeeb;--cyan:#39bdeb;--accent:#007b98;--radius:20px;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}
|
||||
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--paper:#10171d;--surface:#182129;--ink:#ecf2f4;--muted:#a5b4bd;--line:#2d3a43;--soft:#1a262d;--accent:#71d9ef}}
|
||||
:root[data-theme="dark"]{color-scheme:dark;--paper:#10171d;--surface:#182129;--ink:#ecf2f4;--muted:#a5b4bd;--line:#2d3a43;--soft:#1a262d;--accent:#71d9ef}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:94px}body{margin:0;background:var(--paper);color:var(--ink);line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{max-width:100%;display:block}svg{width:22px;height:22px;flex-shrink:0}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}button{color:inherit}h1,h2,h3,p,figure{margin:0}h1,h2{line-height:1.05;letter-spacing:-.055em;font-weight:650}h2{font-size:clamp(36px,4.1vw,58px)}h3{line-height:1.25;font-weight:650}em{font-style:normal;color:var(--accent)}[hidden]{display:none!important}code{font-family:Consolas,monospace;font-size:.88em;overflow-wrap:anywhere}::selection{background:#39bdeb;color:#0b202b}
|
||||
.skip{position:fixed;top:8px;left:16px;z-index:100;background:var(--cyan);color:#0a2633;padding:10px 18px;transform:translateY(-150%)}.skip:focus{transform:none}
|
||||
.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}.section{padding-block:110px}.overline{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--muted);margin-bottom:24px}.section-lead{font-size:18px;color:var(--muted);line-height:1.7;max-width:490px;margin-top:30px}.quiet{font-size:14px;color:var(--muted);line-height:1.75}.text-link{display:inline-block;font-size:14px;font-weight:600;border-bottom:1px solid var(--line);padding-block:5px;margin-top:28px;color:var(--accent)}a:hover{color:var(--accent)}.will-reveal{opacity:0;transform:translateY(18px);transition:opacity .65s,transform .65s}.will-reveal.shown{opacity:1;transform:none}
|
||||
}
|
||||
@layer layout {
|
||||
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.header-inner{display:flex;align-items:center;gap:30px;min-height:78px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:750;letter-spacing:-.035em;white-space:nowrap}.header-inner nav{display:flex;gap:30px;margin-left:auto;font-size:13px;font-weight:600}.header-inner nav a{padding-block:12px}.theme-button{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line);background:transparent;border-radius:50%}.theme-button:hover{background:var(--soft)}
|
||||
.hero{position:relative;overflow:hidden;background:#10161d;color:#eff7fa;min-height:640px}.hero-art{position:absolute;height:100%;width:100%;max-width:none;object-fit:cover;object-position:center right;opacity:.85}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#10161d 0%,#10161de6 25%,transparent 57%);pointer-events:none}.hero-inner{position:relative;z-index:1;min-height:640px;display:flex;flex-direction:column}.hero-copy{padding-top:76px;max-width:540px}.hero-overline{color:#aac1cd;margin-bottom:28px;display:flex;align-items:center;gap:9px}.live-dot{width:6px;height:6px;background:#79e3d1;border-radius:50%}.hero h1{font-size:clamp(46px,5.9vw,82px)}.hero h1 span{color:#8de7e1}.hero-description{font-size:18px;color:#bed0db;line-height:1.7;margin-top:27px}.hero-actions{display:flex;align-items:center;gap:23px;flex-wrap:wrap;margin-top:32px}.hero-link{font-size:12px;color:#d4e4ed}.hero-link:hover{color:#91eee2}.hero-note{font-size:11px;color:#8cabbc;margin-top:19px}.hero-bottom{margin-top:auto;padding:32px 0 22px;display:flex;justify-content:space-between;align-items:center;color:#7f9ba8;font-size:10px;letter-spacing:.15em}.hero-bottom a{letter-spacing:0;color:#bfced6;font-size:12px}
|
||||
.format-strip{border-bottom:1px solid var(--line)}.format-strip>.wrap{display:flex;align-items:center;gap:66px;min-height:115px}.format-strip p{font-size:12px;color:var(--muted);line-height:1.5;white-space:nowrap}.format-strip strong{color:var(--ink)}.format-list{display:flex;align-items:center;justify-content:space-between;gap:26px;width:100%;font-size:19px;letter-spacing:-.035em;font-weight:650;color:var(--muted)}.format-list i{width:1px;height:22px;background:var(--line);flex-shrink:0}
|
||||
.product-section{display:grid;grid-template-columns:1fr 1fr;gap:98px;align-items:start}.product-copy .section-lead{font-size:16px}.product-copy .quiet{max-width:390px}.product-visual{padding-top:8px;min-width:0}.visual-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:9px;letter-spacing:.12em;color:var(--muted);white-space:nowrap}.visual-toolbar>span{display:flex;align-items:center;gap:7px}.visual-toolbar i{width:5px;height:5px;border-radius:50%;background:var(--accent)}.screenshot-stage{background:#dae5e3;padding:22px;border-radius:26px;box-shadow:0 20px 45px #102b3810}.screenshot-stage img{width:100%;height:auto;border-radius:13px;border:1px solid #ffffff18;box-shadow:0 10px 25px #08101a30}.product-visual figcaption{font-size:11px;line-height:1.7;color:var(--muted);margin-top:18px;text-align:center}
|
||||
.processing-section{background:var(--soft);border-block:1px solid var(--line);padding-block:92px}.processing-inner{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:center}.processing-inner .quiet{max-width:420px;margin-top:20px}.gpu-section{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}.gpu-facts{padding-top:35px}.gpu-facts article{display:flex;gap:25px;padding:25px 0;border-top:1px solid var(--line)}.gpu-facts h3{font-size:18px;margin-bottom:10px}.gpu-facts p{font-size:14px;color:var(--muted);line-height:1.75}.fact-number{font-size:12px;color:var(--accent);padding-top:2px;font-family:Consolas,monospace}
|
||||
.install-section{background:var(--surface);padding-block:95px;border-block:1px solid var(--line)}.install-heading{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:45px}.install-heading>p{font-size:14px;color:var(--muted);line-height:1.9;text-align:right}.install-heading>p span{font-size:12px}.download-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.download-note{font-size:12px;color:var(--muted);line-height:1.8;max-width:880px;margin-top:20px}.download-note a{text-decoration:underline;text-underline-offset:3px}.install-steps{list-style:none;padding:0;margin:55px 0 0;counter-reset:steps}.install-steps li{display:grid;grid-template-columns:85px 1fr;gap:25px;padding:32px 0;border-top:1px solid var(--line)}.install-steps li>span{font-size:32px;line-height:1.2;letter-spacing:-.05em;color:var(--accent)}.install-steps h3{font-size:20px;margin-bottom:10px}.install-steps p{font-size:14px;color:var(--muted);max-width:800px}.browser-addresses{display:flex;gap:12px;margin-top:17px;flex-wrap:wrap}.full-guide{font-size:14px;padding-top:12px;color:var(--accent)}
|
||||
.privacy-section{display:grid;grid-template-columns:1fr 1fr;gap:100px}.privacy-facts{margin:20px 0 0}.privacy-facts>div{padding:22px 0;border-top:1px solid var(--line)}.privacy-facts dt{font-weight:650;font-size:17px;margin-bottom:10px}.privacy-facts dd{margin:0;font-size:14px;color:var(--muted);line-height:1.8}.faq-section{padding-block:75px;border-top:1px solid var(--line)}.faq-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}.faq-inner h2{font-size:38px}.faq-inner .quiet{margin-top:25px}.faq-inner .quiet a{color:var(--accent)}.closing{background:#10161d;color:#f1f8fa;text-align:center;padding:76px 0 83px;overflow:hidden}.closing img{margin:0 auto 25px}.closing h2{font-size:clamp(40px,5vw,62px);margin-bottom:32px}.closing h2 span{color:#8de7e1}.site-footer{padding-block:30px 35px}.footer-top{display:flex;justify-content:space-between;gap:30px;align-items:center;padding-bottom:25px;border-bottom:1px solid var(--line)}.footer-top .brand{font-size:17px}.footer-top>div{display:flex;flex-wrap:wrap;gap:24px;font-size:12px}.footer-bottom{padding-top:20px;font-size:11px;color:var(--muted);line-height:1.9}.footer-bottom p+p{margin-top:5px}
|
||||
}
|
||||
@layer components {
|
||||
.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:51px;padding:13px 24px;border-radius:9px;font-size:13px;font-weight:700;line-height:1.4;border:1px solid transparent;transition:background .18s,box-shadow .18s}.button.primary{background:var(--cyan);color:#082937}.button.primary:hover{background:#6bceee;box-shadow:0 4px 14px #39bdeb22}.button.secondary{background:var(--ink);color:var(--paper)}.button.secondary:hover{opacity:.9}.button span{font-size:22px;line-height:1}
|
||||
.control-example{display:flex;align-items:center;gap:8px;margin:25px 0 13px}.control-example>span{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--soft);border:1px solid var(--line);height:40px;padding-inline:18px;border-radius:22px;font-size:14px;font-weight:650}.control-example svg{width:19px;height:19px}.control-example>.gear-example{width:40px;padding:0;font-size:23px}
|
||||
.feature-list{list-style:none;margin:28px 0 0;padding:0}.feature-list li{padding:18px 0;border-top:1px solid var(--line)}.feature-list b{display:block;font-size:15px;font-weight:650}.feature-list span{display:block;font-size:13px;color:var(--muted);line-height:1.8;margin-top:6px}
|
||||
.screenshot-switch{display:flex;gap:3px;background:var(--soft);padding:3px;border-radius:8px;letter-spacing:0}.screenshot-switch button{font-size:10px;border:0;background:transparent;padding:5px 10px;border-radius:5px;color:var(--muted)}.screenshot-switch [aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #0001}
|
||||
.pipeline{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 38px}.tracks{display:flex;gap:14px}.tracks>span{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--soft);border:1px solid var(--line);border-radius:10px;min-height:70px;flex:1;font-size:15px}.tracks svg{color:var(--accent);width:25px;height:25px}.pipeline-line{height:45px;width:52%;margin:auto;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;position:relative}.pipeline-line:after{content:"";position:absolute;left:50%;top:100%;height:18px;border-left:1px solid var(--line)}.merged-file{display:flex;align-items:center;gap:13px;margin-top:18px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:19px}.merged-file b{display:block;font-size:15px}.merged-file small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.merged-file>span{margin-left:auto;color:var(--accent);font-size:21px}.stages{display:flex;gap:4px;padding-top:24px}.stages span{flex:1;font-size:10px;color:var(--muted);border-top:3px solid #61c6d2;padding-top:7px}.stages span:nth-child(2){border-color:#92ddd8}.stages span:nth-child(3){border-color:#bcded4}.pipeline>p{font-size:11px;line-height:1.8;color:var(--muted);margin-top:18px}
|
||||
.download-card{border:1px solid var(--line);border-radius:15px;padding:28px;background:var(--paper);min-width:0;display:flex;flex-direction:column}.download-card-top{display:flex;align-items:center;gap:12px;margin-bottom:25px}.package-number{width:30px;height:30px;display:grid;place-items:center;background:var(--soft);border-radius:50%;font-weight:650;font-size:13px}.package-tag{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--muted)}.version{margin-left:auto;font-family:Consolas,monospace;font-size:12px;color:var(--muted)}.download-card h3{font-size:28px;letter-spacing:-.04em;margin-bottom:13px}.download-card p{font-size:14px;color:var(--muted);line-height:1.75;max-width:380px;margin-bottom:25px}.download-card .button{margin-top:auto;width:100%;justify-content:space-between}.download-card small{font-size:11px;color:var(--muted);margin-top:12px;text-align:center}.helper-card{background:var(--surface)}
|
||||
.copy-address{background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:9px 12px;display:flex;align-items:center;gap:14px;font-family:Consolas,monospace;font-size:11px}.copy-address span{font-family:"Segoe UI",sans-serif;font-size:10px;color:var(--accent)}.copy-address:hover{background:var(--soft)}.copy-status{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:20;border:1px solid var(--line);background:var(--ink);color:var(--paper);box-shadow:0 5px 35px #0002;padding:12px 20px;border-radius:10px;font-size:13px;max-width:calc(100% - 32px);width:max-content}
|
||||
.faqs details{border-bottom:1px solid var(--line)}.faqs details:first-child{border-top:1px solid var(--line)}.faqs summary{display:flex;align-items:center;justify-content:space-between;gap:18px;list-style:none;cursor:pointer;font-size:15px;font-weight:650;line-height:1.5;padding:21px 0}.faqs summary::-webkit-details-marker{display:none}.faqs summary span{color:var(--accent);font-size:22px;font-weight:400;transition:transform .2s}.faqs details[open] summary span{transform:rotate(45deg)}.faqs details p{font-size:13px;color:var(--muted);line-height:1.85;padding:0 24px 23px 0}
|
||||
}
|
||||
@layer responsive {
|
||||
@media(min-width:1600px){.hero-art{object-position:center;object-fit:contain}}
|
||||
@media(max-width:1000px){.wrap{width:calc(100% - 56px)}.section{padding-block:80px}.product-section,.processing-inner,.gpu-section,.privacy-section,.faq-inner{gap:45px}.header-inner nav{gap:20px}.hero-art{object-position:57% center;opacity:.64}.hero:after{background:linear-gradient(90deg,#10161df5 0%,#10161daa 32%,transparent 85%)}.hero h1{font-size:64px}.format-strip>.wrap{gap:30px}.format-list{font-size:16px;gap:16px}.screenshot-stage{padding:14px}.visual-toolbar>span{font-size:8px;letter-spacing:.05em}.screenshot-switch button{padding:5px 7px}.pipeline{padding:25px}.install-heading h2{font-size:46px}}
|
||||
@media(max-width:700px){.wrap{width:calc(100% - 40px)}html{scroll-padding-top:115px}.section{padding-block:65px}.header-inner{gap:12px;min-height:98px;flex-wrap:wrap;padding:13px 0 9px}.header-inner>.brand{font-size:18px}.header-inner>.brand img{width:29px;height:29px}.header-inner nav{order:3;width:100%;gap:0;justify-content:space-between;font-size:11px}.header-inner nav a{padding-block:4px}.theme-button{margin-left:auto;width:31px;height:31px}.hero,.hero-inner{min-height:720px}.hero-copy{padding-top:42px;max-width:420px}.hero h1{font-size:clamp(47px,10.5vw,66px)}.hero-overline{font-size:9px;margin-bottom:22px}.hero-description{font-size:16px;margin-top:23px}.hero-actions{margin-top:25px;gap:16px}.hero-actions .button{font-size:12px;padding-inline:18px}.hero-link{font-size:11px}.hero-note{font-size:10px;max-width:290px;line-height:1.8}.hero-art{height:59%;width:118%;bottom:10px;right:-9%;object-position:center;opacity:.7}.hero:after{background:linear-gradient(180deg,#10161d 0%,#10161de6 35%,#10161d77 58%,transparent 80%)}.hero-bottom{font-size:8px;padding-bottom:17px}.hero-bottom a{font-size:10px}.format-strip>.wrap{padding-block:20px;min-height:0;gap:20px}.format-strip p{font-size:10px}.format-list{font-size:14px;justify-content:flex-start;gap:12px;flex-wrap:wrap}.format-list i{display:none}.product-section,.processing-inner,.gpu-section,.privacy-section,.faq-inner{grid-template-columns:1fr;gap:36px}.product-copy h2 br:nth-of-type(2){display:none}h2{font-size:41px}.section-lead{font-size:16px;margin-top:22px}.product-copy .quiet{max-width:none}.feature-list li{padding:16px 0}.visual-toolbar{font-size:9px}.visual-toolbar>span{font-size:9px}.screenshot-switch button{font-size:10px;padding:5px 9px}.product-visual{max-width:480px;justify-self:center;width:100%}.screenshot-stage{padding:16px}.processing-section{padding-block:60px}.pipeline{padding:27px}.gpu-facts{padding-top:0}.gpu-facts article{padding-block:20px}.install-section{padding-block:60px}.install-heading{align-items:start;flex-direction:column;gap:22px;margin-bottom:30px}.install-heading h2{font-size:41px}.install-heading>p{text-align:left;font-size:12px;line-height:1.7}.download-grid{grid-template-columns:1fr;gap:15px}.download-card{padding:23px}.download-card-top{margin-bottom:20px}.download-card h3{font-size:26px}.install-steps{margin-top:35px}.install-steps li{grid-template-columns:35px 1fr;gap:18px;padding:25px 0}.install-steps li>span{font-size:24px}.install-steps h3{font-size:18px}.install-steps p{font-size:13px}.browser-addresses{gap:8px}.copy-address{font-size:10px;gap:10px;padding:9px}.privacy-facts{margin-top:0}.privacy-facts dt{font-size:16px}.faq-section{padding-block:55px}.faq-inner h2{font-size:35px}.faq-inner .quiet br{display:none}.faqs summary{font-size:14px}.closing{padding-block:56px}.footer-top{align-items:start;flex-direction:column;gap:20px}.footer-top>div{gap:20px;font-size:11px}.footer-bottom{font-size:10px}}
|
||||
@media(max-width:360px){h2,.install-heading h2{font-size:35px}.hero h1{font-size:44px}.visual-toolbar{flex-wrap:wrap}.product-section,.processing-inner,.gpu-section,.privacy-section,.faq-inner{grid-template-columns:minmax(0,1fr)}}
|
||||
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.will-reveal{opacity:1;transform:none}}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
// Apply the preference before CSS loads; unavailable storage never blocks the page.
|
||||
(() => {
|
||||
try { const theme = localStorage.getItem("ytdl-site-theme"); if (["light", "dark"].includes(theme)) document.documentElement.dataset.theme = theme; }
|
||||
catch { /* System theme remains the default. */ }
|
||||
})();
|
||||
Reference in new issue
Block a user