Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@DanishEllahi121
DanishEllahi121 committed Oct 7, 2024
1 parent 129ad70 commit 366a830
Show file tree
Hide file tree
Showing 3 changed files with 243 additions and 0 deletions.
36 changes: 36 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Card Generator</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<h1>ID Card Generator</h1>
<!-- Form to collect user details -->
<form id="userForm">
<label for="college-name">College Name:</label>
<input type="text" id="college-name" name="college-name" required><br><br>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required><br><br>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required><br><br>
<label for="idNumber">ID Number:</label>
<input type="text" id="idNumber" name="idNumber" required><br><br>
<label for="photo">Upload Photo:</label>
<input type="file" id="photo" accept="image/*"><br><br>
<button type="button" onclick="generateIDCard()">Generate ID Card</button>
<button type="button" onclick="downloadIDCard()">Download ID Card</button>
</form>
<!-- ID Card Display Section -->
<div id="idCard" class="id-card">
<div class="college-name" id="collegeName"></div>
<!-- The ID card content will be generated here -->
</div>
</body>
</html>
70 changes: 70 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
function generateIDCard() {
// Get user input values
var college = document.getElementById("college-name").value;
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var address = document.getElementById("address").value;
var idNumber = document.getElementById("idNumber").value;

// Handle photo input
var photoInput = document.getElementById("photo");
var photoURL = "";

if (photoInput.files && photoInput.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
photoURL = e.target.result;
// Insert the generated content into the ID card section
var idCardHTML = `
<div class="college-name">${college}</div>
<h2>ID Card</h2>
<img src="${photoURL}" alt="Profile Picture">
<p><strong>Name:</strong> ${name}</p>
<p><strong>Age:</strong> ${age}</p>
<p><strong>Address:</strong> ${address}</p>
<p><strong>ID Number:</strong> ${idNumber}</p>
`;
// Display the generated ID card
var idCardContainer = document.getElementById("idCard");
idCardContainer.innerHTML = idCardHTML;
idCardContainer.style.display = "block";
}
reader.readAsDataURL(photoInput.files[0]);
} else {
// If no photo is uploaded, just generate the ID card without an image
var idCardHTML = `
<div class="college-name">${college}</div>
<h2>ID Card</h2>
<p><strong>Name:</strong> ${name}</p>
<p><strong>Age:</strong> ${age}</p>
<p><strong>Address:</strong> ${address}</p>
<p><strong>ID Number:</strong> ${idNumber}</p>
`;
// Display the generated ID card
var idCardContainer = document.getElementById("idCard");
idCardContainer.innerHTML = idCardHTML;
idCardContainer.style.display = "block";
}
}

function printIDCard() {
var idCardContainer = document.getElementById("idCard");
var printWindow = window.open('', '', 'height=500, width=500');
printWindow.document.write('<html><head><title>ID Card</title>');
printWindow.document.write('<link rel="stylesheet" href="styles.css">');
printWindow.document.write('</head><body>');
printWindow.document.write(idCardContainer.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}

function downloadIDCard() {
var idCardContainer = document.getElementById("idCard");
html2canvas(idCardContainer).then(function(canvas) {
var link = document.createElement('a');
link.download = 'id-card.png';
link.href = canvas.toDataURL();
link.click();
});
}
137 changes: 137 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
/* General Styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 20px;
text-align: center;
}

h1 {
margin-bottom: 20px;
color: #343a40;
font-size: 2.5em;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

form {
margin-bottom: 30px;
background-color: #ffffff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
display: inline-block;
text-align: left;
max-width: 400px;
width: 100%;
}

label {
font-weight: bold;
color: #495057;
display: block;
margin-bottom: 5px;
}

input[type="text"], input[type="number"], input[type="file"] {
padding: 10px;
margin-bottom: 15px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ced4da;
border-radius: 5px;
font-size: 1em;
transition: border-color 0.3s ease;
}

input[type="text"]:focus, input[type="number"]:focus, input[type="file"]:focus {
border-color: #007bff;
outline: none;
}

button {
padding: 10px 20px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border: none;
cursor: pointer;
border-radius: 25px;
margin-right: 10px;
font-size: 1em;
transition: background 0.3s ease, transform 0.3s ease;
}

button:hover {
background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);
transform: translateY(-2px);
}

button:active {
transform: translateY(0);
}

/* ID Card Styling */
.id-card {
display: none;
border: 2px solid #343a40;
width: 85.6mm; /* Standard ID card width */
height: 53.98mm; /* Standard ID card height */
padding: 20px;
margin: 20px auto;
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
text-align: left;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.college-name {
font-weight: bold;
font-size: 1.5em;
text-align: center;
margin-bottom: 10px;
color: #007bff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.id-card h2 {
text-align: center;
color: #343a40;
font-size: 1.2em;
margin-bottom: 15px;
}

.id-card img {
float: right;
margin: 10px auto;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #343a40;
}

.id-card p {
margin: 10px 0;
color: #495057;
font-size: 1em;
}

/* Responsive Styles */
@media (max-width: 600px) {
form {
width: 90%;
}

.id-card {
width: 100%;
height: auto;
padding: 10px;
}

.id-card img {
width: 80px;
height: 80px;
}

.id-card p {
font-size: 0.9em;
}
}

0 comments on commit 366a830

Please sign in to comment.