Online Business Card Maker
Business Card Maker
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
text-align: center;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
margin: 4px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.business-card {
margin-top: 20px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: left;
color: #fff;
}
.business-card img {
max-width: 100px;
border-radius: 50%;
}
.business-card .logo {
max-width: 50px;
}
.hidden {
display: none;
}
document.getElementById('generateBtn').addEventListener('click', generateCard);
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function generateCard() {
const name = document.getElementById('name').value;
const position = document.getElementById('position').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
const imageUrl = document.getElementById('image').value;
const logoUrl = document.getElementById('logo').value;
const cardDiv = document.getElementById('card');
cardDiv.innerHTML = '';
cardDiv.style.backgroundColor = getRandomColor();
cardDiv.className = 'business-card';
const img = document.createElement('img');
img.src = imageUrl;
cardDiv.appendChild(img);
const logo = document.createElement('img');
logo.src = logoUrl;
logo.className = 'logo';
cardDiv.appendChild(logo);
const nameElem = document.createElement('h2');
nameElem.textContent = name;
cardDiv.appendChild(nameElem);
const positionElem = document.createElement('p');
positionElem.textContent = position;
cardDiv.appendChild(positionElem);
const emailElem = document.createElement('p');
emailElem.textContent = email;
cardDiv.appendChild(emailElem);
const phoneElem = document.createElement('p');
phoneElem.textContent = phone;
cardDiv.appendChild(phoneElem);
document.getElementById('downloadBtn').style.display = 'inline-block';
}
document.getElementById('downloadBtn').addEventListener('click', downloadCard);
function downloadCard() {
const cardDiv = document.getElementById('card');
const svg = Snap(400, 200);
const background = svg.rect(0, 0, 400, 200).attr({
fill: cardDiv.style.backgroundColor
});
const image = svg.image(cardDiv.querySelector('img').src, 10, 10, 80, 80);
const logo = svg.image(cardDiv.querySelector('.logo').src, 300, 10, 50, 50);
const name = svg.text(100, 30, cardDiv.querySelector('h2').textContent).attr({
fill: '#fff',
fontSize: '20px'
});
const position = svg.text(100, 60, cardDiv.querySelector('p').textContent).attr({
fill: '#fff',
fontSize: '16px'
});
const email = svg.text(100, 90, cardDiv.querySelectorAll('p')[1].textContent).attr({
fill: '#fff',
fontSize: '16px'
});
const phone = svg.text(100, 120, cardDiv.querySelectorAll('p')[2].textContent).attr({
fill: '#fff',
fontSize: '16px'
});
const svgData = new XMLSerializer().serializeToString(svg.node);
const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const svgUrl = URL.createObjectURL(svgBlob);
const downloadLink = document.createElement('a');
downloadLink.href = svgUrl;
downloadLink.download = 'business_card.svg';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
No comments:
Post a Comment