Generador de Página de Contacto Personalizada
Crea una página de contacto sencilla y un código QR para compartir fácilmente tu información.
Datos de Contacto y Personalización
Vista Previa y Descarga
Completa el formulario y haz clic en "Generar Página de Contacto" para ver la vista previa aquí.
Código HTML copiado al portapapeles
${profilePic ? `
` : ''}
`;
}
// Función para copiar el HTML generado al portapapeles
function copyGeneratedHtml() {
if (!generatedFullHtml) {
alert('Por favor, genera la página de contacto primero.');
return;
}
navigator.clipboard.writeText(generatedFullHtml)
.then(() => {
// Mostrar notificación
const notification = document.getElementById('copy-notification');
notification.classList.add('show');
// Ocultar notificación después de 3 segundos
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
})
.catch(err => {
console.error('Error al copiar: ', err);
alert('Error al copiar el código HTML. Por favor, inténtalo de nuevo.');
});
}
function downloadContact() {
const name = document.getElementById('name').value;
const phone = document.getElementById('phone').value;
const whatsapp = document.getElementById('whatsapp').value;
const email = document.getElementById('email').value;
const website = document.getElementById('website').value;
const facebook = document.getElementById('facebook').value;
const twitter = document.getElementById('twitter').value;
const linkedin = document.getElementById('linkedin').value;
const instagram = document.getElementById('instagram').value;
const youtube = document.getElementById('youtube').value;
const tiktok = document.getElementById('tiktok').value;
const map = document.getElementById('map').value;
if (!name) {
alert('Por favor, genera la página primero para descargar el contacto.');
return;
}
let vCardData = `BEGIN:VCARD\r\nVERSION:3.0\r\nFN:${name}\r\nORG:${name};\r\n`;
if (phone) {
vCardData += `TEL;TYPE=work,voice:${phone}\r\n`;
}
if (whatsapp) {
vCardData += `TEL;TYPE=CELL,WHATSAPP:${whatsapp}\r\n`;
}
if (email) {
vCardData += `EMAIL:${email}\r\n`;
}
if (website) {
vCardData += `URL;TYPE=Website:${website}\r\n`;
}
if (facebook) {
vCardData += `X-SOCIALPROFILE;TYPE=Facebook:${facebook}\r\n`;
}
if (twitter) {
vCardData += `X-SOCIALPROFILE;TYPE=Twitter:${twitter}\r\n`;
}
if (linkedin) {
vCardData += `X-SOCIALPROFILE;TYPE=LinkedIn:${linkedin}\r\n`;
}
if (instagram) {
vCardData += `X-SOCIALPROfile;TYPE=Instagram:${instagram}\r\n`;
}
if (youtube) {
vCardData += `X-SOCIALPROFILE;TYPE=YouTube:${youtube}\r\n`;
}
if (tiktok) {
vCardData += `X-SOCIALPROFILE;TYPE=TikTok:${tiktok}\\r\\n`;
}
if (map) {
vCardData += `URL;TYPE=Map:${map}\r\n`;
}
vCardData += `END:VCARD`;
const blob = new Blob([vCardData], { type: 'text/vcard' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `contacto_${name.replace(/\s+/g, '_').toLowerCase()}.vcf`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
function downloadPage() {
const name = document.getElementById('name').value;
if (!name) {
alert('Por favor, genera la página de contacto primero.');
return;
}
// Asegurarse de que tenemos el HTML actualizado
generateFullHtmlString();
const blob = new Blob([generatedFullHtml], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `pagina_contacto_${name.replace(/\s+/g, '_').toLowerCase()}.html`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
function resetForm() {
document.getElementById('contact-form').reset();
document.getElementById('contact-page-preview').innerHTML = '${name}
${description ? `${description}
` : ''}
${contactLinksHtml}
Completa el formulario y haz clic en "Generar Página de Contacto" para ver la vista previa aquí.
'; document.getElementById('download-section').style.display = 'none'; document.getElementById('qr-code-container').innerHTML = ''; document.getElementById('contact-page-preview').style.backgroundImage = 'none'; document.getElementById('contact-page-preview').style.backgroundColor = '#f9f9f9'; document.getElementById('contact-page-preview').style.color = '#333'; generatedFullHtml = ''; } window.onload = function() { const urlParams = new URLSearchParams(window.location.search); const data = urlParams.get('data'); if (data) { try { const decodedData = JSON.parse(atob(data)); document.getElementById('name').value = decodedData.name || ''; document.getElementById('description').value = decodedData.description || ''; document.getElementById('profilePic').value = decodedData.profilePic || ''; document.getElementById('phone').value = decodedData.phone || ''; document.getElementById('whatsapp').value = decodedData.whatsapp || ''; document.getElementById('email').value = decodedData.email || ''; document.getElementById('website').value = decodedData.website || ''; document.getElementById('facebook').value = decodedData.facebook || ''; document.getElementById('twitter').value = decodedData.twitter || ''; document.getElementById('linkedin').value = decodedData.linkedin || ''; document.getElementById('instagram').value = decodedData.instagram || ''; document.getElementById('youtube').value = decodedData.youtube || ''; document.getElementById('tiktok').value = decodedData.tiktok || ''; document.getElementById('map').value = decodedData.map || ''; document.getElementById('mainFontColor').value = decodedData.mainFontColor || '#333333'; document.getElementById('mainBgColor').value = decodedData.mainBgColor || '#f5f7fa'; document.getElementById('bgImageUrl').value = decodedData.bgImageUrl || ''; document.getElementById('bgImageRepeat').value = decodedData.bgImageRepeat || 'no-repeat'; document.getElementById('bgImageSize').value = decodedData.bgImageSize || 'cover'; document.getElementById('bgImageAttachment').value = decodedData.bgImageAttachment || 'scroll'; document.getElementById('cardBgColor').value = decodedData.cardBgColor || '#ffffff'; document.getElementById('cardFontColor').value = decodedData.cardFontColor || '#333333'; document.getElementById('outerCircleColor').value = decodedData.outerCircleColor || '#000000'; document.getElementById('innerCircleColor').value = decodedData.innerCircleColor || '#FFFFFF'; document.getElementById('buttonBorder').value = decodedData.buttonBorderStyle || 'none'; generatePage(); } catch (e) { console.error("Error al decodificar los parámetros de la URL:", e); } } };