4b8c2c0453
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 3m7s
92 lines
4.7 KiB
HTML
92 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Media Hub</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
dark: '#121212',
|
|
darker: '#0a0a0a',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body { background-color: #121212; color: #ffffff; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen bg-dark text-white font-sans p-8">
|
|
<header class="mb-12 border-b border-gray-800 pb-4">
|
|
<h1 class="text-3xl font-bold tracking-tight">AI Media Hub</h1>
|
|
<p class="text-gray-400 mt-2">Discover, Ingest, and Download Media</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- Zone A: Discovery -->
|
|
<section class="bg-darker p-6 rounded-xl border border-gray-800">
|
|
<h2 class="text-xl font-semibold mb-4">Zone A: AI Discovery</h2>
|
|
<div class="flex gap-2 mb-4">
|
|
<input type="text" placeholder="Search parameters..." class="flex-1 bg-dark border border-gray-700 rounded px-3 py-2 focus:outline-none focus:border-white transition-colors">
|
|
<button class="bg-white text-black px-4 py-2 rounded font-medium hover:bg-gray-200 transition-colors">Search</button>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 auto-rows-[100px]">
|
|
<!-- Mock Thumbnails -->
|
|
<div class="bg-gray-800 rounded animate-pulse cursor-pointer hover:opacity-80 transition-opacity"></div>
|
|
<div class="bg-gray-800 rounded animate-pulse cursor-pointer hover:opacity-80 transition-opacity"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Zone B: Ingest -->
|
|
<section class="bg-darker p-6 rounded-xl border border-gray-800">
|
|
<h2 class="text-xl font-semibold mb-4">Zone B: Smart Ingest</h2>
|
|
<div class="border-2 border-dashed border-gray-700 rounded-xl h-64 flex flex-col items-center justify-center text-gray-500 hover:border-gray-500 hover:text-gray-300 transition-colors cursor-pointer group">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mb-2 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
|
</svg>
|
|
<span>Drag & Drop files here</span>
|
|
<span class="text-sm mt-1">or click to browse</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Zone C: Download -->
|
|
<section class="bg-darker p-6 rounded-xl border border-gray-800 flex flex-col">
|
|
<h2 class="text-xl font-semibold mb-4">Zone C: Direct Download</h2>
|
|
<div class="flex-1">
|
|
<label class="block text-sm text-gray-400 mb-2">Media URL</label>
|
|
<input type="text" placeholder="https://youtube.com/..." class="w-full bg-dark border border-gray-700 rounded px-3 py-2 mb-4 focus:outline-none focus:border-white transition-colors">
|
|
|
|
<label class="block text-sm text-gray-400 mb-2">Crop Settings (Optional)</label>
|
|
<div class="flex gap-2 mb-6">
|
|
<input type="text" placeholder="Start (e.g. 00:01:00)" class="w-1/2 bg-dark border border-gray-700 rounded px-3 py-2 focus:outline-none focus:border-white transition-colors">
|
|
<input type="text" placeholder="End (e.g. 00:02:30)" class="w-1/2 bg-dark border border-gray-700 rounded px-3 py-2 focus:outline-none focus:border-white transition-colors">
|
|
</div>
|
|
|
|
<button class="w-full bg-white text-black py-3 rounded font-medium hover:bg-gray-200 transition-transform active:scale-95">Download via yt-dlp</button>
|
|
</div>
|
|
|
|
<div class="mt-4 pt-4 border-t border-gray-800">
|
|
<div class="flex justify-between text-sm text-gray-400 mb-1">
|
|
<span>Progress</span>
|
|
<span>0%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-800 rounded-full h-2">
|
|
<div class="bg-white h-2 rounded-full" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
// Placeholder for WebSocket logic
|
|
console.log("AI Media Hub Initialized.");
|
|
</script>
|
|
</body>
|
|
</html>
|