Merge pull request #10 from kunalshah017/main

Added AI ChatBot & Ceartificate Page
Piyushchy · Jan 19, 2024 · 5b6140d · 5b6140d
2 parents 9fbe7cd + eb65615
commit 5b6140d
Show file tree

Hide file tree

Showing 5 changed files with 235 additions and 39 deletions.
diff --git a/Pledge-Ceartificate/assets/confetti.png b/Pledge-Ceartificate/assets/confetti.png
diff --git a/Pledge-Ceartificate/index.html b/Pledge-Ceartificate/index.html
@@ -40,6 +40,12 @@
     </nav>
 
     <main>
+        <script>(function () { var js, fs, d = document, id = "tars-widget-script", b = "https://tars-file-upload.s3.amazonaws.com/bulb/"; if (!d.getElementById(id)) { js = d.createElement("script"); js.id = id; js.type = "text/javascript"; js.src = b + "js/widget.js"; fs = d.getElementsByTagName("script")[0]; fs.parentNode.insertBefore(js, fs) } })(); window.tarsSettings = { "convid": "LO59ww", "href": "https://chatbot.hellotars.com/conv/LO59ww" };</script>
+        <div class="thankyou">
+            <h1>
+                Thank you for trying out our project. We hope you liked it.
+            </h1>
+        </div>
         <div class="certificate-form-container">
             <h1>Get Your Anti-Drug Warrior Certificate</h1>
 
@@ -69,9 +75,6 @@ <h1>Get Your Anti-Drug Warrior Certificate</h1>
 
         </div>
         <div class="description">
-            <h1>
-                Thank you for trying out our project. We hope you liked it.
-            </h1>
             <h3>Take Anti-Drug pledge here at MyGov Website by Government of India</h3>
             <div class="gov-redirect-container">
                 <img src="https://pledge.mygov.in/fightagainstdrugabuse/assets/images/mygov.png" alt="gov-logo">
@@ -80,8 +83,19 @@ <h3>Take Anti-Drug pledge here at MyGov Website by Government of India</h3>
                 </a>
             </div>
         </div>
+        <div class="footer">
+            <div class="footer-message">
+                Made with ❤️ by <strong>Sudo</strong>
+            </div>
+            <div class="footer-links">
+                <a href="https://github.com/spark-lucifer/Choices-an-Anti-Drug-Adventure" target="_blank">GitHub</a>
+                <a href="https://youtu.be/hTmDJXYRnEk" target="_blank">YouTube</a>
+            </div>
+        </div>
+
     </main>
 
+
     <script src="script.js"></script>
 </body>
 

diff --git a/Pledge-Ceartificate/script.js b/Pledge-Ceartificate/script.js
@@ -1,3 +1,7 @@
+var globalImgUrl = "";
+
+var certificateUrl = "";
+var formatedCertificateurl = "";
 //  Nav bar Scroll
 const nav = document.querySelector("nav");
 
