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

develop #41

Merged
vex merged 22 commits from develop into main 2025-04-29 19:48:45 +00:00
Conversation 0 Commits 22 Files Changed 26 +274 -89
17 changed files with 274 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c5b4aca426 - Show all commits

13
public/404.html
View File

@ -1,21 +1,32 @@
<!--
Eine Seite für die Seiten die nicht vorhanden sind.
Fehler 404 - Seite nicht gefunden
Zeigt eine Meldung und hat einen Link der zurück zur Startseite führt
-->
<!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>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt: Fehlermeldung -->
<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>
<!-- Button zurück zur Startseite -->
<a href="/" class="btn" style="width: auto; display: inline-block; margin-top: 20px;">Zur Startseite</a>
</main>

19
public/bestellformular/bestellformular.html
View File

@ -6,12 +6,13 @@
<title>Bestellformular</title>
<link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css">
<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 wird hier dynamisch geladen -->
<div id="header-placeholder"></div>
<div id="header"></div>
<main>
<div class="form-container">
@ -39,27 +40,29 @@
<label for="ArtikelNr">Artikel Nr.:</label>
<div class="Artikel">
<button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
<input type="text" class="ArtikelNrText" id="ArtikelNr" name="ArtikelNr" required placeholder="Artikel Nr.">
<input type="text" class="StueckzahlText" id="Stueckzahl" name="Stueckzahl" required placeholder="Anzahl">
<input type="text" class="ArtikelNrText" id="ArtikelNr" name="ArtikelNr" required
placeholder="Artikel Nr.">
<input type="text" class="StueckzahlText" id="Stueckzahl" name="Stueckzahl" required
placeholder="Anzahl">
<div class="verfuegbarkeit"></div>
</div>
<style>
.Artikel{
.Artikel {
display: flex;
align-content: center;
}
.ArtikelNrText{
.ArtikelNrText {
max-width: 50%;
}
.StueckzahlText{
.StueckzahlText {
max-width: 15%;
margin-left: 2.5%;
}
.loeschen-button{
.loeschen-button {
background-color: #ff6600;
color: white;
border: none;
@ -70,7 +73,7 @@
margin-right: 5px;
}
.verfuegbarkeit{
.verfuegbarkeit {
display: flex;
align-content: center;
max-width: 20%;

8
public/header_footer/footer.html
View File

@ -1,6 +1,12 @@
<!-- Fußzeiele -->
<!--
Fußzeile des Webshops
Zeigt einen Copyright-Hinweis, die Links zum Impressum und Datenschutz sind verlinkt (keine Funktion)
-->
<footer class="footer">
<!-- Copyright-Hinweis -->
<p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
<!-- Links zu Impressum und Datenschutz (keine Funktion) -->
<p>
<a href="/impressum">Impressum</a> |
<a href="/datenschutz">Datenschutz</a>

78
public/header_footer/header.html
View File

@ -1,34 +1,60 @@
<!-- header.html -->
<!--
Header-Bereich Einbindung
Zeigt Logo, Link zur Startseite, Warenkorb (beispielhaft, keine Funktion) und Menüleiste an
-->
<header>
<div class="logo-container">
<img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img">
<h1>Modellauto - Shop</h1>
</div>
<div class="header-right">
<a href="/login" class="login-btn">Login</a>
<div class="header-right">
<!-- Logo und Shop-Titel -->
<a href="/" class="logo-link">
<div class="logo-container">
<img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img">
<h1>Modellauto - Shop</h1>
</div>
</a>
<a href="/warenkorb" class="cart">
<i class='bx bx-cart'></i>
<span class="cart-count">0</span>
</a>
<!-- Auf der rechten Seite des Headers befindet sich der Login-Button und der Warenkorb -->
<div class="header-right">
<!-- Login-Button -->
<a href="/login" class="login-btn">
<i class='bx bx-user'></i> Login
</a>
<!-- Warenkorb-Button mit Icon und Anzeige der Artikelanzahl (keine Funktion) -->
<a href="/warenkorb" class="cart">
<i class='bx bx-cart'></i>
<span class="cart-count">0</span>
</a>
</div>
</div>
</header>
<!-- Navigationsmenü -->
<nav class="menu">
<ul class="menu-list">
<li class="menu-item"><a href="/">Startseite</a></li>
<li class="menu-item">
<a href="/shop">Shop</a>
<ul class="submenu">
<li><a href="/shop/motorrad">Motorräder</a></li>
<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="/ueberuns">Über uns</a></li>
<li class="menu-item"><a href="/kontakt">Kontakt</a></li>
</ul>
<ul class="menu-list">
<!-- Startseite Link -->
<li class="menu-item">
<a href="/"><i class='bx bx-home'></i> Startseite</a>
</li>
<!-- Shop Link mit Dropdown-Menü für die verschiedene Unterkategorien -->
<li class="menu-item">
<a href="/shop"><i class='bx bx-store'></i> Shop</a>
<ul class="submenu">
<li><a href="/shop/motorrad"></i> Motorräder</a></li>
<li><a href="/shop/oldtimer"></i> Oldtimer</a></li>
<li><a href="/shop/sportwagen"></i> Sportwagen</a></li>
<li><a href="/shop/lkw"></i> LKWs</a></li>
</ul>
</li>
<!-- Link zu Über uns-->
<li class="menu-item">
<a href="/ueberuns"><i class='bx bx-group'></i> Über uns</a>
</li>
<!-- Link zur Kontakt Seite-->
<li class="menu-item">
<a href="/kontakt"><i class='bx bx-envelope'></i> Kontakt</a>
</li>
<!-- Link zum Bestellformular-->
<li class="menu-item">
<a href="/bestellformular"><i class='bx bx-notepad'></i> Bestellformular</a>
</li>
</ul>
</nav>

27
public/login/login.html
View File

@ -1,31 +1,51 @@
<!--
Login-Seite für den Webshop.
Die Benutzer können sich mit ihrem Benutzernamen und Passwort anmelden oder sich registreren.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<!-- Login-CSS-Datei -->
<link rel="stylesheet" href="./Styles/login/login.css">
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
<title>Login</title>
</head>
<body>
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<main class="main-content">
<div class="login-container">
<h2 class="login-title">Login</h2>
<h2 class="title">Login</h2>
<!-- Login-Formular -->
<form class="login-form">
<!-- Eingabefeld für Benutzername -->
<div class="input-group">
<input id="email" type="text" placeholder="E-Mail" required/>
<i class="icon fas fa-user"></i>
</div>
<!-- Eingabefeld für Passwort -->
<div class="input-group">
<input id="password" type="password" placeholder="Passwort" required/>
<i class="icon fas fa-lock"></i>
</div>
<button id="submit" type="submit" class="login-btn">Login</button>
<!-- Login-Button -->
<button type="submit" class="login-btn">Login</button>
<!-- Link zur Registrierungsseite -->
<p class="register-text">
Noch keinen Account? <a href="/registrieren">Registrieren</a>
</p>
@ -63,6 +83,7 @@
}
})
</script>
<!-- Fußzeile -->
<div id="footer"></div>

15
public/registrieren/registrieren.html
View File

@ -1,11 +1,21 @@
<!--
Diese Seite beinhaltet ein Registrierungsformular für neue Benutzer.
Der Benutzer kann Vorname, Nachname, E-Mail-Adresse und ein Passwort eingeben.
Header und Footer werden dynamisch geladen.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Registrieren-CSS-Datei -->
<link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
<title>Registrieren</title>
</head>
@ -13,10 +23,11 @@
<div class="page-container">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Registrierungsformular -->
<main class="content-wrapper">
<!-- Formular für Registrierung -->
<div class="register-wrapper">
<form action="register.php" method="POST">
<h2 class="title">Registrieren</h2>
@ -38,6 +49,7 @@
<i class='bx bxs-lock-alt'></i>
</div>
<!-- Eingabe: Passwort bestätigen -->
<div class="input-box">
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
required>
@ -46,6 +58,7 @@
<button type="submit" class="btn" id="register">Registrieren</button>
<!-- Link zum Login für bestehende Nutzer -->
<div class="register-link">
<br>
<p>Bereits ein Konto? <a href="/login">Login</a></p>

22
public/shop/shop.html
View File

@ -1,16 +1,25 @@
<!--
Diese Seite zeigt alle Produkte des Webshops an.
Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;">
@ -18,8 +27,9 @@
</section>
<main>
<!-- "Container" für die dynamisch geladenen Produktkarten -->
<section class="card-grid" id="products">
<!-- Dynamische Produkte -->
<!-- Produkte werden hier eingefügt -->
</section>
</main>
@ -27,15 +37,20 @@
<div id="footer"></div>
<script>
// Daten von der API abrufen
fetch('/api/products')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products');
container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine eigene Karte erstellen und einfügen
products.forEach(product => {
// Neues div-Element für die Produktkarte
const card = document.createElement('div');
// CSS-Styling hinzufügen
card.classList.add('card');
// HTML-Struktur der Produktkarte
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
@ -44,12 +59,15 @@
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
// Karte in den Container einfügen
container.appendChild(card);
});
})
// Fehlermeldung
.catch(err => {
console.error('Fehler beim Laden der Shop_Produkte:', err);
// Fehlermeldung auf der Seite anzeigen
const container = document.getElementById('products');
container.innerHTML =
`<div class="error-message">

18
public/shop/shop_lkw.html
View File

@ -1,17 +1,26 @@
<!--
Diese Seite zeigt alle LKW-Produkte des Webshops an.
Die Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - LKW's</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt -->
<main>
@ -29,12 +38,14 @@
</div>
<script>
// API-Abfrage, um Lkw-Produkte zu laden
fetch('/api/products/lkw')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_lkw');
container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erstellen
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
@ -49,9 +60,11 @@
container.appendChild(card);
});
})
// Fehlerbehandlung
.catch(err => {
console.error('Fehler beim Laden der LKW_Produkte:', err);
// Anzeige einer Fehlermeldung auf der Webseite
const container = document.getElementById('products_lkw');
container.innerHTML =
`<div class="error-message">
@ -62,8 +75,5 @@
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>

38
public/shop/shop_motorrad.html
View File

@ -1,17 +1,26 @@
<!--
Diese Seite zeigt alle Motorrad-Produkte des Webshops an.
Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Motorräder</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Motorräder</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt -->
<main class="main-content">
@ -20,10 +29,13 @@
</section>
<section class="card-grid" id="products_motorrad">
<!-- Dynamische Produkte oder Fehlermeldung -->
<!-- Produkte -->
</section>
</main>
<!-- Fußzeile -->
<div id="footer"></div>
</div>
<script>
fetch('/api/products/motorrad')
@ -32,6 +44,7 @@
const container = document.getElementById('products_motorrad');
container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erstellen
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
@ -46,8 +59,11 @@
container.appendChild(card);
});
})
// Fehlermeldung
.catch(err => {
console.error('Fehler beim Laden der Motorrad_Produkte:', err);
// Fehlermeldung auf der Seite anzeigen
const container = document.getElementById('products_motorrad');
container.innerHTML = `
<div class="error-message">
@ -56,9 +72,5 @@
</div>`;
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>
</html>

32
public/shop/shop_oldtimer.html
View File

@ -1,17 +1,26 @@
<!--
Diese Seite zeigt alle Oldtimer-Produkte des Webshops an.
Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Oldtimer</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt -->
<main class="main-content">
@ -20,7 +29,7 @@
</section>
<section class="card-grid" id="products_oldtimer">
<!-- Dynamische Produkte oder Fehlermeldung -->
<!-- Produkte -->
</section>
</main>
@ -28,16 +37,20 @@
<div id="footer"></div>
</div>
<script>
<script>
fetch('/api/products/oldtimer')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_oldtimer');
container.innerHTML = ''; // sicherheitshalber leeren
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_oldtimer');
container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erstellen
products.forEach(product => {
// Neues div für eine Produktkarte
const card = document.createElement('div');
// CSS-Styling hinzufügen
card.classList.add('card');
// Die Karte mit Produktdaten füllen
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
@ -49,8 +62,11 @@
container.appendChild(card);
});
})
// Fehlerbehandlung
.catch(err => {
console.error('Fehler beim Laden der Oldtimer_Produkte:', err);
// Anzeige einer Fehlermeldung auf der Webseite
const container = document.getElementById('products_oldtimer');
container.innerHTML = `
<div class="error-message">
@ -60,4 +76,4 @@
});
</script>
</body>
</html>
</html>

35
public/shop/shop_sportwagen.html
View File

@ -1,17 +1,26 @@
<!--
Diese Seite zeigt alle Sportwagen-Produkte des Webshops an.
Die Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Sportwagen</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Sportwagen</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Header -->
<div id="header"></div>
<!-- Hauptinhalt -->
<main>
@ -20,21 +29,23 @@
</section>
<section class="card-grid" id="products_sportwagen">
<!-- Dynamische Produkte oder Fehlermeldung -->
<!-- Einbindung Dynamische Produkte -->
</section>
</main>
<!-- Footer -->
<div id="footer"></div>
<!-- Footer -->
<div id="footer"></div>
</div>
<script>
// API-Anfrage, um Sportwagen-Produkte zu laden
fetch('/api/products/sportwagen')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_sportwagen');
container.innerHTML = '';
// Für jedes Produkt eine Karte erstellen
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
@ -49,9 +60,11 @@
container.appendChild(card);
});
})
// Fehlermeldung
.catch(err => {
console.error('Fehler beim Laden der Sportwagen_Produkte:', err);
// Fehlermeldung auf der Seite anzeigen
const container = document.getElementById('products_sportwagen');
container.innerHTML =
`<div class="error-message">

17
public/startseite/startseite.html
View File

@ -1,17 +1,25 @@
<!--
Startseite des Modellauto-Webshops
Zeigt ein Infobereich, die neuesten Produkte (per API geladen) und die Vorteile bei uns zu bestellen
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modellauto - Startseite</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<main>
<!-- Infobereich -->
@ -25,7 +33,7 @@
<!-- Hauptinhalt -->
<h1>Unsere Neusten Produkte: </h1>
<section class="card-grid" id="latest-products">
<!-- Dynamische Produkte (5 aktuelle Produkte) -->
<!-- Dynamische Produkte (5 neuesten Produkte) -->
</section>
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
@ -38,7 +46,7 @@
const container = document.getElementById('latest-products');
container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erzeugen
// Für jedes Produkt eine eigene Karte erzeugen
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
@ -54,6 +62,7 @@
container.appendChild(card);
});
})
// Fehlerbehandlung bei API-Aufruf
.catch(err => {
console.error('Fehler beim Laden der neuesten Produkte:', err);
@ -67,7 +76,7 @@
</script>
<!-- Info-Sektion -->
<!-- Infobereich mit den Vorteilen -->
<section class="info-cards-section">
<div class="info-card">
<i class='bx bx-package'></i>

18
scripts/einfügenHeaderFooter.js
View File

@ -1,16 +1,28 @@
/**
* Dieser Code lädt beim Start der Seite (DOMContentLoaded) Header und Footer dynamisch vom Server
* (über /header und /footer) und fügt sie in die vorgesehenen Elemente ein.
* Tritt ein Fehler auf (z.B. Datei nicht vorhanden oder Serverproblem),
* wird eine Fehlermeldung direkt auf der Webseite angezeigt.
*/
// Warten bis das gesamte DOM geladen ist
document.addEventListener("DOMContentLoaded", () => {
// Header laden
const headerTarget = document.getElementById("header-placeholder");
const headerTarget = document.getElementById("header");
if (headerTarget) {
// Header-Inhalt vom Server anfordern
fetch("/header")
.then(response => {
// Prüfen, ob die Antwort erfolgreich war
if (!response.ok) throw new Error("Header nicht gefunden");
return response.text();
})
.then(data => {
// Header-Inhalt in die Seite einfügen
headerTarget.innerHTML = data;
})
.catch(error => {
// Fehlerbehandlung: Fehlermeldung im Header-Bereich anzeigen
headerTarget.innerHTML = `
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
Fehler beim Laden des Headers.
@ -22,15 +34,19 @@ document.addEventListener("DOMContentLoaded", () => {
// Footer laden
const footerTarget = document.getElementById("footer");
if (footerTarget) {
// Footer-Inhalt vom Server anfordern
fetch("/footer")
.then(response => {
// Prüfen, ob die Antwort erfolgreich war
if (!response.ok) throw new Error("Footer nicht gefunden");
return response.text();
})
.then(data => {
// Footer-Inhalt in die Seite einfügen
footerTarget.innerHTML = data;
})
.catch(error => {
// Fehlerbehandlung: Die Fehlermeldung im Footer-Bereich anzeigen
footerTarget.innerHTML = `
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
Fehler beim Laden der Fußzeile.

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

@ -60,13 +60,12 @@ router.get('/shop', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html'));
})
router.get('/bestellformular', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
})
// Route - Warenkorb
router.get('/Warenkorb', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/warenkorb/warenkorb.html'));
})
// Route - Bestellformualar
router.get('/bestellformular', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
})

12
server.js
View File

@ -52,6 +52,7 @@ app.get('/api/products', (req, res) => {
});
});
// API-Route für die 5 neuen Produkte
app.get('/api/products/new', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product ORDER BY created_at DESC LIMIT 4';
@ -67,6 +68,7 @@ app.get('/api/products/new', async (req, res) => {
});
});
// API-Route für die Motorrad-Produkte
app.get('/api/products/motorrad', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 4';
@ -82,6 +84,7 @@ app.get('/api/products/motorrad', async (req, res) => {
});
});
// API-Route für die Oldtimer-Produkte
app.get('/api/products/oldtimer', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 2';
@ -97,6 +100,7 @@ app.get('/api/products/oldtimer', async (req, res) => {
});
});
// API-Route für die Lkw-Produkte
app.get('/api/products/lkw', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 3';
@ -112,6 +116,7 @@ app.get('/api/products/lkw', async (req, res) => {
});
});
// API-Route für die Sportwagen-Produkte
app.get('/api/products/sportwagen', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 1';
@ -145,7 +150,7 @@ app.post('/api/user/registration', (req, res) => {
app.post('/api/user/login', (req, res) => {
const {email, password} = req.body
const sql = 'SELECT * FROM user WHERE email = ?'
const sql = 'SELECT * FROM webshop.user WHERE email = ?'
db.query(sql, [email], (err, results) => {
if (err) {
@ -269,7 +274,7 @@ app.get('/api/pruefe-artikel', (req, res) => {
return res.status(400).json({ error: 'Keine Artikelnummer angegeben.' });
}
const query = 'SELECT id FROM product WHERE id = ?';
const query = 'SELECT id FROM webshop.product WHERE id = ?';
db.query(query, [artikelnummer], (err, results) => {
if (err) {
@ -285,7 +290,10 @@ app.get('/api/pruefe-artikel', (req, res) => {
const getIndexRoute = require('./scripts/routes/other/route-index');
app.use('/', getIndexRoute);
// Hier werden alle anderen Seiten abgefangen, die keine definierten Routen haben (404 Fehler)
// und gibt die 404.html aus.
app.use((req, res) => {
// Setzt den Statuscode auf 404 und sendet die '404.html'-Datei
res.status(404).sendFile(path.join(__dirname, 'public', '404.html'));
});

1
static/Styles/bestellformular/bestellformular.css
View File

@ -1,7 +1,6 @@
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
margin: 0;
display: flex;
flex-direction: column;

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

@ -55,6 +55,11 @@ header {
object-fit: contain;
}
.logo-link {
text-decoration: none;
color: inherit;
}
header h1 {
font-size: 30px;
color: #333;