gdgpce · gargiisc · Oct 9, 2024 · Oct 9, 2024 · Oct 9, 2024 · Oct 9, 2024
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+badgecardgenerator.com
diff --git a/assets/gray-checkers-background.jpg b/assets/gray-checkers-background.jpg
diff --git a/index.html b/index.html
@@ -7,31 +7,55 @@
     <title>Badge</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-        rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-    <main>
+    <header class="navbar">
+        <img src="assets/logo.jpg" alt="Logo" />
+    </header>
 
-        <header>
-            <!-- header goes here  -->
-        </header>
+    <div class="container">
+        <h2>Badge Card Generator</h2>
 
-        <section>
-            <div class="input-div">
-                <!-- input goes here  -->
+        <div class="form-container">
+            <p>Name:</p>
+            <input id="fullName" placeholder="Full Name" type="text" />
+            <p>Github ID: </p>
+            <input id="githubUsername" placeholder="GitHub Username" type="text" />
+            <p>Upload Photo: </p>
+            <input accept="image/*" id="uploadPhoto" placeholder="Upload photo" type="file" />
+            <div class="buttons">
+                <button class="btn generate-btn" onclick="generateBadge()">Generate</button>
+                <button class="btn download-btn" onclick="downloadBadge()">Download</button>
             </div>
-            <div class="badge-div">
-                <!-- badge goes here  -->
+        </div>
+
+
+        <div class="badge-container" id="badgeCard">
+            <img alt="Profile photo" id="profilePhoto" src="assets/gray-checkers-background.jpg" />
+            <div class="name" id="badgeName">Name</div>
+            <div class="github">
+                <i class="fab fa-github"></i>
+                <span id="badgeGithub">GitHub Username</span>
+            </div>
+            <div class="img2">
+                <img src="assets/logo.jpg" alt="Logo" />
             </div>
-        </section>
+            <div class="crafted">Crafted with ❤️ during Hacktoberfest!</div>
+        </div>
+    </div>
+
+    <footer>
+        <!-- footer -->
+    </footer>
 
-        <footer>
-            <!-- footer goes here -->
-        </footer>
-    </main>
+    <script src="main.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+
 </body>
 
-</html>
+</html>
diff --git 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
@@ -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%;
+  }
+}