78 lines
2.7 KiB
HTML
78 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>VDROP</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" />
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="logo">VDROP</div>
|
|
<div class="tagline">yt-dlp powered · audio & video</div>
|
|
</header>
|
|
|
|
<div class="card">
|
|
|
|
<div class="section-label">Ingresar URL</div>
|
|
<div class="url-row">
|
|
<input type="text" id="url-input" placeholder="https://youtube.com/watch?v=..." autocomplete="off" spellcheck="false" />
|
|
<div class="url-spinner" id="url-spinner"></div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div id="status-msg"></div>
|
|
|
|
<div class="section-label">Tipo</div>
|
|
<div class="format-toggle" id="fmt-toggle">
|
|
<button class="fmt-btn active" data-fmt="video" onclick="setMediaType('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="setMediaType('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>
|
|
Solo Audio
|
|
</button>
|
|
</div>
|
|
|
|
<div id="format-row">
|
|
<div class="section-label" id="format-label">Format De Salida</div>
|
|
<div class="format-chips" id="format-chips"></div>
|
|
</div>
|
|
|
|
<div id="progress-box">
|
|
<div class="section-label" id="progress-label">Descargando...</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>
|
|
|
|
<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()">Descargar</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<footer>yt-dlp + flask · for personal use only · respect copyright</footer>
|
|
|
|
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
|
</body>
|
|
</html>
|