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