شرح اضافة TV مُباشر - تلفاز مباشر في منتداك

    <div class="block">
        <div class="block-container">
            <div class="block-body block-row">
                <div class="k4s-tv-wrapper" id="tvContainer">
    <div class="k4s-screen" id="mainScreen">
        
        <!-- طبقة العناصر الثابتة -->
        <div id="k4s-main-static-ui">
            <div id="k4s-hint-text" class="k4s-center-hint">أضغط بأي مكان لأظهار القنوات</div>
            <div class="k4s-main-logo" style="right: 20px; left: auto;">K4S<span>TV</span></div>
            
            <div id="k4s-footer-ui" class="k4s-bottom-bar">
                <div class="k4s-ticker-container">
                    <div class="k4s-ticker-text">مرحبا بكم بتلفزيون المنتدى K4S • استمتع بمشاهدة طيبة • K4S SYSTEM LIVE</div>
                </div>
                <div class="k4s-clock-box">
                    <span id="k4s-city">ERB</span>
                    <span id="k4s-time">--:--</span>
                </div>
            </div>
        </div>

        <!-- طبقة الفيديو -->
        <div id="video-display" class="video-layer">
            <!-- تمت إضافة loop للتأكد من استمرارية الفيديو -->
            <video id="mainPlayer" autoplay loop playsinline muted style="width:100%; height:100%; object-fit:cover; background:#000;">
                <source src="https://kurd4sat.com/live/66.mp4" type="video/mp4">
            </video>
        </div>

        <div id="touch-layer" style="position:absolute; top:0; left:0; width:100%; height:100%; z-index:20; cursor:pointer; display:none;" onclick="userActivity()" ontouchstart="userActivity()"></div>

        <!-- القوائم -->
        <div class="k4s-overlay-menu" id="mainMenu" style="top: 50px;">
            <div class="menu-item active" onclick="playMain(this)">الرئيسية</div>
            <div class="menu-item" onclick="showSubMenu('islamic')">الأسلامية</div>
            <div class="menu-item" onclick="showSubMenu('sports')">الرياضية</div>
            <div class="menu-item" onclick="showSubMenu('news')">الإخبارية</div>
            <div class="menu-item" onclick="showSubMenu('doc')">الوثائقية</div>
            <div class="menu-item" onclick="showSubMenu('kids')">الأطفال</div>
            <div class="menu-item" onclick="showSubMenu('movies')">الأفلام</div>
            <div class="menu-item" onclick="showSubMenu('fun')">الترفيهية</div>
        </div>

        <!-- المجموعات الفرعية (تم الحفاظ على قنواتك والسهم المنحني) -->
        <div class="k4s-overlay-menu sub-menu" id="subMenu-islamic" style="display:none;">
            <div class="menu-back-icon" onclick="backToMain()"><div class="u-turn-arrow"></div></div>
            <div class="menu-item" onclick="playYoutube('wawzF8i5yAo', this)">القرآن الكريم</div>
            <div class="menu-item" onclick="playYoutube('rHWSRMcGGBQ', this)">السنة النبوية</div>
            <div class="menu-item" onclick="playYoutube('gPq6BpwjzAc', this)">أذاعة القران الكريم</div>
        </div>

        <div class="k4s-overlay-menu sub-menu" id="subMenu-sports" style="display:none;">
            <div class="menu-back-icon" onclick="backToMain()"><div class="u-turn-arrow"></div></div>
            <div class="menu-item" onclick="window.open('https://karwan.tv/ava-sport/', '_blank')">AVA SPORT 🔗</div>
            <div class="menu-item" onclick="window.open('https://www.vartv.net/sport-live?lang=ku')">مباريات مباشرة 🔗</div>
            <div class="menu-item" onclick="playYoutube('4WtuZ-oHW2Y', this)">Duhok Sport</div>
            <div class="menu-item" onclick="playYoutube('s-x1INNQ1I8', this)">AD Sport</div>
            <div class="menu-item" onclick="playYoutube('sCPPk25bgfQ', this)">العراقية الرياضية</div>
            <div class="menu-item" onclick="playYoutube('8yNZwJF6ew0', this)">WWE</div>
        </div>

        <!-- الإخبارية -->
        <div class="k4s-overlay-menu sub-menu" id="subMenu-news" style="display:none;">
            <div class="menu-back-icon" onclick="backToMain()"><div class="u-turn-arrow"></div></div>
            <div class="menu-item" onclick="playYoutube('Migi5ugf5zs', this)">Rudaw</div>
                        <div class="menu-item" onclick="playYoutube('yZ7eZ8H_a1I', this)">K24</div>
                        <div class="menu-item" onclick="playYoutube('NskrdSLYirw', this)">CHANNEL8</div>
            <div class="menu-item" onclick="playYoutube('n7eQejkXbnM', this)">العربية</div>
            <div class="menu-item" onclick="playYoutube('EEHXzLNS6o', this)">الحدث</div>
            <div class="menu-item" onclick="playYoutube('bNyUyrR0PHo', this)">الجزيرة</div>
            <div class="menu-item" onclick="playYoutube('ppgTP8xQQsM', this)">سكاي نيوز</div>
            <div class="menu-item" onclick="playYoutube('MtDYtXIPOtY', this)">BBC عربي</div>
            <div class="menu-item" onclick="playYoutube('93g513Uth98', this)">فرانس 24</div>
            <div class="menu-item" onclick="playYoutube('SBtuhJZ__Gw', this)">الشرقية نيوز</div>
            <div class="menu-item" onclick="playYoutube('9NyxcX3rhQs', this)">CNBC عربية</div>
            <div class="menu-item" onclick="playYoutube('QB5BNdBFujE', this)">Bloomberg</div>
        </div>

        <!-- الوثائقية -->
        <div class="k4s-overlay-menu sub-menu" id="subMenu-doc" style="display:none;">
            <div class="menu-back-icon" onclick="backToMain()"><div class="u-turn-arrow"></div></div>
            <div class="menu-item" onclick="playYoutube('MiQe9ob9aDc', this)">National Geographic</div>
            <div class="menu-item" onclick="playYoutube('MiQe9ob9aDc', this)">NatGeo Wild</div>
                        <div class="menu-item" onclick="playYoutube('HfgIFGbdGJ0', this)">earthTV</div>
            <div class="menu-item" onclick="playYoutube('1LhlXiSc5NY', this)">BBC Earth</div>
            <div class="menu-item" onclick="playYoutube('FlzMedKfQOs', this)">الشرق Discovery</div>
            <div class="menu-item" onclick="playYoutube('TiPYdMXt_XI', this)">الجزيرة الوثائقية</div>
            <div class="menu-item" onclick="playYoutube('0FBiyFpV__g', this)">NASA</div>
        </div>

        <!-- الأطفال -->
        <div class="k4s-overlay-menu sub-menu" id="subMenu-kids" style="display:none;">
            <div class="menu-back-icon" onclick="backToMain()"><div class="u-turn-arrow"></div></div>
            <div class="menu-item" onclick="playYoutube('AA697U8Dz9I', this)">Baby TV</div>
            <div class="menu-item" onclick="playYoutube('21hAlnDFTLw', this)">CartoonNetwork</div>
            <div class="menu-item" onclick="playYoutube('IT1IZpY7uzA', this)">Cartoonnito</div>
            <div class="menu-item" onclick="playYoutube('rEKifG2XUZg', this)">BOOMERANG</div>
            <div class="menu-item" onclick="playYoutube('toD8HbxRjRE', this)">نيكلوديون عربية</div>
            <div class="menu-item" onclick="playYoutube('YwWnwfjQLpQ', this)">Masha and the Bear</div>
            <div class="menu-item" onclick="playYoutube('F4Tnje7wi-o', this)">Disney Kids</div>
            <div class="menu-item" onclick="playYoutube('L0VqY0s7-5k', this)">Kung Fu Panda</div>
            <div class="menu-item" onclick="playYoutube('yzKTO-6KWHU', this)">CARS</div>
        </div>

        <!-- الأفلام -->
        <div class="k4s-overlay-menu sub-menu" id="subMenu-movies" style="display:none;">
            <div class="menu-back-icon" onclick="backToMain()"><div class="u-turn-arrow"></div></div>
            <div class="menu-item" onclick="playYoutube('XghNs0Cx6JQ', this)">Movies 1</div>
            <div class="menu-item" onclick="playYoutube('sh4N79JlDRo', this)">Movies 2</div>
            <div class="menu-item" onclick="playYoutube('OvwoCOII0Tk', this)">Movies 3</div>
            <div class="menu-item" onclick="playYoutube('89c4owSHL2E', this)">Movies 4</div>
            <div class="menu-item" onclick="playYoutube('G43NInZfoPE', this)">Movies 5</div>
            <div class="menu-item" onclick="playYoutube('n4q6R8mtVM8', this)">Movies 6</div>
            <div class="menu-item" onclick="playYoutube('Va6QU9n3q18', this)">Movies 7</div>
        </div>

        <!-- الترفيهية -->
        <div class="k4s-overlay-menu sub-menu" id="subMenu-fun" style="display:none;">
            <div class="menu-back-icon" onclick="backToMain()"><div class="u-turn-arrow"></div></div>
            <div class="menu-item" onclick="playYoutube('6Af0jQw0zbc', this)">Ava Media</div>
            <div class="menu-item" onclick="playYoutube('XQLEvieRMj4', this)">MR.Bean</div>
            <div class="menu-item" onclick="playYoutube('AGkp2AL8e7o', this)">DW عربي</div>
            <div class="menu-item" onclick="playYoutube('e2RgSa1Wt5o', this)">العربي</div>
            <div class="menu-item" onclick="playYoutube('0yfjkY4E5bQ', this)">وادي الذئاب</div>
            <div class="menu-item" onclick="playYoutube('2r5dGuz5afg', this)">مسلسلات 2</div>
            <div class="menu-item" onclick="playYoutube('c72ukYWJNuo', this)">مسلسلات 4</div>
            <div class="menu-item" onclick="playYoutube('h6cB5IUmVF0', this)">تلفزيون سوريا</div>
            <div class="menu-item" onclick="playYoutube('b4c8mJqXCT8', this)">PUBG</div>
            <div class="menu-item" onclick="playYoutube('rC17uXIkL-s', this)">GTA5</div>
        </div>

    </div>
