Berufsschule/Webshop
Berufsschule/Webshop
Template
5
2
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

404.html erstellt. Fehler,eldungen hinzugefügt.

Browse Source
This commit is contained in:
gitfreeking 2025-04-22 18:23:51 +02:00
parent ce66f54192
commit a254503516
16 changed files with 408 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
public/404.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seite nicht gefunden</title>
<link rel="stylesheet" href="/Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<main class="content" style="text-align: center; padding: 80px;">
<h1>🚧 Seite nicht gefunden 🚧</h1>
<p>Diese Seite existiert nicht oder befindet sich noch in Arbeit.</p>
<a href="/" class="btn" style="width: auto; display: inline-block; margin-top: 20px;">Zur Startseite</a>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
</div>
</body>
</html>

4
public/header_footer/header.html
View File

@ -25,7 +25,7 @@
<li><a href="/shop/lkw">LKWs</a></li> <li><a href="/shop/lkw">LKWs</a></li>
</ul> </ul>
</li> </li>
<li class="menu-item"><a href="#">Über uns</a></li> <li class="menu-item"><a href="/ueberuns">Über uns</a></li>
<li class="menu-item"><a href="#">Kontakt</a></li> <li class="menu-item"><a href="/kontakt">Kontakt</a></li>
</ul> </ul>
</nav> </nav>

63
public/login/login.html
View File

@ -6,50 +6,35 @@
<link rel="stylesheet" href="./Styles/login/login.css"> <link rel="stylesheet" href="./Styles/login/login.css">
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
<title>Login</title> <title>Login</title>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<script>
fetch(href="/header")
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
})
.catch(error => console.error('Fehler beim Laden des Headers:', error));
</script>
<main class="main-content"> <main class="main-content">
<div class="login-container"> <div class="login-container">
<h2 class="login-title">Login</h2> <h2 class="login-title">Login</h2>
<form class="login-form"> <form class="login-form">
<div class="input-group"> <div class="input-group">
<input type="text" placeholder="Username" required /> <input type="text" placeholder="Username" required />
<i class="icon fas fa-user"></i> <i class="icon fas fa-user"></i>
</div> </div>
<div class="input-group"> <div class="input-group">
<input type="password" placeholder="Passwort" required /> <input type="password" placeholder="Passwort" required />
<i class="icon fas fa-lock"></i> <i class="icon fas fa-lock"></i>
</div> </div>
<button type="submit" class="login-btn">Login</button> <button type="submit" class="login-btn">Login</button>
<p class="register-text"> <p class="register-text">
Noch keinen Account? <a href="/registrieren">Registrieren</a> Noch keinen Account? <a href="/registrieren">Registrieren</a>
</p> </p>
</form> </form>
</div> </div>
</main> </main>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

24
public/registrieren/passwordValidation.js
View File

@ -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];
}

92
public/registrieren/registrieren.html
View File

@ -6,70 +6,56 @@
<link rel="stylesheet" href="./Styles/registrieren/registrieren.css"> <link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
<title>Registrieren</title> <title>Registrieren</title>
</head> </head>
<body> <body>
<div class="page-container"> <div class="page-container">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<script>
fetch(href="/header")
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
})
.catch(error => console.error('Fehler beim Laden des Headers:', error));
</script>
<!-- Registrierungsformular --> <!-- Registrierungsformular -->
<main class="content-wrapper"> <main class="content-wrapper">
<div class="wrapper"> <div class="wrapper">
<form action="register.php" method="POST"> <form action="register.php" method="POST">
<h1>Registrieren</h1> <h1>Registrieren</h1>
<div class="input-box"> <div class="input-box">
<input type="text" name="vorname" placeholder="Vorname" required> <input type="text" name="vorname" placeholder="Vorname" required>
<i class='bx bxs-user'></i> <i class='bx bxs-user'></i>
</div> </div>
<div class="input-box"> <div class="input-box">
<input type="text" name="nachname" placeholder="Nachname" required> <input type="text" name="nachname" placeholder="Nachname" required>
<i class='bx bxs-user'></i> <i class='bx bxs-user'></i>
</div> </div>
<div class="input-box"> <div class="input-box">
<input type="email" name="email" placeholder="E-Mail" required> <input type="email" name="email" placeholder="E-Mail" required>
<i class='bx bxs-envelope'></i> <i class='bx bxs-envelope'></i>
</div> </div>
<div class="input-box"> <div class="input-box">
<input type="password" id="regPassword" name="password" placeholder="Passwort" required> <input type="password" id="regPassword" name="password" placeholder="Passwort" required>
<i class='bx bxs-lock-alt'></i> <i class='bx bxs-lock-alt'></i>
</div> </div>
<div class="input-box"> <div class="input-box">
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen" required> <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen" required>
<i class='bx bxs-lock-alt'></i> <i class='bx bxs-lock-alt'></i>
</div> </div>
<button type="submit" class="btn">Registrieren</button> <button type="submit" class="btn">Registrieren</button>
<div class="register-link"> <div class="register-link">
<br> <br>
<p>Bereits ein Konto? <a href="/login">Login</a></p> <p>Bereits ein Konto? <a href="/login">Login</a></p>
</div> </div>
</form> </form>
</div> </div>
</main> </main>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</div> </div>
</body> </body>
</html> </html>

