Spaces:

Opera8
/

Yd

Running

App Files Files Community

Opera8 commited on 15 days ago

Commit

52fdf92

verified ·

1 Parent(s): 88f6654

Update index.html

Browse files

Files changed (1) hide show

index.html +138 -82

index.html CHANGED Viewed

@@ -3,119 +3,175 @@
 <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: white; }
-        .loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; display: none; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
-<body class="flex items-center justify-center min-h-screen">
-    <div class="bg-slate-800 p-8 rounded-2xl shadow-2xl w-full max-w-md border border-slate-700">
-        <h1 class="text-3xl font-bold text-center mb-6 text-blue-400">دانلودر یوتیوب</h1>
-        <div class="space-y-4">
-            <div>
-                <label class="block text-sm mb-2 text-slate-400">لینک ویدیو یوتیوب را وارد کنید:</label>
-                <input type="text" id="youtubeUrl" placeholder="https://youtube.com/watch?v=..."
-                    class="w-full p-3 rounded-lg bg-slate-900 border border-slate-600 focus:ring-2 focus:ring-blue-500 outline-none text-left" dir="ltr">
-            </div>
-            <div class="flex gap-2">
-                <button onclick="download('mp4')" id="btnMp4" class="flex-1 bg-blue-600 hover:bg-blue-700 p-3 rounded-lg font-bold transition-all flex justify-center items-center gap-2">
-                    <span>دانلود ویدیویی (MP4)</span>
-                </button>
-                <button onclick="download('mp3')" id="btnMp3" class="flex-1 bg-green-600 hover:bg-green-700 p-3 rounded-lg font-bold transition-all flex justify-center items-center gap-2">
-                    <span>دانلود صوتی (MP3)</span>
-                </button>
             </div>
-            <div id="status" class="hidden mt-4 p-4 rounded-lg text-center text-sm"></div>
-            <div id="loadingBox" class="hidden flex flex-col items-center mt-4">
-                <div class="loader mb-2"></div>
-                <p class="text-blue-400 animate-pulse">در حال پردازش و دریافت از یوتیوب...</p>
             </div>
         </div>
-        <div class="mt-8 text-xs text-slate-500 text-center">
-            <p>نکته: این سیستم به API خارجی متصل است.</p>
-            <p>اگر خطا دریافت کردید، احتمالا محدودیت CORS وجود دارد.</p>
         </div>
     </div>
     <script>
-        async function download(type) {
-            const urlInput = document.getElementById('youtubeUrl').value;
-            const statusDiv = document.getElementById('status');
-            const loadingBox = document.getElementById('loadingBox');
-            const btnMp3 = document.getElementById('btnMp3');
-            const btnMp4 = document.getElementById('btnMp4');
-            if (!urlInput) {
-                showStatus("لطفا لینک یوتیوب را وارد کنید!", "bg-red-900/50 text-red-300");
-                return;
-            }
-            // تعیین مسیر API بر اساس انتخاب کاربر
-            // آدرس پایه که شما دادید
-            const apiBase = "https://maliksahib1-yt-downloader-api.hf.space";
-            let endpoint = "";
-            if (type === 'mp3') {
-                endpoint = `${apiBase}/AnotherAPI/new_downloader/YT/mp3/?youtube_url=${encodeURIComponent(urlInput)}`;
-            } else {
-                endpoint = `${apiBase}/AnotherAPI/downloader/YT/mp4/?youtube_url=${encodeURIComponent(urlInput)}`;
             }
-            // ظاهر رابط کاربری در حال لودینگ
-            loadingBox.classList.remove('hidden');
-            statusDiv.classList.add('hidden');
-            btnMp3.disabled = true;
-            btnMp4.disabled = true;
             try {
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: { 'Accept': 'application/json' }
-                });
-                if (!response.ok) {
-                    throw new Error("خطا در پاسخ سرور (ممکن است لینک اشتباه باشد یا سرور محدود شده باشد)");
                 }
-                // دریافت فایل به صورت Blob
-                const blob = await response.blob();
-                const url = window.URL.createObjectURL(blob);
-                // ایجاد لینک دانلود اتوماتیک
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = type === 'mp3' ? "audio.mp3" : "video.mp4";
-                document.body.appendChild(a);
-                a.click();
-                window.URL.revokeObjectURL(url);
-                showStatus("دانلود با موفقیت آغاز شد!", "bg-green-900/50 text-green-300");
             } catch (error) {
-                console.error(error);
-                showStatus("خطا: " + error.message, "bg-red-900/50 text-red-300");
             } finally {
-                loadingBox.classList.add('hidden');
-                btnMp3.disabled = false;
-                btnMp4.disabled = false;
             }
         }
-        function showStatus(msg, classes) {
-            const statusDiv = document.getElementById('status');
-            statusDiv.innerText = msg;
-            statusDiv.className = "mt-4 p-4 rounded-lg text-center text-sm " + classes;
-            statusDiv.classList.remove('hidden');
         }
     </script>
 </body>

 <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>