</div>

<style>
.k4s-tv-wrapper { max-width: 700px; margin: 20px auto; direction: ltr; font-family: 'Segoe UI', Tahoma, sans-serif; position: relative; }
.k4s-screen { position: relative; width: 100%; padding-top: 56.25%; background: #000; overflow: hidden; border-radius: 10px; cursor: none; touch-action: manipulation; }
.k4s-screen.user-active { cursor: default; }
.k4s-overlay-menu { top: 50px !important; }
.k4s-center-hint {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.5); font-size: clamp(10px, 2vw, 13px); z-index: 5;
    pointer-events: none; background: rgba(0,0,0,0.4); padding: 5px 12px;
    border-radius: 20px; transition: opacity 0.5s; white-space: nowrap;
}
.user-active .k4s-center-hint { opacity: 0 !important; }

.video-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.is-playing-yt .video-layer iframe { pointer-events: auto; }

#k4s-main-static-ui { z-index: 10; pointer-events: none; position: absolute; top:0; left:0; width:100%; height:100%; }

.k4s-main-logo { position: absolute; top: 15px; right: 20px; color: white; font-weight: bold; font-size: 18px; text-shadow: 2px 2px 4px #000; }
.k4s-main-logo span { color: #ff3333; font-size: 10px; margin-left: 3px; vertical-align: top; }

/* تجاوب على الشاشات الصغيرة */
@media (max-width: 600px) {
    .k4s-main-logo { font-size: 14px; top: 10px; right: 12px; }
    .k4s-main-logo span { font-size: 8px; }
    .k4s-overlay-menu { top: 8px; max-width: calc(100% - 16px); border-radius: 22px; }
    .menu-item { padding: 8px 11px; font-size: 10px; }
    .menu-back-icon { padding: 8px 11px; }
    .k4s-bottom-bar { width: 75%; min-width: 200px; bottom: 8px; height: 22px; border-radius: 12px; }
    .k4s-ticker-text { font-size: 9px; }
    .u-turn-arrow { width: 16px; height: 11px; border-width: 2.5px; }
    .u-turn-arrow::before { left: -7px; top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 8px solid #ff3333; }
}
@media (max-width: 380px) {
    .menu-item { padding: 7px 9px; font-size: 9px; }
}

/* === القوائم بشكل أفقي بصف واحد بالأعلى === */
.k4s-overlay-menu {
    position: absolute; left: 50%; top: 12px;
    max-width: calc(100% - 24px);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px); z-index: 25;
    display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch;
    padding: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: translateX(-50%) translateY(-20px);
    opacity: 0; pointer-events: none;
    overflow-x: auto; overflow-y: hidden;
    border-radius: 30px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* شريط تمرير أفقي رفيع وأنيق */
    scrollbar-width: thin;
    scrollbar-color: #ff3333 rgba(255,255,255,0.08);
    padding-bottom: 4px; /* مساحة لشريط التمرير */
}
/* تنسيق شريط التمرير في متصفحات Webkit (كروم/سفاري/إيدج) */
.k4s-overlay-menu::-webkit-scrollbar { height: 6px; }
.k4s-overlay-menu::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 0 0 30px 30px; }
.k4s-overlay-menu::-webkit-scrollbar-thumb { background: #ff3333; border-radius: 10px; min-width: 30px; }
.k4s-overlay-menu::-webkit-scrollbar-thumb:hover { background: #ff5555; }
@media (max-width: 600px) {
    .k4s-overlay-menu::-webkit-scrollbar { height: 4px; }
}
.user-active .k4s-overlay-menu {
    transform: translateX(-50%) translateY(0);
    opacity: 1; pointer-events: auto;
}

.menu-item { color: rgba(255,255,255,0.8); text-align: center; padding: 10px 14px; font-size: 11px; cursor: pointer; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.08); white-space: nowrap; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.menu-item:last-child { border-right: none; }
.menu-item:hover, .menu-item.active { background: rgba(255, 255, 255, 0.1); color: #fff; border-left: none; border-bottom: 3px solid #ff3333; }

/* السهم المنحني */
.menu-back-icon { padding: 10px 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
.u-turn-arrow {
    width: 20px; height: 14px; border: 3px solid #ff3333; border-left: none;
    border-radius: 0 10px 10px 0; position: relative; margin-left: 8px;
}
.u-turn-arrow::before {
    content: ''; position: absolute; left: -8px; top: -6px;
    width: 0; height: 0; border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; border-right: 10px solid #ff3333;
}

/* الشريط المتحرك (جعله أقصر — لا يأخذ كامل عرض الشاشة) */
.k4s-bottom-bar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 60%; max-width: 420px; min-width: 240px; height: 25px; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; pointer-events: auto; border-radius: 14px; overflow: hidden; }
.k4s-ticker-container { flex: 1; overflow: hidden; white-space: nowrap; }
.k4s-ticker-text { display: inline-block; white-space: nowrap; padding-right: 100%; color: #fff; font-size: 10px; animation: k4s-ticker 25s linear infinite; direction: rtl; }

@keyframes k4s-ticker { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.k4s-clock-box { background: #ff3333; height: 100%; padding: 0 10px; display: flex; align-items: center; color: white; font-weight: bold; font-size: 11px; margin-left: auto; }
#k4s-city { font-size: 8px; margin-right: 5px; opacity: 0.8; }
</style>

<script>
let hideTimeout;
const screen = document.getElementById('mainScreen');
const touchLayer = document.getElementById('touch-layer');
const hintText = document.getElementById('k4s-hint-text');
const footerUI = document.getElementById('k4s-footer-ui');

function updateClock() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const timeEl = document.getElementById('k4s-time');
    if(timeEl) timeEl.textContent = hours + ":" + minutes;
}
setInterval(updateClock, 1000);
updateClock();

function userActivity() {
    screen.classList.add('user-active');
    touchLayer.style.display = 'none';
    clearTimeout(hideTimeout);
    hideTimeout = setTimeout(() => {
        screen.classList.remove('user-active');
        touchLayer.style.display = 'block';
    }, 4000);
}

userActivity();
screen.addEventListener('mousemove', userActivity);
screen.addEventListener('touchstart', userActivity, {passive: true});
screen.addEventListener('click', userActivity);

function showSubMenu(id) {
    document.getElementById('mainMenu').style.display = 'none';
    const sub = document.getElementById('subMenu-' + id);
    if(sub) sub.style.display = 'flex';
}

function backToMain() {
    document.querySelectorAll('.sub-menu').forEach(m => m.style.display = 'none');
    document.getElementById('mainMenu').style.display = 'flex';
}

function playMain(el) {
    hintText.style.display = 'block';
    footerUI.style.display = 'flex'; // إظهار الشريط في الرئيسية
    document.getElementById('tvContainer').classList.remove('is-playing-yt');
    document.getElementById('video-display').innerHTML = `
        <video id="mainPlayer" autoplay loop playsinline muted style="width:100%; height:100%; object-fit:cover; background:#000;">
            <source src="https://kurd4sat.com/live/66.mp4" type="video/mp4">
        </video>`;
    document.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'));
    el.classList.add('active');
}

function playYoutube(id, el) {
    hintText.style.display = 'none';
    footerUI.style.display = 'none'; // إخفاء الشريط في قنوات يوتيوب
    document.getElementById('tvContainer').classList.add('is-playing-yt');
    const ytUrl = "https://youtube.com/embed/" + id + "?autoplay=1&mute=1&controls=1&rel=0&fs=1&enablejsapi=1";
    document.getElementById('video-display').innerHTML = `<iframe width="100%" height="100%" src="${ytUrl}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`;
    document.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'));
    el.classList.add('active');
}

// === التمرير الأفقي بعجلة الماوس + السحب ===
const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);

// إيجاد القائمة المرئية حالياً (الرئيسية أو الفرعية)
function getVisibleMenu() {
    const menus = document.querySelectorAll('.k4s-overlay-menu');
    for (const m of menus) {
        if (m.offsetParent !== null && getComputedStyle(m).display !== 'none') return m;
    }
    return null;
}

// تمرير عجلة الماوس من أي مكان على الشاشة → يحرّك القائمة الظاهرة
screen.addEventListener('wheel', function(e) {
    const m = getVisibleMenu();
    if (!m) return;
    if (m.scrollWidth <= m.clientWidth) return;
    const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
    if (!delta) return;
    e.preventDefault();
    m.scrollLeft += delta;
    userActivity();
}, { passive: false });

// السحب بالماوس على القائمة (اللمس يعمل بشكل طبيعي عبر المتصفح)
function enableMouseDrag(el) {
    if (!el || el.dataset.dragEnabled) return;
    el.dataset.dragEnabled = '1';
    if (isTouchDevice) return;
    el.style.cursor = 'grab';

    let isDown = false, startX = 0, startScroll = 0, moved = false;
    el.addEventListener('mousedown', function(e) {
        isDown = true; moved = false;
        startX = e.pageX;
        startScroll = el.scrollLeft;
        el.style.cursor = 'grabbing';
    });
    el.addEventListener('mouseleave', function() { isDown = false; el.style.cursor = 'grab'; });
    el.addEventListener('mouseup',    function() { isDown = false; el.style.cursor = 'grab'; });
    el.addEventListener('mousemove', function(e) {
        if (!isDown) return;
        const dx = e.pageX - startX;
        if (Math.abs(dx) > 4) moved = true;
        el.scrollLeft = startScroll - dx;
    });
    el.addEventListener('click', function(e) {
        if (moved) { e.stopPropagation(); e.preventDefault(); moved = false; }
    }, true);
}

document.querySelectorAll('.k4s-overlay-menu').forEach(enableMouseDrag);
</script>
            </div>
        </div>
        
            
    <div class="block-outer block-outer--after">
        <ul class="listInline listInline--bullet">
            <li><dl class="pairs pairs--inline">
                <dt>نشرت</dt>
                <dd>30/3/2026</dd>
            </dl></li>
            <li><dl class="pairs pairs--inline">
                <dt>مشاهدات الصفحة</dt>
                <dd>2.999</dd>
            </dl></li>
        </ul>
    </div>

        
    </div>