initial commit
This commit is contained in:
Samive
parent
2d7b278666
commit
c9ce996249
95 changed files with 1284 additions and 22591 deletions
309
web/frontend/app.js
Normal file
309
web/frontend/app.js
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
const API = 'http://localhost:8000';
|
||||
|
||||
const urlInput = document.getElementById('url-input');
|
||||
const clearBtn = document.getElementById('clear-btn');
|
||||
const fetchBtn = document.getElementById('fetch-btn');
|
||||
const errorMsg = document.getElementById('error-msg');
|
||||
const preview = document.getElementById('preview');
|
||||
const thumbnail = document.getElementById('thumbnail');
|
||||
const videoTitle = document.getElementById('video-title');
|
||||
const uploaderEl = document.getElementById('uploader');
|
||||
const durationEl = document.getElementById('duration');
|
||||
const formatSection = document.getElementById('format-section');
|
||||
const formatSelect = document.getElementById('format-select');
|
||||
const downloadBtn = document.getElementById('download-btn');
|
||||
const progressWrap = document.getElementById('progress-wrap');
|
||||
const progressFill = document.getElementById('progress-fill');
|
||||
const progressLabel = document.getElementById('progress-label');
|
||||
const cancelBtn = document.getElementById('cancel-btn');
|
||||
|
||||
let currentFileId = null;
|
||||
let currentAbort = null;
|
||||
let currentSse = null;
|
||||
|
||||
// --- Cancel ---
|
||||
cancelBtn.addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// Abort the pending fetch
|
||||
if (currentAbort) { currentAbort.abort(); currentAbort = null; }
|
||||
// Close SSE
|
||||
if (currentSse) { currentSse.close(); currentSse = null; }
|
||||
// Tell backend to kill the task and clean up
|
||||
if (currentFileId) {
|
||||
fetch(`${API}/cancel/${currentFileId}`, { method: 'POST' }).catch(() => {});
|
||||
currentFileId = null;
|
||||
}
|
||||
|
||||
progressWrap.style.display = 'none';
|
||||
setProgress(0, '');
|
||||
setLoading(downloadBtn, false);
|
||||
});
|
||||
|
||||
// --- Reset UI ---
|
||||
function resetUI() {
|
||||
urlInput.value = '';
|
||||
clearBtn.style.display = 'none';
|
||||
errorMsg.style.display = 'none';
|
||||
preview.style.display = 'none';
|
||||
formatSection.style.display = 'none';
|
||||
downloadBtn.style.display = 'none';
|
||||
progressWrap.style.display = 'none';
|
||||
thumbnail.src = '';
|
||||
}
|
||||
window.addEventListener('pageshow', resetUI);
|
||||
|
||||
// --- Helpers ---
|
||||
function showError(msg) {
|
||||
errorMsg.textContent = msg;
|
||||
errorMsg.style.display = 'block';
|
||||
}
|
||||
function hideError() { errorMsg.style.display = 'none'; }
|
||||
|
||||
function setLoading(btn, loading, text) {
|
||||
btn.disabled = loading;
|
||||
btn.style.opacity = loading ? '0.6' : '1';
|
||||
btn.style.cursor = loading ? 'wait' : '';
|
||||
if (text) btn.dataset.label = btn.dataset.label || btn.textContent.trim();
|
||||
if (loading && text) {
|
||||
btn.textContent = text;
|
||||
} else if (!loading && btn.dataset.label) {
|
||||
if (btn.id === 'download-btn') {
|
||||
btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Download`;
|
||||
} else {
|
||||
btn.textContent = btn.dataset.label;
|
||||
}
|
||||
delete btn.dataset.label;
|
||||
}
|
||||
}
|
||||
|
||||
function formatDuration(secs) {
|
||||
if (!secs) return null;
|
||||
const h = Math.floor(secs / 3600);
|
||||
const m = Math.floor((secs % 3600) / 60);
|
||||
const s = secs % 60;
|
||||
return h > 0
|
||||
? `${h}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`
|
||||
: `${m}:${String(s).padStart(2,'0')}`;
|
||||
}
|
||||
|
||||
function formatCount(n) {
|
||||
if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
|
||||
if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
|
||||
if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
|
||||
return n.toString();
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (!bytes) return null;
|
||||
if (bytes >= 1e9) return (bytes / 1e9).toFixed(1) + ' GB';
|
||||
if (bytes >= 1e6) return (bytes / 1e6).toFixed(1) + ' MB';
|
||||
return (bytes / 1e3).toFixed(0) + ' KB';
|
||||
}
|
||||
|
||||
function formatLabel(f) {
|
||||
const parts = [];
|
||||
const res = f.resolution || '';
|
||||
if (res && res !== 'unknown') parts.push(res);
|
||||
if (f.ext) parts.push(f.ext.toUpperCase());
|
||||
const hasVideo = f.vcodec && f.vcodec !== 'none';
|
||||
const hasAudio = f.acodec && f.acodec !== 'none';
|
||||
if (!hasVideo && hasAudio) parts.push('audio only');
|
||||
if (f.fps && hasVideo) parts.push(`${f.fps}fps`);
|
||||
const size = formatBytes(f.filesize);
|
||||
if (size) parts.push(`~${size}`);
|
||||
return parts.join(' · ') || f.format_id;
|
||||
}
|
||||
|
||||
function setProgress(pct, label) {
|
||||
progressFill.style.width = pct + '%';
|
||||
progressLabel.innerHTML = label;
|
||||
}
|
||||
|
||||
function formatEta(secs) {
|
||||
if (secs == null || secs < 0) return '';
|
||||
if (secs < 60) return `ETA ${secs}s`;
|
||||
const m = Math.floor(secs / 60);
|
||||
const s = secs % 60;
|
||||
return `ETA ${m}m ${s}s`;
|
||||
}
|
||||
|
||||
// --- URL input ---
|
||||
urlInput.addEventListener('input', () => {
|
||||
clearBtn.style.display = urlInput.value ? 'flex' : 'none';
|
||||
});
|
||||
clearBtn.addEventListener('click', () => { resetUI(); urlInput.focus(); });
|
||||
urlInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') fetchBtn.click(); });
|
||||
|
||||
// --- Fetch info ---
|
||||
fetchBtn.addEventListener('click', async () => {
|
||||
const url = urlInput.value.trim();
|
||||
if (!url) { showError('Please paste a video URL first.'); return; }
|
||||
|
||||
hideError();
|
||||
preview.style.display = 'none';
|
||||
formatSection.style.display = 'none';
|
||||
downloadBtn.style.display = 'none';
|
||||
progressWrap.style.display = 'none';
|
||||
setLoading(fetchBtn, true, 'Fetching…');
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API}/info`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.detail || 'Failed to fetch video info.');
|
||||
renderPreview(data);
|
||||
renderFormats(data.formats || []);
|
||||
preview.style.display = 'flex';
|
||||
formatSection.style.display = 'flex';
|
||||
downloadBtn.style.display = 'flex';
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
} finally {
|
||||
setLoading(fetchBtn, false);
|
||||
}
|
||||
});
|
||||
|
||||
function renderPreview(info) {
|
||||
thumbnail.src = info.thumbnail || '';
|
||||
thumbnail.alt = info.title || 'Video thumbnail';
|
||||
thumbnail.style.display = info.thumbnail ? 'block' : 'none';
|
||||
videoTitle.textContent = info.title || 'Unknown title';
|
||||
uploaderEl.textContent = info.uploader || '';
|
||||
uploaderEl.style.display = info.uploader ? '' : 'none';
|
||||
const dur = formatDuration(info.duration);
|
||||
durationEl.textContent = dur || '';
|
||||
durationEl.style.display = dur ? '' : 'none';
|
||||
|
||||
const viewsEl = document.getElementById('views');
|
||||
const likesEl = document.getElementById('likes');
|
||||
const dateEl = document.getElementById('upload-date');
|
||||
viewsEl.textContent = info.view_count ? '👁 ' + formatCount(info.view_count) : '';
|
||||
viewsEl.style.display = info.view_count ? '' : 'none';
|
||||
likesEl.textContent = info.like_count ? '👍 ' + formatCount(info.like_count) : '';
|
||||
likesEl.style.display = info.like_count ? '' : 'none';
|
||||
if (info.upload_date && info.upload_date.length === 8) {
|
||||
const d = info.upload_date;
|
||||
const formatted = new Date(`${d.slice(0,4)}-${d.slice(4,6)}-${d.slice(6,8)}`).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
dateEl.textContent = '📅 ' + formatted;
|
||||
dateEl.style.display = '';
|
||||
} else {
|
||||
dateEl.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function renderFormats(formats) {
|
||||
formatSelect.innerHTML = '';
|
||||
const sorted = [...formats].sort((a, b) =>
|
||||
(b.height || 0) - (a.height || 0) || (b.tbr || 0) - (a.tbr || 0)
|
||||
);
|
||||
const combined = sorted.filter(f => f.vcodec !== 'none' && f.acodec !== 'none');
|
||||
const videoOnly = sorted.filter(f => f.vcodec !== 'none' && f.acodec === 'none');
|
||||
const audioOnly = sorted.filter(f => f.vcodec === 'none' && f.acodec !== 'none');
|
||||
|
||||
const addGroup = (label, items) => {
|
||||
if (!items.length) return;
|
||||
const group = document.createElement('optgroup');
|
||||
group.label = label;
|
||||
items.forEach(f => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = f.format_id;
|
||||
opt.textContent = formatLabel(f);
|
||||
group.appendChild(opt);
|
||||
});
|
||||
formatSelect.appendChild(group);
|
||||
};
|
||||
|
||||
if ((videoOnly[0]?.height || 0) >= (combined[0]?.height || 0)) {
|
||||
addGroup('Video only', videoOnly);
|
||||
addGroup('Video + Audio', combined);
|
||||
} else {
|
||||
addGroup('Video + Audio', combined);
|
||||
addGroup('Video only', videoOnly);
|
||||
}
|
||||
addGroup('Audio only', audioOnly);
|
||||
if (sorted.length) formatSelect.value = sorted[0].format_id;
|
||||
}
|
||||
|
||||
// --- Download ---
|
||||
downloadBtn.addEventListener('click', async () => {
|
||||
const url = urlInput.value.trim();
|
||||
if (!url) return;
|
||||
|
||||
hideError();
|
||||
setLoading(downloadBtn, true, 'Downloading…');
|
||||
progressWrap.style.display = 'block';
|
||||
setProgress(0, '<span class="meta">Starting…</span>');
|
||||
|
||||
const fileId = crypto.randomUUID();
|
||||
currentFileId = fileId;
|
||||
|
||||
// SSE for live progress
|
||||
const sse = new EventSource(`${API}/progress/${fileId}`);
|
||||
currentSse = sse;
|
||||
sse.onmessage = (e) => {
|
||||
const d = JSON.parse(e.data);
|
||||
if (d.status === 'downloading') {
|
||||
const pct = d.percent || 0;
|
||||
const eta = d.eta != null ? formatEta(d.eta) : '';
|
||||
const speed = d.speed != null ? `${d.speed} MB/s` : '';
|
||||
const meta = [speed, eta].filter(Boolean).join(' · ');
|
||||
setProgress(pct, `<span class="pct">${pct}%</span>${meta ? ` <span class="meta">${meta}</span>` : ''}`);
|
||||
} else if (d.status === 'finished') {
|
||||
setProgress(100, '<span class="pct">100%</span> <span class="meta">Processing…</span>');
|
||||
} else if (d.status === 'cancelled') {
|
||||
sse.close();
|
||||
} else if (d.status === 'error') {
|
||||
sse.close();
|
||||
showError(d.error || 'Download failed.');
|
||||
progressWrap.style.display = 'none';
|
||||
setLoading(downloadBtn, false);
|
||||
}
|
||||
};
|
||||
sse.onerror = () => sse.close();
|
||||
|
||||
// AbortController so cancel can kill the fetch
|
||||
const abort = new AbortController();
|
||||
currentAbort = abort;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API}/download`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url, format_id: formatSelect.value, file_id: fileId }),
|
||||
signal: abort.signal,
|
||||
});
|
||||
|
||||
sse.close();
|
||||
currentSse = null;
|
||||
currentAbort = null;
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({ detail: 'Download failed.' }));
|
||||
throw new Error(data.detail || 'Download failed.');
|
||||
}
|
||||
|
||||
// Only trigger file download if not cancelled
|
||||
if (currentFileId === fileId) {
|
||||
setProgress(100, '<span class="pct">✓</span> <span class="meta">Done — saving to your downloads</span>');
|
||||
// Open in new tab so current page never navigates away
|
||||
window.open(`${API}/file/${fileId}`, '_blank');
|
||||
setTimeout(() => { progressWrap.style.display = 'none'; }, 2500);
|
||||
}
|
||||
} catch (err) {
|
||||
sse.close();
|
||||
currentSse = null;
|
||||
currentAbort = null;
|
||||
if (err.name !== 'AbortError') {
|
||||
showError(err.message);
|
||||
progressWrap.style.display = 'none';
|
||||
}
|
||||
} finally {
|
||||
if (currentFileId === fileId) currentFileId = null;
|
||||
setLoading(downloadBtn, false);
|
||||
}
|
||||
});
|
||||
135
web/frontend/index.html
Normal file
135
web/frontend/index.html
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>yt-dlp Web</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><rect width='36' height='36' rx='10' fill='%236366f1'/><path d='M11 12l14 6-14 6V12z' fill='white'/></svg>" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-orbs">
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
<div class="orb orb-3"></div>
|
||||
</div>
|
||||
|
||||
<main class="container">
|
||||
<header>
|
||||
<div class="logo">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true">
|
||||
<rect width="36" height="36" rx="10" fill="url(#grad)"/>
|
||||
<path d="M11 12l14 6-14 6V12z" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0" y1="0" x2="36" y2="36" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6366f1"/>
|
||||
<stop offset="1" stop-color="#8b5cf6"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<span>yt-dlp web</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Download any video,<br /><span class="gradient-text">instantly.</span></h1>
|
||||
<p class="subtitle">Paste a YouTube (or any supported) link below and grab your video.</p>
|
||||
</section>
|
||||
|
||||
<div class="card" id="main-card">
|
||||
<div class="input-row">
|
||||
<div class="input-wrap">
|
||||
<svg class="input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<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>
|
||||
<input
|
||||
type="url"
|
||||
id="url-input"
|
||||
placeholder="https://www.youtube.com/watch?v=..."
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
aria-label="Video URL"
|
||||
/>
|
||||
<button class="clear-btn" id="clear-btn" aria-label="Clear input">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn-primary" id="fetch-btn" aria-label="Fetch video info">
|
||||
Fetch
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="error-msg" class="error-msg" role="alert" hidden></div>
|
||||
|
||||
<!-- Video preview -->
|
||||
<div id="preview" class="preview" hidden>
|
||||
<img id="thumbnail" class="thumbnail" alt="Video thumbnail" />
|
||||
<div class="meta">
|
||||
<h2 id="video-title" class="video-title"></h2>
|
||||
<div class="meta-row">
|
||||
<span id="uploader" class="tag"></span>
|
||||
<span id="duration" class="tag"></span>
|
||||
<span id="upload-date" class="tag"></span>
|
||||
<span id="views" class="tag"></span>
|
||||
<span id="likes" class="tag"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Format selector -->
|
||||
<div id="format-section" class="format-section" hidden>
|
||||
<label for="format-select" class="format-label">Format</label>
|
||||
<div class="select-wrap">
|
||||
<select id="format-select" aria-label="Select download format"></select>
|
||||
<svg class="select-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download button -->
|
||||
<button class="btn-download" id="download-btn" hidden aria-label="Download video">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
|
||||
<polyline points="7 10 12 15 17 10"/>
|
||||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
Download
|
||||
</button>
|
||||
|
||||
<!-- Progress -->
|
||||
<div id="progress-wrap" class="progress-wrap" hidden>
|
||||
<div class="progress-header">
|
||||
<span id="progress-label" class="progress-label"></span>
|
||||
</div>
|
||||
<div class="progress-row">
|
||||
<div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
|
||||
<button id="cancel-btn" type="button" class="progress-btn cancel" aria-label="Cancel download">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Powered by <a href="https://github.com/yt-dlp/yt-dlp" target="_blank" rel="noopener">yt-dlp</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Runs before app.js — resets any browser-restored state immediately
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const input = document.getElementById('url-input');
|
||||
if (input) input.value = '';
|
||||
});
|
||||
</script>
|
||||
<script src="/static/app.js?v=4"></script>
|
||||
</body>
|
||||
</html>
|
||||
380
web/frontend/style.css
Normal file
380
web/frontend/style.css
Normal file
|
|
@ -0,0 +1,380 @@
|
|||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0f;
|
||||
--surface: rgba(255,255,255,0.04);
|
||||
--surface-hover: rgba(255,255,255,0.07);
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--border-focus: rgba(99,102,241,0.6);
|
||||
--text: #f1f1f5;
|
||||
--text-muted: #8b8b9e;
|
||||
--primary: #6366f1;
|
||||
--primary-hover: #4f52e0;
|
||||
--success: #22c55e;
|
||||
--error: #f87171;
|
||||
--radius: 14px;
|
||||
--radius-sm: 8px;
|
||||
}
|
||||
|
||||
html { font-size: 16px; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Ambient background orbs */
|
||||
.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
|
||||
.orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.18;
|
||||
}
|
||||
.orb-1 { width: 500px; height: 500px; background: #6366f1; top: -150px; left: -100px; }
|
||||
.orb-2 { width: 400px; height: 400px; background: #8b5cf6; bottom: -100px; right: -80px; }
|
||||
.orb-3 { width: 300px; height: 300px; background: #06b6d4; top: 40%; left: 50%; transform: translateX(-50%); }
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
padding: 24px 16px 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header { display: flex; justify-content: center; }
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero { text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: clamp(2rem, 6vw, 2.8rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #6366f1, #a78bfa, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.subtitle {
|
||||
margin-top: 12px;
|
||||
color: var(--text-muted);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
/* Input row */
|
||||
.input-row { display: flex; gap: 10px; }
|
||||
.input-wrap {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#url-input {
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
padding: 12px 40px 12px 42px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
#url-input::placeholder { color: var(--text-muted); }
|
||||
#url-input:focus {
|
||||
border-color: var(--border-focus);
|
||||
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
|
||||
}
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.clear-btn:hover { color: var(--text); }
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
padding: 12px 22px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s, transform 0.1s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-primary:hover { background: var(--primary-hover); }
|
||||
.btn-primary:active { transform: scale(0.97); }
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
||||
|
||||
.btn-download {
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
padding: 14px 24px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;
|
||||
box-shadow: 0 4px 20px rgba(99,102,241,0.3);
|
||||
}
|
||||
.btn-download:hover { opacity: 0.9; box-shadow: 0 6px 28px rgba(99,102,241,0.45); }
|
||||
.btn-download:active { transform: scale(0.98); }
|
||||
.btn-download:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
||||
|
||||
/* Spinner */
|
||||
.btn-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* Error */
|
||||
.error-msg {
|
||||
background: rgba(248,113,113,0.1);
|
||||
border: 1px solid rgba(248,113,113,0.25);
|
||||
color: var(--error);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 12px 14px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Preview */
|
||||
.preview {
|
||||
display: none;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
.preview.visible { display: flex; }.thumbnail {
|
||||
width: 140px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-sm);
|
||||
flex-shrink: 0;
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
.meta { flex: 1; min-width: 0; }
|
||||
.video-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.meta-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
|
||||
.tag {
|
||||
background: rgba(255,255,255,0.07);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 3px 10px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Format selector */
|
||||
.format-section { display: flex; flex-direction: column; gap: 10px; }
|
||||
.format-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
.select-wrap { position: relative; }
|
||||
.select-wrap select {
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
padding: 11px 40px 11px 14px;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.select-wrap select:focus {
|
||||
border-color: var(--border-focus);
|
||||
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
|
||||
}
|
||||
.select-wrap select option { background: #1a1a2e; color: var(--text); }
|
||||
.select-arrow {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
.progress-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
animation: fadeIn 0.3s ease;
|
||||
background: rgba(99,102,241,0.06);
|
||||
border: 1px solid rgba(99,102,241,0.15);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.progress-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.progress-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-actions { display: flex; gap: 8px; flex-shrink: 0; }
|
||||
.progress-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-family: inherit;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s, transform 0.1s;
|
||||
}
|
||||
.progress-btn:hover { opacity: 0.8; }
|
||||
.progress-btn:active { transform: scale(0.96); }
|
||||
.progress-btn.cancel {
|
||||
background: rgba(248,113,113,0.12);
|
||||
border: 1px solid rgba(248,113,113,0.25);
|
||||
color: var(--error);
|
||||
}
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #6366f1, #a78bfa, #38bdf8);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 99px;
|
||||
width: 0%;
|
||||
transition: width 0.5s ease;
|
||||
animation: shimmer 2s linear infinite;
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% center; }
|
||||
100% { background-position: -200% center; }
|
||||
}
|
||||
.progress-label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.01em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.progress-label .pct {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.progress-label .meta {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer { text-align: center; font-size: 0.8rem; color: var(--text-muted); }
|
||||
footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
|
||||
footer a:hover { color: var(--text); }
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.input-row { flex-direction: column; }
|
||||
.btn-primary { width: 100%; justify-content: center; }
|
||||
.preview { flex-direction: column; }
|
||||
.thumbnail { width: 100%; height: 180px; }
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue