| Path : /var/www/html/imza-ob/EmailSignatureDesigner/static/js/ |
|
B-Con CMD Config cPanel C-Rdp D-Log Info Jump Mass Ransom Symlink vHost Zone-H |
| Current File : /var/www/html/imza-ob/EmailSignatureDesigner/static/js/main.js |
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('signatureForm');
const formElements = form.elements;
const previewArea = document.getElementById('signaturePreview');
const logoUrl = document.getElementById('logoUrl');
const defaultLogoUrl = 'https://www.ofisbulutta.com/wp-content/uploads/2017/08/umesaj30929_0w1lapza7w3.png';
let uploadedLogoData = defaultLogoUrl;
const logoUpload = document.getElementById('logoUpload');
logoUpload.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
if (file.size > 1024 * 1024) {
alert('Logo dosyası 1MB\'den küçük olmalıdır.');
this.value = '';
return;
}
const reader = new FileReader();
reader.onload = function(e) {
uploadedLogoData = e.target.result;
logoUrl.value = '';
updatePreview();
};
reader.readAsDataURL(file);
}
});
logoUrl.addEventListener('input', function() {
if (this.value) {
uploadedLogoData = this.value;
} else {
uploadedLogoData = defaultLogoUrl;
}
logoUpload.value = '';
updatePreview();
});
document.getElementById('clearLogo').addEventListener('click', function() {
logoUpload.value = '';
logoUrl.value = defaultLogoUrl;
uploadedLogoData = defaultLogoUrl;
updatePreview();
});
const privacyText = '<span style="color:#808080;font-family:tahoma;font-size:xx-small">Bu e-mail mesaji ve ekleri, isimleri yazili alicilar disindaki kisilere aciklanmamasi, dagitilmamasi ve iletilmemesi gereken kisiye ozel ve gizli bilgiler icerebilir.<br/><br/>Mesajin muhatabi degilseniz lutfen gonderici ile irtibat kurunuz, mesaj ve eklerini siliniz.</span>';
const socialIcons = {
linkedin: '<a href="{url}" style="color:#007BFF"><i class="fab fa-linkedin"></i></a>',
facebook: '<a href="{url}" style="color:#007BFF"><i class="fab fa-facebook"></i></a>',
instagram: '<a href="{url}" style="color:#007BFF"><i class="fab fa-instagram"></i></a>',
youtube: '<a href="{url}" style="color:#007BFF"><i class="fab fa-youtube"></i></a>'
};
function getSocialLinks(data) {
let links = '';
for (let platform of ['linkedin', 'facebook', 'instagram', 'youtube']) {
if (data[platform]) {
links += socialIcons[platform].replace('{url}', data[platform]) + ' ';
}
}
return links ? `<div style="margin-top:10px">${links}</div>` : '';
}
function updatePreview() {
const data = {
font: document.getElementById('fontSelect').value,
logo: uploadedLogoData,
fullName: document.getElementById('fullName').value || 'John Doe',
jobTitle: document.getElementById('jobTitle').value || 'Marketing Manager',
company: document.getElementById('company').value || 'Acme Inc.',
email: document.getElementById('email').value || 'john@example.com',
phone: document.getElementById('phone').value || '+90 555 123 4567',
address: document.getElementById('address').value || 'Company Address',
linkedin: document.getElementById('linkedin').value,
facebook: document.getElementById('facebook').value,
instagram: document.getElementById('instagram').value,
youtube: document.getElementById('youtube').value,
includePrivacy: document.getElementById('includePrivacy').checked
};
const selectedTemplate = document.getElementById('templateSelect').value;
previewArea.innerHTML = templates[selectedTemplate](data);
}
// Initial preview
window.addEventListener('load', function() {
logoUrl.value = defaultLogoUrl;
updatePreview();
});
Array.from(formElements).forEach(element => {
element.addEventListener('input', updatePreview);
element.addEventListener('change', updatePreview);
});
// Copy functions
document.getElementById('copyHtml').addEventListener('click', function() {
const tempTextArea = document.createElement('textarea');
tempTextArea.value = previewArea.innerHTML;
document.body.appendChild(tempTextArea);
tempTextArea.select();
document.execCommand('copy');
document.body.removeChild(tempTextArea);
alert('HTML kodu kopyalandı!');
});
document.getElementById('copySignature').addEventListener('click', function() {
const range = document.createRange();
range.selectNode(previewArea);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
alert('İmza kopyalandı!');
});
const templates = {
template1: (data) => `<div style="font-family:${data.font}">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div><strong>${data.fullName}</strong><br/>
${data.jobTitle} | ${data.company}<br/>
${data.email}<br/>${data.phone}<br/>${data.address}</div>
${getSocialLinks(data)}
${data.includePrivacy?privacyText:''}</div>`,
template2: (data) => `<div style="font-family:${data.font};border-left:3px solid #007bff;padding-left:10px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div><strong style="color:#007bff">${data.fullName}</strong><br/>
${data.jobTitle} | ${data.company}<br/>
${data.email}<br/>${data.phone}<br/>${data.address}</div>
${getSocialLinks(data)}
${data.includePrivacy?privacyText:''}</div>`,
template3: (data) => `<div style="font-family:${data.font};text-align:center;background:#f8f9fa;padding:10px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div><strong style="font-size:1.2em">${data.fullName}</strong><br/>
<em>${data.jobTitle} | ${data.company}</em><br/>
${data.email}<br/>${data.phone}<br/>${data.address}</div>
${getSocialLinks(data)}
${data.includePrivacy?privacyText:''}</div>`,
template4: (data) => `<div style="font-family:${data.font};padding:10px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div style="margin-top:10px"><strong>${data.fullName}</strong><br/>
${data.jobTitle} • ${data.company}<br/>
${data.email} • ${data.phone}<br/>${data.address}</div>
${getSocialLinks(data)}
${data.includePrivacy?privacyText:''}</div>`,
template5: (data) => `<div style="font-family:${data.font};border:1px solid #ccc;padding:15px;background:#fff">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div><strong style="font-size:1.1em;color:#333">${data.fullName}</strong><br/>
<strong style="color:#666">${data.jobTitle}</strong><br/>
<span style="color:#999">${data.company}</span><br/>
${data.email}<br/>${data.phone}<br/>${data.address}</div>
${getSocialLinks(data)}
${data.includePrivacy?privacyText:''}</div>`,
template6: (data) => `<div style="font-family:${data.font};border-radius:5px;overflow:hidden">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div style="background:#2d2d2d;color:#fff;padding:10px"><strong>${data.fullName}</strong><br/>
${data.jobTitle} | ${data.company}</div>
<div style="padding:10px;background:#f4f4f4;color:#333">
${data.email}<br/>${data.phone}<br/>${data.address}</div>
${getSocialLinks(data)}
${data.includePrivacy?privacyText:''}</div>`,
template7: (data) => `<div style="font-family:${data.font}">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div><strong style="font-size:1.2em">${data.fullName}</strong><br/>
<em>${data.jobTitle}</em><br/>
${data.company}<br/>
${data.email}<br/>${data.phone}<br/>${data.address}</div>
${getSocialLinks(data)}
${data.includePrivacy?privacyText:''}</div>`,
template8: (data) => `<div style="font-family:${data.font};max-width:400px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<table style="width:100%;border-collapse:collapse">
<tr><td><strong>${data.fullName}</strong></td></tr>
<tr><td>${data.jobTitle} | ${data.company}</td></tr>
<tr><td>${data.email}</td></tr>
<tr><td>${data.phone}</td></tr>
<tr><td>${data.address}</td></tr>
${data.linkedin||data.facebook||data.instagram||data.youtube?`<tr><td>${getSocialLinks(data)}</td></tr>`:''}</table>
${data.includePrivacy?privacyText:''}</div>`,
template9: (data) => `<div style="font-family:${data.font};background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);padding:15px;border-radius:8px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div><strong style="color:#2c3e50">${data.fullName}</strong><br/>
<span style="color:#34495e">${data.jobTitle} | ${data.company}</span><br/>
<span style="color:#7f8c8d">${data.email}<br/>${data.phone}<br/>${data.address}</span></div>
${getSocialLinks(data)}
${data.includePrivacy?privacyText:''}</div>`,
template10: (data) => `<div style="font-family:${data.font};border:3px solid #e74c3c;border-radius:10px;padding:15px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div><strong style="color:#e74c3c;font-size:1.2em">${data.fullName}</strong><br/>
<span style="color:#2ecc71">${data.jobTitle}</span> | <span style="color:#3498db">${data.company}</span><br/>
<span style="color:#95a5a6">${data.email}<br/>${data.phone}<br/>${data.address}</span></div>
${getSocialLinks(data)}
${data.includePrivacy?privacyText:''}</div>`,
template11: (data) => `<div style="font-family:${data.font};display:grid;grid-template-columns:200px 1fr;gap:20px;background:#f8f9fa;padding:20px;border-radius:8px">
${data.logo?`<div>${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}</div>`:''}
<div>
<h2 style="margin:0;color:#2c3e50;font-size:20px">${data.fullName}</h2>
<p style="margin:5px 0;color:#34495e">${data.jobTitle}<br/>${data.company}</p>
<p style="margin:5px 0;color:#7f8c8d">${data.email}<br/>${data.phone}<br/>${data.address}</p>
${getSocialLinks(data)}
</div>
${data.includePrivacy?`<div style="grid-column:1/3">${privacyText}</div>`:''}
</div>`,
template12: (data) => `<div style="font-family:${data.font};border:none;border-left:5px solid #3498db;padding:15px;background:linear-gradient(to right,#f5f6fa,#fff)">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div style="margin-left:10px">
<strong style="font-size:18px;color:#2c3e50">${data.fullName}</strong>
<p style="margin:5px 0;color:#34495e;font-style:italic">${data.jobTitle} | ${data.company}</p>
<p style="margin:5px 0;color:#7f8c8d">${data.email} | ${data.phone}</p>
<p style="margin:5px 0;color:#7f8c8d">${data.address}</p>
${getSocialLinks(data)}
</div>
${data.includePrivacy?privacyText:''}
</div>`,
template13: (data) => `<div style="font-family:${data.font};background:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.1);border-radius:10px;overflow:hidden">
<div style="background:#2980b9;padding:15px;color:#fff">
<strong style="font-size:20px">${data.fullName}</strong>
<p style="margin:5px 0;opacity:0.9">${data.jobTitle}</p>
</div>
<div style="padding:15px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<p style="margin:5px 0;color:#333">${data.company}</p>
<p style="margin:5px 0;color:#666">${data.email}<br/>${data.phone}<br/>${data.address}</p>
${getSocialLinks(data)}
</div>
${data.includePrivacy?`<div style="padding:10px;background:#f8f9fa">${privacyText}</div>`:''}
</div>`,
template14: (data) => `<div style="font-family:${data.font};display:flex;background:#fff;border:1px solid #e1e1e1;border-radius:4px">
${data.logo?`<div style="padding:20px;border-right:1px solid #e1e1e1">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
</div>`:''}
<div style="padding:20px">
<strong style="font-size:18px;color:#333">${data.fullName}</strong>
<p style="margin:5px 0;color:#666">${data.jobTitle}<br/>${data.company}</p>
<div style="height:1px;background:#e1e1e1;margin:10px 0"></div>
<p style="margin:5px 0;color:#999">${data.email}<br/>${data.phone}<br/>${data.address}</p>
${getSocialLinks(data)}
</div>
${data.includePrivacy?`<div style="padding:10px;background:#f8f9fa;border-top:1px solid #e1e1e1">${privacyText}</div>`:''}
</div>`,
template15: (data) => `<div style="font-family:${data.font};background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px;color:#fff;border-radius:10px">
<div style="background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);padding:15px;border-radius:8px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<strong style="font-size:22px;display:block;margin-bottom:5px">${data.fullName}</strong>
<p style="margin:5px 0;opacity:0.9">${data.jobTitle} | ${data.company}</p>
<p style="margin:5px 0;opacity:0.8">${data.email}<br/>${data.phone}<br/>${data.address}</p>
<div style="margin-top:10px">
${getSocialLinks(data)}
</div>
</div>
${data.includePrivacy?`<div style="margin-top:10px;padding:10px;background:rgba(255,255,255,0.1);border-radius:8px;font-size:0.8em">${privacyText}</div>`:''}
</div>`,
template16: (data) => `<div style="font-family:${data.font};display:grid;grid-template-columns:auto 1fr;gap:30px;background:#1a1a1a;color:#fff;padding:25px;border-radius:15px">
${data.logo?`<div>
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
</div>`:''}
<div>
<h2 style="margin:0;font-size:24px;color:#3498db">${data.fullName}</h2>
<p style="margin:8px 0;color:#bbb;font-size:16px">${data.jobTitle}<br/>${data.company}</p>
<div style="width:50px;height:3px;background:#3498db;margin:15px 0"></div>
<p style="margin:8px 0;color:#999">${data.email}<br/>${data.phone}<br/>${data.address}</p>
${getSocialLinks(data)}
</div>
${data.includePrivacy?`<div style="grid-column:1/3;margin-top:20px;padding-top:20px;border-top:1px solid #333">${privacyText}</div>`:''}
</div>`,
template17: (data) => `<div style="font-family:${data.font};background:#fff;border:2px solid #f1f1f1;border-radius:12px;overflow:hidden">
<div style="background:#f8f9fa;padding:20px;text-align:center">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
</div>
<div style="padding:20px">
<div style="text-align:center">
<strong style="font-size:22px;color:#333">${data.fullName}</strong>
<p style="margin:5px 0;color:#666">${data.jobTitle}</p>
<p style="margin:5px 0;color:#999">${data.company}</p>
</div>
<div style="margin:15px 0;height:1px;background:linear-gradient(to right,transparent,#e1e1e1,transparent)"></div>
<div style="text-align:center">
<p style="margin:5px 0;color:#666">${data.email}<br/>${data.phone}<br/>${data.address}</p>
${getSocialLinks(data)}
</div>
</div>
${data.includePrivacy?`<div style="padding:15px;background:#f8f9fa;border-top:1px solid #f1f1f1">${privacyText}</div>`:''}
</div>`,
template18: (data) => `<div style="font-family:${data.font};background:#2c3e50;color:#fff;padding:25px;border-radius:5px">
<div style="display:flex;align-items:center;gap:20px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div>
<strong style="font-size:24px;display:block;margin-bottom:5px">${data.fullName}</strong>
<span style="color:#3498db">${data.jobTitle}</span>
<span style="color:#bdc3c7"> | ${data.company}</span>
</div>
</div>
<div style="margin:20px 0;height:2px;background:linear-gradient(to right,#3498db,#2ecc71)"></div>
<div style="display:flex;justify-content:space-between;align-items:flex-start">
<div style="color:#ecf0f1">
${data.email}<br/>${data.phone}<br/>${data.address}
</div>
<div>${getSocialLinks(data)}</div>
</div>
${data.includePrivacy?`<div style="margin-top:20px;padding-top:20px;border-top:1px solid #34495e">${privacyText}</div>`:''}
</div>`,
template19: (data) => `<div style="font-family:${data.font};position:relative;background:#fff;padding:30px;border:1px solid #e1e1e1">
<div style="position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(to bottom,#ff6b6b,#f53b57)"></div>
<div style="margin-left:15px">
<div style="display:flex;align-items:center;gap:20px;margin-bottom:20px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div>
<strong style="font-size:26px;color:#333">${data.fullName}</strong>
<p style="margin:5px 0;color:#666">${data.jobTitle}</p>
<p style="margin:0;color:#999">${data.company}</p>
</div>
</div>
<div style="display:flex;gap:30px">
<div style="flex:1">
<p style="margin:5px 0;color:#666">
<i class="fas fa-envelope" style="color:#ff6b6b;margin-right:10px"></i>${data.email}
</p>
<p style="margin:5px 0;color:#666">
<i class="fas fa-phone" style="color:#ff6b6b;margin-right:10px"></i>${data.phone}
</p>
<p style="margin:5px 0;color:#666">
<i class="fas fa-map-marker-alt" style="color:#ff6b6b;margin-right:10px"></i>${data.address}
</p>
</div>
<div>${getSocialLinks(data)}</div>
</div>
</div>
${data.includePrivacy?`<div style="margin-top:20px;padding-top:20px;border-top:1px solid #e1e1e1">${privacyText}</div>`:''}
</div>`,
template20: (data) => `<div style="font-family:${data.font};background:#f8f9fa;border-radius:20px;overflow:hidden">
<div style="background:linear-gradient(45deg,#0c2461,#1e3799);padding:30px;color:#fff;text-align:center">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<h2 style="margin:0;font-size:28px">${data.fullName}</h2>
<p style="margin:10px 0;opacity:0.9">${data.jobTitle}</p>
<p style="margin:5px 0;opacity:0.8">${data.company}</p>
</div>
<div style="padding:20px">
<div style="display:flex;justify-content:space-around;text-align:center">
<div>
<i class="fas fa-envelope" style="color:#0c2461;font-size:24px;margin-bottom:10px"></i>
<p style="margin:5px 0;color:#666">${data.email}</p>
</div>
<div>
<i class="fas fa-phone" style="color:#0c2461;font-size:24px;margin-bottom:10px"></i>
<p style="margin:5px 0;color:#666">${data.phone}</p>
</div>
<div>
<i class="fas fa-map-marker-alt" style="color:#0c2461;font-size:24px;margin-bottom:10px"></i>
<p style="margin:5px 0;color:#666">${data.address}</p>
</div>
</div>
<div style="text-align:center;margin-top:20px">${getSocialLinks(data)}</div>
</div>
${data.includePrivacy?`<div style="padding:15px;background:#e8e8e8">${privacyText}</div>`:''}
</div>`,
template21: (data) => `<div style="font-family:${data.font};display:flex;flex-direction:column;background:#f0f2f5;border-radius:15px;overflow:hidden">
<div style="background:linear-gradient(to right,#4b6cb7,#182848);padding:25px;color:#fff;text-align:center">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<h2 style="margin:0;font-size:26px;text-transform:uppercase">${data.fullName}</h2>
<p style="margin:5px 0;font-size:16px;opacity:0.9">${data.jobTitle}</p>
</div>
<div style="padding:25px">
<div style="text-align:center;color:#333">
<strong style="color:#4b6cb7">${data.company}</strong>
<div style="margin:15px 0;display:flex;justify-content:center;gap:30px">
<div>
<i class="fas fa-envelope" style="color:#4b6cb7;font-size:20px;margin-bottom:5px"></i>
<p style="margin:0">${data.email}</p>
</div>
<div>
<i class="fas fa-phone" style="color:#4b6cb7;font-size:20px;margin-bottom:5px"></i>
<p style="margin:0">${data.phone}</p>
</div>
</div>
<p style="margin:10px 0;color:#666">${data.address}</p>
${getSocialLinks(data)}
</div>
</div>
${data.includePrivacy?`<div style="background:#e8e8e8;padding:15px;font-size:0.9em">${privacyText}</div>`:''}
</div>`,
template22: (data) => `<div style="font-family:${data.font};background:#fff;box-shadow:0 3px 10px rgba(0,0,0,0.1);border-radius:8px;overflow:hidden">
<div style="display:grid;grid-template-columns:35% 65%;min-height:200px">
<div style="background:#2c3e50;padding:30px;color:#fff">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<h3 style="margin:0;font-size:22px">${data.fullName}</h3>
<p style="margin:5px 0;opacity:0.9">${data.jobTitle}</p>
<p style="margin:5px 0;font-size:0.9em">${data.company}</p>
</div>
<div style="padding:30px;background:linear-gradient(135deg,#f5f7fa 0%,#e4e7eb 100%)">
<div style="margin-bottom:20px">
<p style="margin:5px 0;color:#2c3e50">
<i class="fas fa-envelope" style="color:#2c3e50;margin-right:10px"></i>${data.email}
</p>
<p style="margin:5px 0;color:#2c3e50">
<i class="fas fa-phone" style="color:#2c3e50;margin-right:10px"></i>${data.phone}
</p>
<p style="margin:5px 0;color:#2c3e50">
<i class="fas fa-map-marker-alt" style="color:#2c3e50;margin-right:10px"></i>${data.address}
</p>
</div>
${getSocialLinks(data)}
</div>
</div>
${data.includePrivacy?`<div style="padding:15px;background:#f8f9fa;border-top:1px solid #e1e1e1">${privacyText}</div>`:''}
</div>`,
template23: (data) => `<div style="font-family:${data.font};background:linear-gradient(120deg,#2c3e50,#3498db);color:#fff;padding:30px;border-radius:12px">
<div style="display:flex;align-items:center;gap:25px;margin-bottom:20px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div>
<h2 style="margin:0;font-size:28px;letter-spacing:1px">${data.fullName}</h2>
<p style="margin:5px 0;font-size:16px;opacity:0.9">${data.jobTitle} | ${data.company}</p>
</div>
</div>
<div style="background:rgba(255,255,255,0.1);padding:20px;border-radius:8px;backdrop-filter:blur(5px)">
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center">
<div>
<i class="fas fa-envelope" style="font-size:24px;margin-bottom:10px"></i>
<p style="margin:0;font-size:14px">${data.email}</p>
</div>
<div>
<i class="fas fa-phone" style="font-size:24px;margin-bottom:10px"></i>
<p style="margin:0;font-size:14px">${data.phone}</p>
</div>
<div>
<i class="fas fa-map-marker-alt" style="font-size:24px;margin-bottom:10px"></i>
<p style="margin:0;font-size:14px">${data.address}</p>
</div>
</div>
<div style="margin-top:15px;text-align:center">${getSocialLinks(data)}</div>
</div>
${data.includePrivacy?`<div style="margin-top:20px;padding:15px;background:rgba(255,255,255,0.1);border-radius:8px;font-size:0.9em">${privacyText}</div>`:''}
</div>`,
template24: (data) => `<div style="font-family:${data.font};background:#fff;border:2px solid #3498db;border-radius:15px;overflow:hidden">
<div style="padding:25px;text-align:center">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<h2 style="margin:0;color:#2c3e50;font-size:24px">${data.fullName}</h2>
<p style="margin:5px 0;color:#7f8c8d">${data.jobTitle}</p>
<p style="margin:0;color:#3498db;font-weight:bold">${data.company}</p>
</div>
<div style="background:#f8f9fa;padding:20px;border-top:2px solid #3498db">
<div style="display:flex;justify-content:space-around;text-align:center">
<div>
<p style="margin:5px 0;color:#34495e">
<i class="fas fa-envelope" style="color:#3498db;margin-right:8px"></i>${data.email}
</p>
</div>
<div>
<p style="margin:5px 0;color:#34495e">
<i class="fas fa-phone" style="color:#3498db;margin-right:8px"></i>${data.phone}
</p>
</div>
</div>
<p style="margin:15px 0;text-align:center;color:#34495e">
<i class="fas fa-map-marker-alt" style="color:#3498db;margin-right:8px"></i>${data.address}
</p>
<div style="text-align:center">${getSocialLinks(data)}</div>
</div>
${data.includePrivacy?`<div style="padding:15px;background:#f0f3f4;border-top:1px solid #e1e1e1">${privacyText}</div>`:''}
</div>`,
template25: (data) => `<div style="font-family:${data.font};background:linear-gradient(to right,#00416a,#e4e5e6);color:#fff;padding:30px;border-radius:10px">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:25px">
<div>
<h2 style="margin:0;font-size:26px">${data.fullName}</h2>
<p style="margin:5px 0;opacity:0.9">${data.jobTitle}</p>
<p style="margin:0;font-weight:bold">${data.company}</p>
</div>
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
</div>
<div style="background:rgba(255,255,255,0.1);padding:20px;border-radius:8px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:15px">
<p style="margin:5px 0">
<i class="fas fa-envelope" style="margin-right:10px"></i>${data.email}
</p>
<p style="margin:5px 0">
<i class="fas fa-phone" style="margin-right:10px"></i>${data.phone}
</p>
</div>
<p style="margin:10px 0">
<i class="fas fa-map-marker-alt" style="margin-right:10px"></i>${data.address}
</p>
${getSocialLinks(data)}
</div>
${data.includePrivacy?`<div style="margin-top:20px;padding:15px;background:rgba(255,255,255,0.1);border-radius:8px;font-size:0.9em">${privacyText}</div>`:''}
</div>`,
template26: (data) => `<div style="font-family:${data.font};background:#1a1a1a;color:#fff;padding:25px;border-radius:12px;position:relative;overflow:hidden">
<div style="position:absolute;top:0;right:0;width:40%;height:100%;background:linear-gradient(45deg,#ff6b6b,#556270);opacity:0.1;clip-path:polygon(100% 0,100% 100%,0 100%)"></div>
<div style="position:relative;z-index:1">
<div style="display:flex;align-items:center;gap:20px;margin-bottom:20px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div>
<h2 style="margin:0;font-size24px;color:#ff6b6b">${data.fullName}</h2>
<p style="margin:5px 0;color:#ddd">${data.jobTitle}</p>
<p style="margin:0;color:#ff6b6b;font-weight:500">${data.company}</p>
</div>
</div>
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px">
<div>
<p style="margin:5px 0;color:#ddd">
<i class="fas fa-envelope" style="color:#ff6b6b;margin-right:10px"></i>${data.email}
</p>
<p style="margin:5px 0;color:#ddd">
<i class="fas fa-phone" style="color:#ff6b6b;margin-right:10px"></i>${data.phone}
</p>
</div>
<div>
<p style="margin:5px 0;color:#ddd">
<i class="fas fa-map-marker-alt" style="color:#ff6b6b;margin-right:10px"></i>${data.address}
</p>
${getSocialLinks(data)}
</div>
</div>
</div>
${data.includePrivacy?`<div style="margin-top:20px;padding:15px;background:rgba(255,255,255,0.05);border-radius:8px;font-size:0.9em;color:#bbb">${privacyText}</div>`:''}
</div>`,
template27: (data) => `<div style="font-family:${data.font};background:linear-gradient(135deg,#667eea,#764ba2);padding:30px;border-radius:15px;color:#fff">
<div style="text-align:center;margin-bottom:25px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<h2 style="margin:0;font-size:28px;letter-spacing:1px">${data.fullName}</h2>
<div style="width:60px;height:3px;background:#fff;margin:15px auto"></div>
<p style="margin:5px 0;font-size:16px">${data.jobTitle}</p>
<p style="margin:0;font-weight:500">${data.company}</p>
</div>
<div style="background:rgba(255,255,255,0.1);padding:20px;border-radius:10px;backdrop-filter:blur(10px)">
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:15px;text-align:center">
<div>
<i class="fas fa-envelope" style="font-size:22px;margin-bottom:8px"></i>
<p style="margin:0;font-size:14px">${data.email}</p>
</div>
<div>
<i class="fas fa-phone" style="font-size:22px;margin-bottom:8px"></i>
<p style="margin:0;font-size:14px">${data.phone}</p>
</div>
<div>
<i class="fas fa-map-marker-alt" style="font-size:22px;margin-bottom:8px"></i>
<p style="margin:0;font-size:14px">${data.address}</p>
</div>
</div>
<div style="margin-top:15px;text-align:center">${getSocialLinks(data)}</div>
</div>
${data.includePrivacy?`<div style="margin-top:20px;padding:15px;background:rgba(255,255,255,0.1);border-radius:8px;font-size:0.9em">${privacyText}</div>`:''}
</div>`,
template28: (data) => `<div style="font-family:${data.font};background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1)">
<div style="background:linear-gradient(to right,#2c3e50,#3498db);padding:30px;color:#fff;text-align:center">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<h2 style="margin:0;font-size:26px">${data.fullName}</h2>
<p style="margin:10px 0;opacity:0.9">${data.jobTitle}</p>
<p style="margin:0;font-weight:500">${data.company}</p>
</div>
<div style="padding:25px">
<div style="display:flex;flex-direction:column;gap:15px">
<div style="display:flex;align-items:center;gap:15px">
<div style="width:40px;height:40px;background:#3498db;border-radius:50%;display:flex;align-items:center;justify-content:center">
<i class="fas fa-envelope" style="color:#fff"></i>
</div>
<p style="margin:0;color:#333">${data.email}</p>
</div>
<div style="display:flex;align-items:center;gap:15px">
<div style="width:40px;height:40px;background:#3498db;border-radius:50%;display:flex;align-items:center;justify-content:center">
<i class="fas fa-phone" style="color:#fff"></i>
</div>
<p style="margin:0;color:#333">${data.phone}</p>
</div>
<div style="display:flex;align-items:center;gap:15px">
<div style="width:40px;height:40px;background:#3498db;border-radius:50%;display:flex;align-items:center;justify-content:center">
<i class="fas fa-map-marker-alt" style="color:#fff"></i>
</div>
<p style="margin:0;color:#333">${data.address}</p>
</div>
</div>
<div style="margin-top:20px;text-align:center">${getSocialLinks(data)}</div>
</div>
${data.includePrivacy?`<div style="padding:15px;background:#f8f9fa;border-top:1px solid #e1e1e1">${privacyText}</div>`:''}
</div>`,
template29: (data) => `<div style="font-family:${data.font};background:linear-gradient(45deg,#141e30,#243b55);color:#fff;padding:30px;border-radius:15px">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:25px">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<div style="text-align:right">
<h2 style="margin:0;font-size:26px">${data.fullName}</h2>
<p style="margin:5px 0;color:#64ffda">${data.jobTitle}</p>
<p style="margin:0;opacity:0.8">${data.company}</p>
</div>
</div>
<div style="background:rgba(255,255,255,0.05);padding:20px;border-radius:10px">
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center">
<div>
<i class="fas fa-envelope" style="color:#64ffda;font-size:24px;margin-bottom:10px"></i>
<p style="margin:0">${data.email}</p>
</div>
<div>
<i class="fas fa-phone" style="color:#64ffda;font-size:24px;margin-bottom:10px"></i>
<p style="margin:0">${data.phone}</p>
</div>
<div>
<i class="fas fa-map-marker-alt" style="color:#64ffda;font-size:24px;margin-bottom:10px"></i>
<p style="margin:0">${data.address}</p>
</div>
</div>
<div style="margin-top:20px;text-align:center">${getSocialLinks(data)}</div>
</div>
${data.includePrivacy?`<div style="margin-top:20px;padding:15px;background:rgba(255,255,255,0.05);border-radius:8px;font-size:0.9em">${privacyText}</div>`:''}
</div>`,
template30: (data) => `<div style="font-family:${data.font};background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.1)">
<div style="background:linear-gradient(120deg,#2193b0,#6dd5ed);padding:35px;color:#fff;text-align:center">
${data.logo ? `<img src="${data.logo}" alt="Logo" style="max-width:180px;height:auto;display:block;margin-bottom:15px"/>` : ''}
<h2 style="margin:0;font-size:30px;letter-spacing:1px">${data.fullName}</h2>
<p style="margin:10px 0;font-size:18px">${data.jobTitle}</p>
<p style="margin:0;font-weight:500;font-size:16px">${data.company}</p>
</div>
<div style="padding:30px;background:linear-gradient(to bottom,#f8f9fa,#fff)">
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px">
<div style="text-align:center">
<i class="fas fa-envelope" style="color:#2193b0;font-size:24px;margin-bottom:10px"></i>
<p style="margin:0;color:#333">${data.email}</p>
</div>
<div style="text-align:center">
<i class="fas fa-phone" style="color:#2193b0;font-size:24px;margin-bottom:10px"></i>
<p style="margin:0;color:#333">${data.phone}</p>
</div>
</div>
<div style="text-align:center;margin-top:20px">
<i class="fas fa-map-marker-alt" style="color:#2193b0;font-size:24px;margin-bottom:10px"></i>
<p style="margin:0;color:#333">${data.address}</p>
</div>
<div style="margin-top:25px;text-align:center">${getSocialLinks(data)}</div>
</div>
${data.includePrivacy?`<div style="padding:20px;background:#f8f9fa;border-top:1px solid #e1e1e1">${privacyText}</div>`:''}
</div>`
};
});