95 lines
2.7 KiB
Markdown
95 lines
2.7 KiB
Markdown
ich möchte ein space-theme black-grey, und die möglichkeit für den user ein dark & white theme+
|
|
|
|
# SHOT-2
|
|
Erstelle eine moderne, futuristische One-Page Webseite als digitale Visitenkarte für das IT-Unternehmen 7SYS mit Space-Theme und Theme-Switcher. Die Seite soll responsive sein und folgende Elemente enthalten:
|
|
|
|
1. Theme-Switcher:
|
|
- Toggle-Button für Dark/Light Mode
|
|
- Smooth Transition zwischen den Themes
|
|
- Persistentes Theme (speichern in localStorage)
|
|
|
|
2. Header:
|
|
- Futuristisches Logo "7SYS"
|
|
- Ein Theme-Toggle-Button in der Navigation
|
|
- Subtile Weltraum-Animationen (z.B. floating particles oder twinkling stars im Hintergrund)
|
|
|
|
3. Hero-Section:
|
|
- Space-inspiriertes Layout mit subtilen Sternen/Galaxien im Hintergrund
|
|
- Futuristischer Slogan
|
|
- Leuchtender "Kontakt" Call-to-Action Button im Neon-Stil
|
|
|
|
4. Hauptbereich:
|
|
- 3-4 Icons mit Space/Tech-Design für die wichtigsten Dienstleistungen
|
|
- Holographischer oder Neon-Effekt für Hover-States
|
|
- Moderne Grid-Layout mit schwebenden Elementen
|
|
|
|
5. Kontaktbereich:
|
|
- Futuristisches Kontaktformular
|
|
- Pulsierende Social Media Icons
|
|
- Minimalistischer Footer mit Impressum-Link
|
|
|
|
Technische Anforderungen:
|
|
- HTML, CSS und minimales JavaScript für Theme-Switching
|
|
- CSS Custom Properties für Theme-Farben
|
|
- Moderne CSS-Features (Flexbox/Grid, Animations)
|
|
- Mobile-First Ansatz
|
|
- Optimierte Performance
|
|
- Semantic HTML
|
|
|
|
Design-Richtlinien:
|
|
|
|
Dark Theme (Standard):
|
|
- Hauptfarbe: Tiefschwarz (#030303)
|
|
- Akzentfarbe: Neon Blau (#00f3ff)
|
|
- Text: Hellgrau bis Weiß (#f0f0f0)
|
|
- Subtile Blautöne für Tiefenwirkung
|
|
- Sternenfeld-Hintergrund
|
|
|
|
Light Theme:
|
|
- Hauptfarbe: Reines Weiß (#ffffff)
|
|
- Akzentfarbe: Space Blau (#1a365d)
|
|
- Text: Dunkelgrau (#333333)
|
|
- Subtile graue Abstufungen
|
|
- Dezenter Grid-Hintergrund
|
|
|
|
Allgemein:
|
|
- Futuristische Sans-serif Schriftart (z.B. 'Space Grotesk' oder 'Orbitron' für Überschriften)
|
|
- Großzügiger Whitespace
|
|
- Smooth Transitions (0.3s) für alle Hover und Theme-Wechsel
|
|
- Subtile Parallax-Effekte
|
|
- Glassmorphism-Elemente
|
|
|
|
JavaScript-Funktionen:
|
|
```javascript
|
|
// Theme-Switching Logik
|
|
// Local Storage Verwaltung
|
|
// Optionale Partikel-Animation
|
|
```
|
|
|
|
CSS-Variablen Struktur:
|
|
```css
|
|
:root {
|
|
/* Light Theme Variablen */
|
|
--light-bg: #ffffff;
|
|
--light-text: #333333;
|
|
--light-accent: #1a365d;
|
|
|
|
/* Dark Theme Variablen */
|
|
--dark-bg: #030303;
|
|
--dark-text: #f0f0f0;
|
|
--dark-accent: #00f3ff;
|
|
}
|
|
```
|
|
|
|
Bitte erstelle den kompletten Code in drei separaten Blöcken:
|
|
1. HTML
|
|
2. CSS (mit Theme-Variationen)
|
|
3. JavaScript (Theme-Switching)
|
|
|
|
Besondere Anforderungen:
|
|
- Smooth Theme Transitions
|
|
- Zugängliche Kontrasteverhältnisse in beiden Themes
|
|
- Performante Animationen
|
|
- Responsive Design für alle Bildschirmgrößen
|
|
- SEO-optimierte Struktur
|
|
- Barrierefreiheit (ARIA-Labels für Theme-Switcher) |