ac7088c5ca
Features: - Complete Luftglanz drone cleaning website - AI chat assistant integrated with OpenAI API - Expert product advice for AGO Quart and Mellerud cleaning products - Formal German language support (Sie form) - Secure PHP backend for API calls - Responsive design with mobile support - Product-specific knowledge base - Safety statements from manufacturers - Multi-page integration (index, products, services, contact) Technical components: - AI chat widget (js/ai-chat.js) - Chat styling (css/components/ai-chat.css) - Backend API (ai-chat-api.php) - Product knowledge base with detailed specifications - Demo and documentation files
1090 lines
39 KiB
HTML
1090 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Luftglanz</title>
|
|
<link rel="icon" href="images/favicon_logo.png" type="image/png">
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/components/header.css">
|
|
<link rel="stylesheet" href="css/components/footer.css">
|
|
<link rel="stylesheet" href="css/components/hero.css">
|
|
<link rel="stylesheet" href="css/components/forms.css">
|
|
<link rel="stylesheet" href="css/components/ai-chat.css">
|
|
<style>
|
|
:root {
|
|
--primary-color: #2980b9; /* Darkened from #3498db */
|
|
--accent-color: #00adb8; /* Darkened from #00c2cb */
|
|
--secondary-color: #444444; /* Darkened from #505050 */
|
|
--bg-light: #e8e9ea; /* Darkened from #f8f9fa */
|
|
--card-bg: #f5f5f5; /* Darkened from white */
|
|
--text-dark: #222222; /* Darkened from #333333 */
|
|
--text-medium: #444444; /* Darkened from #505050 */
|
|
--text-light: #606060; /* Darkened from #707070 */
|
|
--gradient-primary: linear-gradient(90deg, #2980b9 0%, #00adb8 100%); /* Darkened gradient */
|
|
--gradient-secondary: linear-gradient(90deg, #1f6797 0%, #00858e 100%); /* Darkened secondary gradient */
|
|
--shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
|
|
--spacing-section: 5rem 0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--text-medium);
|
|
background-color: var(--bg-light);
|
|
background-image:
|
|
linear-gradient(120deg, rgba(0, 95, 168, 0.05) 0%, transparent 40%),
|
|
linear-gradient(240deg, rgba(0, 140, 120, 0.05) 0%, transparent 40%);
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Header styling */
|
|
/* header {
|
|
padding: 1.5rem 0;
|
|
background: rgba(232, 233, 234, 0.95);
|
|
backdrop-filter: blur(8px);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
|
} */
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* Logo styling */
|
|
.logo-img {
|
|
height: 40px;
|
|
width: auto;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.logo h1 {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
background: var(--gradient-primary);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
}
|
|
|
|
/* Navigation styling */
|
|
.main-nav ul {
|
|
display: flex;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.main-nav a {
|
|
color: var(--text-medium);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.5px;
|
|
padding: 0.5rem 0;
|
|
position: relative;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.main-nav a:hover, .main-nav a.active {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.main-nav a::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0;
|
|
height: 2px;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: var(--gradient-primary);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.main-nav a:hover::after, .main-nav a.active::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Hero section styling */
|
|
.hero {
|
|
padding: 10rem 0 6rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(to bottom, #e0e6eb, #f0f0f0); /* Added darker gradient background */
|
|
width: 100%; /* Ensure full width */
|
|
max-width: 100%; /* Override any max-width */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-image: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 100%); /* Replace missing image with gradient */
|
|
background-size: cover;
|
|
background-position: center;
|
|
opacity: 0.25;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem; /* Add padding here instead */
|
|
}
|
|
|
|
/* Button styling */
|
|
.btn-primary {
|
|
background: var(--gradient-primary);
|
|
color: var(--text-bright);
|
|
border: none;
|
|
padding: 1rem 2rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
box-shadow: var(--glow);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 0 25px rgba(0, 194, 255, 0.7);
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--gradient-secondary);
|
|
border-radius: 6px;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Section styling */
|
|
.section-container {
|
|
padding: var(--spacing-section);
|
|
position: relative;
|
|
}
|
|
|
|
.section-container.full-width {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.section-container.full-width > .container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
position: relative;
|
|
}
|
|
|
|
.section-title h2 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: var(--text-bright);
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.section-title h2::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 4px;
|
|
background: var(--gradient-primary);
|
|
bottom: -1rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.section-title p {
|
|
color: var(--text-gray);
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Services Grid - Updated for center alignment */
|
|
.services-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.service-card {
|
|
flex: 0 0 auto;
|
|
width: 320px;
|
|
background-color: var(--card-bg);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
padding: 2rem;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
box-shadow: var(--shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.service-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700; /* Ensure headers are bold */
|
|
color: var(--text-dark);
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
min-height: 45px; /* Ensure consistent height for titles */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.service-description {
|
|
color: var(--text-light);
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.7;
|
|
text-align: center;
|
|
/* Set a consistent height for all descriptions to align */
|
|
min-height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Make services section have centered text for consistency */
|
|
#services .section-title,
|
|
#services .service-title,
|
|
#services .service-description {
|
|
text-align: center;
|
|
}
|
|
|
|
/* How it works section */
|
|
.steps-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.step-card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
border-radius: 10px;
|
|
padding: 2rem;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.step-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.step-number {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: var(--gradient-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-bright);
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: var(--glow);
|
|
}
|
|
|
|
.step-title {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: var(--text-bright);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.step-description {
|
|
color: var(--text-gray);
|
|
}
|
|
|
|
/* FAQ section */
|
|
.faq-container {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.faq-item {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
border-radius: 10px;
|
|
margin-bottom: 1rem;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.faq-question {
|
|
padding: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.faq-question::after {
|
|
content: '+';
|
|
font-size: 1.5rem;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.faq-item.active .faq-question::after {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.faq-answer {
|
|
padding: 0 1.5rem;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s, padding 0.3s;
|
|
color: var(--text-gray);
|
|
}
|
|
|
|
.faq-item.active .faq-answer {
|
|
padding: 0 1.5rem 1.5rem;
|
|
max-height: 500px;
|
|
}
|
|
|
|
/* Contact form */
|
|
.contact-form {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid rgba(0, 0, 0, 0.1); /* Darkened border */
|
|
border-radius: 10px;
|
|
padding: 2.5rem;
|
|
max-width: 800px;
|
|
margin: 3rem auto 0;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-light);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group textarea,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
background-color: rgba(0, 0, 0, 0.05); /* Slightly darkened input backgrounds */
|
|
border: 1px solid rgba(0, 0, 0, 0.15); /* Darkened borders */
|
|
border-radius: 6px;
|
|
color: var(--text-light);
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group textarea:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.2);
|
|
}
|
|
|
|
/* Footer styling */
|
|
footer {
|
|
background-color: var(--text-dark);
|
|
padding: 4rem 0 2rem;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
margin-top: 5rem;
|
|
color: #e0e0e0; /* Slightly darkened text */
|
|
}
|
|
|
|
.copyright {
|
|
text-align: center;
|
|
color: #aaaaaa;
|
|
margin-top: 3rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Mobile toggle button */
|
|
.mobile-toggle {
|
|
display: none;
|
|
font-size: 1.75rem;
|
|
color: var(--primary-color);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Mobile responsiveness */
|
|
@media (max-width: 768px) {
|
|
.mobile-toggle {
|
|
display: block; /* Show on mobile */
|
|
}
|
|
|
|
.hero h2 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.main-nav {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--bg-light);
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 999;
|
|
border-radius: 0 0 10px 10px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.main-nav.active {
|
|
display: block;
|
|
}
|
|
|
|
.main-nav ul {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
padding: 1rem 0;
|
|
gap: 0;
|
|
}
|
|
|
|
.main-nav li {
|
|
margin: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.main-nav a {
|
|
display: block;
|
|
padding: 0.75rem;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
}
|
|
|
|
.main-nav a:hover::after,
|
|
.main-nav a.active::after {
|
|
display: none;
|
|
}
|
|
|
|
.section-title h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.service-card, .step-card {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.services-grid, .steps-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.contact-form {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.footer-content {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-column h3::after {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.hero {
|
|
padding: 8rem 0 4rem;
|
|
}
|
|
|
|
.section-container {
|
|
padding: 3rem 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hero h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
padding: 0.8rem 1.6rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.section-title {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
}
|
|
|
|
/* Background stars animation */
|
|
.stars {
|
|
display: none;
|
|
}
|
|
|
|
.star {
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 2px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
opacity: 0.5;
|
|
animation: twinkling 4s infinite;
|
|
}
|
|
|
|
@keyframes twinkling {
|
|
0% { opacity: 0.2; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 0.2; }
|
|
}
|
|
|
|
/* Language Switcher - Updated to match About Us page */
|
|
.language-switcher {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.language-switcher button {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: var(--text-medium);
|
|
padding: 0.4rem 0.75rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.language-switcher button.active,
|
|
.language-switcher button:hover {
|
|
background: var(--gradient-primary);
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Updated Notification Popup Styling for Form Overlay */
|
|
.notification-popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
|
|
}
|
|
|
|
.notification-popup.show {
|
|
display: flex;
|
|
}
|
|
|
|
.notification-content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px 25px;
|
|
position: relative;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
max-width: 350px;
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
|
|
.notification-popup.show .notification-content {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.notification-icon {
|
|
background-color: rgba(255,255,255,0.2);
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 12px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.notification-message {
|
|
flex: 1;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.notification-close {
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
margin-left: 10px;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.notification-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Error state */
|
|
.notification-popup.error .notification-content {
|
|
background-color: #f44336;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Remove stars background div -->
|
|
<!-- <div class="stars" id="stars"></div> -->
|
|
|
|
<!-- Add popup notification -->
|
|
<div id="notification-popup" class="notification-popup">
|
|
<div class="notification-content">
|
|
<div class="notification-icon">✓</div>
|
|
<div class="notification-message">Nachricht wurde versendet</div>
|
|
<div class="notification-close">×</div>
|
|
</div>
|
|
</div>
|
|
|
|
<header>
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<a href="index.html" style="text-decoration: none; display: flex; align-items: center;">
|
|
<img src="images/favicon_logo.png" alt="Luftglanz Logo" class="logo-img">
|
|
<h1 data-i18n="roof_drone">Luftglanz</h1>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Add mobile toggle button -->
|
|
<button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation">
|
|
☰
|
|
</button>
|
|
|
|
<nav class="main-nav" id="mainNav">
|
|
<ul>
|
|
<li><a href="index.html" class="active" data-i18n="nav_home">Startseite</a></li>
|
|
<li><a href="#services" data-i18n="nav_services">Leistungen</a></li>
|
|
<li><a href="#how-it-works" data-i18n="nav_how_it_works">Ablauf</a></li>
|
|
<li><a href="#faq" data-i18n="nav_faq">FAQ</a></li>
|
|
<li><a href="#contact" data-i18n="nav_contact">Kontakt</a></li>
|
|
<li><a href="pages/products.html" data-i18n="nav_products">Produkte</a></li>
|
|
<li><a href="pages/gallery.html" data-i18n="nav_gallery">Galerie</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero full-width">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<h2 data-i18n="hero_title">Revolutionäre Dachreinigung mit Drohnentechnologie</h2>
|
|
<p data-i18n="hero_subtitle">Schnelle, effiziente und unkomplizierte Reinigungslösungen für Ihr Dach.</p>
|
|
<a href="#contact" class="btn-primary" data-i18n="get_quote">Kostenloses Angebot</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="services" class="section-container full-width">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2 data-i18n="services_title">Unsere Leistungen</h2>
|
|
<p data-i18n="services_description">Wir nutzen modernste Drohnentechnologie für außergewöhnliche Dachreinigungsservices</p>
|
|
</div>
|
|
|
|
<div class="services-grid">
|
|
<div class="service-card">
|
|
<div class="service-title" data-i18n="service_standard_title">Standard Dachreinigung</div>
|
|
<p class="service-description" data-i18n="service_standard_description">Unser Standard-Dachreinigungsservice entfernt Schmutz, Moos und Algen, damit Ihr Dach optimal aussieht.</p>
|
|
</div>
|
|
|
|
<div class="service-card">
|
|
<div class="service-title" data-i18n="service_solar_title">Solaranlagenreinigung</div>
|
|
<p class="service-description" data-i18n="service_solar_description">Halten Sie Ihre Solaranlagen mit unserem spezialisierten Reinigungsservice auf höchster Effizienz.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="how-it-works" class="section-container">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2 data-i18n="how_it_works_title">So funktioniert's</h2>
|
|
<p data-i18n="how_it_works_description">Unser optimierter Prozess macht die Dachreinigung einfach, sicher und unkompliziert</p>
|
|
</div>
|
|
|
|
<div class="steps-container">
|
|
<div class="step-card">
|
|
<div class="step-number">1</div>
|
|
<div class="step-title" data-i18n="how_it_works_step1">Inspektion vereinbaren</div>
|
|
<p class="step-description" data-i18n="how_it_works_step1_desc">Füllen Sie unser einfaches Formular aus, um ein Angebot zu erhalten und Ihre Inspektion zu planen.</p>
|
|
</div>
|
|
|
|
<div class="step-card">
|
|
<div class="step-number">2</div>
|
|
<div class="step-title" data-i18n="how_it_works_step2">Drohnenreinigung</div>
|
|
<p class="step-description" data-i18n="how_it_works_step2_desc">Unsere Techniker kommen mit spezialisierten Drohnen und Ausrüstung, um Ihr Dach zu reinigen.</p>
|
|
</div>
|
|
|
|
<div class="step-card">
|
|
<div class="step-number">3</div>
|
|
<div class="step-title" data-i18n="how_it_works_step3">Ergebnisse genießen</div>
|
|
<p class="step-description" data-i18n="how_it_works_step3_desc">Bewundern Sie Ihr sauberes Dach und genießen Sie die verlängerte Lebensdauer Ihrer Dachmaterialien.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="faq" class="section-container">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2 data-i18n="faq_title">Häufig gestellte Fragen</h2>
|
|
<p data-i18n="faq_description">Finden Sie Antworten auf häufige Fragen zu unseren Drohnen-Dachreinigungsdiensten</p>
|
|
</div>
|
|
|
|
<div class="faq-container">
|
|
<div class="faq-item">
|
|
<div class="faq-question" data-i18n="faq_q1">Wie lange dauert die Reinigung?</div>
|
|
<div class="faq-answer">
|
|
<p data-i18n="faq_a1">Die meisten Dächer können je nach Größe und Komplexität in wenigen Stunden gereinigt werden. Unsere Drohnentechnologie ermöglicht es uns, Aufträge schneller als mit herkömmlichen Methoden abzuschließen.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question" data-i18n="faq_q2">Ist die Drohnenreinigung sicher für mein Dach?</div>
|
|
<div class="faq-answer">
|
|
<p data-i18n="faq_a2">Ja, unsere Drohnen verwenden schonende Sprühmethoden, die Ihr Dach intakt halten. Der Prozess ist sicherer als herkömmliche Reinigungsmethoden, bei denen Arbeiter auf Ihrem Dach laufen müssen.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">Welche Reinigungslösungen verwenden Sie?</div>
|
|
<div class="faq-answer">
|
|
<p>Wir verwenden umweltfreundliche Reinigungslösungen, die Moos, Algen und Schmutz effektiv entfernen, ohne Pflanzen, Tiere oder Wasserquellen rund um Ihr Grundstück zu schädigen.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="section-container">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2 data-i18n="contact_title">Kontakt</h2>
|
|
<p data-i18n="contact_description">Kontaktieren Sie uns für ein kostenloses Angebot oder um mehr über unsere Dienstleistungen zu erfahren</p>
|
|
</div>
|
|
|
|
<!-- Form success/error message display -->
|
|
<div id="form-message" style="display: none; margin-bottom: 20px; padding: 10px; border-radius: 5px; text-align: center;"></div>
|
|
|
|
<!-- Updated contact form to use AJAX submission -->
|
|
<form class="contact-form" id="contactForm">
|
|
<div class="form-group">
|
|
<label for="name" data-i18n="contact_name">Name</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email" data-i18n="contact_email">E-Mail</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone" data-i18n="contact_phone">Telefonnummer (Optional)</label>
|
|
<input type="tel" id="phone" name="phone">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subject" data-i18n="contact_subject">Anliegen</label>
|
|
<select id="subject" name="subject" required>
|
|
<option value="Allgemeine Frage">Allgemeine Frage</option>
|
|
<option value="Rückruf">Rückruf</option>
|
|
<option value="Terminwunsch">Terminwunsch</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message" data-i18n="contact_message">Nachricht</label>
|
|
<textarea id="message" name="message" required rows="4"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn-primary" data-i18n="contact_send">Nachricht senden</button>
|
|
</form>
|
|
|
|
<!-- Keep the direct contact info as fallback -->
|
|
<div style="text-align: center; margin-top: 30px;">
|
|
<p>Oder kontaktieren Sie uns direkt:</p>
|
|
<p><strong>Email:</strong> <a href="mailto:kontakt@luftglanz.de">kontakt@luftglanz.de</a></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p data-i18n="footer_text">© 2025 Luftglanz. Alle Rechte vorbehalten.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/translations.js"></script>
|
|
<script src="js/language-manager.js"></script>
|
|
<script src="js/ai-chat.js"></script>
|
|
<script src="js/drone-image-animation.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Mobile navigation toggle
|
|
const mobileToggle = document.getElementById('mobileToggle');
|
|
const mainNav = document.getElementById('mainNav');
|
|
|
|
if(mobileToggle && mainNav) {
|
|
mobileToggle.addEventListener('click', function() {
|
|
mainNav.classList.toggle('active');
|
|
console.log('Toggle clicked, nav active:', mainNav.classList.contains('active')); // Debug line
|
|
});
|
|
}
|
|
|
|
// Close mobile menu when a link is clicked
|
|
const mobileNavLinks = document.querySelectorAll('.main-nav a');
|
|
mobileNavLinks.forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
if (window.innerWidth <= 768) {
|
|
mainNav.classList.remove('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// FAQ accordion
|
|
const faqItems = document.querySelectorAll('.faq-item');
|
|
|
|
faqItems.forEach(item => {
|
|
const question = item.querySelector('.faq-question');
|
|
|
|
question.addEventListener('click', () => {
|
|
const isActive = item.classList.contains('active');
|
|
|
|
// Close all items
|
|
faqItems.forEach(faq => {
|
|
faq.classList.remove('active');
|
|
});
|
|
|
|
// If the clicked item wasn't active before, make it active
|
|
if (!isActive) {
|
|
item.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Smooth scrolling for nav links
|
|
const scrollNavLinks = document.querySelectorAll('a[href^="#"]');
|
|
|
|
scrollNavLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
if(this.getAttribute('href') !== '#') {
|
|
e.preventDefault();
|
|
|
|
const targetId = this.getAttribute('href');
|
|
const targetElement = document.querySelector(targetId);
|
|
|
|
if (targetElement) {
|
|
// Use a smaller negative offset to position it lower but still above the default
|
|
const offset = targetId === '#contact' ? -5 : 80;
|
|
|
|
window.scrollTo({
|
|
top: targetElement.offsetTop - offset,
|
|
behavior: 'smooth'
|
|
});
|
|
|
|
history.pushState(null, null, targetId);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Contact form AJAX submission
|
|
const contactForm = document.getElementById('contactForm');
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault(); // Prevent traditional form submission
|
|
|
|
// Get form data
|
|
const formData = new FormData(contactForm);
|
|
const name = formData.get('name');
|
|
const email = formData.get('email');
|
|
const phone = formData.get('phone');
|
|
const subject = formData.get('subject');
|
|
const message = formData.get('message');
|
|
|
|
// Basic validation
|
|
if (!name || !email || !message || !subject) {
|
|
showNotification('Bitte füllen Sie alle Pflichtfelder aus.', 'error');
|
|
return;
|
|
}
|
|
|
|
// Create URL with parameters (same as send-email.php expects)
|
|
const url = `send-email.php?name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}&phone=${encodeURIComponent(phone)}&subject=${encodeURIComponent(subject)}&message=${encodeURIComponent(message)}`;
|
|
|
|
// Send AJAX request
|
|
fetch(url)
|
|
.then(response => {
|
|
// We only check if the request was sent successfully
|
|
// The actual success/error is determined by PHP redirect URL
|
|
if (response.ok) {
|
|
// Reset the form
|
|
contactForm.reset();
|
|
|
|
// Show success notification
|
|
showNotification('Nachricht wurde versendet', 'success');
|
|
} else {
|
|
showNotification('Fehler beim Senden der Nachricht', 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error:', err);
|
|
showNotification('Fehler beim Senden der Nachricht', 'error');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Function to show notification popup
|
|
function showNotification(message, type = 'success') {
|
|
const popup = document.getElementById('notification-popup');
|
|
const content = document.querySelector('.notification-content');
|
|
const messageEl = document.querySelector('.notification-message');
|
|
|
|
if (popup && messageEl) {
|
|
// Set message and type
|
|
messageEl.textContent = message;
|
|
|
|
if (type === 'error') {
|
|
popup.classList.add('error');
|
|
} else {
|
|
popup.classList.remove('error');
|
|
}
|
|
|
|
// Show notification
|
|
popup.style.display = 'flex';
|
|
|
|
// Trigger animation
|
|
setTimeout(() => {
|
|
popup.classList.add('show');
|
|
content.style.opacity = '1';
|
|
content.style.transform = 'translateY(0)';
|
|
}, 10);
|
|
|
|
// Auto-hide after 3 seconds
|
|
const hideTimer = setTimeout(() => {
|
|
hideNotification();
|
|
}, 3000);
|
|
|
|
// Handle close button
|
|
const closeButton = document.querySelector('.notification-close');
|
|
if (closeButton) {
|
|
closeButton.addEventListener('click', hideNotification);
|
|
}
|
|
|
|
// Handle click outside
|
|
popup.addEventListener('click', function(e) {
|
|
if (e.target === popup) {
|
|
hideNotification();
|
|
}
|
|
});
|
|
|
|
function hideNotification() {
|
|
clearTimeout(hideTimer);
|
|
content.style.opacity = '0';
|
|
content.style.transform = 'translateY(-20px)';
|
|
popup.classList.remove('show');
|
|
|
|
setTimeout(() => {
|
|
popup.style.display = 'none';
|
|
}, 300);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |