**TITLE Projektaufgabe 1 Zusatzteil B - Deployment in Unterverzeichnis mit zentraler Projektübersicht**

**Ausgangspunkt**
Ihr habt euren Webauftritt für PowerTech Energiesysteme erstellt und lokal mit Nginx gehostet sowie öffentlich zugänglich gemacht. In dieser Erweiterung sollt ihr die Webseite so umbauen, dass sie aus einem Unterverzeichnis des Webservers funktioniert. Dadurch entsteht für jedes Projekt ein abgeschlossener Bereich. Die Hauptseite des Webservers listet die Projekte für Besucher auf.

**Arbeitsform**
Wie bisher, in euren Projektgruppen. Jede Gruppe arbeitet in einem eigenen Unterverzeichnis (z.B. `projekte/gruppeX/`).

**Ziel**
Am Ende erstellt jede Gruppe:

- Eine umgebaute Webseite, die relativ unter `/projekte/gruppeX/` funktioniert (alle Links, CSS, Bilder relativ).
- Eine **Hauptseite** (`index.html` im Root-Verzeichnis), die die Projekte auflistet (z.B. Link zur Demo und zum Download).
- Ein erweitertes ZIP-Paket: Projektordner + `projektaufgabe.md` (kopiert aus den Aufgaben) + eure Dokumentation (z.B. `dokumentation.md`).
- Optional: Unterscheidung `gruppenprojektfassung.zip` und `persoenlichefassung.zip` (bei Änderungen) oder eigenes Verzeichnis – euch überlassen.

**Technische Vorgaben**

**1. Umbau der Webseite für Unterverzeichnis**

- Verschiebt den gesamten Webauftritt in `projekte/gruppeX/`.
- Alle internen Links (Navigation, Bilder, CSS/JS falls genutzt) **relativ** machen:
    - Statt `historie.html` → `historie.html` (relativ).
    - Statt `/assets/bild.jpg` → `assets/bild.jpg`.
- Testet lokal: Webseite unter `http://localhost:8080/projekte/gruppeX/` aufrufbar (z.B. mit Laragon/Nginx).
- Behaltet HTML5-Standards, Navigation, Struktur aus Aufgabe 1 bei.

**2. Erstellung der Hauptseite (Root: index.html)**

- Erstellt `/index.html` als zentrale Übersicht.
- Pflichtinhalte:
    - H1: "PowerTech-Projekte – Umschulung Webentwicklung".
    - Tabelle mit Projekten (Spalten: Gruppe, Demo-Link, Download-Link). Beispiel:

| Gruppe | Demo | Download |
| :-- | :-- | :-- |
| Gruppe A | [projekte/gruppeA/](projekte/gruppeA/) | [gruppeA.zip](downloads/gruppeA.zip) |
| Gruppe B | [projekte/gruppeB/](projekte/gruppeB/) | [gruppeB.zip](downloads/gruppeB.zip) |

- Fügt Platzhalter für zukünftige Projekte hinzu.
- Navigation: Link zurück zur Hauptseite auf allen Projektseiten (relativ: `../`).
- Responsive Design optional, aber einheitliches Layout empfohlen.[^1]

**3. ZIP-Erstellung und Downloads**

- ZIP-Inhalt: `projekte/gruppeX/` + `projektaufgabe.md` (kopiert Aufgabe 1+2+3) + `dokumentation.md` (Änderungen, Herausforderungen, Learnings).
- Ordnerstruktur im ZIP:

```
gruppeX.zip
├── projekte/
│   └── gruppeX/
│       ├── index.html
│       ├── ... (alle HTML, assets)
├── projektaufgabe.md
└── dokumentation.md
```

- Platziert ZIPs in `/downloads/` und verlinkt auf Hauptseite.
- Optional: Zweites ZIP für persönliche Version oder separates Verzeichnis `/projekte/persoenlich-gruppeX/`.

**4. Test und Abgabe**

- Testet: Hauptseite → Projekt-Demo → Download funktioniert.
- ZIP per E-Mail an sven.spitzmacher@daa.de.
- Nach Abgabe: Alle ZIPs/Demos öffentlich auf Cloud (für alle Teilnehmer, klassenübergreifend).

**Gemeinsame Anforderungen**

- Code sauber, kommentiert, validiert (z.B. VS Code Live Preview).
- Dokumentation: Erklärt relative Pfade, Herausforderungen beim Umbau.
- Zukünftige Aufgaben: Gleiches Schema – Unterverzeichnis, Hauptseite erweitern, ZIP mit Aufgaben+Doku.

