# Glück Auf - Persönliche Webseite

Statisches Webprojekt mit mehreren HTML-Seiten, gemeinsamem Design, Dark-Mode-Umschalter und kleinen JavaScript-Übungen. Erstellt als persönliches Lernprojekt.

## Pfad auf dem Server

```text
/home/isa7/public_html
```

## Projektstruktur

```text
public_html/
├── index.html              Startseite
├── ueber_mich.html         Persönliche Vorstellungsseite
├── eis_projekt.html        Projektseite
├── kontakt.html            Kontaktseite mit gestaltetem Formular-Layout
├── impressum.html          Impressum mit fiktiven Platzhalterangaben
├── README.md               Diese Datei
│
├── css/
│   └── style.css           Zentrales Stylesheet für alle Seiten
│
├── js/
│   ├── script.js           Gemeinsames JavaScript für Dark Mode und Dropdown
│   ├── notenrechner.js     Logik für den Notenrechner
│   └── textanalyse.js      Logik für die Textanalyse
│
├── img/
│   ├── Hintergrund.jpg     Hintergrundbild für den Hero-Bereich
│   └── logo.png            Favicon / Logo
│
└── uebungen/
    ├── notenrechner.html   Übungsseite: Noten berechnen
    └── textanalyse.html    Übungsseite: Text analysieren
```

## Seiten

### `index.html` - Startseite

- Einstiegspunkt der Website
- Hero-Bereich mit Hintergrundbild
- Begrüßungstext mit Link zu `ueber_mich.html`
- Drei verlinkte Cards: Über mich, Projekte und Kontakt
- Navigation mit Dropdown für die Übungsseiten
- Footer mit Links zu Impressum und Kontakt

### `ueber_mich.html` - Über mich

- Persönliche Vorstellungsseite
- Aktuell mit kurzen Platzhaltertexten
- Skill-Badges für HTML, CSS, JavaScript, Python, Webdesign und Linux
- Nutzt das gemeinsame Layout, die Navigation und den Dark Mode

### `eis_projekt.html` - Projektseite

- Seite für das Glück-Auf-Lernprojekt
- Projektinhalt ist aktuell noch als Platzhalter vorbereitet
- Nutzt das gemeinsame Layout, die Navigation und den Dark Mode

### `kontakt.html` - Kontakt

- Kontaktseite mit gestaltetem Formularbereich
- Eingabefelder für Name, E-Mail und Nachricht
- Hinweis, dass das Formular aktuell nur ein Layout ist
- Absenden-Button ist aktuell nur visuell vorhanden
- Es gibt noch keine Backend-Anbindung und keine Formularübertragung

### `impressum.html` - Impressum

- Impressumsseite für ein privates Lernprojekt
- Enthält fiktive Platzhalterangaben
- Enthält Abschnitte zu Angaben, Kontakt, Verantwortung, Haftung, Links, Urheberrecht und Hinweis
- Die Angaben sind nicht für eine öffentliche Veröffentlichung gedacht

### `uebungen/notenrechner.html` - Notenrechner

- Übungsseite für eine kleine JavaScript-Anwendung
- Eingaben: erreichte Punkte und maximale Punkte
- Berechnet Prozentwert und Note
- Zeigt Ergebnis-Cards und einen farbigen Fortschrittsbalken an

### `uebungen/textanalyse.html` - Textanalyse

- Übungsseite für eine kleine JavaScript-Anwendung
- Analysiert eingegebenen Text
- Zählt Zeichen, Wörter, Großbuchstaben und Sätze
- Zeigt die Ergebnisse in Cards an

## Stylesheet

### `css/style.css`

Das zentrale Stylesheet wird von allen Seiten eingebunden.

Es enthält:

- Grundlayout für Body, Navigation, Hero-Bereiche, Cards, Buttons und Footer
- CSS-Variablen für Farben und Overlays
- Google-Fonts-Anbindung für **Bebas Neue** und **Barlow**
- Einblendanimation `fadeUp`
- Dark-Mode-Styles über `body.dark`
- Dropdown-Styles für das Übungen-Menü
- Spezielle Styles für Kontaktformular und Impressum
- Wiederverwendbare Seitenklassen wie `.page-hero`, `.page`, `.cards`, `.card`, `.btn`, `.skill`

