Formular:Da25: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 16. Oktober 2025, 13:39 Uhr

Wie wollen Sie Ihre Seite nennen?

@@ Zeile 8: / Zeile 8: @@
 <div id="wikiPreview" style="display:none; padding-bottom:25px; margin-bottom:25px; border-bottom:1px solid #AAAAAA;"></div>
-<div style="float:right; width:220px; margin:0 0 20px 20px;">
+<div style="float:right; width:300px; margin:40px 20px;">
-   <div style="background-color:#f8f8f8; border:1px solid #ccc; border-radius:10px; padding:15px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.08);">
+   <div style="background-color:#fff; border:1px solid #ccc; border-radius:12px; padding:20px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.1);">
-     <div style="font-size:130%; margin-bottom:6px;">📷</div>
+     <div style="font-size:150%; margin-bottom:8px;">📷</div>
-     <div style="font-weight:bold; margin-bottom:14px;">Füge dein Bild hinzu</div>
+     <div style="font-weight:bold; margin-bottom:15px;">Bild hochladen</div>
-    <!-- Upload-Feld mittig -->
+     <div id="uploadBox" style="border:2px dashed #bbb; padding:20px; border-radius:10px; background-color:#fafafa;">
-     <div style="display:flex; justify-content:center; align-items:center;">
+      {{field|Bild|input type=upload|uploadable|max values=1|mandatory}}
-{{field|Bilder|input type=upload|multiple|delimiter=,|uploadable|max values=1|mandatory}}}
+    </div>
+    <div id="previewContainer" style="margin-top:15px; display:none;">
+      <img id="uploadedPreview" src="" style="max-width:100%; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.1);" />
      </div>
    </div>
 </div>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const input = document.querySelector('input[type="file"]');
+  const previewContainer = document.getElementById('previewContainer');
+  const previewImg = document.getElementById('uploadedPreview');
+  if (input) {
+    input.addEventListener('change', function(e) {
+      const file = e.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = function(evt) {
+          previewImg.src = evt.target.result;
+          previewContainer.style.display = 'block';
+        };
+        reader.readAsDataURL(file);
+      }
+    });
+  }
+});
+</script>
 =Persönliches (z. B. Name, Alter, Herkunft)=