ux: vCard-Eingabe mit Platzhaltern und Live-Vorschau verbessern

Ergänzt aussagekräftige Beispiel-Platzhalter im vCard-Formular und zeigt den generierten vCard-Text als Live-Vorschau im vCard-Modus an. Das erleichtert die Eingabe und macht das spätere QR-Ergebnis sofort nachvollziehbar.

Made-with: Cursor

main.js

@@ -42,6 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const shareBtn = document.getElementById('share');
     const shareHint = document.getElementById('share-hint');
     const eventBerlinPreview = document.getElementById('event-berlin-preview');
+    const vcardPreview = document.getElementById('vcard-preview');
 
     const MAX_EVENT_TITLE = 2000;
     const MAX_EVENT_LOCATION = 1000;
@@ -688,6 +689,21 @@ document.addEventListener('DOMContentLoaded', function() {
         return lines.join('\r\n');
     }
 
+    function updateVCardPreview(text) {
+        if (!vcardPreview) {
+            return;
+        }
+        if (contentModeSelect.value !== 'vcard') {
+            vcardPreview.textContent = '';
+            return;
+        }
+        if (text && String(text).trim()) {
+            vcardPreview.textContent = String(text);
+            return;
+        }
+        vcardPreview.textContent = 'Bitte mindestens Vorname, Nachname oder Organisation eingeben.';
+    }
+
     function generateQRCode() {
         const mode = contentModeSelect.value;
         const text = textInput.value.trim();
@@ -707,6 +723,9 @@ document.addEventListener('DOMContentLoaded', function() {
         // Clear previous error
         errorMessage.textContent = '';
         downloadBtn.style.display = 'none';
+        if (mode !== 'vcard') {
+            updateVCardPreview('');
+        }
 
         let qrText = '';
 
@@ -811,6 +830,7 @@ document.addEventListener('DOMContentLoaded', function() {
             const hasIdentity = firstName.trim() || lastName.trim() || org.trim();
 
             if (!hasIdentity) {
+                updateVCardPreview('');
                 errorMessage.textContent = 'Bitte geben Sie mindestens Vorname, Nachname oder Organisation an';
                 qrcodeCanvas.style.display = 'none';
                 qrcodeImg.style.display = 'none';
@@ -828,6 +848,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 address: address,
                 note: note
             });
+            updateVCardPreview(qrText);
             textInput.value = qrText;
             toggleClearButton();
         } else if (mode === 'wifi') {