.idea/dataSources.xml

@@ -2,10 +2,10 @@
 <project version="4">
   <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
     <data-source source="LOCAL" name="@localhost" uuid="fd7d9aa1-1427-4fa7-afe9-9730b93129bb">
-      <driver-ref>mariadb</driver-ref>
+      <driver-ref>mysql.8</driver-ref>
       <synchronize>true</synchronize>
-      <jdbc-driver>org.mariadb.jdbc.Driver</jdbc-driver>
+      <jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
-      <jdbc-url>jdbc:mariadb://localhost:3306</jdbc-url>
+      <jdbc-url>jdbc:mysql://localhost:3306</jdbc-url>
       <jdbc-additional-properties>
         <property name="com.intellij.clouds.kubernetes.db.host.port" />
         <property name="com.intellij.clouds.kubernetes.db.enabled" value="false" />

public/registrieren/passwordValidation.js

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

public/registrieren/registrieren.html

@@ -13,11 +13,11 @@
     <h1>Registrieren</h1>
 
     <div class="input-box">
-      <input type="text" name="vorname" placeholder="Vorname" required>
+      <input type="text" name="name" placeholder="Voller Name" required>
       <i class='bx bxs-user'></i>
     </div>
     <div class="input-box">
-      <input type="text" name="nachname" placeholder="Nachname" required>
+      <input type="text" name="username" placeholder="Username" required>
       <i class='bx bxs-user'></i>
     </div>
     <div class="input-box">
@@ -37,6 +37,7 @@
     <!-- Sicherheitsbalken -->
     <div id="passwordStrengthBar" class="password-strength-bar"></div>
 
+
     <button type="submit" class="btn">Registrieren</button>
 
     <div class="register-link">
@@ -45,7 +46,6 @@
     </div>
   </form>
 </div>
-</div>
 <script src="./passwordValidation.js"></script>
 </body>
 </html>

public/startseite/startseite.html

@@ -26,18 +26,16 @@
     <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="#">Shop</a>
+                <a href="#">Neuwagen</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="#">Über uns</a>
+                <a href="#">Gebrauchtwagen</a>
+            </li>
+            <li class="menu-item">
+                <a href="#">Angebote</a>
             </li>
             <li class="menu-item">
                 <a href="#">Kontakt</a>
@@ -46,23 +44,37 @@
     </nav>
 
     <!-- Hauptinhalt -->
-
-    <h1>Unsere Angebote</h1>
     <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>
+
         <section class="card-grid">
             <div class="card">
-                <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">
+                <img src="https://via.placeholder.com/150" alt="Auto">
-                <h3>Name des Produktes</h3>
+                <h3>BMW 3er Limousine</h3>
-                <p>Preis: 23€</p>
+                <p>Preis: 35.000€</p>
-                <p>weitere Infos</p>
+                <p>Baujahr: 2020 | Kilometerstand: 20.000 km</p>
                 <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
             </div>
             <div class="card">
-                <img src="https://www.modellautocenter.de/media/image/product/23241/md/avia-a31n-pritsche-mit-plane-blau-modellauto-143-premium-classixxs.jpg" alt="LKW">
+                <img src="https://via.placeholder.com/150" alt="Auto">
-                <h3>Avia A31N Pritsche mit Plane blau Modellauto 1:43 Premium ClassiXXs</h3>
+                <h3>Audi Q5</h3>
-                <p>Preis: 74,99€</p>
+                <p>Preis: 50.000€</p>
-                <p>Modellauto / Premium ClassiXXs 1:43
+                <p>Baujahr: 2022 | Kilometerstand: 10.000 km</p>
-                    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;
-    justify-content: center;
+    flex-direction: column;
-    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,12 +76,11 @@ h1 {
 
 /* Passwort Sicherheitsbalken */
 .password-strength-bar {
-    height: 8px;
+    width: 100%;
-    width: 0%;
+    height: 5px;
-    background-color: #ccc;
+    background-color: #ddd;
-    margin-top: 5px;
+    border-radius: 5px;
-    transition: width 0.3s ease, background-color 0.3s ease;
+    margin-top: 10px;
-    border-radius: 4px;
 }
 
 /* Sicherheitsstufen */
@@ -128,4 +127,3 @@ h1 {
 .register-link a:hover {
     color: #e95b00;
 }
-