diff --git a/css/promptGenerator.css b/css/promptGenerator.css new file mode 100644 index 0000000..6b5015b --- /dev/null +++ b/css/promptGenerator.css @@ -0,0 +1,155 @@ +/* KI-Prompt-Generator (Modal), Phase 6: Vollbild auf Mobile, zentriertes + breites Panel ab 1024px (siehe Breakpoint in css/responsive.css). Struktur + wird von js/ui/promptGenerator.js in #prompt-generator-modal eingehängt. + Grundgerüst analog zu css/form.css/css/detail.css; das Eingabeformular + selbst nutzt bewusst dieselben Klassen wie das Ausflugsziel-Formular + (.place-form, .place-form__section, .form-field, ...) statt sie zu + duplizieren. */ + +.prompt-generator-modal { + position: fixed; + inset: 0; + z-index: 2200; +} + +.prompt-generator-modal[hidden] { + display: none; +} + +.prompt-generator-modal__backdrop { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.55); +} + +.prompt-generator-modal__panel { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background: var(--color-surface); + overflow-y: auto; + padding: var(--space-lg); + padding-top: calc(var(--space-lg) + 36px); + gap: var(--space-md); +} + +.prompt-generator-modal__close { + position: absolute; + top: var(--space-sm); + right: var(--space-sm); + z-index: 1; + width: 36px; + height: 36px; + border: none; + border-radius: 50%; + background: rgba(0, 0, 0, 0.55); + color: #fff; + font-size: 1rem; + line-height: 1; + cursor: pointer; +} + +.prompt-generator__title { + font-size: 1.3rem; + font-weight: 700; +} + +.prompt-generator__intro { + color: var(--color-text-muted); + line-height: 1.4; +} + +.prompt-generator__layout { + display: flex; + flex-direction: column; + gap: var(--space-lg); +} + +.prompt-generator__form.place-form { + padding: 0; + gap: var(--space-md); +} + +.prompt-generator__location-btn[hidden] { + display: none; +} + +.prompt-generator__output { + display: flex; + flex-direction: column; + gap: var(--space-sm); +} + +.prompt-generator__output-textarea { + width: 100%; + min-height: 320px; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + padding: var(--space-sm); + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: 0.8rem; + line-height: 1.4; + background: var(--color-background); + color: var(--color-text); + resize: vertical; +} + +.prompt-generator__output-actions { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--space-sm) var(--space-md); +} + +.prompt-generator__status { + font-size: 0.8rem; + color: var(--color-text-muted); +} + +.prompt-generator__instructions { + border-top: 1px solid var(--color-border); + padding-top: var(--space-md); +} + +.prompt-generator__instructions-list { + margin: 0; + padding-left: 1.25em; + display: flex; + flex-direction: column; + gap: var(--space-xs); + line-height: 1.4; +} + +@media (min-width: 1024px) { + .prompt-generator-modal__panel { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: min(1080px, 95vw); + height: min(90vh, 980px); + border-radius: var(--radius-md); + box-shadow: var(--shadow-card); + } + + .prompt-generator__layout { + flex-direction: row; + align-items: flex-start; + flex: 1; + min-height: 0; + } + + .prompt-generator__form.place-form, + .prompt-generator__output { + flex: 1 1 50%; + min-width: 0; + overflow-y: auto; + max-height: 100%; + } + + .prompt-generator__output-textarea { + flex: 1; + } +} diff --git a/docs/plan.md b/docs/plan.md index 8c70575..9dcf6b0 100644 --- a/docs/plan.md +++ b/docs/plan.md @@ -160,9 +160,28 @@ Seed-Daten dadurch synchron direkt aus dem globalen Namespace, ganz ohne | 3 | Formular zum manuellen Anlegen/Bearbeiten (Validierung, Koordinatenprüfung) | ✅ umgesetzt | | 4 | Filter- und Suchfunktion (Kategorie, Entfernung, Alter, Kosten, Indoor/Outdoor, Ausstattung, Bewertung, Region) inkl. Anwendung auf Karte + Liste | ✅ umgesetzt | | 5 | Route/Navigation-Integration | ✅ bereits in Phase 2 erledigt (OSM-Directions-Button in der Detailansicht) | -| 6 | KI-Prompt-Generator (Eingabeformular, Promptgenerierung, Copy/Download) | offen | +| 6 | KI-Prompt-Generator (Eingabeformular, Promptgenerierung, Copy/Download) | ✅ umgesetzt | | 7 | KI-JSON-Import (Validierung, Vorschau, Übernahme ins LocalStorage) + Backup-Export/Import + Politur | offen | +## KI-Prompt-Generator (Phase 6) + +- `js/ai/promptBuilder.js`: reine Funktion `buildPrompt(formValues)`, deckt alle + 10 Pflichtpunkte aus `anforderung.md` explizit nummeriert ab und bettet das + exakte JSON-Zielschema aus `anforderung.md` ("Vorgabe für das KI-JSON") + 1:1 als Konstante `JSON_TEMPLATE` ein (per Skript byte-genau abgeglichen). +- Der Anweisungstext des Prompts ist immer Deutsch; das Formularfeld "Sprache + der Ausgabe" steuert separat, in welcher Sprache die KI ihre `name`/ + `shortDescription`/`description`-Texte verfassen soll. +- `js/ui/promptGenerator.js`: Modal mit Live-Vorschau (`