diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..7031fd6 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +badgecardgenerator.com \ No newline at end of file diff --git a/assets/gray-checkers-background.jpg b/assets/gray-checkers-background.jpg new file mode 100644 index 0000000..3838d69 Binary files /dev/null and b/assets/gray-checkers-background.jpg differ diff --git a/index.html b/index.html index a74568a..59c66ec 100644 --- a/index.html +++ b/index.html @@ -7,31 +7,55 @@ Badge - + + + -
+
+ Logo +
-
- -
+
+

Badge Card Generator

-
-
- +
+

Name:

+ +

Github ID:

+ +

Upload Photo:

+ +
+ +
-
- +
+ + +
+ Profile photo +
Name
+
+ + GitHub Username +
+
+ Logo
-
+
Crafted with ❤️ during Hacktoberfest!
+
+ + + - -
+ + + - \ No newline at end of file + diff --git a/main.js b/main.js index e69de29..392178b 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,35 @@ +function generateBadge() { + const fullName = document.getElementById('fullName').value; + const githubUsername = document.getElementById('githubUsername').value; + const uploadPhoto = document.getElementById('uploadPhoto').files[0]; + + document.getElementById('badgeName').innerText = fullName; + document.getElementById('badgeGithub').innerText = githubUsername; + + if (uploadPhoto) { + const reader = new FileReader(); + reader.onload = function (e) { + document.getElementById('profilePhoto').src = e.target.result; + } + reader.readAsDataURL(uploadPhoto); + } + + return html2canvas(document.getElementById('badgeCard')); +} + +function downloadBadge(canvas) { + const img = canvas.toDataURL('image/png'); + const link = document.createElement('a'); + link.href = img; + link.download = 'badge.png'; + + const imgElement = document.createElement('img'); + imgElement.src = img; + document.body.appendChild(imgElement); + + setTimeout(function() { + link.click(); + }, 1000); +} + +generateBadge().then(downloadBadge); diff --git a/style.css b/style.css index a340bad..0c3a842 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ + :root { --primary-color: #ffffff; --downloadbtn-color: #00bbff; @@ -24,7 +25,7 @@ body { background-color: var(--primary-color); position: relative; -webkit-tap-highlight-color: transparent; - font-family: "Open Sans", sans-serif; + font-family: "Poppins", sans-serif; font-optical-sizing: auto; } @@ -33,3 +34,183 @@ main { min-height: 100vh; position: relative; } + +.navbar { + background-color: white; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + padding: 10px 10px; + display: flex; + justify-content: flex-start; + align-items: center; + + top: 0; + min-height: fit-content; +} + +.navbar img { + height: 70px; + margin-right: 15px; +} + +.navbar h1 { + font-size: 1.5rem; + color: #333; + font-weight: 600; +} + +.container { + display: flex; + justify-content: center; + align-items: flex-start; + min-height: 5vh; + padding: 20px; + gap: 40px; + flex-wrap: wrap; +} + +h2 { + font-size: 2rem; + margin-bottom: 20px; + color: #333; + text-align: center; + width: 100%; +} + +.form-container, +.badge-container { + background-color: white; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + padding: 20px; + width: 100%; + max-width: 400px; +} + +.form-container { + display: flex; + flex-direction: column; + gap: 15px; +} + +.form-container p{ + font-size: 15px; +} + +.form-container input[type="text"], +.form-container input[type="file"] { + width: 90%; + padding: 10px; + margin: auto; + border: 1px solid #ddd; + border-radius: 5px; +} + +.form-container input:focus { + border-color: #00bfff; +} + +.buttons { + display: flex; + gap: 10px; + justify-content: center; + margin-top: 20px; +} + +.btn { + flex: 1; + padding: 12px; + border: none; + border-radius: 8px; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.2s; + max-width: 150px; +} + +.download-btn { + background-color: #00bfff; + color: white; +} + +.download-btn:hover { + background-color: #009fdc; +} + +.generate-btn { + background-color: #fca503; + color: white; +} + +.generate-btn:hover { + background-color: #e99502; +} + +.badge-container { + text-align: center; + padding: 30px 15px; + position: relative; +} + +.badge-container img { + border-radius: 12px; + width: 130px; + height: 150px; + object-fit: cover; + margin-bottom: 15px; + +} + +.badge-container .img2 { + margin-top: 10px; +} + +.badge-container .img2 img { + height: 50px; + width: auto; +} + + +.badge-container .name { + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 5px; +} + +.badge-container .github { + font-size: 1rem; + color: #555; + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + margin-bottom: 15px; +} + +.badge-container .github i { + color: #333; +} + +.badge-container .crafted { + font-size: 0.9rem; + color: #777; +} + +footer { + text-align: center; + font-size: 0.9rem; + color: #666; + margin-top: 30px; + width: 100%; +} + +@media (max-width: 768px) { + .container { + flex-direction: column; + align-items: center; + } + + .form-container, + .badge-container { + max-width: 100%; + } +}