startseite.html
This commit is contained in:
parent
96378d1ad6
commit
3b743d07ce
@ -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;
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
this.setCustomValidity("Die Passwörter stimmen nicht überein.");
|
||||
} else {
|
||||
this.setCustomValidity("");
|
||||
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;
|
||||
}
|
||||
|
||||
function updateStrengthBar(strength) {
|
||||
const colors = ["#ccc", "red", "orange", "yellow", "lightgreen", "green"];
|
||||
strengthBar.style.width = `${(strength / 5) * 100}%`;
|
||||
strengthBar.style.backgroundColor = colors[strength];
|
||||
}
|
||||
});
|
||||
|
||||
@ -13,11 +13,11 @@
|
||||
<h1>Registrieren</h1>
|
||||
|
||||
<div class="input-box">
|
||||
<input type="text" name="name" placeholder="Voller Name" required>
|
||||
<input type="text" name="vorname" placeholder="Vorname" required>
|
||||
<i class='bx bxs-user'></i>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input type="text" name="username" placeholder="Username" required>
|
||||
<input type="text" name="nachname" placeholder="Nachname" required>
|
||||
<i class='bx bxs-user'></i>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
@ -37,7 +37,6 @@
|
||||
<!-- Sicherheitsbalken -->
|
||||
<div id="passwordStrengthBar" class="password-strength-bar"></div>
|
||||
|
||||
|
||||
<button type="submit" class="btn">Registrieren</button>
|
||||
|
||||
<div class="register-link">
|
||||
@ -46,6 +45,7 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./passwordValidation.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -26,16 +26,18 @@
|
||||
<nav class="menu">
|
||||
<ul class="menu-list">
|
||||
<li class="menu-item">
|
||||
<a href="#">Startseite</a>
|
||||
<a href="/">Startseite</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">Neuwagen</a>
|
||||
<a href="#">Shop</a>
|
||||
<ul class="submenu">
|
||||
<li><a href="/shop/oldtimer">Oldtimer</a></li>
|
||||
<li><a href="/shop/sportwagen">Sportwagen</a></li>
|
||||
<li><a href="/shop/lkw">LKWs</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">Gebrauchtwagen</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">Angebote</a>
|
||||
<a href="#">Über uns</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">Kontakt</a>
|
||||
@ -44,37 +46,23 @@
|
||||
</nav>
|
||||
|
||||
<!-- Hauptinhalt -->
|
||||
<main>
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Marke oder Modell eingeben">
|
||||
<select>
|
||||
<option>Fahrzeugtyp</option>
|
||||
<option>SUV</option>
|
||||
<option>Limousine</option>
|
||||
<option>Kombi</option>
|
||||
</select>
|
||||
<select>
|
||||
<option>Preisspanne</option>
|
||||
<option>Bis 10.000€</option>
|
||||
<option>Bis 20.000€</option>
|
||||
<option>Bis 50.000€</option>
|
||||
</select>
|
||||
<button>Suchen</button>
|
||||
</div>
|
||||
|
||||
<h1>Unsere Angebote</h1>
|
||||
<main>
|
||||
<section class="card-grid">
|
||||
<div class="card">
|
||||
<img src="https://via.placeholder.com/150" alt="Auto">
|
||||
<h3>BMW 3er Limousine</h3>
|
||||
<p>Preis: 35.000€</p>
|
||||
<p>Baujahr: 2020 | Kilometerstand: 20.000 km</p>
|
||||
<img src="https://shop.porsche.com/_next/image?url=https%3A%2F%2Fassets-prod.porsche.com%2Fassets%2Fce81555c-4f59-485e-9f9b-7a448a4d91b3.webp&w=2560&q=75" alt="Porsche">
|
||||
<h3>Name des Produktes</h3>
|
||||
<p>Preis: 23€</p>
|
||||
<p>weitere Infos</p>
|
||||
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="https://via.placeholder.com/150" alt="Auto">
|
||||
<h3>Audi Q5</h3>
|
||||
<p>Preis: 50.000€</p>
|
||||
<p>Baujahr: 2022 | Kilometerstand: 10.000 km</p>
|
||||
<img src="https://www.modellautocenter.de/media/image/product/23241/md/avia-a31n-pritsche-mit-plane-blau-modellauto-143-premium-classixxs.jpg" alt="LKW">
|
||||
<h3>Avia A31N Pritsche mit Plane blau Modellauto 1:43 Premium ClassiXXs</h3>
|
||||
<p>Preis: 74,99€</p>
|
||||
<p>Modellauto / Premium ClassiXXs 1:43
|
||||
Avia A31N Pritsche mit Plane, fertiges Modellauto aus Die-Cast (Metall)</p>
|
||||
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user