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:3d92eca334ff4154470d8eb66c4c70ef74089d19
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:c4985aae6d44b3da9f9f24015a5f5f57a97af5f4
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

3 Commits
3d92eca334 ... c4985aae6d

Author SHA1 Message Date
gitfreeking
c4985aae6d Merge remote-tracking branch 'origin/Registrieren' into Registrieren 
# Conflicts:
#	public/header_footer/header.html
 2025-04-26 18:30:04 +02:00
gitfreeking
6fbf988c38 Finish, ohne Code kommentierug 2025-04-26 18:29:27 +02:00
gitfreeking
a3362019ac Finish, ohne Code kommentierug 2025-04-23 18:16:12 +02:00
14 changed files with 397 additions and 377 deletions
Show Stats Expand all files Collapse all files

22
public/404.html
View File

@ -1,27 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<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>Seite nicht gefunden</title> <title>Seite nicht gefunden</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> <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>
<main class="content" style="text-align: center; padding: 80px;"> <main class="content" style="text-align: center; padding: 80px;">
<h1>🚧 Seite nicht gefunden 🚧</h1> <h1>🚧 Seite nicht gefunden 🚧</h1>
<p>Diese Seite existiert nicht oder befindet sich noch in Arbeit.</p> <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> <a href="/" class="btn" style="width: auto; display: inline-block; margin-top: 20px;">Zur Startseite</a>
</main> </main>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
</div> </div>
</body> </body>
</html> </html>

10
public/header_footer/footer.html
View File

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

1
public/header_footer/header.html
View File

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

46
public/login/login.html
View File

@ -10,31 +10,31 @@
<title>Login</title> <title>Login</title>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<main class="main-content"> <main class="main-content">
<div class="login-container"> <div class="login-container">
<h2 class="login-title">Login</h2> <h2 class="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>
</body> </body>
</html> </html>

79
public/registrieren/registrieren.html
View File

@ -1,61 +1,62 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<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">
<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> <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>
<!-- Registrierungsformular --> <!-- Registrierungsformular -->
<main class="content-wrapper"> <main class="content-wrapper">
<div class="wrapper"> <div class="register-wrapper">
<form action="register.php" method="POST"> <form action="register.php" method="POST">
<h1>Registrieren</h1> <h2 class="title">Registrieren</h2>
<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"
<i class='bx bxs-lock-alt'></i> required>
</div> <i class='bx bxs-lock-alt'></i>
</div>
<button type="submit" class="btn">Registrieren</button> <button type="submit" class="register-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>
</div> </div>
</body> </body>
</html> </html>

65
public/shop/shop.html
View File

