شريط التصنيفات اختيار نوع القنوات (رياضة، أخبار...)
.category-btn زر تصنيف تحميل قناة حسب الفئة
مربع البحث البحث عن قناة بالاسم
#search-input input إدخال نص البحث
#channels-count عداد القنوات عرض عدد القنوات أو حالة الفحص
#letters-bar شريط الحروف فلترة حسب أول حرف
#grid شبكة القنوات عرض القنوات على شكل بطاقات
#modal نافذة المشغل تظهر عند تشغيل قناة
.topbar شريط أعلى المشغل أزرار التحكم + الوقت
#video مشغل الفيديو تشغيل البث المباشر
#act شاشة التفعيل إدخال كود الاشتراك
🎛️ 2) عناصر واجهة المشغل (Topbar)
العنصر الوظيفة
#status حالة البث (Live)
#freeTimerBox عداد التجربة أو الاشتراك
.btn.home الرجوع للصفحة الرئيسية
.btn.act فتح التفعيل
.btn.change-plan تغيير الاشتراك
.btn.close إغلاق المشغل
📺 3) عناصر القنوات (Grid Item)
العنصر الوظيفة
.item بطاقة قناة
![]()
شعار القناة
اسم القناة
onclick="open(c)" تشغيل القناة
🎨 4) CSS (التصميم)
🧱 Layout
العنصر الوظيفة
.grid Grid responsive للقنوات
.categories Flex layout للتصنيفات
.letters-bar شريط حروف دائري
🎯 القنوات
العنصر التأثير
.item تصميم ثلاثي الأبعاد + ظل
.item:hover تكبير + رفع البطاقة
.item::before علامة VIP
🎬 المشغل
العنصر الوظيفة
#modal نافذة fullscreen
#video فيديو full width
⚙️ 5) متغيرات JavaScript الأساسية
المتغير النوع الوظيفة
channels Array القنوات الحالية
hls Hls instance تشغيل الفيديو
searchTerm String نص البحث
letterFilter String فلترة بالحرف
currentChannel Object القناة الحالية
activated Boolean هل الاشتراك مفعل
expireTime Number وقت انتهاء الاشتراك
trialTime Number مدة التجربة (ثواني)
trialTimer Interval عداد التجربة
CHANNEL_CACHE Object تخزين القنوات
🌐 6) مصادر القنوات IPTV
الفئة الرابط
all ara.m3u
news news.m3u
sport sports.m3u
kids kids.m3u
entertainment movies + series
religious religious.m3u
education documentary + education
📥 7) دوال تحميل القنوات
الدالة الوظيفة
loadM3U(url) تحميل ملف M3U وتحويله لقائمة
loadCategory(cat) تحميل فئة معينة
render(list) عرض القنوات في الشبكة
🔎 8) البحث والفلترة
الدالة الوظيفة
filter() فلترة القنوات حسب البحث
generateLetters() إنشاء شريط A-Z
letterFilter فلترة حسب أول حرف
🚀 9) تشغيل الفيديو
الدالة الوظيفة
open(c) فتح القناة
play(url) تشغيل HLS
goHome() الرجوع للرئيسية
closePlayer() إغلاق المشغل
🧪 10) نظام التجربة (Trial System)
العنصر الوظيفة
trialTime مدة التجربة
handleChannelTrial() إدارة تجربة المستخدم
trialTimer عداد تنازلي
forceStop() إيقاف القناة بعد انتهاء التجربة
🔐 11) نظام التفعيل (Activation)
الدالة الوظيفة
activate() التحقق من الكود
startTimerSystem() عداد الاشتراك
buyPlan() فتح رابط شراء
expireTime وقت انتهاء الاشتراك
📡 12) فحص القنوات (Stream Checker)
الدالة الوظيفة
checkStreamFast() اختبار القناة قبل عرضها
يستخدم Hls.js + video element
النتيجة تحديد القنوات الشغالة
🧠 13) منطق التطبيق الكامل
المرحلة ماذا يحدث
1 تحميل القنوات من M3U
2 تخزينها في cache
3 عرضها في grid
4 المستخدم يضغط قناة
5 فحص تجربة / اشتراك
6 تشغيل HLS
7 تشغيل timer
⚠️ 14) نقاط مهمة في التصميم
كل شيء يعمل داخل المتصفح فقط (Frontend only)
لا يوجد backend
الحماية ضعيفة (client-side فقط)
الأداء يعتمد على عدد القنوات