From fa36d7267daf8a6d587a0cbe60c748c7e981d8bd Mon Sep 17 00:00:00 2001 From: Claude Code Date: Mon, 6 Apr 2026 19:48:40 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Kontaktformular=20als=20Popup,=20Grid?= =?UTF-8?q?=20zentriert,=20Stra=C3=9Fe=20gefixt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Kontaktformular als Modal-Popup (Name, Organisation, E-Mail, Nachricht) - Oeffnet per Button-Klick, schliessbar per X/Overlay/Escape - Submit erstellt mailto-Link mit vorausgefuellten Feldern - Feature-Grid: letzte 2 Cards zentriert statt linksbuendig - Gladbacher Strasse -> Gladbacher Straße Co-Authored-By: Claude Opus 4.6 (1M context) --- vorschau/css/style.css | 21 ++++++++++++++++++ vorschau/index.html | 40 +++++++++++++++++++++++++++++++--- vorschau/js/app.js | 49 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 107 insertions(+), 3 deletions(-) diff --git a/vorschau/css/style.css b/vorschau/css/style.css index 2104e96..d95aac4 100644 --- a/vorschau/css/style.css +++ b/vorschau/css/style.css @@ -109,6 +109,10 @@ a { color:inherit; text-decoration:none; } /* ==================== GRID ==================== */ .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } +#features .grid-3 { justify-items:center; } +#features .grid-3 .feature-card:nth-last-child(-n+2):nth-child(3n+1) { grid-column: 1; } +#features .grid-3 { display:flex; flex-wrap:wrap; justify-content:center; } +#features .grid-3 .feature-card { width:calc(33.333% - 20px); } .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } /* ==================== PROBLEM ==================== */ @@ -226,6 +230,23 @@ a { color:inherit; text-decoration:none; } .cta-text { font-size:1.1rem; color:var(--text-light); margin-bottom:32px; } .cta-email { font-size:0.9rem; color:var(--text-light); margin-top:16px; } + +/* ==================== CONTACT MODAL ==================== */ +.modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(10,24,50,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; } +.modal-content { background:var(--white); border-radius:var(--radius-lg); padding:40px; max-width:520px; width:100%; position:relative; box-shadow:0 24px 64px rgba(10,24,50,0.3); max-height:90vh; overflow-y:auto; } +.modal-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:1.8rem; color:var(--gray-400); cursor:pointer; line-height:1; } +.modal-close:hover { color:var(--navy); } +.modal-content h2 { font-size:1.5rem; font-weight:700; color:var(--navy); margin-bottom:8px; } +.modal-sub { font-size:0.95rem; color:var(--text-light); margin-bottom:28px; } +.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } +.form-group { margin-bottom:16px; } +.form-group label { display:block; font-size:0.82rem; font-weight:600; color:var(--navy); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; } +.form-group input, .form-group textarea { width:100%; padding:10px 14px; border:1px solid var(--gray-200); border-radius:var(--radius); font-family:inherit; font-size:0.95rem; color:var(--text); background:var(--base); transition:border-color 0.2s; } +.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--gold); } +.form-group textarea { resize:vertical; } +.form-success { text-align:center; padding:40px 0; } +.form-success p { font-size:1.05rem; color:var(--navy); font-weight:500; } +@media(max-width:768px) { .form-row { grid-template-columns:1fr; } .modal-content { padding:28px 20px; } } /* ==================== FOOTER ==================== */ .footer { background:var(--navy); color:rgba(255,255,255,0.7); padding:40px 0; font-size:0.85rem; } .footer-content { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.1); } diff --git a/vorschau/index.html b/vorschau/index.html index b568d0a..7a0cea8 100644 --- a/vorschau/index.html +++ b/vorschau/index.html @@ -96,7 +96,7 @@

Aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen.

Live-Demo ansehen - Kontakt aufnehmen +
@@ -291,7 +291,7 @@

Interesse am AegisSight Monitor?

Sprechen Sie mit uns über Ihren Einsatzfall.

- Kontakt aufnehmen +
@@ -343,7 +343,7 @@

AegisSight UG (haftungsbeschränkt)

-

Gladbacher Strasse 3-5, 40764 Langenfeld

+

Gladbacher Straße 3-5, 40764 Langenfeld

Impressum @@ -354,6 +354,40 @@
+ + + + diff --git a/vorschau/js/app.js b/vorschau/js/app.js index d32beea..0f49bcf 100644 --- a/vorschau/js/app.js +++ b/vorschau/js/app.js @@ -325,6 +325,55 @@ function mdToHtml(md) { setTimeout(function () { mapInstance.invalidateSize(); }, 300); } + /* ==================== CONTACT MODAL ==================== */ + window.openContactModal = function () { + document.getElementById('contact-modal').style.display = 'flex'; + document.body.style.overflow = 'hidden'; + }; + + window.closeContactModal = function () { + document.getElementById('contact-modal').style.display = 'none'; + document.body.style.overflow = ''; + }; + + // Close on overlay click + var modalOverlay = document.getElementById('contact-modal'); + if (modalOverlay) { + modalOverlay.addEventListener('click', function (e) { + if (e.target === modalOverlay) closeContactModal(); + }); + } + + // Close on Escape + document.addEventListener('keydown', function (e) { + if (e.key === 'Escape' && modalOverlay && modalOverlay.style.display === 'flex') { + closeContactModal(); + } + }); + + // Form submit -> mailto fallback (no backend yet) + window.submitContact = function (e) { + e.preventDefault(); + var name = document.getElementById('cf-name').value; + var org = document.getElementById('cf-org').value; + var email = document.getElementById('cf-email').value; + var msg = document.getElementById('cf-message').value; + + var subject = 'Anfrage von ' + name + (org ? ' (' + org + ')' : ''); + var body = 'Name: ' + name + ' +Organisation: ' + (org || '-') + ' +E-Mail: ' + email + ' + +Nachricht: +' + msg; + + window.location.href = 'mailto:info@aegis-sight.de?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body); + + document.getElementById('contact-form').style.display = 'none'; + document.getElementById('form-success').style.display = 'block'; + return false; + }; + /* ==================== INIT ==================== */ loadLiveData(); })();