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

kontaktformular #39

Merged
Mohamed merged 3 commits from kontaktformular into develop 2025-04-29 18:42:51 +00:00
Conversation 0 Commits 3 Files Changed 4 +147 -86
4 changed files with 147 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/header_footer/header.html
View File

@ -50,7 +50,7 @@
</li> </li>
<!-- Link zur Kontakt Seite--> <!-- Link zur Kontakt Seite-->
<li class="menu-item"> <li class="menu-item">
<a href="/kontakt"><i class='bx bx-envelope'></i> Kontakt</a> <a href="/kontaktformular"><i class='bx bx-envelope'></i> Kontakt</a>
</li> </li>
<!-- Link zum Bestellformular--> <!-- Link zum Bestellformular-->
<li class="menu-item"> <li class="menu-item">

55
public/kontaktformular/kontaktformular.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontaktformular</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"></div>
<main>
<section style="padding: 40px 20px; max-width: 700px; margin: 0 auto;">
<h1>Kontaktieren Sie uns</h1>
<p style="margin-bottom: 30px;">Sie haben Fragen oder Anregungen? Schreiben Sie uns – wir melden uns schnellstmöglich!</p>
<form id="contact-form">
<div class="input-box">
<input type="text" name="name" placeholder="Ihr Name" required>
<i class='bx bx-user'></i>
</div>
<div class="input-box">
<input type="email" name="email" placeholder="Ihre E-Mail-Adresse" required>
<i class='bx bx-envelope'></i>
</div>
<div class="input-box">
<input type="text" name="betreff" placeholder="Betreff" required>
<i class='bx bx-edit-alt'></i>
</div>
<div class="input-box">
<textarea name="nachricht" placeholder="Ihre Nachricht" rows="6" style="width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;" required></textarea>
</div>
<button type="submit" class="btn">Nachricht senden</button>
</form>
</section>
</main>
<!-- Footer -->
<div id="footer"></div>
</div>
<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
e.preventDefault();
alert('Vielen Dank für Ihre Nachricht! Wir melden uns bald bei Ihnen.');
this.reset(); // Formular leeren
});
</script>
</body>
</html>

170
public/startseite/startseite.html
View File

@ -17,60 +17,60 @@
<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"></div> <div id="header"></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 neuesten Produkte) --> <!-- Dynamische Produkte (5 neuesten Produkte) -->
</section> </section>
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte --> <!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
<script> <script>
// Funktion zum Hinzufügen zum Warenkorb // Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) { function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || []; let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id); const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) { if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else { } else {
warenkorb.push({ warenkorb.push({
product_id: product.id, product_id: product.id,
product_name: product.name, product_name: product.name,
price: product.price, price: product.price,
quantity: 1 quantity: 1
}); });
} }
localStorage.setItem('warenkorb', JSON.stringify(warenkorb)); localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`); alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl(); zeigeWarenkorbAnzahl();
} }
// Produkte laden // Produkte laden
fetch('/api/products/new') fetch('/api/products/new')
.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 = ''; 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.toFixed(2)} €</p> <p>Preis: ${product.price.toFixed(2)} €</p>
@ -79,55 +79,55 @@
<button class="add-to-cart">Zum Warenkorb hinzufügen</button> <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`; `;
const addToCartButton = card.querySelector('.add-to-cart'); const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => { addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product); zumWarenkorbHinzufuegen(product);
}); });
container.appendChild(card); container.appendChild(card);
}); });
}) })
.catch(err => { .catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der 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> <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>
<!-- Infobereich mit den Vorteilen --> <!-- Infobereich mit den Vorteilen -->
<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>

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

@ -73,4 +73,10 @@ router.get('/bestellformular', (req, res) => {
router.get('/bestellung', (req, res) => { router.get('/bestellung', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellung/bestellung.html')); res.sendFile(path.join(__dirname, '../../../public/bestellung/bestellung.html'));
}) })
router.get('/kontaktformular', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/kontaktformular/kontaktformular.html'));
})
module.exports = router; module.exports = router;