popup

public/assets/css/app.css

@@ -198,6 +198,57 @@ a {
   margin-bottom: 8px;
 }
 
+body.has-modal-open {
+  overflow: hidden;
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background:
+    linear-gradient(180deg, rgba(8, 14, 24, 0.52), rgba(8, 14, 24, 0.64));
+  backdrop-filter: blur(6px);
+  z-index: 70;
+}
+
+.modal.is-open {
+  display: flex;
+}
+
+.modal-card {
+  width: min(820px, 96vw);
+  max-height: 90vh;
+  overflow: auto;
+  padding: 20px;
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,252,0.94));
+  box-shadow: 0 22px 60px rgba(1, 22, 32, 0.22);
+}
+
+:root[data-theme="night"] .modal-card {
+  background:
+    linear-gradient(180deg, rgba(17,22,32,0.98), rgba(10,14,24,0.96));
+}
+
+.modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.modal-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

public/assets/js/app.js

@@ -120,3 +120,71 @@ if (setupTabs.length > 0) {
   const activeSetupTab = document.querySelector('[data-setup-tab-target].is-active') || setupTabs[0];
   activateSetupTab(activeSetupTab.dataset.setupTabTarget);
 }
+
+window.NexusModal = (() => {
+  const openModals = new Set();
+
+  const syncBodyState = () => {
+    document.body.classList.toggle('has-modal-open', openModals.size > 0);
+  };
+
+  const create = (root, options = {}) => {
+    if (!root) {
+      return null;
+    }
+
+    const modal = {
+      root,
+      isOpen: () => root.classList.contains('is-open'),
+      open() {
+        root.classList.add('is-open');
+        root.setAttribute('aria-hidden', 'false');
+        openModals.add(root);
+        syncBodyState();
+        if (typeof options.onOpen === 'function') {
+          options.onOpen();
+        }
+        const focusTarget = options.initialFocus ? root.querySelector(options.initialFocus) : null;
+        if (focusTarget instanceof HTMLElement) {
+          window.setTimeout(() => focusTarget.focus(), 20);
+        }
+      },
+      close() {
+        root.classList.remove('is-open');
+        root.setAttribute('aria-hidden', 'true');
+        openModals.delete(root);
+        syncBodyState();
+        if (typeof options.onClose === 'function') {
+          options.onClose();
+        }
+      },
+    };
+
+    if (!root.dataset.modalBound) {
+      root.addEventListener('click', (event) => {
+        if (event.target === root) {
+          modal.close();
+        }
+      });
+      root.dataset.modalBound = '1';
+    }
+
+    return modal;
+  };
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') {
+      return;
+    }
+    const active = Array.from(openModals).pop();
+    if (!active) {
+      return;
+    }
+    active.classList.remove('is-open');
+    active.setAttribute('aria-hidden', 'true');
+    openModals.delete(active);
+    syncBodyState();
+  });
+
+  return { create };
+})();