١

info.js

@@ -0,0 +1,108 @@
+/* ============================================
+   info.js - طلباتك بلس - صفحة المعلومات (index2)
+   ============================================ */
+
+// --- إعدادات API (تأخذ القيمة من المتغير المُعرّف في index2.html) ---
+
+
+// --- التحكم بالسلايدر (تبديل الصور) ---
+let currentSlide = 1;
+let slideInterval;
+
+function startSlider() {
+    // تبديل كل 5 ثواني
+    slideInterval = setInterval(() => {
+        const slide1 = document.getElementById('slide1');
+        const slide2 = document.getElementById('slide2');
+        if (currentSlide === 1) {
+            slide1.style.opacity = '0';
+            slide2.style.opacity = '1';
+            currentSlide = 2;
+        } else {
+            slide1.style.opacity = '1';
+            slide2.style.opacity = '0';
+            currentSlide = 1;
+        }
+    }, 5000);
+}
+
+// --- تحميل وعرض الفيديوهات ---
+async function loadVideos() {
+    try {
+        const res = await fetch('/api/settings');
+        if (!res.ok) throw new Error('فشل تحميل الإعدادات');
+        const data = await res.json();
+        const videos = data.videos || [];
+        renderVideos(videos);
+    } catch (err) {
+        console.error('خطأ في تحميل الفيديوهات:', err);
+        document.getElementById('videosContainer').innerHTML = '<p class="text-red-500">تعذر تحميل الفيديوهات</p>';
+    }
+}
+
+function renderVideos(videoUrls) {
+    const container = document.getElementById('videosContainer');
+    container.innerHTML = ''; // تفريغ أي محتوى سابق
+
+    if (!videoUrls || videoUrls.length === 0) {
+        container.innerHTML = '<p class="text-zinc-500">لا توجد فيديوهات متاحة حالياً</p>';
+        return;
+    }
+
+    videoUrls.forEach(url => {
+        const videoId = extractYouTubeVideoId(url);
+        if (!videoId) return; // تجاهل الروابط غير الصالحة
+
+        // إنشاء بطاقة الفيديو باستخدام Tailwind
+        const card = document.createElement('div');
+        card.className = 'bg-zinc-50 p-4 rounded-2xl shadow-md border border-zinc-200';
+
+        // يمكن عرض الفيديو كصورة مصغرة مع رابط للتشغيل، أو تضمين iframe للمعاينة المباشرة.
+        // هنا سنستخدم iframe لتشغيل الفيديو مباشرة (يمكن تغييرها إلى صورة مصغرة حسب الرغبة).
+        card.innerHTML = `
+            <div class="relative pb-9/16" style="padding-bottom: 56.25%;">
+                <iframe class="absolute top-0 left-0 w-full h-full rounded-xl"
+                    src="https://www.youtube.com/embed/${videoId}"
+                    frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen>
+                </iframe>
+            </div>
+            <a href="${url}" target="_blank" class="mt-3 inline-block text-[#ff661c] hover:underline">
+                مشاهدة على يوتيوب
+            </a>
+        `;
+        container.appendChild(card);
+    });
+}
+
+// استخراج معرف الفيديو من رابط يوتيوب (يدعم عدة صيغ)
+function extractYouTubeVideoId(url) {
+    const patterns = [
+        /youtube\.com\/watch\?v=([^&]+)/,
+        /youtu\.be\/([^?]+)/,
+        /youtube\.com\/embed\/([^?]+)/,
+        /youtube\.com\/v\/([^?]+)/,
+        /youtube\.com\/shorts\/([^?]+)/
+    ];
+    for (let pattern of patterns) {
+        const match = url.match(pattern);
+        if (match && match[1]) return match[1];
+    }
+    return null;
+}
+
+// --- تهيئة الصفحة ---
+document.addEventListener('DOMContentLoaded', () => {
+    startSlider();
+    loadVideos();
+});
+
+// اختياري: إيقاف السلايدر عندما لا تكون الصفحة مرئية لتوفير الموارد
+document.addEventListener('visibilitychange', () => {
+    if (document.hidden) {
+        clearInterval(slideInterval);
+    } else {
+        startSlider();
+    }
+});