92
public/shop/shop.html
View File

@ -4,67 +4,59 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title> <title>Shop</title>
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<script>
fetch(href="/header")
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
})
.catch(error => console.error('Fehler beim Laden des Headers:', error));
</script>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <section style="padding: 0px 30px; text-align: left;">
<h1>Willkommen im Webshop</h1> <h1>Willkommen im Webshop</h1>
</section>
<main>
<section class="card-grid" id="latest-products">
<!-- Dynamische Produkte (5 aktuelle Produkte) -->
</section> </section>
</main>
<script> <main>
fetch('/api/products') <section class="card-grid" id="products">
.then(res => res.json()) <!-- Dynamische Produkte -->
.then(products => { </section>
const container = document.getElementById('latest-products'); </main>
container.innerHTML = ''; // sicherheitshalber leeren
products.forEach(product => { <script>
const card = document.createElement('div'); fetch('/api/products')
card.classList.add('card'); .then(res => res.json())
card.innerHTML = ` .then(products => {
<img src="${product.image_url}" alt="${product.name}"> const container = document.getElementById('products');
<h3>${product.name}</h3> container.innerHTML = ''; // sicherheitshalber leeren
<p>Preis: ${product.price}€</p>
<p>${product.description}</p> products.forEach(product => {
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button> const card = document.createElement('div');
`; card.classList.add('card');
container.appendChild(card); card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price}€</p>
<p>${product.description}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
}); });
}) </script>
.catch(err => {
console.error('Fehler beim Laden der neuesten Produkte:', err);
});
</script>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

25
public/shop/shop_lkw.html
View File

@ -6,18 +6,11 @@
<title>Shop - LKW's</title> <title>Shop - LKW's</title>
<link rel="stylesheet" href="/Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<script>
fetch(href="/header")
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
})
.catch(error => console.error('Fehler beim Laden des Headers:', error));
</script>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <section style="padding: 0px 30px; text-align: left;">
@ -48,19 +41,19 @@
}); });
}) })
.catch(err => { .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 =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
}); });
</script> </script>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

26
public/shop/shop_motorrad.html
View File

@ -6,18 +6,11 @@
<title>Shop - Motorräder</title> <title>Shop - Motorräder</title>
<link rel="stylesheet" href="/Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<script>
fetch(href="/header")
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
})
.catch(error => console.error('Fehler beim Laden des Headers:', error));
</script>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <section style="padding: 0px 30px; text-align: left;">
@ -49,20 +42,19 @@
}); });
}) })
.catch(err => { .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 =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
}); });
</script> </script>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

86
public/shop/shop_oldtimer.html
View File

