Rechtstexte, FinalFlux-Überarbeitung, neue Login-Optik, Konto-Löschung-Fix, BTTF-Farbrelaunch
- Rechtsseiten: Impressum-Platzhalter + echte Nutzungsbedingungen/AGB, Datenschutz (DSGVO) und Richtlinien; LegalController/ImpressumController, Footer app-weit verlinkt, Seiten als permitAll freigegeben. - FinalFlux: 28 Themen / ~742 Fragen überarbeitet (plausible Distraktoren statt Dummy-Antworten, echte Erklärungen) + echte Lehrtexte je Seite; Netzwerktopologien mit Inline-SVG-Diagrammen (Stern/Bus/Ring/Mesh/Baum). - Login/Registrierung als kombiniertes Dual-Panel (Slide-Overlay + Neon-Hover- Button), ausgelagert nach auth.css; Register-Duplikat -> /?registerError. - Konto löschen repariert: @Transactional + Löschen von Spielständen, Achievements und Profilbild-Datei (DSGVO Art. 17). Impressum-Zurück-Link login-abhängig. - App-weiter Farb-Relaunch auf "Back to the Future"-Palette: Feuer-Amber primär + Flux-Blau sekundär, warmer Glow; Dark/Light bleiben. Spiele-Feedback ohne Grün: richtig = Blau + Haken, falsch = Rot + Kreuz (neue Tokens --success/--danger/--secondary). Legacy-Cyan in style.css auf Variablen. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
AliceDarkest
@@ -6,85 +6,134 @@
|
||||
<title>Mindflux – Deine Zukunft beginnt hier</title>
|
||||
<link rel="stylesheet" href="/css/theme.css">
|
||||
<script src="/js/theme.js"></script>
|
||||
<style>
|
||||
.mf-auth { width:100%; max-width:880px; display:grid; grid-template-columns:1.1fr 1fr; gap:1.4rem; align-items:stretch; }
|
||||
.mf-auth .info { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:2rem; box-shadow:var(--g-soft); }
|
||||
.mf-auth .info h2 { color:var(--heading); font-size:1.25rem; font-weight:800; margin-bottom:.7rem; }
|
||||
.mf-auth .info p { color:var(--muted); font-size:.92rem; line-height:1.6; margin-bottom:.8rem; }
|
||||
.mf-authlogo { display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-bottom:1.4rem; text-align:center; }
|
||||
.mf-authlogo .mark { width:64px; height:64px; background:var(--accent);
|
||||
-webkit-mask:url("/img/mindflux-emblem.png") center/contain no-repeat; mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
|
||||
filter:drop-shadow(0 0 12px var(--glow-s)); }
|
||||
.mf-authlogo b { color:var(--accent); font-weight:800; letter-spacing:.16em; font-size:1.2rem; text-shadow:0 0 14px var(--glow-s); }
|
||||
.mf-authlogo span { color:var(--muted); font-size:.62rem; letter-spacing:.24em; }
|
||||
.login-box h2 { color:var(--heading); font-size:1.15rem; font-weight:800; margin-bottom:1.1rem; text-align:center; }
|
||||
.login-box .alt { color:var(--muted); font-size:.85rem; text-align:center; margin:1.1rem 0 .6rem; }
|
||||
.login-box .mf-btn { width:100%; }
|
||||
.mf-foot { margin-top:1.6rem; color:var(--muted); font-size:.78rem; text-align:center; line-height:2; }
|
||||
.mf-foot a { color:var(--muted); text-decoration:none; }
|
||||
.mf-foot a:hover { color:var(--accent); }
|
||||
@media (max-width:760px){ .mf-auth { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
<link rel="stylesheet" href="/css/auth.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="mf-theme-float"><button class="mf-theme"></button></div>
|
||||
|
||||
<div class="mf-center">
|
||||
<div>
|
||||
<div class="mf-auth">
|
||||
<!-- Infotext -->
|
||||
<div class="info">
|
||||
<p class="mf-eyebrow" style="margin-bottom:.6rem">Willkommen bei Mindflux</p>
|
||||
<h2>Worum geht's bei Mindflux?</h2>
|
||||
<p>
|
||||
Mindflux ist deine moderne Lernplattform zur gezielten Prüfungsvorbereitung in der IT-Ausbildung.
|
||||
Trainiere Fragen, baue dein Wissen auf – und das mit Stil.
|
||||
Unterstützt von Zeitreise-Ästhetik, Technik-Liebe und einer ordentlichen Portion Motivation.
|
||||
</p>
|
||||
<p>
|
||||
Registriere dich kostenlos, erstelle Quizfragen, lerne systematisch – und bring dein Wissen auf 88 Meilen pro Stunde 🚀
|
||||
</p>
|
||||
<div class="auth-stage">
|
||||
|
||||
<div class="auth-container" id="authContainer">
|
||||
|
||||
<!-- ===== Sign In ===== -->
|
||||
<div class="form-box login">
|
||||
<div class="inner">
|
||||
<div class="auth-head">
|
||||
<span class="mark"></span>
|
||||
<b>MINDFLUX</b>
|
||||
<h2>Willkommen zurück</h2>
|
||||
<span class="sub">Melde dich an, um weiterzulernen.</span>
|
||||
</div>
|
||||
|
||||
<div th:if="${param.error}" class="mf-alert err">Benutzername oder Passwort sind falsch.</div>
|
||||
<div th:if="${param.logout}" class="mf-alert ok">Du hast dich erfolgreich abgemeldet.</div>
|
||||
<div th:if="${param.registerSuccess}" class="mf-alert ok">Registrierung erfolgreich! Du kannst dich jetzt einloggen.</div>
|
||||
|
||||
<form th:action="@{/login}" method="post">
|
||||
<div class="mf-field">
|
||||
<label class="mf-label" for="login-username">Benutzername</label>
|
||||
<input id="login-username" class="mf-input" type="text" name="username" placeholder="Benutzername" required th:value="${param.username}">
|
||||
</div>
|
||||
|
||||
<!-- Login/Registrierung -->
|
||||
<div class="mf-cardbox login-box">
|
||||
<div class="mf-authlogo">
|
||||
<span class="mark"></span>
|
||||
<b>MINDFLUX</b>
|
||||
<span>DEIN FLUXKOMPENSATOR FÜRS GEHIRN</span>
|
||||
</div>
|
||||
|
||||
<h2>Login</h2>
|
||||
<form th:action="@{/login}" method="post">
|
||||
<div class="mf-field">
|
||||
<label class="mf-label" for="username">Benutzername</label>
|
||||
<input id="username" class="mf-input" type="text" name="username" placeholder="Benutzername" required />
|
||||
</div>
|
||||
<div class="mf-field">
|
||||
<label class="mf-label" for="password">Passwort</label>
|
||||
<input id="password" class="mf-input" type="password" name="password" placeholder="Passwort" required />
|
||||
</div>
|
||||
<button class="mf-btn" type="submit">Einloggen</button>
|
||||
</form>
|
||||
|
||||
<p class="alt">Noch keinen Account?</p>
|
||||
<form th:action="@{/register}" method="get">
|
||||
<button class="mf-btn outline" type="submit">Registrieren</button>
|
||||
</form>
|
||||
<div class="mf-field">
|
||||
<label class="mf-label" for="login-password">Passwort</label>
|
||||
<input id="login-password" class="mf-input" type="password" name="password" placeholder="Passwort" required>
|
||||
</div>
|
||||
<button class="neon-btn" type="submit"><span class="lock">🔒</span> Login</button>
|
||||
</form>
|
||||
|
||||
<p class="mobile-switch">Noch keinen Account? <a data-goto="signup">Jetzt registrieren</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Sign Up ===== -->
|
||||
<div class="form-box signup">
|
||||
<div class="inner">
|
||||
<div class="auth-head">
|
||||
<span class="mark"></span>
|
||||
<b>MINDFLUX</b>
|
||||
<h2>Account erstellen</h2>
|
||||
<span class="sub">Kostenlos – und in 30 Sekunden startklar.</span>
|
||||
</div>
|
||||
|
||||
<div th:if="${param.registerError}" class="mf-alert err">Benutzername bereits vergeben.</div>
|
||||
|
||||
<form th:action="@{/register}" method="post">
|
||||
<div class="mf-field">
|
||||
<label class="mf-label" for="reg-username">Benutzername</label>
|
||||
<input id="reg-username" class="mf-input" type="text" name="username" placeholder="Benutzername" required>
|
||||
</div>
|
||||
<div class="mf-field">
|
||||
<label class="mf-label" for="reg-email">E-Mail</label>
|
||||
<input id="reg-email" class="mf-input" type="email" name="email" placeholder="E-Mail" required>
|
||||
</div>
|
||||
<div class="mf-field">
|
||||
<label class="mf-label" for="reg-password">Passwort</label>
|
||||
<input id="reg-password" class="mf-input" type="password" name="password" placeholder="Passwort" required>
|
||||
</div>
|
||||
<button class="neon-btn" type="submit"><span class="lock">🚀</span> Account erstellen</button>
|
||||
</form>
|
||||
|
||||
<p class="mobile-switch">Schon dabei? <a data-goto="login">Zum Login</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Overlay ===== -->
|
||||
<div class="overlay-container">
|
||||
<div class="overlay">
|
||||
<!-- sichtbar im Signup-Modus -> zurück zum Login -->
|
||||
<div class="overlay-panel overlay-left">
|
||||
<span class="o-emblem"></span>
|
||||
<h3>Schon dabei?</h3>
|
||||
<p>Melde dich an und mach bei 88 Meilen pro Stunde weiter. 🚀</p>
|
||||
<button type="button" class="ghost-btn" id="toLogin">Zum Login</button>
|
||||
</div>
|
||||
<!-- sichtbar im Login-Modus -> zum Signup -->
|
||||
<div class="overlay-panel overlay-right">
|
||||
<span class="o-emblem"></span>
|
||||
<h3>Neu bei Mindflux?</h3>
|
||||
<p>Erstelle deinen kostenlosen Account und schalte die volle Lernplattform frei.</p>
|
||||
<button type="button" class="ghost-btn" id="toSignup">Account erstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="mf-footer">
|
||||
<a href="#">Support</a>
|
||||
<a href="#">Feedback</a>
|
||||
<a href="#">Nutzungsbedingungen</a>
|
||||
<a href="#">Richtlinien</a>
|
||||
<a href="#">Datenschutz</a>
|
||||
<a href="#">Impressum</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<footer class="mf-footer">
|
||||
<a href="#">Support</a>
|
||||
<a href="#">Feedback</a>
|
||||
<a href="/nutzungsbedingungen">Nutzungsbedingungen</a>
|
||||
<a href="/richtlinien">Richtlinien</a>
|
||||
<a href="/datenschutz">Datenschutz</a>
|
||||
<a href="/impressum">Impressum</a>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var c = document.getElementById('authContainer');
|
||||
var toSignup = document.getElementById('toSignup');
|
||||
var toLogin = document.getElementById('toLogin');
|
||||
if (toSignup) toSignup.addEventListener('click', function () { c.classList.add('active'); });
|
||||
if (toLogin) toLogin.addEventListener('click', function () { c.classList.remove('active'); });
|
||||
|
||||
document.querySelectorAll('[data-goto="signup"]').forEach(function (el) {
|
||||
el.addEventListener('click', function (e) { e.preventDefault(); c.classList.add('active'); });
|
||||
});
|
||||
document.querySelectorAll('[data-goto="login"]').forEach(function (el) {
|
||||
el.addEventListener('click', function (e) { e.preventDefault(); c.classList.remove('active'); });
|
||||
});
|
||||
|
||||
// Bei Registrierungsfehler direkt das Signup-Panel öffnen
|
||||
if (new URLSearchParams(window.location.search).has('registerError')) {
|
||||
c.classList.add('active');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user