Adminator
1e51ef7def
- Konzept/, didaktik_geografie/, didaktik_simulation/, v2-modules/, v2-platform/ - 12 code-workspace-Files - STATUS-*.md - viele M/D/R-Änderungen an bereits getrackten Files - .gitignore verstärkt: **/.humaninput/, **/secret_keys.txt Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
249 lines
12 KiB
PHP
249 lines
12 KiB
PHP
<?php
|
||
/* Header-Migration N.6.2 — Standard-Hauptnav via Snippet. URL bleibt /kontakt.html
|
||
funktional via .htaccess-Rewrite zu kontakt.php. */
|
||
require_once __DIR__ . '/php/config/app.php';
|
||
$bp = BASE_PATH;
|
||
$activeMain = 'kontakt';
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<title>GeoGraSim — Kontakt</title>
|
||
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
|
||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||
<link rel="stylesheet" href="assets/fonts/inter.css">
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:'Inter',sans-serif;background:#f7f6f3;color:#1a1a1a;line-height:1.7;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
|
||
.topbar{background:#fff;padding:.6rem 1.2rem;display:flex;align-items:center;gap:.8rem;border-bottom:1px solid rgba(0,0,0,.06);flex-wrap:wrap;position:sticky;top:0;z-index:10}
|
||
.topbar a{text-decoration:none}
|
||
.topbar img{height:32px}
|
||
.topbar .spacer{flex:1}
|
||
.btn-sm{padding:.3rem .6rem;border:1px solid rgba(0,0,0,.08);border-radius:6px;background:#fff;font-size:.68rem;font-weight:600;color:#4a4a4a;text-decoration:none}
|
||
.btn-sm:hover{background:#dae8ec;color:#4a7c8a}
|
||
.wrap{max-width:760px;margin:0 auto;padding:2rem 1.5rem 4rem}
|
||
h1{font-size:1.6rem;font-weight:900;color:#1f4e5a;margin-bottom:.5rem}
|
||
h2{font-size:1rem;font-weight:800;color:#1f4e5a;margin:1.5rem 0 .4rem;padding-top:.8rem;border-top:1px solid rgba(0,0,0,.06)}
|
||
p,li{font-size:.85rem;color:#333;margin-bottom:.5rem}
|
||
.lead{font-size:.95rem;color:#555;margin-bottom:1rem}
|
||
.card{background:#fff;border-radius:12px;padding:1.2rem;border:1px solid rgba(0,0,0,.04);margin-bottom:1rem}
|
||
.card.email-direct{background:linear-gradient(135deg,#dae8ec,#fff);border-color:#4a7c8a}
|
||
.email-big{font-size:1.05rem;font-weight:800;color:#1f4e5a;margin:.4rem 0;display:inline-block}
|
||
.email-big a{color:#1f4e5a;text-decoration:none;border-bottom:2px solid #4a7c8a}
|
||
.email-big a:hover{color:#4a7c8a}
|
||
label{display:block;font-size:.72rem;font-weight:600;color:#4a4a4a;margin-bottom:.2rem;margin-top:.6rem}
|
||
input,textarea,select{width:100%;padding:.55rem .75rem;border:1.5px solid rgba(0,0,0,.1);border-radius:7px;font-size:.85rem;font-family:inherit;outline:none;background:#fff}
|
||
input:focus,textarea:focus,select:focus{border-color:#4a7c8a}
|
||
textarea{resize:vertical;min-height:120px}
|
||
.btn{padding:.6rem 1.4rem;border:none;border-radius:8px;background:#1f4e5a;color:#fff;font-size:.88rem;font-weight:700;cursor:pointer;margin-top:.8rem}
|
||
.btn:hover{background:#2d6e7c}
|
||
.captcha-box{background:#f7f6f3;border-radius:8px;padding:.8rem;margin-top:.8rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
|
||
.captcha-q{font-size:.85rem;font-weight:700;color:#1f4e5a}
|
||
.captcha-input{width:90px;text-align:center;font-size:1rem;font-weight:700}
|
||
.msg{font-size:.78rem;padding:.5rem .8rem;border-radius:7px;margin-top:.6rem;display:none}
|
||
.msg.ok{display:block;background:#dceadd;color:#3a6b3e}
|
||
.msg.err{display:block;background:#fbe8e2;color:#8a3a2a}
|
||
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem;margin-top:.6rem}
|
||
.quick-card{background:#f5f3ea;border-radius:8px;padding:.7rem .8rem;border:1px solid #e2ddd1}
|
||
.quick-card .lbl{font-size:.7rem;font-weight:700;color:#1f4e5a;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.2rem}
|
||
.quick-card .val{font-size:.82rem;color:#333}
|
||
.quick-card .val a{color:#1f4e5a;text-decoration:none;border-bottom:1px dotted #4a7c8a}
|
||
.footer-note{font-size:.72rem;color:#8a8a8a;text-align:center;margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.06)}
|
||
.footer-note a{color:#4a7c8a;text-decoration:none}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<?php include __DIR__ . '/pages/_partials/public_topnav.php'; ?>
|
||
|
||
<div class="wrap">
|
||
|
||
<h1>Kontakt</h1>
|
||
<p class="lead">Wir sind für Lehrkräfte, Schulen, Schüler*innen, Eltern und alle Interessierten erreichbar. <strong>Schreib uns über das Formular unten — wir antworten so schnell wie möglich.</strong></p>
|
||
|
||
<h2>Wofür schreibst du uns?</h2>
|
||
<div class="quick-grid">
|
||
<div class="quick-card">
|
||
<div class="lbl">Technisches Problem</div>
|
||
<div class="val">Etwas funktioniert nicht? Schreib mit Modul, Browser/Gerät und kurzer Beschreibung.</div>
|
||
</div>
|
||
<div class="quick-card">
|
||
<div class="lbl">Zugänge anlegen</div>
|
||
<div class="val">Du hast Probleme beim Anlegen von Zugängen? Wir helfen gerne weiter.</div>
|
||
</div>
|
||
<div class="quick-card">
|
||
<div class="lbl">Vorschlag neue Simulation</div>
|
||
<div class="val">Idee für eine neue Sim? Schreib uns Thema, Lernziel und Zielklasse.</div>
|
||
</div>
|
||
<div class="quick-card">
|
||
<div class="lbl">Datenschutz</div>
|
||
<div class="val">Fragen zur DSGVO oder zum Umgang mit Schüler*innen-Daten — siehe auch <a href="datenschutz.html">Datenschutz</a>.</div>
|
||
</div>
|
||
<div class="quick-card">
|
||
<div class="lbl">Barrierefreiheit</div>
|
||
<div class="val">Hinweise, was besser geht — wir setzen das um. Siehe <a href="barrierefreiheit.html">Barrierefreiheit</a>.</div>
|
||
</div>
|
||
<div class="quick-card">
|
||
<div class="lbl">Didaktische Rückmeldung</div>
|
||
<div class="val">Lehrkraft-Erfahrungen, Verbesserungsvorschläge zu Modulen, Lehrplanbezug.</div>
|
||
</div>
|
||
<div class="quick-card">
|
||
<div class="lbl">Kooperationen / Lizenzen</div>
|
||
<div class="val">Schulträger, Hochschulen, didaktische Kooperationen.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Nachricht senden</h2>
|
||
<div class="card">
|
||
<label>Dein Name</label>
|
||
<input type="text" id="cf-name" placeholder="Vor- und Nachname">
|
||
|
||
<label>E-Mail-Adresse</label>
|
||
<input type="email" id="cf-email" placeholder="name@example.at" autocomplete="email">
|
||
|
||
<label>E-Mail zur Bestätigung wiederholen</label>
|
||
<input type="email" id="cf-email2" placeholder="Bitte nochmal eingeben" autocomplete="off">
|
||
|
||
<label>Wofür schreibst du uns?</label>
|
||
<select id="cf-subject">
|
||
<option value="Allgemeine Anfrage">Allgemeine Anfrage</option>
|
||
<option value="Technisches Problem">Technisches Problem</option>
|
||
<option value="Zugänge anlegen">Zugänge anlegen</option>
|
||
<option value="Vorschlag neue Simulation">Vorschlag neue Simulation</option>
|
||
<option value="Didaktische Rückmeldung">Didaktische Rückmeldung</option>
|
||
<option value="Datenschutz">Datenschutz</option>
|
||
<option value="Barrierefreiheit">Barrierefreiheit</option>
|
||
<option value="Kooperation / Lizenz">Kooperation / Lizenz</option>
|
||
<option value="Sonstiges">Sonstiges</option>
|
||
</select>
|
||
|
||
<label>Nachricht</label>
|
||
<textarea id="cf-message" placeholder="Schreib uns dein Anliegen — sobald du oben einen Bereich wählst, schlagen wir Stichworte vor."></textarea>
|
||
|
||
<div class="captcha-box">
|
||
<span class="captcha-q" id="captcha-question"></span>
|
||
<input type="text" id="captcha-answer" class="captcha-input" placeholder="?">
|
||
<span style="font-size:.65rem;color:#8a8a8a">(Spam-Schutz, einfache Rechenaufgabe)</span>
|
||
</div>
|
||
|
||
<button class="btn" onclick="sendContact()">Nachricht senden</button>
|
||
<div class="msg" id="cf-msg"></div>
|
||
</div>
|
||
|
||
<h2>Postanschrift</h2>
|
||
<div class="card">
|
||
<p><strong>GeoGraSim — Medieninhaber</strong></p>
|
||
<p>Dominik Mößlang<br>
|
||
Laimburggasse 32/Tür 18<br>
|
||
8010 Graz, Österreich</p>
|
||
<p style="font-size:.75rem;color:#666;margin-top:.4rem">Vollständige rechtliche Angaben siehe <a href="impressum.html" style="color:#4a7c8a">Impressum</a>.</p>
|
||
</div>
|
||
|
||
<div class="footer-note">
|
||
<p><a href="impressum.html">Impressum</a> · <a href="datenschutz.html">Datenschutz</a> · <a href="barrierefreiheit.html">Barrierefreiheit</a> · <a href="index.html">geograsim.at</a></p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
var BASE = (window.__GGS__?.baseUrl) || '';
|
||
if (!BASE) { var p = location.pathname, i = p.indexOf('/geograsim'); if (i !== -1) { var rest = p.substring(i + '/geograsim'.length); BASE = rest.indexOf('/App/') === 0 ? p.substring(0, i) + '/geograsim/App' : p.substring(0, i) + '/geograsim'; } }
|
||
|
||
var captchaA, captchaB, captchaOp, captchaResult;
|
||
function newCaptcha() {
|
||
captchaA = 2 + Math.floor(Math.random() * 8);
|
||
captchaB = 1 + Math.floor(Math.random() * 9);
|
||
captchaOp = Math.random() < 0.5 ? '+' : '×';
|
||
captchaResult = captchaOp === '+' ? captchaA + captchaB : captchaA * captchaB;
|
||
document.getElementById('captcha-question').textContent = 'Was ist ' + captchaA + ' ' + captchaOp + ' ' + captchaB + '?';
|
||
document.getElementById('captcha-answer').value = '';
|
||
}
|
||
newCaptcha();
|
||
|
||
// Vorbefüllung des Nachrichten-Feldes je nach gewähltem Bereich.
|
||
// Nur einsetzen, wenn die Textarea leer ist ODER noch unverändert die letzte Vorlage zeigt
|
||
// — sobald die Person eigene Sätze tippt, wird beim nächsten Bereichswechsel nichts überschrieben.
|
||
var SUBJECT_TEMPLATES = {
|
||
'Allgemeine Anfrage': '',
|
||
'Technisches Problem':
|
||
'Mein Username (falls vorhanden):\n' +
|
||
'Mein Betriebssystem (z.B. Windows 11, macOS, iPadOS):\n' +
|
||
'Mein Browser + Version (z.B. Chrome 120, Safari 17):\n' +
|
||
'Welche Seite oder Simulation:\n' +
|
||
'Was funktioniert nicht (Schritt für Schritt):\n',
|
||
'Zugänge anlegen':
|
||
'Schule / Organisation:\n' +
|
||
'Klassenstufe(n):\n' +
|
||
'Anzahl Schüler*innen:\n' +
|
||
'Wo hakt es genau:\n',
|
||
'Vorschlag neue Simulation':
|
||
'Idee / Thema:\n' +
|
||
'Lernziel:\n' +
|
||
'Zielklasse:\n' +
|
||
'Warum wäre das spannend:\n',
|
||
'Didaktische Rückmeldung':
|
||
'Welches Modul:\n' +
|
||
'Klassenstufe:\n' +
|
||
'Was hat gut funktioniert:\n' +
|
||
'Was könnte besser sein:\n',
|
||
'Datenschutz':
|
||
'Meine Frage zu DSGVO / Datenverarbeitung:\n',
|
||
'Barrierefreiheit':
|
||
'Wo trittst du auf Hürden (Seite/Sim):\n' +
|
||
'Gerät + Hilfsmittel (z.B. Screenreader, Vergrößerung):\n' +
|
||
'Beschreibung:\n',
|
||
'Kooperation / Lizenz':
|
||
'Schule / Organisation:\n' +
|
||
'Umfang (Anzahl Klassen / Lizenzen):\n' +
|
||
'Konkrete Frage:\n',
|
||
'Sonstiges': ''
|
||
};
|
||
var lastTemplate = '';
|
||
function fillTemplate() {
|
||
var subject = document.getElementById('cf-subject').value;
|
||
var ta = document.getElementById('cf-message');
|
||
var tmpl = SUBJECT_TEMPLATES[subject] || '';
|
||
// Nicht überschreiben, wenn die Person bereits eigenen Text hineingeschrieben hat
|
||
if (ta.value.trim() === '' || ta.value === lastTemplate) {
|
||
ta.value = tmpl;
|
||
lastTemplate = tmpl;
|
||
}
|
||
}
|
||
document.getElementById('cf-subject').addEventListener('change', fillTemplate);
|
||
|
||
async function sendContact() {
|
||
var name = document.getElementById('cf-name').value.trim();
|
||
var email = document.getElementById('cf-email').value.trim();
|
||
var email2 = document.getElementById('cf-email2').value.trim();
|
||
var subject = document.getElementById('cf-subject').value;
|
||
var message = document.getElementById('cf-message').value.trim();
|
||
var answer = parseInt(document.getElementById('captcha-answer').value);
|
||
var msgEl = document.getElementById('cf-msg');
|
||
|
||
if (!name || !email || !email2 || !message) { msgEl.textContent = 'Bitte alle Felder ausfüllen.'; msgEl.className = 'msg err'; return; }
|
||
if (email !== email2) { msgEl.textContent = 'Die beiden E-Mail-Adressen stimmen nicht überein.'; msgEl.className = 'msg err'; return; }
|
||
if (answer !== captchaResult) { msgEl.textContent = 'Rechenaufgabe falsch. Bitte nochmal versuchen.'; msgEl.className = 'msg err'; newCaptcha(); return; }
|
||
|
||
try {
|
||
var r = await fetch(BASE + '/api/auth', {
|
||
method: 'POST', headers: {'Content-Type':'application/json'},
|
||
body: JSON.stringify({action:'contact', name:name, email:email, subject:subject, message:message})
|
||
});
|
||
var d = await r.json();
|
||
if (d.error) { msgEl.textContent = d.error; msgEl.className = 'msg err'; newCaptcha(); return; }
|
||
msgEl.textContent = 'Nachricht gesendet! Wir antworten so schnell wie möglich.'; msgEl.className = 'msg ok';
|
||
document.getElementById('cf-name').value = '';
|
||
document.getElementById('cf-email').value = '';
|
||
document.getElementById('cf-email2').value = '';
|
||
document.getElementById('cf-message').value = '';
|
||
lastTemplate = '';
|
||
newCaptcha();
|
||
} catch(e) {
|
||
msgEl.textContent = 'Senden fehlgeschlagen. Bitte später nochmal versuchen.'; msgEl.className = 'msg err';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|