ben7sys/web7sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web7sys

Browse Source
This commit is contained in:
ben7sys
2024-11-01 06:42:44 +01:00
parent d8be0951b0
commit 7b26b3c509
15 changed files with 951 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
website-7sys/PROMPT.md Normal file
View File

@@ -0,0 +1,174 @@
SHOT-5
# IT-Beratung und Sicherheitslösungen
Beratung zu IT-Infrastruktur, maßgeschneidert auf die spezifischen Bedürfnisse kleiner Unternehmen. Dazu könnten Empfehlungen für Hardware, Netzwerkoptimierung und Firewall-Management gehören, beispielsweise mit Securepoint-Lösungen, die besonders für Datenschutz und Zertifizierungsanforderungen geeignet sind.
Netzwerk- und Datensicherheits-Implementierung
Einrichtung und Konfiguration sicherer Netzwerke, inklusive VPN, Zugriffskontrollen und Firewall-Management. Fokus auf den Schutz sensibler Daten und Absicherung der Netzwerke gegen Bedrohungen unter Berücksichtigung neuer Sicherheitsstandards wie der NIS-2-Regelung.
Proaktives Monitoring und Wartung
Regelmäßige Wartung und Überwachung der IT-Systeme, um Ausfälle zu minimieren und eine hohe Verfügbarkeit sicherzustellen. Dazu gehören automatisierte Backups, Systemupdates, und kontinuierliches Monitoring, um Probleme frühzeitig zu erkennen und zu beheben.
### Farben für Dark-Mode:
Haupt-Farbe: #0A0A0A (Tiefes Schwarz)
Akzent-Farbe: #1534D1 (Tiefes Blau)
Schrift-Farbe: #F2F2F2 (Helles Grau)
### Farben für Light-Mode:
Haupt-Farbe: #F2F2F2
Akzent-Farbe: #4A90E2
Schrift-Farbe: #333333
---
Erstelle eine moderne One-Page Webseite als digitale Visitenkarte für das IT-Unternehmen 7SYS mit Space-Theme und Theme-Switcher. Die Seite soll die professionellen IT-Dienstleistungen und Sicherheitslösungen präsentieren.
Farbschema:
Dark Theme:
- Hauptfarbe: #0A0A0A (Tiefes Schwarz)
- Akzentfarbe: #1534D1 (Tiefes Blau)
- Schriftfarbe: #F2F2F2 (Helles Grau)
Light Theme:
- Hauptfarbe: #F2F2F2
- Akzentfarbe: #4A90E2
- Schriftfarbe: #333333
Struktur und Inhalt:
1. Header:
- Logo "7SYS"
- Theme-Switcher
- Hauptnavigation
2. Hero-Section:
- Headline: "IT-Beratung und Sicherheitslösungen"
- Subtiler Space-Theme Hintergrund
- Call-to-Action Button
3. Hauptdienstleistungen:
IT-Beratung und Sicherheitslösungen:
- Fokus auf kleine Unternehmen
- IT-Infrastruktur Beratung
- Hardware-Empfehlungen
- Netzwerkoptimierung
- Firewall-Management (Securepoint-Lösungen)
- Datenschutz und Zertifizierungsanforderungen
Netzwerk- und Datensicherheit:
- Sichere Netzwerkkonfiguration
- VPN-Einrichtung
- Zugriffskontrolle
- Firewall-Management
- NIS-2-Regelung Implementation
- Bedrohungsschutz
Proaktives Monitoring und Wartung:
- System-Überwachung
- Automatisierte Backups
- Systemupdates
- Frühwarnsystem
- Ausfallsicherheit
- Verfügbarkeitsoptimierung
4. Zukunftsvision:
- Desaster Recovery Rechenzentrum
- Sustainable & Renewable IT-Infrastructure
5. Kontaktbereich:
- Kontaktformular
- Geschäftsdaten
- Impressum
Technische Anforderungen:
- Responsive Design
- Theme-Switching Funktionalität
- Performance-Optimierung
- SEO-freundliche Struktur
- Barrierefreiheit
Design-Richtlinien:
- Modernes, klares Layout
- Space-Theme Integration
- Professionelle Typographie
- Optimale Lesbarkeit
- Subtle Animationen
- Konsistente Gestaltung
Besondere Aspekte:
- Hervorhebung der Sicherheitsexpertise
- Fokus auf kleine Unternehmen
- Betonung der individualisierten Lösungen
- Integration der Nachhaltigkeitsaspekte
Liefere den Code in drei Teilen:
1. HTML-Struktur
2. CSS mit Theme-Definitionen
3. JavaScript für Theme-Switching
Wichtige Anforderungen:
- Klare Leistungskommunikation
- Professionelle Darstellung
- Optimale User Experience
- Mobile-First Design
- Schnelle Ladezeiten
- Intuitive Navigation
---
Webseite in shot-5 inspizieren und Verbesserungsvorschläge machen.
Nach der Inspektion der Website und des Codes schlage ich folgende Verbesserungen vor:
Accessibility & SEO:
Fehlende ARIA-Labels für bessere Barrierefreiheit
Fehlende Meta-Tags für Social Media Sharing
Fehlende Sitemap und robots.txt
Performance & UX:
Fehlende Ladeanimationen für Service-Cards
Fehlende Validierung im Kontaktformular
Fehlende Erfolgsmeldung nach Formularversand
Fehlende Responsive Images
Design:
Kontrastverbesserungen im Light-Mode
Konsistentere Abstände zwischen Sektionen
Verbesserte Mobile Navigation
Ich werde diese Verbesserungen nun implementieren.
Die Website wurde in folgenden Bereichen verbessert:
Barrierefreiheit & SEO
Integration von ARIA-Labels und semantischen HTML-Elementen
Erweiterte Meta-Tags für bessere Suchmaschinen-Indexierung
Verbesserte Keyboard-Navigation und Screenreader-Unterstützung
Benutzerfreundlichkeit & Performance
Animierte Service-Karten mit optimierter Performance
Verbessertes Kontaktformular mit Validierung und Feedback
Optimierte Scroll-Funktionalität und Theme-Umschaltung
Design & Responsive Layout
Optimierte Farbkontraste und Abstände
Verbesserte Mobile-Ansicht
Implementierte Print-Styles
Code-Qualität
Modularisierte JavaScript-Struktur
Optimierte CSS-Variablen
Erweitertes Error-Handling
Diese Verbesserungen machen die Website zugänglicher, benutzerfreundlicher und wartbarer.
---
Ich möchte die styles.css sinnvoll auftrennen so dass möglichst viele kleine css-files entstehen.
---
Die Top-Bar soll einen gradienten erhalten (dark & light mode)
Ich möchte den Dark Mode als Default eingestellt haben.

