Business Card Maker
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
form label {
display: block;
margin-top: 10px;
color: #333;
}
form input[type="text"],
form input[type="email"],
form input[type="tel"] {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
form button[type="submit"] {
display: block;
margin-top: 20px;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;}
#businessCardContainer {
margin-top: 40px;
text-align: center;
}
#businessCardContainer svg {
width: 300px;
height: 180px;}
document.getElementById("businessCardForm").addEventListener("submit", function(event) {
event.preventDefault();
var name = document.getElementById("name").value;
var position = document.getElementById("position").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var image = document.getElementById("image").value;
var logo = document.getElementById("logo").value;
var randomColor = getRandomColor();
var svg = Snap("#businessCardContainer").clear();
var cardRect = svg.rect(0, 0, 300, 180, 10, 10).attr({
fill: randomColor,
stroke: "#333",
strokeWidth: 2
});
var nameLabel = svg.text(150, 40, name).attr({
fill: "#fff",
fontSize: 20,
textAnchor: "middle"
});
var positionLabel = svg.text(150, 70, position).attr({
fill: "#fff",
fontSize: 16,
textAnchor: "middle"
});
var emailLabel = svg.text(150, 100, email).attr({
fill: "#fff",
fontSize: 14,
textAnchor: "middle"
});
var phoneLabel = svg.text(150, 130, phone).attr({
fill: "#fff",
fontSize: 14,
textAnchor: "middle"
});
var logoImg = svg.image(logo, 20, 20, 50, 50);
var profileImg = svg.image(image, 210, 20, 70, 70);
var downloadLink = document.createElement("a");
downloadLink.href = svg.toDataURL();
downloadLink.download = "business-card.png";
downloadLink.textContent = "Download Business Card";
document.getElementById("businessCardContainer").appendChild(downloadLink);
});
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i
