Mario
2b0ce62d33
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
266 lines
9.0 KiB
HTML
266 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<link rel="icon" href="/img/icon.png" type="image/png">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Kontakt & Feedback – xXx Sphere</title>
|
||
<link rel="stylesheet" href="/css/variables.css">
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<style>
|
||
.hilfe-header {
|
||
margin-bottom: 2rem;
|
||
}
|
||
.hilfe-header h1 {
|
||
font-size: 1.6rem;
|
||
margin: 0 0 0.4rem 0;
|
||
}
|
||
.hilfe-header p {
|
||
color: var(--color-muted);
|
||
font-size: 0.92rem;
|
||
margin: 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ── E-Mail-Hinweis ── */
|
||
.mail-hint {
|
||
background: rgba(var(--color-primary-rgb, 120,80,200), 0.08);
|
||
border-left: 3px solid var(--color-primary);
|
||
border-radius: 0 8px 8px 0;
|
||
padding: 0.75rem 1rem;
|
||
font-size: 0.88rem;
|
||
color: var(--color-muted);
|
||
line-height: 1.6;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.mail-hint strong { color: var(--color-text); }
|
||
.mail-hint a { color: var(--color-text); }
|
||
|
||
/* ── Formular-Card ── */
|
||
.feedback-card {
|
||
background: var(--color-card);
|
||
border: 1px solid var(--color-secondary);
|
||
border-radius: 10px;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.4rem;
|
||
margin-bottom: 1.1rem;
|
||
}
|
||
.form-group:last-of-type {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.form-group label {
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
color: var(--color-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
background: var(--color-secondary);
|
||
border: 1px solid transparent;
|
||
border-radius: 8px;
|
||
padding: 0.65rem 0.9rem;
|
||
color: var(--color-text);
|
||
font-size: 0.92rem;
|
||
font-family: inherit;
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.form-group input:focus,
|
||
.form-group select:focus,
|
||
.form-group textarea:focus {
|
||
border-color: var(--color-primary);
|
||
}
|
||
.form-group input[readonly],
|
||
.form-group input:disabled {
|
||
opacity: 0.55;
|
||
cursor: default;
|
||
}
|
||
.form-group textarea {
|
||
resize: vertical;
|
||
min-height: 130px;
|
||
}
|
||
.form-group select option {
|
||
background: var(--color-card);
|
||
}
|
||
|
||
.char-counter {
|
||
font-size: 0.78rem;
|
||
color: var(--color-muted);
|
||
text-align: right;
|
||
}
|
||
.char-counter.warn { color: #e74c3c; }
|
||
|
||
.btn-send {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.7rem 1.5rem;
|
||
background: var(--color-primary);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: opacity 0.15s;
|
||
}
|
||
.btn-send:hover { opacity: 0.85; }
|
||
.btn-send:disabled { opacity: 0.45; cursor: default; }
|
||
|
||
.feedback-success {
|
||
display: none;
|
||
background: rgba(39,174,96,0.1);
|
||
border-left: 3px solid #27ae60;
|
||
border-radius: 0 8px 8px 0;
|
||
padding: 0.75rem 1rem;
|
||
font-size: 0.9rem;
|
||
color: var(--color-muted);
|
||
margin-top: 1rem;
|
||
}
|
||
.feedback-success strong { color: #27ae60; }
|
||
.feedback-error {
|
||
display: none;
|
||
background: rgba(231,76,60,0.08);
|
||
border-left: 3px solid #e74c3c;
|
||
border-radius: 0 8px 8px 0;
|
||
padding: 0.75rem 1rem;
|
||
font-size: 0.9rem;
|
||
color: var(--color-muted);
|
||
margin-top: 1rem;
|
||
}
|
||
.feedback-error strong { color: #e74c3c; }
|
||
</style>
|
||
</head>
|
||
<body class="app">
|
||
<div class="main">
|
||
<div class="content">
|
||
|
||
<div class="hilfe-header">
|
||
<h1>✉️ Kontakt & Feedback</h1>
|
||
<p>Hast du Fragen, Ideen oder einen Fehler gefunden? Schreib uns!</p>
|
||
</div>
|
||
|
||
<div class="mail-hint">
|
||
<strong>Alternativ per E-Mail:</strong> Du kannst uns auch direkt schreiben –
|
||
<a href="mailto:kontakt@xxx-sphere.de">kontakt@xxx-sphere.de</a>
|
||
</div>
|
||
|
||
<div class="feedback-card">
|
||
<div class="form-group">
|
||
<label for="fb-name">Name</label>
|
||
<input type="text" id="fb-name" readonly placeholder="Wird geladen…">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="fb-seite">Seite</label>
|
||
<input type="text" id="fb-seite" readonly>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="fb-grund">Kontaktgrund</label>
|
||
<select id="fb-grund">
|
||
<option value="Fehlermeldung">🐛 Fehlermeldung</option>
|
||
<option value="Feedback">💬 Feedback</option>
|
||
<option value="Idee & Verbesserungsvorschlag">💡 Idee & Verbesserungsvorschlag</option>
|
||
<option value="Nachfrage">❓ Nachfrage</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="fb-text">Nachricht</label>
|
||
<textarea id="fb-text" maxlength="1000" placeholder="Beschreibe dein Anliegen…"></textarea>
|
||
<span class="char-counter" id="fb-counter">0 / 1000</span>
|
||
</div>
|
||
<button class="btn-send" id="fb-send" onclick="sendFeedback()">✉️ Absenden</button>
|
||
<div class="feedback-success" id="fb-success">
|
||
<strong>Vielen Dank!</strong> Deine Nachricht wurde erfolgreich übermittelt.
|
||
</div>
|
||
<div class="feedback-error" id="fb-error">
|
||
<strong>Fehler:</strong> Die Nachricht konnte nicht gesendet werden. Bitte versuche es später erneut.
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<script src="/js/icons.js"></script>
|
||
<script src="/js/nav.js"></script>
|
||
<script>
|
||
// Name vorausfüllen
|
||
fetch('/login/me')
|
||
.then(r => r.ok ? r.json() : null)
|
||
.then(user => {
|
||
const field = document.getElementById('fb-name');
|
||
if (user && user.name) {
|
||
field.value = user.name;
|
||
} else {
|
||
field.value = 'Gast';
|
||
}
|
||
})
|
||
.catch(() => { document.getElementById('fb-name').value = 'Gast'; });
|
||
|
||
// Seite vorausfüllen
|
||
(function () {
|
||
const field = document.getElementById('fb-seite');
|
||
try {
|
||
const ref = document.referrer;
|
||
if (ref) {
|
||
const url = new URL(ref);
|
||
field.value = url.pathname;
|
||
} else {
|
||
field.value = 'Direkt aufgerufen';
|
||
}
|
||
} catch (_) {
|
||
field.value = 'Unbekannt';
|
||
}
|
||
})();
|
||
|
||
// Zeichenzähler
|
||
document.getElementById('fb-text').addEventListener('input', function () {
|
||
const len = this.value.length;
|
||
const counter = document.getElementById('fb-counter');
|
||
counter.textContent = len + ' / 1000';
|
||
counter.className = 'char-counter' + (len > 900 || len < 10 ? ' warn' : '');
|
||
});
|
||
|
||
async function sendFeedback() {
|
||
const btn = document.getElementById('fb-send');
|
||
const text = document.getElementById('fb-text').value.trim();
|
||
if (text.length < 10) { document.getElementById('fb-text').focus(); return; }
|
||
|
||
btn.disabled = true;
|
||
document.getElementById('fb-success').style.display = 'none';
|
||
document.getElementById('fb-error').style.display = 'none';
|
||
|
||
try {
|
||
const res = await fetch('/api/feedback', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
name: document.getElementById('fb-name').value,
|
||
seite: document.getElementById('fb-seite').value,
|
||
grund: document.getElementById('fb-grund').value,
|
||
text: text
|
||
})
|
||
});
|
||
if (res.ok) {
|
||
document.getElementById('fb-success').style.display = 'block';
|
||
document.getElementById('fb-text').value = '';
|
||
document.getElementById('fb-counter').textContent = '0 / 1000';
|
||
} else {
|
||
document.getElementById('fb-error').style.display = 'block';
|
||
btn.disabled = false;
|
||
}
|
||
} catch (_) {
|
||
document.getElementById('fb-error').style.display = 'block';
|
||
btn.disabled = false;
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|