11
website-7sys/css/accessibility.css Normal file
View File

@@ -0,0 +1,11 @@
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

9
website-7sys/css/animations.css Normal file
View File

@@ -0,0 +1,9 @@
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
to { transform: translateY(-50%) rotate(360deg); }
}

42
website-7sys/css/buttons.css Normal file
View File

@@ -0,0 +1,42 @@
/* Buttons */
.cta-button {
display: inline-block;
padding: 1rem 2rem;
background-color: var(--accent-color);
color: white;
text-decoration: none;
border-radius: 5px;
transition: var(--transition);
font-weight: 600;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.cta-button:focus {
outline: 2px solid var(--text-color);
outline-offset: 2px;
}
.submit-button {
padding: 1rem;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: var(--transition);
position: relative;
font-weight: 600;
}
.submit-button:hover {
transform: translateY(-2px);
}
.submit-button:disabled {
opacity: 0.7;
cursor: not-allowed;
}

112
website-7sys/css/contact.css Normal file
View File

@@ -0,0 +1,112 @@
/* Contact Section */
.contact {
padding: 5rem 0;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.contact-form {
display: grid;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 0.5rem;
font-weight: 600;
}
.form-group input,
.form-group textarea {
padding: 0.8rem;
border: 1px solid var(--accent-color);
border-radius: 5px;
background-color: var(--card-bg);
color: var(--text-color);
transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
box-shadow: 0 0 0 2px var(--accent-color);
}
.form-group input:invalid,
.form-group textarea:invalid {
border-color: #ff4444;
}
.loading-spinner {
display: none;
width: 20px;
height: 20px;
border: 2px solid #ffffff;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.form-feedback {
display: none;
padding: 1rem;
border-radius: 5px;
margin-top: 1rem;
}
.form-feedback.success {
display: block;
background-color: rgba(40, 167, 69, 0.1);
border: 1px solid #28a745;
color: #28a745;
}
.form-feedback.error {
display: block;
background-color: rgba(220, 53, 69, 0.1);
border: 1px solid #dc3545;
color: #dc3545;
}
.contact-info {
padding: 2rem;
background-color: var(--card-bg);
border-radius: 10px;
}
.contact-info h3 {
margin-bottom: 1.5rem;
color: var(--accent-color);
}
.contact-info p {
margin-bottom: 1rem;
}
.contact-info i {
margin-right: 0.5rem;
color: var(--accent-color);
}
.contact-info a {
color: var(--text-color);
text-decoration: none;
transition: var(--transition);
}
.contact-info a:hover {
color: var(--accent-color);
}

22
website-7sys/css/footer.css Normal file
View File

@@ -0,0 +1,22 @@
/* Footer */
footer {
padding: 2rem 0;
background-color: var(--card-bg);
text-align: center;
}
footer .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.impressum {
color: var(--text-color);
text-decoration: none;
transition: var(--transition);
}
.impressum:hover {
color: var(--accent-color);
}

44
website-7sys/css/header.css Normal file
View File

@@ -0,0 +1,44 @@
/* Header and Navigation */
header {
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
background-color: var(--bg-primary);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.main-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 2rem;
font-weight: bold;
color: var(--accent-color);
}
#theme-toggle {
background: none;
border: none;
color: var(--text-color);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
transition: var(--transition);
}
#theme-toggle:hover {
color: var(--accent-color);
transform: scale(1.1);
}
#theme-toggle:focus {
outline: 2px solid var(--accent-color);
border-radius: 4px;
}

