startseite.html

public/registrieren/passwordValidation.js

@@ -1,45 +1,24 @@
-// Funktion, um die Stärke des Passworts zu bewerten
+const passwordInput = document.getElementById("regPassword");
-function checkPasswordStrength(password) {
+const strengthBar = document.getElementById("passwordStrengthBar");
-    const strengthBar = document.getElementById('passwordStrengthBar');
-    const passwordStrength = evaluatePasswordStrength(password);
 
-    // Aktualisiere den Sicherheitsbalken basierend auf der Stärke
+passwordInput.addEventListener("input", () => {
-    if (passwordStrength === 'weak') {
+    const password = passwordInput.value;
-        strengthBar.classList.remove('medium', 'strong');
+    const strength = getPasswordStrength(password);
-        strengthBar.classList.add('weak');
+    updateStrengthBar(strength);
-    } 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);
 });
 
-// Event Listener für das Bestätigungs-Passwortfeld
+function getPasswordStrength(password) {
-document.getElementById('confirmPassword').addEventListener('input', function() {
+    let strength = 0;
-    const password = document.getElementById('regPassword').value;
+    if (password.length >= 8) strength++; // Mindestlänge
-    const confirmPassword = this.value;
+    if (/[A-Z]/.test(password)) strength++; // Großbuchstaben
-
+    if (/[a-z]/.test(password)) strength++; // Kleinbuchstaben
-    if (password !== confirmPassword) {
+    if (/[0-9]/.test(password)) strength++; // Zahlen
-        this.setCustomValidity("Die Passwörter stimmen nicht überein.");
+    if (/[^A-Za-z0-9]/.test(password)) strength++; // Sonderzeichen
-    } else {
+    return strength;
-        this.setCustomValidity("");
+}
+
+function updateStrengthBar(strength) {
+    const colors = ["#ccc", "red", "orange", "yellow", "lightgreen", "green"];
+    strengthBar.style.width = `${(strength / 5) * 100}%`;
+    strengthBar.style.backgroundColor = colors[strength];
 }
-});

public/registrieren/registrieren.html

@@ -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>

public/startseite/startseite.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>
+                <a href="#">Über uns</a>
-            </li>
-            <li class="menu-item">
-                <a href="#">Angebote</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">
+                <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>BMW 3er Limousine</h3>
+                <h3>Name des Produktes</h3>
-                <p>Preis: 35.000€</p>
+                <p>Preis: 23€</p>
-                <p>Baujahr: 2020 | Kilometerstand: 20.000 km</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">
+                <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>Audi Q5</h3>
+                <h3>Avia A31N Pritsche mit Plane blau Modellauto 1:43 Premium ClassiXXs</h3>
-                <p>Preis: 50.000€</p>
+                <p>Preis: 74,99€</p>
-                <p>Baujahr: 2022 | Kilometerstand: 10.000 km</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>

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: 8px;
-    height: 5px;
+    width: 0%;
-    background-color: #ddd;
+    background-color: #ccc;
-    border-radius: 5px;
+    margin-top: 5px;
-    margin-top: 10px;
+    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;
 }
+