كيفية إنشاء أداة تفاعلية لعرض ترددات الباقات العالمية
في عالم البث الفضائي المتسارع، يبحث المستخدمون باستمرار عن مصادر موثوقة وسريعة للحصول على أحدث الترددات. إذا كنت تدير مدونة تقنية أو موقعاً متخصصاً في القنوات الفضائية، فإن توفير "جدول ترددات تفاعلي" ليس مجرد ميزة إضافية، بل هو أداة جذب رئيسية لزيادة التفاعل والبقاء في صدارة النتائج.
تعتمد هذه الأداة على مزيج تقني من لغات HTML، CSS، و JavaScript لتقديم تجربة مستخدم سلسة تتضمن البحث اللحظي، الفرز التلقائي، والوضع الليلي، دون الحاجة لتحميل صفحات إضافية.
أولاً: الهيكلية البرمجية للأداة (HTML)
تعتمد الأداة في هيكلها على وسم حاوية رئيسي (Container) يحمل فئة blogger-channels-widget.
هذا التصميم يضمن حصر كافة التنسيقات داخل الأداة لمنع تداخلها مع قوالب المدونات الأخرى.
- رأس الأداة (Header Section): يحتوي على العنوان، شارة التحديث السنوية، وزر تبديل المظهر (ليلي/نهاري).
- لوحة الإحصائيات (Stats Banner): توفر نظرة سريعة للمستخدم حول عدد القنوات المتاحة وتردداتها، مما يضيف طابعاً احترافياً وموثوقاً للمحتوى.
- لوحة التحكم (Controls Panel): تتضمن محرك بحث لحظي وأزرار تصفية (Filter Tabs) للتبديل السريع بين باقات مثل "نايل سات"، "عرب سات"، وغيرها.
- جدول البيانات (Data Table): هو قلب الأداة، حيث يتم عرض القنوات بترتيب منظم مع ميزة النسخ السريع للترددات.
ثانياً: تنسيق التصميم (CSS)
لضمان تجربة مستخدم عصرية، يتم استخدام المتغيرات (CSS Variables) للتحكم في الألوان والخطوط. هذا يتيح:
- دعم المظهر الليلي (Dark Mode): يتم تبديل المتغيرات اللونية عند تفعيل الوضع الليلي، مما يريح عين المستخدم أثناء القراءة الليلية.
- التجاوب (Responsiveness): التصميم مهيأ بالكامل للعمل على الهواتف الذكية والأجهزة اللوحية من خلال تقنيات
media queriesالتي تعيد ترتيب العناصر وتصغير حجم الخطوط تلقائياً. - الخطوط: استخدام خط "Cairo" الشهير يمنح المحتوى العربي مظهراً أنيقاً وقابلاً للقراءة العالية.
ثالثاً: المحرك التفاعلي (JavaScript)
هنا تكمن قوة الأداة، حيث تعتمد على "مصفوفة بيانات" (Data Array) تحتوي على كافة معلومات القنوات. تعمل وظائف JavaScript على الآتي:
- البحث اللحظي: بمجرد الكتابة في حقل البحث، يقوم السكربت بتصفية الجدول فورياً بناءً على الاسم، القمر، أو التردد.
- الفرز (Sorting): عند النقر على رؤوس الأعمدة، يتم إعادة ترتيب القنوات أبجدياً أو رقمياً.
- النسخ السريع (Copy to Clipboard): بضغطة زر واحدة على أيقونة النسخ المجاورة للتردد، يتم حفظ التردد في حافظة الهاتف أو الحاسوب، مما يسهل على المستخدم إدخالها في أجهزة الاستقبال.
- التغذية الراجعة (Toast Notifications): تظهر رسالة تأكيد صغيرة للمستخدم عند نسخ التردد بنجاح، مما يحسن من تفاعل المستخدم مع الموقع.
رابعاً: خطوات التنفيذ في بلوجر (Blogger)
لإدراج هذه الأداة في مدونتك، اتبع الخطوات التالية:
- الوصول إلى لوحة التحكم: انتقل إلى "تنسيق" (Layout) ثم اختر "إضافة أداة" (Add a Gadget).
- اختيار نوع الأداة: اختر "HTML/JavaScript".
- لصق الكود: انسخ كود الأداة بالكامل (الموجود في الخانة أدناه) وضعه داخل مربع المحتوى.
- الحفظ: اضغط على حفظ وقم بمعاينة الأداة في مدونتك.
نصيحة لتطوير المحتوى: للحفاظ على جودة الأداة، ينصح بتحديث مصفوفة البيانات (JSON object) داخل كود الـ JavaScript بشكل دوري. يمكنك إضافة خصائص جديدة مثل "شعار القناة" أو "حالة التشفير" عبر تعديل كائن القناة داخل السكربت، مما يضمن بقاء دليلك الرقمي هو المرجع الأول لزوار مدونتك.
خاتمة
بهذه الأداة التفاعلية، يمكنك تحويل مدونتك إلى مركز معلوماتي متطور للبث الفضائي. الجمع بين التصميم الجذاب، والوظائف الذكية، وسهولة التحديث يجعل من هذه الأداة استثماراً حقيقياً لجمهورك. لا تتردد في تخصيص الألوان والبيانات وفقاً لرؤيتك، وشاركنا تجربتك في التعليقات.
كود الأداة الكامل – انسخه وألصقه في مدونتك
<div class="blogger-channels-widget" id="channelsWidget" data-theme="light">
<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;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* حصر التنسيقات داخل وسم الأداة لمنع تداخلها مع قالب بلوجر */
.blogger-channels-widget {
--widget-bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #e4ebf5 100%);
--widget-container-bg: rgba(255, 255, 255, 0.9);
--widget-card-bg: #ffffff;
--widget-text-main: #0f2d4a;
--widget-text-muted: #4a607a;
--widget-primary: #1d5b7a;
--widget-primary-light: #e1edf7;
--widget-accent: #2a7faa;
--widget-border-color: rgba(0, 0, 0, 0.05);
--widget-shadow-color: rgba(0, 0, 0, 0.1);
--widget-table-header-bg: #0f3347;
--widget-table-tr-even: #f9fcff;
--widget-table-tr-hover: #edf4fa;
direction: rtl;
text-align: right;
font-family: 'Cairo', Tahoma, Geneva, Verdana, sans-serif !important;
background: var(--widget-bg-gradient);
padding: 30px 20px;
border-radius: 24px;
box-shadow: 0 10px 30px var(--widget-shadow-color);
margin: 20px auto;
max-width: 1400px;
width: 100%;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.blogger-channels-widget[data-theme="dark"] {
--widget-bg-gradient: linear-gradient(135deg, #0b151f 0%, #112031 100%);
--widget-container-bg: rgba(21, 34, 50, 0.95);
--widget-card-bg: #1a2f4c;
--widget-text-main: #f0f4f8;
--widget-text-muted: #9ab2cd;
--widget-primary: #3282b8;
--widget-primary-light: #1b3d54;
--widget-accent: #00adb5;
--widget-border-color: rgba(255, 255, 255, 0.08);
--widget-shadow-color: rgba(0, 0, 0, 0.4);
--widget-table-header-bg: #122238;
--widget-table-tr-even: #1b2e46;
--widget-table-tr-hover: #223c5c;
}
.blogger-channels-widget * {
box-sizing: border-box;
font-family: 'Cairo', Tahoma, Geneva, Verdana, sans-serif !important;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.blogger-channels-widget .header-section {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 3px solid var(--widget-accent);
padding-bottom: 20px;
margin-bottom: 25px;
flex-wrap: wrap;
gap: 15px;
}
.blogger-channels-widget h2.widget-title {
font-size: 1.8rem !important;
font-weight: 800 !important;
color: var(--widget-text-main) !important;
display: flex;
align-items: center;
gap: 12px;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.blogger-channels-widget h2.widget-title i {
color: var(--widget-accent);
}
.blogger-channels-widget .header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.blogger-channels-widget .theme-toggle-btn {
background: var(--widget-primary-light);
color: var(--widget-primary);
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.blogger-channels-widget .theme-toggle-btn:hover {
transform: scale(1.05);
background: var(--widget-primary);
color: #ffffff;
}
.blogger-channels-widget .badge-year {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--widget-primary);
color: white !important;
padding: 5px 14px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
}
.blogger-channels-widget .intro-box {
background: var(--widget-primary-light);
border-radius: 16px;
padding: 20px;
margin-bottom: 25px;
border-right: 6px solid var(--widget-primary);
}
.blogger-channels-widget .intro-box p {
font-size: 0.95rem !important;
line-height: 1.7 !important;
color: var(--widget-text-main) !important;
margin: 0 !important;
font-weight: 600;
}
.blogger-channels-widget .stats-banner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 25px;
}
.blogger-channels-widget .stat-card {
background: var(--widget-card-bg);
border: 1px solid var(--widget-border-color);
border-radius: 14px;
padding: 15px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 6px 15px var(--widget-shadow-color);
}
.blogger-channels-widget .stat-icon {
width: 45px;
height: 45px;
background: var(--widget-primary-light);
color: var(--widget-primary);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.blogger-channels-widget .stat-info h4 {
font-size: 0.8rem !important;
color: var(--widget-text-muted) !important;
font-weight: 600;
margin: 0 0 4px 0 !important;
}
.blogger-channels-widget .stat-info p {
font-size: 1.3rem !important;
font-weight: 800;
color: var(--widget-text-main) !important;
margin: 0 !important;
}
.blogger-channels-widget .controls-panel {
background: var(--widget-card-bg);
border-radius: 16px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 6px 15px var(--widget-shadow-color);
border: 1px solid var(--widget-border-color);
display: flex;
flex-direction: column;
gap: 15px;
}
.blogger-channels-widget .search-wrapper {
position: relative;
width: 100%;
}
.blogger-channels-widget .search-wrapper i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--widget-text-muted);
}
.blogger-channels-widget .search-input {
width: 100%;
padding: 12px 45px 12px 15px;
border-radius: 12px;
border: 2px solid var(--widget-border-color);
background: var(--widget-container-bg);
color: var(--widget-text-main);
font-size: 0.95rem;
outline: none;
}
.blogger-channels-widget .search-input:focus {
border-color: var(--widget-accent);
}
.blogger-channels-widget .filter-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.blogger-channels-widget .filter-label {
font-weight: 700;
color: var(--widget-text-main);
font-size: 0.85rem;
margin-left: 5px;
}
.blogger-channels-widget .tab-btn {
background: var(--widget-container-bg);
color: var(--widget-text-muted);
border: 2px solid var(--widget-border-color);
padding: 6px 14px;
border-radius: 20px;
font-weight: 700;
font-size: 0.8rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
.blogger-channels-widget .tab-btn:hover,
.blogger-channels-widget .tab-btn.active {
background: var(--widget-accent);
color: white;
border-color: var(--widget-accent);
}
.blogger-channels-widget .table-wrapper {
overflow-x: auto;
border-radius: 14px;
background: var(--widget-card-bg);
box-shadow: 0 8px 25px var(--widget-shadow-color);
border: 1px solid var(--widget-border-color);
margin-bottom: 25px;
}
.blogger-channels-widget table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
min-width: 900px;
text-align: right;
}
.blogger-channels-widget thead {
background: var(--widget-table-header-bg);
color: white;
}
.blogger-channels-widget thead th {
padding: 14px 16px;
font-weight: 700;
cursor: pointer;
user-select: none;
}
.blogger-channels-widget thead th:hover {
background: rgba(255, 255, 255, 0.05);
}
.blogger-channels-widget thead th i.header-icon {
margin-left: 8px;
opacity: 0.8;
}
.blogger-channels-widget .sort-indicator {
display: inline-block;
margin-right: 6px;
font-size: 0.75rem;
opacity: 0.7;
}
.blogger-channels-widget tbody tr {
border-bottom: 1px solid var(--widget-border-color);
}
.blogger-channels-widget tbody tr:nth-child(even) {
background: var(--widget-table-tr-even);
}
.blogger-channels-widget tbody tr:hover {
background: var(--widget-table-tr-hover);
}
.blogger-channels-widget tbody td {
padding: 12px 16px;
vertical-align: middle;
color: var(--widget-text-main);
font-weight: 600;
}
.blogger-channels-widget .channel-name-cell {
display: flex;
align-items: center;
gap: 10px;
}
.blogger-channels-widget .channel-logo-dummy {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--widget-primary-light);
color: var(--widget-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
flex-shrink: 0;
}
.blogger-channels-widget .package-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--widget-primary-light);
color: var(--widget-primary);
padding: 3px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
}
.blogger-channels-widget .freq-badge-container {
display: inline-flex;
align-items: center;
gap: 6px;
}
.blogger-channels-widget .freq-highlight {
font-family: 'Courier New', Courier, monospace;
background: var(--widget-primary-light);
padding: 3px 10px;
border-radius: 6px;
font-weight: 700;
color: var(--widget-primary);
font-size: 0.85rem;
}
.blogger-channels-widget .copy-btn {
background: transparent;
border: none;
color: var(--widget-text-muted);
cursor: pointer;
padding: 3px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.blogger-channels-widget .copy-btn:hover {
color: var(--widget-accent);
background: var(--widget-primary-light);
transform: scale(1.1);
}
.blogger-channels-widget .genre-badge {
display: inline-block;
background: rgba(0, 0, 0, 0.05);
padding: 2px 8px;
border-radius: 5px;
font-size: 0.75rem;
color: var(--widget-text-muted);
}
.blogger-channels-widget[data-theme="dark"] .genre-badge {
background: rgba(255, 255, 255, 0.05);
}
.blogger-channels-widget .country-badge {
display: inline-block;
background: rgba(0, 0, 0, 0.03);
padding: 2px 8px;
border-radius: 5px;
font-size: 0.75rem;
color: var(--widget-text-muted);
font-weight: 600;
}
.blogger-channels-widget[data-theme="dark"] .country-badge {
background: rgba(255, 255, 255, 0.05);
}
.blogger-channels-widget .info-box {
background: var(--widget-card-bg);
border-radius: 14px;
padding: 15px 20px;
border-left: 5px solid var(--widget-accent);
margin-bottom: 25px;
}
.blogger-channels-widget .info-box p {
font-size: 0.85rem !important;
line-height: 1.6 !important;
color: var(--widget-text-muted) !important;
margin: 0 !important;
}
.blogger-channels-widget .conclusion-box {
background: var(--widget-table-header-bg);
color: #ffffff;
border-radius: 16px;
padding: 20px;
}
.blogger-channels-widget .conclusion-box p {
font-size: 0.95rem !important;
line-height: 1.7 !important;
opacity: 0.9;
margin: 0 0 15px 0 !important;
color: #ffffff !important;
}
.blogger-channels-widget .footer-note {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 0.8rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 12px;
opacity: 0.85;
}
.blogger-channels-widget .widget-toast-container {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 100;
display: flex;
flex-direction: column;
gap: 8px;
}
.blogger-channels-widget .widget-toast {
background: #0f3347;
color: #ffffff;
padding: 10px 18px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.25);
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
font-weight: 700;
border-right: 4px solid var(--widget-accent);
animation: widgetSlideIn 0.3s ease forwards;
}
@keyframes widgetSlideIn {
from { transform: translateY(10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.blogger-channels-widget .widget-toast.fade-out {
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
@media (max-width: 600px) {
.blogger-channels-widget {
padding: 15px 10px;
margin: 10px auto;
}
.blogger-channels-widget h2.widget-title {
font-size: 1.4rem !important;
}
.blogger-channels-widget .tab-btn {
padding: 5px 10px;
font-size: 0.75rem;
}
.blogger-channels-widget tbody td {
padding: 10px 8px;
font-size: 0.8rem;
}
.blogger-channels-widget table {
min-width: 700px;
}
}
</style>
<header class="header-section">
<h2 class="widget-title">
<i class="fas fa-satellite-dish"></i>
دليل القنوات والباقات التفاعلي 2026
</h2>
<div class="header-actions">
<span class="badge-year"><i class="fas fa-calendar-alt"></i> تحديث 2026</span>
<button class="theme-toggle-btn" id="widgetThemeToggle" title="تبديل المظهر">
<i class="fas fa-moon"></i>
</button>
</div>
</header>
<div class="intro-box">
<p>
<i class="fas fa-bullhorn"></i>
مرحباً بكم في الدليل الرقمي التفاعلي الشامل للترددات والباقات الفضائية لعام 2026.
يشمل الجدول أكثر من <strong>60 قناة</strong> موزعة على <strong>5 باقات رئيسية</strong> (نايل سات، عرب سات، هوت بيرد، أسترا/أوروبا، وباقات عالمية)
تغطي جميع الدول العربية والأجنبية. يمكنكم تصفية القنوات حسب الباقة، البحث اللحظي، ونسخ الترددات بضغطة زر.
</p>
</div>
<div class="stats-banner">
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-tv"></i></div>
<div class="stat-info">
<h4>إجمالي القنوات</h4>
<p id="widgetStatTotal">0</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-filter"></i></div>
<div class="stat-info">
<h4>القنوات المعروضة</h4>
<p id="widgetStatFiltered">0</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-satellite"></i></div>
<div class="stat-info">
<h4>الترددات المتوفرة</h4>
<p id="widgetStatFreqs">0</p>
</div>
</div>
</div>
<section class="controls-panel">
<div class="search-wrapper">
<i class="fas fa-search"></i>
<input type="text" id="widgetSearchInput" class="search-input" placeholder="ابحث عن قناة، باقة، تردد، دولة...">
</div>
<div class="filter-tabs">
<span class="filter-label"><i class="fas fa-tags"></i> الباقة:</span>
<button class="tab-btn active" data-package="all">الكل</button>
<button class="tab-btn" data-package="نايل سات">نايل سات</button>
<button class="tab-btn" data-package="عرب سات">عرب سات</button>
<button class="tab-btn" data-package="هوت بيرد">هوت بيرد</button>
<button class="tab-btn" data-package="أسترا/أوروبا">أسترا/أوروبا</button>
<button class="tab-btn" data-package="عالمي">عالمي</button>
</div>
</section>
<div class="table-wrapper">
<table id="widgetChannelsTable">
<thead>
<tr>
<th data-sort="name">
<i class="fas fa-tv header-icon"></i>اسم القناة
<span class="sort-indicator" id="w-sort-name"><i class="fas fa-sort"></i></span>
</th>
<th data-sort="package">
<i class="fas fa-tag header-icon"></i>الباقة
<span class="sort-indicator" id="w-sort-package"><i class="fas fa-sort"></i></span>
</th>
<th data-sort="frequency">
<i class="fas fa-wave-square header-icon"></i>التردد
<span class="sort-indicator" id="w-sort-frequency"><i class="fas fa-sort"></i></span>
</th>
<th data-sort="satellite">
<i class="fas fa-satellite header-icon"></i>القمر الصناعي
<span class="sort-indicator" id="w-sort-satellite"><i class="fas fa-sort"></i></span>
</th>
<th data-sort="country">
<i class="fas fa-flag header-icon"></i>الدولة
<span class="sort-indicator" id="w-sort-country"><i class="fas fa-sort"></i></span>
</th>
</tr>
</thead>
<tbody id="widgetTableBody">
</tbody>
</table>
</div>
<div class="info-box">
<p>
<i class="fas fa-info-circle" style="color: var(--widget-accent); margin-left: 6px;"></i>
<strong>إرشاد تقني:</strong> انقر فوق زر النسخ <i class="fas fa-copy"></i> المجاور للتردد لتسهيل حفظه على جهاز الاستقبال لديك.
يمكنك ترتيب الأعمدة بالنقر على عنوان العمود.
</p>
</div>
<footer class="conclusion-box">
<p>
نأمل أن يسهل هذا الجدول تتبع تردداتكم المفضلة. يتم التحديث دورياً بالتوازي مع تحديثات البث الفضائي.
احرص على مراجعة القمر الصناعي والباقة المناسبة لجهازك، واستخدم خاصية البحث للوصول السريع لقناتك المفضلة.
</p>
<div class="footer-note">
<span><i class="fas fa-sync-alt"></i> آخر تحديث: يوليو 2026</span>
<span><i class="fas fa-heart" style="color: #e74c3c;"></i> دليل تفاعلي مدمج لـ Blogger</span>
</div>
</footer>
<div class="widget-toast-container" id="widgetToastContainer"></div>
</div>
<script>
(function() {
const widget = document.getElementById('channelsWidget');
const tbody = document.getElementById('widgetTableBody');
const searchInput = document.getElementById('widgetSearchInput');
const themeToggle = document.getElementById('widgetThemeToggle');
const toastContainer = document.getElementById('widgetToastContainer');
const statTotal = document.getElementById('widgetStatTotal');
const statFiltered = document.getElementById('widgetStatFiltered');
const statFreqs = document.getElementById('widgetStatFreqs');
// قاعدة بيانات القنوات 2026 - محدثة بأكثر من 60 قناة من جميع الدول
const channelsData = [
// === نايل سات ===
{ name: "الجزيرة الإخبارية", package: "نايل سات", frequency: "10971 V", satellite: "نايل سات 7°W", country: "قطر", genre: "أخبار" },
{ name: "العربية", package: "نايل سات", frequency: "11747 V", satellite: "نايل سات 7°W", country: "السعودية", genre: "أخبار" },
{ name: "الحدث", package: "نايل سات", frequency: "11747 V", satellite: "نايل سات 7°W", country: "السعودية", genre: "أخبار" },
{ name: "سكاي نيوز عربية", package: "نايل سات", frequency: "11977 V", satellite: "نايل سات 7°W", country: "بريطانيا", genre: "أخبار" },
{ name: "القاهرة الإخبارية", package: "نايل سات", frequency: "11747 V", satellite: "نايل سات 7°W", country: "مصر", genre: "أخبار" },
{ name: "الشرق الإخبارية", package: "نايل سات", frequency: "12686 V", satellite: "نايل سات 7°W", country: "قطر", genre: "أخبار" },
{ name: "أم بي سي 1 (MBC 1)", package: "نايل سات", frequency: "11471 V", satellite: "نايل سات 7°W", country: "السعودية", genre: "ترفيه" },
{ name: "أم بي سي مصر", package: "نايل سات", frequency: "11823 V", satellite: "نايل سات 7°W", country: "مصر", genre: "ترفيه" },
{ name: "روتانا سينما", package: "نايل سات", frequency: "12226 H", satellite: "نايل سات 7°W", country: "السعودية", genre: "ترفيه" },
{ name: "أون (ON E)", package: "نايل سات", frequency: "10853 H", satellite: "نايل سات 7°W", country: "مصر", genre: "ترفيه" },
{ name: "دي إم سي (DMC)", package: "نايل سات", frequency: "12226 V", satellite: "نايل سات 7°W", country: "مصر", genre: "ترفيه" },
{ name: "الحياة", package: "نايل سات", frequency: "11603 H", satellite: "نايل سات 7°W", country: "مصر", genre: "ترفيه" },
{ name: "النهار", package: "نايل سات", frequency: "11603 H", satellite: "نايل سات 7°W", country: "مصر", genre: "ترفيه" },
{ name: "أبوظبي الأولى", package: "نايل سات", frequency: "11411 H", satellite: "نايل سات 7°W", country: "الإمارات", genre: "ترفيه" },
{ name: "دبي الأولى", package: "نايل سات", frequency: "11411 H", satellite: "نايل سات 7°W", country: "الإمارات", genre: "ترفيه" },
{ name: "الشارقة", package: "نايل سات", frequency: "11411 H", satellite: "نايل سات 7°W", country: "الإمارات", genre: "ترفيه" },
{ name: "الكويت الأولى", package: "نايل سات", frequency: "11277 H", satellite: "نايل سات 7°W", country: "الكويت", genre: "ترفيه" },
{ name: "الأردنية", package: "نايل سات", frequency: "11277 H", satellite: "نايل سات 7°W", country: "الأردن", genre: "ترفيه" },
{ name: "المغربية الأولى", package: "نايل سات", frequency: "11476 V", satellite: "نايل سات 7°W", country: "المغرب", genre: "ترفيه" },
{ name: "الجزائرية الأولى", package: "نايل سات", frequency: "11476 V", satellite: "نايل سات 7°W", country: "الجزائر", genre: "ترفيه" },
{ name: "التونسية", package: "نايل سات", frequency: "11476 V", satellite: "نايل سات 7°W", country: "تونس", genre: "ترفيه" },
{ name: "اللبنانية (LBCI)", package: "نايل سات", frequency: "11623 H", satellite: "نايل سات 7°W", country: "لبنان", genre: "ترفيه" },
{ name: "أم تي في (MTV Lebanon)", package: "نايل سات", frequency: "11623 H", satellite: "نايل سات 7°W", country: "لبنان", genre: "ترفيه" },
{ name: "السورية", package: "نايل سات", frequency: "11623 H", satellite: "نايل سات 7°W", country: "سوريا", genre: "ترفيه" },
{ name: "العراقية", package: "نايل سات", frequency: "11623 H", satellite: "نايل سات 7°W", country: "العراق", genre: "ترفيه" },
{ name: "اليمنية", package: "نايل سات", frequency: "11623 H", satellite: "نايل سات 7°W", country: "اليمن", genre: "ترفيه" },
{ name: "فلسطين", package: "نايل سات", frequency: "11623 H", satellite: "نايل سات 7°W", country: "فلسطين", genre: "ترفيه" },
{ name: "ليبيا", package: "نايل سات", frequency: "11623 H", satellite: "نايل سات 7°W", country: "ليبيا", genre: "ترفيه" },
{ name: "السودان", package: "نايل سات", frequency: "11623 H", satellite: "نايل سات 7°W", country: "السودان", genre: "ترفيه" },
{ name: "موريتانيا", package: "نايل سات", frequency: "11623 H", satellite: "نايل سات 7°W", country: "موريتانيا", genre: "ترفيه" },
{ name: "أس أس سي (SSC Sports)", package: "نايل سات", frequency: "12523 H", satellite: "نايل سات 7°W", country: "السعودية", genre: "رياضة" },
{ name: "أون تايم سبورت 1", package: "نايل سات", frequency: "11861 V", satellite: "نايل سات 7°W", country: "مصر", genre: "رياضة" },
{ name: "بي إن سبورت الإخبارية", package: "نايل سات", frequency: "12604 H", satellite: "نايل سات 7°W", country: "قطر", genre: "رياضة" },
{ name: "أبوظبي الرياضية 1", package: "نايل سات", frequency: "11411 H", satellite: "نايل سات 7°W", country: "الإمارات", genre: "رياضة" },
{ name: "الرياضية المغربية", package: "نايل سات", frequency: "11476 V", satellite: "نايل سات 7°W", country: "المغرب", genre: "رياضة" },
{ name: "ناشيونال جيوغرافيك", package: "نايل سات", frequency: "11411 H", satellite: "نايل سات 7°W", country: "أمريكا", genre: "وثائقي" },
{ name: "ديسكفري", package: "نايل سات", frequency: "11411 H", satellite: "نايل سات 7°W", country: "أمريكا", genre: "وثائقي" },
{ name: "كارتون نتورك بالعربية", package: "نايل سات", frequency: "11277 V", satellite: "نايل سات 7°W", country: "أمريكا", genre: "أطفال" },
{ name: "سبيستون (Spacetoon)", package: "نايل سات", frequency: "11785 V", satellite: "نايل سات 7°W", country: "الإمارات", genre: "أطفال" },
{ name: "طيور الجنة", package: "نايل سات", frequency: "11258 H", satellite: "نايل سات 7°W", country: "الأردن", genre: "أطفال" },
// === عرب سات (بدر) ===
{ name: "أس أس سي (SSC Sports)", package: "عرب سات", frequency: "12418 H", satellite: "بدر 8 26°E", country: "السعودية", genre: "رياضة" },
{ name: "الجزيرة الوثائقية", package: "عرب سات", frequency: "12034 H", satellite: "بدر 8 26°E", country: "قطر", genre: "وثائقي" },
{ name: "السعودية", package: "عرب سات", frequency: "12380 V", satellite: "بدر 8 26°E", country: "السعودية", genre: "ترفيه" },
{ name: "الإمارات", package: "عرب سات", frequency: "12284 V", satellite: "بدر 8 26°E", country: "الإمارات", genre: "ترفيه" },
{ name: "العراق", package: "عرب سات", frequency: "12604 V", satellite: "بدر 8 26°E", country: "العراق", genre: "ترفيه" },
{ name: "الجزائر", package: "عرب سات", frequency: "12604 V", satellite: "بدر 8 26°E", country: "الجزائر", genre: "ترفيه" },
{ name: "بي إن سبورت العربية", package: "عرب سات", frequency: "12418 H", satellite: "بدر 8 26°E", country: "قطر", genre: "رياضة" },
// === هوت بيرد ===
{ name: "فرانس 24 عربي", package: "هوت بيرد", frequency: "11623 V", satellite: "هوت بيرد 13°E", country: "فرنسا", genre: "أخبار" },
{ name: "تي آر تي عربي (TRT)", package: "هوت بيرد", frequency: "11429 V", satellite: "هوت بيرد 13°E", country: "تركيا", genre: "أخبار" },
{ name: "بي بي سي عربي", package: "هوت بيرد", frequency: "11623 V", satellite: "هوت بيرد 13°E", country: "بريطانيا", genre: "أخبار" },
{ name: "سي إن إن عربي", package: "هوت بيرد", frequency: "11623 V", satellite: "هوت بيرد 13°E", country: "أمريكا", genre: "أخبار" },
{ name: "يورونيوز عربي", package: "هوت بيرد", frequency: "11623 V", satellite: "هوت بيرد 13°E", country: "فرنسا", genre: "أخبار" },
{ name: "رويترز عربي", package: "هوت بيرد", frequency: "11623 V", satellite: "هوت بيرد 13°E", country: "بريطانيا", genre: "أخبار" },
// === أسترا/أوروبا ===
{ name: "يورو سبورت 1", package: "أسترا/أوروبا", frequency: "11258 V", satellite: "أسترا 19°E", country: "فرنسا", genre: "رياضة" },
{ name: "يورو سبورت 2", package: "أسترا/أوروبا", frequency: "11258 V", satellite: "أسترا 19°E", country: "فرنسا", genre: "رياضة" },
{ name: "سكاي سبورت", package: "أسترا/أوروبا", frequency: "11681 H", satellite: "أسترا 19°E", country: "بريطانيا", genre: "رياضة" },
{ name: "بي بي سي وان", package: "أسترا/أوروبا", frequency: "11681 H", satellite: "أسترا 19°E", country: "بريطانيا", genre: "ترفيه" },
{ name: "بي بي سي نيوز", package: "أسترا/أوروبا", frequency: "11681 H", satellite: "أسترا 19°E", country: "بريطانيا", genre: "أخبار" },
{ name: "آر تي (RT)", package: "أسترا/أوروبا", frequency: "11681 H", satellite: "أسترا 19°E", country: "روسيا", genre: "أخبار" },
{ name: "دويتشه فيله", package: "أسترا/أوروبا", frequency: "11681 H", satellite: "أسترا 19°E", country: "ألمانيا", genre: "أخبار" },
// === عالمي (أقمار أخرى) ===
{ name: "سي إن إن إنترناشونال", package: "عالمي", frequency: "12560 H", satellite: "إنتلسات 901 27.5°W", country: "أمريكا", genre: "أخبار" },
{ name: "فوكس نيوز", package: "عالمي", frequency: "12560 H", satellite: "إنتلسات 901 27.5°W", country: "أمريكا", genre: "أخبار" },
{ name: "بي بي سي وورلد", package: "عالمي", frequency: "12560 H", satellite: "إنتلسات 901 27.5°W", country: "بريطانيا", genre: "أخبار" },
{ name: "إن إتش كيه وورلد", package: "عالمي", frequency: "12560 H", satellite: "إنتلسات 901 27.5°W", country: "اليابان", genre: "أخبار" },
{ name: "الجزيرة الإنجليزية", package: "عالمي", frequency: "12560 H", satellite: "إنتلسات 901 27.5°W", country: "قطر", genre: "أخبار" },
{ name: "يورونيوز إنجليزي", package: "عالمي", frequency: "12560 H", satellite: "إنتلسات 901 27.5°W", country: "فرنسا", genre: "أخبار" },
];
let currentFilter = 'all';
let searchQuery = '';
let sortConfig = { key: 'name', direction: 'asc' };
function updateStats(filteredData) {
statTotal.textContent = channelsData.length;
statFiltered.textContent = filteredData.length;
const uniqueFreqs = new Set(filteredData.map(ch => ch.frequency));
statFreqs.textContent = uniqueFreqs.size;
}
function getInitials(name) {
return name.split(' ').map(n => n[0]).slice(0, 2).join('');
}
function renderTable() {
tbody.innerHTML = '';
let filtered = channelsData.filter(ch => {
const matchesSearch = ch.name.toLowerCase().includes(searchQuery) ||
ch.frequency.includes(searchQuery) ||
ch.satellite.toLowerCase().includes(searchQuery) ||
ch.package.toLowerCase().includes(searchQuery) ||
ch.country.toLowerCase().includes(searchQuery);
const matchesPackage = (currentFilter === 'all') || (ch.package === currentFilter);
return matchesSearch && matchesPackage;
});
filtered.sort((a, b) => {
let valA = a[sortConfig.key].toString().toLowerCase();
let valB = b[sortConfig.key].toString().toLowerCase();
if (sortConfig.key === 'frequency') {
const numA = parseFloat(valA.replace(/[^0-9.]/g, ''));
const numB = parseFloat(valB.replace(/[^0-9.]/g, ''));
return sortConfig.direction === 'asc' ? numA - numB : numB - numA;
}
return sortConfig.direction === 'asc' ?
valA.localeCompare(valB, 'ar', { sensitivity: 'base' }) :
valB.localeCompare(valA, 'ar', { sensitivity: 'base' });
});
if (filtered.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="5" style="text-align: center; padding: 30px; color: var(--widget-text-muted);">
<i class="fas fa-search-minus" style="font-size: 1.8rem; margin-bottom: 8px; display: block;"></i>
لم نجد أي قنوات تطابق تصفيتك الحالية.
</td>
</tr>`;
} else {
filtered.forEach(ch => {
const row = document.createElement('tr');
row.innerHTML = `
<td>
<div class="channel-name-cell">
<div class="channel-logo-dummy">${getInitials(ch.name)}</div>
<div>
<span style="display: block;">${ch.name}</span>
<span class="genre-badge">${ch.genre}</span>
</div>
</div>
</td>
<td><span class="package-badge"><i class="fas fa-satellite-dish"></i> ${ch.package}</span></td>
<td>
<div class="freq-badge-container">
<span class="freq-highlight">${ch.frequency}</span>
<button class="copy-btn" data-freq="${ch.frequency}" title="نسخ التردد">
<i class="fas fa-copy"></i>
</button>
</div>
</td>
<td>
<span><i class="fas fa-location-arrow" style="color: var(--widget-accent); margin-left:6px;"></i>${ch.satellite}</span>
</td>
<td><span class="country-badge"><i class="fas fa-flag" style="margin-left:4px;"></i>${ch.country}</span></td>
`;
tbody.appendChild(row);
});
}
updateStats(filtered);
updateSortIndicators();
}
function showToast(message) {
const toast = document.createElement('div');
toast.className = 'widget-toast';
toast.innerHTML = `<i class="fas fa-check-circle" style="color: var(--widget-accent);"></i> <span>${message}</span>`;
toastContainer.appendChild(toast);
setTimeout(() => {
toast.classList.add('fade-out');
setTimeout(() => toast.remove(), 300);
}, 2500);
}
tbody.addEventListener('click', function(e) {
const btn = e.target.closest('.copy-btn');
if (btn) {
const freq = btn.getAttribute('data-freq');
const textarea = document.createElement('textarea');
textarea.value = freq;
textarea.style.position = 'fixed';
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
showToast(`تم نسخ التردد ${freq} بنجاح!`);
} catch (err) {
showToast('حدث خطأ أثناء النسخ.');
}
document.body.removeChild(textarea);
}
});
function updateThemeIcon(theme) {
const icon = themeToggle.querySelector('i');
if (theme === 'dark') {
icon.className = 'fas fa-sun';
themeToggle.style.color = '#f39c12';
} else {
icon.className = 'fas fa-moon';
themeToggle.style.color = 'var(--widget-primary)';
}
}
themeToggle.addEventListener('click', () => {
const currentTheme = widget.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
widget.setAttribute('data-theme', newTheme);
updateThemeIcon(newTheme);
});
searchInput.addEventListener('input', (e) => {
searchQuery = e.target.value.toLowerCase().trim();
renderTable();
});
widget.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', function() {
widget.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
currentFilter = this.getAttribute('data-package');
renderTable();
});
});
function handleSort(key) {
if (sortConfig.key === key) {
sortConfig.direction = sortConfig.direction === 'asc' ? 'desc' : 'asc';
} else {
sortConfig.key = key;
sortConfig.direction = 'asc';
}
renderTable();
}
function updateSortIndicators() {
const keys = ['name', 'package', 'frequency', 'satellite', 'country'];
keys.forEach(key => {
const indicator = document.getElementById(`w-sort-${key}`);
if (!indicator) return;
if (sortConfig.key === key) {
indicator.innerHTML = sortConfig.direction === 'asc' ?
'<i class="fas fa-sort-up" style="color: var(--widget-accent);"></i>' :
'<i class="fas fa-sort-down" style="color: var(--widget-accent);"></i>';
} else {
indicator.innerHTML = '<i class="fas fa-sort"></i>';
}
});
}
widget.querySelectorAll('thead th').forEach(th => {
th.addEventListener('click', function() {
const sortKey = this.getAttribute('data-sort');
if (sortKey) handleSort(sortKey);
});
});
updateThemeIcon('light');
renderTable();
})();
</script>
تم نسخ الكود بنجاح! يمكنك لصقه الآن في مدونتك.
