Bootstrap-Website komplett: Parallax Hero, Logo, PHPMailer, responsive Banner-Bilder und neue Baumaschinen (CAT 906, Volvo ZL 302)
This commit is contained in:
7
js/bootstrap.bundle.min.js
vendored
Normal file
7
js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
196
js/main.js
Normal file
196
js/main.js
Normal file
@@ -0,0 +1,196 @@
|
||||
// Aktuelles Jahr im Footer setzen
|
||||
document.getElementById('year').textContent = new Date().getFullYear();
|
||||
|
||||
// URL-Parameter für Erfolgs-/Fehlermeldungen prüfen (Kontaktformular)
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
|
||||
// Erfolgsmeldung anzeigen
|
||||
if (urlParams.get('success') === '1') {
|
||||
const successAlert = document.getElementById('alertSuccess');
|
||||
if (successAlert) {
|
||||
successAlert.classList.remove('d-none');
|
||||
// Formular leeren
|
||||
const form = document.getElementById('contactForm');
|
||||
if (form) form.reset();
|
||||
// Nach oben scrollen
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
// Fehlermeldung anzeigen
|
||||
if (urlParams.get('error') === '1') {
|
||||
const errorAlert = document.getElementById('alertError');
|
||||
if (errorAlert) {
|
||||
errorAlert.classList.remove('d-none');
|
||||
const reason = urlParams.get('reason');
|
||||
if (reason === 'rate_limit') {
|
||||
errorAlert.innerHTML = '<i class="bi bi-exclamation-triangle-fill"></i> <strong>Zu viele Anfragen!</strong> Bitte warten Sie einen Moment, bevor Sie erneut versuchen.';
|
||||
}
|
||||
// Nach oben scrollen
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
// Kontaktformular: Maschine aus URL Parameter vorausfüllen
|
||||
const maschine = urlParams.get('maschine');
|
||||
const maschineInput = document.getElementById('maschine');
|
||||
if (maschine && maschineInput) {
|
||||
maschineInput.value = decodeURIComponent(maschine);
|
||||
}
|
||||
|
||||
// Submit-Button Feedback
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function() {
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
if (submitBtn) {
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Wird gesendet...';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Maschinen laden
|
||||
loadMaschinen();
|
||||
});
|
||||
|
||||
// Maschinen laden und anzeigen
|
||||
async function loadMaschinen() {
|
||||
try {
|
||||
const response = await fetch('data/maschinen.json');
|
||||
const data = await response.json();
|
||||
|
||||
// Baumaschinen anzeigen
|
||||
displayMaschinen(data.baumaschinen, 'baumaschinen-container');
|
||||
|
||||
// Gartengeräte anzeigen
|
||||
displayMaschinen(data.gartengeraete, 'gartengeraete-container');
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Maschinen:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Maschinen-Karten erstellen und anzeigen
|
||||
function displayMaschinen(maschinen, containerId) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
maschinen.forEach(maschine => {
|
||||
const card = createMaschinenCard(maschine);
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Einzelne Maschinen-Karte erstellen
|
||||
function createMaschinenCard(maschine) {
|
||||
const col = document.createElement('div');
|
||||
col.className = 'col-md-6 col-lg-4';
|
||||
|
||||
// Besonderheiten als Liste
|
||||
let besonderheitenHTML = '';
|
||||
if (maschine.besonderheiten && maschine.besonderheiten.length > 0) {
|
||||
besonderheitenHTML = '<ul class="list-unstyled mt-3">';
|
||||
maschine.besonderheiten.forEach(item => {
|
||||
besonderheitenHTML += `<li><i class="bi bi-check-circle-fill text-success"></i> ${item}</li>`;
|
||||
});
|
||||
besonderheitenHTML += '</ul>';
|
||||
}
|
||||
|
||||
// Spezifikationen
|
||||
let specsHTML = '<div class="specs mt-3 mb-3">';
|
||||
if (maschine.gewicht) {
|
||||
specsHTML += `<span class="badge bg-secondary me-2 mb-2"><i class="bi bi-weight"></i> ${maschine.gewicht}</span>`;
|
||||
}
|
||||
if (maschine.leistung) {
|
||||
specsHTML += `<span class="badge bg-secondary me-2 mb-2"><i class="bi bi-lightning-charge"></i> ${maschine.leistung}</span>`;
|
||||
}
|
||||
if (maschine.arbeitsbreite) {
|
||||
specsHTML += `<span class="badge bg-secondary me-2 mb-2"><i class="bi bi-arrows-expand"></i> ${maschine.arbeitsbreite}</span>`;
|
||||
}
|
||||
specsHTML += '</div>';
|
||||
|
||||
// Lieferung Info
|
||||
let lieferungHTML = '';
|
||||
if (maschine.lieferung) {
|
||||
lieferungHTML = `
|
||||
<div class="alert alert-info mt-3 mb-0">
|
||||
<small><i class="bi bi-truck"></i> <strong>Lieferung:</strong> ${maschine.lieferung}</small>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Mehrtagiger Preis
|
||||
let mehrtagigHTML = '';
|
||||
if (maschine.preisMehrtagig) {
|
||||
mehrtagigHTML = `<p class="text-muted small mb-2">${maschine.preisMehrtagig}</p>`;
|
||||
}
|
||||
|
||||
// Bild HTML
|
||||
let imageHTML = '';
|
||||
if (maschine.image) {
|
||||
imageHTML = `<img src="${maschine.image}" class="card-img-top" alt="${maschine.title}">`;
|
||||
}
|
||||
|
||||
col.innerHTML = `
|
||||
<div class="card h-100 shadow-sm hover-card">
|
||||
${imageHTML}
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="card-title mb-0">${maschine.title}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">${maschine.beschreibung}</p>
|
||||
|
||||
${specsHTML}
|
||||
${besonderheitenHTML}
|
||||
|
||||
<div class="preis-box mt-auto">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="text-muted">Preis:</span>
|
||||
<span class="h4 mb-0 text-primary fw-bold">${maschine.preis}</span>
|
||||
</div>
|
||||
${mehrtagigHTML}
|
||||
</div>
|
||||
|
||||
${lieferungHTML}
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-top-0">
|
||||
<a href="kontakt.html?maschine=${encodeURIComponent(maschine.title)}" class="btn btn-outline-primary w-100">
|
||||
<i class="bi bi-envelope"></i> Anfrage senden
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return col;
|
||||
}
|
||||
|
||||
// Beim Laden der Seite
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadMaschinen();
|
||||
|
||||
// Kontaktformular: Maschine aus URL Parameter vorausfüllen
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const maschine = urlParams.get('maschine');
|
||||
const maschineInput = document.getElementById('maschine');
|
||||
|
||||
if (maschine && maschineInput) {
|
||||
maschineInput.value = decodeURIComponent(maschine);
|
||||
}
|
||||
});
|
||||
|
||||
// Smooth Scroll für Anker-Links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user