Business Card Maker
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
}
h1 {
text-align: center;
color: #4CAF50;
}
.input-wrapper {
display: flex;
margin-bottom: 10px;
}
label {
flex: 1;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"] {
flex: 2;
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
width: 100%;
}
button:hover {
background-color: #45a049;
}
document.getElementById('generateButton').addEventListener('click', generateBusinessCard);
function generateBusinessCard() {
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 logoFile = document.getElementById('logo').files[0];
const imageFile = document.getElementById('image').files[0];
if (!name || !position || !email || !phone || !logoFile || !imageFile) {
alert('Please fill all the fields and upload both logo and image.');
return;
}
const reader = new FileReader();
reader.onload = function () {
const logoDataUrl = reader.result;
// Create and download the business card
createBusinessCard(name, position, email, phone, logoDataUrl);
};
reader.readAsDataURL(logoFile);
}
function createBusinessCard(name, position, email, phone, logoDataUrl) {
const imageFile = document.getElementById('image').files[0];
const reader = new FileReader();
reader.onload = function () {
const imageDataUrl = reader.result;
// Create the business card SVG
const svg = Snap(400, 250);
// Add a random background color to the SVG
const randomColor = getRandomColor();
svg.rect(0, 0, '100%', '100%').attr({ fill: randomColor });
// Add the logo to the SVG
const logo = svg.image(logoDataUrl, 20, 20, 80, 80);
// Add the user's image to the SVG
const userImage = svg.image(imageDataUrl, 300, 20, 80, 80);
// Add the user's details to the SVG
svg.text(120, 40, name).attr({ fill: '#ffffff', 'font-size': '16px' });
svg.text(120, 60, position).attr({ fill: '#ffffff', 'font-size': '14px' });
svg.text(120, 80, email).attr({ fill: '#ffffff', 'font-size': '12px' });
svg.text(120, 100, phone).attr({ fill: '#ffffff', 'font-size': '12px' });
// Convert the SVG to a data URL
const svgDataUrl = svg.toDataURL();
// Create and download the business card image
downloadImage(svgDataUrl, 'business_card.png');
};
reader.readAsDataURL(imageFile);
}
function getRandomColor() {
return '#' + (Math.random().toString(16) + '000000').slice(2, 8);
}
function downloadImage(dataUrl, filename) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = filename;
link.click();
}
0 Comments