Spaces:

bibbler
/

undefined

Running

undefined / index.html

improve and enhance this wiki page dramatically using professional best practices and ui/ux principles for best ultimate user experience.

a34596e verified 7 months ago

raw

history blame contribute delete

56.8 kB

	<!DOCTYPE html>
	<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>