## JavaScript

### `js/script.js`

Gemeinsames JavaScript für alle Seiten.

Funktionen:

- Aktiviert den Dark-Mode-Umschalter
- Speichert die Dark-Mode-Auswahl in `localStorage`
- Aktualisiert den Toggle-Text zwischen `Dark` und `Light`
- Öffnet und schließt das Dropdown-Menü in der Navigation
- Schließt geöffnete Dropdowns bei Klick außerhalb des Menüs

### `js/notenrechner.js`

JavaScript für `uebungen/notenrechner.html`.

Funktionen:

- Erstellt die Eingabeoberfläche dynamisch nach dem Seiten-Hero
- Prüft, ob Punkte und Maximalpunkte gültig sind
- Berechnet den Prozentwert
- Ordnet den Prozentwert einer Bewertung zu:
  - ab 90 Prozent: sehr gut
  - ab 75 Prozent: gut
  - ab 60 Prozent: befriedigend
  - ab 50 Prozent: ausreichend
  - darunter: nicht bestanden
- Zeigt Prozentwert, Note, Eingabewerte und Fortschrittsbalken an

### `js/textanalyse.js`

JavaScript für `uebungen/textanalyse.html`.

Funktionen:

- Erstellt die Textanalyse-Oberfläche dynamisch
- Prüft, ob Text eingegeben wurde
- Zählt Zeichen, Wörter, Großbuchstaben und Sätze
- Zeigt die Ergebnisse in einer Card-Übersicht an

## Medien

### `img/Hintergrund.jpg`

- Hintergrundbild des Hero-Bereichs auf der Startseite
- Wird in `css/style.css` über die `.hero`-Klasse eingebunden
- Liegt unter einem halbtransparenten Overlay

### `img/logo.png`

- Wird als Favicon eingebunden
- Die Hauptseiten verwenden `img/logo.png`
- Die Übungsseiten verwenden wegen des Unterordners `../img/logo.png`

## Verlinkungsübersicht

| Datei | Verlinkt in | Zweck |
| --- | --- | --- |
| `index.html` | Navigation aller Seiten | Rückkehr zur Startseite |
| `ueber_mich.html` | Navigation, Startseiten-Button, Startseiten-Card | Vorstellungsseite |
| `eis_projekt.html` | Navigation, Startseiten-Card | Projektseite |
| `kontakt.html` | Navigation, Footer, Startseiten-Card | Kontaktseite |
| `impressum.html` | Navigation und Footer | Rechtliche Angaben |
| `uebungen/notenrechner.html` | Dropdown-Menü | JavaScript-Übung Notenrechner |
| `uebungen/textanalyse.html` | Dropdown-Menü | JavaScript-Übung Textanalyse |
| `css/style.css` | Alle HTML-Seiten | Gemeinsames Design |
| `js/script.js` | Alle HTML-Seiten | Dark Mode und Dropdown |
| `js/notenrechner.js` | `uebungen/notenrechner.html` | Notenrechner-Logik |
| `js/textanalyse.js` | `uebungen/textanalyse.html` | Textanalyse-Logik |
| `img/Hintergrund.jpg` | `css/style.css` | Hero-Hintergrundbild |
| `img/logo.png` | Alle HTML-Seiten | Favicon |
| Google Fonts | Alle HTML-Seiten | Schriftarten Bebas Neue und Barlow |

## Technologien

- HTML5
- CSS3 mit Custom Properties, Grid, Flexbox und Animationen
- JavaScript mit DOM-Manipulation, Events und `localStorage`
- Google Fonts

## Aktuelle Hinweise

- Das Kontaktformular sendet aktuell keine Daten ab.
- Die Projektseite `eis_projekt.html` enthält noch keinen fertigen Projektinhalt.
- Die Angaben im Impressum sind fiktive Platzhalterdaten und nicht für eine öffentliche Veröffentlichung gedacht.
- Die Übungsseiten erzeugen ihre Eingabeoberflächen per JavaScript.
