Verschiebung nach anderem RePo - nun pro Projekt getrennt
This commit is contained in:
265
bin/main/static/help/kontakt.html
Normal file
265
bin/main/static/help/kontakt.html
Normal file
@@ -0,0 +1,265 @@
|
||||
<!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/sidebar.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>
|
||||
Reference in New Issue
Block a user