From 070c3507540a182a114f72693fcb771f584903f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mara=20Z=C3=B6llner?= Date: Sun, 21 Jun 2026 12:42:52 +0200 Subject: [PATCH] =?UTF-8?q?=C3=9Cberarbeitung=20ReadME?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 393 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 262 insertions(+), 131 deletions(-) diff --git a/README.md b/README.md index 56e3434..38664ff 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,15 @@ -# Glück Auf - Persönliche Webseite +# 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. +Persönliches Lernprojekt mit einer Flask-Anwendung und mehreren statischen +HTML-Seiten. Die Flask-App bildet einen kleinen Stadion-Escape-Room ab, in dem +ein Zahlencode eingegeben und serverseitig geprüft wird. Der bisherige +statische Teil besitzt ein gemeinsames Design, einen Dark-Mode-Umschalter und +kleine JavaScript-Übungen. ## Pfad auf dem Server +Der bisher dokumentierte Serverpfad lautet: + ```text /home/isa7/public_html ``` @@ -11,186 +17,311 @@ Statisches Webprojekt mit mehreren HTML-Seiten, gemeinsamem Design, Dark-Mode-Um ## 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 +Glueck-Auf/ +├── flask_app/ +│ ├── app.py Flask-Anwendung und Routen +│ ├── templates/ +│ │ ├── base.html Gemeinsames Layout und Styling +│ │ ├── index.html Startseite des Stadion-Escape-Rooms +│ │ └── raetsel.html Rätselseite mit Formular +│ └── assets/ +│ ├── css/ Platz für ausgelagerte Stylesheets +│ ├── img/ Platz für Bilder +│ └── js/ Platz für JavaScript +│ +├── index.html Startseite der bisherigen statischen Website +├── ueber_mich.html Persönliche Vorstellungsseite +├── eis_projekt.html Projektseite +├── kontakt.html Kontaktseite +├── impressum.html Impressum mit 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 -│ +│ └── style.css Stylesheet der statischen Seiten ├── img/ -│ ├── Hintergrund.jpg Hintergrundbild für den Hero-Bereich -│ └── logo.png Favicon / Logo -│ -└── uebungen/ - ├── notenrechner.html Übungsseite: Noten berechnen - └── textanalyse.html Übungsseite: Text analysieren +│ ├── Hintergrund.jpg Hero-Hintergrund der statischen Startseite +│ └── logo.png Logo und Favicon +├── js/ +│ ├── script.js Dark Mode und Dropdown-Menü +│ ├── notenrechner.js Logik des Notenrechners +│ └── textanalyse.js Logik der Textanalyse +├── uebungen/ +│ ├── notenrechner.html JavaScript-Übung +│ └── textanalyse.html JavaScript-Übung +└── python training/ + ├── frage.py Frühere Python-Übung + └── hallo.py Frühere Python-Übung ``` -## Seiten +## Flask-App lokal starten -### `index.html` - Startseite +Vorausgesetzt werden Python 3 und Flask. -- 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 +```bash +cd flask_app +python3 -m venv venv +source venv/bin/activate +python3 -m pip install Flask +python3 app.py +``` -### `ueber_mich.html` - Über mich +Die Anwendung läuft anschließend auf: -- 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 +```text +http://localhost:9007/ +``` -### `eis_projekt.html` - Projektseite +Der Entwicklungsserver lauscht auf `0.0.0.0` und verwendet Port `9007`. -- 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 +## Flask-Routen -### `kontakt.html` - Kontakt +| Route | Methoden | Inhalt | +| --- | --- | --- | +| `/` und `/app/` | GET | Startseite des Stadion-Escape-Rooms | +| `/raetsel` und `/app/raetsel` | GET, POST | Rätsel am Stadiontor | +| `/frage` und `/app/frage` | GET, POST | Alternative Adressen für dieselbe Rätselseite | -- 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 +Die Routen funktionieren jeweils auch mit abschließendem Schrägstrich. -### `impressum.html` - Impressum +## Aufbau der Flask-App -- 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 +### `flask_app/app.py` -### `uebungen/notenrechner.html` - Notenrechner +- Erstellt die Flask-Anwendung. +- Rendert die HTML-Seiten mit Jinja. +- Nimmt die Antwort des Rätsel-Formulars per `POST` entgegen. +- Vergleicht die Eingabe mit dem gesuchten Code `4`. +- Übergibt die passende Rückmeldung an das Template. +- Stellt zukünftige statische Dateien aus `flask_app/assets/` unter + `/assets` bereit. -- Ü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 +### Templates -### `uebungen/textanalyse.html` - Textanalyse +`base.html` enthält das gemeinsame HTML-Grundgerüst, die Navigation und das +aktuelle Styling. `index.html` und `raetsel.html` erweitern dieses +Basis-Template mit Jinja-Blöcken. -- Ü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 +Die Startseite führt in den Stadiongang ein. Auf der Rätselseite kann der Code +für das Stadiontor eingegeben werden. Die Auswertung erfolgt durch Flask auf +dem Server und wird anschließend auf derselben Seite angezeigt. -## Stylesheet +### Ablauf des Rätsels + +1. Die Startseite wird über `/` oder `/app/` aufgerufen. +2. Der Link „Zum Stadiontor“ führt zur Rätselseite. +3. Das Formular sendet die eingegebene Antwort mit der Methode `POST` an + dieselbe Route. +4. Flask liest den Wert aus `request.form["antwort"]`. +5. Bei der Antwort `4` wird eine Erfolgsmeldung angezeigt, bei jeder anderen + Eingabe eine Fehlermeldung. + +Die Rückmeldung wird in `app.py` erzeugt und als Variable `ergebnis` an +`raetsel.html` übergeben. Jinja zeigt den Ergebnisbereich nur an, wenn diese +Variable vorhanden ist. + +### Gemeinsames Template `base.html` + +Das Basis-Template stellt die wiederverwendbaren Bestandteile der Flask-Seiten +bereit: + +- HTML-Grundgerüst und deutsche Spracheinstellung, +- responsive Meta-Angaben, +- Google Fonts, +- Navigation zur Start- und Rätselseite, +- gemeinsames blaues Stadion-Design, +- responsive Darstellung für kleinere Bildschirme, +- Jinja-Blöcke für Seitentitel und Seiteninhalt. + +Die beiden Unterseiten verwenden `{% extends "base.html" %}`. Dadurch müssen +Navigation, Layout und Styling nicht in jeder Datei wiederholt werden. + +### Vorbereitete Assets + +Flask wurde mit folgendem Verzeichnis für statische Dateien eingerichtet: + +```text +flask_app/assets/ +``` + +Dateien aus diesem Verzeichnis wären unter `/assets/...` erreichbar. Die +Unterordner `css`, `img` und `js` sind bereits angelegt, derzeit aber noch +leer. Das CSS der Flask-App steht deshalb momentan direkt in `base.html`. + +## Statische Website + +Die älteren statischen Seiten bleiben im Hauptverzeichnis erhalten. Sie +verwenden gemeinsam `css/style.css` und `js/script.js` und enthalten unter +anderem: + +- eine persönliche Start- und Vorstellungsseite, +- eine Projekt-, Kontakt- und Impressumsseite, +- einen Dark-Mode-Umschalter, +- einen Notenrechner, +- eine einfache Textanalyse. + +Die statische Website und die Flask-App sind derzeit getrennte Bereiche des +Projekts. Die Dateien in den Verzeichnissen `css/`, `img/` und `js/` gehören +zu den statischen HTML-Seiten. Für die Flask-App ist das Verzeichnis +`flask_app/assets/` vorgesehen. + +### `index.html` – Startseite + +- Einstiegspunkt der statischen Website, +- Hero-Bereich mit Hintergrundbild, +- Begrüßungstext mit Link zu `ueber_mich.html`, +- verlinkte Cards zu „Über mich“, Projekten und Kontakt, +- Navigation mit Dropdown zu den Übungen, +- Footer mit Links zu Kontakt und Impressum. + +### `ueber_mich.html` – Über mich + +- persönliche Vorstellungsseite, +- aktuell mit kurzen Platzhaltertexten, +- Skill-Badges für HTML, CSS, JavaScript, Python, Webdesign und Linux, +- gemeinsames Layout, Navigation und Dark Mode. + +### `eis_projekt.html` – Projektseite + +- Seite für das Glück-Auf-Lernprojekt, +- Projektinhalt aktuell noch als Platzhalter vorbereitet, +- verwendet das gemeinsame Layout, die Navigation und den Dark Mode. + +### `kontakt.html` – Kontakt + +- gestaltetes Kontaktformular, +- Eingabefelder für Name, E-Mail und Nachricht, +- Hinweis, dass das Formular aktuell nur ein Layout ist, +- Absenden-Button aktuell nur visuell vorhanden, +- keine Backend-Anbindung und keine Formularübertragung. + +### `impressum.html` – Impressum + +- Impressumsseite für ein privates Lernprojekt, +- Abschnitte zu Angaben, Kontakt, Verantwortung, Haftung, Links, + Urheberrecht und Hinweis, +- ausschließlich fiktive Platzhalterdaten, die nicht für eine öffentliche + Veröffentlichung gedacht sind. + +## JavaScript-Übungen + +### Notenrechner + +Die Seite `uebungen/notenrechner.html` bindet `js/notenrechner.js` ein. Die +Oberfläche wird per JavaScript nach dem Seiten-Hero erstellt und verarbeitet +zwei Eingaben: erreichte Punkte und maximal erreichbare Punkte. + +Aus diesen Werten werden Prozentwert und Bewertung berechnet: + +| Prozentwert | Bewertung | +| --- | --- | +| ab 90 % | Sehr gut | +| ab 75 % | Gut | +| ab 60 % | Befriedigend | +| ab 50 % | Ausreichend | +| unter 50 % | Nicht bestanden | + +Das Ergebnis zeigt Prozentwert, Note, Eingabewerte und einen farbigen +Fortschrittsbalken in Cards. Vor der Berechnung wird geprüft, ob Punkte und +Maximalpunkte gültig sind. + +### Textanalyse + +Die Seite `uebungen/textanalyse.html` verwendet `js/textanalyse.js`. Ein +eingegebener Text wird direkt im Browser analysiert. Angezeigt werden: + +- Anzahl der Zeichen, +- Anzahl der Wörter, +- Anzahl der Großbuchstaben, +- Anzahl der Sätze. + +Auch diese Oberfläche wird dynamisch mit JavaScript erzeugt. Vor der Analyse +wird geprüft, ob überhaupt Text eingegeben wurde. Die Resultate erscheinen in +einer Card-Übersicht. + +## Gemeinsames Design der statischen Seiten ### `css/style.css` -Das zentrale Stylesheet wird von allen Seiten eingebunden. +Das zentrale Stylesheet enthält unter anderem: -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 +- das Grundlayout für Body und Navigation, +- CSS-Variablen für Farben und Overlays, +- Layouts mit Grid und Flexbox, +- Hero-Bereiche, Cards, Buttons und Footer, +- die Google-Fonts-Anbindung für **Bebas Neue** und **Barlow**, +- die Animation `fadeUp`, +- Styles für das Dropdown-Menü, +- spezielle Styles für Kontaktformular und Impressum, +- responsive Anpassungen, +- Dark-Mode-Regeln über die Klasse `body.dark`, +- wiederverwendbare Klassen wie `.page-hero`, `.page`, `.cards`, `.card`, + `.btn` und `.skill`. ### `js/script.js` -Gemeinsames JavaScript für alle Seiten. +Das gemeinsame JavaScript der statischen 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 +- aktiviert den Dark-Mode-Umschalter, +- speichert die Auswahl in `localStorage`, +- wechselt die Beschriftung zwischen „Dark“ und „Light“, +- öffnet und schließt das Übungen-Dropdown, +- schließt das Dropdown bei einem Klick außerhalb des Menüs. ## 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 +Das Bild wird als Hintergrund des Hero-Bereichs der statischen Startseite +verwendet und 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` +Das Logo wird von den statischen Seiten als Favicon eingebunden. Seiten im +Hauptverzeichnis verwenden `img/logo.png`, die Übungsseiten im Unterordner +verwenden `../img/logo.png`. ## Verlinkungsübersicht -| Datei | Verlinkt in | Zweck | +| Datei oder Ziel | Verlinkt beziehungsweise verwendet 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 | +| `flask_app/templates/index.html` | Flask-Routen `/` und `/app/` | Start des Stadion-Escape-Rooms | +| `flask_app/templates/raetsel.html` | Rätsel- und Frage-Routen | Formular und Auswertung des Stadiontor-Codes | +| `flask_app/templates/base.html` | Beide Flask-Seiten | Gemeinsames Layout, Navigation und Styling | +| `flask_app/assets/` | Flask-Konfiguration in `app.py` | Vorbereiteter Bereich für statische Flask-Dateien | +| `index.html` | Navigation aller statischen Seiten | Rückkehr zur statischen Startseite | +| `ueber_mich.html` | Navigation, Startseiten-Button und Startseiten-Card | Vorstellungsseite | +| `eis_projekt.html` | Navigation und Startseiten-Card | Projektseite | +| `kontakt.html` | Navigation, Footer und 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 | +| `css/style.css` | Alle statischen HTML-Seiten | Gemeinsames Design | +| `js/script.js` | Alle statischen 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 | +| `img/Hintergrund.jpg` | `css/style.css` über die Klasse `.hero` | Hero-Hintergrundbild | +| `img/logo.png` | Alle statischen HTML-Seiten | Favicon | +| Google Fonts | Flask-Templates und statische Seiten | Schriftarten Bebas Neue und Barlow | -## Technologien +## Verwendete Technologien +- Python 3 +- Flask +- Jinja - HTML5 - CSS3 mit Custom Properties, Grid, Flexbox und Animationen - JavaScript mit DOM-Manipulation, Events und `localStorage` -- Google Fonts +- Google Fonts: Bebas Neue und Barlow ## 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. +- Es gibt derzeit keine `requirements.txt`; Flask muss lokal manuell + installiert werden. +- Die Styles der Flask-App befinden sich aktuell direkt in `base.html`. +- Die Unterordner in `flask_app/assets/` sind vorbereitet, enthalten aber + noch keine eigenen CSS-, Bild- oder JavaScript-Dateien. +- Das Kontaktformular der statischen Website sendet keine Daten. +- Die Projektseite enthält noch keinen vollständig ausgearbeiteten Inhalt. +- Die Angaben im Impressum sind fiktive Platzhalterdaten und nicht für eine + öffentliche Veröffentlichung gedacht. - Die Übungsseiten erzeugen ihre Eingabeoberflächen per JavaScript.