Skip to content

Commit

Permalink
Merge pull request #9 from kunalshah017/User-Engagement-Page
Browse files Browse the repository at this point in the history
Added Pledge Ceartificate
  • Loading branch information
kunalshah017 authored Jan 18, 2024
2 parents de590e6 + 65e62b0 commit 9fbe7cd
Show file tree
Hide file tree
Showing 12 changed files with 667 additions and 3 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.env
2 changes: 1 addition & 1 deletion Main-Game/4-Old/Positive/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ function handleScreenClick(event) {
const clickedElement = event.target;

if (clickedElement.closest(".outro")) {
window.location.href = "/index.html";
window.location.href = "/Pledge-Ceartificate/index.html";
}

if (currentStoryIndex === 3) {
Expand Down
2 changes: 1 addition & 1 deletion Main-Game/5-Endings/Negative/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ function handleScreenClick(event) {
const clickedElement = event.target;

if (clickedElement.closest(".outro")) {
window.location.href = "/index.html";
window.location.href = "/Pledge-Ceartificate/index.html";
}

if (currentStoryIndex === 3) {
Expand Down
2 changes: 1 addition & 1 deletion Main-Game/5-Endings/Positive/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ function handleScreenClick(event) {
const clickedElement = event.target;

if (clickedElement.closest(".outro")) {
window.location.href = "/index.html";
window.location.href = "/Pledge-Ceartificate/index.html";
}

if (currentStoryIndex === 1) {
Expand Down
Binary file added Pledge-Ceartificate/assets/certificate.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Pledge-Ceartificate/assets/download.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Pledge-Ceartificate/assets/instagram.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Pledge-Ceartificate/assets/twitter.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Pledge-Ceartificate/assets/whatsapp.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 88 additions & 0 deletions Pledge-Ceartificate/index.html
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>
187 changes: 187 additions & 0 deletions Pledge-Ceartificate/script.js
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;
}
}
Loading

0 comments on commit 9fbe7cd

Please sign in to comment.