Add architecture module map

public/otc/index.php

@@ -187,6 +187,56 @@
             margin-top: 20px;
             display: none;
         }
+
+        .overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(15, 23, 42, 0.45);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            z-index: 1000;
+        }
+
+        .overlay.is-visible {
+            display: flex;
+        }
+
+        .overlay-card {
+            width: min(420px, 100%);
+            background: #ffffff;
+            border-radius: 12px;
+            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
+            padding: 28px 24px 22px;
+            text-align: center;
+        }
+
+        .overlay-title {
+            font-size: 26px;
+            font-weight: 700;
+            color: #1f2937;
+            margin-bottom: 10px;
+        }
+
+        .overlay-text {
+            font-size: 16px;
+            color: #4b5563;
+            margin-bottom: 18px;
+        }
+
+        .overlay-order {
+            font-size: 15px;
+            color: #0f172a;
+            background: #f3f4f6;
+            border-radius: 8px;
+            padding: 12px 14px;
+            margin-bottom: 18px;
+        }
+
+        .overlay-close {
+            margin-top: 0;
+        }
         
         .hidden {
             display: none;
@@ -334,6 +384,15 @@
             Bestellung erfolgreich erfasst! Die Bestellnummer wird automatisch generiert.
         </div>
     </div>
+
+    <div id="successOverlay" class="overlay" aria-hidden="true">
+        <div class="overlay-card" role="dialog" aria-modal="true" aria-labelledby="successOverlayTitle">
+            <div id="successOverlayTitle" class="overlay-title">Bestellung erhalten</div>
+            <div class="overlay-text">Die Bestellung wurde erfolgreich im System gespeichert.</div>
+            <div id="successOverlayOrder" class="overlay-order">Bestellnummer wird angezeigt, sobald sie vorliegt.</div>
+            <button id="closeOverlayBtn" class="overlay-close" type="button">Schliessen</button>
+        </div>
+    </div>
     
     <script>
         const productInputs = [
@@ -351,6 +410,26 @@
         const submitBtn = document.getElementById('submitBtn');
         const errorEl = document.getElementById('error');
         const successEl = document.getElementById('success');
+        const successOverlayEl = document.getElementById('successOverlay');
+        const successOverlayOrderEl = document.getElementById('successOverlayOrder');
+        const closeOverlayBtn = document.getElementById('closeOverlayBtn');
+
+        function closeSuccessOverlay() {
+            successOverlayEl.classList.remove('is-visible');
+            successOverlayEl.setAttribute('aria-hidden', 'true');
+        }
+
+        function openSuccessOverlay(externalRef) {
+            if (externalRef) {
+                successOverlayOrderEl.textContent = 'Bestellnummer: ' + externalRef;
+            } else {
+                successOverlayOrderEl.textContent = 'Bestellnummer wird angezeigt, sobald sie vorliegt.';
+            }
+
+            successOverlayEl.classList.add('is-visible');
+            successOverlayEl.setAttribute('aria-hidden', 'false');
+            closeOverlayBtn.focus();
+        }
         
         function updatePriceBreakdown() {
             const totalQty = productInputs.reduce((sum, input) => sum + parseInt(input.value || 0), 0);
@@ -423,6 +502,17 @@
         document.getElementById('houseNumber').addEventListener('input', validateForm);
         document.getElementById('zip').addEventListener('input', validateForm);
         document.getElementById('city').addEventListener('input', validateForm);
+        closeOverlayBtn.addEventListener('click', closeSuccessOverlay);
+        successOverlayEl.addEventListener('click', (event) => {
+            if (event.target === successOverlayEl) {
+                closeSuccessOverlay();
+            }
+        });
+        document.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape' && successOverlayEl.classList.contains('is-visible')) {
+                closeSuccessOverlay();
+            }
+        });
         
         async function submitOrder() {
             if (!validateForm()) {
@@ -456,7 +546,7 @@
             errorEl.style.display = 'none';
             
             try {
-                const response = await fetch('/api/otc-order.php', {
+                const response = await fetch('/public/api/otc-order.php', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -471,6 +561,7 @@
                     productInputs.forEach(input => input.value = '0');
                     totalPriceInput.value = '0.00';
                     priceBreakdown.classList.add('hidden');
+                    openSuccessOverlay(result.externalRef || '');
                     
                     setTimeout(() => {
                         successEl.style.display = 'none';
@@ -492,4 +583,4 @@
         updatePriceBreakdown();
     </script>
 </body>
-</html>
+</html>