elpatron/QR-Code-Generator
1
0
Fork 0
Code Issues Pull Requests Activity

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

Browse Source 
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
This commit is contained in:
elpatron
2026-04-25 14:08:49 +02:00
parent 0ca6e891cc
commit 319ee44aae
2 changed files with 53 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+32 -9
View File
@@ -348,6 +348,26 @@
color: #6b7280; color: #6b7280;
margin-top: 4px; margin-top: 4px;
} }
.vcard-preview-label {
margin: 4px 0 6px 0;
color: #374151;
font-weight: 500;
}
.vcard-preview {
margin: 0 0 15px 0;
padding: 10px;
border: 1px solid #e5e7eb;
border-radius: 6px;
background: #f9fafb;
color: #374151;
font-size: 12px;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
min-height: 80px;
}
</style> </style>
</head> </head>
<body> <body>
@@ -439,44 +459,47 @@
<div class="options-row"> <div class="options-row">
<div class="options-col"> <div class="options-col">
<label for="vcard-first-name">Vorname:</label> <label for="vcard-first-name">Vorname:</label>
<input type="text" id="vcard-first-name" placeholder="" autocomplete="off"> <input type="text" id="vcard-first-name" placeholder="Max" autocomplete="off">
</div> </div>
<div class="options-col"> <div class="options-col">
<label for="vcard-last-name">Nachname:</label> <label for="vcard-last-name">Nachname:</label>
<input type="text" id="vcard-last-name" placeholder="" autocomplete="off"> <input type="text" id="vcard-last-name" placeholder="Mustermann" autocomplete="off">
</div> </div>
</div> </div>
<div class="options-row"> <div class="options-row">
<div class="options-col"> <div class="options-col">
<label for="vcard-org">Organisation:</label> <label for="vcard-org">Organisation:</label>
<input type="text" id="vcard-org" placeholder="" autocomplete="off"> <input type="text" id="vcard-org" placeholder="Medi Software GmbH" autocomplete="off">
</div> </div>
<div class="options-col"> <div class="options-col">
<label for="vcard-title">Position (optional):</label> <label for="vcard-title">Position (optional):</label>
<input type="text" id="vcard-title" placeholder="" autocomplete="off"> <input type="text" id="vcard-title" placeholder="IT-Leitung" autocomplete="off">
</div> </div>
</div> </div>
<div class="options-row"> <div class="options-row">
<div class="options-col"> <div class="options-col">
<label for="vcard-phone">Telefon (optional):</label> <label for="vcard-phone">Telefon (optional):</label>
<input type="tel" id="vcard-phone" placeholder="" autocomplete="off"> <input type="tel" id="vcard-phone" placeholder="+49 30 1234567" autocomplete="off">
</div> </div>
<div class="options-col"> <div class="options-col">
<label for="vcard-email">E-Mail (optional):</label> <label for="vcard-email">E-Mail (optional):</label>
<input type="email" id="vcard-email" placeholder="" autocomplete="off"> <input type="email" id="vcard-email" placeholder="max@beispiel.de" autocomplete="off">
</div> </div>
</div> </div>
<label for="vcard-website">Webseite (optional):</label> <label for="vcard-website">Webseite (optional):</label>
<input type="url" id="vcard-website" placeholder="" autocomplete="off"> <input type="url" id="vcard-website" placeholder="https://beispiel.de" autocomplete="off">
<label for="vcard-address">Adresse (optional):</label> <label for="vcard-address">Adresse (optional):</label>
<textarea id="vcard-address" placeholder="" rows="2"></textarea> <textarea id="vcard-address" placeholder="Musterstraße 1, 10115 Berlin" rows="2"></textarea>
<label for="vcard-note">Notiz (optional):</label> <label for="vcard-note">Notiz (optional):</label>
<textarea id="vcard-note" placeholder="" rows="2"></textarea> <textarea id="vcard-note" placeholder="Erreichbar Mo-Fr 9-17 Uhr" rows="2"></textarea>
<p class="vcard-preview-label">vCard-Vorschau:</p>
<pre id="vcard-preview" class="vcard-preview" aria-live="polite">Bitte mindestens Vorname, Nachname oder Organisation eingeben.</pre>
</div> </div>
<div class="options-row"> <div class="options-row">
main.js
+21
View File
@@ -42,6 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
const shareBtn = document.getElementById('share'); const shareBtn = document.getElementById('share');
const shareHint = document.getElementById('share-hint'); const shareHint = document.getElementById('share-hint');
const eventBerlinPreview = document.getElementById('event-berlin-preview'); const eventBerlinPreview = document.getElementById('event-berlin-preview');
const vcardPreview = document.getElementById('vcard-preview');
const MAX_EVENT_TITLE = 2000; const MAX_EVENT_TITLE = 2000;
const MAX_EVENT_LOCATION = 1000; const MAX_EVENT_LOCATION = 1000;
@@ -688,6 +689,21 @@ document.addEventListener('DOMContentLoaded', function() {
return lines.join('\r\n'); 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() { function generateQRCode() {
const mode = contentModeSelect.value; const mode = contentModeSelect.value;
const text = textInput.value.trim(); const text = textInput.value.trim();
@@ -707,6 +723,9 @@ document.addEventListener('DOMContentLoaded', function() {
// Clear previous error // Clear previous error
errorMessage.textContent = ''; errorMessage.textContent = '';
downloadBtn.style.display = 'none'; downloadBtn.style.display = 'none';
if (mode !== 'vcard') {
updateVCardPreview('');
}
let qrText = ''; let qrText = '';
@@ -811,6 +830,7 @@ document.addEventListener('DOMContentLoaded', function() {
const hasIdentity = firstName.trim() || lastName.trim() || org.trim(); const hasIdentity = firstName.trim() || lastName.trim() || org.trim();
if (!hasIdentity) { if (!hasIdentity) {
updateVCardPreview('');
errorMessage.textContent = 'Bitte geben Sie mindestens Vorname, Nachname oder Organisation an'; errorMessage.textContent = 'Bitte geben Sie mindestens Vorname, Nachname oder Organisation an';
qrcodeCanvas.style.display = 'none'; qrcodeCanvas.style.display = 'none';
qrcodeImg.style.display = 'none'; qrcodeImg.style.display = 'none';
@@ -828,6 +848,7 @@ document.addEventListener('DOMContentLoaded', function() {
address: address, address: address,
note: note note: note
}); });
updateVCardPreview(qrText);
textInput.value = qrText; textInput.value = qrText;
toggleClearButton(); toggleClearButton();
} else if (mode === 'wifi') { } else if (mode === 'wifi') {