Merge pull request 'kontaktformular' (#39) from kontaktformular into develop
Reviewed-on: #39
This commit is contained in:
commit
fca329024a
@ -50,7 +50,7 @@
|
||||
</li>
|
||||
<!-- Link zur Kontakt Seite-->
|
||||
<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>
|
||||
<!-- Link zum Bestellformular-->
|
||||
<li class="menu-item">
|
||||
|
||||
55
public/kontaktformular/kontaktformular.html
Normal file
55
public/kontaktformular/kontaktformular.html
Normal 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>
|
||||
@ -17,60 +17,60 @@
|
||||
<script src="/header_footer"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<!-- Header -->
|
||||
<div id="header"></div>
|
||||
<div class="wrapper">
|
||||
<!-- Header -->
|
||||
<div id="header"></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 neuesten Produkte) -->
|
||||
</section>
|
||||
<!-- Hauptinhalt -->
|
||||
<h1>Unsere Neusten Produkte: </h1>
|
||||
<section class="card-grid" id="latest-products">
|
||||
<!-- Dynamische Produkte (5 neuesten Produkte) -->
|
||||
</section>
|
||||
|
||||
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
|
||||
<script>
|
||||
// Funktion zum Hinzufügen zum Warenkorb
|
||||
function zumWarenkorbHinzufuegen(product) {
|
||||
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
|
||||
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
|
||||
<script>
|
||||
// Funktion zum Hinzufügen zum Warenkorb
|
||||
function zumWarenkorbHinzufuegen(product) {
|
||||
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) {
|
||||
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
|
||||
} else {
|
||||
warenkorb.push({
|
||||
product_id: product.id,
|
||||
product_name: product.name,
|
||||
price: product.price,
|
||||
quantity: 1
|
||||
});
|
||||
}
|
||||
if (existingProduct) {
|
||||
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
|
||||
} else {
|
||||
warenkorb.push({
|
||||
product_id: product.id,
|
||||
product_name: product.name,
|
||||
price: product.price,
|
||||
quantity: 1
|
||||
});
|
||||
}
|
||||
|
||||
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
|
||||
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
|
||||
zeigeWarenkorbAnzahl();
|
||||
}
|
||||
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
|
||||
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
|
||||
zeigeWarenkorbAnzahl();
|
||||
}
|
||||
|
||||
// Produkte laden
|
||||
fetch('/api/products/new')
|
||||
.then(res => res.json())
|
||||
.then(products => {
|
||||
const container = document.getElementById('latest-products');
|
||||
container.innerHTML = '';
|
||||
// Produkte laden
|
||||
fetch('/api/products/new')
|
||||
.then(res => res.json())
|
||||
.then(products => {
|
||||
const container = document.getElementById('latest-products');
|
||||
container.innerHTML = '';
|
||||
|
||||
products.forEach(product => {
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('card');
|
||||
card.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.toFixed(2)} €</p>
|
||||
@ -79,55 +79,55 @@
|
||||
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
|
||||
`;
|
||||
|
||||
const addToCartButton = card.querySelector('.add-to-cart');
|
||||
addToCartButton.addEventListener('click', () => {
|
||||
zumWarenkorbHinzufuegen(product);
|
||||
});
|
||||
const addToCartButton = card.querySelector('.add-to-cart');
|
||||
addToCartButton.addEventListener('click', () => {
|
||||
zumWarenkorbHinzufuegen(product);
|
||||
});
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Fehler beim Laden der Produkte:', err);
|
||||
container.appendChild(card);
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Fehler beim Laden der 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>
|
||||
|
||||
|
||||
<!-- Infobereich mit den Vorteilen -->
|
||||
<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>
|
||||
<!-- Infobereich mit den Vorteilen -->
|
||||
<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>
|
||||
</body>
|
||||
|
||||
@ -73,4 +73,10 @@ router.get('/bestellformular', (req, res) => {
|
||||
router.get('/bestellung', (req, res) => {
|
||||
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;
|
||||
Loading…
x
Reference in New Issue
Block a user