README: Umfassende Dokumentation aller Features und Dateien

README.md

@@ -2,57 +2,190 @@
 
 Ein interaktives Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der **PH Weingarten**.
 
-🌐 [https://isa4.edumake.de](https://isa4.edumake.de/index.html)
+🌐 **Live-Website:** [https://isa4.edumake.de](https://isa4.edumake.de/index.html)
 
 ---
 
-## Inhalt
+## 📑 Seitenstruktur & Inhalt
 
-| Datei | Beschreibung |
+### Hauptseiten
-|-------|--------------|
+
-| `index.html` | Startseite mit Projektübersicht |
+| Datei | Beschreibung | Features |
-| `eis_projekt.html` | Tech-Stack, Features und Lernziele |
+|-------|-------------|----------|
-| `team.html` | Teamvorstellung und Fetch-API-Demo |
+| `index.html` | **Startseite** – Projektübersicht mit Hero-Section | Begrüßung nach Tageszeit, Kinetic Hero Animation, Feature-Cards |
-| `ueber_uns.html` | Mission und Teamhintergrund |
+| `eis_projekt.html` | **Projekt-Details** – Tech-Stack und Lernziele | Technologie-Übersicht, Lerninhalte |
-| `kontakt.html` | Kontaktformular |
+| `team.html` | **Team-Seite** – Vorstellung des Entwickler-Teams | Fetch-API-Demo, Team-Member-Profile |
-| `quiz.html` | Mini-Quiz über Web-Entwicklung |
+| `ueber_uns.html` | **Über uns** – Mission und Teamhintergrund | Projektbeschreibung, Teamgeschichte |
-| `impressum.html` | Rechtliche Pflichtangaben |
+| `kontakt.html` | **Kontaktformular** – Formular mit Validierung | Eingabe-Validierung, Fehler-Handling, Success-Meldungen |
+| `impressum.html` | **Rechtliche Informationen** | Impressum, Datenschutz |
+
+### Übungsseiten
+
+| Datei | Beschreibung | Technologie |
+|-------|-------------|-------------|
+| `quiz.html` | **Mini-Quiz** – 3 interaktive Fragen | JavaScript (ES6+), DOM-Manipulation |
+| `notenrechner.html` | **Notenrechner** – Berechnung von Schulnoten | JavaScript (Funktionen) |
+| `notenrechner-dom.html` | **Notenrechner (DOM)** – Erweiterte Version | JavaScript (DOM-API) |
+| `textanalyse.html` | **Text-Analyse** – Wort- & Zeichenzähler | JavaScript (String-Methoden) |
+| `kanban.html` | **Kanban Board** – Task-Management | JavaScript (Array-Methoden, Event-Handling) |
 
 ---
 
-## Features
+## ✨ Features & Funktionalität
 
-- **Begrüßung nach Tageszeit** (js/script.js):
+### 1. **Begrüßung nach Tageszeit** 
-  - Zeigt je nach Uhrzeit einen anderen Text
+- **Dateien:** `js/script.js`, `css/style.css`, `index.html`
-  - in einer anderen Farbe (index.html, css/style.css)
+- **Beschreibung:** Zeigt je nach aktueller Uhrzeit eine personalisierte Begrüßung
+- **Details:**
+  - **Morgens (vor 10 Uhr):** "Guten Morgen!" in Orange (#d97706)
+  - **Tagsüber (10-18 Uhr):** "Hallo, schön dass du da bist!" in Grün (#16a34a)
+  - **Abends (nach 18 Uhr):** "Guten Abend!" in Blau (#4338ca)
+- **Implementierung:** Inline-Skript im HTML für garantierte Ausführung
 
-- **Mini-Quiz** (quiz.html, js/quiz.js):
+### 2. **Mini-Quiz** 
-  - 3 interaktive Fragen zu Web-Entwicklung und PH Weingarten
+- **Dateien:** `quiz.html`, `js/quiz.js`, `css/style.css`
-  - Direktes Feedback für jede Antwort (richtig/falsch)
+- **Beschreibung:** Interaktives Quiz mit 3 Fragen zu Web-Entwicklung und PH Weingarten
-  - Punktezähler und Auswertung am Ende
+- **Details:**
-  - Responsive Design mit ansprechender Benutzerführung
+  - ✅ 3 Multiple-Choice-Fragen
-  - Verlinkt in der Navigation unter "Übungen"
+  - ✅ Direkte Feedback-Anzeige (richtig/falsch)
+  - ✅ Punktezähler (0-3 Punkte möglich)
+  - ✅ Auswertung mit motivierenden Meldungen
+  - ✅ Progress-Bar zeigt Fortschritt visuell
+  - ✅ "Nochmal spielen"-Funktion
+  - ✅ Responsive Design
+- **Verknüpfung:** Navigation → Dropdown "Übungen" → "Mini-Quiz"
+
+### 3. **Navigation & Layout**
+- **Dateien:** `components/navbar.html`, `js/navbar.js`
+- **Features:**
+  - ✅ Sticky Header mit Gradient-Hintergrund
+  - ✅ Responsive Hamburger-Menu für Mobile
+  - ✅ Dropdown-Menü für "Übungen"
+  - ✅ Dark-Mode Toggle
+  - ✅ PDF-Download Button
+  - ✅ Logo mit Animation
+
+### 4. **Kontaktformular**
+- **Datei:** `kontakt.html`
+- **Features:**
+  - ✅ Formular-Validierung (Name, Email, Betreff, Nachricht)
+  - ✅ Fehler-Handling mit Fehlermeldungen
+  - ✅ Success-Meldung nach Submit
+  - ✅ Datenschutz-Checkbox
+  - ✅ Responsive Design
+
+### 5. **Weitere Übungen**
+- **Notenrechner:** Berechnet Schulnoten aus Punkte
+- **Textanalyse:** Zählt Wörter und Zeichen
+- **Kanban Board:** Task-Management Tool
 
 ---
 
-## Tech-Stack
+## 📁 Dateistruktur
 
-- **HTML5** – Seitenstruktur
+```
-- **CSS3** – Styling und Responsive Layout
+public_html/
-- **JavaScript (ES6+)** – Interaktivität und Fetch API
+├── index.html                    # Startseite
-- **Git** – Versionskontrolle
+├── eis_projekt.html             # Projekt-Details
+├── team.html                    # Team-Seite
+├── ueber_uns.html               # Über uns
+├── kontakt.html                 # Kontaktformular
+├── impressum.html               # Impressum
+├── quiz.html                    # Mini-Quiz
+├── notenrechner.html            # Notenrechner
+├── notenrechner-dom.html        # Notenrechner (DOM)
+├── textanalyse.html             # Textanalyse
+├── kanban.html                  # Kanban Board
+│
+├── css/
+│   └── style.css               # Hauptstylesheet (2200+ Zeilen)
+│       ├── Reset & Basics
+│       ├── Header & Navigation
+│       ├── Hero Section (Kinetic)
+│       ├── Feature Cards (Kinetic Grid)
+│       ├── Quiz Styles
+│       ├── Form Styles
+│       ├── Dark Mode
+│       └── Responsive Breakpoints
+│
+├── js/
+│   ├── script.js               # Haupt-Skript (Begrüßung, Kontaktformular)
+│   ├── navbar.js               # Navigation (Hamburger Menu, Dark Mode)
+│   ├── quiz.js                 # Quiz-Logik
+│   ├── api-users.js            # Fetch-API Integration
+│   ├── kanban.js               # Kanban Board
+│   ├── notenrechner.js         # Notenrechner
+│   ├── notenrechner-dom.js     # Notenrechner (DOM)
+│   └── textanalyse.js          # Textanalyse
+│
+├── components/
+│   └── navbar.html             # Navigation Component
+│
+├── img/                        # Bilder & Icons
+├── assets/                     # Downloads & Ressourcen
+└── README.md                   # Diese Datei
+```
 
 ---
 
-## Mitwirkende
+## 🛠️ Tech-Stack
 
-| Name | Rolle |
+| Kategorie | Technologie |
-|------|-------|
+|-----------|-------------|
-| Dylan | Frontend-Entwickler (HTML, CSS, JS, UI/UX) |
+| **Frontend** | HTML5, CSS3 (2200+ Zeilen), JavaScript (ES6+) |
-| Leon | Backend-Entwickler (JS, APIs, Datenbanken) |
+| **Styling** | Grid, Flexbox, CSS Gradients, Animations, Media Queries |
+| **JavaScript** | DOM-API, Event-Handling, Array-Methoden, Fetch-API |
+| **Design** | Responsive Design, Dark Mode, Kinetic Animations |
+| **Versionskontrolle** | Git, GitHub-Integration |
 
 ---
 
-## Lizenz
+## 🎨 Design-Highlights
+
+- **Kinetic Hero Section:** Animierte Blobs mit floating-Effect
+- **Gradient Backgrounds:** Moderne, farbenfrohe Gradienten
+- **Responsive Layout:** Mobile-First Approach
+- **Dark Mode:** Vollständige Dark-Mode Unterstützung
+- **Smooth Animations:** Transitions und Keyframe-Animationen
+- **Accessible Colors:** Gute Kontraste und Lesbarkeit
+
+---
+
+## 📊 Statistiken
+
+- **HTML-Dateien:** 11
+- **CSS-Zeilen:** 2200+
+- **JavaScript-Dateien:** 8
+- **Komponenten:** 1 (navbar)
+- **Features:** 5+ interaktive Features
+- **Quiz-Fragen:** 3
+- **Übungen:** 5
+
+---
+
+## 👥 Mitwirkende
+
+| Name | Rolle | Verantwortung |
+|------|-------|---------------|
+| Dylan | Frontend-Entwickler | HTML, CSS, UI/UX, Interaction Design |
+| Leon | Backend-Entwickler | JavaScript, APIs, Datenlogik |
+
+---
+
+## 🚀 Live-Deployment
+
+- **Hosting:** edumake.de
+- **URL:** https://isa4.edumake.de
+- **Deployment:** Git → Automated Pull
+- **Browser:** Modern Browsers (Chrome, Firefox, Safari, Edge)
+
+---
+
+## 📝 Lizenz
 
 Dieses Projekt steht unter der MIT-Lizenz.
+
+---
+
+**Zuletzt aktualisiert:** Juni 2026  
+**Status:** ✅ In aktiver Entwicklung