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

Compare commits

base: Berufsschule:c4985aae6d44b3da9f9f24015a5f5f57a97af5f4
Branches Tags
Berufsschule:develop
Berufsschule:main
Berufsschule:feature/scripts_auslagern
Berufsschule:feature/css
Berufsschule:feature/Warenkorb
Berufsschule:Kommentieren
Berufsschule:Registrieren
Berufsschule:Kontakt
Berufsschule:Warenkorb
Berufsschule:v2.1
Berufsschule:v2.0
Berufsschule:v1.0
..
compare: Berufsschule:3d92eca334ff4154470d8eb66c4c70ef74089d19
Branches Tags
Berufsschule:main
Berufsschule:develop
Berufsschule:feature/scripts_auslagern
Berufsschule:feature/css
Berufsschule:feature/Warenkorb
Berufsschule:Kommentieren
Berufsschule:Registrieren
Berufsschule:Kontakt
Berufsschule:Warenkorb
Berufsschule:v2.1
Berufsschule:v2.0
Berufsschule:v1.0

No commits in common. "c4985aae6d44b3da9f9f24015a5f5f57a97af5f4" and "3d92eca334ff4154470d8eb66c4c70ef74089d19" have entirely different histories.
c4985aae6d ... 3d92eca334

14 changed files with 377 additions and 397 deletions
Show Stats Expand all files Collapse all files

22
public/404.html
View File

@ -1,27 +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>
<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">
<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>
<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>
</div>
</body>
</html>

10
public/header_footer/footer.html
View File

@ -1,8 +1,8 @@
<!-- Fußzeiele -->
<footer class="footer">
<p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
<p>
<a href="/impressum">Impressum</a> |
<a href="/datenschutz">Datenschutz</a>
</p>
<p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
<p>
<a href="/impressum">Impressum</a> |
<a href="/datenschutz">Datenschutz</a>
</p>
</footer>

1
public/header_footer/header.html
View File

@ -27,5 +27,6 @@
</li>
<li class="menu-item"><a href="/ueberuns">Über uns</a></li>
<li class="menu-item"><a href="/kontakt">Kontakt</a></li>
<li class="menu-item"><a href="/bestellformular">Bestellformular</a></li>
</ul>
</nav>

46
public/login/login.html
View File

@ -10,31 +10,31 @@
<title>Login</title>
</head>
<body>
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Header -->
<div id="header-placeholder"></div>
<main class="main-content">
<div class="login-container">
<h2 class="title">Login</h2>
<form class="login-form">
<div class="input-group">
<input type="text" placeholder="Username" required/>
<i class="icon fas fa-user"></i>
</div>
<div class="input-group">
<input type="password" placeholder="Passwort" required/>
<i class="icon fas fa-lock"></i>
</div>
<button type="submit" class="login-btn">Login</button>
<p class="register-text">
Noch keinen Account? <a href="/registrieren">Registrieren</a>
</p>
</form>
</div>
</main>
<main class="main-content">
<div class="login-container">
<h2 class="login-title">Login</h2>
<form class="login-form">
<div class="input-group">
<input type="text" placeholder="Username" required />
<i class="icon fas fa-user"></i>
</div>
<div class="input-group">
<input type="password" placeholder="Passwort" required />
<i class="icon fas fa-lock"></i>
</div>
<button type="submit" class="login-btn">Login</button>
<p class="register-text">
Noch keinen Account? <a href="/registrieren">Registrieren</a>
</p>
</form>
</div>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>

79
public/registrieren/registrieren.html
View File

@ -1,62 +1,61 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Styles/registrieren/registrieren.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>
<title>Registrieren</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Styles/registrieren/registrieren.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>
<title>Registrieren</title>
</head>
<body>
<div class="page-container">
<div class="page-container">
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Registrierungsformular -->
<main class="content-wrapper">
<div class="register-wrapper">
<form action="register.php" method="POST">
<h2 class="title">Registrieren</h2>
<div class="wrapper">
<form action="register.php" method="POST">
<h1>Registrieren</h1>
<div class="input-box">
<input type="text" name="vorname" placeholder="Vorname" required>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="text" name="nachname" placeholder="Nachname" required>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="email" name="email" placeholder="E-Mail" required>
<i class='bx bxs-envelope'></i>
</div>
<div class="input-box">
<input type="password" id="regPassword" name="password" placeholder="Passwort" required>
<i class='bx bxs-lock-alt'></i>
</div>
<div class="input-box">
<input type="text" name="vorname" placeholder="Vorname" required>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="text" name="nachname" placeholder="Nachname" required>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="email" name="email" placeholder="E-Mail" required>
<i class='bx bxs-envelope'></i>
</div>
<div class="input-box">
<input type="password" id="regPassword" name="password" placeholder="Passwort" required>
<i class='bx bxs-lock-alt'></i>
</div>
<div class="input-box">
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
required>
<i class='bx bxs-lock-alt'></i>
</div>
<div class="input-box">
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen" required>
<i class='bx bxs-lock-alt'></i>
</div>
<button type="submit" class="register-btn">Registrieren</button>
<button type="submit" class="btn">Registrieren</button>
<div class="register-link">
<br>
<p>Bereits ein Konto? <a href="/login">Login</a></p>
</div>
</form>
</div>
<div class="register-link">
<br>
<p>Bereits ein Konto? <a href="/login">Login</a></p>
</div>
</form>
</div>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
</div>
</div>
</body>
</html>

