Clean, clickable cards that expand/collapse on click
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
This commit is contained in:
ben7sys
155
public/README.md
155
public/README.md
@@ -1,99 +1,84 @@
|
||||
Der Default-Theme-Modus wird durch zwei Faktoren bestimmt:
|
||||
# 7SYS Website
|
||||
|
||||
Wenn ein Theme bereits im localStorage gespeichert wurde (unter dem Key 'theme'), wird dieses verwendet
|
||||
Ansonsten wird das System-Theme des Betriebssystems verwendet:
|
||||
Wenn das System auf "Dark Mode" eingestellt ist, wird Dark Mode aktiviert
|
||||
Wenn das System auf "Light Mode" eingestellt ist, wird Light Mode aktiviert
|
||||
Um den Default-Modus zu ändern, gibt es zwei Möglichkeiten:
|
||||
Eine professionelle Website für IT-Lösungen und digitale Souveränität.
|
||||
|
||||
Direkt im Code: In der Konstante DEFAULT_THEME in theme.js kann der Wert von 'light' auf 'dark' geändert werden
|
||||
Im Browser: Den localStorage-Eintrag 'theme' auf 'dark' oder 'light' setzen
|
||||
Das Theme wird beim Laden der Seite sofort initialisiert (durch initThemeEarly()), um ein Flackern zu vermeiden. Danach wird ein Event-Listener eingerichtet, der auf Systemänderungen reagiert und das Theme automatisch anpasst, falls kein benutzerdefiniertes Theme gesetzt wurde.
|
||||
## 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.
|
||||
|
||||
Successfully implemented the following improvements:
|
||||
## Hauptfunktionen
|
||||
|
||||
Mobile Menu Optimization ✓
|
||||
Fixed duplicate script loading issue
|
||||
Improved menu closing behavior after item selection
|
||||
Added smooth scroll for anchor links
|
||||
Enhanced touch targets for better mobile usability
|
||||
Added proper ARIA attributes for accessibility
|
||||
Implemented fade animation for menu transitions
|
||||
Responsive Design Improvements ✓
|
||||
Adjusted menu height to use viewport units
|
||||
Added proper padding for notched phones
|
||||
Improved touch target sizes
|
||||
Enhanced menu item spacing and interaction feedback
|
||||
Fixed menu scrolling on long content
|
||||
Performance & Accessibility Enhancements ✓
|
||||
Added meta description for SEO
|
||||
Implemented proper aria-expanded states
|
||||
Added smooth animations with performance considerations
|
||||
Improved event listener efficiency
|
||||
Added empty favicon to prevent 404 errors
|
||||
Code Quality Improvements ✓
|
||||
Removed duplicate code
|
||||
Improved event handling
|
||||
Enhanced error handling
|
||||
Better organization of CSS media queries
|
||||
Added proper touch device detection
|
||||
All changes maintain existing functionality while improving user experience, accessibility, and performance. The mobile menu now behaves more naturally, with proper closing behavior and smooth transitions.
|
||||
- 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
|
||||
|
||||
Current Implementation Analysis:
|
||||
- **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)
|
||||
|
||||
Theme System Architecture
|
||||
CSS Variables (variables.css): ✓ Well-structured light/dark theme variables ✓ Logical separation of common tokens ✓ Clear naming conventions ✓ Efficient use of CSS custom properties
|
||||
Theme Switching (theme.js):
|
||||
Robust Implementation: ✓ IIFE for encapsulation ✓ Early initialization prevents FOUC ✓ System theme preference detection ✓ Local storage persistence ✓ Comprehensive error handling
|
||||
CSS Structure:
|
||||
Modular Organization: ✓ Separate files for different concerns ✓ Clean inheritance patterns ✓ Proper cascade management ✓ Efficient variable usage
|
||||
Integration:
|
||||
Clean Component Integration: ✓ Theme toggle properly placed in header ✓ Smooth transitions between themes ✓ Proper script/style loading order
|
||||
Strengths to Preserve:
|
||||
- **Architektur:**
|
||||
- Komponenten-basierte Struktur
|
||||
- Modulares CSS-System
|
||||
- Responsive Design mit CSS Variables
|
||||
- Progressive Enhancement
|
||||
|
||||
The modular CSS architecture
|
||||
The CSS variables-based theming approach
|
||||
The early theme initialization
|
||||
The system preference detection
|
||||
Minor Optimization Suggestions:
|
||||
## Setup/Installation
|
||||
|
||||
Theme Switching Performance:
|
||||
1. Repository klonen:
|
||||
```bash
|
||||
git clone [repository-url]
|
||||
```
|
||||
|
||||
/* Add to variables.css */
|
||||
:root {
|
||||
/* Add GPU acceleration for theme transitions */
|
||||
--theme-transition: color var(--transition-speed) ease,
|
||||
background-color var(--transition-speed) ease;
|
||||
--gpu-accelerated: translate3d(0, 0, 0);
|
||||
}
|
||||
Theme Toggle Accessibility:
|
||||
2. Projektverzeichnis öffnen:
|
||||
```bash
|
||||
cd web7syspub
|
||||
```
|
||||
|
||||
/* Add to header.css */
|
||||
.theme-toggle:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
Theme Persistence Enhancement:
|
||||
3. Einen lokalen Webserver starten, zum Beispiel mit Python:
|
||||
```bash
|
||||
# Python 3
|
||||
python -m http.server 8000
|
||||
```
|
||||
|
||||
// Add to theme.js persistTheme function
|
||||
function persistTheme() {
|
||||
try {
|
||||
const currentTheme = getCurrentTheme();
|
||||
localStorage.setItem(THEME_STORAGE_KEY, currentTheme);
|
||||
// Add theme to body for better SSR support
|
||||
document.body.dataset.theme = currentTheme;
|
||||
} catch (error) {
|
||||
console.warn('Theme persistence error:', error);
|
||||
}
|
||||
}
|
||||
These suggestions maintain the existing architecture while adding:
|
||||
4. Website im Browser öffnen:
|
||||
```
|
||||
http://localhost:8000/public
|
||||
```
|
||||
|
||||
Improved performance through GPU acceleration
|
||||
Enhanced accessibility
|
||||
Better server-side rendering support
|
||||
The current implementation is well-structured and follows best practices. The suggested optimizations are minimal and non-invasive, preserving the existing functionality while making subtle improvements to performance and accessibility.
|
||||
## 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
|
||||
|
||||
Reference in New Issue
Block a user