ID Card Generator code html css js
Sachin Khanal. Coding King. Founder Of AooA Mobile Company
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Identity Card Generator</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body {
font-family: 'Raleway', sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#card {
width: 300px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
#photo {
width: 100%;
height: 150px;
background-color: #f0f0f0;
margin-bottom: 15px;
overflow: hidden;
border-radius: 5px;
}
#generateBtn {
padding: 10px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'Raleway', sans-serif;
}
label {
display: block;
margin-top: 10px;
font-weight: 700;
font-size: 14px;
}
input, textarea, select {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
font-size: 14px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
p {
margin: 5px 0;
font-size: 14px;
}
i {
margin-right: 5px;
}
#printBtn {
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
margin-top: 15px;
cursor: pointer;
font-family: 'Raleway', sans-serif;
}
</style>
</head>
<body>
<div id="card">
<div id="photo"></div>
<label for="name"><i class="fas fa-user"></i>Name:</label>
<input type="text" id="name" placeholder="John Doe" required>
<label for="dob"><i class="fas fa-calendar-alt"></i>Date of Birth:</label>
<input type="date" id="dob" required>
<label for="age"><i class="fas fa-birthday-cake"></i>Age:</label>
<input type="number" id="age" placeholder="25" required>
<label for="height"><i class="fas fa-arrows-alt"></i>Height (cm):</label>
<input type="number" id="height" placeholder="175" required>
<label for="weight"><i class="fas fa-weight"></i>Weight (kg):</label>
<input type="number" id="weight" placeholder="70" required>
<label for="school"><i class="fas fa-graduation-cap"></i>School/College Name:</label>
<input type="text" id="school" placeholder="XYZ School" required>
<label for="location"><i class="fas fa-map-marker-alt"></i>Location:</label>
<input type="text" id="location" placeholder="City, Country" required>
<label for="interests"><i class="fas fa-star"></i>Interests:</label>
<input type="text" id="interests" placeholder="Reading, Traveling" required>
<label for="picture"><i class="fas fa-image"></i>Upload Picture:</label>
<input type="file" id="picture" accept="image/*">
<button id="generateBtn" onclick="generateCard()"><i class="fas fa-id-card"></i>Generate Card</button>
<button id="generateBtn" onclick="generateCard()"><i class="fas fa-id-card"></i>Generate Card</button>
<!-- Print button to download as PNG -->
<button id="printBtn" onclick="downloadAsImage()"><i class="fas fa-print"></i>Print</button>
</div>
<script>
function generateCard() {
const name = document.getElementById('name').value;
const dob = document.getElementById('dob').value;
const age = document.getElementById('age').value;
const height = document.getElementById('height').value;
const weight = document.getElementById('weight').value;
const school = document.getElementById('school').value;
const location = document.getElementById('location').value;
const interests = document.getElementById('interests').value;
const pictureInput = document.getElementById('picture');
const card = document.getElementById('card');
const photo = document.getElementById('photo');
// Clear previous content
card.innerHTML = '';
// Display uploaded picture
if (pictureInput.files.length > 0) {
const picture = document.createElement('img');
picture.src = URL.createObjectURL(pictureInput.files[0]);
photo.appendChild(picture);
card.appendChild(photo);
} else {
// Add photo placeholder if no picture is uploaded
photo.style.backgroundColor = '#f0f0f0';
card.appendChild(photo);
}
// Add other details
const nameParagraph = document.createElement('p');
nameParagraph.innerHTML = `<i class="fas fa-user"></i>Name: ${name}`;
card.appendChild(nameParagraph);
const dobParagraph = document.createElement('p');
dobParagraph.innerHTML = `<i class="fas fa-calendar-alt"></i>Date of Birth: ${dob}`;
card.appendChild(dobParagraph);
const ageParagraph = document.createElement('p');
ageParagraph.innerHTML = `<i class="fas fa-birthday-cake"></i>Age: ${age}`;
card.appendChild(ageParagraph);
const heightParagraph = document.createElement('p');
heightParagraph.innerHTML = `<i class="fas fa-arrows-alt"></i>Height: ${height} cm`;
card.appendChild(heightParagraph);
const weightParagraph = document.createElement('p');
weightParagraph.innerHTML = `<i class="fas fa-weight"></i>Weight: ${weight} kg`;
card.appendChild(weightParagraph);
const schoolParagraph = document.createElement('p');
schoolParagraph.innerHTML = `<i class="fas fa-graduation-cap"></i>School/College: ${school}`;
card.appendChild(schoolParagraph);
const locationParagraph = document.createElement('p');
locationParagraph.innerHTML = `<i class="fas fa-map-marker-alt"></i>Location: ${location}`;
card.appendChild(locationParagraph);
const interestsParagraph = document.createElement('p');
interestsParagraph.innerHTML = `<i class="fas fa-star"></i>Interests: ${interests}`;
card.appendChild(interestsParagraph);
function downloadAsImage() {
const card = document.getElementById('card');
html2canvas(card).then(canvas => {
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'identity_card.png';
link.click();
});
}
}
</script>
</body>
</html>
Comments