كود شريط اشعارات متطور للاحلى منتدى ( تجربة...)

[Mr.Google]

شريط اشعارات متطور

<!-- Google Fonts + Icons -->
<link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style>
body, .notification-bar {
  direction: rtl;
  font-family: 'Cairo', sans-serif;
}

.notification-bar {
  background-color: #00bcd4; 
  color: white;
  display: flex;
  justify-content: flex-start; 
  align-items: center;
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 999;
  gap: 15px;
}

.notification-section {
  display: flex;
  align-items: center;
  gap: 18px;
}

.notification-icon {
  position: relative;
  cursor: pointer;
  font-size: 20px; 
  transition: transform 0.3s ease-in-out;
}

.notification-icon:hover {
  transform: scale(1.1); 
}

.notification-icon .material-icons {
  vertical-align: middle;
  color: white;
  font-size: 24px; 
}

.notification-count {
  position: absolute;
  top: -6px;
  left: -6px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 0 0 2px transparent;
}

.notification-count.zero {
  background-color: #888;
  color: white;
  font-size: 12px;
  padding: 3px 6px;
}

.notification-dropdown {
  position: absolute;
  top: 40px;
  right: 0;
  background-color: #ffffff;
  color: #333;
  border-radius: 8px;
  width: 280px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  display: none;
  flex-direction: column;
  padding: 10px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.notification-dropdown.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.notification-dropdown a,
.notification-dropdown p {
  margin: 5px 0;
  padding: 8px 12px;
  background-color: #f1f1f1;
  border-radius: 5px;
  transition: 0.3s;
  text-decoration: none;
  color: #333;
}

.notification-dropdown a:hover,
.notification-dropdown p:hover {
  background-color: #00c7a5;
  color: white;
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #323232;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
  pointer-events: auto;
}

/* اهتزاز */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
}

.shake {
  animation: shake 0.4s ease;
}

@media (max-width: 600px) {
  .notification-bar {
    padding: 8px 12px;
  }

  .notification-icon {
    font-size: 18px; 
  }

  .notification-icon .material-icons {
    font-size: 20px;
  }

  .notification-dropdown {
    width: 220px;
    font-size: 13px;
  }

  .notification-count {
    font-size: 10px;
    padding: 1px 5px;
  }
}
</style>


<div class="notification-bar">
  <div class="notification-section">

    <div class="notification-icon" id="msg-icon">
      <span class="material-icons">mail</span>
      <span class="notification-count" id="msg-count">0</span>
      <div class="notification-dropdown" id="msg-dropdown">
        <p class="no-msg">لا توجد رسائل حالياً</p>
        <a href="/privmsg?folder=inbox" target="_blank">عرض الرسائل الجديدة</a>
      </div>
    </div>

    <div class="notification-icon" id="notif-icon">
      <span class="material-icons">notifications</span>
      <span class="notification-count" id="notif-count">0</span>
      <div class="notification-dropdown" id="notif-dropdown">
        <p class="no-notif">لا توجد إشعارات حالياً</p>
        <a href="/profile?mode=editprofile&page_profil=notifications" target="_blank">عرض كل الإشعارات</a>
      </div>
    </div>

   
    <div class="notification-icon" id="friend-icon">
      <span class="material-icons">group_add</span>
      <span class="notification-count" id="friend-count">0</span>
      <div class="notification-dropdown" id="friend-dropdown">
        <p class="no-friends">لا توجد طلبات صداقة حالياً</p>
        <a href="/profile?mode=editprofile&page_profil=friendsfoes" target="_blank">عرض طلبات الصداقة</a>
      </div>
    </div>
  </div>
</div>

<!-- Toast -->
<div id="toast" class="toast">تم التحديث بنجاح</div>


<script>
function showToast(msg) {
  const toast = document.getElementById("toast");
  toast.textContent = msg;
  toast.classList.add("show");
  setTimeout(() => toast.classList.remove("show"), 3000);
}


document.querySelectorAll('.notification-icon').forEach(icon => {
  icon.addEventListener('click', function(e) {
    e.stopPropagation();
    document.querySelectorAll('.notification-dropdown').forEach(d => d.classList.remove('active'));
    let dropdown = this.querySelector('.notification-dropdown');
    if (dropdown) dropdown.classList.toggle('active');
  });
});
document.addEventListener('click', () => {
  document.querySelectorAll('.notification-dropdown').forEach(d => d.classList.remove('active'));
});


let prevMsg = parseInt(document.getElementById('msg-count').textContent) || 0;
let prevNotif = parseInt(document.getElementById('notif-count').textContent) || 0;
let prevFriend = parseInt(document.getElementById('friend-count').textContent) || 0;

function triggerShake(id) {
  const icon = document.getElementById(id).closest('.notification-icon');
  icon.classList.add('shake');
  setTimeout(() => icon.classList.remove('shake'), 500);
}

setInterval(() => {
  fetch('/index.htm')
    .then(res => res.text())
    .then(html => {
      let temp = document.createElement('div');
      temp.innerHTML = html;

      const getText = (id) => temp.querySelector(`#${id}`)?.textContent || "0";

      let newMsg = parseInt(getText('msg-count'));
      let newNotif = parseInt(getText('notif-count'));
      let newFriend = parseInt(getText('friend-count'));

      const update = (id, newVal, prevVal, label) => {
        let el = document.getElementById(id);
        if (el && newVal > prevVal) {
          el.textContent = newVal;
          triggerShake(id);
          showToast(`📢 ${label} جديدة!`);
        } else if (el) {
          el.textContent = newVal === 0 ? "0" : newVal;
          el.classList.toggle('zero', newVal === 0); 
        }
      };

      update('msg-count', newMsg, prevMsg, "رسائل");
      update('notif-count', newNotif, prevNotif, "إشعارات");
      update('friend-count', newFriend, prevFriend, "طلبات صداقة");

      prevMsg = newMsg;
      prevNotif = newNotif;
      prevFriend = newFriend;


      const updateDropdown = (dropdownId, count, noElement) => {
        const dropdown = document.getElementById(dropdownId);
        const noMsgElement = dropdown.querySelector(noElement);
        if (count === 0) {
          noMsgElement.style.display = "block";
          noMsgElement.innerHTML = `<a href="#">لا توجد بيانات حالياً</a>`;
        } else {
          noMsgElement.style.display = "none";
        }
      };

      updateDropdown('msg-dropdown', newMsg, '.no-msg');
      updateDropdown('notif-dropdown', newNotif, '.no-notif');
      updateDropdown('friend-dropdown', newFriend, '.no-friends');

    });
}, 10000);
</script>

الكود يعمل بشكل جيد في صفحه هتمل و لكنه لا يعمل في هيدر لتعارضه مع بعض اكواد الجافا الموجوده
حاولت تعديل قالب الهيدر لعمل الكود و لكنه لم يعمل
حاولت فصل الكود عن بقيه الاكواد ليعمل مستقل لكنه لم يعمل
قمت بفصل الاكواد html - java - css لكنه لم يعمل ايضا
تم تجربه الكود في الهيدر و الصفحه الرئيسية
جميع التجارب على نسخة مودارن
تم تصميم الكود ليكون مشابه لتصميم االفايس بوك

هل هناك فكره او حل ليعمل الكود