65
public/shop/shop.html
View File

@ -1,39 +1,36 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</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</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>
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;">
<!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;">
<h1>Willkommen im Webshop</h1>
</section>
</section>
<main>
<main>
<section class="card-grid" id="products">
<!-- Dynamische Produkte -->
<!-- Dynamische Produkte -->
</section>
</main>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
<script>
fetch('/api/products')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products');
container.innerHTML = ''; // sicherheitshalber leeren
.then(res => res.json())
.then(products => {
const container = document.getElementById('products');
container.innerHTML = ''; // sicherheitshalber leeren
products.forEach(product => {
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
@ -44,18 +41,22 @@
<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 Shop_Produkte:', err);
});
})
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products');
container.innerHTML =
`<div class="error-message">
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>
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>

85
public/shop/shop_lkw.html
View File

@ -1,64 +1,59 @@
<!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>
<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 - LKW's</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>
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt -->
<main>
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere LKW Produkte</h1>
</section>
<section class="card-grid" id="products_lkw">
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
</div>
<!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere LKW Produkte</h1>
</section>
<section class="card-grid" id="products_lkw">
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
<script>
fetch('/api/products/lkw')
.then(res => res.json())
.then(products => {
fetch('/api/products/lkw')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_lkw');
container.innerHTML = ''; // sicherheitshalber leeren
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('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>
`;
const card = document.createElement('div');
card.classList.add('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 LKW_Produkte:', err);
})
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_lkw');
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> `;
});
`<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>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>

86
public/shop/shop_motorrad.html
View File

@ -1,62 +1,60 @@
<!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>
<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>
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt -->
<main class="main-content">
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Motorrad Produkte</h1>
</section>
<!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Motorrad Produkte</h1>
</section>
<section class="card-grid" id="products_motorrad">
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
<section class="card-grid" id="products_motorrad">
<!-- Dynamische Produkte oder Fehlermeldung -->
</section>
</main>
<!-- Fußzeile -->
<div id="footer"></div>
</div>
<script>
fetch('/api/products/motorrad')
.then(res => res.json())
.then(products => {
fetch('/api/products/motorrad')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_motorrad');
container.innerHTML = ''; // sicherheitshalber leeren
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('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);
const card = document.createElement('div');
card.classList.add('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 Motorrad_Produkte:', err);
})
.catch(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>`;
});
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>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>

89
public/shop/shop_oldtimer.html
View File

@ -1,62 +1,59 @@
<!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>
<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 - Oldtimer</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>
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt -->
<main class="main-content">
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Oldtimer Produkte</h1>
</section>
<!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Oldtimer Produkte</h1>
</section>
<section class="card-grid" id="products_oldtimer">
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
<section class="card-grid" id="products_oldtimer">
<!-- Dynamische Produkte oder Fehlermeldung -->
</section>
</main>
<!-- Fußzeile -->
<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 = '';
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_oldtimer');
container.innerHTML = ''; // sicherheitshalber leeren
products.forEach(product => {
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('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>
`;
<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_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>`;
});
})
.catch(err => {
console.error('Fehler beim Laden der Oldtimer_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 -->
<div id="footer"></div>
</body>
</html>

84
public/shop/shop_sportwagen.html
View File

@ -1,64 +1,64 @@
<!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>
<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>
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt -->
<main>
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Sportwagen Produkte</h1>
</section>
<!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Sportwagen Produkte</h1>
</section>
<section class="card-grid" id="products_sportwagen">
<!-- Dynamische Produkte oder Fehlermeldung -->
</section>
</main>
<section class="card-grid" id="products_sportwagen">
<!-- Dynamische Produkte oder Fehlermeldung -->
</section>
<!-- Footer -->
<div id="footer"></div>
<!-- Footer -->
<div id="footer"></div>
</div>
<script>
fetch('/api/products/sportwagen')
.then(res => res.json())
.then(products => {
fetch('/api/products/sportwagen')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_sportwagen');
container.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('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);
const card = document.createElement('div');
card.classList.add('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 Sportwagen_Produkte:', err);
})
.catch(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> `;
});
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>
</body>
</html>

136
public/startseite/startseite.html
View File

