Zum Hauptinhalt springen

Kiosk Templates erstellen

Erstelle Templates für interaktive Touchscreen-Kioske im Shopping Center mit v0.

Was sind Kiosk Templates?​

Kiosk Templates sind Designs für Touchscreen-Kioske:

  • Besucher interagieren direkt am Kiosk
  • Screens mit Navigation (Home, Shops, Centerplan, etc.)
  • Touch-optimiert (große Buttons, klare Navigation)

Schnellstart​

  1. v0 öffnen – Gehe zu v0.dev und erstelle ein neues Projekt.

  2. Design beschreiben – Beschreibe dein gewünschtes Kiosk-Design

  3. CockpitOS Prompt anhängen – Kopiere den Prompt aus Kiosk Template Prompt und füge ihn am Ende deiner v0-Anweisungen ein.

  4. Template generieren – v0 generiert jetzt ein Template mit korrekter Struktur für CockpitOS.

  5. ZIP herunterladen – Lade das generierte Template als ZIP-Datei herunter.

  6. Im Dashboard hochladen – Gehe zu Templates → Upload im Dashboard und lade die ZIP-Datei hoch.

Template-Struktur​

Ein Kiosk Template muss folgende Struktur haben:

components/templates/kiosk-[template-name]/
├── index.ts                    # Exportiert Template
├── KioskTemplate.tsx          # Haupt-Template (Client Component)
├── config.ts                   # Default Config
├── screens/                    # Screen-Komponenten
│   ├── HomeScreen.tsx         # Home Screen
│   ├── ShopsScreen.tsx        # Shops Übersicht
│   ├── ShopDetailScreen.tsx   # Shop Details
│   ├── CenterplanScreen.tsx   # Interaktive Karte
│   ├── ServicesScreen.tsx     # Services Übersicht
│   ├── AktuellesScreen.tsx    # Content Feed
│   └── AktuellesDetailScreen.tsx # Content Detail
├── components/                 # Shared Components
│   ├── Header.tsx
│   └── Footer.tsx
├── types.ts
└── README.md

Wichtige Anforderungen​

  • Client Component ('use client' erforderlich)
  • Modulare Screens (jeder Screen als separate Komponente)
  • Touch-optimiert (große Buttons, klare Targets)
  • Glassmorphism unterstützt (wenn in Config aktiviert)
  • Animations unterstützt (wenn in Config aktiviert)
  • Theme unterstützt (light/dark)

Weiterführende Dokumentation​

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /templates/kiosk-templates