Sakurai/poke
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update html/download.ejs

Browse Source
This commit is contained in:
ashley 2025-08-20 02:20:29 +02:00
parent dfd1203125
commit ea390a8d49
1 changed files with 82 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
html/download.ejs
View File

@ -108,6 +108,21 @@
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a{color:inherit}
.chip a.btn{color:var(--text)}
.mux-card{
margin-top:16px;background:var(--bg-elev);border:1px solid rgba(255,255,255,.08);
border-radius:12px;box-shadow:var(--shadow);padding:16px
}
.mux-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:12px}
.mux-item{background:var(--bg-chip);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px;display:block;
overflow:auto;line-height:1.45;font-size:13px}
.copy{
display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.06);cursor:pointer
}
.copy:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
</style>
</head>
<body>
@ -244,6 +259,55 @@
</section>
<div class="alert" role="status" aria-live="polite">Tip: if a download fails, try another container (MP4 vs WEBM) or a different quality.</div>
<!-- Combine (mux) section -->
<section class="mux-card" aria-labelledby="combine">
<h2 id="combine" style="margin:0 0 6px">Combine video-only + audio-only (mux)</h2>
<p class="helper">Pick one of these quick methods. They don’t re-encode, so quality stays the same.</p>
<div class="mux-rows">
<div class="mux-item">
<strong>FFmpeg — MP4 output</strong>
<pre class="kbd" data-code="ffmpeg -i video.mp4 -i audio.m4a -c copy -map 0:v:0 -map 1:a:0 output.mp4">ffmpeg -i video.mp4 -i audio.m4a -c copy -map 0:v:0 -map 1:a:0 output.mp4</pre>
<button class="copy" data-target="prev"><i class="fa-light fa-copy"></i> Copy</button>
<p class="helper" style="margin-top:8px">Use when your video is MP4 (H.264) and audio is M4A/AAC.</p>
</div>
<div class="mux-item">
<strong>FFmpeg — WEBM output</strong>
<pre class="kbd" data-code="ffmpeg -i video.webm -i audio.webm -c copy -map 0:v:0 -map 1:a:0 output.webm">ffmpeg -i video.webm -i audio.webm -c copy -map 0:v:0 -map 1:a:0 output.webm</pre>
<button class="copy" data-target="prev"><i class="fa-light fa-copy"></i> Copy</button>
<p class="helper" style="margin-top:8px">Use when both tracks are WEBM (VP9/AV1 + Opus).</p>
</div>
<div class="mux-item">
<strong>FFmpeg — mixed containers</strong>
<pre class="kbd" data-code="ffmpeg -i video.webm -i audio.m4a -c copy -map 0:v:0 -map 1:a:0 output.mkv">ffmpeg -i video.webm -i audio.m4a -c copy -map 0:v:0 -map 1:a:0 output.mkv</pre>
<button class="copy" data-target="prev"><i class="fa-light fa-copy"></i> Copy</button>
<p class="helper" style="margin-top:8px">If containers differ, mux to <code>mkv</code> for best compatibility.</p>
</div>
<div class="mux-item">
<strong>Windows (drag-and-drop)</strong>
<pre class="kbd">1) Install FFmpeg (add to PATH)
2) Put video and audio next to each other
3) Open Terminal in that folder and run one of the commands above</pre>
</div>
<div class="mux-item">
<strong>GNU/Linux / macOS</strong>
<pre class="kbd"># Example
ffmpeg -i video.mp4 -i audio.m4a -c copy -map 0:v:0 -map 1:a:0 output.mp4</pre>
</div>
<div class="mux-item">
<strong>Android (Termux)</strong>
<pre class="kbd">pkg install ffmpeg
cd /sdcard/Download
ffmpeg -i video.webm -i audio.webm -c copy -map 0:v:0 -map 1:a:0 output.webm</pre>
</div>
</div>
</section>
</div>
</section>
</main>
@ -261,6 +325,24 @@
chip.addEventListener('focus', () => chip.style.outline = `2px solid <%= color %>`);
chip.addEventListener('blur', () => chip.style.outline = 'none');
});
const toClipboard = async (text, el) => {
try {
await navigator.clipboard.writeText(text);
el.dataset.copied = "1";
const old = el.innerHTML;
el.innerHTML = '<i class="fa-light fa-check"></i> Copied';
setTimeout(() => { el.innerHTML = old; el.dataset.copied=""; }, 1200);
} catch (_) {}
};
document.querySelectorAll('.copy').forEach(btn => {
btn.addEventListener('click', () => {
const target = btn.dataset.target === 'prev' ? btn.previousElementSibling : document.querySelector(btn.dataset.target);
const code = target?.dataset.code || target?.innerText || '';
if (code.trim()) toClipboard(code.trim(), btn);
});
});
});
</script>
</body>