37
website-7sys/css/hero.css Normal file
View File

@@ -0,0 +1,37 @@
/* Hero Section */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
text-align: center;
overflow: hidden;
padding-top: 60px;
}
.stars {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, var(--accent-color) 0.1px, transparent 1px);
background-size: 50px 50px;
animation: stars 20s linear infinite;
opacity: 0.3;
}
@keyframes stars {
0% { transform: translateY(0); }
100% { transform: translateY(-50px); }
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: 1rem;
animation: fadeIn 1s ease-out;
}
.hero p {
font-size: clamp(1.2rem, 3vw, 1.5rem);
margin-bottom: 2rem;
opacity: 0.9;
}

25
website-7sys/css/reset.css Normal file
View File

@@ -0,0 +1,25 @@
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background-color: var(--bg-primary);
color: var(--text-color);
line-height: 1.6;
transition: var(--transition);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

51
website-7sys/css/responsive.css Normal file
View File

@@ -0,0 +1,51 @@
/* Responsive Design */
@media (max-width: 768px) {
html {
font-size: 14px;
}
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1.2rem;
}
.contact-grid {
grid-template-columns: 1fr;
}
footer .container {
flex-direction: column;
gap: 1rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
.service-card,
.vision-item {
padding: 1.5rem;
}
}
/* Print Styles */
@media print {
.hero {
height: auto;
padding: 2rem 0;
}
.stars {
display: none;
}
.service-card,
.vision-item {
break-inside: avoid;
}
}

58
website-7sys/css/services.css Normal file
View File

