Download index.html from bibbler/undefined: direct link, hf CLI and curl.
- Browser
- Download file 56.8 kB
-
https://huggingface.co/spaces/bibbler/undefined/resolve/main/index.html
- Command line
-
hf download hf://spaces/bibbler/undefined/index.html
-
curl -L -o index.html https://huggingface.co/spaces/bibbler/undefined/resolve/main/index.html
56.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>yt-dlp Command Templates Wiki</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0f172a', | |
| secondary: '#1e293b', | |
| accent: '#10b981', | |
| 'accent-dark': '#059669', | |
| 'gray-custom': '#64748b', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .command-box pre { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .sidebar-active { | |
| transform: translateX(0); | |
| } | |
| @media (max-width: 768px) { | |
| .floating-sidebar { | |
| transform: translateX(-100%); | |
| } | |
| } | |
| .scrollbar-thin::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar-thumb { | |
| background: #10b981; | |
| border-radius: 3px; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar-thumb:hover { | |
| background: #059669; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-slate-100 min-h-screen"> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobileMenuBtn" class="md:hidden fixed top-4 left-4 z-50 bg-accent hover:bg-accent-dark text-white p-3 rounded-lg shadow-lg transition-all"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> | |
| </svg> | |
| </button> | |
| <!-- Floating Sidebar --> | |
| <aside id="sidebar" class="floating-sidebar fixed left-0 top-0 h-full w-64 bg-secondary border-r border-slate-700 shadow-2xl z-40 overflow-y-auto scrollbar-thin transition-transform duration-300 md:translate-x-0"> | |
| <div class="p-6"> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-bold text-white mb-1">yt-dlp Wiki</h2> | |
| <p class="text-sm text-gray-custom">Command Templates</p> | |
| </div> | |
| <!-- Search Box --> | |
| <div class="mb-6"> | |
| <div class="relative"> | |
| <input | |
| type="text" | |
| id="searchBox" | |
| placeholder="Search commands..." | |
| class="w-full bg-primary text-slate-100 placeholder-gray-custom border border-slate-700 rounded-lg px-4 py-2.5 pl-10 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all text-sm" | |
| > | |
| <svg class="w-5 h-5 absolute left-3 top-3 text-gray-custom" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="space-y-1"> | |
| <a href="#channels" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> | |
| <svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/> | |
| </svg> | |
| Channels | |
| </a> | |
| <a href="#playlists" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> | |
| <svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/> | |
| </svg> | |
| Playlists | |
| </a> | |
| <a href="#videos" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> | |
| <svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/> | |
| </svg> | |
| Videos | |
| </a> | |
| <a href="#shorts" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> | |
| <svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/> | |
| </svg> | |
| Shorts | |
| </a> | |
| <a href="#lives" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> | |
| <svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"/> | |
| </svg> | |
| Lives | |
| </a> | |
| <a href="#utility" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> | |
| <svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/> | |
| </svg> | |
| Utility | |
| </a> | |
| </nav> | |
| <!-- Stats --> | |
| <div class="mt-8 p-4 bg-primary rounded-lg border border-slate-700"> | |
| <p class="text-xs text-gray-custom mb-2">Total Commands</p> | |
| <p class="text-2xl font-bold text-accent">59</p> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="md:ml-64 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-secondary border-b border-slate-700 sticky top-0 z-30 backdrop-blur-sm bg-opacity-95"> | |
| <div class="max-w-6xl mx-auto px-6 py-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white mb-2">yt-dlp Command Templates</h1> | |
| <p class="text-gray-custom">Comprehensive collection of download commands with one-click copy</p> | |
| </div> | |
| <button id="toggleConfig" class="px-4 py-2 bg-accent hover:bg-accent-dark text-white rounded-lg transition-all flex items-center gap-2"> | |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/> | |
| </svg> | |
| Configure | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Configuration Panel --> | |
| <div id="configPanel" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 overflow-y-auto"> | |
| <div class="min-h-screen px-4 py-8 flex items-start justify-center"> | |
| <div class="bg-secondary rounded-xl border border-slate-700 max-w-4xl w-full shadow-2xl"> | |
| <!-- Panel Header --> | |
| <div class="flex items-center justify-between p-6 border-b border-slate-700"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-white">Command Configuration</h2> | |
| <p class="text-gray-custom mt-1">Customize parameters that will be applied to all commands</p> | |
| </div> | |
| <button id="closeConfig" class="text-gray-custom hover:text-white transition-colors"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Panel Content --> | |
| <div class="p-6 space-y-6"> | |
| <!-- Config File Path --> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-2">Config File Path</label> | |
| <input type="text" id="configPath" | |
| value="/Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf" | |
| class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> | |
| </div> | |
| <!-- URLs Section --> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-2">Channel URL/Handle</label> | |
| <input type="text" id="channelUrl" | |
| value="https://www.youtube.com/@ChannelName" | |
| placeholder="@ChannelName or full URL" | |
| class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-2">Playlist ID</label> | |
| <input type="text" id="playlistId" | |
| value="PLAYLIST_ID" | |
| placeholder="Enter playlist ID" | |
| class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-2">Video ID</label> | |
| <input type="text" id="videoId" | |
| value="VIDEO_ID" | |
| placeholder="Enter video ID" | |
| class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-2">Short ID</label> | |
| <input type="text" id="shortId" | |
| value="SHORT_ID" | |
| placeholder="Enter short ID" | |
| class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-2">Live ID</label> | |
| <input type="text" id="liveId" | |
| value="LIVE_ID" | |
| placeholder="Enter live ID" | |
| class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> | |
| </div> | |
| </div> | |
| <!-- Date Filters --> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-2">Date After (YYYYMMDD)</label> | |
| <input type="text" id="dateAfter" | |
| value="20240101" | |
| placeholder="e.g., 20240101" | |
| class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-2">Date Before (YYYYMMDD)</label> | |
| <input type="text" id="dateBefore" | |
| value="20241231" | |
| placeholder="e.g., 20241231" | |
| class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> | |
| </div> | |
| </div> | |
| <!-- Output Settings --> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-2">Playlist End (Max Videos)</label> | |
| <input type="number" id="playlistEnd" | |
| value="100" | |
| min="1" | |
| class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-2">Output Base Path</label> | |
| <input type="text" id="outputPath" | |
| value="~/Downloads/_VIDEOS_/Youtube" | |
| class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex items-center justify-between pt-4 border-t border-slate-700"> | |
| <button id="resetConfig" class="px-4 py-2 text-gray-custom hover:text-white transition-colors"> | |
| Reset to Defaults | |
| </button> | |
| <div class="flex gap-3"> | |
| <button id="cancelConfig" class="px-6 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-all"> | |
| Cancel | |
| </button> | |
| <button id="applyConfig" class="px-6 py-2 bg-accent hover:bg-accent-dark text-white rounded-lg transition-all"> | |
| Apply Changes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content --> | |
| <div class="max-w-6xl mx-auto px-6 py-8 space-y-8"> | |
| <!-- Channels Section --> | |
| <section id="channels" class="scroll-mt-40"> | |
| <div class="sticky top-[104px] z-20 py-4 bg-gradient-to-r from-slate-800 to-slate-900 backdrop-blur-sm bg-opacity-95 -mx-6 px-6 border-b border-slate-700"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="h-10 w-1 bg-accent rounded-full mr-4"></div> | |
| <h2 class="text-2xl font-bold text-white">Channels</h2> | |
| </div> | |
| <button onclick="toggleTOC('channels')" class="flex items-center gap-2 text-gray-custom hover:text-white transition-colors text-sm"> | |
| <span>Quick Jump</span> | |
| <svg id="channels-arrow" class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Section TOC Drawer --> | |
| <div id="channels-toc" class="hidden mt-4 pt-4 border-t border-slate-700"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- Metadata --> | |
| <div> | |
| <h4 class="text-xs font-semibold text-accent uppercase tracking-wider mb-2">Metadata & Info</h4> | |
| <div class="space-y-1"> | |
| <a href="#channels-1" class="block text-sm text-gray-custom hover:text-white transition-colors">1. Thumbnails Only</a> | |
| <a href="#channels-2" class="block text-sm text-gray-custom hover:text-white transition-colors">2. + Descriptions</a> | |
| <a href="#channels-3" class="block text-sm text-gray-custom hover:text-white transition-colors">3. + Metadata JSON</a> | |
| <a href="#channels-4" class="block text-sm text-gray-custom hover:text-white transition-colors">4. + Desc + JSON</a> | |
| <a href="#channels-5" class="block text-sm text-gray-custom hover:text-white transition-colors">5. + Subtitles</a> | |
| </div> | |
| </div> | |
| <!-- Audio --> | |
| <div> | |
| <h4 class="text-xs font-semibold text-orange-500 uppercase tracking-wider mb-2">Audio Downloads</h4> | |
| <div class="space-y-1"> | |
| <a href="#channels-6" class="block text-sm text-gray-custom hover:text-white transition-colors">6. + Audio (Best)</a> | |
| <a href="#channels-7" class="block text-sm text-gray-custom hover:text-white transition-colors">7. + Audio (MP3)</a> | |
| <a href="#channels-8" class="block text-sm text-gray-custom hover:text-white transition-colors">8. + Audio (M4A)</a> | |
| <a href="#channels-9" class="block text-sm text-gray-custom hover:text-white transition-colors">9. + Audio (WebM)</a> | |
| <a href="#channels-10" class="block text-sm text-gray-custom hover:text-white transition-colors">10. + Audio (WAV)</a> | |
| </div> | |
| </div> | |
| <!-- Video --> | |
| <div> | |
| <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-2">Video Downloads</h4> | |
| <div class="space-y-1"> | |
| <a href="#channels-11" class="block text-sm text-gray-custom hover:text-white transition-colors">11. + Video (Best)</a> | |
| <a href="#channels-12" class="block text-sm text-gray-custom hover:text-white transition-colors">12. + Video (1080p)</a> | |
| <a href="#channels-13" class="block text-sm text-gray-custom hover:text-white transition-colors">13. + Video (720p)</a> | |
| <a href="#channels-14" class="block text-sm text-gray-custom hover:text-white transition-colors">14. + Video (480p)</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- Command Group --> | |
| <div id="channels-1" class="command-group bg-secondary border border-slate-700 rounded-xl overflow-hidden hover:border-accent transition-all scroll-mt-48"> | |
| <div class="p-5 border-b border-slate-700"> | |
| <h3 class="text-lg font-semibold text-white">1. Thumbnails Only (100 most recent)</h3> | |
| </div> | |
| <div class="p-5 space-y-4"> | |
| <!-- With Config --> | |
| <div class="command-box bg-primary border border-slate-700 rounded-lg overflow-hidden hover:border-accent transition-all"> | |
| <div class="flex items-center justify-between p-3 bg-gradient-to-r from-accent/10 to-transparent border-b border-slate-700"> | |
| <span class="text-xs font-semibold text-accent uppercase tracking-wider">With Config File</span> | |
| <button onclick="copyToClipboard(this)" class="copy-btn px-3 py-1.5 bg-accent hover:bg-accent-dark text-white text-xs font-medium rounded transition-all"> | |
| Copy | |
| </button> | |
| </div> | |
| <pre class="p-4 text-sm text-slate-300 overflow-x-auto">yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf "https://www.youtube.com/@ChannelName"</pre> | |
| </div> | |
| <!-- Without Config --> | |
| <div class="command-box bg-primary border border-slate-700 rounded-lg overflow-hidden hover:border-orange-500 transition-all"> | |
| <div class="flex items-center justify-between p-3 bg-gradient-to-r from-orange-500/10 to-transparent border-b border-slate-700"> | |
| <span class="text-xs font-semibold text-orange-500 uppercase tracking-wider">Without Config File</span> | |
| <button onclick="copyToClipboard(this)" class="copy-btn px-3 py-1.5 bg-orange-500 hover:bg-orange-600 text-white text-xs font-medium rounded transition-all"> | |
| Copy | |
| </button> | |
| </div> | |
| <pre class="p-4 text-sm text-slate-300 overflow-x-auto">yt-dlp --write-thumbnail --skip-download --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Thumbs/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"</pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- More command groups will be loaded via JavaScript --> | |
| </div> | |
| </section> | |
| <!-- Loading indicator for additional sections --> | |
| <div id="loading" class="text-center py-8"> | |
| <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-accent border-t-transparent"></div> | |
| <p class="mt-4 text-gray-custom">Loading remaining commands...</p> | |
| </div> | |
| </div> | |
| <!-- Back to Top Button --> | |
| <button id="backToTop" class="fixed bottom-6 right-6 bg-accent hover:bg-accent-dark text-white p-3 rounded-full shadow-lg transition-all opacity-0 pointer-events-none"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/> | |
| </svg> | |
| </button> | |
| </main> | |
| <script src="yt-dlp-commands-complete.js"></script> | |
| <script> | |
| // TOC Toggle function | |
| function toggleTOC(sectionId) { | |
| const toc = document.getElementById(`${sectionId}-toc`); | |
| const arrow = document.getElementById(`${sectionId}-arrow`); | |
| if (toc.classList.contains('hidden')) { | |
| toc.classList.remove('hidden'); | |
| arrow.classList.add('rotate-180'); | |
| } else { | |
| toc.classList.add('hidden'); | |
| arrow.classList.remove('rotate-180'); | |
| } | |
| } | |
| // Configuration state | |
| let config = { | |
| configPath: '/Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf', | |
| channelUrl: 'https://www.youtube.com/@ChannelName', | |
| playlistId: 'PLAYLIST_ID', | |
| videoId: 'VIDEO_ID', | |
| shortId: 'SHORT_ID', | |
| liveId: 'LIVE_ID', | |
| dateAfter: '20240101', | |
| dateBefore: '20241231', | |
| playlistEnd: '100', | |
| outputPath: '~/Downloads/_VIDEOS_/Youtube' | |
| }; | |
| const defaults = {...config}; | |
| // Apply substitutions to command text | |
| function applySubstitutions(text) { | |
| return text | |
| .replace(/\/Users\/bibbler\/Downloads\/_VIDEOS_\/_Admin_\/config_local\/yt-channel-thumbs-v2\.conf/g, config.configPath) | |
| .replace(/https:\/\/www\.youtube\.com\/@ChannelName/g, config.channelUrl) | |
| .replace(/"@ChannelName"/g, `"${config.channelUrl}"`) | |
| .replace(/playlist\?list=PLAYLIST_ID/g, `playlist?list=${config.playlistId}`) | |
| .replace(/watch\?v=VIDEO_ID/g, `watch?v=${config.videoId}`) | |
| .replace(/shorts\/SHORT_ID/g, `shorts/${config.shortId}`) | |
| .replace(/watch\?v=LIVE_ID/g, `watch?v=${config.liveId}`) | |
| .replace(/--dateafter 20240101/g, `--dateafter ${config.dateAfter}`) | |
| .replace(/--datebefore 20241231/g, `--datebefore ${config.dateBefore}`) | |
| .replace(/--playlist-end 100/g, `--playlist-end ${config.playlistEnd}`) | |
| .replace(/~\/Downloads\/_VIDEOS_\/Youtube/g, config.outputPath); | |
| } | |
| // Update all commands with current config | |
| function updateAllCommands() { | |
| document.querySelectorAll('.command-box pre').forEach(pre => { | |
| const original = pre.getAttribute('data-original') || pre.textContent; | |
| if (!pre.getAttribute('data-original')) { | |
| pre.setAttribute('data-original', original); | |
| } | |
| pre.textContent = applySubstitutions(original); | |
| }); | |
| } | |
| // Copy to clipboard functionality | |
| function copyToClipboard(button) { | |
| const commandBox = button.closest('.command-box'); | |
| const pre = commandBox.querySelector('pre'); | |
| const text = pre.textContent; | |
| navigator.clipboard.writeText(text).then(() => { | |
| const originalText = button.textContent; | |
| button.textContent = 'Copied!'; | |
| button.classList.add('bg-green-600'); | |
| setTimeout(() => { | |
| button.textContent = originalText; | |
| button.classList.remove('bg-green-600'); | |
| }, 2000); | |
| }).catch(err => { | |
| console.error('Failed to copy: ', err); | |
| }); | |
| } | |
| // Configuration panel controls | |
| document.getElementById('toggleConfig').addEventListener('click', () => { | |
| document.getElementById('configPanel').classList.remove('hidden'); | |
| }); | |
| document.getElementById('closeConfig').addEventListener('click', () => { | |
| document.getElementById('configPanel').classList.add('hidden'); | |
| }); | |
| document.getElementById('cancelConfig').addEventListener('click', () => { | |
| document.getElementById('configPanel').classList.add('hidden'); | |
| }); | |
| document.getElementById('applyConfig').addEventListener('click', () => { | |
| // Get values from form | |
| config.configPath = document.getElementById('configPath').value; | |
| config.channelUrl = document.getElementById('channelUrl').value; | |
| config.playlistId = document.getElementById('playlistId').value; | |
| config.videoId = document.getElementById('videoId').value; | |
| config.shortId = document.getElementById('shortId').value; | |
| config.liveId = document.getElementById('liveId').value; | |
| config.dateAfter = document.getElementById('dateAfter').value; | |
| config.dateBefore = document.getElementById('dateBefore').value; | |
| config.playlistEnd = document.getElementById('playlistEnd').value; | |
| config.outputPath = document.getElementById('outputPath').value; | |
| // Update all commands | |
| updateAllCommands(); | |
| // Close panel | |
| document.getElementById('configPanel').classList.add('hidden'); | |
| // Show success notification | |
| const button = document.getElementById('toggleConfig'); | |
| const originalHTML = button.innerHTML; | |
| button.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Applied!'; | |
| setTimeout(() => { | |
| button.innerHTML = originalHTML; | |
| }, 2000); | |
| }); | |
| document.getElementById('resetConfig').addEventListener('click', () => { | |
| // Reset form to defaults | |
| document.getElementById('configPath').value = defaults.configPath; | |
| document.getElementById('channelUrl').value = defaults.channelUrl; | |
| document.getElementById('playlistId').value = defaults.playlistId; | |
| document.getElementById('videoId').value = defaults.videoId; | |
| document.getElementById('shortId').value = defaults.shortId; | |
| document.getElementById('liveId').value = defaults.liveId; | |
| document.getElementById('dateAfter').value = defaults.dateAfter; | |
| document.getElementById('dateBefore').value = defaults.dateBefore; | |
| document.getElementById('playlistEnd').value = defaults.playlistEnd; | |
| document.getElementById('outputPath').value = defaults.outputPath; | |
| }); | |
| // Close panel on outside click | |
| document.getElementById('configPanel').addEventListener('click', (e) => { | |
| if (e.target.id === 'configPanel') { | |
| document.getElementById('configPanel').classList.add('hidden'); | |
| } | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | |
| const sidebar = document.getElementById('sidebar'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| sidebar.classList.toggle('sidebar-active'); | |
| }); | |
| // Close sidebar when clicking outside on mobile | |
| document.addEventListener('click', (e) => { | |
| if (window.innerWidth < 768) { | |
| if (!sidebar.contains(e.target) && !mobileMenuBtn.contains(e.target)) { | |
| sidebar.classList.remove('sidebar-active'); | |
| } | |
| } | |
| }); | |
| // Close sidebar when clicking nav link on mobile | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.addEventListener('click', () => { | |
| if (window.innerWidth < 768) { | |
| sidebar.classList.remove('sidebar-active'); | |
| } | |
| }); | |
| }); | |
| // Search functionality | |
| document.getElementById('searchBox').addEventListener('input', function(e) { | |
| const searchTerm = e.target.value.toLowerCase(); | |
| const commandGroups = document.querySelectorAll('.command-group'); | |
| commandGroups.forEach(group => { | |
| const text = group.textContent.toLowerCase(); | |
| if (text.includes(searchTerm) || searchTerm === '') { | |
| group.style.display = 'block'; | |
| } else { | |
| group.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| // Back to top functionality | |
| const backToTop = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTop.classList.remove('opacity-0', 'pointer-events-none'); | |
| backToTop.classList.add('opacity-100'); | |
| } else { | |
| backToTop.classList.add('opacity-0', 'pointer-events-none'); | |
| backToTop.classList.remove('opacity-100'); | |
| } | |
| }); | |
| backToTop.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Active navigation highlighting | |
| function updateActiveNav() { | |
| const sections = document.querySelectorAll('section[id]'); | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| let currentSection = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (window.pageYOffset >= sectionTop - 200) { | |
| currentSection = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('bg-primary', 'text-white', 'border-l-4', 'border-accent'); | |
| const href = link.getAttribute('href').substring(1); | |
| if (href === currentSection) { | |
| link.classList.add('bg-primary', 'text-white', 'border-l-4', 'border-accent'); | |
| } | |
| }); | |
| } | |
| // Update on scroll | |
| window.addEventListener('scroll', updateActiveNav); | |
| // Update on load | |
| window.addEventListener('load', updateActiveNav); | |
| // Generate command template | |
| function generateCommandGroup(number, title, withConfigCmd, withoutConfigCmd, sectionId = '') { | |
| const commandId = sectionId ? `${sectionId}-${number}` : ''; | |
| return ` | |
| <div id="${commandId}" class="command-group bg-secondary border border-slate-700 rounded-xl overflow-hidden hover:border-accent transition-all scroll-mt-48"> | |
| <div class="p-5 border-b border-slate-700"> | |
| <h3 class="text-lg font-semibold text-white">${number}. ${title}</h3> | |
| </div> | |
| <div class="p-5 space-y-4"> | |
| <div class="command-box bg-primary border border-slate-700 rounded-lg overflow-hidden hover:border-accent transition-all"> | |
| <div class="flex items-center justify-between p-3 bg-gradient-to-r from-accent/10 to-transparent border-b border-slate-700"> | |
| <span class="text-xs font-semibold text-accent uppercase tracking-wider">With Config File</span> | |
| <button onclick="copyToClipboard(this)" class="copy-btn px-3 py-1.5 bg-accent hover:bg-accent-dark text-white text-xs font-medium rounded transition-all"> | |
| Copy | |
| </button> | |
| </div> | |
| <pre class="p-4 text-sm text-slate-300 overflow-x-auto">${withConfigCmd}</pre> | |
| </div> | |
| <div class="command-box bg-primary border border-slate-700 rounded-lg overflow-hidden hover:border-orange-500 transition-all"> | |
| <div class="flex items-center justify-between p-3 bg-gradient-to-r from-orange-500/10 to-transparent border-b border-slate-700"> | |
| <span class="text-xs font-semibold text-orange-500 uppercase tracking-wider">Without Config File</span> | |
| <button onclick="copyToClipboard(this)" class="copy-btn px-3 py-1.5 bg-orange-500 hover:bg-orange-600 text-white text-xs font-medium rounded transition-all"> | |
| Copy | |
| </button> | |
| </div> | |
| <pre class="p-4 text-sm text-slate-300 overflow-x-auto">${withoutConfigCmd}</pre> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Command data | |
| const commands = { | |
| channels: [ | |
| {title: 'Thumbnails + Descriptions (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --skip-download --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Thumbs/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Metadata JSON (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-info-json "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-info-json --skip-download --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Thumbs/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --skip-download --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Thumbs/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON + Subtitles (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --write-subs --write-auto-subs --sub-langs "en" "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --write-subs --write-auto-subs --sub-langs "en" --skip-download --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Thumbs/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON + Audio (Best) (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --extract-audio --audio-format best --playlist-end 100 "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --extract-audio --audio-format best --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Audio/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON + Audio (MP3) (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --extract-audio --audio-format mp3 --playlist-end 100 "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --extract-audio --audio-format mp3 --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Audio/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON + Audio (M4A) (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --extract-audio --audio-format m4a --playlist-end 100 "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --extract-audio --audio-format m4a --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Audio/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON + Audio (WebM) (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --extract-audio --audio-format webm --playlist-end 100 "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --extract-audio --audio-format webm --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Audio/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON + Audio (WAV) (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --extract-audio --audio-format wav --playlist-end 100 "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --extract-audio --audio-format wav --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Audio/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON + Video (Best) (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --format "best" --playlist-end 100 "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --format "best" --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Videos/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON + Video (1080p) (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --format "best[height<=1080]" --playlist-end 100 "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --format "best[height<=1080]" --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Videos/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON + Video (720p) (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --format "best[height<=720]" --playlist-end 100 "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --format "best[height<=720]" --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Videos/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, | |
| {title: 'Thumbnails + Descriptions + Metadata JSON + Video (480p) (100 most recent)', | |
| withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --format "best[height<=480]" --playlist-end 100 "https://www.youtube.com/@ChannelName"', | |
| withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --format "best[height<=480]" --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Videos/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'} | |
| ] | |
| }; | |
| // Categorize commands | |
| function categorizeCommands(commands, sectionId) { | |
| const metadata = []; | |
| const audio = []; | |
| const video = []; | |
| const utility = []; | |
| const dates = []; | |
| commands.forEach((cmd, index) => { | |
| const title = cmd.title.toLowerCase(); | |
| const num = index + 1; | |
| const link = `<a href="#${sectionId}-${num}" class="block text-sm text-gray-custom hover:text-white transition-colors">${num}. ${cmd.title}</a>`; | |
| if (title.includes('audio')) { | |
| audio.push(link); | |
| } else if (title.includes('video') || title.includes('1080p') || title.includes('720p') || title.includes('480p')) { | |
| video.push(link); | |
| } else if (title.includes('date') || title.includes('before') || title.includes('after')) { | |
| dates.push(link); | |
| } else if (title.includes('csv') || title.includes('list')) { | |
| utility.push(link); | |
| } else { | |
| metadata.push(link); | |
| } | |
| }); | |
| return { metadata, audio, video, utility, dates }; | |
| } | |
| // Generate section template | |
| function generateSection(sectionId, title, commands) { | |
| const categories = categorizeCommands(commands, sectionId); | |
| let tocHtml = ` | |
| <div id="${sectionId}-toc" class="hidden mt-4 pt-4 border-t border-slate-700"> | |
| <div class="grid grid-cols-1 md:grid-cols-${categories.dates.length > 0 ? '4' : '3'} gap-4"> | |
| `; | |
| // Metadata & Info | |
| if (categories.metadata.length > 0) { | |
| tocHtml += ` | |
| <div> | |
| <h4 class="text-xs font-semibold text-accent uppercase tracking-wider mb-2">Metadata & Info</h4> | |
| <div class="space-y-1"> | |
| ${categories.metadata.join('')} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Audio | |
| if (categories.audio.length > 0) { | |
| tocHtml += ` | |
| <div> | |
| <h4 class="text-xs font-semibold text-orange-500 uppercase tracking-wider mb-2">Audio Downloads</h4> | |
| <div class="space-y-1"> | |
| ${categories.audio.join('')} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Video | |
| if (categories.video.length > 0) { | |
| tocHtml += ` | |
| <div> | |
| <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-2">Video Downloads</h4> | |
| <div class="space-y-1"> | |
| ${categories.video.join('')} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Date Filters | |
| if (categories.dates.length > 0) { | |
| tocHtml += ` | |
| <div> | |
| <h4 class="text-xs font-semibold text-purple-400 uppercase tracking-wider mb-2">Date Filters</h4> | |
| <div class="space-y-1"> | |
| ${categories.dates.join('')} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Utility | |
| if (categories.utility.length > 0) { | |
| tocHtml += ` | |
| <div> | |
| <h4 class="text-xs font-semibold text-yellow-400 uppercase tracking-wider mb-2">Utility</h4> | |
| <div class="space-y-1"> | |
| ${categories.utility.join('')} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| tocHtml += ` | |
| </div> | |
| </div> | |
| `; | |
| let html = ` | |
| <section id="${sectionId}" class="scroll-mt-40"> | |
| <div class="sticky top-[104px] z-20 py-4 bg-gradient-to-r from-slate-800 to-slate-900 backdrop-blur-sm bg-opacity-95 -mx-6 px-6 border-b border-slate-700"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="h-10 w-1 bg-accent rounded-full mr-4"></div> | |
| <h2 class="text-2xl font-bold text-white">${title}</h2> | |
| </div> | |
| <button onclick="toggleTOC('${sectionId}')" class="flex items-center gap-2 text-gray-custom hover:text-white transition-colors text-sm"> | |
| <span>Quick Jump</span> | |
| <svg id="${sectionId}-arrow" class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> | |
| </svg> | |
| </button> | |
| </div> | |
| ${tocHtml} | |
| </div> | |
| <div class="space-y-6"> | |
| `; | |
| commands.forEach((cmd, index) => { | |
| html += generateCommandGroup(index + 1, cmd.title, cmd.withConfig, cmd.withoutConfig, sectionId); | |
| }); | |
| html += ` | |
| </div> | |
| </section> | |
| `; | |
| return html; | |
| } | |
| // Load additional commands | |
| document.addEventListener('DOMContentLoaded', () => { | |
| setTimeout(() => { | |
| const channelsSection = document.querySelector('#channels .space-y-6'); | |
| commands.channels.forEach((cmd, index) => { | |
| channelsSection.insertAdjacentHTML('beforeend', generateCommandGroup(index + 2, cmd.title, cmd.withConfig, cmd.withoutConfig, 'channels')); | |
| }); | |
| // Load other sections if available | |
| if (typeof allCommands !== 'undefined') { | |
| const contentArea = document.querySelector('main .max-w-6xl'); | |
| const loadingIndicator = document.getElementById('loading'); | |
| // Insert sections before the loading indicator | |
| loadingIndicator.insertAdjacentHTML('beforebegin', generateSection('playlists', 'Playlists', allCommands.playlists)); | |
| loadingIndicator.insertAdjacentHTML('beforebegin', generateSection('videos', 'Videos', allCommands.videos)); | |
| loadingIndicator.insertAdjacentHTML('beforebegin', generateSection('shorts', 'Shorts', allCommands.shorts)); | |
| loadingIndicator.insertAdjacentHTML('beforebegin', generateSection('lives', 'Lives', allCommands.lives)); | |
| loadingIndicator.insertAdjacentHTML('beforebegin', generateSection('utility', 'Utility', allCommands.utility)); | |
| } | |
| // Hide loading indicator | |
| document.getElementById('loading').style.display = 'none'; | |
| }, 100); | |
| }); | |
| </script> | |
| </body> | |
| </html> |