مساحة إعلانية

الأربعاء، 7 مايو 2025

الأربعاء، 7 مايو 2025

كود [HTML] سيرفرات مشاهدات الافلام و المسلسلات و البث المباشر للقنوات

القسم : مواقع ahlamontada الكاتب :

بناء مشغل فيديو احترافي متعدد السيرفرات (مشاهدة وتحميل) لمدونتك بسهولة مع كود HTML, CSS, و JavaScript جاهز 



السلام عليكم و رحمة الله وبركاته 

اليوم اقدم لكم كود JAVA & CSS & HTML 
لتركيب سيرفرات عرض اون لاين افلام و بث مباشر للقنوات و المبارايات 

الكود متواجد مشابه له على العديد من المواقع لكن هذا حصري و خاص برمجتي 




لمعاينة الكود مباشر من هنا  

الكود تم برمجته JAVA & CSS & HTML

و يمكنك التعديل عليه حسب الالوان التى تناسب موقعك او طلب التعديل عليه من خلال هذا الرابط



كما يمكنك طلب تصميم و برمجة الاكواد التى تحتاجه الى موقعك طلبات مجانا

و الان الى الكود الاول






  
  <style>
    /* !IMPORTANT: هذا الـ CSS مصمم خصيصًا لصفحة المشغل داخل مدونة a7la7ekaya.online */
    /* قد تحتاج إلى تعديلات طفيفة إذا تغير القالب أو إذا استخدمته في مكان آخر */

    /* --- إعادة تعيين أساسية للعناصر داخل المشغل --- */
    .custom-video-player-wrapper *,
    .custom-video-player-wrapper *::before,
    .custom-video-player-wrapper *::after {
        box-sizing: border-box; /* ضمان نموذج صندوق متوقع */
        margin: 0;
        padding: 0;
        border-width: 0; /* إزالة أي حدود افتراضية قد يضيفها القالب */
        font-family: 'Tajawal', Arial, sans-serif !important; /* فرض الخط، استخدم !important بحذر */
        line-height: 1.5 !important; /* فرض ارتفاع السطر */
    }

    .custom-video-player-wrapper {
        direction: rtl; /* ضمان الاتجاه الصحيح */
        text-align: right; /* محاذاة النص لليمين */
        width: 100%;
        max-width: 850px; /* يمكنك تعديل هذا */
        margin: 20px auto; /* توسط في الصفحة */
        padding: 15px;
        background-color: #f9f9f9; /* خلفية فاتحة جدًا للحاوية */
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.07);
        color: #333; /* لون النص الأساسي داخل المشغل */
    }

    .custom-video-player-wrapper .player-top-message {
        background-color: #e3f2fd; /* أزرق فاتح جدًا للرسالة */
        color: #0d47a1; /* أزرق داكن للنص */
        padding: 10px 12px;
        text-align: center;
        font-size: 0.9em !important;
        margin-bottom: 15px;
        border-radius: 4px;
        border: 1px solid #bbdefb; /* حد أزرق فاتح */
    }

    .custom-video-player-wrapper .servers-selection-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start; /* تبدأ الأزرار من اليمين */
        gap: 8px;
        margin-bottom: 15px;
        padding: 8px;
        background-color: #eceff1; /* رمادي فاتح جدًا لخلفية شريط السيرفرات */
        border-radius: 4px;
    }

    .custom-video-player-wrapper .server-action-button,
    .custom-video-player-wrapper .download-action-link {
        background-color: #007bff; /* أزرق القالب الأساسي */
        color: #ffffff !important; /* نص أبيض للزر */
        border: none; /* إزالة أي حدود قد يضيفها القالب */
        padding: 7px 12px !important; /* تعديل الحشو */
        cursor: pointer;
        border-radius: 4px;
        font-size: 0.85em !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        transition: background-color 0.2s ease-in-out;
        line-height: 1.4 !important; /* ضمان ارتفاع سطر مناسب داخل الزر */
        box-shadow: none !important; /* إزالة أي ظل قد يضيفه القالب للأزرار */
        text-transform: none !important; /* إزالة أي تحويل لحالة الأحرف */
    }

    .custom-video-player-wrapper .server-action-button:hover,
    .custom-video-player-wrapper .download-action-link:hover {
        background-color: #0056b3; /* أزرق أغمق عند التمرير */
        color: #ffffff !important;
    }

    .custom-video-player-wrapper .server-action-button.active-server {
        background-color: #28a745; /* أخضر للسيرفر النشط (أو يمكنك اختيار #0056b3) */
        color: #ffffff !important;
        font-weight: bold !important;
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.5) !important; /* ظل خفيف للنشط */
    }

    .custom-video-player-wrapper .server-action-button .btn-icon,
    .custom-video-player-wrapper .download-action-link .btn-icon {
        margin-right: 5px; /* أيقونة على يمين النص */
        font-size: 1em;
        line-height: 1 !important; /* لضمان محاذاة الأيقونة بشكل جيد */
    }

    .custom-video-player-wrapper .video-iframe-container {
        width: 100%;
        background-color: #000000;
        position: relative;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
        margin-bottom: 15px;
        border-radius: 4px;
        overflow: hidden;
    }

    .custom-video-player-wrapper .video-iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important; /* فرض العرض الكامل */
        height: 100% !important; /* فرض الارتفاع الكامل */
        border: none !important; /* ضمان عدم وجود حدود */
    }

    .custom-video-player-wrapper .downloads-area {
        background-color: #e9ecef; /* خلفية مشابهة للرسالة العلوية أو أفتح */
        padding: 12px;
        text-align: center;
        border-radius: 4px;
        margin-top: 15px;
    }

    .custom-video-player-wrapper .downloads-area .downloads-header-text {
        color: #343a40; /* نص داكن للعنوان */
        font-size: 1em !important;
        margin-bottom: 10px;
        font-weight: bold !important;
    }
    .custom-video-player-wrapper .downloads-area .downloads-header-text .cloud-symbol {
        margin-left: 5px; /* أيقونة السحابة بعد النص */
        font-size: 1.1em;
    }
    .custom-video-player-wrapper .downloads-area .servers-selection-bar { /* إعادة استخدام شريط السيرفرات للتحميل */
        background-color: transparent; /* بدون خلفية إضافية هنا */
        padding: 0;
        justify-content: center; /* توسط أزرار التحميل */
    }
    .custom-video-player-wrapper .downloads-area .download-action-link {
        background-color: #17a2b8; /* أزرق سماوي (Cyan) لأزرار التحميل */
    }
    .custom-video-player-wrapper .downloads-area .download-action-link:hover {
        background-color: #117a8b; /* أغمق عند التمرير */
    }

    /* رسائل في حال عدم توفر سيرفرات */
    .custom-video-player-wrapper .servers-selection-bar p {
        color: #555;
        font-size: 0.9em !important;
        width: 100%;
        text-align: center;
        padding: 5px 0 !important;
    }
