web7sys
This commit is contained in:
ben7sys
174
website-7sys/PROMPT.md
Normal file
174
website-7sys/PROMPT.md
Normal 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
11
website-7sys/css/accessibility.css
Normal 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
9
website-7sys/css/animations.css
Normal 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
42
website-7sys/css/buttons.css
Normal 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
112
website-7sys/css/contact.css
Normal 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
22
website-7sys/css/footer.css
Normal 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
44
website-7sys/css/header.css
Normal 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
37
website-7sys/css/hero.css
Normal 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
25
website-7sys/css/reset.css
Normal 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
51
website-7sys/css/responsive.css
Normal 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
58
website-7sys/css/services.css
Normal 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
28
website-7sys/css/variables.css
Normal 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
31
website-7sys/css/vision.css
Normal 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
169
website-7sys/index.html
Normal 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>© 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
138
website-7sys/script.js
Normal 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);
|
||||||
|
});
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user