@@ -106,6 +110,10 @@ function generateCertificate() {
     ctx.fillText(name, canvas.width / 2, 735);
 
     const imgURL = canvas.toDataURL("image/png");
+    globalImgUrl = imgURL;
+    setTimeout(() => {
+      FormtCeartificateURL();
+    }, 3000);
 
     const certificateImg = new Image();
     certificateImg.src = imgURL;
@@ -128,35 +136,8 @@ function generateCertificate() {
   shareContainer.style.display = "flex";
 }
 
-function downloadCertificate() {
-  const resultDiv = document.getElementById("result");
-  const certificateImg = resultDiv.querySelector("img");
-
-  if (!certificateImg) {
-    console.error("Certificate image not found");
-    return;
-  }
-
-  const canvas = document.createElement("canvas");
-  canvas.width = certificateImg.width;
-  canvas.height = certificateImg.height;
-
-  const ctx = canvas.getContext("2d");
-  ctx.drawImage(certificateImg, 0, 0);
-
-  const downloadLink = document.createElement("a");
-  downloadLink.href = canvas.toDataURL("image/png");
-  downloadLink.download = "Certificate.png";
-  downloadLink.style.display = "none";
-  document.body.appendChild(downloadLink);
-
-  downloadLink.click();
-
-  document.body.removeChild(downloadLink);
-}
-
 async function uploadToImgur(imageData) {
-  const clientId = process.env.IMGUR_CLIENT_ID;
+  const clientId = "d0e21d10d6a0ef5";
 
   try {
     const response = await fetch("https://api.imgur.com/3/image", {
@@ -175,6 +156,7 @@ async function uploadToImgur(imageData) {
     if (data.success) {
       const imageUrl = data.data.link;
       console.log("Image uploaded to Imgur:", imageUrl);
+      certificateUrl = imageUrl;
       return imageUrl;
     } else {
       console.error("Imgur upload failed:", data.data.error);
@@ -185,3 +167,49 @@ async function uploadToImgur(imageData) {
     return null;
   }
 }
+
+function downloadCertificate() {
+  const link = document.createElement("a");
+  link.download = "certificate.png";
+  link.href = globalImgUrl;
+  link.click();
+}
+
+function FormtCeartificateURL() {
+  var temp = certificateUrl;
+  // remove last 4 characters from the string
+  temp = temp.slice(0, -4);
+  // extract last 7 characters from the string
+  temp = temp.slice(-7);
+  console.log("temp: ", temp);
+
+  formatedCertificateurl = "https://imgur.com/" + temp;
+
+  console.log("formatedCertificateurl: ", formatedCertificateurl);
+}
+
+function whatsappShare() {
+  // Check if the formatted Imgur URL is available
+  if (formatedCertificateurl) {
+    const url = `https://api.whatsapp.com/send?text=Just Became a part of the Anti Drug Movement here is my certificate 📜: ${formatedCertificateurl}%0AExperience the project and stand against drug addiction on: sudo-choices.vercel.app`;
+    window.open(url, "_blank");
+  } else {
+    // If the formatted Imgur URL is not available, use the project link without the certificate
+    const url = `https://api.whatsapp.com/send?text=Experience the project and stand against drug addiction on: sudo-choices.vercel.app`;
+    window.open(url, "_blank");
+  }
+}
+
+function instagramShare() {
+  // create a post on instagram
+
+  // Check if the formatted Imgur URL is available
+  if (formatedCertificateurl) {
+    const url = `https://www.instagram.com/create/details/?source=instagram_web_create_flow&image_url=${formatedCertificateurl}&caption=Just Became a part of the Anti Drug Movement here is my certificate 📜%0AExperience the project and stand against drug addiction on: sudo-choices.vercel.app`;
+    window.open(url, "_blank");
+  } else {
+    // If the formatted Imgur URL is not available, use the project link without the certificate
+    const url = `https://www.instagram.com/create/details/?source=instagram_web_create_flow&caption=Experience the project and stand against drug addiction on: sudo-choices.vercel.app`;
+    window.open(url, "_blank");
+  }
+}
diff --git a/Pledge-Ceartificate/style.css b/Pledge-Ceartificate/style.css
@@ -137,6 +137,45 @@ main{
     height: 100vh;
 }
 
+.thankyou{
+    width: 100%;;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    background-color: #1c1b1b;
+    background-image: url(assets/confetti.png);
+    background-size: cover;
+    background-position: center;
+    background-size: 70% ;
+    background-position-y: 100%;
+    padding: 50px 0;
+
+    animation: confetti 10s ease-in-out infinite;
+}
+
+@keyframes confetti{
+    0%{
+        background-position-y: 100%;
+    }
+
+    100%{
+        background-position-y: 0%;
+    }
+}
+
+
+.thankyou h1{
+    font-family: 'popins', sans-serif;
+    font-size: 30px;
+    font-weight: 700;
+    text-align: center;
+    background-color: #1c1b1bb7;
+    padding: 10px 20px;
+    border-radius: 10px;
+}
+
+
 .certificate-form-container{
     width: 100%;
     display: flex;
@@ -298,13 +337,11 @@ main{
     align-items: center;
     flex-direction: column;
     text-align: center;
-}
-
-.description h1{
-    font-family: 'popins', sans-serif;
-    font-size: 30px;
-    font-weight: 700;
-    margin-bottom: 20px;
+    background-color: #1c1b1b;
+    border-radius: 20px 20px 0 0;
+    filter: drop-shadow(0px -5px 5px #0edf23);
+    padding: 20px 0;
+    gap: 20px;
 }
 
 .description h3{
@@ -319,7 +356,8 @@ main{
     justify-content: center;
     align-items: center;
     width: 100%;
-    gap: 50px;
+    gap: 100px;
+    /* border: 1px solid #0edf23; */
 }
 
 .gov-redirect-container a{
@@ -354,6 +392,35 @@ main{
     transform: scale(1.1);
 }
 
+.footer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    height: 10vh;
+    background-color: rgba(0, 0, 0);
+}
+
+.footer-message{
+    font-size: 20px;
+    font-weight: 700;
+    color: #fff;
+    width: 50%;
+}
+
+.footer-links a{
+    text-decoration: none;
+    color: #fff;
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0 10px;
+}
+
+.footer-links a:hover{
+    border-bottom: 2px solid #ffffff;
+}
+
 @media screen and (max-width: 1150px) {
     .nav-links {
         width: 60%;
@@ -385,4 +452,90 @@ main{
         display: flex;
     }
 
+    .thankyou{
+        background-size: 100% ;
+        background-position-y: 100%;
+        padding: 20px 0;
+    }
+
+    .thankyou h1{
+        font-size: 20px;
+        padding: 5px 10px;
+    }
+
+
+
+    .certificate-form-container h1{
+        font-size: 20px;
+        font-weight: 700;
+        text-align: center;
+    }
+
+    .consent-check-container{
+        width: 80%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .consent-check-container input{
+        width: 25px;
+        height: 25px;
+        cursor: pointer;
+    }
+
+    .consent-check-container label{
+        font-size: 15px;
+        width: 100%;
+        /* border: 1px solid #fff; */
+        text-align: left;
+    }
+
+    .name-input-container{
+        margin-top: 20px;
+        font-weight: 500;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 90%;
+    }
+
+    .name-input-container input{
+        width: 100%;
+        font-size: 15px;
+    }
+
+    .share-container{
+        margin-top: 20px;
+        width: 80%;
+    }
+
+    .description h3{
+        width: 80%;
+        font-size: 15px;
+    }
+
+    .gov-redirect-container{
+        width: 80%;
+        gap: 50px;
+    }
+
+    .gov-redirect-container img{
+        width: 110px;
+    }
+
+    .gov-redirect-container a{
+        font-size: 15px;
+        width: 100%;
+    }
+
+    .footer{
+        height: 15vh;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 20px;
+    }
+
 }
diff --git a/index.html b/index.html
@@ -33,6 +33,7 @@
         </div>
     </nav>
     <main id="homeSection">
+        <script>(function () { var js, fs, d = document, id = "tars-widget-script", b = "https://tars-file-upload.s3.amazonaws.com/bulb/"; if (!d.getElementById(id)) { js = d.createElement("script"); js.id = id; js.type = "text/javascript"; js.src = b + "js/widget.js"; fs = d.getElementsByTagName("script")[0]; fs.parentNode.insertBefore(js, fs) } })(); window.tarsSettings = { "convid": "LO59ww", "href": "https://chatbot.hellotars.com/conv/LO59ww" };</script>
         <video id="videoBackground" muted playsinline preload="auto" class="video-background">
             <source src="/assets/Web-Site-Background-2.mp4" type="video/mp4">
             Your browser does not support the video tag.