</style>
  <div id="customPlayerWrapper" style="direction: rtl; text-align: right; width: 100%; max-width: 800px; margin: 25px auto; padding: 15px; background-color: #f4f6f8; border: 1px solid #d1d8e0; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.08); font-family: 'Tajawal', Arial, sans-serif; color: #333;">

    <div id="playerTopMessage" style="background-color: #e6f7ff; color: #00529b; padding: 10px; text-align: center; font-size: 0.9em; margin-bottom: 15px; border-radius: 4px; border: 1px solid #b3e0ff;">
        💡 إذا كان السيرفر بطيئًا أو لا يعمل، يُرجى تجربة سيرفر آخر.
    </div>

    <div id="viewingServersContainer" style="display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin-bottom: 15px; padding: 8px; background-color: #e9ecef; border-radius: 4px;">
        <!-- أزرار سيرفرات المشاهدة ستُدرج هنا بواسطة JavaScript -->
    </div>

    <div id="videoEmbedWrapper" style="width: 100%; background-color: #000; position: relative; padding-top: 56.25%; margin-bottom: 15px; border-radius: 4px; overflow: hidden;">
        <iframe id="activeVideoIframe"
                src="about:blank"
                allowfullscreen
                allow="autoplay; encrypted-media"
                scrolling="no"
                frameborder="0"
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
        </iframe>
    </div>

    <div id="downloadLinksArea" style="background-color: #f0f4f7; padding: 12px; text-align: center; border-radius: 4px; margin-top: 15px; border: 1px solid #dfe6ec;">
        <div id="downloadsHeaderText" style="color: #2c3e50; font-size: 1.05em; margin-bottom: 10px; font-weight: bold;">
            <span style="margin-left: 5px; font-size: 1.1em;">☁️</span> روابط تحميل مباشرة
        </div>
        <div id="downloadServersContainer" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;">
            <!-- روابط/أزرار سيرفرات التحميل ستُدرج هنا -->
        </div>
    </div>
