From ee2b7512e6dd2ed1db7c6b4ea66857c6bf5272ab Mon Sep 17 00:00:00 2001 From: Hermes Agent Date: Wed, 17 Jun 2026 15:48:33 +0200 Subject: [PATCH] Capture-Buttons: rund, SVG-Icons, Datei-Vorschau MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Runde Buttons (68Γ—68px, border-radius:50%) statt rechteckig - Monochrome SVG-Icons in BSN-Blau (#20228a) statt bunter Emojis - Alle drei gleich groß, zentriert in der Reihe - Datei-Vorschau-Balken unter den Buttons: 'πŸ–ΌοΈ foto.jpg (2.3 MB) β€” wird mitgesendet' erscheint sofort nach Auswahl/Aufnahme, verschwindet beim Absenden - onchange-Listener auf allen 4 Inputs --- app.py | 44 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/app.py b/app.py index a936578..7704c7d 100644 --- a/app.py +++ b/app.py @@ -1950,11 +1950,10 @@ def public_frontend(): .submit-body .submit-btn:disabled { opacity:0.5; cursor:default; } .submit-body .status-msg { text-align:center; font-size:0.8rem; margin-top:0.6rem; min-height:1.2rem; } - .capture-row { display:flex; gap:0.5rem; margin-top:0.3rem; } - .capture-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.15rem; background:#fff; border:2px solid #ddd; border-radius:12px; padding:0.7rem 0.3rem; cursor:pointer; transition:all 0.15s; min-height:64px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } - .capture-btn:active { transform:scale(0.95); background:#f0f0f0; border-color:#20228a; } - .capture-icon { font-size:1.6rem; line-height:1; } - .capture-label { font-size:0.7rem; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:0.04em; } + .capture-row { display:flex; gap:0.8rem; margin-top:0.3rem; justify-content:center; } + .capture-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.2rem; background:#fff; border:2px solid #ddd; border-radius:50%; width:68px; height:68px; cursor:pointer; transition:all 0.15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; padding:0; } + .capture-btn:active { transform:scale(0.92); background:#f0f0f0; border-color:#20228a; } + .capture-label { font-size:0.6rem; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:0.04em; } @@ -2027,21 +2026,22 @@ def public_frontend():
- + + @@ -2105,6 +2105,7 @@ def public_frontend(): document.getElementById('subVideo').value = ''; document.getElementById('subAudio').value = ''; document.getElementById('subGallery').value = ''; + document.getElementById('filePreview').style.display = 'none'; document.getElementById('subHalle').value = ''; document.getElementById('subSpiel').value = ''; setTimeout(() => { sOverlay.classList.remove('open'); sOpen = false; sStatus.textContent = ''; }, 2500); @@ -2120,6 +2121,31 @@ def public_frontend(): sSend.textContent = 'πŸ“¨ Absenden'; }); })(); + +// File preview β€” show selected file name after capture/gallery pick +(function() { + var preview = document.getElementById('filePreview'); + var inputs = ['subPhoto','subVideo','subAudio','subGallery']; + function updatePreview() { + var file = null, label = ''; + for (var i = 0; i < inputs.length; i++) { + var f = document.getElementById(inputs[i]); + if (f && f.files[0]) { file = f.files[0]; label = inputs[i]; break; } + } + if (file) { + var typeIcon = label === 'subPhoto' ? 'πŸ–ΌοΈ' : label === 'subVideo' ? '🎬' : label === 'subAudio' ? '🎀' : 'πŸ“Ž'; + var sizeMB = (file.size / (1024*1024)).toFixed(1); + preview.innerHTML = typeIcon + ' ' + file.name + ' (' + sizeMB + ' MB) β€” wird mitgesendet'; + preview.style.display = 'block'; + } else { + preview.style.display = 'none'; + } + } + for (var i = 0; i < inputs.length; i++) { + var el = document.getElementById(inputs[i]); + if (el) el.addEventListener('change', updatePreview); + } +})();