192 lines
6.3 KiB
Markdown
192 lines
6.3 KiB
Markdown
# 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 Formular-Layout
|
|
├── impressum.html Impressum / rechtliche Angaben
|
|
├── 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 Eingabefeldern für Name, E-Mail und Nachricht
|
|
- Absenden-Button ist aktuell nur visuell vorhanden
|
|
- Es gibt noch keine Backend-Anbindung und keine Formularübertragung
|
|
|
|
### `impressum.html` - Impressum
|
|
|
|
- Impressumsseite mit Platzhalterdaten
|
|
- Enthält Abschnitte zu Betreiberangaben, Kontakt, Haftung und Urheberrecht
|
|
- Die Angaben müssen vor einer echten Veröffentlichung geprüft und ersetzt werden
|
|
|
|
### `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ü
|
|
- 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 Platzhalterdaten und müssen vor Veröffentlichung ersetzt werden.
|
|
- Die Übungsseiten erzeugen ihre Eingabeoberflächen per JavaScript.
|