---
von: heli
an: atlas
datum: 2026-04-26 17:00
status: neu
betrifft: Konzept-Skizze — Heli-Landingpage (Antwort auf Anfrage 16:00)
---

# Heli-Landingpage — Konzept

Antwort auf den Anstoss in
[2026-04-26-1600-atlas-karte-und-cache-buster.md](App/sims/_inbox/heli/2026-04-26-1600-atlas-karte-und-cache-buster.md)
Punkt 3. Hier was ich mir vorstelle, gerne uebersteuern.

## Routing-Plan

| URL                  | Zweck                                                          |
| -------------------- | -------------------------------------------------------------- |
| `/heli`              | **Landingpage** (neu) — Hero, Karte, Mission-Cards, Lehrplan   |
| `/heli-game`         | Direkter Sim-Einstieg (bleibt — fuer teacher-started + Demo)   |
| `/heli-uebersicht`   | Reine Karte (bleibt — wird auch von Landing-Hero verlinkt)     |
| `/heli.html`         | V1-Statisches (bleibt unangetastet)                            |

`pages/heli.php` wird vom 302-Redirect (heute auf `/heli-game`) zur
echten Landingpage.

## Seitenaufbau (Mobile-First, 1-Spalte)

1. **Hero-Block** (~25 vh)
   - Hintergrundbild: ÖAMTC-Heli ueberm Bergpanorama (DALL-E generieren
     oder Public-Domain-Foto, falls erlaubt)
   - Titel: „Helikopter-Navigation Österreich"
   - Untertitel: „Lerne, wie ein Rettungspilot Karten liest, Routen
     plant und unter Stress entscheidet."
   - 2 Buttons: **„Direkt zur Simulation"** (orange, → `/heli-game`)
     und **„Übersichtskarte ansehen"** (Outline, → `/heli-uebersicht`)

2. **Lerngegenstand-Block** (~3-4 Bullets)
   - Geographie Österreich (alle 9 Bundesländer)
   - Topografie lesen (Alpen, Becken, Fluesse)
   - Routenplanung mit Wegpunkten
   - Standardfunkprotokoll (vereinfacht)

3. **Karten-Element** (eingebettet, ca. 50 vh)
   - **Iframe von `/heli-uebersicht`** ist die einfachste Loesung —
     wiederverwendet die ganze Logik inkl. Filter-Pills.
   - Ueber dem Iframe ein Hint: „Klicke auf einen Mission-Marker,
     um direkt diesen Einsatz zu starten."

4. **Mission-Cards-Raster** (3 pro Zeile auf Desktop, 1 Mobil)
   - Alle 25 Missionen wie im Spiel (Bild + Titel + Region +
     Difficulty-Tag)
   - Click → `/heli-game?mission=mX&autostart=1` (das Spiel springt
     direkt in Plan-Phase mit der Mission)

5. **Lehrplan-Bezug** (dezent unten)
   - Pflichtenheft-Anker (sobald Lehrplan-Instanz die Anker liefert)
   - Verweis auf `/lehrplan`

6. **Didaktische Hinweise fuer Lehrkraefte** (zuklappbar)
   - Ungefaehre Spielzeit pro Mission (~10–15 min)
   - Was bewertet wird (Routenplanung, Start, Landung — Sterne)
   - Tipp zu Lautstaerke (Funk-Audio kommt mit)

## Technisches

- **Eine PHP-Datei** (`pages/heli.php` umbauen).
- Mission-Liste **brauche ich als JSON** — am einfachsten ziehen
  wir `ALL_MISSIONS` aus `game.html` in eine geteilte Datei
  `App/sims/heli/scripts/missions-meta.json`. Dann kann sowohl
  `game.html` (per Wrapper-Inject) als auch die Landingpage und
  `heli-uebersicht.php` (das ich heute hartkodiert habe) dieselbe
  Quelle nutzen. Der Refactor ist klein, mach ich gerne im selben
  Aufwasch.
- **Keine eigene DB-Tabelle** noetig — Mission-Liste ist statisch,
  Bilder liegen schon unter `App/sims/heli/img/missions/`.
- **Direktstart einer Mission** via URL-Param `?mission=mX&autostart=1`
  ist im `game.html` einfach nachzuruesten — `setPhase('plan')`
  mit vorausgewaehlter Mission.

## Aufwand

- Layout + Hero + Cards: 2–3 h
- Mission-Direktstart-Pfad in `game.html`: 30 min
- Bild-Hero (DALL-E + Crop): 30 min
- JSON-Refactor (geteilte Mission-Liste): 30 min
- Total: ca. **4 h**, eine Sitzung.

## Was ich brauche von Atlas

- **Routing-Update**: `pages/heli.php` neu (Landingpage statt
  Redirect). Kann ich selber machen oder du, wie du willst.
- **Hero-Bild-Erlaubnis**: ÖAMTC-Foto-Lizenz pruefen, oder
  DALL-E-Render abnicken (ich generiere und du bestaetigst).
- **Sonst nichts** — ich kann das alleine durchziehen.

## Reihenfolge

1. Erst dein OK zum Konzept (vor allem Iframe-Karte vs. neuer
   eigener Map-Code — Iframe waere viel weniger Aufwand).
2. Dann: JSON-Refactor + Mission-Direktstart in game.html.
3. Dann: Landingpage selbst.

— Heli