// Blechprofis.eu - JavaScript(function() {
'use strict';// Navigation
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('navMenu');
if (hamburger && navMenu) {
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
});
const navLinks = navMenu.querySelectorAll('a');
navLinks.forEach(link => {
link.addEventListener('click', function() {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
});
});
}
// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
const navbarHeight = 70;
const targetPosition = targetElement.offsetTop - navbarHeight;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
}
});
});
// Scroll Animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, observerOptions);
const animatedElements = document.querySelectorAll('.fade-in-up');
animatedElements.forEach(el => observer.observe(el));
// Product Card Effects
const productCards = document.querySelectorAll('.product-card, .feature-card');
productCards.forEach(card => {
card.addEventListener('mousemove', function(e) {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (y - centerY) / 10;
const rotateY = (centerX - x) / 10;
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
});
card.addEventListener('mouseleave', function() {
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
});
});
// Back to Top Button
const backToTopBtn = document.createElement('button');
backToTopBtn.innerHTML = '
';
backToTopBtn.className = 'back-to-top';
backToTopBtn.setAttribute('aria-label', 'Nach oben');
document.body.appendChild(backToTopBtn);
const backToTopStyle = document.createElement('style');
backToTopStyle.textContent = `
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #FF8C42, #D97941);
color: white;
border: none;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3);
z-index: 999;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 6px 16px rgba(255, 140, 66, 0.4);
}
`;
document.head.appendChild(backToTopStyle);
window.addEventListener('scroll', function() {
if (window.pageYOffset > 500) {
backToTopBtn.classList.add('show');
} else {
backToTopBtn.classList.remove('show');
}
});
backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Kontaktní formulář - validace a odeslání
const contactForm = document.getElementById('contact-form');
const formMessage = document.getElementById('form-message');
// File Upload funkce
const fileInput = document.getElementById('anhang');
const fileList = document.getElementById('file-list');
let uploadedFiles = [];
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10 MB
const ALLOWED_TYPES = [
'application/pdf',
'application/msword',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'image/jpeg',
'image/jpg',
'image/png',
'application/zip',
'application/x-zip-compressed'
];
if (fileInput) {
fileInput.addEventListener('change', function(e) {
handleFiles(e.target.files);
});
// Drag & Drop
const fileUploadDisplay = document.querySelector('.file-upload-display');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
fileUploadDisplay.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
fileUploadDisplay.addEventListener(eventName, function() {
fileUploadDisplay.style.borderColor = 'var(--accent-color)';
fileUploadDisplay.style.background = 'white';
});
});
['dragleave', 'drop'].forEach(eventName => {
fileUploadDisplay.addEventListener(eventName, function() {
fileUploadDisplay.style.borderColor = '#e2e8f0';
fileUploadDisplay.style.background = '#f8f9fa';
});
});
fileUploadDisplay.addEventListener('drop', function(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles(files);
});
}
function handleFiles(files) {
const fileArray = Array.from(files);
fileArray.forEach(file => {
// Validace typu souboru
if (!ALLOWED_TYPES.includes(file.type)) {
showFileError(`Nepodporovaný typ souboru: ${file.name}`);
return;
}
// Validace velikosti
if (file.size > MAX_FILE_SIZE) {
showFileError(`Soubor ${file.name} je příliš velký (max. 10 MB)`);
return;
}
// Přidání souboru
uploadedFiles.push(file);
displayFile(file);
});
}
function displayFile(file) {
const fileItem = document.createElement('div');
fileItem.className = 'file-item';
const fileIcon = getFileIcon(file.type);
const fileSize = formatFileSize(file.size);
fileItem.innerHTML = `
${file.name}
${fileSize}
`;
fileList.appendChild(fileItem);
// Remove handler
fileItem.querySelector('.file-remove').addEventListener('click', function() {
removeFile(file.name);
fileItem.remove();
});
}
function removeFile(filename) {
uploadedFiles = uploadedFiles.filter(f => f.name !== filename);
}
function getFileIcon(type) {
if (type.includes('pdf')) return 'fa-file-pdf';
if (type.includes('word') || type.includes('document')) return 'fa-file-word';
if (type.includes('image')) return 'fa-file-image';
if (type.includes('zip')) return 'fa-file-archive';
return 'fa-file';
}
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
}
function showFileError(message) {
const errorDiv = document.createElement('div');
errorDiv.className = 'file-error';
errorDiv.innerHTML = `
${message}`;
fileList.appendChild(errorDiv);
setTimeout(function() {
errorDiv.remove();
}, 5000);
}
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Získání dat z formuláře
const formData = new FormData(contactForm);
// Přidání nahraných souborů
uploadedFiles.forEach(file => {
formData.append('files[]', file);
});
// Zobrazení loading stavu
const submitBtn = contactForm.querySelector('.form-submit');
const originalText = submitBtn.innerHTML;
submitBtn.innerHTML = '
Wird gesendet...';
submitBtn.disabled = true;
// Simulace odeslání (v produkci nahradit AJAX požadavkem)
setTimeout(function() {
// Úspěch
formMessage.className = 'form-message success';
const filesCount = uploadedFiles.length;
const filesText = filesCount > 0 ? ` (${filesCount} Datei${filesCount > 1 ? 'en' : ''} angehängt)` : '';
formMessage.textContent = `Vielen Dank für Ihre Anfrage${filesText}! Wir werden Sie so schnell wie möglich kontaktieren.`;
contactForm.reset();
// Vyčištění seznamu souborů
uploadedFiles = [];
fileList.innerHTML = '';
// Reset tlačítka
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
// Scroll k potvrzení
formMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Skrytí zprávy po 8 sekundách
setTimeout(function() {
formMessage.className = 'form-message';
formMessage.textContent = '';
}, 8000);
}, 1500);
/*
// PRO PRODUKCI - AJAX odeslání do WordPressu:
fetch('/wp-admin/admin-ajax.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
formMessage.className = 'form-message success';
formMessage.textContent = data.message || 'Vielen Dank für Ihre Anfrage!';
contactForm.reset();
uploadedFiles = [];
fileList.innerHTML = '';
} else {
formMessage.className = 'form-message error';
formMessage.textContent = data.message || 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.';
}
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
formMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
})
.catch(error => {
console.error('Chyba při odeslání formuláře:', error);
formMessage.className = 'form-message error';
formMessage.textContent = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.';
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
});
*/
});
// Real-time validace polí
const requiredFields = contactForm.querySelectorAll('[required]');
requiredFields.forEach(field => {
field.addEventListener('blur', function() {
if (!field.value.trim()) {
field.style.borderColor = '#dc3545';
} else {
field.style.borderColor = '#48bb78';
}
});
field.addEventListener('input', function() {
if (field.value.trim()) {
field.style.borderColor = '#48bb78';
}
});
});
}
console.log('%c⚙️ Blechprofis.eu', 'font-size: 20px; font-weight: bold; color: #1a5490;');
console.log('%cCortenstahl für Profis', 'font-size: 14px; color: #D97941;');
})();
German
English