AegisSight/Website
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

feat: Kontaktformular als Popup, Grid zentriert, Straße gefixt

Quellcode durchsuchen 
- 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) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-04-06 19:48:40 +02:00
Ursprung 6ec058b874
Commit fa36d7267d
3 geänderte Dateien mit 107 neuen und 3 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

21
vorschau/css/style.css
Datei anzeigen

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

40
vorschau/index.html
Datei anzeigen

@@ -96,7 +96,7 @@
<p class="hero-sub">Aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen.</p>
<div class="hero-cta">
<a href="#demos" class="btn btn-primary">Live-Demo ansehen</a>
<a href="mailto:info@aegis-sight.de" class="btn btn-outline-light">Kontakt aufnehmen</a>
<button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</div>
</section>
@@ -291,7 +291,7 @@
<div class="container cta-container">
<h2 class="section-title">Interesse am AegisSight Monitor?</h2>
<p class="cta-text">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
<a href="mailto:info@aegis-sight.de" class="btn btn-primary btn-lg">Kontakt aufnehmen</a>
<button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</section>
@@ -343,7 +343,7 @@
<div class="footer-content">
<div class="footer-info">
<p class="footer-company">AegisSight UG (haftungsbeschränkt)</p>
<p>Gladbacher Strasse 3-5, 40764 Langenfeld</p>
<p>Gladbacher Straße 3-5, 40764 Langenfeld</p>
</div>
<div class="footer-links">
<a href="/impressum.html">Impressum</a>
@@ -354,6 +354,40 @@
</div>
</footer>
<!-- Contact Modal -->
<div class="modal-overlay" id="contact-modal" style="display:none">
<div class="modal-content">
<button class="modal-close" onclick="closeContactModal()">&times;</button>
<h2>Kontakt aufnehmen</h2>
<p class="modal-sub">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
<form id="contact-form" onsubmit="return submitContact(event)">
<div class="form-row">
<div class="form-group">
<label for="cf-name">Name</label>
<input type="text" id="cf-name" name="name" required>
</div>
<div class="form-group">
<label for="cf-org">Organisation</label>
<input type="text" id="cf-org" name="organisation">
</div>
</div>
<div class="form-group">
<label for="cf-email">E-Mail</label>
<input type="email" id="cf-email" name="email" required>
</div>
<div class="form-group">
<label for="cf-message">Nachricht</label>
<textarea id="cf-message" name="message" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Nachricht senden</button>
</form>
<div class="form-success" id="form-success" style="display:none">
<p>Vielen Dank für Ihre Nachricht. Wir melden uns zeitnah bei Ihnen.</p>
</div>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="js/app.js"></script>
</body>

49
vorschau/js/app.js
Datei anzeigen

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