</div>

<script>
    // --- بيانات السيرفرات (قم بتحديث هذه الروابط!) ---
    const viewingServersData = [
        { id: "server1", name: "سيرفر 1", embedUrl: "https://uqload.co/embed-YOUR_ID_HERE.html", icon: "►" },
        { id: "server2", name: "سيرفر 2", embedUrl: "https://ok.ru/videoembed/YOUR_OKRU_ID_HERE", icon: "►" },
        { id: "server3", name: "سيرفر 3 (Filemoon)", embedUrl: "https://filemoon.sx/e/YOUR_FILEMOON_ID_HERE", icon: "►" },
        // أضف المزيد من سيرفرات المشاهدة هنا
    ];

    const downloadServersData = [
        { name: "تحميل مباشر (أ)", url: "YOUR_DIRECT_DOWNLOAD_LINK_1", icon: "💾" },
        { name: "تحميل مباشر (ب)", url: "YOUR_DIRECT_DOWNLOAD_LINK_2", icon: "💾" },
        // أضف المزيد من روابط التحميل هنا
    ];

    // --- عناصر DOM ---
    const videoIframeElement = document.getElementById('activeVideoIframe');
    const viewingServersDiv = document.getElementById('viewingServersContainer');
    const downloadServersDiv = document.getElementById('downloadServersContainer');
    let currentActiveButton = null;

    const playIconChar = "";
    const activeIconChar = ""; // أو أيقونة تفضلها للسيرفر النشط

    // --- نمط الأزرار (Inline CSS) ---
    const buttonBaseStyle = "color: #ffffff; border: none; padding: 7px 12px; cursor: pointer; border-radius: 4px; font-size: 0.85em; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; transition: background-color 0.2s ease-in-out; line-height: 1.4; margin: 0; text-transform: none;";
    const viewingButtonDefaultBg = "background-color: #007bff;"; // أزرق
    const viewingButtonHoverBg = "background-color: #0056b3;";
    const viewingButtonActiveBg = "background-color: #28a745;"; // أخضر للنشط
    const downloadButtonDefaultBg = "background-color: #17a2b8;"; // سماوي للتحميل
    const downloadButtonHoverBg = "background-color: #117a8b;";
    const iconStyle = "margin-right: 5px; font-size: 1em; line-height: 1;";


    // --- وظيفة تحميل سيرفر المشاهدة ---
    function activateViewingServer(serverData, buttonElement) {
        if (videoIframeElement) {
            videoIframeElement.src = serverData.embedUrl;
        }

        if (currentActiveButton) {
            currentActiveButton.style.cssText = buttonBaseStyle + viewingButtonDefaultBg; // إعادة للون الافتراضي
            const oldIcon = currentActiveButton.querySelector('.server-icon-span');
            if (oldIcon) oldIcon.textContent = playIconChar;
        }
        buttonElement.style.cssText = buttonBaseStyle + viewingButtonActiveBg; // تلوين الزر النشط
        const newIcon = buttonElement.querySelector('.server-icon-span');
        if (newIcon) newIcon.textContent = activeIconChar;
        currentActiveButton = buttonElement;
    }

    // --- بناء أزرار المشاهدة ---
    if (viewingServersDiv && viewingServersData.length > 0) {
        viewingServersData.forEach((server, index) => {
            const button = document.createElement('button');
            button.style.cssText = buttonBaseStyle + viewingButtonDefaultBg;
            button.onmouseover = function() { if (this !== currentActiveButton) this.style.backgroundColor = '#0056b3'; }; // Hover
            button.onmouseout = function() { if (this !== currentActiveButton) this.style.backgroundColor = '#007bff'; }; // Mouse out

            const textNode = document.createTextNode(server.name + " ");
            button.appendChild(textNode);

            const iconSpan = document.createElement('span');
            iconSpan.className = 'server-icon-span'; // لإمكانية تحديث الأيقونة
            iconSpan.style.cssText = iconStyle;
            iconSpan.textContent = playIconChar;
            button.appendChild(iconSpan);

            button.onclick = () => activateViewingServer(server, button);
            viewingServersDiv.appendChild(button);

            if (index === 0) { // تفعيل أول سيرفر تلقائيًا
                activateViewingServer(server, button); // استدعاء لتحميل وتفعيل أول زر
            }
        });
    } else if (viewingServersDiv) {
        viewingServersDiv.innerHTML = '<p style="color: #555; font-size: 0.9em; width: 100%; text-align: center; padding: 5px 0;">عذرًا، لا توجد سيرفرات مشاهدة متاحة حاليًا.</p>';
        if(videoIframeElement) videoIframeElement.style.display = 'none';
    }

    // --- بناء روابط التحميل ---
    if (downloadServersDiv && downloadServersData.length > 0) {
        downloadServersData.forEach(server => {
            const link = document.createElement('a');
            link.href = server.url;
            link.target = "_blank";
            link.rel = "noopener noreferrer nofollow";
            link.style.cssText = buttonBaseStyle + downloadButtonDefaultBg;
            link.onmouseover = function() { this.style.backgroundColor = '#117a8b'; }; // Hover
            link.onmouseout = function() { this.style.backgroundColor = '#17a2b8'; };  // Mouse out


            const textNode = document.createTextNode(server.name + " ");
            link.appendChild(textNode);

            if (server.icon) {
                const iconSpan = document.createElement('span');
                iconSpan.style.cssText = iconStyle;
                iconSpan.textContent = server.icon;
                link.appendChild(iconSpan);
            }
            downloadServersDiv.appendChild(link);
        });
    } else if (downloadServersDiv) {
        downloadServersDiv.innerHTML = '<p style="color: #555; font-size: 0.9em; width: 100%; text-align: center; padding: 5px 0;">لا توجد روابط تحميل متاحة حاليًا.</p>';
    }
