projects/usbcheck.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sd

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-11-21 00:56:12 +01:00
parent 613e5b8023
commit 173cc7f81d
3 changed files with 177 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
partials/landing/login/login.php Normal file
View File

@@ -0,0 +1,147 @@
<section id="auth" class="border-t border-brand-border/70 bg-brand-primarySoft/20">
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
<div class="mb-10 text-center space-y-3">
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="auth_kicker">
Account &amp; Login
</p>
<h1 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="auth_title">
Melde dich bei USBCheck an
</h1>
<p class="text-sm sm:text-base text-brand-muted max-w-2xl mx-auto" data-i18n="auth_intro">
Mit einem Account kannst du Tests speichern, Reports exportieren und den Pro-Modus auf mehreren Geräten nutzen. Die Registrierung ist kostenlos – du kannst später jederzeit auf Pro upgraden.
</p>
</div>
<div class="grid gap-8 md:grid-cols-2 items-start">
<!-- Login -->
<div class="rounded-xl2 border border-brand-border bg-brand-surface/90 shadow-soft p-6 space-y-5">
<h2 class="font-heading text-lg font-semibold text-white" data-i18n="auth_login_title">
Login
</h2>
<p class="text-sm text-brand-muted" data-i18n="auth_login_text">
Melde dich mit deiner E-Mail-Adresse und deinem Passwort an.
</p>
<form method="post" action="/login/" class="space-y-4" autocomplete="on">
<div class="space-y-1">
<label for="login_email" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_login_email_label">
E-Mail-Adresse
</label>
<input
type="email"
id="login_email"
name="email"
required
class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
placeholder="you@example.com"
>
</div>
<div class="space-y-1">
<label for="login_password" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_login_password_label">
Passwort
</label>
<input
type="password"
id="login_password"
name="password"
required
class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
placeholder="••••••••"
>
</div>
<!-- Platzhalter für Fehlermeldungen (später per PHP / JS) -->
<p class="text-xs text-red-400 hidden" id="login_error">
<!-- Wird später dynamisch gefüllt -->
</p>
<button
type="submit"
class="w-full inline-flex items-center justify-center rounded-full bg-brand-primary px-4 py-2.5 text-sm font-semibold text-brand-bg hover:bg-blue-400 transition-colors"
data-i18n="auth_login_submit">
Einloggen
</button>
<div class="flex justify-between items-center text-xs text-brand-muted mt-1">
<a href="#" class="hover:text-brand-primary transition-colors" data-i18n="auth_login_forgot">
Passwort vergessen?
</a>
</div>
</form>
</div>
<!-- Registrierung -->
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 shadow-soft p-6 space-y-5">
<h2 class="font-heading text-lg font-semibold text-white" data-i18n="auth_register_title">
Kostenlos registrieren
</h2>
<p class="text-sm text-brand-muted" data-i18n="auth_register_text">
Erstelle einen kostenlosen Account, um Tests zu speichern, Berichte zu exportieren und den Pro-Modus später freizuschalten.
</p>
<form method="post" action="/login/" class="space-y-4" autocomplete="on">
<input type="hidden" name="action" value="register">
<div class="space-y-1">
<label for="reg_name" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_name_label">
Name
</label>
<input
type="text"
id="reg_name"
name="name"
required
class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
placeholder="Dein Name"
>
</div>
<div class="space-y-1">
<label for="reg_email" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_email_label">
E-Mail-Adresse
</label>
<input
type="email"
id="reg_email"
name="email"
required
class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
placeholder="you@example.com"
>
</div>
<div class="space-y-1">
<label for="reg_password" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_password_label">
Passwort
</label>
<input
type="password"
id="reg_password"
name="password"
required
class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
placeholder="Mindestens 8 Zeichen"
>
</div>
<!-- Platzhalter für Fehlermeldungen (später per PHP / JS) -->
<p class="text-xs text-red-400 hidden" id="register_error">
<!-- Wird später dynamisch gefüllt -->
</p>
<button
type="submit"
class="w-full inline-flex items-center justify-center rounded-full border border-brand-primary bg-brand-bg/80 px-4 py-2.5 text-sm font-semibold text-brand-primary hover:bg-brand-primary hover:text-brand-bg transition-colors"
data-i18n="auth_register_submit">
Account erstellen
</button>
<p class="text-[11px] text-brand-muted/80 mt-1" data-i18n="auth_register_hint">
Durch die Registrierung akzeptierst du die Datenschutzerklärung und das Impressum von USBCheck.
</p>
</form>
</div>
</div>
</div>
</section>