diff --git a/public/404.html b/public/404.html new file mode 100644 index 0000000..4b776da --- /dev/null +++ b/public/404.html @@ -0,0 +1,27 @@ + + + + + + Seite nicht gefunden + + + + + +
+ +
+ +
+

🚧 Seite nicht gefunden 🚧

+

Diese Seite existiert nicht oder befindet sich noch in Arbeit.

+ Zur Startseite +
+ + + + +
+ + \ No newline at end of file diff --git a/public/header_footer/header.html b/public/header_footer/header.html index 948d35b..7d69b84 100644 --- a/public/header_footer/header.html +++ b/public/header_footer/header.html @@ -25,7 +25,7 @@
  • LKWs
    • -
  • Ăśber uns
    • -
  • Kontakt
    • +
  • Ăśber uns
    • +
  • Kontakt
    • diff --git a/public/login/login.html b/public/login/login.html index 3493582..441ef8f 100644 --- a/public/login/login.html +++ b/public/login/login.html @@ -6,50 +6,35 @@ + Login - -
    - + +
    -
    -
    - - -
    -
    +
    +
    + + +
    +
    - - - - + + diff --git a/public/registrieren/passwordValidation.js b/public/registrieren/passwordValidation.js index daebbbe..e69de29 100644 --- a/public/registrieren/passwordValidation.js +++ b/public/registrieren/passwordValidation.js @@ -1,24 +0,0 @@ -const passwordInput = document.getElementById("regPassword"); -const strengthBar = document.getElementById("passwordStrengthBar"); - -passwordInput.addEventListener("input", () => { - const password = passwordInput.value; - const strength = getPasswordStrength(password); - updateStrengthBar(strength); -}); - -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]; -} diff --git a/public/registrieren/registrieren.html b/public/registrieren/registrieren.html index 4ceebf4..e5dbf8e 100644 --- a/public/registrieren/registrieren.html +++ b/public/registrieren/registrieren.html @@ -6,70 +6,56 @@ + Registrieren -
    +
    - -
    - + +
    - -
    -
    -
    -

    Registrieren

    + +
    +
    + +

    Registrieren

    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    -
    - - -
    +
    + + +
    - + -
    -
    -

    Bereits ein Konto? Login

    -
    - -
    -
    +
    +
    +

    Bereits ein Konto? Login

    +
    + +
    +
    - - + + -
    diff --git a/public/shop/shop.html b/public/shop/shop.html index 21287c7..9e97320 100644 --- a/public/shop/shop.html +++ b/public/shop/shop.html @@ -4,67 +4,59 @@ Shop - + + - -
    - + +
    - -
    -

    Willkommen im Webshop

    -
    - -
    -
    - + +
    +

    Willkommen im Webshop

    -
    - + - - \ No newline at end of file diff --git a/public/shop/shop_lkw.html b/public/shop/shop_lkw.html index fc3bcda..2c1af94 100644 --- a/public/shop/shop_lkw.html +++ b/public/shop/shop_lkw.html @@ -6,18 +6,11 @@ Shop - LKW's +
    -
    @@ -48,19 +41,19 @@ }); }) .catch(err => { - console.error('Fehler beim Laden der neuesten Produkte:', err); + console.error('Fehler beim Laden der Produkte:', err); + + const container = document.getElementById('products_oldtimer'); + container.innerHTML = + `
    +

    Fehler beim Laden der Produkte

    +

    Es gab ein Problem beim Abrufen der Produktdaten.
    Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.

    +
    `; }); - \ No newline at end of file diff --git a/public/shop/shop_motorrad.html b/public/shop/shop_motorrad.html index 1b11684..eacf581 100644 --- a/public/shop/shop_motorrad.html +++ b/public/shop/shop_motorrad.html @@ -6,18 +6,11 @@ Shop - Motorräder +
    -
    @@ -49,20 +42,19 @@ }); }) .catch(err => { - console.error('Fehler beim Laden der neuesten Produkte:', err); + console.error('Fehler beim Laden der Produkte:', err); + + const container = document.getElementById('products_motorrad'); + container.innerHTML = + `
    +

    Fehler beim Laden der Produkte

    +

    Es gab ein Problem beim Abrufen der Produktdaten.
    Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.

    +
    `; }); - - \ No newline at end of file diff --git a/public/shop/shop_oldtimer.html b/public/shop/shop_oldtimer.html index 2abb965..df7bb22 100644 --- a/public/shop/shop_oldtimer.html +++ b/public/shop/shop_oldtimer.html @@ -6,62 +6,54 @@ Shop - Oldtimer + - -
    - + +
    - -
    -

    Unsere Oldtimer Produkte

    -
    -
    - -
    + +
    +

    Unsere Oldtimer Produkte

    +
    +
    + +
    - + - - \ No newline at end of file diff --git a/public/shop/shop_sportwagen.html b/public/shop/shop_sportwagen.html index 9072eba..e2ee0ae 100644 --- a/public/shop/shop_sportwagen.html +++ b/public/shop/shop_sportwagen.html @@ -6,62 +6,59 @@ Shop - Sportwagen + - -
    - +
    + +
    - -
    -

    Unsere Motorrad Produkte

    -
    -
    - -
    + +
    +

    Unsere Sportwagen Produkte

    +
    + +
    + +
    + + + +
    - - - - - - \ No newline at end of file + diff --git a/public/startseite/startseite.html b/public/startseite/startseite.html index 149dd42..143ff0e 100644 --- a/public/startseite/startseite.html +++ b/public/startseite/startseite.html @@ -6,95 +6,95 @@ Modellauto - Startseite + -
    - -
    - +
    + +
    - -
    -

    Willkommen beim Modellauto-Shop

    -

    Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder. - Perfekt für Sammler, Bastler und Fans. -

    -
    +
    + +
    +

    Willkommen beim Modellauto-Shop

    +

    Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder. + Perfekt für Sammler, Bastler und Fans. +

    +
    - -

    Unsere Neusten Produkte:

    -
    - -
    + +

    Unsere Neusten Produkte:

    +
    + +
    - + // FĂĽr jedes Produkt eine Karte erzeugen + products.forEach(product => { + const card = document.createElement('div'); + card.classList.add('card'); + // HTML-Inhalt der Karte mit Produktdaten fĂĽllen + card.innerHTML = ` + ${product.name} +

    ${product.name}

    +

    Preis: ${product.price}€

    +

    ${product.description}

    + + `; + // Karte in Container einfĂĽgen + container.appendChild(card); + }); + }) + .catch(err => { + console.error('Fehler beim Laden der neuesten Produkte:', err); + + const container = document.getElementById('latest-products'); + container.innerHTML = + `
    +

    Fehler beim Laden der Produkte

    +

    Es gab ein Problem beim Abrufen der Produktdaten.
    Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.

    +
    `; + }); + - -
    -
    - -

    Versandkostenfrei ab 50 €

    -

    Schneller & sicherer Versand mit Sendungsverfolgung.

    -
    -
    - -

    Flexible Zahlungsmethoden

    -

    PayPal, Kreditkarte, Klarna, Vorkasse – Sie haben die Wahl.

    -
    -
    - -

    14 Tage RĂĽckgaberecht

    -

    Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.

    -
    -
    - -

    Top-Bewertungen

    -

    Unsere Kunden lieben uns – überzeugen Sie sich selbst!

    -
    -
    + +
    +
    + +

    Versandkostenfrei ab 50€

    +

    Schneller & sicherer Versand mit Sendungsverfolgung.

    +
    +
    + +

    Flexible Zahlungsmethoden

    +

    PayPal, Kreditkarte, Klarna, Vorkasse – Sie haben die Wahl.

    +
    +
    + +

    14 Tage RĂĽckgaberecht

    +

    Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.

    +
    +
    + +

    Top-Bewertungen

    +

    Unsere Kunden lieben uns – überzeugen Sie sich selbst!

    +
    +
    +
    - - + + - - -
    +
    diff --git a/scripts/einfĂĽgenHeaderFooter.js b/scripts/einfĂĽgenHeaderFooter.js new file mode 100644 index 0000000..08ad09d --- /dev/null +++ b/scripts/einfĂĽgenHeaderFooter.js @@ -0,0 +1,41 @@ +document.addEventListener("DOMContentLoaded", () => { + // Header laden + const headerTarget = document.getElementById("header-placeholder"); + if (headerTarget) { + fetch("/header") + .then(response => { + if (!response.ok) throw new Error("Header nicht gefunden"); + return response.text(); + }) + .then(data => { + headerTarget.innerHTML = data; + }) + .catch(error => { + headerTarget.innerHTML = ` +
    + Fehler beim Laden des Headers. +
    `; + console.error(error); + }); + } + + // Footer laden + const footerTarget = document.getElementById("footer"); + if (footerTarget) { + fetch("/footer") + .then(response => { + if (!response.ok) throw new Error("Footer nicht gefunden"); + return response.text(); + }) + .then(data => { + footerTarget.innerHTML = data; + }) + .catch(error => { + footerTarget.innerHTML = ` +
    + Fehler beim Laden der FuĂźzeile. +
    `; + console.error(error); + }); + } +}); diff --git a/scripts/routes/other/route-index.js b/scripts/routes/other/route-index.js index 3b1ad34..6b198ef 100644 --- a/scripts/routes/other/route-index.js +++ b/scripts/routes/other/route-index.js @@ -20,15 +20,20 @@ router.get('/registrieren', (req, res) => { res.sendFile(path.join(__dirname, '../../../public/registrieren/registrieren.html')); }) -// Route - Kopfzeile -router.get('/header', (req, res) => { - res.sendFile(path.join(__dirname, '../../../public/header_footer/header.html')); +// Route - HeaderFooter +router.get('/header_footer', (req, res) => { + res.sendFile(path.join(__dirname, '../../../scripts/einfügenHeaderFooter.js')); }) -// Route - Fußzeile -router.get('/footer', (req, res) => { - res.sendFile(path.join(__dirname, '../../../public/header_footer/footer.html')); -}) + // Route - Kopfzeile + router.get('/header', (req, res) => { + res.sendFile(path.join(__dirname, '../../../public/header_footer/header.html')); + }) + + // Route - Fußzeile + router.get('/footer', (req, res) => { + res.sendFile(path.join(__dirname, '../../../public/header_footer/footer.html')); + }) // Route - Shop (Alle Produkte) router.get('/shop', (req, res) => { @@ -55,6 +60,4 @@ router.get('/shop', (req, res) => { res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html')); }) - - module.exports = router; \ No newline at end of file diff --git a/server.js b/server.js index 8c412ba..0619c03 100644 --- a/server.js +++ b/server.js @@ -130,6 +130,10 @@ app.get('/api/products/sportwagen', async (req, res) => { const getIndexRoute = require('./scripts/routes/other/route-index'); app.use('/', getIndexRoute); +app.use((req, res) => { + res.status(404).sendFile(path.join(__dirname, 'public', '404.html')); +}); + // Sever starten app.listen(process.env.APP_PORT, () => { console.log("\x1b[32m"); diff --git a/static/Styles/login/login.css b/static/Styles/login/login.css index 68ac65b..d5072e2 100644 --- a/static/Styles/login/login.css +++ b/static/Styles/login/login.css @@ -31,7 +31,7 @@ } .login-form .icon { - display: none; /* Falls du später Icons einbinden willst, kannst du das anpassen */ + display: none; } .login-btn { diff --git a/static/Styles/styles-main.css b/static/Styles/styles-main.css index c11555b..a62ee29 100644 --- a/static/Styles/styles-main.css +++ b/static/Styles/styles-main.css @@ -6,6 +6,10 @@ font-family: "Poppins", sans-serif; } +html, body { + height: 100%; +} + body { background: #f8f9fa; color: #333; @@ -14,6 +18,12 @@ body { flex-direction: column; } +.wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; +} + /* ========== Header ========== */ header { display: flex; @@ -297,7 +307,7 @@ main { background: #ff6600; color: white; border: none; - border-radius: 5px; + border-radius: 10px; font-size: 16px; cursor: pointer; transition: background 0.3s ease; @@ -329,7 +339,7 @@ h1 { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 30px 25px; width: 320px; - min-height: 300px; + min-height: 50px; text-align: center; transition: transform 0.3s ease; display: flex; @@ -358,4 +368,37 @@ h1 { color: #555; } +/* ========== Error Nachricht (Header und Footer) ========== */ +.error-message { + max-width: 600px; + margin: 40px auto; + padding: 30px; + background-color: #fff5f5; + color: #b00020; + border: 1px solid #ffcccc; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + text-align: center; + font-family: inherit; + animation: fadeIn 0.6s ease-in-out; +} + +.error-message h3 { + margin-bottom: 10px; + font-size: 1.5rem; +} + +.error-message p { + font-size: 1rem; + line-height: 1.5; +} + +/* Optional: weiche Animation beim Einblenden */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + + +