<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Video Info Fetcher</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="bg-white shadow-xl rounded-2xl p-8 w-full max-w-lg">
<h1 class="text-2xl font-bold text-gray-800 mb-4">🎬 Video Info Fetcher</h1>
<p class="text-gray-500 mb-6">Paste a YouTube/Shorts link to get details.</p>
<form method="post" class="space-y-4">
<input
type="url"
name="url"
placeholder="https://youtube.com/watch?v=xxxx"
required
class="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 focus:outline-none"
>
<button
type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-xl shadow-md transition"
>
Fetch Video Info
</button>
</form>
</div>
</body>
</html>