@@ -0,0 +1,58 @@
/* Services Section */
.services {
padding: 5rem 0;
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-card {
background-color: var(--card-bg);
padding: 2rem;
border-radius: 10px;
transition: var(--transition);
opacity: 0;
transform: translateY(20px);
}
.service-card.visible {
opacity: 1;
transform: translateY(0);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.service-card i {
font-size: 2.5rem;
color: var(--accent-color);
margin-bottom: 1rem;
}
.service-card h3 {
margin-bottom: 1rem;
color: var(--accent-color);
}
.service-card ul {
list-style: none;
}
.service-card ul li {
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.service-card ul li::before {
content: "•";
color: var(--accent-color);
position: absolute;
left: 0;
}

28
website-7sys/css/variables.css Normal file
View File

@@ -0,0 +1,28 @@
:root {
/* Dark Theme Variables */
--dark-main: #0A0A0A;
--dark-accent: #1534D1;
--dark-text: #F2F2F2;
--dark-card: rgba(255, 255, 255, 0.05);
/* Light Theme Variables */
--light-main: #F2F2F2;
--light-accent: #1534D1;
--light-text: #333333;
--light-card: rgba(0, 0, 0, 0.05);
/* Current Theme Variables */
--bg-primary: var(--dark-main);
--accent-color: var(--dark-accent);
--text-color: var(--dark-text);
--card-bg: var(--dark-card);
--transition: all 0.3s ease;
}
/* Theme Classes */
.light-theme {
--bg-primary: var(--light-main);
--accent-color: var(--light-accent);
--text-color: var(--light-text);
--card-bg: var(--light-card);
}

31
website-7sys/css/vision.css Normal file
View File

@@ -0,0 +1,31 @@
/* Vision Section */
.vision {
padding: 5rem 0;
background-color: var(--card-bg);
}
.vision-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.vision-item {
text-align: center;
padding: 2rem;
opacity: 0;
transform: translateY(20px);
transition: var(--transition);
}
.vision-item.visible {
opacity: 1;
transform: translateY(0);
}
.vision-item i {
font-size: 3rem;
color: var(--accent-color);
margin-bottom: 1rem;
}

169
website-7sys/index.html Normal file
View File

@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="7SYS - Professionelle IT-Beratung und Sicherheitslösungen für kleine Unternehmen">
<!-- Social Media Meta Tags -->
<meta property="og:title" content="7SYS - IT-Beratung & Sicherheitslösungen">
<meta property="og:description" content="Zukunftssichere IT-Lösungen für Ihr Unternehmen">
<meta property="og:image" content="https://7sys.de/images/og-image.jpg">
<meta property="og:url" content="https://7sys.de">
<meta name="twitter:card" content="summary_large_image">
<title>7SYS - IT-Beratung & Sicherheitslösungen</title>
<!-- CSS Files -->
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/accessibility.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/hero.css">
<link rel="stylesheet" href="css/buttons.css">
<link rel="stylesheet" href="css/services.css">
<link rel="stylesheet" href="css/vision.css">
<link rel="stylesheet" href="css/contact.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="dark-theme">
<header>
<nav class="main-nav">
<div class="logo" role="banner">7SYS</div>
<button id="theme-toggle" aria-label="Theme wechseln" title="Zwischen Hell- und Dunkel-Modus wechseln">
<i class="fas fa-moon"></i>
<span class="sr-only">Theme wechseln</span>
</button>
</nav>
</header>
<main>
<section class="hero" role="banner">
<div class="stars"></div>
<div class="container">
<h1>IT-Beratung und Sicherheitslösungen</h1>
<p>Zukunftssichere IT-Lösungen für Ihr Unternehmen</p>
<a href="#contact" class="cta-button" role="button">Kontakt aufnehmen</a>
</div>
</section>
<section id="services" class="services" role="region" aria-labelledby="services-title">
<div class="container">
<h2 id="services-title">Unsere Dienstleistungen</h2>
<div class="service-grid">
<article class="service-card" role="article">
<i class="fas fa-laptop-code" aria-hidden="true"></i>
<h3>IT-Beratung und Sicherheitslösungen</h3>
<ul>
<li>Fokus auf kleine Unternehmen</li>
<li>IT-Infrastruktur Beratung</li>
<li>Hardware-Empfehlungen</li>
<li>Netzwerkoptimierung</li>
<li>Firewall-Management</li>
<li>Datenschutz und Zertifizierung</li>
</ul>
</article>
<article class="service-card" role="article">
<i class="fas fa-shield-alt" aria-hidden="true"></i>
<h3>Netzwerk- und Datensicherheit</h3>
<ul>
<li>Sichere Netzwerkkonfiguration</li>
<li>VPN-Einrichtung</li>
<li>Zugriffskontrolle</li>
<li>Firewall-Management</li>
<li>NIS-2-Regelung Implementation</li>
<li>Bedrohungsschutz</li>
</ul>
</article>
<article class="service-card" role="article">
<i class="fas fa-chart-line" aria-hidden="true"></i>
<h3>Proaktives Monitoring</h3>
<ul>
<li>System-Überwachung</li>
<li>Automatisierte Backups</li>
<li>Systemupdates</li>
<li>Frühwarnsystem</li>
<li>Ausfallsicherheit</li>
<li>Verfügbarkeitsoptimierung</li>
</ul>
</article>
</div>
</div>
</section>
<section id="vision" class="vision" role="region" aria-labelledby="vision-title">
<div class="container">
<h2 id="vision-title">Unsere Zukunftsvision</h2>
<div class="vision-grid">
<div class="vision-item">
<i class="fas fa-server" aria-hidden="true"></i>
<h3>Desaster Recovery Rechenzentrum</h3>
<p>Maximale Ausfallsicherheit für Ihre geschäftskritischen Systeme</p>
</div>
<div class="vision-item">
<i class="fas fa-leaf" aria-hidden="true"></i>
<h3>Sustainable & Renewable IT-Infrastructure</h3>
<p>Nachhaltige IT-Lösungen für eine grünere Zukunft</p>
</div>
</div>
</div>
</section>
<section id="contact" class="contact" role="region" aria-labelledby="contact-title">
<div class="container">
<h2 id="contact-title">Kontakt</h2>
<div class="contact-grid">
<form class="contact-form" role="form" aria-label="Kontaktformular">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required
aria-required="true" minlength="2"
pattern="[A-Za-zÄäÖöÜüß\s]+"
title="Bitte geben Sie Ihren Namen ein (nur Buchstaben und Leerzeichen)">
</div>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="email" id="email" name="email" required
aria-required="true"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
title="Bitte geben Sie eine gültige E-Mail-Adresse ein">
</div>
<div class="form-group">
<label for="message">Nachricht</label>
<textarea id="message" name="message" required
aria-required="true" minlength="10"
title="Bitte geben Sie Ihre Nachricht ein (mindestens 10 Zeichen)"></textarea>
</div>
<button type="submit" class="submit-button">
<span class="button-text">Absenden</span>
<span class="loading-spinner" aria-hidden="true"></span>
</button>
<div class="form-feedback" role="alert" aria-live="polite"></div>
</form>
<div class="contact-info">
<h3>Geschäftsdaten</h3>
<p><i class="fas fa-building" aria-hidden="true"></i> 7SYS GmbH</p>
<p><i class="fas fa-map-marker-alt" aria-hidden="true"></i> Musterstraße 123, 12345 Stadt</p>
<p><i class="fas fa-phone" aria-hidden="true"></i> <a href="tel:+49123456789">+49 123 456789</a></p>
<p><i class="fas fa-envelope" aria-hidden="true"></i> <a href="mailto:info@7sys.de">info@7sys.de</a></p>
</div>
</div>
</div>
</section>
</main>
<footer role="contentinfo">
<div class="container">
<p>&copy; 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
<a href="#" class="impressum">Impressum</a>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

138
website-7sys/script.js Normal file
View File

@@ -0,0 +1,138 @@
document.addEventListener('DOMContentLoaded', () => {
initThemeToggle();
initSmoothScroll();
initFormValidation();
initAnimations();
});
function initThemeToggle() {
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
const icon = themeToggle.querySelector('i');
// Check for saved theme preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
body.className = savedTheme;
updateIcon(savedTheme === 'light-theme');
}
// Theme toggle functionality
themeToggle.addEventListener('click', () => {
const isLight = body.classList.toggle('light-theme');
localStorage.setItem('theme', isLight ? 'light-theme' : 'dark-theme');
updateIcon(isLight);
});
function updateIcon(isLight) {
icon.className = isLight ? 'fas fa-moon' : 'fas fa-sun';
}
}
function initSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const headerOffset = 60;
const elementPosition = target.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
}
function initFormValidation() {
const form = document.querySelector('.contact-form');
if (!form) return;
const nameInput = form.querySelector('#name');
const emailInput = form.querySelector('#email');
const messageInput = form.querySelector('#message');
const submitButton = form.querySelector('.submit-button');
const buttonText = submitButton.querySelector('.button-text');
const loadingSpinner = submitButton.querySelector('.loading-spinner');
const feedbackDiv = form.querySelector('.form-feedback');
const validateInput = (input) => {
const isValid = input.checkValidity();
input.classList.toggle('invalid', !isValid);
return isValid;
};
[nameInput, emailInput, messageInput].forEach(input => {
input.addEventListener('input', () => validateInput(input));
input.addEventListener('blur', () => validateInput(input));
});
form.addEventListener('submit', async (e) => {
e.preventDefault();
// Validate all inputs
const isNameValid = validateInput(nameInput);
const isEmailValid = validateInput(emailInput);
const isMessageValid = validateInput(messageInput);
if (!isNameValid || !isEmailValid || !isMessageValid) {
showFeedback('Bitte füllen Sie alle Felder korrekt aus.', false);
return;
}
// Show loading state
submitButton.disabled = true;
buttonText.style.opacity = '0';
loadingSpinner.style.display = 'block';
try {
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1500));
showFeedback('Vielen Dank für Ihre Nachricht! Wir werden uns in Kürze bei Ihnen melden.', true);
form.reset();
} catch (error) {
showFeedback('Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.', false);
} finally {
// Reset button state
submitButton.disabled = false;
buttonText.style.opacity = '1';
loadingSpinner.style.display = 'none';
}
});
function showFeedback(message, isSuccess) {
feedbackDiv.textContent = message;
feedbackDiv.className = `form-feedback ${isSuccess ? 'success' : 'error'}`;
// Auto-hide feedback after 5 seconds
setTimeout(() => {
feedbackDiv.style.display = 'none';
}, 5000);
}
}
function initAnimations() {
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target); // Stop observing once animated
}
});
}, observerOptions);
// Observe all service cards and vision items
document.querySelectorAll('.service-card, .vision-item').forEach(el => {
observer.observe(el);
});
}