Large refactor

roadmap.php

@@ -206,7 +206,7 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
 </div>
 
 <!-- Modal: Nieuw Roadmap Item Handmatig Toevoegen -->
-<div id="newItemModal" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+<div id="newItemModal" onclick="if(event.target === this) this.classList.add('hidden')" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
     <div class="fociz-card p-6 sm:p-7 shadow-2xl max-w-lg w-full space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
             <h3 class="text-sm font-bold text-slate-900 dark:text-white flex items-center space-x-2">
@@ -333,7 +333,12 @@ async function submitManualItem() {
     if (data.success) {
         location.reload();
     }
-}
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        const modal = document.getElementById('newItemModal');
+        if (modal) modal.classList.add('hidden');
+    }
+});
 </script>
 
 <?php require_once __DIR__ . '/includes/footer.php'; ?>