diff --git a/src/main/resources/static/css/auth.css b/src/main/resources/static/css/auth.css index 04c3266..3b67705 100644 --- a/src/main/resources/static/css/auth.css +++ b/src/main/resources/static/css/auth.css @@ -21,6 +21,8 @@ .form-box .inner { width:100%; max-width:320px; } .form-box.login { left:0; z-index:2; } .form-box.signup { left:0; opacity:0; z-index:1; } +.form-box.signup { overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } +.form-box.signup .inner { margin:auto; } .auth-container.active .form-box.login { transform:translateX(100%); opacity:0; z-index:1; } .auth-container.active .form-box.signup { transform:translateX(100%); opacity:1; z-index:5; } @@ -128,6 +130,19 @@ .mobile-switch { display:none; text-align:center; margin-top:1.2rem; color:var(--muted); font-size:.84rem; } .mobile-switch a { color:var(--accent); font-weight:700; text-decoration:none; cursor:pointer; } +/* Bestätigungs-E-Mail: Das Eingabefeld bleibt platzsparend eingeklappt. */ +.auth-resend { margin-top:1rem; } +.auth-resend-toggle { + appearance:none; border:0; padding:0; background:none; color:var(--accent); + font:700 .82rem/1.4 inherit; cursor:pointer; text-decoration:underline; + text-underline-offset:.22rem; +} +.auth-resend-toggle:hover { color:var(--heading); } +.auth-resend-toggle:focus-visible { outline:2px solid var(--accent-2); outline-offset:4px; border-radius:3px; } +.auth-resend form { margin-top:.7rem; } +.auth-resend-fields { display:flex; gap:.5rem; align-items:center; margin-top:.35rem; } +.auth-resend-fields .mf-btn { flex:0 0 auto; } + /* ---- Responsiv: gestapelt, ohne Overlay ---- */ @media (max-width:760px) { .auth-container { max-width:420px; min-height:auto; } @@ -140,4 +155,6 @@ .auth-container.active .form-box.login { display:none; } .auth-container.active .form-box.signup { display:flex; } .mobile-switch { display:block; } + .form-box.signup { overflow:visible; } + .auth-resend-fields { align-items:stretch; flex-direction:column; } } diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 240b552..c534c8b 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -92,13 +92,19 @@ -
- -
- - -
-
+
+ + +

Schon dabei? Zum Login

@@ -146,6 +152,17 @@ if (toSignup) toSignup.addEventListener('click', function () { c.classList.add('active'); }); if (toLogin) toLogin.addEventListener('click', function () { c.classList.remove('active'); }); + var resendToggle = document.getElementById('resend-toggle'); + var resendForm = document.getElementById('resend-form'); + if (resendToggle && resendForm) { + resendToggle.addEventListener('click', function () { + var expand = resendForm.hidden; + resendForm.hidden = !expand; + resendToggle.setAttribute('aria-expanded', String(expand)); + if (expand) resendForm.querySelector('input').focus(); + }); + } + document.querySelectorAll('[data-goto="signup"]').forEach(function (el) { el.addEventListener('click', function (e) { e.preventDefault(); c.classList.add('active'); }); });