Capture-Buttons: rund, SVG-Icons, Datei-Vorschau
- 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
This commit is contained in:
Hermes Agent
@@ -1950,11 +1950,10 @@ def public_frontend():
|
|||||||
.submit-body .submit-btn:disabled { opacity:0.5; cursor:default; }
|
.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;
|
.submit-body .status-msg { text-align:center; font-size:0.8rem; margin-top:0.6rem;
|
||||||
min-height:1.2rem; }
|
min-height:1.2rem; }
|
||||||
.capture-row { display:flex; gap:0.5rem; margin-top:0.3rem; }
|
.capture-row { display:flex; gap:0.8rem; margin-top:0.3rem; justify-content:center; }
|
||||||
.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 { 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.95); background:#f0f0f0; border-color:#20228a; }
|
.capture-btn:active { transform:scale(0.92); background:#f0f0f0; border-color:#20228a; }
|
||||||
.capture-icon { font-size:1.6rem; line-height:1; }
|
.capture-label { font-size:0.6rem; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:0.04em; }
|
||||||
.capture-label { font-size:0.7rem; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:0.04em; }
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -2027,21 +2026,22 @@ def public_frontend():
|
|||||||
<div class="capture-row">
|
<div class="capture-row">
|
||||||
<label class="capture-btn" id="capturePhotoBtn">
|
<label class="capture-btn" id="capturePhotoBtn">
|
||||||
<input type="file" id="subPhoto" accept="image/*" capture="environment" hidden>
|
<input type="file" id="subPhoto" accept="image/*" capture="environment" hidden>
|
||||||
<span class="capture-icon">📸</span>
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="2" y="5" width="20" height="16" rx="3" stroke="#20228a" stroke-width="2"/><circle cx="8.5" cy="10.5" r="2.5" fill="#20228a"/><path d="M2 17l5-5 4 4 4-6 7 7" stroke="#20228a" stroke-width="2" stroke-linejoin="round"/></svg>
|
||||||
<span class="capture-label">Foto</span>
|
<span class="capture-label">Foto</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="capture-btn" id="captureVideoBtn">
|
<label class="capture-btn" id="captureVideoBtn">
|
||||||
<input type="file" id="subVideo" accept="video/*" capture="environment" hidden>
|
<input type="file" id="subVideo" accept="video/*" capture="environment" hidden>
|
||||||
<span class="capture-icon">🎬</span>
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="2" y="4" width="20" height="16" rx="3" stroke="#20228a" stroke-width="2"/><path d="M10 8.5l5 3.5-5 3.5V8.5z" fill="#20228a"/></svg>
|
||||||
<span class="capture-label">Video</span>
|
<span class="capture-label">Video</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="capture-btn" id="captureAudioBtn">
|
<label class="capture-btn" id="captureAudioBtn">
|
||||||
<input type="file" id="subAudio" accept="audio/*" capture hidden>
|
<input type="file" id="subAudio" accept="audio/*" capture hidden>
|
||||||
<span class="capture-icon">🎤</span>
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="6" width="7" height="12" rx="2" fill="#20228a"/><path d="M10 9.5l7-6v17l-7-6" stroke="#20228a" stroke-width="2" stroke-linejoin="round"/><path d="M19 7c2.5 1.5 2.5 5.5 0 7" stroke="#20228a" stroke-width="2" stroke-linecap="round"/></svg>
|
||||||
<span class="capture-label">Audio</span>
|
<span class="capture-label">Audio</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<input type="file" id="subGallery" accept="image/*,video/*,audio/*" style="margin-top:0.5rem;font-size:0.72rem;color:var(--text3);">
|
<input type="file" id="subGallery" accept="image/*,video/*,audio/*" style="margin-top:0.5rem;font-size:0.72rem;color:#888;">
|
||||||
|
<div id="filePreview" style="display:none;margin-top:0.5rem;padding:0.5rem 0.7rem;background:#f0f4ff;border-radius:8px;font-size:0.75rem;color:#20228a;font-weight:500;"></div>
|
||||||
<label>📍 Halle / Stand (optional)</label>
|
<label>📍 Halle / Stand (optional)</label>
|
||||||
<input type="text" id="subHalle" placeholder="z.B. H3 B123" maxlength="20">
|
<input type="text" id="subHalle" placeholder="z.B. H3 B123" maxlength="20">
|
||||||
<label>🎯 Spieltitel (optional)</label>
|
<label>🎯 Spieltitel (optional)</label>
|
||||||
@@ -2105,6 +2105,7 @@ def public_frontend():
|
|||||||
document.getElementById('subVideo').value = '';
|
document.getElementById('subVideo').value = '';
|
||||||
document.getElementById('subAudio').value = '';
|
document.getElementById('subAudio').value = '';
|
||||||
document.getElementById('subGallery').value = '';
|
document.getElementById('subGallery').value = '';
|
||||||
|
document.getElementById('filePreview').style.display = 'none';
|
||||||
document.getElementById('subHalle').value = '';
|
document.getElementById('subHalle').value = '';
|
||||||
document.getElementById('subSpiel').value = '';
|
document.getElementById('subSpiel').value = '';
|
||||||
setTimeout(() => { sOverlay.classList.remove('open'); sOpen = false; sStatus.textContent = ''; }, 2500);
|
setTimeout(() => { sOverlay.classList.remove('open'); sOpen = false; sStatus.textContent = ''; }, 2500);
|
||||||
@@ -2120,6 +2121,31 @@ def public_frontend():
|
|||||||
sSend.textContent = '📨 Absenden';
|
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 + ' <strong>' + file.name + '</strong> (' + 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);
|
||||||
|
}
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Reference in New Issue
Block a user