cert verify: update templete ui

BIT-GDSC · Jul 18, 2024 · 607e74c · 607e74c
1 parent 270b255
commit 607e74c
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 72 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
  "cSpell.words": [
  "devs",
- "genai"
+ "genai",
+ "skillboost"
  ]
 }
diff --git a/client/src/App.css b/client/src/App.css
@@ -791,14 +791,56 @@ a {
  }
 }
 
-/* Certificate Verification Styles */
+/************************* Certificate Verification Styles */
+.cert-main-container {
+ min-height: 100vh;
+ padding: 100px 25px 0;
+}
+.cert-aspect-box {
+ position: relative;
+ padding-top: 56.25%;
+}
+.cert-aspect-centering {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.certificate-main-cont {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
 .candidate-name {
  font-family: 'Island Moments';
 }
 .candidate-name-gen-ai-24 {
+ position: absolute;
+ width: 100%;
+ text-align: center;
+ top: 41%;
+ font-size: 4vw;
  font-family: 'Caveat', cursive, 'Open Sans', sans-serif;
  color: #d9d9d9;
 }
+.cert-verify-qr {
+ position: absolute;
+ right: 26%;
+}
+.cert-skillboost-qr,
+.cert-verify-qr {
+ bottom: 5%;
+ width: 8%;
+}
+.cert-skillboost-qr {
+ position: absolute;
+ right: 3%;
+}
 
 .loader-dot:after {
  content: '';

diff --git a/client/src/pages/Certificate/Template/GenAI24.jsx b/client/src/pages/Certificate/Template/GenAI24.jsx
@@ -7,36 +7,33 @@ import {
  Image,
  StyleSheet,
  Font,
- PDFDownloadLink
+ PDFDownloadLink,
 } from '@react-pdf/renderer'
 
 // IMAGE Template
-const  GenAI24 = () => {
+const GenAI24 = () => {
  const { certData } = useCertStore()
- console.log("request arrived at component.")
  return (
  <>
- <div className='relative w-[512px] h-[288px] md:w-[720px] md:h-[405px] lg:w-[1080px] lg:h-[607px] drop-shadow-md flex flex-col items-center justify-center'>
+ <div className='certificate-main-cont'>
  <img
  src='/genai_24_cert_tmp.png'
  className='w-full h-full'
  alt='Certificate Template'
  />
- <p className='candidate-name-gen-ai-24 absolute left-1/2 -translate-x-1/2 text-xl md:text-3xl lg:text-5xl mb-5 md:mb-5 lg:mb-8'>
- {certData.fullName}
- </p>
+ <p className='candidate-name-gen-ai-24 '>{certData.fullName}</p>
  <img
  src={certData.verifyQR}
- className='absolute bottom-[1px] py-[1px] px-1 md:p-1 lg:p-2 left-[339px] w-[40px] h-[50px] md:bottom-[11px] md:left-[479px] md:w-[51px] md:h-[52px] lg:bottom-[16px] lg:left-[713px] lg:w-[88px] lg:h-[80.8px] lg:rounded-[13px] object-contain'
+ className='cert-verify-qr'
  alt='Verify QR'
  />
  <img
  src={certData.skillBoostQR}
- className='absolute bottom-[1px] py-[1px] px-1 md:p-1 lg:p-2 left-[454px] w-[40px] h-[50px] md:bottom-[11px] md:left-[642px] md:w-[51px] md:h-[52px] lg:bottom-[16px] lg:left-[957px] lg:w-[88px] lg:h-[80.8px] lg:rounded-[13px] object-contain'
+ className='cert-skillboost-qr'
  alt='Skill Boost QR'
  />
  </div>
- <div className='flex flex-col gap-3 items-center'>
+ <div className='flex flex-col py-12 gap-3 items-center'>
  <div className='flex items-center gap-3 flex-row sm:gap-5'>
  <a
  href={`https://twitter.com/intent/tweet?text=I%20just%20earned%20the%20${certData.certificate}%20Certificate!%20Check%20it%20out%20here:%20${certData.verifyURL}`}
@@ -92,37 +89,37 @@ Font.register({
  family: 'Island Moments',
  fonts: [
  {
- src: '/fonts/IslandMoments-Regular.ttf'
- }
- ]
+ src: '/fonts/IslandMoments-Regular.ttf',
+ },
+ ],
 })
 Font.register({
  family: 'Caveat',
  fonts: [
  {
- src: '/fonts/Caveat-VariableFont_wght.ttf'
- }
- ]
+ src: '/fonts/Caveat-VariableFont_wght.ttf',
+ },
+ ],
 })
 
 // Styles for PDF
 const styles = StyleSheet.create({
  page: {
  width: 2160,
  height: 1215,
- position: 'relative'
+ position: 'relative',
  },
  section: {
  width: '100%',
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
- justifyContent: 'center'
+ justifyContent: 'center',
  },
  certImage: {
  width: '100%',
- height: '100%'
+ height: '100%',
  },
  name: {
  position: 'absolute',
@@ -133,7 +130,7 @@ const styles = StyleSheet.create({
  color: '#D9D9D9',
  textAlign: 'center',
  margin: 'auto',
- fontFamily: 'Caveat'
+ fontFamily: 'Caveat',
  },
  verify: {
  position: 'absolute',
@@ -142,7 +139,7 @@ const styles = StyleSheet.create({
  width: '210px',
  height: '210px',
  objectFit: 'contain',
- padding: '16px'
+ padding: '16px',
  },
  skill: {
  position: 'absolute',
@@ -151,8 +148,8 @@ const styles = StyleSheet.create({
  width: '210px',
  height: '210px',
  objectFit: 'contain',
- padding: '16px'
- }
+ padding: '16px',
+ },
 })
 
 export default GenAI24
diff --git a/client/src/pages/Certificate/Template/GoogleCloudFacilitator.jsx b/client/src/pages/Certificate/Template/GoogleCloudFacilitator.jsx
@@ -54,7 +54,7 @@ const GoogleCloudFacilitator = () => {
  document={<GoogleCloudFacilitatorPDF certData={certData} />}
  fileName='certificate.pdf'
  >
- {({ blob, url, loading, error }) => (
+ {({ loading}) => (
  <button
  disabled={loading}
  className='rounded-2xl w-[150px] h-[35px] bg-[#FFBC39] hover:bg-white text-white hover:text-[#FFBC39] duration-200 font-extrabold flex items-center justify-center'

diff --git a/client/src/pages/Certificate/VerifyCertificate.jsx b/client/src/pages/Certificate/VerifyCertificate.jsx
@@ -14,53 +14,56 @@ const VerifyCertificate = () => {
  useEffect(() => {
  if (certificateID) fetchCertData(certificateID)
  }, [certificateID])
- console.log(certData)
  return (
- <div
- className='flex items-center justify-center overflow-hidden md:overflow-auto'
- style={{ minHeight: '100svh' }}
- >
- <div className='h-full pb-12 md:pt-[100px] flex flex-col gap-5 items-center justify-center'>
- {certLoading ? (
- // Fetching Certificate
- <>
- <div className='relative w-[400px] h-[300px] md:w-[625px] md:h-[426px] lg:w-[950px] lg:h-[652px] border rounded'>
- <Skeleton className='absolute -z-10 -top-[4px] left-0 w-full h-full' />
- <div className='absolute top-0 left-0 w-full h-full flex items-center justify-center z-50 text-xl font-extrabold'>
- <div className='w-[97.5px]'>Validating</div>
- <div className='w-[20px] loader-dot' />
+ // <div
+ // className='flex items-center justify-center overflow-scroll md:overflow-auto'
+ // style={{ minHeight: '100svh' }}
+ // >
+ <div className='cert-main-container'>
+ <div className='cert-aspect-box'>
+ {/* <div className='h-full px-6 pb-12 md:pt-[100px] flex flex-col gap-5 items-center justify-center'> */}
+ <div className='cert-aspect-centering'>
+ {certLoading ? (
+ // Fetching Certificate
+ <>
+ <div className='relative w-[400px] h-[300px] md:w-[625px] md:h-[426px] lg:w-[950px] lg:h-[652px] border rounded'>
+ <Skeleton className='absolute -z-10 -top-[4px] left-0 w-full h-full' />
+ <div className='absolute top-0 left-0 w-full h-full flex items-center justify-center z-50 text-xl font-extrabold'>
+ <div className='w-[97.5px]'>Validating</div>
+ <div className='w-[20px] loader-dot' />
+ </div>
  </div>
- </div>
- <div className='flex flex-col gap-3 items-center'>
- <div className='flex items-center gap-3 flex-row sm:gap-5'>
- <div className='rounded-2xl overflow-hidden w-[150px] h-[35px]'>
- <Skeleton className='w-full p-4 h-full' />
+ <div className='flex flex-col gap-3 items-center'>
+ <div className='flex items-center gap-3 flex-row sm:gap-5'>
+ <div className='rounded-2xl overflow-hidden w-[150px] h-[35px]'>
+ <Skeleton className='w-full p-4 h-full' />
+ </div>
+ <div className='rounded-2xl overflow-hidden w-[150px] h-[35px]'>
+ <Skeleton className='w-full p-4 h-full' />
+ </div>
  </div>
  <div className='rounded-2xl overflow-hidden w-[150px] h-[35px]'>
  <Skeleton className='w-full p-4 h-full' />
  </div>
  </div>
- <div className='rounded-2xl overflow-hidden w-[150px] h-[35px]'>
- <Skeleton className='w-full p-4 h-full' />
- </div>
+ </>
+ ) : certData.message ? (
+ // Error fetching Certificate
+ <div className='relative bg-white w-[400px] h-[300px] md:w-[625px] md:h-[426px] lg:w-[950px] lg:h-[652px] border rounded text-xl font-extrabold'>
+ <p className='absolute top-0 left-0 w-full h-full flex items-center justify-center z-50 text-[#4A90F4] text-xl font-extrabold'>
+ {certData.message}
+ </p>
  </div>
- </>
- ) : certData.message ? (
- // Error fetching Certificate
- <div className='relative bg-white w-[400px] h-[300px] md:w-[625px] md:h-[426px] lg:w-[950px] lg:h-[652px] border rounded text-xl font-extrabold'>
- <p className='absolute top-0 left-0 w-full h-full flex items-center justify-center z-50 text-[#4A90F4] text-xl font-extrabold'>
- {certData.message}
- </p>
- </div>
- ) : certData.certificate === 'Google Cloud Study Jam' ? (
- <GoogleCloud />
- ) : certData.certificate === 'Google Gen AI Study Jam 2024' ? (
- <GenAI24 />
- ) : (
- certData.certificate === 'Google Cloud Study Jam Facilitator' && (
- <GoogleCloudFacilitator />
- )
- )}
+ ) : certData.certificate === 'Google Cloud Study Jam' ? (
+ <GoogleCloud />
+ ) : certData.certificate === 'Google Gen AI Study Jam 2024' ? (
+ <GenAI24 />
+ ) : (
+ certData.certificate === 'Google Cloud Study Jam Facilitator' && (
+ <GoogleCloudFacilitator />
+ )
+ )}
+ </div>
  </div>
  </div>
  )

diff --git a/client/vite.config.js b/client/vite.config.js
@@ -12,6 +12,13 @@ export default defineConfig({
  "X-Content-Type-Options": "nosniff", // Protects from improper scripts runnings
  "X-XSS-Protection": "1; mode=block", // Gives XSS protection to legacy browsers
  },
+ proxy: {
+ '/api': {
+ target: 'http://localhost:5000',
+ changeOrigin: true,
+ secure: false,
+ },
+ },
  },
  build: {
  rollupOptions: {
@@ -22,11 +29,4 @@ export default defineConfig({
  }
  }
  },
- proxy: {
- '/api': {
- target: 'http://localhost:5000',
- changeOrigin: true,
- secure: false,
- },
- },
 })