| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>یوتیوب دانلودر اختصاصی</title> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700&display=swap'); |
| |
| body { |
| font-family: 'Vazirmatn', sans-serif; |
| background-color: #0f172a; |
| color: #f8fafc; |
| } |
| |
| .glass-card { |
| background: rgba(30, 41, 59, 0.7); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .loader { |
| border: 3px solid rgba(255, 255, 255, 0.1); |
| border-top: 3px solid #ef4444; |
| border-radius: 50%; |
| width: 24px; |
| height: 24px; |
| animation: spin 1s linear infinite; |
| display: inline-block; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4"> |
|
|
| <div class="glass-card w-full max-w-xl p-8 rounded-3xl shadow-2xl"> |
| |
| <div class="text-center mb-8"> |
| <h1 class="text-3xl font-extrabold text-red-500 mb-2">YouTube Grabber</h1> |
| <p class="text-slate-400 text-sm">متصل به API اختصاصی Akashh89</p> |
| </div> |
|
|
| |
| <div class="space-y-4"> |
| <div class="relative"> |
| <input type="text" id="videoUrl" |
| class="w-full bg-slate-900 border border-slate-700 p-4 pr-4 rounded-2xl outline-none focus:ring-2 focus:ring-red-500 transition-all text-left" |
| placeholder="https://www.youtube.com/watch?v=..." dir="ltr"> |
| </div> |
| |
| <button onclick="fetchVideoInfo()" id="btnFetch" |
| class="w-full bg-red-600 hover:bg-red-700 py-4 rounded-2xl font-bold text-lg transition-all transform active:scale-95 flex justify-center items-center gap-2"> |
| <span id="btnText">دریافت اطلاعات ویدیو</span> |
| <div id="btnLoader" class="loader hidden"></div> |
| </button> |
| </div> |
|
|
| |
| <div id="videoCard" class="hidden mt-8 border-t border-slate-700 pt-6"> |
| <div class="flex flex-col sm:flex-row gap-4"> |
| <img id="thumbnail" src="" alt="Thumbnail" class="w-full sm:w-48 rounded-xl shadow-lg object-cover"> |
| <div class="flex-1"> |
| <h2 id="videoTitle" class="text-lg font-bold mb-4 leading-tight"></h2> |
| |
| <div class="grid grid-cols-1 gap-2"> |
| |
| <div id="downloadOptions" class="space-y-2"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="statusMessage" class="hidden mt-4 p-3 rounded-xl text-center text-sm"></div> |
|
|
| <div class="mt-8 text-center text-xs text-slate-500 italic"> |
| توجه: این پنل فقط با لینک مستقیم کار می‌کند و قابلیت جستجو ندارد. |
| </div> |
| </div> |
|
|
| <script> |
| |
| const API_BASE = "https://akashh89-ytgrab-new.hf.space"; |
| |
| async function fetchVideoInfo() { |
| const url = document.getElementById('videoUrl').value; |
| const btnText = document.getElementById('btnText'); |
| const btnLoader = document.getElementById('btnLoader'); |
| const videoCard = document.getElementById('videoCard'); |
| const statusMessage = document.getElementById('statusMessage'); |
| |
| if (!url) { |
| showMessage("لطفاً ابتدا لینک ویدیو را وارد کنید", "bg-yellow-900/50 text-yellow-200"); |
| return; |
| } |
| |
| |
| statusMessage.classList.add('hidden'); |
| videoCard.classList.add('hidden'); |
| btnText.innerText = "در حال ارتباط با سرور..."; |
| btnLoader.classList.remove('hidden'); |
| |
| try { |
| |
| const response = await fetch(`${API_BASE}/info?url=${encodeURIComponent(url)}`); |
| const data = await response.json(); |
| |
| if (data.error) { |
| throw new Error(data.error); |
| } |
| |
| |
| document.getElementById('thumbnail').src = data.thumbnail; |
| document.getElementById('videoTitle').innerText = data.title; |
| |
| |
| const optionsContainer = document.getElementById('downloadOptions'); |
| optionsContainer.innerHTML = ''; |
| |
| |
| data.video_formats.forEach(fmt => { |
| createDownloadBtn(optionsContainer, url, fmt.format_id, `دانلود ویدیو (${fmt.quality})`, 'bg-blue-600'); |
| }); |
| |
| |
| data.audio_formats.forEach(fmt => { |
| createDownloadBtn(optionsContainer, url, fmt.format_id, `دانلود صوتی (MP3 - ${fmt.quality}kbps)`, 'bg-green-600'); |
| }); |
| |
| videoCard.classList.remove('hidden'); |
| showMessage("اطلاعات با موفقیت دریافت شد", "bg-green-900/50 text-green-200"); |
| |
| } catch (error) { |
| showMessage("خطا: " + error.message, "bg-red-900/50 text-red-200"); |
| } finally { |
| btnText.innerText = "دریافت اطلاعات ویدیو"; |
| btnLoader.classList.add('hidden'); |
| } |
| } |
| |
| function createDownloadBtn(container, url, formatId, text, colorClass) { |
| const btn = document.createElement('button'); |
| btn.className = `w-full ${colorClass} hover:opacity-90 py-2 px-4 rounded-lg font-bold text-sm transition-all mb-2 flex justify-between items-center`; |
| |
| |
| const downloadUrl = `${API_BASE}/download?url=${encodeURIComponent(url)}&format_id=${formatId}`; |
| |
| btn.innerHTML = ` |
| <span>${text}</span> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> |
| </svg> |
| `; |
| |
| btn.onclick = () => { |
| |
| window.open(downloadUrl, '_blank'); |
| showMessage("درخواست دانلود به سرور فرستاده شد. لطفا صبر کنید...", "bg-blue-900/50 text-blue-200"); |
| }; |
| |
| container.appendChild(btn); |
| } |
| |
| function showMessage(text, classes) { |
| const statusMessage = document.getElementById('statusMessage'); |
| statusMessage.innerText = text; |
| statusMessage.className = `mt-4 p-3 rounded-xl text-center text-sm ${classes}`; |
| statusMessage.classList.remove('hidden'); |
| } |
| </script> |
| </body> |
| </html> |
