أضف رسالة عند قطع الاتصال بالإنترنت

تظهر الرسالة فور انقطاع اتصال الإنترنت فجأة، وتختفي الرسالة فور استعادة اتصال الإنترنت

قد ينقطع الاتصال قبل الانتهاء من كتابة المساهمة في المحرر، وقد يتم الضغط على زر الإرسال دون معرفة أن الاتصال قد انقطع.
وهذا ربما قد يسبب ازعاج لأعضاء المنتدى
ولذا قد يكون من المفيد عرض رسالة تنبيه للأعضاء في حالة فقدهم اتصالهم بالإنترنت 
-----







تثبيت JavaScript
--------------------------
العنوان: كما تريد
المكان: في جميع الصفحات

أضف كود Javascript

الكود:

window.addEventListener('DOMContentLoaded', function() {
  var messageElement = document.createElement('div');
  messageElement.id = 'connection-message';
  messageElement.innerHTML = 'أنتبه: تم قطع الاتصال بالإنترنت';
  messageElement.style.cssText = `
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
   background: #9f180f;
    color: #fffdeb;
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    z-index: 9999;
    display: none;
  `;
  document.body.appendChild(messageElement);
  function showMessage() {
    messageElement.style.display = 'block';
    messageElement.style.animation = 'slideIn 0.5s ease-in-out';
  }
  function hideMessage() {
    messageElement.style.animation = 'slideOut 0.5s ease-in-out';
    setTimeout(function() {
      messageElement.style.display = 'none';
    }, 500);
  }
  window.addEventListener('offline', showMessage);
  window.addEventListener('online', hideMessage);
  function animate(element, animationName) {
    element.style.animationName = animationName;
    setTimeout(function() {
      element.style.animationName = '';
    }, 1000);
  }
  var slideInAnimation = `
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  `;

  var slideOutAnimation = `
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(100%);
      opacity: 0;
    }
  `;
  messageElement.addEventListener('animationstart', function() {
    if (messageElement.style.animationName === slideInAnimation) {
      animate(messageElement, slideOutAnimation);
    }
  });
});

لا تنسى الضغط على زر قدّم

يمكنك تعديل محتوى الرسالة وخلفيتها ولون النص من كود JavaScript
من خلال تعديل الجزء المشار اليه في الصورة التالية



وفي الختام. وفقكم الله جميعا


______________________________
تمت كتابة هذا البرنامج بواسطة كونان2000
باستخدام AI