File size: 8,197 Bytes
88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 52fdf92 88f6654 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 | <!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>
<!-- استفاده از Tailwind CSS برای ظاهر مدرن -->
<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>
// آدرس API که شما پیدا کردید
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 {
// مرحله 1: فراخوانی Info API
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;
// ساخت دکمه‌های دانلود بر اساس فرمت‌های API
const optionsContainer = document.getElementById('downloadOptions');
optionsContainer.innerHTML = ''; // پاک کردن دکمه‌های قبلی
// اضافه کردن کیفیت‌های ویدیو (360p و 720p)
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> |