diff --git a/website-7sys/PROMPT.md b/website-7sys/PROMPT.md new file mode 100644 index 0000000..14a18ce --- /dev/null +++ b/website-7sys/PROMPT.md @@ -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. + + + diff --git a/website-7sys/css/accessibility.css b/website-7sys/css/accessibility.css new file mode 100644 index 0000000..2d0c74a --- /dev/null +++ b/website-7sys/css/accessibility.css @@ -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; +} diff --git a/website-7sys/css/animations.css b/website-7sys/css/animations.css new file mode 100644 index 0000000..c10f8f1 --- /dev/null +++ b/website-7sys/css/animations.css @@ -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); } +} diff --git a/website-7sys/css/buttons.css b/website-7sys/css/buttons.css new file mode 100644 index 0000000..d7ba04d --- /dev/null +++ b/website-7sys/css/buttons.css @@ -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; +} diff --git a/website-7sys/css/contact.css b/website-7sys/css/contact.css new file mode 100644 index 0000000..826e733 --- /dev/null +++ b/website-7sys/css/contact.css @@ -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); +} diff --git a/website-7sys/css/footer.css b/website-7sys/css/footer.css new file mode 100644 index 0000000..b666cf5 --- /dev/null +++ b/website-7sys/css/footer.css @@ -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); +} diff --git a/website-7sys/css/header.css b/website-7sys/css/header.css new file mode 100644 index 0000000..089a546 --- /dev/null +++ b/website-7sys/css/header.css @@ -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; +} diff --git a/website-7sys/css/hero.css b/website-7sys/css/hero.css new file mode 100644 index 0000000..7c886ec --- /dev/null +++ b/website-7sys/css/hero.css @@ -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; +} diff --git a/website-7sys/css/reset.css b/website-7sys/css/reset.css new file mode 100644 index 0000000..81ec95c --- /dev/null +++ b/website-7sys/css/reset.css @@ -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; +} diff --git a/website-7sys/css/responsive.css b/website-7sys/css/responsive.css new file mode 100644 index 0000000..187bbec --- /dev/null +++ b/website-7sys/css/responsive.css @@ -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; + } +} diff --git a/website-7sys/css/services.css b/website-7sys/css/services.css new file mode 100644 index 0000000..d3cf01d --- /dev/null +++ b/website-7sys/css/services.css @@ -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; +} diff --git a/website-7sys/css/variables.css b/website-7sys/css/variables.css new file mode 100644 index 0000000..e0f07a9 --- /dev/null +++ b/website-7sys/css/variables.css @@ -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); +} diff --git a/website-7sys/css/vision.css b/website-7sys/css/vision.css new file mode 100644 index 0000000..9fe6729 --- /dev/null +++ b/website-7sys/css/vision.css @@ -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; +} diff --git a/website-7sys/index.html b/website-7sys/index.html new file mode 100644 index 0000000..b5714ee --- /dev/null +++ b/website-7sys/index.html @@ -0,0 +1,169 @@ + + + + + + + + + + + + + + + 7SYS - IT-Beratung & Sicherheitslösungen + + + + + + + + + + + + + + + + +
+ +
+ +
+ + +
+
+

Unsere Dienstleistungen

+ +
+
+ +

IT-Beratung und Sicherheitslösungen

+
    +
  • Fokus auf kleine Unternehmen
    • +
  • IT-Infrastruktur Beratung
    • +
  • Hardware-Empfehlungen
    • +
  • Netzwerkoptimierung
    • +
  • Firewall-Management
    • +
  • Datenschutz und Zertifizierung
    • +
+
+ +
+ +

Netzwerk- und Datensicherheit

+
    +
  • Sichere Netzwerkkonfiguration
    • +
  • VPN-Einrichtung
    • +
  • Zugriffskontrolle
    • +
  • Firewall-Management
    • +
  • NIS-2-Regelung Implementation
    • +
  • Bedrohungsschutz
    • +
+
+ +
+ +

Proaktives Monitoring

+
    +
  • System-Überwachung
    • +
  • Automatisierte Backups
    • +
  • Systemupdates
    • +
  • Frühwarnsystem
    • +
  • Ausfallsicherheit
    • +
  • Verfügbarkeitsoptimierung
    • +
+
+
+
+
+ +
+
+

Unsere Zukunftsvision

+
+
+ +

Desaster Recovery Rechenzentrum

+

Maximale Ausfallsicherheit für Ihre geschäftskritischen Systeme

+
+
+ +

Sustainable & Renewable IT-Infrastructure

+

Nachhaltige IT-Lösungen für eine grünere Zukunft

+
+
+
+
+ +
+
+

Kontakt

+
+
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+

Geschäftsdaten

+

7SYS GmbH

+

Musterstraße 123, 12345 Stadt

+

+49 123 456789

+

info@7sys.de

+
+
+
+
+
+ + + + + + diff --git a/website-7sys/script.js b/website-7sys/script.js new file mode 100644 index 0000000..3543ce7 --- /dev/null +++ b/website-7sys/script.js @@ -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); + }); +}