# EIS Projekt – Entwicklung interaktiver Softwareanwendungen

Ein interaktives Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der **PH Weingarten**.

🌐 **Live-Website:** [https://isa4.edumake.de](https://isa4.edumake.de/index.html)

---

## 📑 Seitenstruktur & Inhalt

### Hauptseiten

| Datei | Beschreibung | Features |
|-------|-------------|----------|
| `index.html` | **Startseite** – Projektübersicht mit Hero-Section | Begrüßung nach Tageszeit, Kinetic Hero Animation, Feature-Cards |
| `eis_projekt.html` | **Projekt-Details** – Tech-Stack und Lernziele | Technologie-Übersicht, Lerninhalte |
| `team.html` | **Team-Seite** – Vorstellung des Entwickler-Teams | Fetch-API-Demo, Team-Member-Profile |
| `ueber_uns.html` | **Über uns** – Mission und Teamhintergrund | Projektbeschreibung, Teamgeschichte |
| `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 & Funktionalität

### 1. **Begrüßung nach Tageszeit** 
- **Dateien:** `js/script.js`, `css/style.css`, `index.html`
- **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

### 2. **Mini-Quiz** 
- **Dateien:** `quiz.html`, `js/quiz.js`, `css/style.css`
- **Beschreibung:** Interaktives Quiz mit 3 Fragen zu Web-Entwicklung und PH Weingarten
- **Details:**
  - ✅ 3 Multiple-Choice-Fragen
  - ✅ 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

---

## 📁 Dateistruktur

```
public_html/
├── index.html                    # Startseite
├── 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
```

---

## 🛠️ Tech-Stack

| Kategorie | Technologie |
|-----------|-------------|
| **Frontend** | HTML5, CSS3 (2200+ Zeilen), JavaScript (ES6+) |
| **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 |

---

## 🎨 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