# Glück Auf – Persönliche Webseite 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 ``` ## Projektstruktur ```text Glueck-Auf/ ├── flask_app/ │ ├── app.py Flask-Anwendung und Routen │ └── init_db.py Legt die SQLite-Datenbank für das Spiel an │ ├── 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 Stylesheet der statischen Seiten ├── img/ │ ├── 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 ``` ## Flask-App lokal starten Vorausgesetzt werden Python 3 und Flask. ```bash cd flask_app python3 -m venv venv source venv/bin/activate python3 -m pip install Flask python3 app.py ``` Die Anwendung läuft anschließend auf: ```text http://localhost:9000/ ``` Der Entwicklungsserver lauscht auf `0.0.0.0` und verwendet Port `9000`. ## Flask-Routen | Route | Methoden | Inhalt | | --- | --- | --- | | `/` und `/app/` | GET, POST | Startseite mit Namenseingabe | | `/raum/` und `/app/raum/` | GET, POST | Räume, Ausgänge und Rätsel des Stadion-Escape-Rooms | ## Aufbau der Flask-App ### `flask_app/app.py` - Erstellt die Flask-Anwendung. - Baut die HTML-Seiten direkt in Python-Strings zusammen. - Enthält das gemeinsame Styling direkt in der Konstante `STYLE`. - Nimmt den Namen und Rätselantworten per `POST` entgegen. - Speichert Spielstart und Abschlusszeit in SQLite. - Zeigt nach dem gelösten Rätsel eine Highscore-Liste an. ### `flask_app/init_db.py` Legt die SQLite-Datenbank `adventure.db` an und füllt sie mit den Räumen, Ausgängen und der Rätselantwort. ### Ablauf des Rätsels 1. Die Startseite wird über `/` oder `/app/` aufgerufen. 2. Nach der Namenseingabe wird ein Spielstand in der Datenbank angelegt. 3. Der Link „Zum Stadiontor“ führt in den ersten Raum. 4. Über Ausgänge bewegt man sich durch Tunnel, Kabine, Kiosk und Nordkurve. 5. Im Rätselraum liest Flask `request.form["antwort"]`. 6. Bei der richtigen Antwort wird die Abschlusszeit gespeichert und der Highscore angezeigt. Das HTML-Grundgerüst, die Navigation und das blaue Stadion-Design werden direkt in `app.py` erzeugt. Es gibt keine Jinja-Templates für die Flask-App. ## 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. ### `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 enthält unter anderem: - 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` Das gemeinsame JavaScript der statischen Seiten: - 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` Das Bild wird als Hintergrund des Hero-Bereichs der statischen Startseite verwendet und liegt unter einem halbtransparenten Overlay. ### `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 oder Ziel | Verlinkt beziehungsweise verwendet in | Zweck | | --- | --- | --- | | `flask_app/app.py` | Flask-Routen `/`, `/app/` und `/app/raum/` | Logik, HTML-Ausgabe und Styling des Stadion-Escape-Rooms | | `flask_app/init_db.py` | Lokale Vorbereitung der Flask-App | Erstellt die SQLite-Datenbank | | `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 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` über die Klasse `.hero` | Hero-Hintergrundbild | | `img/logo.png` | Alle statischen HTML-Seiten | Favicon | | Google Fonts | Flask-App und statische Seiten | Schriftarten Bebas Neue und Barlow | ## Verwendete Technologien - Python 3 - Flask - HTML5 - CSS3 mit Custom Properties, Grid, Flexbox und Animationen - JavaScript mit DOM-Manipulation, Events und `localStorage` - Google Fonts: Bebas Neue und Barlow ## Aktuelle Hinweise - Es gibt derzeit keine `requirements.txt`; Flask muss lokal manuell installiert werden. - Die Styles der Flask-App befinden sich direkt in `flask_app/app.py`. - 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.