تك مصراوي - أخبار التكنولوجيا، الكمبيوتر والهواتف الذكية

إرسال شكوى حقوق طبع ونشر

صندوق التعليقات يحتوي على:

يحتوي على مقال.

حقل إدخال نص التعليق

زر إرسال التعليق.

زر لإخفاء/إظهار صندوق التعليقات.

شرح مبسط:

الزر toggleButton يتحكم في عرض صندوق التعليقات (commentBox) أو إخفائه.

عند الضغط على زر الإرسال submitComment:

يتحقق من أن المستخدم كتب تعليق.

يعرض التعليق في رسالة تنبيه (يمكن تعديلها لإظهار التعليقات تحت الصندوق).

صندوق التعليقات يبدأ ظاهرًا، ويمكن إخفاؤه أو إظهاره بسهولة.

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

البحث على وسم (<data:post.body/></div>) وضع الكود تحته مباشر

<b:if cond='data:blog.pageType == "item"'>
<style>
#complaints-box {
  display:none;
  border-top:2px solid #0f766e;
  border-radius:0;
  padding:16px 0;
  margin-top:32px;
  font-family:'Cairo',sans-serif;
  font-size:0.9em;
  width:100%;
  box-sizing:border-box;
  animation:fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from {opacity:0; transform:translateY(10px);}
  to {opacity:1; transform:translateY(0);}
}
#complaintButton {
  position:fixed;
  bottom:24px;
  right:24px;
  background:#0f766e;
  color:#fff;
  border:none;
  border-radius:50px;
  padding:10px 18px;
  font-size:0.9em;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
  cursor:pointer;
  z-index:9999;
  transition:all 0.3s ease;
}
#complaintButton:hover {
  background:#115e58;
  transform:translateY(-2px);
}
</style>

<button id='complaintButton'>📮 إرسال الشكاوى والاقتراحات</button>

<div id='complaints-box'>
  <h3 style='margin:0 0 10px 0;font-size:1.1em;text-align:center;color:#0f766e'>الشكاوى والاقتراحات</h3>
  <p style='color:#555;font-size:0.85em;margin-bottom:10px;text-align:center'>
    يمكنك كتابة ملاحظتك حول المقال. يتم الرد على رسالتك في أسرع وقت.
  </p>

<form id='complaintForm'>
    <div style='margin-bottom:10px'>
      <label>الاسم *<br/>
        <input id='complaintName' required='required' style='width:100%;padding:8px;border-radius:6px;border:1px solid #ccc;font-size:0.9em;background:inherit;color:inherit' type='text'/>
      </label>
    </div>
    <div style='margin-bottom:10px'>
      <label>البريد الإلكتروني<br/>
        <input id='complaintEmail' style='width:100%;padding:8px;border-radius:6px;border:1px solid #ccc;font-size:0.9em;background:inherit;color:inherit' type='email'/>
      </label>
    </div>
    <div style='margin-bottom:10px'>
      <label>فئة الشكوى<br/>
        <select id='complaintCategory' style='width:100%;padding:8px;border-radius:6px;border:1px solid #ccc;font-size:0.9em;background:inherit;color:inherit'>
          <option value='محتوى'>محتوى</option>
          <option value='تقني'>تقني</option>
          <option value='اقتراح'>اقتراح</option>
          <option value='أخرى'>أخرى</option>
        </select>
      </label>
    </div>
    <div style='margin-bottom:10px'>
      <label>نص الشكوى *<br/>
        <textarea id='complaintMessage' maxlength='500' required='required' style='width:100%;height:120px;padding:8px;border-radius:6px;border:1px solid #ccc;font-size:0.9em;background:inherit;color:inherit'/>
      </label>
      <div id='charCounter' style='font-size:0.8em;color:#666;text-align:left'>0 / 500</div>
    </div>
    <button style='background:#0f766e;color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-size:0.9em;width:100%' type='submit'>إرسال الشكوى</button>
  </form>

// 👇 إظهار وإخفاء الصندوق عند الضغط على الزر
  btn.addEventListener('click', function(){
    if(box.style.display==='none' || box.style.display===''){
      box.style.display='block';
      box.scrollIntoView({behavior:'smooth'});
      btn.textContent='❌ إغلاق الشكاوى';
    } else {
      box.style.display='none';
      btn.textContent='📮 إرسال شكوى';
    }
  });

msg.addEventListener('input',function(){counter.textContent=msg.value.length+' / 500';});
  f.addEventListener('submit',function(e){
    e.preventDefault();
    const data={name:f.querySelector('#complaintName').value.trim(),email:f.querySelector('#complaintEmail').value.trim(),
      category:f.querySelector('#complaintCategory').value,message:msg.value.trim(),ts:Date.now()};
    if(!data.name||!data.message){alert('يرجى ملء الحقول المطلوبة.');return;}
    const arr=load(); arr.push(data); save(arr); render(); f.reset(); counter.textContent='0 / 500';
    alert('تم إرسال الشكوى ✅');
  });
  render();
})();
/* ]]> */
</script>
</b:if>