135 lines
5.5 KiB
HTML
135 lines
5.5 KiB
HTML
<!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>
|