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

/home/isa7/public_html

Projektstruktur

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.