dapelza
39321d680f
Neues Modul js/import/ mit reiner Validierungslogik (importValidator.js: parseAndValidate(), findDuplicate()). Jeder Ausflugsziel-Eintrag im importierten KI-JSON wird einzeln bewertet statt alles-oder-nichts: fehlender Name/Kategorie oder ungueltige Koordinaten fuehren zur Ablehnung, weiche Probleme (unbekannte Kategorie, unsichere website/image-URL, ungueltige Bewertung, falscher Feldtyp) erzeugen nur eine Warnung. sanitizeEntry() setzt sicherheitskritische Felder vor der Uebernahme zurueck (z.B. javascript:-URLs), da normalizePlace() selbst keine Sicherheitspruefung vornimmt. findDuplicate() erkennt wahrscheinliche Duplikate gegen den bestehenden Datenbestand. UI (js/ui/import.js): Modal mit zwei Tabs - KI-Ausflugsziele importieren (Text einfuegen oder Datei hochladen, Vorschau mit gueltig/Warnung/abgelehnt, Duplikat-Toggle, Bestaetigen) und Backup sichern/wiederherstellen (js/import/backup.js: Export als JSON-Datei, Wiederherstellen mit Ersetzen/Ergaenzen-Wahl). Vorschau-Rendering ausschliesslich ueber el()/textContent, da es sich um echte, ungepruefte Fremddaten handelt. Damit sind alle Kernfunktionen aus anforderung.md umgesetzt. docs/plan.md entsprechend fortgeschrieben.
268 lines
5.0 KiB
CSS
268 lines
5.0 KiB
CSS
/* KI-JSON-Import + Backup-Export/Import (Phase 7), Modal mit zwei Tabs.
|
|
Struktur wird von js/ui/import.js in #import-modal eingehängt. Grundgerüst
|
|
analog zu css/promptGenerator.css (Vollbild auf Mobile, zentriertes
|
|
breites Panel ab 1024px). Formularbausteine (.form-field__label,
|
|
.form-checkbox, .place-form__section-label) nutzen bewusst dieselben
|
|
Klassen wie das Ausflugsziel-Formular statt sie zu duplizieren. */
|
|
|
|
.import-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2400;
|
|
}
|
|
|
|
.import-modal[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.import-modal__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.import-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);
|
|
}
|
|
|
|
.import-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;
|
|
}
|
|
|
|
.import-modal__title {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.import-modal__tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding-bottom: var(--space-sm);
|
|
}
|
|
|
|
.import-modal__tab {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: var(--color-background);
|
|
color: var(--color-text);
|
|
font: inherit;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.import-modal__tab--active {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
color: #fff;
|
|
}
|
|
|
|
.import-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.import-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.import-panel__intro {
|
|
color: var(--color-text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.import-panel__section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
border-top: 1px solid var(--color-border);
|
|
padding-top: var(--space-md);
|
|
}
|
|
|
|
.import-panel__section:first-of-type {
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.import-input {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.import-input__textarea {
|
|
width: 100%;
|
|
min-height: 160px;
|
|
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;
|
|
}
|
|
|
|
.import-input__file {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.import-error {
|
|
color: var(--color-danger);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.import-error[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.import-status {
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.import-preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
border-top: 1px solid var(--color-border);
|
|
padding-top: var(--space-md);
|
|
}
|
|
|
|
.import-preview[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.import-preview__summary {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.import-preview__global-warnings {
|
|
margin: 0;
|
|
padding-left: 1.25em;
|
|
color: var(--color-danger);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.import-preview__global-warnings[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.import-preview__list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.import-preview__item {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.import-preview__item--rejected {
|
|
border-color: var(--color-danger);
|
|
background: #fdecea;
|
|
}
|
|
|
|
.import-preview__item-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.import-preview__name {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.import-preview__category {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.import-preview__badge {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
color: var(--color-danger);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.import-preview__duplicate-note {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.import-preview__warnings,
|
|
.import-preview__reasons {
|
|
margin: 0;
|
|
padding-left: 1.25em;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.import-preview__warnings {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.import-preview__reasons {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
.import-preview__skip-duplicates {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.import-preview__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.import-modal__panel {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: min(840px, 95vw);
|
|
height: min(90vh, 900px);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
}
|