</script>


و الكود الثاني 




  
 
<!-- ابدأ النسخ من هنا -->
<style>
    /* Force base styles for the player wrapper and its children */
    #playerContainerUnique * {
        margin: 0 !important;
        padding: 0 !important;
        border-width: 0 !important; /* Reset borders */
        box-sizing: border-box !important;
        font-family: 'Tahoma', Arial, sans-serif !important;
        line-height: 1.5 !important;
        text-align: right !important; /* For RTL */
        font-size: 14px !important; /* Base font size for player elements */
        color: #333 !important; /* Default text color */
        background: none !important; /* Reset background */
        box-shadow: none !important; /* Reset shadows */
        text-transform: none !important; /* Reset text transform */
    }

    #playerContainerUnique {
        direction: rtl !important;
        width: 100% !important;
        max-width: 800px !important;
        margin: 25px auto !important;
        padding: 15px !important;
        background-color: #f0f2f5 !important; /* Light grey background for container */
        border: 1px solid #d9dce0 !important;
        border-radius: 6px !important;
    }

    #playerContainerUnique .player-message-bar {
        background-color: #e6f7ff !important;
        color: #005f99 !important;
        padding: 10px !important;
        text-align: center !important;
        font-size: 0.9em !important; /* Relative to parent */
        margin-bottom: 15px !important;
        border-radius: 4px !important;
        border: 1px solid #b3d9ff !important;
    }

    #playerContainerUnique .servers-button-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important; /* Center buttons */
        gap: 8px !important;
        margin-bottom: 15px !important;
        padding: 10px !important;
        background-color: #e9edf0 !important;
        border-radius: 4px !important;
    }

    #playerContainerUnique .server-btn,
    #playerContainerUnique .download-btn-link {
        background-color: #007bff !important; /* Blue */
        color: #ffffff !important;
        padding: 8px 12px !important;
        cursor: pointer !important;
        border-radius: 4px !important;
        font-size: 0.85em !important; /* Relative to parent */
        font-weight: 500 !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        border: 1px solid transparent !important; /* For consistent size */
        transition: background-color 0.2s, border-color 0.2s !important;
    }

    #playerContainerUnique .server-btn:hover,
    #playerContainerUnique .download-btn-link:hover {
        background-color: #0056b3 !important; /* Darker blue */
    }

    #playerContainerUnique .server-btn.active-srv {
        background-color: #28a745 !important; /* Green for active */
        border-color: #1e7e34 !important; /* Darker green border */
        font-weight: bold !important;
    }

    #playerContainerUnique .btn-icon-style {
        margin-right: 5px !important; /* For RTL */
        font-size: 1em !important; /* Relative to button font size */
        line-height: 1 !important;
    }

    #playerContainerUnique .video-player-area {
        width: 100% !important;
        background-color: #000000 !important;
        position: relative !important;
        padding-top: 56.25% !important; /* 16:9 */
        margin-bottom: 15px !important;
        border-radius: 4px !important;
        overflow: hidden !important;
    }

    #playerContainerUnique .video-player-area iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }

    #playerContainerUnique .downloads-wrapper {
        background-color: #f8f9fa !important; /* Very light grey */
        padding: 15px !important;
        text-align: center !important;
        border-radius: 4px !important;
        margin-top: 10px !important;
        border: 1px solid #e9ecef !important;
    }

    #playerContainerUnique .downloads-wrapper .downloads-title {
        color: #343a40 !important;
        font-size: 1.05em !important; /* Relative to parent */
        margin-bottom: 10px !important;
        font-weight: bold !important;
    }
    #playerContainerUnique .downloads-wrapper .downloads-title .cloud-icon-style {
        margin-left: 6px !important;
        font-size: 1.1em !important;
    }
    #playerContainerUnique .downloads-wrapper .download-btn-link {
        background-color: #17a2b8 !important; /* Teal for download buttons */
    }
    #playerContainerUnique .downloads-wrapper .download-btn-link:hover {
        background-color: #117a8b !important; /* Darker teal */
    }
     #playerContainerUnique .no-servers-message {
        color: #555 !important;
        font-size: 0.9em !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 0 !important;
    }
