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>YouTube Video Tracker</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#FF0000', | |
| secondary: '#282828', | |
| accent: '#FFD700' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap'); | |
| body { | |
| font-family: 'Cairo', sans-serif; | |
| background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%); | |
| min-height: 100vh; | |
| } | |
| .channel-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .channel-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(255, 0, 0, 0.2); | |
| } | |
| .video-item { | |
| transition: all 0.3s ease; | |
| border-left: 3px solid transparent; | |
| } | |
| .video-item:hover { | |
| background-color: rgba(255, 215, 0, 0.05); | |
| border-left-color: #FFD700; | |
| } | |
| .summary-modal { | |
| animation: modalFadeIn 0.4s ease-out; | |
| } | |
| @keyframes modalFadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="text-white"> | |
| <!-- Header Section --> | |
| <header class="bg-secondary py-6 shadow-lg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fab fa-youtube text-primary text-4xl mr-3"></i> | |
| <h1 class="text-3xl font-bold">YouTube Video Tracker</h1> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <input type="text" placeholder="ابحث عن قناة..." class="bg-gray-800 rounded-full py-2 px-6 pl-10 focus:outline-none focus:ring-2 focus:ring-primary w-64"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="ml-4 bg-primary hover:bg-red-700 py-2 px-6 rounded-full font-semibold transition duration-300"> | |
| <i class="fas fa-user-plus mr-2"></i>حساب | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Channels Section --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-satellite-dish text-primary mr-3"></i> | |
| القنوات التي تتابعها | |
| </h2> | |
| <button id="addChannelBtn" class="bg-primary hover:bg-red-700 py-2 px-6 rounded-full font-semibold transition duration-300 pulse"> | |
| <i class="fas fa-plus mr-2"></i>إضافة قناة | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Channel Card 1 --> | |
| <div class="channel-card bg-secondary rounded-xl overflow-hidden shadow-lg"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Tech Channel" class="w-full h-48 object-cover"> | |
| <div class="absolute top-4 right-4 bg-primary rounded-full py-1 px-3 text-sm font-bold">قناة جديدة</div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-12 h-12 rounded-full border-2 border-primary mr-3"> | |
| <div> | |
| <h3 class="font-bold text-lg">تكنولوجيا المستقبل</h3> | |
| <p class="text-gray-400 text-sm">1.2M مشترك</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">أحدث أخبار التكنولوجيا والابتكارات التقنية من حول العالم</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-accent font-bold"><i class="fas fa-video mr-1"></i> 3 فيديوهات جديدة</span> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-1 px-4 rounded-full text-sm transition duration-300"> | |
| <i class="fas fa-eye mr-1"></i>عرض الفيديوهات | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Channel Card 2 --> | |
| <div class="channel-card bg-secondary rounded-xl overflow-hidden shadow-lg"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Cooking Channel" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-12 h-12 rounded-full border-2 border-primary mr-3"> | |
| <div> | |
| <h3 class="font-bold text-lg">مطبخ أم يوسف</h3> | |
| <p class="text-gray-400 text-sm">850K مشترك</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">وصفات طبخ سهلة وسريعة ولذيذة من المطبخ العربي</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-accent font-bold"><i class="fas fa-video mr-1"></i> 2 فيديوهات جديدة</span> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-1 px-4 rounded-full text-sm transition duration-300"> | |
| <i class="fas fa-eye mr-1"></i>عرض الفيديوهات | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Channel Card 3 --> | |
| <div class="channel-card bg-secondary rounded-xl overflow-hidden shadow-lg"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Fitness Channel" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://images.unsplash.com/photo-1571019614242-cfeaca0c7c3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-12 h-12 rounded-full border-2 border-primary mr-3"> | |
| <div> | |
| <h3 class="font-bold text-lg">لياقة بدنية</h3> | |
| <p class="text-gray-400 text-sm">1.5M مشترك</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">تمارين رياضية ونصائح صحية لتحقيق أفضل لياقة بدنية</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-accent font-bold"><i class="fas fa-video mr-1"></i> 1 فيديو جديد</span> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-1 px-4 rounded-full text-sm transition duration-300"> | |
| <i class="fas fa-eye mr-1"></i>عرض الفيديوهات | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Videos Section --> | |
| <section> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-video text-primary mr-3"></i> | |
| الفيديوهات الجديدة | |
| </h2> | |
| <div class="flex items-center"> | |
| <span class="mr-3">ترتيب حسب:</span> | |
| <select class="bg-gray-800 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <option>الأحدث</option> | |
| <option>الأكثر مشاهدة</option> | |
| <option>الأعلى تقييماً</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="bg-secondary rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Video List Header --> | |
| <div class="grid grid-cols-12 gap-4 px-6 py-4 bg-gray-800 font-bold"> | |
| <div class="col-span-1">#</div> | |
| <div class="col-span-5">الفيديو</div> | |
| <div class="col-span-3">القناة</div> | |
| <div class="col-span-2">تاريخ النشر</div> | |
| <div class="col-span-1">الرابط</div> | |
| </div> | |
| <!-- Video Item 1 --> | |
| <div class="video-item grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-700"> | |
| <div class="col-span-1 flex items-center">1</div> | |
| <div class="col-span-5 flex items-center"> | |
| <div class="relative mr-4"> | |
| <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Video thumbnail" class="w-24 h-14 rounded-lg object-cover"> | |
| <div class="absolute bottom-1 right-1 bg-black bg-opacity-70 px-1 text-xs rounded">10:25</div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">أحدث تكنولوجيا الذكاء الاصطناعي في 2023</h3> | |
| <p class="text-gray-400 text-sm">25K مشاهدة • 2 ساعة</p> | |
| </div> | |
| </div> | |
| <div class="col-span-3 flex items-center"> | |
| <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-8 h-8 rounded-full mr-2"> | |
| <span>تكنولوجيا المستقبل</span> | |
| </div> | |
| <div class="col-span-2 flex items-center"> | |
| <i class="fas fa-clock text-gray-400 mr-2"></i> | |
| <span>منذ 3 ساعات</span> | |
| </div> | |
| <div class="col-span-1 flex items-center justify-center"> | |
| <button class="summary-btn bg-primary hover:bg-red-700 p-2 rounded-full transition duration-300" data-video="أحدث تكنولوجيا الذكاء الاصطناعي في 2023"> | |
| <i class="fas fa-link"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Video Item 2 --> | |
| <div class="video-item grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-700"> | |
| <div class="col-span-1 flex items-center">2</div> | |
| <div class="col-span-5 flex items-center"> | |
| <div class="relative mr-4"> | |
| <img src="https://i.ytimg.com/vi/5y_KJAg8bHI/hqdefault.jpg" alt="Video thumbnail" class="w-24 h-14 rounded-lg object-cover"> | |
| <div class="absolute bottom-1 right-1 bg-black bg-opacity-70 px-1 text-xs rounded">15:42</div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">طريقة عمل الكنافة بالقشطة خطوة بخطوة</h3> | |
| <p class="text-gray-400 text-sm">18K مشاهدة • 5 ساعات</p> | |
| </div> | |
| </div> | |
| <div class="col-span-3 flex items-center"> | |
| <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-8 h-8 rounded-full mr-2"> | |
| <span>مطبخ أم يوسف</span> | |
| </div> | |
| <div class="col-span-2 flex items-center"> | |
| <i class="fas fa-clock text-gray-400 mr-2"></i> | |
| <span>منذ 6 ساعات</span> | |
| </div> | |
| <div class="col-span-1 flex items-center justify-center"> | |
| <button class="summary-btn bg-primary hover:bg-red-700 p-2 rounded-full transition duration-300" data-video="طريقة عمل الكنافة بالقشطة خطوة بخطوة"> | |
| <i class="fas fa-link"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Video Item 3 --> | |
| <div class="video-item grid grid-cols-12 gap-4 px-6 py-4"> | |
| <div class="col-span-1 flex items-center">3</div> | |
| <div class="col-span-5 flex items-center"> | |
| <div class="relative mr-4"> | |
| <img src="https://i.ytimg.com/vi/UBMk30rjy0o/hqdefault.jpg" alt="Video thumbnail" class="w-24 h-14 rounded-lg object-cover"> | |
| <div class="absolute bottom-1 right-1 bg-black bg-opacity-70 px-1 text-xs rounded">8:17</div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">تمارين البطن في 10 دقائق فقط</h3> | |
| <p class="text-gray-400 text-sm">32K مشاهدة • 1 يوم</p> | |
| </div> | |
| </div> | |
| <div class="col-span-3 flex items-center"> | |
| <img src="https://images.unsplash.com/photo-1571019614242-cfeaca0c7c3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-8 h-8 rounded-full mr-2"> | |
| <span>لياقة بدنية</span> | |
| </div> | |
| <div class="col-span-2 flex items-center"> | |
| <i class="fas fa-clock text-gray-400 mr-2"></i> | |
| <span>منذ 1 يوم</span> | |
| </div> | |
| <div class="col-span-1 flex items-center justify-center"> | |
| <button class="summary-btn bg-primary hover:bg-red-700 p-2 rounded-full transition duration-300" data-video="تمارين البطن في 10 دقائق فقط"> | |
| <i class="fas fa-link"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Add Channel Modal --> | |
| <div id="addChannelModal" class="fixed inset-0 bg-black bg-opacity-70 hidden items-center justify-center z-50 p-4"> | |
| <div class="bg-secondary rounded-xl w-full max-w-2xl"> | |
| <div class="flex justify-between items-center p-6 border-b border-gray-700"> | |
| <h3 class="text-xl font-bold"><i class="fas fa-plus-circle text-primary mr-2"></i>إضافة قناة جديدة</h3> | |
| <button id="closeModalBtn" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <label class="block mb-2 font-bold">رابط القناة</label> | |
| <input type="text" placeholder="https://www.youtube.com/channel/..." class="w-full bg-gray-800 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block mb-2 font-bold">اسم القناة</label> | |
| <input type="text" placeholder="أدخل اسم القناة..." class="w-full bg-gray-800 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block mb-2 font-bold">فئة القناة</label> | |
| <select class="w-full bg-gray-800 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <option>تكنولوجيا</option> | |
| <option>طبخ</option> | |
| <option>لياقة وصحة</option> | |
| <option>تعليمي</option> | |
| <option>ترفيه</option> | |
| <option>أخرى</option> | |
| </select> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 px-6 rounded-full mr-3 transition duration-300">إلغاء</button> | |
| <button class="bg-primary hover:bg-red-700 py-2 px-6 rounded-full font-semibold transition duration-300">إضافة القناة</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Summary Modal --> | |
| <div id="summaryModal" class="fixed inset-0 bg-black bg-opacity-70 hidden items-center justify-center z-50 p-4"> | |
| <div class="bg-secondary rounded-xl w-full max-w-3xl"> | |
| <div class="flex justify-between items-center p-6 border-b border-gray-700"> | |
| <h3 class="text-xl font-bold"><i class="fas fa-file-alt text-accent mr-2"></i>رابط تلخيص الفيديو</h3> | |
| <button id="closeSummaryModalBtn" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <h4 id="videoTitle" class="text-lg font-bold mb-2 text-accent">أحدث تكنولوجيا الذكاء الاصطناعي في 2023</h4> | |
| <p class="text-gray-300 mb-4">تم إنشاء رابط التلخيص بنجاح. يمكنك نسخ الرابط أدناه ومشاركته أو استخدامه لتلخيص الفيديو.</p> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block mb-2 font-bold">رابط التلخيص</label> | |
| <div class="flex"> | |
| <input id="summaryLink" type="text" value="https://ytsummary.com/video/dQw4w9WgXcQ" class="w-full bg-gray-800 rounded-l-lg py-3 px-4 focus:outline-none" readonly> | |
| <button id="copyLinkBtn" class="bg-primary hover:bg-red-700 py-3 px-6 rounded-r-lg font-semibold transition duration-300"> | |
| <i class="fas fa-copy mr-2"></i>نسخ | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 mb-6"> | |
| <h4 class="font-bold mb-3"><i class="fas fa-lightbulb text-accent mr-2"></i>كيفية استخدام الرابط</h4> | |
| <ul class="list-disc list-inside text-gray-300 pl-4"> | |
| <li class="mb-2">انسخ الرابط وشاركه مع الآخرين للحصول على ملخص الفيديو</li> | |
| <li class="mb-2">أرسل الرابط إلى مساعد الذكاء الاصطناعي لتحليل محتوى الفيديو</li> | |
| <li>استخدم الرابط في تطبيقات التلخيص التلقائي</li> | |
| </ul> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button id="closeSummaryBtn" class="bg-primary hover:bg-red-700 py-2 px-6 rounded-full font-semibold transition duration-300">تم</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-secondary py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">YouTube Video Tracker</h3> | |
| <p class="text-gray-400">أداة متابعة القنوات واستخراج روابط الفيديوهات الجديدة بسهولة</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">روابط سريعة</h4> | |
| <ul> | |
| <li class="mb-2"><a href="#" class="text-gray-400 hover:text-white transition duration-300">القنوات</a></li> | |
| <li class="mb-2"><a href="#" class="text-gray-400 hover:text-white transition duration-300">الفيديوهات</a></li> | |
| <li class="mb-2"><a href="#" class="text-gray-400 hover:text-white transition duration-300">الإعدادات</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">المساعدة</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">التواصل</h4> | |
| <ul> | |
| <li class="mb-2 flex items-center"> | |
| <i class="fas fa-envelope text-primary mr-2"></i> | |
| <span class="text-gray-400">support@yt-tracker.com</span> | |
| </li> | |
| <li class="mb-2 flex items-center"> | |
| <i class="fab fa-twitter text-primary mr-2"></i> | |
| <span class="text-gray-400">@yt_tracker</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fab fa-facebook text-primary mr-2"></i> | |
| <span class="text-gray-400">fb.com/yt_tracker</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">النشرة البريدية</h4> | |
| <p class="text-gray-400 mb-3">اشترك ليصلك كل جديد عن التحديثات والميزات</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="بريدك الإلكتروني" class="bg-gray-800 rounded-l-lg py-2 px-4 focus:outline-none w-full"> | |
| <button class="bg-primary hover:bg-red-700 py-2 px-4 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500"> | |
| <p>© 2023 YouTube Video Tracker. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Add Channel Modal | |
| const addChannelBtn = document.getElementById('addChannelBtn'); | |
| const addChannelModal = document.getElementById('addChannelModal'); | |
| const closeModalBtn = document.getElementById('closeModalBtn'); | |
| addChannelBtn.addEventListener('click', () => { | |
| addChannelModal.classList.remove('hidden'); | |
| addChannelModal.classList.add('flex'); | |
| }); | |
| closeModalBtn.addEventListener('click', () => { | |
| addChannelModal.classList.add('hidden'); | |
| addChannelModal.classList.remove('flex'); | |
| }); | |
| // Summary Modal | |
| const summaryBtns = document.querySelectorAll('.summary-btn'); | |
| const summaryModal = document.getElementById('summaryModal'); | |
| const closeSummaryModalBtn = document.getElementById('closeSummaryModalBtn'); | |
| const closeSummaryBtn = document.getElementById('closeSummaryBtn'); | |
| const videoTitle = document.getElementById('videoTitle'); | |
| const summaryLink = document.getElementById('summaryLink'); | |
| const copyLinkBtn = document.getElementById('copyLinkBtn'); | |
| summaryBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const video = btn.getAttribute('data-video'); | |
| videoTitle.textContent = video; | |
| summaryModal.classList.remove('hidden'); | |
| summaryModal.classList.add('flex'); | |
| }); | |
| }); | |
| closeSummaryModalBtn.addEventListener('click', () => { | |
| summaryModal.classList.add('hidden'); | |
| summaryModal.classList.remove('flex'); | |
| }); | |
| closeSummaryBtn.addEventListener('click', () => { | |
| summaryModal.classList.add('hidden'); | |
| summaryModal.classList.remove('flex'); | |
| }); | |
| // Copy Link Functionality | |
| copyLinkBtn.addEventListener('click', () => { | |
| summaryLink.select(); | |
| document.execCommand('copy'); | |
| // Show copied message | |
| const originalText = copyLinkBtn.innerHTML; | |
| copyLinkBtn.innerHTML = '<i class="fas fa-check mr-2"></i>تم النسخ!'; | |
| setTimeout(() => { | |
| copyLinkBtn.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| // Close modals when clicking outside | |
| window.addEventListener('click', (e) => { | |
| if (e.target === addChannelModal) { | |
| addChannelModal.classList.add('hidden'); | |
| addChannelModal.classList.remove('flex'); | |
| } | |
| if (e.target === summaryModal) { | |
| summaryModal.classList.add('hidden'); | |
| summaryModal.classList.remove('flex'); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Maoudali2033/yooutube" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |