feeaf093d5
Independent operation of each card Smooth animations for better user experience Mobile-friendly design with appropriate spacing and touch targets Keyboard accessibility (Escape key support) Click-outside behavior to close cards Removed complex checkbox-based implementation in favor of simple JavaScript toggling
85 lines
2.2 KiB
Markdown
85 lines
2.2 KiB
Markdown
# 7SYS Website
|
|
|
|
Eine professionelle Website für IT-Lösungen und digitale Souveränität.
|
|
|
|
## Projektbeschreibung
|
|
|
|
Diese Website dient als digitale Präsenz von 7SYS, einem spezialisierten IT-Dienstleister mit Fokus auf maßgeschneiderte IT-Lösungen und digitale Souveränität. Die Plattform präsentiert das Leistungsportfolio und die Expertise im Bereich IT-Infrastruktur, Systemadministration und Automatisierung.
|
|
|
|
## Hauptfunktionen
|
|
|
|
- Responsive Single-Page Design
|
|
- Dynamisches Theme-System (Hell/Dunkel)
|
|
- Interaktive Service-Cards mit detaillierten Informationen
|
|
- Modulare Komponenten-Architektur
|
|
- Optimierte Performance durch CSS-Animationen
|
|
- Barrierefreie Benutzeroberfläche
|
|
|
|
## Technologien
|
|
|
|
- **Frontend:**
|
|
- HTML5
|
|
- CSS3 (modulare Struktur mit separaten Dateien für bessere Wartbarkeit)
|
|
- Vanilla JavaScript (components.js, theme.js)
|
|
- Font Awesome Icons
|
|
- Google Fonts (Montserrat, Open Sans)
|
|
|
|
- **Architektur:**
|
|
- Komponenten-basierte Struktur
|
|
- Modulares CSS-System
|
|
- Responsive Design mit CSS Variables
|
|
- Progressive Enhancement
|
|
|
|
## Setup/Installation
|
|
|
|
1. Repository klonen:
|
|
```bash
|
|
git clone [repository-url]
|
|
```
|
|
|
|
2. Projektverzeichnis öffnen:
|
|
```bash
|
|
cd web7syspub
|
|
```
|
|
|
|
3. Einen lokalen Webserver starten, zum Beispiel mit Python:
|
|
```bash
|
|
# Python 3
|
|
python -m http.server 8000
|
|
```
|
|
|
|
4. Website im Browser öffnen:
|
|
```
|
|
http://localhost:8000/public
|
|
```
|
|
|
|
## Projektstruktur
|
|
|
|
```
|
|
public/
|
|
├── components/ # Wiederverwendbare HTML-Komponenten
|
|
├── css/ # Modulare CSS-Dateien
|
|
│ ├── animations.css
|
|
│ ├── base.css
|
|
│ ├── components.css
|
|
│ ├── layout.css
|
|
│ └── variables.css
|
|
├── js/ # JavaScript-Module
|
|
│ ├── components.js
|
|
│ └── theme.js
|
|
└── index.html # Hauptseite
|
|
```
|
|
|
|
## Features im Detail
|
|
|
|
- **Responsive Design:** Optimierte Darstellung auf allen Geräten
|
|
- **Themensystem:** Automatische Anpassung an Systemeinstellungen
|
|
- **Modulare CSS-Struktur:** Verbesserte Wartbarkeit und Performance
|
|
- **Barrierefreiheit:** Semantische HTML-Struktur und ARIA-Attribute
|
|
- **Performance:** Optimierte Ladezeiten durch modulare Ressourcen
|
|
|
|
## Kontakt
|
|
|
|
- E-Mail: info@7sys.de
|
|
- Signal: Verfügbar über Website-Link
|