phase iv -ii

static/js/main.js

@@ -641,56 +641,17 @@
     }
 
     // =============================================================================
-    // MODALS
+    // MODALS - Using Native <dialog> Element
     // =============================================================================
 
-    // Info Modal Functions
-    window.openInfoModal = function() {
-        const modal = document.getElementById('info-modal');
-        modal.classList.add('active');
-        document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
-    };
-
-    window.closeInfoModal = function() {
-        const modal = document.getElementById('info-modal');
-        modal.classList.remove('active');
-        document.body.style.overflow = ''; // Restore scrolling
-    };
-
-    window.closeInfoModalOnBackdrop = function(event) {
-        if (event.target.id === 'info-modal') {
-            window.closeInfoModal();
-        }
-    };
-
-    // PDF Modal Functions
-    window.openPdfModal = function() {
-        const modal = document.getElementById('pdf-modal');
-        modal.classList.add('active');
-        document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
-    };
-
-    window.closePdfModal = function() {
-        const modal = document.getElementById('pdf-modal');
-        modal.classList.remove('active');
-        document.body.style.overflow = ''; // Restore scrolling
-    };
-
-    window.closePdfModalOnBackdrop = function(event) {
-        if (event.target.id === 'pdf-modal') {
-            window.closePdfModal();
-        }
-    };
-
-    // Close modals with Escape key
-    function initModalKeyHandlers() {
-        document.addEventListener('keydown', function(event) {
-            if (event.key === 'Escape') {
-                window.closeInfoModal();
-                window.closePdfModal();
-            }
-        });
-    }
+    // Native <dialog> elements handle:
+    // - Open/close with .showModal() and .close()
+    // - Backdrop clicks (via ::backdrop CSS pseudo-element)
+    // - Escape key to close (built-in browser behavior)
+    // - Body scroll prevention (automatic with modal dialogs)
+    // - Focus trapping (automatic accessibility feature)
+    //
+    // No JavaScript needed! All modal logic is now in HTML/CSS.
 
     // =============================================================================
     // ERROR HANDLING
@@ -786,7 +747,6 @@
         initClickOutsideHandler();
         initPreferences();
         initScrollBehavior();
-        initModalKeyHandlers();
         initHTMXHandlers();
     });