ReadMe an aktuellen Stand angepasst
This commit is contained in:
Mara Zöllner
parent
40f9964e98
commit
00ac72a807
1 changed files with 148 additions and 98 deletions
246
README.md
246
README.md
|
|
@ -1,142 +1,192 @@
|
|||
# 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.
|
||||
|
||||
# Glück Auf – Persönliche Webseite
|
||||
## Pfad auf dem Server
|
||||
|
||||
Ein statisches Webprojekt bestehend aus mehreren HTML-Seiten mit einheitlichem Design im dunklen Blau-Stil. Erstellt als 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 (Glück Auf Lernprojekt)
|
||||
├── kontakt.html ← Kontaktformular
|
||||
├── impressum.html ← Impressum / rechtliche Angaben
|
||||
├── README.md ← Diese Datei
|
||||
├── 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
|
||||
│ └── style.css Zentrales Stylesheet für alle Seiten
|
||||
│
|
||||
├── js/
|
||||
│ └── script.js ← JavaScript für Partikel-Animation (nur index.html)
|
||||
│ ├── 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
|
||||
│ ├── Hintergrund.jpg Hintergrundbild für den Hero-Bereich
|
||||
│ └── logo.png Favicon / Logo
|
||||
│
|
||||
└── assets/ ← Reserviert für zukünftige Medien (aktuell leer)
|
||||
└── uebungen/
|
||||
├── notenrechner.html Übungsseite: Noten berechnen
|
||||
└── textanalyse.html Übungsseite: Text analysieren
|
||||
```
|
||||
|
||||
---
|
||||
## Seiten
|
||||
|
||||
## Dateibeschreibungen
|
||||
### `index.html` - Startseite
|
||||
|
||||
### HTML-Seiten
|
||||
|
||||
#### `index.html` – Startseite
|
||||
- Einstiegspunkt der Website
|
||||
- Enthält einen **Hero-Bereich** mit Hintergrundbild und animiertem Partikel-Canvas
|
||||
- Begrüßungstext mit Button-Link zu `ueber_mich.html`
|
||||
- Drei Info-Cards: Über mich, Projekte, Kontakt (nur Textelemente, keine Links)
|
||||
- Footer mit Links zu `impressum.html` und `kontakt.html`
|
||||
- Einzige Seite, die `script.js` einbindet (Canvas-Animation)
|
||||
- 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 (Inhaberin: Mara)
|
||||
- Kurze Bio-Texte als Platzhalter
|
||||
- Auflistung von Kenntnissen als Skill-Badges: HTML, CSS, JavaScript, Python, Webdesign, Linux
|
||||
- Footer mit Links zu `impressum.html` und `kontakt.html`
|
||||
### `ueber_mich.html` - Über mich
|
||||
|
||||
#### `eis_projekt.html` – Projektseite
|
||||
- Präsentation des Glück Auf Lernprojekts
|
||||
- Inhalt noch in Vorbereitung (`<!-- Projektinhalt hier einfügen -->`)
|
||||
- Footer mit Links zu `impressum.html` und `kontakt.html`
|
||||
- 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
|
||||
|
||||
#### `kontakt.html` – Kontakt
|
||||
- Kontaktformular mit den Feldern: Name, E-Mail, Nachricht
|
||||
- Absenden-Button (aktuell ohne Backend-Anbindung)
|
||||
- Footer mit Links zu `impressum.html` und `kontakt.html`
|
||||
### `eis_projekt.html` - Projektseite
|
||||
|
||||
#### `impressum.html` – Impressum
|
||||
- Pflichtangaben gemäß § 5 TMG (Musterdaten als Platzhalter)
|
||||
- Abschnitte: Angaben zum Betreiber, Kontakt (E-Mail), Haftungsausschlüsse, Urheberrecht
|
||||
- Footer mit Links zu `impressum.html` und `kontakt.html`
|
||||
- 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
|
||||
|
||||
### Stylesheet
|
||||
- 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
|
||||
|
||||
#### `css/style.css` – Zentrales Stylesheet
|
||||
- Wird von **allen fünf HTML-Seiten** eingebunden
|
||||
- Definiert CSS-Variablen (Custom Properties) für die Farbpalette:
|
||||
- `--royal` `--royal-light` `--royal-dark` → Blautöne
|
||||
- `--white` → Helles Weiß
|
||||
- `--muted` → Halbtransparentes Weiß für Nebentext
|
||||
- Stile für: Navigation (`nav`), Hero-Bereich, Cards, Buttons, Footer
|
||||
- Einbindung der Google Fonts: **Bebas Neue** (Überschriften) und **Barlow** (Fließtext)
|
||||
- `@keyframes fadeUp` – Einblende-Animation für den Hero-Inhalt
|
||||
### `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
|
||||
|
||||
### JavaScript
|
||||
### `uebungen/notenrechner.html` - Notenrechner
|
||||
|
||||
#### `js/script.js` – Partikel-Animation
|
||||
- Wird **ausschließlich von `index.html`** eingebunden (am Ende von `<body>`)
|
||||
- Zeichnet einen animierten Hintergrund auf ein `<canvas>`-Element (`id="bg"`)
|
||||
- Funktionen:
|
||||
- `resize()` – Passt Canvas-Größe ans Fenster an
|
||||
- `createParticles()` – Generiert Partikel zufällig, Anzahl abhängig von der Fenstergröße
|
||||
- `drawBg()` – Zeichnet radialen Verlaufshintergrund in Blautönen
|
||||
- `animate()` – Animationsschleife: bewegt Partikel, zeichnet Verbindungslinien bei Nähe < 120px
|
||||
- Reagiert auf `resize`-Events des Fensters
|
||||
- Gibt `"Meine Seite läuft!"` in der Browser-Konsole aus
|
||||
- Ü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
|
||||
|
||||
### Medien
|
||||
- Ü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
|
||||
|
||||
#### `img/Hintergrund.jpg` – Hintergrundbild
|
||||
- Verwendet im Hero-Bereich von `index.html`
|
||||
- Eingebunden via CSS in `style.css` als `background-image` der `.hero`-Klasse
|
||||
- Wird durch einen halbtransparenten Dunkel-Overlay überlagert
|
||||
## 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
|
||||
|
||||
Diese Tabelle zeigt, welche Datei wo verlinkt ist und warum.
|
||||
|
||||
| Verlinkte Datei | Verlinkt in | Zweck |
|
||||
|--------------------|--------------------------------------------------------------------|--------------------------------------------|
|
||||
| `index.html` | Allen Seiten (Navigation) | Rückkehr zur Startseite |
|
||||
| `ueber_mich.html` | Allen Seiten (Navigation), `index.html` (Hero-Button) | Vorstellungsseite erreichbar machen |
|
||||
| `eis_projekt.html` | Allen Seiten (Navigation) | Projektseite erreichbar machen |
|
||||
| `kontakt.html` | Allen Seiten (Navigation + Footer) | Kontaktformular erreichbar machen |
|
||||
| `impressum.html` | Allen Seiten (Navigation + Footer) | Rechtliche Pflichtangabe erreichbar machen |
|
||||
| `css/style.css` | Allen fünf HTML-Seiten (`<link rel="stylesheet">` im `<head>`) | Einheitliches Design auf allen Seiten |
|
||||
| `js/script.js` | Nur `index.html` (am Ende von `<body>`, nach dem Canvas-Element) | Partikel-Animation nur auf der Startseite |
|
||||
| `img/Hintergrund.jpg` | `css/style.css` (`.hero`-Klasse) | Hero-Hintergrundbild der Startseite |
|
||||
| Google Fonts (CDN) | Allen fünf HTML-Seiten (`<link>` im `<head>`) | Schriftarten Bebas Neue & Barlow laden |
|
||||
|
||||
---
|
||||
| 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 (Custom Properties, Grid, Flexbox, Animationen)
|
||||
- JavaScript (Canvas API, `requestAnimationFrame`)
|
||||
- Google Fonts (Bebas Neue, Barlow)
|
||||
- CSS3 mit Custom Properties, Grid, Flexbox und Animationen
|
||||
- JavaScript mit DOM-Manipulation, Events und `localStorage`
|
||||
- Google Fonts
|
||||
|
||||
---
|
||||
## Aktuelle Hinweise
|
||||
|
||||
## Hinweise
|
||||
|
||||
- Das Kontaktformular sendet aktuell keine Daten ab – es fehlt eine Backend-Anbindung.
|
||||
- Der Inhalt von `eis_projekt.html` ist noch nicht befüllt.
|
||||
- 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.
|
||||
- Der `assets/`-Ordner ist aktuell leer und für zukünftige Ressourcen vorgesehen.
|
||||
- Die Übungsseiten erzeugen ihre Eingabeoberflächen per JavaScript.
|
||||
|
|
|
|||
Loading…
Reference in a new issue