Spaces:
Running
Running
| <html lang="ar" 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> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Cairo', 'sans-serif'], | |
| mono: ['Space Grotesk', 'monospace'], | |
| }, | |
| colors: { | |
| brand: { | |
| dark: '#0f172a', | |
| accent: '#38bdf8', | |
| secondary: '#818cf8', | |
| surface: '#1e293b' | |
| } | |
| }, | |
| animation: { | |
| 'blob': 'blob 7s infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'slide-up': 'slideUp 0.5s ease-out forwards', | |
| }, | |
| keyframes: { | |
| blob: { | |
| '0%': { transform: 'translate(0px, 0px) scale(1)' }, | |
| '33%': { transform: 'translate(30px, -50px) scale(1.1)' }, | |
| '66%': { transform: 'translate(-20px, 20px) scale(0.9)' }, | |
| '100%': { transform: 'translate(0px, 0px) scale(1)' }, | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0f172a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #334155; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #475569; | |
| } | |
| /* Glassmorphism Utilities */ | |
| .glass { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .glass-card { | |
| background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9)); | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| /* Loader Animation */ | |
| .loader-ring { | |
| display: inline-block; | |
| position: relative; | |
| width: 64px; | |
| height: 64px; | |
| } | |
| .loader-ring div { | |
| box-sizing: border-box; | |
| display: block; | |
| position: absolute; | |
| width: 51px; | |
| height: 51px; | |
| margin: 6px; | |
| border: 6px solid #38bdf8; | |
| border-radius: 50%; | |
| animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; | |
| border-color: #38bdf8 transparent transparent transparent; | |
| } | |
| .loader-ring div:nth-child(1) { animation-delay: -0.45s; } | |
| .loader-ring div:nth-child(2) { animation-delay: -0.3s; } | |
| .loader-ring div:nth-child(3) { animation-delay: -0.15s; } | |
| @keyframes loader-ring { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Progress Bar Stripes */ | |
| .progress-stripes { | |
| background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); | |
| background-size: 1rem 1rem; | |
| animation: progress-bar-stripes 1s linear infinite; | |
| } | |
| @keyframes progress-bar-stripes { | |
| 0% { background-position: 1rem 0; } | |
| 100% { background-position: 0 0; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-brand-dark text-white min-h-screen overflow-x-hidden selection:bg-brand-accent selection:text-brand-dark"> | |
| <!-- Background Effects --> | |
| <div class="fixed inset-0 z-0 pointer-events-none overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-96 h-96 bg-brand-accent/20 rounded-full mix-blend-screen filter blur-3xl opacity-30 animate-blob"></div> | |
| <div class="absolute top-0 left-0 w-96 h-96 bg-brand-secondary/20 rounded-full mix-blend-screen filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div> | |
| <div class="absolute -bottom-32 left-20 w-96 h-96 bg-purple-500/20 rounded-full mix-blend-screen filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=')] opacity-20"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full z-50 glass border-b border-white/5"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-20"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-accent to-brand-secondary flex items-center justify-center shadow-lg shadow-brand-accent/20"> | |
| <i class="fa-solid fa-cloud-arrow-down text-white text-xl"></i> | |
| </div> | |
| <span class="text-2xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400">تنزيله</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4 space-x-reverse"> | |
| <a href="#" class="text-brand-accent px-3 py-2 rounded-md text-sm font-medium">الرئيسية</a> | |
| <a href="#features" class="text-gray-300 hover:text-white hover:bg-white/5 px-3 py-2 rounded-md text-sm font-medium transition-all">المميزات</a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-gray-300 hover:text-white hover:bg-white/5 px-3 py-2 rounded-md text-sm font-medium transition-all flex items-center gap-2"> | |
| <i class="fa-solid fa-code"></i> Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="text-gray-300 hover:text-white p-2"> | |
| <i class="fa-solid fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="relative z-10 pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <!-- Hero Section --> | |
| <div class="text-center mb-16 animate-slide-up"> | |
| <h1 class="text-4xl md:text-6xl font-black mb-6 leading-tight"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-brand-accent via-brand-secondary to-purple-400">أسرع طريقة</span> | |
| <br> | |
| لتحميل ملفاتك | |
| </h1> | |
| <p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto mb-10"> | |
| منصة متكاملة لإدارة التنزيلات. أدخل الرابط، اختر الجودة، ودعنا نتولى الباقي بأمان وسهولة. | |
| </p> | |
| </div> | |
| <!-- Main Application Interface --> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Input Section --> | |
| <div class="glass-card rounded-3xl p-2 mb-12 shadow-2xl shadow-brand-accent/10 transform transition-all hover:scale-[1.01]"> | |
| <div class="bg-brand-dark/50 rounded-[20px] p-6 md:p-8 border border-white/5"> | |
| <div class="flex flex-col gap-4"> | |
| <label class="text-right text-slate-300 font-medium mb-1">أدخل رابط الملف أو الفيديو</label> | |
| <div class="relative group"> | |
| <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none"> | |
| <i class="fa-solid fa-link text-slate-500 group-focus-within:text-brand-accent transition-colors"></i> | |
| </div> | |
| <input type="text" id="urlInput" | |
| class="block w-full pr-12 pl-4 py-4 bg-slate-800/50 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-brand-accent/50 focus:border-brand-accent transition-all text-lg" | |
| placeholder="https://example.com/file.zip أو رابط يوتيوب..."> | |
| <div class="absolute inset-y-0 left-0 pl-2 flex items-center"> | |
| <button onclick="pasteUrl()" class="p-2 text-slate-400 hover:text-white transition-colors" title="لصق"> | |
| <i class="fa-regular fa-paste"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex gap-3 mt-2"> | |
| <button onclick="startAnalysis()" id="analyzeBtn" class="flex-1 bg-gradient-to-r from-brand-accent to-brand-secondary hover:from-brand-accent/90 hover:to-brand-secondary/90 text-white font-bold py-4 px-6 rounded-xl shadow-lg shadow-brand-accent/25 transition-all transform hover:-translate-y-1 active:scale-95 flex items-center justify-center gap-2 text-lg"> | |
| <i class="fa-solid fa-magnifying-glass-chart"></i> | |
| <span>تحليل الرابط</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading State (Hidden by default) --> | |
| <div id="loadingState" class="hidden flex-col items-center justify-center py-12"> | |
| <div class="loader-ring mb-6"><div></div><div></div><div></div><div></div></div> | |
| <h3 class="text-xl font-bold text-white mb-2">جاري تحليل المصدر...</h3> | |
| <p class="text-slate-400">نستخرج روابط التنزيل المتاحة</p> | |
| </div> | |
| <!-- Results Section (Hidden by default) --> | |
| <div id="resultsSection" class="hidden animate-slide-up"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold text-white">نتائج التحليل</h2> | |
| <span class="px-3 py-1 rounded-full bg-green-500/20 text-green-400 text-sm border border-green-500/30"> | |
| <i class="fa-solid fa-check ml-1"></i> تم العثور على المصدر | |
| </span> | |
| </div> | |
| <!-- Media Preview Card --> | |
| <div class="glass-card rounded-2xl p-6 mb-8 border-l-4 border-brand-accent"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="w-full md:w-48 h-32 bg-slate-800 rounded-xl overflow-hidden relative group flex-shrink-0"> | |
| <img id="previewThumb" src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?q=80&w=300&auto=format&fit=crop" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity group-hover:scale-110 duration-500" alt="Preview"> | |
| <div class="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/10 transition-colors"> | |
| <i class="fa-solid fa-play text-white text-3xl drop-shadow-lg opacity-80 group-hover:opacity-100 group-hover:scale-110 transition-all"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 flex flex-col justify-center"> | |
| <h3 id="mediaTitle" class="text-xl font-bold text-white mb-2 line-clamp-1">عنوان الفيديو أو الملف هنا</h3> | |
| <div class="flex flex-wrap gap-3 text-sm text-slate-400 mb-4"> | |
| <span class="flex items-center gap-1"><i class="fa-regular fa-clock"></i> <span id="mediaDuration">12:45</span></span> | |
| <span class="flex items-center gap-1"><i class="fa-solid fa-database"></i> <span id="mediaSize">45 MB</span></span> | |
| <span class="flex items-center gap-1"><i class="fa-solid fa-film"></i> MP4</span> | |
| </div> | |
| <div class="flex gap-2"> | |
| <span class="px-2 py-1 rounded bg-slate-700/50 text-xs text-slate-300">#تحميل</span> | |
| <span class="px-2 py-1 rounded bg-slate-700/50 text-xs text-slate-300">#فيديو</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Download Options Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8" id="downloadOptions"> | |
| <!-- Options will be injected via JS --> | |
| </div> | |
| </div> | |
| <!-- Active Downloads Section --> | |
| <div id="activeDownloads" class="hidden mt-12"> | |
| <h2 class="text-xl font-bold text-white mb-6 flex items-center gap-2"> | |
| <i class="fa-solid fa-download text-brand-accent"></i> التنزيلات النشطة | |
| </h2> | |
| <div class="space-y-4" id="downloadsList"> | |
| <!-- Active download items injected here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Grid --> | |
| <div id="features" class="mt-32 grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="glass p-8 rounded-2xl hover:bg-white/5 transition-colors group"> | |
| <div class="w-14 h-14 rounded-2xl bg-blue-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <i class="fa-solid fa-bolt text-2xl text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">سرعة فائقة</h3> | |
| <p class="text-slate-400 leading-relaxed">استخدم خوادمنا الموزعة عالمياً للحصول على أقصى سرعة تنزيل ممكنة دون تقطيع.</p> | |
| </div> | |
| <div class="glass p-8 rounded-2xl hover:bg-white/5 transition-colors group"> | |
| <div class="w-14 h-14 rounded-2xl bg-purple-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <i class="fa-solid fa-shield-halved text-2xl text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">أمان تام</h3> | |
| <p class="text-slate-400 leading-relaxed">جميع الاتصالات مشفرة ببروتوكول HTTPS. لا نحتفظ بسجلات لنشاطك على المنصة.</p> | |
| </div> | |
| <div class="glass p-8 rounded-2xl hover:bg-white/5 transition-colors group"> | |
| <div class="w-14 h-14 rounded-2xl bg-pink-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <i class="fa-solid fa-mobile-screen text-2xl text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">متجاوب بالكامل</h3> | |
| <p class="text-slate-400 leading-relaxed">تصميم يعمل بكفاءة على جميع الأجهزة من الهواتف المحمولة إلى شاشات الكمبيوتر.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="border-t border-white/5 bg-brand-dark/80 backdrop-blur-lg mt-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-center gap-6"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-accent to-brand-secondary flex items-center justify-center"> | |
| <i class="fa-solid fa-cloud-arrow-down text-white text-sm"></i> | |
| </div> | |
| <span class="text-lg font-bold text-white">تنزيله</span> | |
| </div> | |
| <div class="text-slate-500 text-sm"> | |
| © 2023 تنزيله. جميع الحقوق محفوظة. | |
| </div> | |
| <div class="flex gap-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-brand-accent hover:text-white transition-all"> | |
| <i class="fa-brands fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-brand-accent hover:text-white transition-all"> | |
| <i class="fa-brands fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // --- Mock Data & Logic --- | |
| const mockData = { | |
| title: "تصميم واجهات المستخدم الحديثة - دورة كاملة", | |
| duration: "2:15:00", | |
| size: "1.2 GB", | |
| thumbnail: "https://images.unsplash.com/photo-1587440871875-191322ee64b0?q=80&w=600&auto=format&fit=crop", | |
| formats: [ | |
| { quality: "1080p (FHD)", ext: "MP4", size: "1.2 GB", type: "video" }, | |
| { quality: "720p (HD)", ext: "MP4", size: "850 MB", type: "video" }, | |
| { quality: "480p", ext: "MP4", size: "450 MB", type: "video" }, | |
| { quality: "Audio Only", ext: "MP3", size: "120 MB", type: "audio" } | |
| ] | |
| }; | |
| // --- UI Functions --- | |
| function pasteUrl() { | |
| navigator.clipboard.readText().then(text => { | |
| document.getElementById('urlInput').value = text; | |
| }).catch(err => { | |
| console.error('Failed to read clipboard contents: ', err); | |
| }); | |
| } | |
| function startAnalysis() { | |
| const input = document.getElementById('urlInput').value; | |
| if (!input) { | |
| // Shake animation for error | |
| const inputEl = document.getElementById('urlInput'); | |
| inputEl.classList.add('ring-2', 'ring-red-500', 'animate-pulse'); | |
| setTimeout(() => inputEl.classList.remove('ring-2', 'ring-red-500', 'animate-pulse'), 1000); | |
| return; | |
| } | |
| // UI State: Loading | |
| document.getElementById('resultsSection').classList.add('hidden'); | |
| document.getElementById('loadingState').classList.remove('hidden'); | |
| document.getElementById('loadingState').classList.add('flex'); | |
| document.getElementById('analyzeBtn').disabled = true; | |
| document.getElementById('analyzeBtn').innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> جاري المعالجة...'; | |
| // Simulate Network Request | |
| setTimeout(() => { | |
| showResults(); | |
| }, 2000); | |
| } | |
| function showResults() { | |
| // Hide Loading | |
| document.getElementById('loadingState').classList.add('hidden'); | |
| document.getElementById('loadingState').classList.remove('flex'); | |
| // Reset Button | |
| const btn = document.getElementById('analyzeBtn'); | |
| btn.disabled = false; | |
| btn.innerHTML = '<i class="fa-solid fa-magnifying-glass-chart"></i> <span>تحليل الرابط</span>'; | |
| // Populate Data | |
| document.getElementById('mediaTitle').textContent = mockData.title; | |
| document.getElementById('mediaDuration').textContent = mockData.duration; | |
| document.getElementById('mediaSize').textContent = mockData.size; | |
| document.getElementById('previewThumb').src = mockData.thumbnail; | |
| // Generate Options | |
| const optionsContainer = document.getElementById('downloadOptions'); | |
| optionsContainer.innerHTML = ''; // Clear previous | |
| mockData.formats.forEach((format, index) => { | |
| const isAudio = format.type === 'audio'; | |
| const card = document.createElement('div'); | |
| card.className = `glass p-5 rounded-xl flex items-center justify-between border border-white/5 hover:border-brand-accent/50 transition-all group`; | |
| card.innerHTML = ` | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded-lg ${isAudio ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'} flex items-center justify-center text-xl"> | |
| <i class="fa-solid ${isAudio ? 'fa-music' : 'fa-video'}"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">${format.quality}</h4> | |
| <div class="text-xs text-slate-400 flex gap-2 mt-1"> | |
| <span class="bg-slate-700/50 px-1.5 rounded">${format.ext}</span> | |
| <span>${format.size}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="startDownload('${format.quality}', '${format.size}', '${format.type}')" class="bg-slate-700 hover:bg-brand-accent hover:text-brand-dark text-white w-10 h-10 rounded-full flex items-center justify-center transition-all transform hover:scale-110 active:scale-95"> | |
| <i class="fa-solid fa-download"></i> | |
| </button> | |
| `; | |
| optionsContainer.appendChild(card); | |
| }); | |
| // Show Results | |
| document.getElementById('resultsSection').classList.remove('hidden'); | |
| } | |
| function startDownload(quality, size, type) { | |
| const list = document.getElementById('downloadsList'); | |
| const id = Date.now(); | |
| // Create Download Item | |
| const item = document.createElement('div'); | |
| item.id = `dl-${id}`; | |
| item.className = 'glass p-4 rounded-xl border border-white/5 animate-slide-up'; | |
| item.innerHTML = ` | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded bg-slate-700 flex items-center justify-center text-xs text-brand-accent font-bold"> | |
| ${type === 'audio' ? 'MP3' : 'MP4'} | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-bold text-white">${mockData.title}</h4> | |
| <p class="text-xs text-slate-400">${quality} • ${size}</p> | |
| </div> | |
| </div> | |
| <div class="text-xs font-mono text-brand-accent status-text">0%</div> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-2 overflow-hidden"> | |
| <div class="progress-bar bg-brand-accent h-2 rounded-full w-0 transition-all duration-300 relative overflow-hidden"> | |
| <div class="absolute inset-0 progress-stripes opacity-30"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-2"> | |
| <button onclick="cancelDownload('${id}')" class="text-xs text-red-400 hover:text-red-300 flex items-center gap-1"> | |
| <i class="fa-solid fa-xmark"></i> إلغاء | |
| </button> | |
| </div> | |
| `; | |
| // Show Active Downloads Section if hidden | |
| const activeSection = document.getElementById('activeDownloads'); | |
| if (activeSection.classList.contains('hidden')) { | |
| activeSection.classList.remove('hidden'); | |
| } | |
| list.prepend(item); | |
| // Simulate Progress | |
| let progress = 0; | |
| const bar = item.querySelector('.progress-bar'); | |
| const status = item.querySelector('.status-text'); | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 5; | |
| if (progress > 100) progress = 100; | |
| bar.style.width = `${progress}%`; | |
| status.textContent = `${Math.floor(progress)}%`; | |
| if (progress === 100) { | |
| clearInterval(interval); | |
| status.textContent = "تم!"; | |
| status.classList.remove('text-brand-accent'); | |
| status.classList.add('text-green-400'); | |
| bar.classList.remove('bg-brand-accent'); | |
| bar.classList.add('bg-green-500'); | |
| // Change cancel button to open folder | |
| const btnContainer = item.querySelector('.flex.justify-end'); | |
| btnContainer.innerHTML = ` | |
| <button class="text-xs text-brand-accent hover:text-brand-accent/80 flex items-center gap-1"> | |
| <i class="fa-solid fa-folder-open"></i> فتح الملف | |
| </button> | |
| `; | |
| } | |
| }, 200); | |
| } | |
| function cancelDownload(id) { | |
| const item = document.getElementById(`dl-${id}`); | |
| if (item) { | |
| item.style.opacity = '0'; | |
| item.style.transform = 'translateX(20px)'; | |
| setTimeout(() => item.remove(), 300); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |