phase iv -ii

static/css/main.css

@@ -2677,28 +2677,37 @@ html {
    Info Modal - Modern Glassmorphism Design
    ======================================== */
 
+/* Native <dialog> element - centered by default, no positioning needed */
 .info-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    border: none;
+    border-radius: 24px;
+    padding: 0;
+    max-width: 500px;
+    width: calc(100% - 2rem);
+    background: transparent;
+}
+
+/* Native ::backdrop pseudo-element replaces manual backdrop div */
+.info-modal::backdrop {
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
-    padding: 1rem;
 }
 
-.info-modal.active {
-    opacity: 1;
-    visibility: visible;
+/* Dialog opening animation - native dialog uses [open] attribute */
+.info-modal[open] {
+    animation: modalFadeIn 0.3s ease;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
 }
 
 .info-modal-content {
@@ -2707,19 +2716,12 @@ html {
     -webkit-backdrop-filter: blur(20px);
     border-radius: 24px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 100px rgba(39, 174, 96, 0.1);
-    max-width: 500px;
     width: 100%;
     padding: 2.5rem;
     position: relative;
-    transform: scale(0.9) translateY(20px);
-    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     border: 1px solid rgba(255, 255, 255, 0.8);
 }
 
-.info-modal.active .info-modal-content {
-    transform: scale(1) translateY(0);
-}
-
 .info-modal-close {
     position: absolute;
     top: 1rem;

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();
     });