</style>

<div id="playerContainerUnique">
    <div class="player-message-bar">
        💡 إذا كان السيرفر بطيئًا أو لا يعمل، يُرجى تجربة سيرفر آخر.
    </div>

    <div class="servers-button-bar" id="playerViewServersArea">
        <!-- Viewing server buttons will be injected here -->
    </div>

    <div class="video-player-area">
        <iframe id="videoOutputFrame" src="about:blank" allowfullscreen scrolling="no"></iframe>
    </div>

    <div class="downloads-wrapper">
        <div class="downloads-title">
            <span class="cloud-icon-style">☁️</span> روابط تحميل مباشرة
        </div>
        <div class="servers-button-bar" id="playerDownloadServersArea">
            <!-- Download server buttons will be injected here -->
        </div>
    </div>
</div>

<script>
    // --- بيانات السيرفرات (هام: استبدل بالروابط الصحيحة!) ---
    const viewingSourcesList = [
        { id: "ok", name: "سيرفر OK", embedUrl: "https://ok.ru/videoembed/YOUR_OKRU_ID_HERE" },
        { id: "uq", name: "سيرفر Uqload", embedUrl: "https://uqload.co/embed-YOUR_UQLOAD_ID_HERE.html" },
        { id: "fm", name: "سيرفر Filemoon", embedUrl: "https://filemoon.sx/e/YOUR_FILEMOON_ID_HERE" },
    ];
    const downloadSourcesList = [
        { name: "تحميل مباشر 1", url: "YOUR_DIRECT_DOWNLOAD_LINK_1", icon: "💾" },
        { name: "تحميل مباشر 2", url: "YOUR_DIRECT_DOWNLOAD_LINK_2", icon: "💾" },
    ];

    const videoFrameEl = document.getElementById('videoOutputFrame');
    const viewingServersAreaEl = document.getElementById('playerViewServersArea');
    const downloadServersAreaEl = document.getElementById('playerDownloadServersArea');
    let currentActiveViewButton = null;

    const iconForPlay = "";
    const iconForActive = "";

    function setViewingServer(serverData, buttonClicked) {
        if (videoFrameEl) videoFrameEl.src = serverData.embedUrl;

        if (currentActiveViewButton) {
            currentActiveViewButton.classList.remove('active-srv');
            const oldIcon = currentActiveViewButton.querySelector('.btn-icon-style');
            if (oldIcon) oldIcon.textContent = iconForPlay;
        }
        buttonClicked.classList.add('active-srv');
        const newIcon = buttonClicked.querySelector('.btn-icon-style');
        if (newIcon) newIcon.textContent = iconForActive;
        currentActiveViewButton = buttonClicked;
    }

    if (viewingServersAreaEl && viewingSourcesList.length > 0) {
        viewingSourcesList.forEach((server, index) => {
            const button = document.createElement('button');
            button.className = 'server-btn'; // Apply base class
            button.id = `view_btn_${server.id || index}`;

            const textNode = document.createTextNode(server.name + " ");
            button.appendChild(textNode);

            const iconEl = document.createElement('span');
            iconEl.className = 'btn-icon-style'; // Class for icon styling
            iconEl.textContent = iconForPlay;
            button.appendChild(iconEl);

            button.onclick = () => setViewingServer(server, button);
            viewingServersAreaEl.appendChild(button);

            if (index === 0) {
                setViewingServer(server, button); // Activate first server
            }
        });
    } else if (viewingServersAreaEl) {
        viewingServersAreaEl.innerHTML = '<p class="no-servers-message">لا توجد سيرفرات مشاهدة متاحة حاليًا.</p>';
        if (videoFrameEl) videoFrameEl.style.display = 'none !important'; // Hide if no servers
    }

    if (downloadServersAreaEl && downloadSourcesList.length > 0) {
        downloadSourcesList.forEach(server => {
            const link = document.createElement('a');
            link.className = 'download-btn-link'; // Apply base class
            link.href = server.url;
            link.target = "_blank";
            link.rel = "noopener noreferrer";

            const textNode = document.createTextNode(server.name + " ");
            link.appendChild(textNode);

            if (server.icon) {
                const iconEl = document.createElement('span');
                iconEl.className = 'btn-icon-style';
                iconEl.textContent = server.icon;
                link.appendChild(iconEl);
            }
            downloadServersAreaEl.appendChild(link);
        });
    } else if (downloadServersAreaEl) {
        downloadServersAreaEl.innerHTML = '<p class="no-servers-message">لا توجد روابط تحميل متاحة حاليًا.</p>';
    }
