update queuing system

assets/js/main.js

@@ -230,6 +230,22 @@ document.addEventListener('DOMContentLoaded', () => {
         let activeAnnouncementAudio = null;
         let activeSpeechUtterance = null;
         let audioLoadTimeoutId = null;
+        let activeAnnouncementKey = '';
+
+        const syncAnnouncementVisualState = () => {
+            document.querySelectorAll('.announcement-card').forEach((card) => {
+                const cardKey = card.dataset.announcementKey || '';
+                const isActive = !!activeAnnouncementKey && cardKey === activeAnnouncementKey;
+                const isQueued = queuedAnnouncementKeys.has(cardKey) && !isActive;
+                card.classList.toggle('announcement-current-turn', isActive);
+                card.classList.toggle('announcement-queued-turn', isQueued);
+            });
+        };
+
+        const setActiveAnnouncementKey = (key = '') => {
+            activeAnnouncementKey = key || '';
+            syncAnnouncementVisualState();
+        };
 
         const clearAnnouncementPlayback = () => {
             if (audioLoadTimeoutId) {
@@ -260,6 +276,7 @@ document.addEventListener('DOMContentLoaded', () => {
             if (!key || !text || queuedAnnouncementKeys.has(key)) return;
             announcementQueue.push({ key, text });
             queuedAnnouncementKeys.add(key);
+            syncAnnouncementVisualState();
             playNextAnnouncement();
         };
 
@@ -274,6 +291,7 @@ document.addEventListener('DOMContentLoaded', () => {
             }
 
             announcementPlaying = true;
+            setActiveAnnouncementKey(nextAnnouncement.key);
             const videoPlayer = document.getElementById('adsVideoPlayer');
             if (videoPlayer) videoPlayer.volume = 0.1;
 
@@ -282,9 +300,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 if ('speechSynthesis' in window && (window.speechSynthesis.speaking || window.speechSynthesis.pending)) {
                     window.speechSynthesis.cancel();
                 }
+                setActiveAnnouncementKey('');
                 if (videoPlayer) videoPlayer.volume = 1.0;
                 queuedAnnouncementKeys.delete(nextAnnouncement.key);
                 announcementPlaying = false;
+                syncAnnouncementVisualState();
                 playNextAnnouncement();
             };
 
@@ -413,6 +433,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         const currentSections = document.querySelector('#queueSections');
                         if (newSections && currentSections) {
                             currentSections.innerHTML = newSections.innerHTML;
+                            syncAnnouncementVisualState();
                         }
                         
                         const oldTicker = document.querySelector('.news-ticker-container');

display.php

@@ -43,12 +43,40 @@ qh_page_start(
     50% { transform: scale(1.08); box-shadow: 0 0 40px rgba(255, 235, 59, 0.9); border-color: #ffb300; background-color: #ffeb3b; }
     100% { transform: scale(1); box-shadow: var(--shadow); border-color: transparent; background-color: var(--surface); }
   }
-  .blinking-ticket {
+  .blinking-ticket,
+  .announcement-current-turn {
     animation: highlightPulse 1.5s ease-in-out infinite;
     z-index: 10;
     position: relative;
     background-image: none !important; /* Ensure background-color animation works against shorthand */
   }
+  .announcement-queued-turn {
+    position: relative;
+    border-color: rgba(13, 110, 253, 0.28) !important;
+    background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(13, 202, 240, 0.12));
+    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.08), 0 14px 30px rgba(13, 110, 253, 0.10);
+    transform: translateY(-2px);
+    transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
+  }
+  .announcement-queued-turn::after {
+    content: 'Next';
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    padding: 0.18rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    color: #0b5ed7;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.12);
+  }
+  html[lang='ar'] .announcement-queued-turn::after {
+    content: 'التالي';
+    left: 0.5rem;
+    right: auto;
+  }
 </style>
 <div class="container-fluid px-0 px-lg-0 py-0 m-0" data-auto-refresh="3" style="min-height: 100vh; display: flex; flex-direction: column; ">
   <!-- Top Header for Display Board -->