@ -9,92 +9,92 @@
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<main>
<!-- Infobereich -->
<section style="padding: 40px 20px; text-align: center; background: #fff;">
<h2>Willkommen beim Modellauto-Shop</h2>
<p>Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder.
Perfekt für Sammler, Bastler und Fans.
</p>
</section>
<main>
<!-- Infobereich -->
<section style="padding: 40px 20px; text-align: center; background: #fff;">
<h2>Willkommen beim Modellauto-Shop</h2>
<p>Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder.
Perfekt für Sammler, Bastler und Fans.
</p>
</section>
<!-- Hauptinhalt -->
<h1>Unsere Neusten Produkte: </h1>
<section class="card-grid" id="latest-products">
<!-- Dynamische Produkte (5 aktuelle Produkte) -->
</section>
<!-- Hauptinhalt -->
<h1>Unsere Neusten Produkte: </h1>
<section class="card-grid" id="latest-products">
<!-- Dynamische Produkte (5 aktuelle Produkte) -->
</section>
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
<script>
// API-Aufruf
fetch('/api/products/new')
// Antwort als JSON parsen
.then(res => res.json())
.then(products => {
const container = document.getElementById('latest-products');
container.innerHTML = ''; // sicherheitshalber leeren
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
<script>
// API-Aufruf
fetch('/api/products/new')
// Antwort als JSON parsen
.then(res => res.json())
.then(products => {
const container = document.getElementById('latest-products');
container.innerHTML = ''; // sicherheitshalber leeren
// 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 = `
// 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 = `
<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>
`;
// Karte in Container einfügen
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der neuesten Produkte:', err);
// 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 =
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>
});
</script>
<!-- Info-Sektion -->
<section class="info-cards-section">
<div class="info-card">
<i class='bx bx-package'></i>
<h3>Versandkostenfrei ab 50€</h3>
<p>Schneller & sicherer Versand mit Sendungsverfolgung.</p>
</div>
<div class="info-card">
<i class='bx bx-credit-card'></i>
<h3>Flexible Zahlungsmethoden</h3>
<p>PayPal, Kreditkarte, Klarna, Vorkasse – Sie haben die Wahl.</p>
</div>
<div class="info-card">
<i class='bx bx-undo'></i>
<h3>14 Tage Rückgaberecht</h3>
<p>Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.</p>
</div>
<div class="info-card">
<i class='bx bx-star'></i>
<h3>Top-Bewertungen</h3>
<p>Unsere Kunden lieben uns – überzeugen Sie sich selbst!</p>
</div>
</section>
</main>
<!-- Info-Sektion -->
<section class="info-cards-section">
<div class="info-card">
<i class='bx bx-package'></i>
<h3>Versandkostenfrei ab 50€</h3>
<p>Schneller & sicherer Versand mit Sendungsverfolgung.</p>
</div>
<div class="info-card">
<i class='bx bx-credit-card'></i>
<h3>Flexible Zahlungsmethoden</h3>
<p>PayPal, Kreditkarte, Klarna, Vorkasse – Sie haben die Wahl.</p>
</div>
<div class="info-card">
<i class='bx bx-undo'></i>
<h3>14 Tage Rückgaberecht</h3>
<p>Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.</p>
</div>
<div class="info-card">
<i class='bx bx-star'></i>
<h3>Top-Bewertungen</h3>
<p>Unsere Kunden lieben uns – überzeugen Sie sich selbst!</p>
</div>
</section>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
<!-- Fußzeiele -->
<div id="footer"></div>
</div>
</div>
</body>
</html>

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

@ -9,6 +9,13 @@
margin: 50px auto; /* Zentriert das Formular */
}
.login-title {
font-size: 26px;
font-weight: 600;
margin-bottom: 25px;
color: #333;
}
.login-form .input-group {
position: relative;
margin-bottom: 20px;

32
static/Styles/registrieren/registrieren.css
View File

@ -4,7 +4,7 @@
min-height: 100vh;
}
.register-wrapper {
.wrapper {
max-width: 400px;
width: 100%;
padding: 30px;
@ -21,7 +21,6 @@
align-items: center;
padding: 40px 20px;
}
.registration-container {
max-width: 400px;
margin: 60px auto;
@ -50,6 +49,22 @@
box-sizing: border-box;
}
.registration-container button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
.registration-container button[type="submit"]:hover {
background-color: #0056b3;
}
.register-link {
text-align: center;
font-size: 14px;
@ -66,16 +81,3 @@
text-decoration: underline;
}
.register-btn {
width: 100%;
padding: 12px;
background: #ff6600;
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}

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

@ -41,13 +41,7 @@ header {
.logo-container {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
}
.logo-container h1 {
margin-left: 10px;
font-size: 1.8rem;
gap: 15px;
}
.logo-img {
@ -289,14 +283,6 @@ main {
margin-bottom: 20px;
}
.title {
font-size: 26px;
font-weight: 600;
margin-bottom: 25px;
color: #333;
text-align: center;
}
.input-box input {
width: 100%;
padding: 12px 40px 12px 15px;
@ -391,7 +377,7 @@ h1 {
color: #b00020;
border: 1px solid #ffcccc;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-align: center;
font-family: inherit;
animation: fadeIn 0.6s ease-in-out;
@ -409,14 +395,8 @@ h1 {
/* Optional: weiche Animation beim Einblenden */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}