</script>
<!-- انتهي من النسخ هنا -->


 الكود الثالث 



  


    <style>
    /* --- إعادة تعيين أساسية وتحديد الخط --- */
    body { /* هذا لن يؤثر كثيرًا عند وضع الكود داخل بلوجر، القالب هو المتحكم */
        font-family: 'Tajawal', 'Tahoma', sans-serif; /* استخدام Tajawal إذا كان متاحًا */
        margin: 0;
        /* background-color: #f8f9fa;  سيتم تجاهل هذا داخل المدونة */
        /* color: #212529; سيتم تجاهل هذا داخل المدونة */
    }

    /* --- حاوية المشغل الرئيسية --- */
    .container { /* هذا هو العنصر الذي سيظهر داخل تدوينتك */
        width: 100%;
        max-width: 850px; /* يمكنك تعديل هذا العرض */
        margin: 20px auto; /* للتوسيط إذا كانت التدوينة تسمح بذلك */
        background-color: #ffffff; /* خلفية بيضاء للحاوية */
        color: #333333; /* لون نص داكن */
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid #e0e0e0; /* حد رمادي فاتح */
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* ظل خفيف */
        direction: rtl; /* ضمان الاتجاه لليمين */
        text-align: right; /* محاذاة النص لليمين */
    }

    /* --- الرسالة العلوية --- */
    .container .top-message {
        background-color: #e3f2fd; /* خلفية زرقاء فاتحة جدًا */
        color: #0d47a1; /* نص أزرق داكن */
        padding: 10px 12px;
        text-align: center;
        font-size: 0.9em;
        margin-bottom: 15px;
        border-radius: 4px;
        border: 1px solid #bbdefb; /* حد أزرق فاتح */
    }

    /* --- شريط اختيار السيرفرات (للمشاهدة والتحميل) --- */
    .container .server-selector {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* توسط الأزرار */
        gap: 8px; /* مسافة بين الأزرار */
        margin-bottom: 15px;
        padding: 10px;
        background-color: #f1f3f5; /* خلفية رمادية فاتحة جدًا للشريط */
        border-radius: 4px;
    }

    /* --- الأزرار وروابط التحميل العامة --- */
    .container .server-selector button,
    .container .server-selector a.button-link {
        background-color: #007bff; /* أزرق أساسي */
        color: #ffffff !important; /* نص أبيض، !important لضمان التطبيق */
        border: none;
        padding: 8px 14px;
        margin: 0; /* الهامش يتم التحكم به عبر gap */
        cursor: pointer;
        border-radius: 4px;
        font-size: 0.85em;
        font-weight: 500;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        transition: background-color 0.2s ease-in-out;
        line-height: 1.4; /* لضمان ارتفاع مناسب للنص داخل الزر */
        box-shadow: none; /* إزالة أي ظلال قد يضيفها القالب */
        text-transform: none; /* إزالة أي تحويل لحالة الأحرف */
    }

    .container .server-selector button:hover,
    .container .server-selector a.button-link:hover {
        background-color: #0056b3; /* أزرق أغمق عند التمرير */
    }

    /* --- زر سيرفر المشاهدة النشط --- */
    .container .server-selector button.active {
        background-color: #28a745; /* أخضر للتمييز (أو #0056b3 إذا أردت أزرق أغمق) */
        border: 1px solid #1e7e34; /* حد متناسق */
        font-weight: bold;
    }

    /* --- أيقونات الأزرار --- */
    .container .server-selector button .icon,
    .container .server-selector a.button-link .icon {
        margin-right: 6px; /* أيقونة على يمين النص في RTL */
        margin-left: 0; /* إلغاء الهامش الأيسر */
        font-size: 1em;
        line-height: 1;
    }

    /* --- حاوية مشغل الفيديو --- */
    .container #video-player-container {
        width: 100%;
        background-color: #000000; /* خلفية سوداء للمشغل */
        position: relative;
        padding-top: 56.25%; /* نسبة 16:9 */
        margin-bottom: 15px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #cccccc; /* حد رمادي حول المشغل */
    }

    .container #video-player-container #video-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    /* --- قسم التحميل --- */
    .container .download-section {
        background-color: #f8f9fa; /* خلفية رمادية فاتحة جدًا لقسم التحميل */
        padding: 15px;
        text-align: center;
        border-radius: 4px;
        margin-top: 15px; /* مسافة من مشغل الفيديو */
        border: 1px solid #e9ecef;
    }

    .container .download-section .download-header {
        color: #343a40; /* نص داكن لعنوان التحميل */
        font-size: 1.1em;
        margin-bottom: 10px;
        font-weight: bold;
    }
    .container .download-section .download-header .cloud-icon {
        margin-left: 8px; /* أيقونة السحابة بعد النص في RTL */
        margin-right: 0;
        font-size: 1.2em;
    }

    /* --- أزرار التحميل في قسم التحميل --- */
    /* (ترث معظم الأنماط من .server-selector button) */
    .container .download-section .server-selector a.button-link,
    .container .download-section .server-selector button { /* إذا استخدمت أزرار بدلاً من روابط */
        background-color: #17a2b8; /* لون سماوي (Teal/Cyan) لأزرار التحميل */
        color: #ffffff !important;
    }
    .container .download-section .server-selector a.button-link:hover,
    .container .download-section .server-selector button:hover {
        background-color: #117a8b; /* أغمق عند التمرير */
    }

    /* --- رسائل عند عدم توفر سيرفرات --- */
    .container .server-selector p {
        color: #555555;
        font-size: 0.9em;
        width: 100%;
        text-align: center;
        padding: 8px 0;
    }
