-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from kunalshah017/User-Engagement-Page
Added Pledge Ceartificate
- Loading branch information
Showing
12 changed files
with
667 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
.env |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Sudo: Choices</title> | ||
<link rel="icon" href="/assets/tab-logo.png" type="image/png"> | ||
<link rel="stylesheet" href="style.css"> | ||
<style> | ||
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'); | ||
</style> | ||
<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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" | ||
rel="stylesheet"> | ||
</head> | ||
|
||
<body> | ||
<nav> | ||
<img src="/assets/sudo.png" alt="Logo" class="logo"> | ||
|
||
<ul class="nav-links"> | ||
<li><a href="https://sudo-choices.vercel.app/#homeSection">Home</a></li> | ||
<li><a href="https://sudo-choices.vercel.app/#aboutTeam">About Team: <strong>Sudo</strong></a></li> | ||
<li><a href="https://sudo-choices.vercel.app/#aboutProject">About Project</a></li> | ||
<li><a onclick="comingSoon(this)" class="ai-button">Ai Counselling</a></li> | ||
</ul> | ||
<button class="hamburger-menu" onclick="toggleMenu()"></button> | ||
<div class="menu-overlay"> | ||
<ul class="menu-overlay-items"> | ||
<li><a href="https://sudo-choices.vercel.app/#homeSection" onclick="hideMenu()">Home</a></li> | ||
<li><a href="https://sudo-choices.vercel.app/#aboutTeam" onclick="hideMenu()">About Team: | ||
<strong>Sudo</strong></a></li> | ||
<li><a href="https://sudo-choices.vercel.app/#aboutProject" onclick="hideMenu()">About Project</a></li> | ||
<li><a onclick="comingSoon(this)" class="ai-button">Ai Counselling</a></li> | ||
</ul> | ||
</div> | ||
</nav> | ||
|
||
<main> | ||
<div class="certificate-form-container"> | ||
<h1>Get Your Anti-Drug Warrior Certificate</h1> | ||
|
||
<div class="consent-check-container"> | ||
<input class="consent-check" id="consent-check" onclick="toggleConsent()" type="checkbox"></input> | ||
<label for="consent-check">I agree to take Anti-Drug pledge & Become Anti-Drug Warrior</label> | ||
</div> | ||
|
||
<div class="name-input-container"> | ||
<label for="name-input">Please Enter your name :</label> | ||
<input class="name-input" id="name-input" type="text" placeholder="First Name & Last Name"></input> | ||
</div> | ||
<button class="name-input-button" onclick="generateCertificate()">Get certificate</button> | ||
<div id="result"> | ||
</div> | ||
<img src="assets/certificate.png" alt="" class="temp-img"> | ||
<div class="share-container"> | ||
Share your certificate on Social Media | ||
<div class="share-platforms"> | ||
<img src="assets/download.png" alt="download" title="Download" style="filter: invert(1);" | ||
onclick="downloadCertificate()"> | ||
<img src=" assets/whatsapp.png" alt="whatsapp" title="Whatsapp" onclick="whatsappShare()"> | ||
<img src=" assets/instagram.png" alt="instagram" title="Instagram" onclick="instagramShare()"> | ||
<img src="assets/twitter.png" alt="twitter" title="Twitter" onclick="twitterShare()"> | ||
</div> | ||
</div> | ||
|
||
</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"> | ||
<a href="https://pledge.mygov.in/fightagainstdrugabuse/" target="_blank" class="ai-button"> | ||
<div>Take Pledge</div> | ||
</a> | ||
</div> | ||
</div> | ||
</main> | ||
|
||
<script src="script.js"></script> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,187 @@ | ||
// Nav bar Scroll | ||
const nav = document.querySelector("nav"); | ||
|
||
let lastScrollPos = 0; | ||
window.addEventListener("scroll", function () { | ||
const currentScrollPos = window.scrollY; | ||
|
||
if (currentScrollPos > lastScrollPos) { | ||
// Scrolling down | ||
nav.style.top = "-50%"; | ||
} else { | ||
// Scrolling up | ||
nav.style.top = "0"; | ||
} | ||
lastScrollPos = currentScrollPos; | ||
}); | ||
|
||
// Mobile Menu | ||
const mobileMenu = document.querySelector(".menu-overlay"); | ||
const menuButton = document.querySelector(".hamburger-menu"); | ||
|
||
let isMenuOpen = false; | ||
|
||
function showMenu() { | ||
isMenuOpen = true; | ||
mobileMenu.style.right = "0"; | ||
menuButton.style.backgroundImage = "url(/assets/cross-icon.png)"; | ||
} | ||
|
||
function hideMenu() { | ||
isMenuOpen = false; | ||
mobileMenu.style.right = "-100%"; | ||
menuButton.style.backgroundImage = "url(/assets/menu-icon.png)"; | ||
} | ||
|
||
function toggleMenu() { | ||
if (!isMenuOpen) { | ||
showMenu(); | ||
console.log("Showing menu"); | ||
} else { | ||
hideMenu(); | ||
console.log("Hiding menu"); | ||
} | ||
} | ||
|
||
function comingSoon(a) { | ||
a.textContent = "Coming Soon!"; | ||
setTimeout(() => { | ||
a.textContent = "Ai Counselling"; | ||
}, 1000); | ||
} | ||
|
||
// Ceaftificate generator | ||
let antiDrugConsent = false; | ||
|
||
const buttonHover = document.querySelector(".button-hovered"); | ||
|
||
function toggleConsent() { | ||
antiDrugConsent = !antiDrugConsent; | ||
console.log(antiDrugConsent); | ||
if (antiDrugConsent) { | ||
const getcertificate = document.querySelector(".name-input-button"); | ||
getcertificate.style.backgroundColor = "#0edf23"; | ||
getcertificate.style.opacity = "1"; | ||
getcertificate.style.cursor = "pointer"; | ||
} else { | ||
const getcertificate = document.querySelector(".name-input-button"); | ||
getcertificate.style.backgroundColor = "gray"; | ||
getcertificate.style.opacity = "0.5"; | ||
getcertificate.style.cursor = "not-allowed"; | ||
} | ||
} | ||
|
||
function generateCertificate() { | ||
const name = document.getElementById("name-input").value; | ||
const resultDiv = document.getElementById("result"); | ||
const tempImg = document.querySelector(".temp-img"); | ||
|
||
if (!antiDrugConsent) { | ||
resultDiv.textContent = | ||
"Please give your consent, by clicking the checkbox"; | ||
return; | ||
} | ||
|
||
if (name === "") { | ||
resultDiv.textContent = "Please enter your name"; | ||
return; | ||
} | ||
|
||
tempImg.style.display = "none"; | ||
|
||
const canvas = document.createElement("canvas"); | ||
canvas.width = 1000; | ||
canvas.height = 1300; | ||
|
||
const ctx = canvas.getContext("2d"); | ||
const img = new Image(); | ||
img.src = "assets/certificate.png"; | ||
|
||
img.onload = async function () { | ||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); | ||
ctx.font = "110px Cormorant Garamond"; | ||
ctx.fontWeight = "bold"; | ||
ctx.fillStyle = "white"; | ||
ctx.textAlign = "center"; | ||
ctx.fillText(name, canvas.width / 2, 735); | ||
|
||
const imgURL = canvas.toDataURL("image/png"); | ||
|
||
const certificateImg = new Image(); | ||
certificateImg.src = imgURL; | ||
resultDiv.innerHTML = ""; | ||
resultDiv.appendChild(certificateImg); | ||
|
||
const uploadedImageUrl = await uploadToImgur(imgURL); | ||
|
||
if (uploadedImageUrl) { | ||
const certificateImg = new Image(); | ||
certificateImg.src = uploadedImageUrl; | ||
resultDiv.innerHTML = ""; | ||
resultDiv.appendChild(certificateImg); | ||
} else { | ||
console.error("Failed to upload image to Imgur"); | ||
} | ||
}; | ||
|
||
const shareContainer = document.querySelector(".share-container"); | ||
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; | ||
|
||
try { | ||
const response = await fetch("https://api.imgur.com/3/image", { | ||
method: "POST", | ||
headers: { | ||
Authorization: `Client-ID ${clientId}`, | ||
"Content-Type": "application/json", | ||
}, | ||
body: JSON.stringify({ | ||
image: imageData.split(",")[1], // Extracting base64 data from the data URL | ||
}), | ||
}); | ||
|
||
const data = await response.json(); | ||
|
||
if (data.success) { | ||
const imageUrl = data.data.link; | ||
console.log("Image uploaded to Imgur:", imageUrl); | ||
return imageUrl; | ||
} else { | ||
console.error("Imgur upload failed:", data.data.error); | ||
return null; | ||
} | ||
} catch (error) { | ||
console.error("Error uploading to Imgur:", error.message); | ||
return null; | ||
} | ||
} |
Oops, something went wrong.