@ -6,62 +6,54 @@
<title>Shop - Oldtimer</title> <title>Shop - Oldtimer</title>
<link rel="stylesheet" href="/Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<script>
fetch(href="/header")
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
})
.catch(error => console.error('Fehler beim Laden des Headers:', error));
</script>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Oldtimer Produkte</h1> <h1>Unsere Oldtimer Produkte</h1>
</section> </section>
<section class="card-grid" id="products_oldtimer"> <section class="card-grid" id="products_oldtimer">
<!-- Dynamische Produkte (filtern nach Motorrad) --> <!-- Dynamische Produkte (filtern nach Motorrad) -->
</section> </section>
<script> <script>
fetch('/api/products/oldtimer') fetch('/api/products/oldtimer')
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('products_oldtimer'); const container = document.getElementById('products_oldtimer');
container.innerHTML = ''; // sicherheitshalber leeren container.innerHTML = ''; // sicherheitshalber leeren
products.forEach(product => { products.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
card.innerHTML = ` card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}"> <img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3> <h3>${product.name}</h3>
<p>Preis: ${product.price}€</p> <p>Preis: ${product.price}€</p>
<p>${product.description}</p> <p>${product.description}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button> <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`; `;
container.appendChild(card); container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_oldtimer');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
}); });
}) </script>
.catch(err => {
console.error('Fehler beim Laden der neuesten Produkte:', err);
});
</script>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

71
public/shop/shop_sportwagen.html
View File

@ -6,62 +6,59 @@
<title>Shop - Sportwagen</title> <title>Shop - Sportwagen</title>
<link rel="stylesheet" href="/Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <div class="wrapper">
<div id="header-placeholder"></div> <!-- Header -->
<script> <div id="header-placeholder"></div>
fetch(href="/header")
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
})
.catch(error => console.error('Fehler beim Laden des Headers:', error));
</script>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Motorrad Produkte</h1> <h1>Unsere Sportwagen Produkte</h1>
</section> </section>
<section class="card-grid" id="products_sportwagen">
<!-- Dynamische Produkte (filtern nach Motorrad) --> <section class="card-grid" id="products_sportwagen">
</section> <!-- Dynamische Produkte oder Fehlermeldung -->
</section>
<!-- Footer -->
<div id="footer"></div>
</div>
<script> <script>
fetch('/api/products/sportwagen') fetch('/api/products/sportwagen')
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('products_sportwagen'); const container = document.getElementById('products_sportwagen');
container.innerHTML = ''; // sicherheitshalber leeren container.innerHTML = '';
products.forEach(product => { products.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
card.innerHTML = ` card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}"> <img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3> <h3>${product.name}</h3>
<p>Preis: ${product.price}€</p> <p>Preis: ${product.price}€</p>
<p>${product.description}</p> <p>${product.description}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button> <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`; `;
container.appendChild(card); container.appendChild(card);
}); });
}) })
.catch(err => { .catch(err => {
console.error('Fehler beim Laden der neuesten Produkte:', err); console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_sportwagen');
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>
`;
}); });
</script> </script>
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body> </body>
</html> </html>

160
public/startseite/startseite.html
View File

@ -6,95 +6,95 @@
<title>Modellauto - Startseite</title> <title>Modellauto - Startseite</title>
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<script>
fetch(href="/header")
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
})
.catch(error => console.error('Fehler beim Laden des Headers:', error));
</script>
<!-- Infobereich --> <main>
<section style="padding: 40px 20px; text-align: center; background: #fff;"> <!-- Infobereich -->
<h2>Willkommen beim Modellauto-Shop</h2> <section style="padding: 40px 20px; text-align: center; background: #fff;">
<p>Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder. <h2>Willkommen beim Modellauto-Shop</h2>
Perfekt für Sammler, Bastler und Fans. <p>Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder.
</p> Perfekt für Sammler, Bastler und Fans.
</section> </p>
</section>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<h1>Unsere Neusten Produkte: </h1> <h1>Unsere Neusten Produkte: </h1>
<section class="card-grid" id="latest-products"> <section class="card-grid" id="latest-products">
<!-- Dynamische Produkte (5 aktuelle Produkte) --> <!-- Dynamische Produkte (5 aktuelle Produkte) -->
</section> </section>
<script> <!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
fetch('/api/products/new') <script>
.then(res => res.json()) // API-Aufruf
.then(products => { fetch('/api/products/new')
const container = document.getElementById('latest-products'); // Antwort als JSON parsen
container.innerHTML = ''; // sicherheitshalber leeren .then(res => res.json())
.then(products => {
const container = document.getElementById('latest-products');
container.innerHTML = ''; // sicherheitshalber leeren
products.forEach(product => { // Für jedes Produkt eine Karte erzeugen
const card = document.createElement('div'); products.forEach(product => {
card.classList.add('card'); const card = document.createElement('div');
card.innerHTML = ` card.classList.add('card');
<img src="${product.image_url}" alt="${product.name}"> // HTML-Inhalt der Karte mit Produktdaten füllen
<h3>${product.name}</h3> card.innerHTML = `
<p>Preis: ${product.price}€</p> <img src="${product.image_url}" alt="${product.name}">
<p>${product.description}</p> <h3>${product.name}</h3>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button> <p>Preis: ${product.price}€</p>
`; <p>${product.description}</p>
container.appendChild(card); <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
}); `;
}) // Karte in Container einfügen
.catch(err => { container.appendChild(card);
console.error('Fehler beim Laden der neuesten Produkte:', err); });
}); })
</script> .catch(err => {
console.error('Fehler beim Laden der neuesten Produkte:', err);
const container = document.getElementById('latest-products');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
<!-- Info-Sektion --> <!-- Info-Sektion -->
<section class="info-cards-section"> <section class="info-cards-section">
<div class="info-card"> <div class="info-card">
<i class='bx bx-package'></i> <i class='bx bx-package'></i>
<h3>Versandkostenfrei ab 50 €</h3> <h3>Versandkostenfrei ab 50€</h3>
<p>Schneller & sicherer Versand mit Sendungsverfolgung.</p> <p>Schneller & sicherer Versand mit Sendungsverfolgung.</p>
</div> </div>
<div class="info-card"> <div class="info-card">
<i class='bx bx-credit-card'></i> <i class='bx bx-credit-card'></i>
<h3>Flexible Zahlungsmethoden</h3> <h3>Flexible Zahlungsmethoden</h3>
<p>PayPal, Kreditkarte, Klarna, Vorkasse – Sie haben die Wahl.</p> <p>PayPal, Kreditkarte, Klarna, Vorkasse – Sie haben die Wahl.</p>
</div> </div>
<div class="info-card"> <div class="info-card">
<i class='bx bx-undo'></i> <i class='bx bx-undo'></i>
<h3>14 Tage Rückgaberecht</h3> <h3>14 Tage Rückgaberecht</h3>
<p>Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.</p> <p>Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.</p>
</div> </div>
<div class="info-card"> <div class="info-card">
<i class='bx bx-star'></i> <i class='bx bx-star'></i>
<h3>Top-Bewertungen</h3> <h3>Top-Bewertungen</h3>
<p>Unsere Kunden lieben uns – überzeugen Sie sich selbst!</p> <p>Unsere Kunden lieben uns – überzeugen Sie sich selbst!</p>
</div> </div>
</section> </section>
</main>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
<script> </div>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</div>
</body> </body>
</html> </html>

41
scripts/einfügenHeaderFooter.js Normal file
View File

@ -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 = `
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
Fehler beim Laden des Headers.
</div>`;
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 = `
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
Fehler beim Laden der Fußzeile.
</div>`;
console.error(error);
});
}
});

21
scripts/routes/other/route-index.js
View File

@ -20,15 +20,20 @@ router.get('/registrieren', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/registrieren/registrieren.html')); res.sendFile(path.join(__dirname, '../../../public/registrieren/registrieren.html'));
}) })
// Route - Kopfzeile // Route - HeaderFooter
router.get('/header', (req, res) => { router.get('/header_footer', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/header_footer/header.html')); res.sendFile(path.join(__dirname, '../../../scripts/einfügenHeaderFooter.js'));
}) })
// Route - Fußzeile // Route - Kopfzeile
router.get('/footer', (req, res) => { router.get('/header', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/header_footer/footer.html')); 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) // Route - Shop (Alle Produkte)
router.get('/shop', (req, res) => { router.get('/shop', (req, res) => {
@ -55,6 +60,4 @@ router.get('/shop', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html')); res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html'));
}) })
module.exports = router; module.exports = router;

4
server.js
View File

@ -130,6 +130,10 @@ app.get('/api/products/sportwagen', async (req, res) => {
const getIndexRoute = require('./scripts/routes/other/route-index'); const getIndexRoute = require('./scripts/routes/other/route-index');
app.use('/', getIndexRoute); app.use('/', getIndexRoute);
app.use((req, res) => {
res.status(404).sendFile(path.join(__dirname, 'public', '404.html'));
});
// Sever starten // Sever starten
app.listen(process.env.APP_PORT, () => { app.listen(process.env.APP_PORT, () => {
console.log("\x1b[32m"); console.log("\x1b[32m");

2
static/Styles/login/login.css
View File

@ -31,7 +31,7 @@
} }
.login-form .icon { .login-form .icon {
display: none; /* Falls du später Icons einbinden willst, kannst du das anpassen */ display: none;
} }
.login-btn { .login-btn {

47
static/Styles/styles-main.css
View File

@ -6,6 +6,10 @@
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
} }
html, body {
height: 100%;
}
body { body {
background: #f8f9fa; background: #f8f9fa;
color: #333; color: #333;
@ -14,6 +18,12 @@ body {
flex-direction: column; flex-direction: column;
} }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ========== Header ========== */ /* ========== Header ========== */
header { header {
display: flex; display: flex;
@ -297,7 +307,7 @@ main {
background: #ff6600; background: #ff6600;
color: white; color: white;
border: none; border: none;
border-radius: 5px; border-radius: 10px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
transition: background 0.3s ease; transition: background 0.3s ease;
@ -329,7 +339,7 @@ h1 {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 30px 25px; padding: 30px 25px;
width: 320px; width: 320px;
min-height: 300px; min-height: 50px;
text-align: center; text-align: center;
transition: transform 0.3s ease; transition: transform 0.3s ease;
display: flex; display: flex;
@ -358,4 +368,37 @@ h1 {
color: #555; 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); }
}