</style>

    <div class="container">
        <div class="top-message">
            إذا كان السيرفر بطئ او لا يعمل يرجي الانتقال الي سيرفر اخر
        </div>

        <div class="server-selector" id="viewing-servers-container">
            <!-- أزرار سيرفرات المشاهدة ستضاف هنا بواسطة JavaScript -->
        </div>

        <div id="video-player-container">
            <iframe id="video-iframe"
                    src=""
                    allowfullscreen
                    scrolling="no"
                    frameborder="0">
            </iframe>
        </div>

        <div class="download-section">
            <div class="download-header">
                <span class="cloud-icon">☁️</span> اضغط هنا للذهاب الي سيرفرات التحميل
            </div>
            <div class="server-selector" id="download-servers-container">
                <!-- أزرار/روابط سيرفرات التحميل ستضاف هنا -->
            </div>
        </div>
    </div>

    <script>
        // --- بيانات سيرفرات المشاهدة ---
        const viewingServers = [
            { name: "سيرفر 1", embedUrl: "https://uqload.co/embed-abcdefgh.html" }, // استبدل بالرابط الصحيح
            { name: "سيرفر 2", embedUrl: "https://ok.ru/videoembed/123456789" }, // استبدل بالرابط الصحيح
            { name: "سيرفر 3", embedUrl: "https://filemoon.sx/e/zyxwvt..." },      // استبدل بالرابط الصحيح
            { name: "سيرفر 4", embedUrl: "https://another.server/embed/example1" },
            { name: "سيرفر 5", embedUrl: "https://another.server/embed/example2" },
            { name: "سيرفر 6", embedUrl: "https://another.server/embed/example3" }
        ];

        // --- بيانات سيرفرات التحميل ---
        // هذه يجب أن تكون روابط مباشرة للملف أو لصفحة التحميل
        const downloadServers = [
            { name: "تحميل (سيرفر أ)", downloadUrl: "https://download.server1.com/file.mp4" }, // استبدل
            { name: "تحميل (سيرفر ب)", downloadUrl: "https://download.server2.com/page/file-xyz" }, // استبدل
            { name: "تحميل (سيرفر ج)", downloadUrl: "https://download.server3.com/get/movie-part1" } // استبدل
        ];

        const videoIframe = document.getElementById('video-iframe');
        const viewingServersContainer = document.getElementById('viewing-servers-container');
        const downloadServersContainer = document.getElementById('download-servers-container');
        let currentActiveViewingButton = null;

        // أيقونات (يمكنك استخدام FontAwesome أو SVGs لتصاميم أفضل)
        const playIcon = ""; // أو "▶"
        const pauseIcon = ""; // أو "⏸"

        // --- وظيفة تحميل سيرفر المشاهدة ---
        function loadViewingServer(serverData, buttonElement) {
            videoIframe.src = serverData.embedUrl;

            if (currentActiveViewingButton) {
                currentActiveViewingButton.classList.remove('active');
                currentActiveViewingButton.querySelector('.icon').textContent = playIcon;
            }
            buttonElement.classList.add('active');
            buttonElement.querySelector('.icon').textContent = pauseIcon;
            currentActiveViewingButton = buttonElement;
        }

        // --- إنشاء أزرار سيرفرات المشاهدة ---
        viewingServers.forEach((server, index) => {
            const button = document.createElement('button');
            const iconSpan = document.createElement('span');
            iconSpan.classList.add('icon');
            iconSpan.textContent = playIcon;

            button.appendChild(document.createTextNode(server.name + " ")); // مسافة قبل الأيقونة
            button.appendChild(iconSpan);

            button.onclick = () => {
                loadViewingServer(server, button);
            };
            viewingServersContainer.appendChild(button);

            // تحميل أول سيرفر مشاهدة تلقائيًا
            if (index === 0) {
                loadViewingServer(server, button); // استدعاء لتحميل وتفعيل أول زر
            }
        });

        // --- إنشاء أزرار/روابط سيرفرات التحميل ---
        downloadServers.forEach(server => {
            const link = document.createElement('a');
            link.href = server.downloadUrl;
            link.textContent = server.name;
            link.classList.add('button-link'); // لتطبيق نفس تنسيق الأزرار
            link.target = "_blank"; // لفتح الرابط في تبويب جديد
            // يمكنك إضافة أيقونة تحميل هنا إذا أردت
            // const downloadIcon = document.createElement('span');
            // downloadIcon.classList.add('icon');
            // downloadIcon.textContent = '💾'; // مثال أيقونة
            // link.appendChild(downloadIcon);
            downloadServersContainer.appendChild(link);
        });

        // رسالة إذا لم تكن هناك سيرفرات
        if (viewingServers.length === 0) {
            viewingServersContainer.innerHTML = "<p>لا توجد سيرفرات مشاهدة متاحة حاليًا.</p>";
            videoIframe.style.display = 'none'; // إخفاء المشغل إذا لا توجد سيرفرات
        }
        if (downloadServers.length === 0) {
            downloadServersContainer.innerHTML = "<p>لا توجد روابط تحميل متاحة حاليًا.</p>";
        }

    </script>


لكي يصلك كل جديد يرجي متابعتنا و ترك تعليق مناسب 

و بالنهاية لا تنسونا بالدعاء
مواضيع مقترحة شارك
روابط الموضوع للنسخ
رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي

ليست هناك تعليقات:

الاشتراك في: تعليقات الرسالة (Atom)
جميع الحقوق محفوظة لــ شبكة احلي حكاية 2017 ©
⚙️

الألوان

الوضع الليلي

تفعيل الوضع الليلي

الشريط الجانبي

إظهار الشريط الجانبي

نوع الخط

حجم الخط

--px