Add project files
This commit is contained in:
alejo committed
commit
b0d54efbea
7 files changed
+819
No files matched your search
@@ -0,0 +1,588 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>VDROP — Video Downloader</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--surface: #111111;
|
||||
--border: #222222;
|
||||
--accent: #e8ff47;
|
||||
--accent2: #ff6b35;
|
||||
--text: #f0f0f0;
|
||||
--muted: #666666;
|
||||
--radius: 4px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Syne', sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 60px 20px 80px;
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,255,71,0.07) 0%, transparent 70%),
|
||||
repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px),
|
||||
repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px);
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 56px;
|
||||
animation: fadeDown 0.6s ease both;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: clamp(3rem, 8vw, 5.5rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-family: 'Space Mono', monospace;
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 36px;
|
||||
animation: fadeUp 0.5s ease 0.1s both;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.url-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
padding: 12px 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
input[type="text"]::placeholder { color: var(--muted); }
|
||||
|
||||
.btn {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
|
||||
|
||||
.btn-accent {
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-accent:hover { background: #d4eb3a; transform: translateY(-1px); }
|
||||
.btn-accent:active { transform: translateY(0); }
|
||||
|
||||
.btn-accent:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Video info preview */
|
||||
#info-box {
|
||||
display: none;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 24px;
|
||||
gap: 14px;
|
||||
animation: fadeUp 0.3s ease both;
|
||||
}
|
||||
|
||||
#info-box.visible { display: flex; }
|
||||
|
||||
.thumb-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.thumb-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.info-meta { flex: 1; min-width: 0; }
|
||||
|
||||
.info-title {
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.info-sub {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Format toggle */
|
||||
.format-toggle {
|
||||
display: flex;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.fmt-btn {
|
||||
flex: 1;
|
||||
padding: 11px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.82rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.fmt-btn.active {
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.fmt-btn:not(.active):hover { color: var(--text); }
|
||||
|
||||
/* Quality selector */
|
||||
#quality-row { margin-bottom: 28px; }
|
||||
|
||||
.quality-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.72rem;
|
||||
padding: 6px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
transition: all 0.15s;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.chip.selected {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: rgba(232, 255, 71, 0.07);
|
||||
}
|
||||
|
||||
.chip:hover:not(.selected) { border-color: #444; color: var(--text); }
|
||||
|
||||
/* Progress */
|
||||
#progress-box {
|
||||
display: none;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
#progress-box.visible { display: block; }
|
||||
|
||||
.progress-bar-bg {
|
||||
height: 6px;
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin: 10px 0 8px;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--accent), var(--accent2));
|
||||
border-radius: 3px;
|
||||
width: 0%;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
.progress-meta {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.68rem;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Status messages */
|
||||
#status-msg {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.72rem;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#status-msg.error {
|
||||
background: rgba(255, 80, 80, 0.1);
|
||||
border: 1px solid rgba(255, 80, 80, 0.3);
|
||||
color: #ff8080;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#status-msg.success {
|
||||
background: rgba(232, 255, 71, 0.08);
|
||||
border: 1px solid rgba(232, 255, 71, 0.3);
|
||||
color: var(--accent);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#download-btn-wrap { display: none; }
|
||||
|
||||
/* Spinner */
|
||||
.spin {
|
||||
display: inline-block;
|
||||
width: 12px; height: 12px;
|
||||
border: 2px solid rgba(0,0,0,0.3);
|
||||
border-top-color: #000;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
@keyframes fadeDown {
|
||||
from { opacity: 0; transform: translateY(-20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 48px;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
color: #333;
|
||||
letter-spacing: 0.1em;
|
||||
text-align: center;
|
||||
animation: fadeUp 0.5s ease 0.3s both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="logo">VDROP</div>
|
||||
<div class="tagline">yt-dlp powered · audio & video</div>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
|
||||
<!-- URL Input -->
|
||||
<div class="section-label">Paste URL</div>
|
||||
<div class="url-row">
|
||||
<input type="text" id="url-input" placeholder="https://youtube.com/watch?v=..." />
|
||||
<button class="btn btn-ghost" onclick="fetchInfo()">Inspect</button>
|
||||
</div>
|
||||
|
||||
<!-- Video Info Preview -->
|
||||
<div id="info-box">
|
||||
<div class="thumb-wrap"><img id="thumb" src="" alt="thumb" /></div>
|
||||
<div class="info-meta">
|
||||
<div class="info-title" id="vid-title">—</div>
|
||||
<div class="info-sub" id="vid-meta">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Message -->
|
||||
<div id="status-msg"></div>
|
||||
|
||||
<!-- Format Toggle -->
|
||||
<div class="section-label">Format</div>
|
||||
<div class="format-toggle" id="fmt-toggle">
|
||||
<button class="fmt-btn active" data-fmt="video" onclick="setFormat('video')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="15" height="14" rx="2"/><polygon points="17 8 22 12 17 16 17 8"/></svg>
|
||||
Video
|
||||
</button>
|
||||
<button class="fmt-btn" data-fmt="audio" onclick="setFormat('audio')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
||||
Audio Only
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Quality -->
|
||||
<div id="quality-row">
|
||||
<div class="section-label" id="quality-label">Resolution</div>
|
||||
<div class="quality-chips" id="quality-chips">
|
||||
<button class="chip selected" data-q="best">best</button>
|
||||
<button class="chip" data-q="1080p">1080p</button>
|
||||
<button class="chip" data-q="720p">720p</button>
|
||||
<button class="chip" data-q="480p">480p</button>
|
||||
<button class="chip" data-q="360p">360p</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress -->
|
||||
<div id="progress-box">
|
||||
<div class="section-label" id="progress-label">Downloading...</div>
|
||||
<div class="progress-bar-bg">
|
||||
<div class="progress-bar-fill" id="progress-fill"></div>
|
||||
</div>
|
||||
<div class="progress-meta">
|
||||
<span id="prog-speed"></span>
|
||||
<span id="prog-pct">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="action-row">
|
||||
<div id="download-btn-wrap">
|
||||
<a id="dl-link" class="btn btn-accent" href="#">⬇ Save File</a>
|
||||
</div>
|
||||
<button class="btn btn-accent" id="start-btn" onclick="startDownload()">Download</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>yt-dlp + flask · for personal use only · respect copyright</footer>
|
||||
|
||||
<script>
|
||||
let selectedFormat = 'video';
|
||||
let selectedQuality = 'best';
|
||||
let pollTimer = null;
|
||||
let videoQualities = [];
|
||||
|
||||
const audioQualities = ['mp3', 'aac', 'm4a', 'opus', 'flac'];
|
||||
const videoDefaultChips = ['best', '1080p', '720p', '480p', '360p'];
|
||||
|
||||
function setFormat(fmt) {
|
||||
selectedFormat = fmt;
|
||||
document.querySelectorAll('.fmt-btn').forEach(b => b.classList.toggle('active', b.dataset.fmt === fmt));
|
||||
renderQualityChips();
|
||||
}
|
||||
|
||||
function renderQualityChips(customList) {
|
||||
const label = document.getElementById('quality-label');
|
||||
const wrap = document.getElementById('quality-chips');
|
||||
const list = customList || (selectedFormat === 'audio' ? audioQualities : videoDefaultChips);
|
||||
label.textContent = selectedFormat === 'audio' ? 'Audio Format' : 'Resolution';
|
||||
const defaultQ = selectedFormat === 'audio' ? 'mp3' : 'best';
|
||||
selectedQuality = defaultQ;
|
||||
wrap.innerHTML = list.map(q =>
|
||||
`<button class="chip${q === defaultQ ? ' selected' : ''}" data-q="${q}" onclick="selectQuality(this,'${q}')">${q}</button>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
function selectQuality(el, q) {
|
||||
document.querySelectorAll('.chip').forEach(c => c.classList.remove('selected'));
|
||||
el.classList.add('selected');
|
||||
selectedQuality = q;
|
||||
}
|
||||
|
||||
function fmtDuration(s) {
|
||||
if (!s) return '';
|
||||
const h = Math.floor(s/3600), m = Math.floor((s%3600)/60), sec = s%60;
|
||||
return h ? `${h}:${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}` : `${m}:${String(sec).padStart(2,'0')}`;
|
||||
}
|
||||
|
||||
function showStatus(msg, type) {
|
||||
const el = document.getElementById('status-msg');
|
||||
el.textContent = msg;
|
||||
el.className = type;
|
||||
}
|
||||
|
||||
function clearStatus() {
|
||||
const el = document.getElementById('status-msg');
|
||||
el.className = '';
|
||||
el.textContent = '';
|
||||
}
|
||||
|
||||
async function fetchInfo() {
|
||||
const url = document.getElementById('url-input').value.trim();
|
||||
if (!url) return;
|
||||
clearStatus();
|
||||
document.getElementById('info-box').classList.remove('visible');
|
||||
try {
|
||||
const res = await fetch('/info', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({ url })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.error) { showStatus('⚠ ' + data.error, 'error'); return; }
|
||||
|
||||
document.getElementById('thumb').src = data.thumbnail || '';
|
||||
document.getElementById('vid-title').textContent = data.title || 'Unknown';
|
||||
document.getElementById('vid-meta').textContent =
|
||||
[data.uploader, fmtDuration(data.duration)].filter(Boolean).join(' · ');
|
||||
document.getElementById('info-box').classList.add('visible');
|
||||
|
||||
// Update video resolution chips from real data
|
||||
if (data.resolutions && data.resolutions.length) {
|
||||
videoQualities = ['best', ...data.resolutions];
|
||||
if (selectedFormat === 'video') renderQualityChips(videoQualities);
|
||||
}
|
||||
} catch(e) {
|
||||
showStatus('⚠ Could not reach server.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function startDownload() {
|
||||
const url = document.getElementById('url-input').value.trim();
|
||||
if (!url) { showStatus('⚠ Please enter a URL.', 'error'); return; }
|
||||
clearStatus();
|
||||
|
||||
const btn = document.getElementById('start-btn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="spin"></span> Starting...';
|
||||
|
||||
document.getElementById('download-btn-wrap').style.display = 'none';
|
||||
document.getElementById('progress-box').classList.add('visible');
|
||||
document.getElementById('progress-label').textContent = 'Downloading...';
|
||||
document.getElementById('progress-fill').style.width = '0%';
|
||||
document.getElementById('prog-pct').textContent = '0%';
|
||||
document.getElementById('prog-speed').textContent = '';
|
||||
|
||||
try {
|
||||
const res = await fetch('/download', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({ url, format: selectedFormat, quality: selectedQuality })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.error) { showStatus('⚠ ' + data.error, 'error'); resetBtn(); return; }
|
||||
pollStatus(data.job_id);
|
||||
} catch(e) {
|
||||
showStatus('⚠ Server error.', 'error');
|
||||
resetBtn();
|
||||
}
|
||||
}
|
||||
|
||||
function pollStatus(jobId) {
|
||||
if (pollTimer) clearInterval(pollTimer);
|
||||
pollTimer = setInterval(async () => {
|
||||
try {
|
||||
const res = await fetch('/status/' + jobId);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.progress !== undefined) {
|
||||
document.getElementById('progress-fill').style.width = data.progress + '%';
|
||||
document.getElementById('prog-pct').textContent = data.progress + '%';
|
||||
if (data.speed) document.getElementById('prog-speed').textContent = data.speed + (data.eta ? ' · ETA ' + data.eta : '');
|
||||
}
|
||||
|
||||
if (data.status === 'done') {
|
||||
clearInterval(pollTimer);
|
||||
document.getElementById('progress-label').textContent = 'Complete!';
|
||||
document.getElementById('prog-speed').textContent = '';
|
||||
showStatus('✓ Download ready: ' + (data.title || 'file'), 'success');
|
||||
const dlWrap = document.getElementById('download-btn-wrap');
|
||||
document.getElementById('dl-link').href = '/file/' + jobId;
|
||||
document.getElementById('dl-link').download = true;
|
||||
dlWrap.style.display = 'flex';
|
||||
resetBtn();
|
||||
} else if (data.status === 'error') {
|
||||
clearInterval(pollTimer);
|
||||
showStatus('⚠ ' + (data.error || 'Unknown error'), 'error');
|
||||
document.getElementById('progress-box').classList.remove('visible');
|
||||
resetBtn();
|
||||
}
|
||||
} catch(e) {
|
||||
// ignore transient poll errors
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function resetBtn() {
|
||||
const btn = document.getElementById('start-btn');
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = 'Download';
|
||||
}
|
||||
|
||||
// Allow Enter key in URL input
|
||||
document.getElementById('url-input').addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') fetchInfo();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user