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:

/home/isa7/public_html

Projektstruktur

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               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.

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:

http://localhost:9007/

Der Entwicklungsserver lauscht auf 0.0.0.0 und verwendet Port 9007.

Flask-Routen

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

Die Routen funktionieren jeweils auch mit abschließendem Schrägstrich.

Aufbau der Flask-App

flask_app/app.py

• 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.

Templates

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.

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.

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:

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 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/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 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-Templates und statische Seiten	Schriftarten Bebas Neue und Barlow

Verwendete Technologien

• Python 3
• Flask
• Jinja
• 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 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.