@ -1,36 +1,39 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<!-- 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> </section>
<main> <main>
<section class="card-grid" id="products"> <section class="card-grid" id="products">
<!-- Dynamische Produkte --> <!-- Dynamische Produkte -->
</section> </section>
</main> </main>
<script> <!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/api/products') fetch('/api/products')
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('products'); const container = document.getElementById('products');
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 = `
@ -41,22 +44,18 @@
<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 Produkte:', err); console.error('Fehler beim Laden der Shop_Produkte:', err);
const container = document.getElementById('products'); const container = document.getElementById('products');
container.innerHTML = container.innerHTML =
`<div class="error-message"> `<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3> <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> <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`; </div>`;
}); });
</script> </script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body> </body>
</html> </html>

85
public/shop/shop_lkw.html
View File

@ -1,59 +1,64 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<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 - 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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <div class="wrapper">
<div id="header-placeholder"></div> <!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <main>
<h1>Unsere LKW Produkte</h1> <section style="padding: 0px 30px; text-align: left;">
</section> <h1>Unsere LKW Produkte</h1>
<section class="card-grid" id="products_lkw"> </section>
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section> <section class="card-grid" id="products_lkw">
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
</div>
<script> <script>
fetch('/api/products/lkw') fetch('/api/products/lkw')
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('products_lkw'); const container = document.getElementById('products_lkw');
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);
}); });
}) })
.catch(err => { .catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der LKW_Produkte:', err);
const container = document.getElementById('products_oldtimer'); const container = document.getElementById('products_lkw');
container.innerHTML = container.innerHTML =
`<div class="error-message"> `<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3> <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> <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
</div>`; Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
}); </div> `;
});
</script> </script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body> </body>
</html> </html>

88
public/shop/shop_motorrad.html
View File

@ -1,60 +1,62 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<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 - 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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <div class="wrapper">
<div id="header-placeholder"></div> <!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <main class="main-content">
<h1>Unsere Motorrad Produkte</h1> <section style="padding: 0px 30px; text-align: left;">
</section> <h1>Unsere Motorrad Produkte</h1>
<section class="card-grid" id="products_motorrad"> </section>
<!-- 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> <script>
fetch('/api/products/motorrad') fetch('/api/products/motorrad')
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('products_motorrad'); const container = document.getElementById('products_motorrad');
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 => { .catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der Motorrad_Produkte:', err);
const container = document.getElementById('products_motorrad'); const container = document.getElementById('products_motorrad');
container.innerHTML = container.innerHTML = `
`<div class="error-message"> <div class="error-message">
<h3>Fehler beim Laden der Produkte</h3> <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> <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`; </div>`;
}); });
</script> </script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body> </body>
</html> </html>

91
public/shop/shop_oldtimer.html
View File

@ -1,59 +1,62 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<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 - 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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <div class="wrapper">
<div id="header-placeholder"></div> <!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <main class="main-content">
<h1>Unsere Oldtimer Produkte</h1> <section style="padding: 0px 30px; text-align: left;">
</section> <h1>Unsere Oldtimer Produkte</h1>
<section class="card-grid" id="products_oldtimer"> </section>
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
<script> <section class="card-grid" id="products_oldtimer">
<!-- Dynamische Produkte oder Fehlermeldung -->
</section>
</main>
<!-- Fußzeile -->
<div id="footer"></div>
</div>
<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 = '';
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 => {
<!-- Fußzeiele --> console.error('Fehler beim Laden der Oldtimer_Produkte:', err);
<div id="footer"></div> 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>
</body> </body>
</html> </html>

84
public/shop/shop_sportwagen.html
View File

@ -1,64 +1,64 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<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 - 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> <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>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <main>
<h1>Unsere Sportwagen Produkte</h1> <section style="padding: 0px 30px; text-align: left;">
</section> <h1>Unsere Sportwagen Produkte</h1>
</section>
<section class="card-grid" id="products_sportwagen"> <section class="card-grid" id="products_sportwagen">
<!-- Dynamische Produkte oder Fehlermeldung --> <!-- Dynamische Produkte oder Fehlermeldung -->
</section> </section>
</main>
<!-- Footer --> <!-- Footer -->
<div id="footer"></div> <div id="footer"></div>
</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 = ''; 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 Produkte:', err); console.error('Fehler beim Laden der Sportwagen_Produkte:', err);
const container = document.getElementById('products_sportwagen'); const container = document.getElementById('products_sportwagen');
container.innerHTML = ` container.innerHTML =
<div class="error-message"> `<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3> <h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br> <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p> Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div> </div> `;
`; });
});
</script> </script>
</body> </body>
</html> </html>

136
public/startseite/startseite.html
View File

@ -9,92 +9,92 @@
<script src="/header_footer"></script> <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>
<main> <main>
<!-- Infobereich --> <!-- Infobereich -->
<section style="padding: 40px 20px; text-align: center; background: #fff;"> <section style="padding: 40px 20px; text-align: center; background: #fff;">
<h2>Willkommen beim Modellauto-Shop</h2> <h2>Willkommen beim Modellauto-Shop</h2>
<p>Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder. <p>Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder.
Perfekt für Sammler, Bastler und Fans. Perfekt für Sammler, Bastler und Fans.
</p> </p>
</section> </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>
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte --> <!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
<script> <script>
// API-Aufruf // API-Aufruf
fetch('/api/products/new') fetch('/api/products/new')
// Antwort als JSON parsen // Antwort als JSON parsen
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('latest-products'); const container = document.getElementById('latest-products');
container.innerHTML = ''; // sicherheitshalber leeren container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erzeugen // Für jedes Produkt eine Karte erzeugen
products.forEach(product => { products.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
// HTML-Inhalt der Karte mit Produktdaten füllen // HTML-Inhalt der Karte mit Produktdaten füllen
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>
`; `;
// Karte in Container einfügen // Karte in Container einfügen
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 neuesten Produkte:', err);
const container = document.getElementById('latest-products'); const container = document.getElementById('latest-products');
container.innerHTML = container.innerHTML =
`<div class="error-message"> `<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3> <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> <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`; </div>`;
}); });
</script> </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> </main>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
</div> </div>
</body> </body>
</html> </html>

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

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

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

@ -4,7 +4,7 @@
min-height: 100vh; min-height: 100vh;
} }
.wrapper { .register-wrapper {
max-width: 400px; max-width: 400px;
width: 100%; width: 100%;
padding: 30px; padding: 30px;
@ -21,6 +21,7 @@
align-items: center; align-items: center;
padding: 40px 20px; padding: 40px 20px;
} }
.registration-container { .registration-container {
max-width: 400px; max-width: 400px;
margin: 60px auto; margin: 60px auto;
@ -49,22 +50,6 @@
box-sizing: border-box; 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 { .register-link {
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
@ -81,3 +66,16 @@
text-decoration: underline; 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,7 +41,13 @@ header {
.logo-container { .logo-container {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; text-decoration: none;
color: inherit;
}
.logo-container h1 {
margin-left: 10px;
font-size: 1.8rem;
} }
.logo-img { .logo-img {
@ -283,6 +289,14 @@ main {
margin-bottom: 20px; margin-bottom: 20px;
} }
.title {
font-size: 26px;
font-weight: 600;
margin-bottom: 25px;
color: #333;
text-align: center;
}
.input-box input { .input-box input {
width: 100%; width: 100%;
padding: 12px 40px 12px 15px; padding: 12px 40px 12px 15px;
@ -377,7 +391,7 @@ h1 {
color: #b00020; color: #b00020;
border: 1px solid #ffcccc; border: 1px solid #ffcccc;
border-radius: 12px; 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; text-align: center;
font-family: inherit; font-family: inherit;
animation: fadeIn 0.6s ease-in-out; animation: fadeIn 0.6s ease-in-out;
@ -395,8 +409,14 @@ h1 {
/* Optional: weiche Animation beim Einblenden */ /* Optional: weiche Animation beim Einblenden */
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }