زر تنزيل محمي بكلمة مرور مع نافذة منبثقة احترافي
في هذا الشرح ستأخذ سكربت جاهز يضيف زر تنزيل محمي بكلمة مرور يفتح نافذة منبثقة احترافية للتحقق، ثم يعرض شريط تجهيز/تحميل لمدة تحددها (مثل 20 ثانية) قبل تفعيل زر التحميل النهائي. السكربت مصمم بكلاسات حصرية حتى لا يتعارض مع CSS القالب أو المقال.
ملاحظة مهمة هذا “حماية خفيفة” (للزائر العادي)، وليس نظام حماية سيرفر. أي شخص خبير يمكنه الوصول للرابط إذا كان ظاهرًا في الصفحة. الأفضل دائمًا استخدام روابط مؤقتة من السيرفر إن كانت الملفات حساسة جدًا.
![]() |
| زر تنزيل محمي بكلمة مرور مع نافذة منبثقة وعداد تحميل احترافي مجانًا. |
ماذا ستحصل عليه؟
- زر تحميل واضح واحترافي بتأثير Hover.
- نافذة منبثقة في منتصف الشاشة (كمبيوتر/موبايل) + زر إغلاق يعمل بشكل صحيح.
- التحقق يتم بزر تحقق أو زر Enter.
- حد محاولات + قفل لمدة زمنية مع عدّاد ثواني.
- بعد نجاح التحقق: شريط تجهيز (Progress) لمدة تختارها ثم تفعيل زر التحميل.
- أكواد CSS حصرية للسكربت + Lazy Load لتخفيف تأثيره على PageSpeed.
متطلبات بسيطة قبل التركيب
1) تحتاج قيمة SHA-256 لكلمة المرور (هاش) بدل كلمة المرور نفسها داخل الكود.
2) تحتاج رابط الملف النهائي الذي تريد تنزيله.
تنبيه: لا تضع كلمة المرور “نصًا” داخل الكود. استخدم الهاش فقط.
طريقة إنشاء الهاش SHA-256 لكلمة المرور
من هنا تعمل كلمة سر مشفرة محمية
اختر كلمة مرور (مثال: 1234) ثم أنشئ لها SHA-256 من أي أداة موثوقة. الناتج يكون نصًا طويلًا مثل: e3b0c44298fc...
بعد الحصول على الهاش ستضعه داخل السكربت في data-hash بدل PUT_SHA256_HERE.
طريقة الاستخدام داخل بلوجر (خطوات سريعة)
- افتح المقال في بلوجر (وضع HTML).
- الصق السكربت في المكان المناسب داخل المقال.
- عدّل القيم التالية فقط:
- data-hash = ضع هاش كلمة المرور (SHA-256).
- data-link = ضع رابط التحميل النهائي.
- data-wait = مدة الانتظار قبل تفعيل التحميل (مثال 20 ثانية).
- احفظ المقال وجرّب: أدخل كلمة مرور ثم Enter أو اضغط تحقق.
<div class="cc78BX9QxA" data-hash="PUT_SHA256_HERE" data-link="https://example.com/your-file.zip" data-btn="تحميل الآن" data-dl="تحميل الآن" data-max="5" data-lock="60" data-wait="20"></div><script>(()=>{const r=document.querySelector(".cc78BX9QxA");if(!r||r.__on)return;r.__on=1;const CSS_ID="cc78BX9QxA_css__v3",css=".cc78BX9QxA{margin:12px 0}.cc78BX9QxA_btn{direction:rtl;unicode-bidi:plaintext;font-family:inherit;--c:#1b5a84;--b:rgba(27,90,132,.34);width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:22px 18px;border-radius:18px;border:1px solid var(--b);background:linear-gradient(135deg,#fff 0%,#eef7ff 35%,rgba(27,90,132,.18) 100%);color:#07121c;font-weight:950;font-size:20px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 10px 22px rgba(2,6,23,.12),0 0 0 2px rgba(27,90,132,.06) inset;transition:.16s transform,.16s box-shadow,.16s border-color}.cc78BX9QxA_btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(2,6,23,.16),0 0 0 2px rgba(27,90,132,.10) inset;border-color:rgba(27,90,132,.65)}.cc78BX9QxA_gl{position:absolute;inset:-40%;background:radial-gradient(circle at 25% 40%,rgba(27,90,132,.30),transparent 52%),radial-gradient(circle at 70% 60%,rgba(255,255,255,.30),transparent 55%);filter:blur(12px);opacity:.55;transform:translateY(14px);transition:.16s;pointer-events:none}.cc78BX9QxA_btn:hover .cc78BX9QxA_gl{opacity:.95;transform:translateY(0)}.cc78BX9QxA_lock{justify-self:end;width:46px;height:46px;border-radius:16px;background:rgba(27,90,132,.10);border:1px solid rgba(27,90,132,.24);display:flex;align-items:center;justify-content:center;color:#1b5a84;position:relative;z-index:1}.cc78BX9QxA_sp{justify-self:start;width:46px;height:46px;opacity:0}.cc78BX9QxA_mid{justify-self:center;display:flex;align-items:center;gap:10px;position:relative;z-index:1}.cc78BX9QxA_dlic{width:22px;height:22px;display:flex;color:#1b5a84}.cc78BX9QxA_tx{line-height:1}.cc78BX9QxA_btn svg,.cc78BX9QxA_x svg,.cc78BX9QxA_badge svg,.cc78BX9QxA_inIc svg,.cc78BX9QxA_dlIc svg{width:22px;height:22px;pointer-events:none}.cc78BX9QxA_m{direction:rtl;unicode-bidi:plaintext;font-family:inherit;position:fixed;inset:0;display:none;z-index:999999;align-items:center;justify-content:center;padding:18px}.cc78BX9QxA_m[aria-hidden=\"false\"]{display:flex}.cc78BX9QxA_ov{position:absolute;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(3px)}.cc78BX9QxA_box{position:relative;width:min(680px,100%);border-radius:18px;background:#fff;color:#0b1220;border:1px solid rgba(15,23,42,.12);box-shadow:0 18px 48px rgba(2,6,23,.16);overflow:hidden}.cc78BX9QxA_x{position:absolute;top:12px;left:12px;width:42px;height:42px;border-radius:14px;border:1px solid rgba(15,23,42,.12);background:rgba(2,6,23,.04);color:#0b1220;cursor:pointer;display:flex;align-items:center;justify-content:center}.cc78BX9QxA_h{display:flex;gap:12px;align-items:flex-start;padding:16px 18px 12px;border-bottom:1px solid rgba(15,23,42,.10);background:linear-gradient(135deg,rgba(27,90,132,.10),#fff)}.cc78BX9QxA_hOk{background:linear-gradient(135deg,rgba(34,197,94,.10),#fff)}.cc78BX9QxA_badge{width:44px;height:44px;border-radius:16px;background:rgba(27,90,132,.12);border:1px solid rgba(27,90,132,.22);display:flex;align-items:center;justify-content:center;color:#1b5a84;flex:0 0 auto}.cc78BX9QxA_badgeOk{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.18);color:#16a34a}.cc78BX9QxA_t{font-weight:950;font-size:20px}.cc78BX9QxA_bd{padding:16px 18px 18px}.cc78BX9QxA_lb{display:block;margin:6px 0 8px;color:rgba(11,18,32,.70);font-weight:900}.cc78BX9QxA_inw{display:flex;align-items:center;gap:10px;border:1px solid rgba(15,23,42,.14);border-radius:14px;background:#fff;padding:10px 12px}.cc78BX9QxA_inw:focus-within{border-color:rgba(27,90,132,.45);box-shadow:0 0 0 4px rgba(27,90,132,.14)}.cc78BX9QxA_inIc{width:22px;height:22px;color:rgba(27,90,132,.80);display:flex;align-items:center;justify-content:center}.cc78BX9QxA_in{width:100%;border:0;outline:none;background:transparent;color:#0b1220;font-weight:800;font-size:15px}.cc78BX9QxA_msg{margin-top:10px;min-height:22px;font-weight:950}.cc78BX9QxA_msg.ok{color:#16a34a}.cc78BX9QxA_msg.bad{color:#dc2626}.cc78BX9QxA_msg.neu{color:rgba(11,18,32,.70)}.cc78BX9QxA_row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.cc78BX9QxA_ck{flex:1;min-width:160px;padding:12px 14px;border-radius:14px;border:1px solid rgba(27,90,132,.32);background:linear-gradient(135deg,rgba(27,90,132,.16),rgba(27,90,132,.06));color:#0b1220;font-weight:950;cursor:pointer}.cc78BX9QxA_cn{flex:1;min-width:160px;padding:12px 14px;border-radius:14px;border:1px solid rgba(15,23,42,.14);background:#f3f6fb;color:#0b1220;font-weight:950;cursor:pointer}.cc78BX9QxA_ct{text-align:center}.cc78BX9QxA_wait{width:min(360px,100%);margin:0 auto 14px;border-radius:16px;overflow:hidden;border:1px dashed rgba(27,90,132,.30);background:rgba(27,90,132,.05)}.cc78BX9QxA_waitTop{padding:10px 12px;background:rgba(27,90,132,.06);border-bottom:1px solid rgba(27,90,132,.14);font-weight:950;color:rgba(11,18,32,.70);text-align:center}.cc78BX9QxA_waitBody{padding:12px}.cc78BX9QxA_bar{height:12px;border-radius:999px;background:rgba(27,90,132,.14);overflow:hidden}.cc78BX9QxA_fill{height:100%;width:0%;background:linear-gradient(135deg,#1b5a84,#2a77a9);transition:width 1s linear}.cc78BX9QxA_time{margin-top:10px;font-weight:950;color:#1b5a84;text-align:center}.cc78BX9QxA_dl{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 16px;border-radius:18px;font-weight:950;font-size:20px;color:#fff!important;background:linear-gradient(135deg,#1b5a84,#2a77a9);border:1px solid rgba(27,90,132,.30);box-shadow:0 10px 22px rgba(2,6,23,.12);transition:.16s transform,.16s box-shadow;text-decoration:none!important;opacity:.55;pointer-events:none}.cc78BX9QxA_dl *,.cc78BX9QxA_dl span,.cc78BX9QxA_dl svg{color:#fff!important;fill:currentColor}.cc78BX9QxA_dl:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(2,6,23,.16)}.cc78BX9QxA_dlIc{width:20px;height:20px;display:flex}.cc78BX9QxA_dl.cc78BX9QxA_on{opacity:1;pointer-events:auto}";const inject=()=>{if(!document.getElementById(CSS_ID)){const st=document.createElement("style");st.id=CSS_ID;st.textContent=css;document.head.appendChild(st)}};const clean=s=>String(s||"").replace(/&#1611;?/g,"").replace(/ً?/g,"").replace(/\\u064B/g,"");const render=()=>{r.innerHTML="<button class='cc78BX9QxA_btn' type='button'><span class='cc78BX9QxA_lock' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none'><path d='M7 11V8a5 5 0 0 1 10 0v3' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'/><path d='M7 11h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2Z' stroke='currentColor' stroke-width='2.2' stroke-linejoin='round'/></svg></span><span class='cc78BX9QxA_mid'><span class='cc78BX9QxA_dlic' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none'><path d='M12 3v10m0 0 4-4m-4 4-4-4' stroke='currentColor' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/><path d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2' stroke='currentColor' stroke-width='2.3' stroke-linecap='round'/></svg></span><span class='cc78BX9QxA_tx'></span></span><span class='cc78BX9QxA_sp' aria-hidden='true'></span><span class='cc78BX9QxA_gl' aria-hidden='true'></span></button><div class='cc78BX9QxA_m cc78BX9QxA_m1' aria-hidden='true'><div class='cc78BX9QxA_ov' data-cc78-close='1'></div><div class='cc78BX9QxA_box' role='dialog' aria-modal='true' aria-label='تحميل محمي'><button class='cc78BX9QxA_x' type='button' data-cc78-close='1' aria-label='إغلاق'><svg viewBox='0 0 24 24' fill='none'><path d='M6 6l12 12M18 6 6 18' stroke='currentColor' stroke-width='2.4' stroke-linecap='round'/></svg></button><div class='cc78BX9QxA_h'><span class='cc78BX9QxA_badge' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none'><path d='M7 11V8a5 5 0 0 1 10 0v3' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'/><path d='M7 11h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2Z' stroke='currentColor' stroke-width='2.2' stroke-linejoin='round'/></svg></span><div><div class='cc78BX9QxA_t'>أدخل كلمة المرور</div></div></div><div class='cc78BX9QxA_bd'><label class='cc78BX9QxA_lb' for='cc78BX9QxA_pw'>كلمة السر</label><div class='cc78BX9QxA_inw'><span class='cc78BX9QxA_inIc' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none'><path d='M12 14v2' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'/><path d='M7 11V8a5 5 0 0 1 10 0v3' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'/><path d='M7 11h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2Z' stroke='currentColor' stroke-width='2.2' stroke-linejoin='round'/></svg></span><input id='cc78BX9QxA_pw' class='cc78BX9QxA_in' type='password' placeholder='اكتب كلمة السر هنا' autocomplete='off'></div><div class='cc78BX9QxA_msg' aria-live='polite'></div><div class='cc78BX9QxA_row'><button class='cc78BX9QxA_ck' type='button'>تحقق</button><button class='cc78BX9QxA_cn' type='button' data-cc78-close='1'>إغلاق</button></div></div></div></div><div class='cc78BX9QxA_m cc78BX9QxA_m2' aria-hidden='true'><div class='cc78BX9QxA_ov' data-cc78-close='1'></div><div class='cc78BX9QxA_box' role='dialog' aria-modal='true' aria-label='التحميل'><button class='cc78BX9QxA_x' type='button' data-cc78-close='1' aria-label='إغلاق'><svg viewBox='0 0 24 24' fill='none'><path d='M6 6l12 12M18 6 6 18' stroke='currentColor' stroke-width='2.4' stroke-linecap='round'/></svg></button><div class='cc78BX9QxA_h cc78BX9QxA_hOk'><span class='cc78BX9QxA_badge cc78BX9QxA_badgeOk' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none'><path d='M20 6 9 17l-5-5' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg></span><div><div class='cc78BX9QxA_t'>التحميل جاهز</div></div></div><div class='cc78BX9QxA_bd cc78BX9QxA_ct'><div class='cc78BX9QxA_wait'><div class='cc78BX9QxA_waitTop'>جاري تجهيز الرابط</div><div class='cc78BX9QxA_waitBody'><div class='cc78BX9QxA_bar'><div class='cc78BX9QxA_fill' style='width:0%'></div></div><div class='cc78BX9QxA_time'>...</div></div></div><a class='cc78BX9QxA_dl' href='#' target='_blank' rel='nofollow noopener'><span class='cc78BX9QxA_dlTx'>تحميل الآن</span><span class='cc78BX9QxA_dlIc' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none'><path d='M12 3v10m0 0 4-4m-4 4-4-4' stroke='currentColor' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/><path d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2' stroke='currentColor' stroke-width='2.3' stroke-linecap='round'/></svg></span></a></div></div></div></div>"};const start=()=>{inject();render();const H=(r.dataset.hash||"").trim().toLowerCase(),L=(r.dataset.link||"").trim(),BT=(r.dataset.btn||"تحميل الآن"),DT=(r.dataset.dl||"تحميل الآن"),MAX=Math.max(1,parseInt(r.dataset.max||"5",10)||5),LOCK=Math.max(10,parseInt(r.dataset.lock||"60",10)||60),WAIT=Math.max(0,parseInt(r.dataset.wait||"20",10)||20),kT="cc78BX9QxA_try",kL="cc78BX9QxA_lock";const btn=r.querySelector(".cc78BX9QxA_btn"),tx=r.querySelector(".cc78BX9QxA_tx"),m1=r.querySelector(".cc78BX9QxA_m1"),m2=r.querySelector(".cc78BX9QxA_m2"),inp=r.querySelector(".cc78BX9QxA_in"),msg=r.querySelector(".cc78BX9QxA_msg"),dl=r.querySelector(".cc78BX9QxA_dl"),dlTx=r.querySelector(".cc78BX9QxA_dlTx"),ck=r.querySelector(".cc78BX9QxA_ck"),fill=r.querySelector(".cc78BX9QxA_fill"),timeEl=r.querySelector(".cc78BX9QxA_time");tx.textContent=BT;dlTx.textContent=DT;dl.href=L||"#";let tmr=0,waitT=0;const now=()=>Math.floor(Date.now()/1000),lockUntil=()=>parseInt(localStorage.getItem(kL)||"0",10)||0,left=()=>Math.max(0,lockUntil()-now()),tries=()=>parseInt(localStorage.getItem(kT)||"0",10)||0,setTries=n=>localStorage.setItem(kT,String(n)),setLock=s=>localStorage.setItem(kL,String(now()+s)),reset=()=>setTries(0),sha256=async s=>{const u=new TextEncoder().encode(s),buf=await crypto.subtle.digest("SHA-256",u);return[...new Uint8Array(buf)].map(x=>x.toString(16).padStart(2,"0")).join("")};const set=(m,o)=>m.setAttribute("aria-hidden",o?"false":"true");const stopWait=()=>{clearInterval(waitT);waitT=0};const stopLock=()=>{clearInterval(tmr);tmr=0};const close=()=>{stopLock();stopWait();set(m1,0);set(m2,0);msg.textContent="";msg.className="cc78BX9QxA_msg";inp.value="";inp.disabled=false;ck.disabled=false;};const say=(el,txt)=>{el.textContent=clean(txt)};const lockUI=()=>{inp.disabled=true;ck.disabled=true;msg.className="cc78BX9QxA_msg bad";const tick=()=>{const s=left();if(s>0){say(msg,"تم قفل المحاولات. انتظر "+s+" ثانية ثم أغلق النافذة وحاول مجددًا.");}else{stopLock();inp.disabled=false;ck.disabled=false;say(msg,"يمكنك المحاولة الآن.");msg.className="cc78BX9QxA_msg neu";}};tick();stopLock();tmr=setInterval(tick,1000)};const startWait=()=>{stopWait();dl.classList.remove("cc78BX9QxA_on");fill.style.width="0%";let s=WAIT;const upd=()=>{if(WAIT<=0){timeEl.textContent="التحميل جاهز";fill.style.width="100%";dl.classList.add("cc78BX9QxA_on");return}timeEl.textContent=clean(s+" ثانية");fill.style.width=((WAIT-s)/WAIT*100)+"%"};upd();waitT=setInterval(()=>{s--;if(s<=0){stopWait();timeEl.textContent="التحميل جاهز";fill.style.width="100%";dl.classList.add("cc78BX9QxA_on")}else upd()},1000)};const open=()=>{set(m2,0);set(m1,1);const s=left();if(s>0){lockUI()}else{inp.disabled=false;ck.disabled=false;msg.textContent="";msg.className="cc78BX9QxA_msg";inp.value=""}setTimeout(()=>!inp.disabled&&inp.focus(),60)};r.addEventListener("click",e=>{const c=e.target&&e.target.closest?e.target.closest("[data-cc78-close]"):null;if(c)close()});document.addEventListener("keydown",e=>{if(e.key==="Escape"&&(m1.getAttribute("aria-hidden")==="false"||m2.getAttribute("aria-hidden")==="false"))close()});btn.addEventListener("click",open);ck.addEventListener("click",async()=>{const s=left();if(s>0){lockUI();return}const p=inp.value.trim();if(!p){say(msg,"اكتب كلمة السر أولاً.");msg.className="cc78BX9QxA_msg bad";return}if(!H){say(msg,"ضع data-hash (SHA-256) داخل السكربت.");msg.className="cc78BX9QxA_msg bad";return}say(msg,"جارٍ التحقق…");msg.className="cc78BX9QxA_msg neu";const hp=await sha256(p);if(hp===H){msg.textContent="";msg.className="cc78BX9QxA_msg";reset();stopLock();setTimeout(()=>{set(m1,0);set(m2,1);startWait()},120)}else{const n=tries()+1;setTries(n);if(n>=MAX){setLock(LOCK);lockUI()}else{say(msg,"كلمة المرور غير صحيحة ("+n+"/"+MAX+")");msg.className="cc78BX9QxA_msg bad"}}});inp.addEventListener("keydown",e=>{if(e.key==="Enter"){e.preventDefault();ck.click()}})};const boot=()=>start();("IntersectionObserver"in window)?new IntersectionObserver(function(es){if(es[0]&&es[0].isIntersecting){boot();this.disconnect&&this.disconnect()}},{rootMargin:"300px"}).observe(r):boot()})();</script>
أين أضع السكربت داخل المقال؟
يمكنك وضعه في أي مكان مناسب داخل المحتوى. الأفضل عادةً بعد فقرة قصيرة تشرح التحميل، أو قبل قسم “روابط التحميل”. السكربت مستقل بكلاسات حصرية ولن يعبث بتنسيق المقال أو القالب.
لو لديك أكثر من زر في نفس المقال، انسخ نفس الكود مرة أخرى لكن غيّر data-hash و data-link لكل زر.
أفضل إعدادات مقترحة
- data-max: عدد المحاولات قبل القفل (مثال 5).
- data-lock: مدة القفل بالثواني (مثال 60).
- data-wait: مدة شريط التجهيز قبل تفعيل التحميل (مثال 20).
- data-btn: نص الزر الرئيسي داخل المقال.
- data-dl: نص زر التحميل النهائي داخل النافذة.
أسئلة شائعة (FAQ)
هل السكربت يسبب تعارض مع القالب أو CSS الموقع؟
لا. كل كلاسات السكربت حصرية ومقفولة عليه (Prefix واضح). والمقال نفسه كذلك مقفول داخل .cc78Art.
هل يمكن معرفة كلمة المرور من كود الصفحة؟
أنت لا تضع كلمة المرور نصًا داخل الكود، بل تضع SHA-256 Hash. هذا يمنع “النسخ المباشر” لكلمة المرور من المصدر، لكنه ليس حماية مطلقة ضد المحاولات القوية.
هل يدعم زر Enter؟
نعم. داخل نافذة كلمة المرور، الضغط على Enter ينفّذ نفس وظيفة زر تحقق.
هل يمكن تغيير لون الثيم ليتناسب مع موقعي؟
نعم من داخل السكربت نفسه بتعديل اللون الأساسي #1b5a84 إذا أردت، لكن النسخة الحالية مبنية عليه.
وفى نهاية المقال الآن لديك زر تنزيل محمي بكلمة مرور مع نافذة منبثقة وشريط تجهيز احترافي، بدون إعلانات وبدون تعارض مع القالب. فقط ضع الهاش والرابط وعدّل مدة الانتظار إن رغبت.
