add view certificate page

src/App.js

@@ -30,6 +30,7 @@ import EventsUpdatePage from "./pages/admin/DataUpdate/EventsUpdatePage";
 import Nominations from "./pages/Nominations/Nominations";
 import LiveScoreboard from "./pages/LiveScoreboard/LiveScoreboard";
 import Results from "./pages/Results/Results";
+import ViewCertificate from "./pages/certifgen/ViewCertificate";
 
 function App() {
  useEffect(() => {
@@ -85,6 +86,7 @@ function App() {
  component={ElectionCandidates}
  />
 
+ <Route exact path="/certifgen/view/:id" component={ViewCertificate} />
  {/* Other Routes */}
  {/*<Route exact path="/gallery" component={Gallery} /> */}
  </Switch>

src/pages/certifgen/Popper.js

@@ -0,0 +1,22 @@
+import React, { useState, useEffect } from "react";
+import { useWindowSize } from "react-use";
+import Confetti from "react-confetti";
+
+const ConfettiComponent = () => {
+ const [isConfettiActive, setConfettiActive] = useState(true);
+ const { width, height } = useWindowSize();
+
+ // Use a timeout or any condition to control when to stop the confetti
+ useEffect(() => {
+ const confettiTimeout = setTimeout(() => {
+ setConfettiActive(false);
+ }, 10000);
+
+ // Clean up the timeout to avoid memory leaks
+ return () => clearTimeout(confettiTimeout);
+ }, []); // The empty dependency array ensures that this effect runs only once
+
+ return <>{isConfettiActive && <Confetti width={width} height={height} />}</>;
+};
+
+export default ConfettiComponent;

src/pages/certifgen/ViewCertificate.css

@@ -0,0 +1,96 @@
+@media only screen and (min-width:725px){
+ .certificateimage {
+ text-align: center;
+ }
+
+ .certificateimage img{
+ width: 100%;
+ height: 50%;
+ }
+
+ .certifpreview_nav h1{
+ font-size: 2.25rem;
+ }
+
+ .downloadBtn{
+ font-size: 1.25rem;
+ width: auto;
+ margin: 0 1rem;
+ }
+}
+
+@media only screen and (max-width:724px){
+ .certificateimage {
+ text-align: center;
+ }
+
+ .certificateimage img{
+ width: 80vw;
+ height: auto;
+ }
+
+ .certifpreview_nav h1{
+ font-size: 1.6rem;
+ }
+
+ .downloadBtn{
+ font-size: 1.25rem;
+ width: 15rem;
+ }
+}
+
+.downloadBtn{
+ color: #F1C40F;
+ background-color: transparent;
+ /* background-color: #F1C40F; */
+ padding: 10px;
+ font: 1rem;
+ transition: all 0.2s;
+ /* border: none; */
+ border: 1px solid #F1C40F;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer !important;
+}
+
+.downloadBtn:hover{
+ background-color: #F1C40F;
+ color: white;
+ cursor: pointer !important;
+}
+
+.gymk_logo,.kgp_logo{
+ width: 6rem;
+ margin: 0 0.6rem;
+}
+
+.certifpreview_body hr{
+ color: #F1C40F;
+ width: 80vw;
+ margin: 0.5rem auto;
+ border: 0.2rem solid #F1C40F;
+}
+
+.certifpreview_share{
+ width: 40vw;
+ display: flex;
+ flex-direction: column;
+ align-items: center; 
+}
+
+.certifshare_text{
+ color: white;
+ font-size: 1.25rem;
+ font-weight: 600;
+}
+
+.certifshare_link i{
+ color: black;
+ background-color: #F1C40F;
+ border-radius: 50%;
+ width: 2rem;
+ margin: 0 0.5rem;
+ padding: 0.5rem;
+ font-size: 1.25rem;
+}
+

src/pages/certifgen/ViewCertificate.js

@@ -0,0 +1,185 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import IITKGPLogo from "../../images/IIT_Kharagpur_Logo.png";
+import Trail from "../../images/WebsiteHackathon.jpg";
+import "./ViewCertificate.css";
+import Popper from "./Popper";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+
+//https://gymkhana.iitkgp.ac.in/certifgen/view/NjYxYWFlOGM4ZjU0NTJjZmNlM2IxZjIx
+const ViewCertificate = () => {
+ document.title = "Certificate | TSG";
+
+ const params = useParams();
+ // console.log(params.id);
+ const [certificateImage, setCertificateImage] = useState("");
+ const [certifData, setCertifData] = useState({});
+
+ useEffect(() => {
+ const getCertifData = async () => {
+ try {
+ const response = await fetch(
+ `http://localhost:5050/api/certifgen/generateCertif/${params.id}`
+ );
+ if (!response.ok) {
+ throw new Error("Failed to fetch certificate data");
+ }
+ const data = await response.json();
+ console.log(data);
+ setCertifData(data);
+ setCertificateImage(data.certificate);
+ } catch (error) {
+ console.error("Error fetching certificate data:", error);
+ }
+ };
+
+ getCertifData();
+ }, []);
+
+ const downloadImage = () => {
+ // Create a Blob from the base64 encoded image
+ const byteCharacters = atob(certificateImage.split(",")[1]);
+ const byteNumbers = new Array(byteCharacters.length);
+ for (let i = 0; i < byteCharacters.length; i++) {
+ byteNumbers[i] = byteCharacters.charCodeAt(i);
+ }
+ const byteArray = new Uint8Array(byteNumbers);
+ const blob = new Blob([byteArray], { type: "image/png" });
+
+ // Create a download link and trigger the download
+ const url = window.URL.createObjectURL(blob);
+ const link = document.createElement("a");
+ link.href = url;
+ link.setAttribute("download", "certificate.png");
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ };
+
+ // const downloadPdf = () => {
+ // const pdf = new jsPDF('p', 'mm', 'a4');
+
+ // // Calculate the dimensions of the image relative to the page size
+ // const pageWidth = pdf.internal.pageSize.getWidth();
+ // const pageHeight = pdf.internal.pageSize.getHeight();
+
+ // // Load the image to get its natural width and height
+ // const img = new Image();
+ // img.src = certificateImage;
+ // img.onload = () => {
+ // const imgWidth = pageWidth;
+ // const imgHeight = (pageWidth * img.naturalHeight) / img.naturalWidth;
+
+ // // Add the image to the PDF
+ // pdf.addImage(certificateImage, 'JPEG', 0, 0, imgWidth, imgHeight);
+
+ // // Save the PDF
+ // pdf.save('certificate.pdf');
+ // };
+ // };
+ const downloadPdf = () => {
+ const img = new Image();
+ img.onload = () => {
+ const pdf = new jsPDF("p", "pt", [img.width, img.height]);
+ // Set the width of the image to match the width of the PDF page
+ const imgWidth = pdf.internal.pageSize.getWidth();
+ const imgHeight = (img.height * imgWidth) / img.width;
+
+ // Add the image to the PDF
+ pdf.addImage(img, "JPEG", 0, 0, imgWidth, img.height);
+
+ // Save the PDF
+ pdf.save("certificate.pdf");
+ };
+ img.src = certificateImage;
+ };
+
+ return (
+ <div className="certifpreview" style={{ maxHeight: "100%" }}>
+ <a href="/"
+ className="certifpreview_nav"
+ style={{
+ display: "flex",
+ alignItems: "center",
+ width: "100vw",
+ justifyContent: "center",
+ gap: "0.75rem",
+ margin: "2rem auto",
+ textDecoration: "none",
+ cursor: "pointer"
+ }}
+ >
+ <img
+ src="/data/media/images/general/gymkhanaLogo.png"
+ alt="gymk_logo"
+ className="gymk_logo"
+ />
+ <div style={{textAlign: "centre"}}>
+ <h1>Technology Students' Gymkhana</h1>
+ <h2 style={{color: "white"}}>Indian Institute of Technology Kharagpur</h2>
+ </div>
+ </a>
+ <div
+ className="certifpreview_body"
+ style={{
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ width: "80vw",
+ margin: "0 auto",
+ }}
+ >
+ <h1 style={{ fontSize: "2rem", margin: "auto" }}>CERTIFICATE</h1>
+ <h1
+ style={{
+ fontSize: "1.5rem",
+ margin: "0.5rem auto 2rem",
+ color: "white",
+ // border: "1px solid white",
+ padding: "10px 20px",
+ textDecoration: "underline",
+ }}
+ >
+ {certifData.eventName}
+ </h1>
+ <div className="certificateimage">
+ <div
+ className="download_btns"
+ style={{
+ display: "flex",
+ width: "100%",
+ justifyContent: "space-between",
+ padding: "1.25rem 0",
+ }}
+ >
+ <button className="downloadBtn" onClick={downloadImage}>
+ <i className="fa fa-picture-o" aria-hidden="true"></i>
+ Download as Image
+ </button>
+ {/* <button className="downloadBtn" onClick={downloadPdf}>
+ <i
+ className="fa fa-file-pdf-o"
+ aria-hidden="true"
+ ></i>
+ Download as Pdf
+ </button> */}
+ </div>
+ </div>
+ <img src={certificateImage} alt="Certificate" />
+ {/* <div className='certifpreview_share'>
+ <p className='certifshare_text'>Share it on:</p>
+ <div className='certifshare_links'>
+ <a href="#" className='certifshare_link'><i class="fa fa-facebook"></i></a>
+ <a href="#" className='certifshare_link'><i class="fa fa-twitter"></i></a>
+ <a href="#" className='certifshare_link'><i class="fa fa-instagram"></i></a>
+ <a href="#"className='certifshare_link'><i class="fa fa-linkedin"></i></a>
+ </div>
+ </div> */}
+ </div>
+ <Popper />
+ </div>
+ );
+};
+
+export default ViewCertificate;