NASCH Onepager Prototype

Workflow Nasch-Projekt:

• Öffnen Sie index.html im Browser (lokal öffnen genügt) oder starten Sie einen einfachen HTTP-Server z.B. mit Python: python -m http.server 8000 und öffnen Sie http://localhost:8000.

Wesentliche Features nach Teilaufgaben:

Teilaufgabe 1a:

• Responsive Onepager-Layout für bis zu 1280px Viewport.

Teilaufgabe 1b:

• Login (client-side) für Mitglieder: Benutzername Mitglied, Passwort lecker.
  • Nach erfolgreichem Login werden exklusive Inhalte sichtbar und zwei Menüeinträge hinzugefügt: Mitgliederversammlung und Download.
  • Logout entfernt diese Inhalte wieder.
• Smooth scrolling für Header-Menüpunkte.
• Back-to-top Button erscheint bei Scroll.

Teilaufgabe 2 (Wahlqualifikation)

• Browser Game

Endformate & Arbeitsdateien:

• index.html – Struktur und Inhalte.
• css/style.css – Haupt-Styles.
• js/main.js – Login- und UI-Logik.
• assets/ – Logo und Platzhalterbilder.

Ersetzt wurde das offizielle Logo Logo.pdf durch Bearbeitung in Adobe Illustrator und es wurde nach dem Export entsprechend abgelegt unter assets/logo.svg (in Arbeitspaketordner).

Build & Local Tools (optional)

• Install Node.js if you need to minify assets or run a local dev server: npm init -y.
• Add a dev script sample (optional):

npm install --save-dev http-server terser cssnano-cli

Then run:

npx http-server -c-1
# or use python serve
python -m http.server 8000

Minify (sample):

npx terser js/main.js -c -m -o js/main.min.js
npx cssnano css/style.css css/style.min.css

Weitere Hinweise:

• Der Prototyp führt nur client-seitige Validierung durch und speichert Login-Status in sessionStorage.
• Texte müssen aus AP_MG_Wl_25/NV/DIGITAL/Onepager.docx übernommen werden (nicht redaktionell verändert werden).
• Für eine echte Produktion: serverseitige Authentifizierung, HTTPS, Barrierefreiheitstests und Optimierung der Bilder.
• Für die Prüfung ist eine clientseitige Lösung gefordert; trotzdem: für Live-Betrieb eine serverseitige Authentifizierung (z. B. JWT + HTTPS) planen.

Ich freue mich auf Ihr Feedback!

Freundliche Grüße

Cornelia Geißinger.