diff --git a/css/bericht.css b/css/bericht.css index 36a3b45..f0662eb 100644 --- a/css/bericht.css +++ b/css/bericht.css @@ -172,12 +172,42 @@ .bericht-canvas-wrap { position: relative; background: var(--colorbackvmenu1, #444); - padding: 10px; border-radius: 4px; + padding: 20px; border-radius: 4px; display: flex; align-items: flex-start; justify-content: center; + min-height: 400px; +} +.bericht-canvas-wrap.empty { + align-items: center; + padding: 40px 20px; } /* WICHTIG: kein max-width auf #pdf-canvas, sonst weicht display- von buffer-size ab und das Fabric-Overlay rutscht weg. Stattdessen rendert JS auf passende Größe. */ -#pdf-canvas { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.4); display: block; } +#pdf-canvas { + background: #fff; + box-shadow: 0 2px 12px rgba(0,0,0,0.4); + display: block; +} +/* Leerer Zustand: A4 Hochformat anzeigen, damit der Canvas nicht winzig wirkt */ +.bericht-canvas-wrap.empty #pdf-canvas { + width: 100%; + max-width: 900px; + aspect-ratio: 1 / 1.414; /* DIN A4 */ + height: auto; +} +.bericht-canvas-wrap.empty::after { + content: "Seite wählen oder Fotos hinzufügen"; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #aaa; + font-size: 16px; + pointer-events: none; + text-align: center; + background: rgba(255,255,255,0.85); + padding: 8px 16px; + border-radius: 6px; +} #fabric-canvas.fabric-overlay { position: absolute !important; pointer-events: auto; } .bericht-page-note { margin-top: 8px; } diff --git a/js/editor.js b/js/editor.js index 2148117..3c44e25 100644 --- a/js/editor.js +++ b/js/editor.js @@ -63,6 +63,10 @@ /* ---------- Init ---------- */ function init() { + // Leer-Zustand: Canvas-Wrap als A4-Hochformat-Platzhalter markieren + const wrapEmpty = document.querySelector('.bericht-canvas-wrap'); + if (wrapEmpty) wrapEmpty.classList.add('empty'); + // Gespeicherte Einstellungen anwenden — VOR Fabric-Init const s = loadSettings(); const colorEl = document.getElementById('tool-color'); @@ -145,7 +149,11 @@ currentPageBuffer = buf; currentPageMime = ct; - currentPageRotation = 0; // wird gleich aus loadPageMeta überschrieben falls gespeichert + currentPageRotation = 0; + + // Empty-Status beenden — Canvas bekommt jetzt echten Inhalt + const wrapL = document.querySelector('.bericht-canvas-wrap'); + if (wrapL) wrapL.classList.remove('empty'); // wird gleich aus loadPageMeta überschrieben falls gespeichert fabricCanvas.clear(); document.getElementById('page-note').value = '';