|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Cosmo DL - Space Themed yt-dlp UI</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
cosmic: { |
|
|
100: '#e0e7ff', |
|
|
200: '#c7d2fe', |
|
|
300: '#a5b4fc', |
|
|
400: '#818cf8', |
|
|
500: '#6366f1', |
|
|
600: '#4f46e5', |
|
|
700: '#4338ca', |
|
|
800: '#3730a3', |
|
|
900: '#312e81', |
|
|
}, |
|
|
nebula: { |
|
|
100: '#f0f9ff', |
|
|
200: '#e0f2fe', |
|
|
300: '#bae6fd', |
|
|
400: '#7dd3fc', |
|
|
500: '#38bdf8', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
}, |
|
|
galaxy: { |
|
|
100: '#f5f3ff', |
|
|
200: '#ede9fe', |
|
|
300: '#ddd6fe', |
|
|
400: '#c4b5fd', |
|
|
500: '#a78bfa', |
|
|
600: '#8b5cf6', |
|
|
700: '#7c3aed', |
|
|
800: '#6d28d9', |
|
|
900: '#5b21b6', |
|
|
} |
|
|
}, |
|
|
animation: { |
|
|
'pulse-slow': 'pulse 6s infinite cubic-bezier(0.4, 0, 0.6, 1)', |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
'star-pulse': 'starPulse 4s ease-in-out infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
float: { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-10px)' }, |
|
|
}, |
|
|
starPulse: { |
|
|
'0%, 100%': { opacity: '0.2' }, |
|
|
'50%': { opacity: '1' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); |
|
|
min-height: 100vh; |
|
|
overflow-x: hidden; |
|
|
color: white; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
.stars { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.star { |
|
|
position: absolute; |
|
|
background: white; |
|
|
border-radius: 50%; |
|
|
animation: starPulse var(--duration) ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes twinkle { |
|
|
0%, 100% { opacity: 0.2; } |
|
|
50% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.comet { |
|
|
position: absolute; |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); |
|
|
border-radius: 50%; |
|
|
transform: rotate(45deg) translateX(-100px); |
|
|
animation: cometFly 15s linear infinite; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
@keyframes cometFly { |
|
|
0% { |
|
|
transform: translateX(-100px) translateY(-100px) rotate(45deg); |
|
|
opacity: 1; |
|
|
} |
|
|
70% { |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateX(calc(100vw + 100px)) translateY(calc(100vh + 100px)) rotate(45deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.gradient-border { |
|
|
position: relative; |
|
|
border-radius: 1rem; |
|
|
} |
|
|
|
|
|
.gradient-border::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -2px; |
|
|
left: -2px; |
|
|
right: -2px; |
|
|
bottom: -2px; |
|
|
border-radius: 1rem; |
|
|
background: linear-gradient(45deg, #6366f1, #8b5cf6, #38bdf8); |
|
|
background-size: 200% 200%; |
|
|
z-index: -1; |
|
|
animation: gradient 8s ease infinite; |
|
|
} |
|
|
|
|
|
@keyframes gradient { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
background: linear-gradient(90deg, #6366f1, #8b5cf6); |
|
|
border-radius: 3px; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.download-card { |
|
|
backdrop-filter: blur(10px); |
|
|
background: rgba(15, 23, 42, 0.7); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.format-option:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.format-option.selected { |
|
|
border-color: #6366f1; |
|
|
background: rgba(99, 102, 241, 0.1); |
|
|
} |
|
|
|
|
|
.tab-button.active { |
|
|
border-bottom: 2px solid #6366f1; |
|
|
color: #6366f1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="stars" id="stars"></div> |
|
|
<div class="comet" id="comet"></div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-12 max-w-6xl"> |
|
|
<header class="flex flex-col items-center mb-12 animate-float"> |
|
|
<div class="flex items-center space-x-4 mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-nebula-500 to-cosmic-600 flex items-center justify-center shadow-lg"> |
|
|
<i class="fas fa-satellite text-3xl text-white"></i> |
|
|
</div> |
|
|
<h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-nebula-400 to-cosmic-400"> |
|
|
Cosmo<span class="text-white"> DL</span> |
|
|
</h1> |
|
|
</div> |
|
|
<p class="text-nebula-300 text-center max-w-lg"> |
|
|
The interstellar media downloader powered by yt-dlp. Download videos from across the galaxy! |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
<main class="gradient-border p-1 rounded-xl mb-12"> |
|
|
<div class="bg-gray-900 rounded-xl p-6"> |
|
|
<div class="flex space-x-4 mb-6 border-b border-gray-800 pb-2"> |
|
|
<button class="tab-button active px-4 py-2 font-medium text-nebula-300 hover:text-white transition" data-tab="download"> |
|
|
<i class="fas fa-download mr-2"></i> Download |
|
|
</button> |
|
|
<button class="tab-button px-4 py-2 font-medium text-nebula-300 hover:text-white transition" data-tab="settings"> |
|
|
<i class="fas fa-cog mr-2"></i> Settings |
|
|
</button> |
|
|
<button class="tab-button px-4 py-2 font-medium text-nebula-300 hover:text-white transition" data-tab="queue"> |
|
|
<i class="fas fa-list mr-2"></i> Queue |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="download-tab" class="tab-content"> |
|
|
<div class="mb-6"> |
|
|
<label for="url" class="block text-nebula-300 mb-2 font-medium">Enter Video URL</label> |
|
|
<div class="flex space-x-2"> |
|
|
<input type="text" id="url" placeholder="https://www.youtube.com/watch?v=..." |
|
|
class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition"> |
|
|
<button id="fetch-btn" class="bg-cosmic-600 hover:bg-cosmic-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center"> |
|
|
<i class="fas fa-search mr-2"></i> Fetch |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="video-info" class="hidden download-card rounded-xl p-4 mb-6 transition-all duration-300"> |
|
|
<div class="flex flex-col md:flex-row gap-6"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img id="thumbnail" src="" alt="Video thumbnail" class="w-full md:w-64 rounded-lg shadow-lg"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h2 id="video-title" class="text-xl font-bold mb-2 text-white"></h2> |
|
|
<p id="video-author" class="text-nebula-300 mb-4"></p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span id="video-duration" class="bg-gray-800 text-nebula-300 px-3 py-1 rounded-full text-sm"></span> |
|
|
<span id="video-views" class="bg-gray-800 text-nebula-300 px-3 py-1 rounded-full text-sm"></span> |
|
|
<span id="video-date" class="bg-gray-800 text-nebula-300 px-3 py-1 rounded-full text-sm"></span> |
|
|
</div> |
|
|
<div class="progress-container hidden mb-4"> |
|
|
<div class="flex justify-between text-sm text-nebula-300 mb-1"> |
|
|
<span>Fetching formats...</span> |
|
|
<span id="progress-text">0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2"> |
|
|
<div id="progress-bar" class="progress-bar h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="format-options" class="hidden"> |
|
|
<h3 class="text-lg font-medium text-white mb-4">Available Formats</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6" id="format-container"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-4 mb-6"> |
|
|
<div class="flex-1 min-w-[200px]"> |
|
|
<label for="output-path" class="block text-nebula-300 mb-2 font-medium">Output Path</label> |
|
|
<div class="flex"> |
|
|
<input type="text" id="output-path" value="~/Downloads" |
|
|
class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition"> |
|
|
<button id="browse-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-r-lg transition"> |
|
|
<i class="fas fa-folder-open"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 min-w-[200px]"> |
|
|
<label for="filename" class="block text-nebula-300 mb-2 font-medium">Filename Template</label> |
|
|
<input type="text" id="filename" value="%(title)s.%(ext)s" |
|
|
class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button id="download-btn" class="bg-cosmic-600 hover:bg-cosmic-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center"> |
|
|
<i class="fas fa-rocket mr-2"></i> Launch Download |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settings-tab" class="tab-content hidden"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="download-card p-4 rounded-lg"> |
|
|
<h3 class="text-lg font-medium text-white mb-4 flex items-center"> |
|
|
<i class="fas fa-download mr-2 text-nebula-400"></i> Download Settings |
|
|
</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="flex items-center space-x-2"> |
|
|
<input type="checkbox" class="rounded text-cosmic-600" checked> |
|
|
<span class="text-nebula-300">Embed metadata</span> |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<label class="flex items-center space-x-2"> |
|
|
<input type="checkbox" class="rounded text-cosmic-600" checked> |
|
|
<span class="text-nebula-300">Embed thumbnails</span> |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<label class="flex items-center space-x-2"> |
|
|
<input type="checkbox" class="rounded text-cosmic-600"> |
|
|
<span class="text-nebula-300">Download subtitles</span> |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<label class="flex items-center space-x-2"> |
|
|
<input type="checkbox" class="rounded text-cosmic-600"> |
|
|
<span class="text-nebula-300">Convert to MP3</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="download-card p-4 rounded-lg"> |
|
|
<h3 class="text-lg font-medium text-white mb-4 flex items-center"> |
|
|
<i class="fas fa-network-wired mr-2 text-nebula-400"></i> Network Settings |
|
|
</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-nebula-300 mb-1">Retries</label> |
|
|
<input type="number" value="3" min="0" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-nebula-300 mb-1">Timeout (seconds)</label> |
|
|
<input type="number" value="30" min="1" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-nebula-300 mb-1">Rate Limit (KB/s)</label> |
|
|
<input type="number" placeholder="Unlimited" min="1" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="download-card p-4 rounded-lg"> |
|
|
<h3 class="text-lg font-medium text-white mb-4 flex items-center"> |
|
|
<i class="fas fa-paint-brush mr-2 text-nebula-400"></i> Appearance |
|
|
</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-nebula-300 mb-1">Theme</label> |
|
|
<select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition"> |
|
|
<option>Cosmic (Default)</option> |
|
|
<option>Nebula</option> |
|
|
<option>Galaxy</option> |
|
|
<option>Dark Matter</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="flex items-center space-x-2"> |
|
|
<input type="checkbox" class="rounded text-cosmic-600" checked> |
|
|
<span class="text-nebula-300">Enable animations</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="download-card p-4 rounded-lg"> |
|
|
<h3 class="text-lg font-medium text-white mb-4 flex items-center"> |
|
|
<i class="fas fa-terminal mr-2 text-nebula-400"></i> Advanced |
|
|
</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-nebula-300 mb-1">Custom Arguments</label> |
|
|
<textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition h-24" placeholder="--add-metadata --embed-thumbnail"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-nebula-300 mb-1">Executable Path</label> |
|
|
<div class="flex"> |
|
|
<input type="text" value="yt-dlp" |
|
|
class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition"> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-r-lg transition"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end mt-6"> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-lg font-medium transition mr-3"> |
|
|
Reset Defaults |
|
|
</button> |
|
|
<button class="bg-cosmic-600 hover:bg-cosmic-700 text-white px-6 py-2 rounded-lg font-medium transition"> |
|
|
Save Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="queue-tab" class="tab-content hidden"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-lg font-medium text-white flex items-center"> |
|
|
<i class="fas fa-list-ol mr-2 text-nebula-400"></i> Download Queue |
|
|
</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm transition"> |
|
|
<i class="fas fa-play mr-1"></i> Start All |
|
|
</button> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm transition"> |
|
|
<i class="fas fa-trash-alt mr-1"></i> Clear |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div class="download-card p-4 rounded-lg flex items-center"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 rounded bg-gray-800 flex items-center justify-center"> |
|
|
<i class="fas fa-music text-nebula-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-white">Interstellar Soundtrack - No Time for Caution</h4> |
|
|
<p class="text-sm text-nebula-300">YouTube • MP3 • 320kbps</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-24 bg-gray-800 rounded-full h-2"> |
|
|
<div class="bg-cosmic-600 h-2 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
<span class="text-sm text-nebula-300">65%</span> |
|
|
<button class="text-nebula-300 hover:text-white transition"> |
|
|
<i class="fas fa-pause"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="download-card p-4 rounded-lg flex items-center"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 rounded bg-gray-800 flex items-center justify-center"> |
|
|
<i class="fas fa-film text-nebula-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-white">The Beauty of Space in 4K</h4> |
|
|
<p class="text-sm text-nebula-300">YouTube • MP4 • 2160p</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-24 bg-gray-800 rounded-full h-2"> |
|
|
<div class="bg-cosmic-600 h-2 rounded-full" style="width: 12%"></div> |
|
|
</div> |
|
|
<span class="text-sm text-nebula-300">12%</span> |
|
|
<button class="text-nebula-300 hover:text-white transition"> |
|
|
<i class="fas fa-pause"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="download-card p-4 rounded-lg flex items-center opacity-70"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 rounded bg-gray-800 flex items-center justify-center"> |
|
|
<i class="fas fa-film text-nebula-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-white">NASA Live: Earth From Space</h4> |
|
|
<p class="text-sm text-nebula-300">YouTube • MP4 • 1080p</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm text-nebula-300">Queued</span> |
|
|
<button class="text-nebula-300 hover:text-white transition"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="download-card p-4 rounded-lg flex items-center opacity-70"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 rounded bg-gray-800 flex items-center justify-center"> |
|
|
<i class="fas fa-headphones text-nebula-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-white">Space Ambient Music</h4> |
|
|
<p class="text-sm text-nebula-300">SoundCloud • MP3 • 256kbps</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm text-nebula-300">Queued</span> |
|
|
<button class="text-nebula-300 hover:text-white transition"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="text-center text-nebula-400 text-sm"> |
|
|
<p>Cosmo DL v1.0.0 - Powered by yt-dlp</p> |
|
|
<p class="mt-1">Made with <i class="fas fa-heart text-red-400"></i> somewhere in the universe</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createStars() { |
|
|
const starsContainer = document.getElementById('stars'); |
|
|
const starCount = 200; |
|
|
|
|
|
for (let i = 0; i < starCount; i++) { |
|
|
const star = document.createElement('div'); |
|
|
star.className = 'star'; |
|
|
|
|
|
|
|
|
const size = Math.random() * 3; |
|
|
const posX = Math.random() * 100; |
|
|
const posY = Math.random() * 100; |
|
|
const opacity = Math.random() * 0.8 + 0.2; |
|
|
const duration = Math.random() * 5 + 3; |
|
|
|
|
|
star.style.width = `${size}px`; |
|
|
star.style.height = `${size}px`; |
|
|
star.style.left = `${posX}%`; |
|
|
star.style.top = `${posY}%`; |
|
|
star.style.opacity = opacity; |
|
|
star.style.setProperty('--duration', `${duration}s`); |
|
|
|
|
|
starsContainer.appendChild(star); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function animateComet() { |
|
|
const comet = document.getElementById('comet'); |
|
|
const delay = Math.random() * 30; |
|
|
|
|
|
setTimeout(() => { |
|
|
comet.style.animation = 'cometFly 15s linear infinite'; |
|
|
setInterval(animateComet, 45000); |
|
|
}, delay * 1000); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-button').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
|
|
|
document.querySelectorAll('.tab-button').forEach(btn => { |
|
|
btn.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
button.classList.add('active'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(content => { |
|
|
content.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const tabId = button.getAttribute('data-tab') + '-tab'; |
|
|
document.getElementById(tabId).classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('fetch-btn').addEventListener('click', () => { |
|
|
const urlInput = document.getElementById('url'); |
|
|
if (!urlInput.value) { |
|
|
alert('Please enter a video URL'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const videoInfo = document.getElementById('video-info'); |
|
|
const progressContainer = document.querySelector('.progress-container'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const progressText = document.getElementById('progress-text'); |
|
|
|
|
|
videoInfo.classList.remove('hidden'); |
|
|
progressContainer.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
let progress = 0; |
|
|
const interval = setInterval(() => { |
|
|
progress += Math.random() * 10; |
|
|
if (progress > 100) progress = 100; |
|
|
|
|
|
progressBar.style.width = `${progress}%`; |
|
|
progressText.textContent = `${Math.round(progress)}%`; |
|
|
|
|
|
if (progress === 100) { |
|
|
clearInterval(interval); |
|
|
setTimeout(() => { |
|
|
progressContainer.classList.add('hidden'); |
|
|
showVideoInfo(); |
|
|
showFormatOptions(); |
|
|
}, 500); |
|
|
} |
|
|
}, 200); |
|
|
}); |
|
|
|
|
|
|
|
|
function showVideoInfo() { |
|
|
document.getElementById('thumbnail').src = 'https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg'; |
|
|
document.getElementById('video-title').textContent = 'Interstellar - Official Trailer'; |
|
|
document.getElementById('video-author').textContent = 'by Warner Bros. Pictures'; |
|
|
document.getElementById('video-duration').textContent = '2:49'; |
|
|
document.getElementById('video-views').textContent = '45M views'; |
|
|
document.getElementById('video-date').textContent = 'Jul 30, 2014'; |
|
|
} |
|
|
|
|
|
|
|
|
function showFormatOptions() { |
|
|
const formatContainer = document.getElementById('format-container'); |
|
|
formatContainer.innerHTML = ''; |
|
|
|
|
|
const formats = [ |
|
|
{ id: '1', quality: '2160p', type: 'MP4', size: '1.2GB', codec: 'avc1.640033' }, |
|
|
{ id: '2', quality: '1440p', type: 'MP4', size: '850MB', codec: 'avc1.640033' }, |
|
|
{ id: '3', quality: '1080p', type: 'MP4', size: '520MB', codec: 'avc1.640028' }, |
|
|
{ id: '4', quality: '720p', type: 'MP4', size: '280MB', codec: 'avc1.64001F' }, |
|
|
{ id: '5', quality: '480p', type: 'MP4', size: '150MB', codec: 'avc1.64001E' }, |
|
|
{ id: '6', quality: '360p', type: 'MP4', size: '80MB', codec: 'avc1.64001E' }, |
|
|
{ id: '7', quality: 'Audio Only', type: 'MP3', size: '12MB', bitrate: '320kbps' }, |
|
|
{ id: '8', quality: 'Audio Only', type: 'MP3', size: '8MB', bitrate: '256kbps' }, |
|
|
{ id: '9', quality: 'Audio Only', type: 'MP3', size: '5MB', bitrate: '128kbps' }, |
|
|
]; |
|
|
|
|
|
formats.forEach(format => { |
|
|
const formatElement = document.createElement('div'); |
|
|
formatElement.className = 'format-option download-card p-4 rounded-lg cursor-pointer transition hover:shadow-lg'; |
|
|
formatElement.innerHTML = ` |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h4 class="font-medium text-white">${format.quality}</h4> |
|
|
<span class="text-sm text-nebula-400">${format.size}</span> |
|
|
</div> |
|
|
<div class="text-sm text-nebula-300"> |
|
|
<p>${format.type}</p> |
|
|
<p>${format.codec || format.bitrate || ''}</p> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
formatElement.addEventListener('click', () => { |
|
|
document.querySelectorAll('.format-option').forEach(el => { |
|
|
el.classList.remove('selected'); |
|
|
}); |
|
|
formatElement.classList.add('selected'); |
|
|
}); |
|
|
|
|
|
formatContainer.appendChild(formatElement); |
|
|
}); |
|
|
|
|
|
document.getElementById('format-options').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('download-btn').addEventListener('click', () => { |
|
|
const selectedFormat = document.querySelector('.format-option.selected'); |
|
|
if (!selectedFormat) { |
|
|
alert('Please select a format'); |
|
|
return; |
|
|
} |
|
|
|
|
|
alert('Download started! (This is a demo)'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
createStars(); |
|
|
animateComet(); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rvce/cosmo-dl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
