From 3b743d07ceaf6d1ffe32a6336adc546402a8ac6b Mon Sep 17 00:00:00 2001 From: gitfreeking Date: Fri, 11 Apr 2025 08:35:58 +0200 Subject: [PATCH] startseite.html --- public/registrieren/passwordValidation.js | 61 +++++++-------------- public/registrieren/registrieren.html | 6 +- public/startseite/startseite.html | 50 +++++++---------- static/Styles/registrieren/registrieren.css | 16 +++--- 4 files changed, 51 insertions(+), 82 deletions(-) diff --git a/public/registrieren/passwordValidation.js b/public/registrieren/passwordValidation.js index 3a6fbc2..daebbbe 100644 --- a/public/registrieren/passwordValidation.js +++ b/public/registrieren/passwordValidation.js @@ -1,45 +1,24 @@ -// Funktion, um die Stärke des Passworts zu bewerten -function checkPasswordStrength(password) { - const strengthBar = document.getElementById('passwordStrengthBar'); - const passwordStrength = evaluatePasswordStrength(password); +const passwordInput = document.getElementById("regPassword"); +const strengthBar = document.getElementById("passwordStrengthBar"); - // Aktualisiere den Sicherheitsbalken basierend auf der Stärke - if (passwordStrength === 'weak') { - strengthBar.classList.remove('medium', 'strong'); - strengthBar.classList.add('weak'); - } else if (passwordStrength === 'medium') { - strengthBar.classList.remove('weak', 'strong'); - strengthBar.classList.add('medium'); - } else { - strengthBar.classList.remove('weak', 'medium'); - strengthBar.classList.add('strong'); - } -} - -// Funktion zur Beurteilung der Passwortstärke -function evaluatePasswordStrength(password) { - if (password.length >= 8 && /[A-Z]/.test(password) && /[0-9]/.test(password)) { - return 'strong'; - } else if (password.length >= 6) { - return 'medium'; - } else { - return 'weak'; - } -} - -// Event Listener für das Passwortfeld -document.getElementById('regPassword').addEventListener('input', function() { - checkPasswordStrength(this.value); +passwordInput.addEventListener("input", () => { + const password = passwordInput.value; + const strength = getPasswordStrength(password); + updateStrengthBar(strength); }); -// Event Listener für das Bestätigungs-Passwortfeld -document.getElementById('confirmPassword').addEventListener('input', function() { - const password = document.getElementById('regPassword').value; - const confirmPassword = this.value; +function getPasswordStrength(password) { + let strength = 0; + if (password.length >= 8) strength++; // Mindestlänge + if (/[A-Z]/.test(password)) strength++; // Großbuchstaben + if (/[a-z]/.test(password)) strength++; // Kleinbuchstaben + if (/[0-9]/.test(password)) strength++; // Zahlen + if (/[^A-Za-z0-9]/.test(password)) strength++; // Sonderzeichen + return strength; +} - if (password !== confirmPassword) { - this.setCustomValidity("Die Passwörter stimmen nicht überein."); - } else { - this.setCustomValidity(""); - } -}); +function updateStrengthBar(strength) { + const colors = ["#ccc", "red", "orange", "yellow", "lightgreen", "green"]; + strengthBar.style.width = `${(strength / 5) * 100}%`; + strengthBar.style.backgroundColor = colors[strength]; +} diff --git a/public/registrieren/registrieren.html b/public/registrieren/registrieren.html index f95b594..ab1d6e2 100644 --- a/public/registrieren/registrieren.html +++ b/public/registrieren/registrieren.html @@ -13,11 +13,11 @@

Registrieren

- +
- +
@@ -37,7 +37,6 @@
-
@@ -46,6 +45,7 @@
+ diff --git a/public/startseite/startseite.html b/public/startseite/startseite.html index 7640721..faa91c1 100644 --- a/public/startseite/startseite.html +++ b/public/startseite/startseite.html @@ -26,16 +26,18 @@ -
-
- - - - -
+

Unsere Angebote

+
- Auto -

BMW 3er Limousine

-

Preis: 35.000€

-

Baujahr: 2020 | Kilometerstand: 20.000 km

+ Porsche +

Name des Produktes

+

Preis: 23€

+

weitere Infos

- Auto -

Audi Q5

-

Preis: 50.000€

-

Baujahr: 2022 | Kilometerstand: 10.000 km

+ LKW +

Avia A31N Pritsche mit Plane blau Modellauto 1:43 Premium ClassiXXs

+

Preis: 74,99€

+

Modellauto / Premium ClassiXXs 1:43 + Avia A31N Pritsche mit Plane, fertiges Modellauto aus Die-Cast (Metall)

diff --git a/static/Styles/registrieren/registrieren.css b/static/Styles/registrieren/registrieren.css index 1027480..91a822b 100644 --- a/static/Styles/registrieren/registrieren.css +++ b/static/Styles/registrieren/registrieren.css @@ -11,14 +11,14 @@ body { color: #333; min-height: 100vh; display: flex; - flex-direction: column; + justify-content: center; + align-items: center; } /* Wrapper für das Formular */ .wrapper { width: 100%; max-width: 400px; - margin: 50px auto; padding: 20px; background: #fff; border-radius: 10px; @@ -76,11 +76,12 @@ h1 { /* Passwort Sicherheitsbalken */ .password-strength-bar { - width: 100%; - height: 5px; - background-color: #ddd; - border-radius: 5px; - margin-top: 10px; + height: 8px; + width: 0%; + background-color: #ccc; + margin-top: 5px; + transition: width 0.3s ease, background-color 0.3s ease; + border-radius: 4px; } /* Sicherheitsstufen */ @@ -127,3 +128,4 @@ h1 { .register-link a:hover { color: #e95b00; } +