Merge pull request #296 from credebl/certificate-share

refactor: user certificate templates
credebl · Nov 23, 2023 · 9630fb0 · 9630fb0
2 parents 2ddfe61 + ffc3096
commit 9630fb0
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 44 deletions.
diff --git a/apps/user/templates/arbiter-template.ts b/apps/user/templates/arbiter-template.ts
@@ -7,19 +7,23 @@ export class ArbiterTemplate {
 
   async getArbiterTemplate(attributes: Attribute[]): Promise<string> {
     try {
-      const [name, country, issuedBy] = await Promise.all(attributes).then((attributes) => {
+      const [name, issuedBy] = await Promise.all(attributes).then((attributes) => {
         const name = this.findAttributeByName(attributes, 'full_name')?.full_name ?? '';
-        const country = this.findAttributeByName(attributes, 'country')?.country ?? '';
         const issuedBy = this.findAttributeByName(attributes, 'issued_by')?.issued_by ?? '';
-        return [name, country, issuedBy];
+        return [name, issuedBy];
       });
       return `<!DOCTYPE html>
       <html lang="en">
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <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=Inter&display=swap" rel="stylesheet">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
+
+        <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=Dancing+Script:wght@700&display=swap" rel="stylesheet">
+      
         <style>
           body {
             margin: 0;
@@ -55,14 +59,19 @@ export class ArbiterTemplate {
       <img id="backgroundImage" src="https://credebl-dev-user-certificate.s3.ap-south-1.amazonaws.com/certificates/background_image.svg" alt="background" 
         style="height: 1000px; width: 770px;"
         />
-        <div id="textOverlay" style="width: 760px; height: 450px;">
+        <div id="textOverlay" style="width: 640px; height: 690px;">
           <div>
               <p style="font-size: 50px; font-family: Inter; margin: 0;">CERTIFICATE</p>
               <p style="font-size: 22px; font-family: Inter; margin: 0;"> OF RECOGNITION</p>
           </div>
           
           <p style="font-size: 15px; font-family: Inter;margin: 15; margin-top: 15px;">IS PROUDLY PRESENTED TO</p>
-          <p style="font-size: 35px; font-style: italic; margin: 0">${name}</p>
+          <p style="font-size: 45px; font-family: 'Dancing Script', cursive;
+          background: linear-gradient(90deg, #B9752B 2.4%, #F8D675 29.13%, #CD953F 52.41%, #F6D373 75.07%, #BF7E32 105.84%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          margin: 15px;">${name}</p>
           
           <span >
               <p style="font-size: 16px; " >has served as an Arbiter at the
@@ -77,8 +86,8 @@ export class ArbiterTemplate {
               <p style="font-size: 14px; margin: 0;">played a crucial role in maintaining the credibility of the competition.</p>
       
           </p>
-          <div style="font-family: Inter; font-weight: bold; font-size: 12px;">Date: 24, 25, 26 November 2023 | Place: Cidco Exhibition Centre, Navi Mumbai, ${country}</div>
-          <div style="font-family: Inter; font-weight: bold; font-size: 12px; margin-top:316px">Blockchain-based certificate issued using "credebl.id", by Blockster Labs Pvt. Ltd.</div>
+          <div style="font-family: Inter; font-weight: bold; font-size: 12px;">Date: 24, 25, 26 November 2023 | Place: Cidco Exhibition Centre, Navi Mumbai, India</div>
+          <div style="font-family: Inter;font-weight: bold;font-size: 12px;position: absolute;bottom: 6px;left: 50%;transform: translateX(-50%);width: 100%;">Blockchain-based certificate issued using "credebl.id", by Blockster Labs Pvt. Ltd.</div>
         </div>
       </div>
       

diff --git a/apps/user/templates/participant-template.ts b/apps/user/templates/participant-template.ts
@@ -8,20 +8,24 @@ export class ParticipantTemplate {
     async getParticipantTemplate(attributes: Attribute[]): Promise<string> {
 
     try {
-      const [name, country, issuedBy] = await Promise.all(attributes).then((attributes) => {
+      const [name, issuedBy] = await Promise.all(attributes).then((attributes) => {
         const name = this.findAttributeByName(attributes, 'full_name')?.full_name ?? '';
-        const country = this.findAttributeByName(attributes, 'country')?.country ?? '';
         const issuedBy = this.findAttributeByName(attributes, 'issued_by')?.issued_by ?? '';
-        return [name, country, issuedBy];
+        return [name, issuedBy];
       });
 
       return `<!DOCTYPE html>
       <html lang="en">
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <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=Inter&display=swap" rel="stylesheet">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
+
+        <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=Dancing+Script:wght@700&display=swap" rel="stylesheet">
+      
         <style>
           body {
             margin: 0;
@@ -40,13 +44,13 @@ export class ParticipantTemplate {
           }
       
           #textOverlay {
-              position: absolute;
-          top: 280px;
-          left: 50%;
-          transform: translateX(-50%);
-          text-align: center;
-          color: #2B2B2A;
-          font-size: 24px; 
+            position: absolute;
+            top: 280px;
+            left: 50%;
+            transform: translateX(-50%);
+            text-align: center;
+            color: #2B2B2A;
+            font-size: 24px; 
             
           }
         </style>
@@ -57,14 +61,19 @@ export class ParticipantTemplate {
       <img id="backgroundImage" src="https://credebl-dev-user-certificate.s3.ap-south-1.amazonaws.com/certificates/background_image.svg" alt="background"
       style="height: 1000px; width: 770px;"
         />
-        <div id="textOverlay" style="width: 760px; height: 450px;">
+        <div id="textOverlay" style="width: 640px; height: 690px;">
           <div>
               <p style="font-size: 50px; font-family: Inter; margin: 0;">CERTIFICATE</p>
               <p style="font-size: 22px; font-family: Inter; margin: 0;"> OF ACHIEVEMENT</p>
           </div>
           
           <p style="font-size: 15px; font-family: Inter;margin: 15; margin-top: 15px;">IS PROUDLY PRESENTED TO</p>
-          <p style="font-size: 35px; font-style: italic;">${name}</p>
+          <p style="font-size: 45px; font-family: 'Dancing Script', cursive;
+          background: linear-gradient(90deg, #B9752B 2.4%, #F8D675 29.13%, #CD953F 52.41%, #F6D373 75.07%, #BF7E32 105.84%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          margin: 15px;">${name}</p>
           
           <span style="font-size: 16px;">for successfully participating in the 
               <span style="font-size: 16px; font-weight: bold; ">${issuedBy} World Memory Championship 2023.</span>
@@ -73,8 +82,8 @@ export class ParticipantTemplate {
               <p style="font-size: 14px; margin: 0;">We acknowledge your dedication, hard work, and</p>
               <p style="font-size: 14px; margin: 0;">exceptional memory skills demonstrated during the competition.</p>
           </p>
-          <div style="font-family: Inter; font-weight: bold; font-size: 12px;">Date: 24, 25, 26 November 2023 | Place: Cidco Exhibition Centre, Navi Mumbai, ${country}</div>
-          <div style="font-family: Inter; font-weight: bold; font-size: 12px; margin-top:316px">Blockchain-based certificate issued using "credebl.id", by Blockster Labs Pvt. Ltd.</div>
+          <div style="font-family: Inter; font-weight: bold; font-size: 12px;">Date: 24, 25, 26 November 2023 | Place: Cidco Exhibition Centre, Navi Mumbai, India</div>
+          <div style="font-family: Inter;font-weight: bold;font-size: 12px;position: absolute;bottom: 6px;left: 50%;transform: translateX(-50%);width: 100%;">Blockchain-based certificate issued using "credebl.id", by Blockster Labs Pvt. Ltd.</div>
         </div>
       </div>
       

diff --git a/apps/user/templates/winner-template.ts b/apps/user/templates/winner-template.ts
@@ -7,23 +7,27 @@ export class WinnerTemplate {
 
   async getWinnerTemplate(attributes: Attribute[]): Promise<string> {
     try {
-      const [name, country, position, discipline, issuedBy, category] = await Promise.all(attributes).then((attributes) => {
+      const [name, position, discipline, issuedBy, category] = await Promise.all(attributes).then((attributes) => {
         const name = this.findAttributeByName(attributes, 'full_name')?.full_name ?? '';
-        const country = this.findAttributeByName(attributes, 'country')?.country ?? '';
         const position = this.findAttributeByName(attributes, 'position')?.position ?? '';
         const discipline = this.findAttributeByName(attributes, 'discipline')?.discipline ?? '';
         const issuedBy = this.findAttributeByName(attributes, 'issued_by')?.issued_by ?? '';
         const category = this.findAttributeByName(attributes, 'category')?.category ?? '';
         const date = this.findAttributeByName(attributes, 'issued_date')?.issued_date ?? '';
-        return [name, country, position, discipline, issuedBy, category, date];
+        return [name, position, discipline, issuedBy, category, date];
       });
       return `<!DOCTYPE html>
       <html lang="en">
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <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=Inter&display=swap" rel="stylesheet">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
+
+        <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=Dancing+Script:wght@700&display=swap" rel="stylesheet">
+
         <style>
           body {
             margin: 0;
@@ -58,14 +62,19 @@ export class WinnerTemplate {
       <div id="container" style="">
       <img id="backgroundImage" src="https://credebl-dev-user-certificate.s3.ap-south-1.amazonaws.com/certificates/background_image.svg" alt="background" 
       style="height: 1000px; width: 770px;"/>
-        <div id="textOverlay" style="width: 780px; height: 450px;">
+        <div id="textOverlay" style="width: 640px; height: 690px;">
           <div>
               <p style="font-size: 50px; font-family: Inter; margin: 0;">CERTIFICATE</p>
               <p style="font-size: 22px; font-family: Inter; margin: 0;"> OF EXCELLENCE</p>
           </div>
           
           <p style="font-size: 15px; font-family: Inter;margin: 15; margin-top: 15px;">IS PROUDLY PRESENTED TO</p>
-          <p style="font-size: 30px; font-style: italic; ">${name}</p>
+          <p style="font-size: 45px; font-family: 'Dancing Script', cursive;
+          background: linear-gradient(90deg, #B9752B 2.4%, #F8D675 29.13%, #CD953F 52.41%, #F6D373 75.07%, #BF7E32 105.84%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          margin: 15px;">${name}</p>
           
           <p style="font-size: 16px; margin: 0;">has secured ${position} position for ${discipline} </p>
               <p style="font-size: 16px; margin: 6px;">in ${category} category at the</p>
@@ -77,14 +86,14 @@ export class WinnerTemplate {
               <p style="font-size: 14px; margin: 0;">We acknowledge your dedication, hard work, and</p>
               <p style="font-size: 14px; margin: 0;">exceptional memory skills demonstrated during the competition.</p>
           </p>
-          <div style="font-family: Inter; font-weight: bold; font-size: 12px;">Date: 24, 25, 26 November 2023 | Place: Cidco Exhibition Centre, Navi Mumbai, ${country}</div>
-          <div style="font-family: Inter; font-weight: bold; font-size: 12px; margin-top:316px">Blockchain-based certificate issued using "credebl.id", by Blockster Labs Pvt. Ltd.</div>
+          <div style="font-family: Inter; font-weight: bold; font-size: 12px;">Date: 24, 25, 26 November 2023 | Place: Cidco Exhibition Centre, Navi Mumbai, India</div>
+          <div style="font-family: Inter;font-weight: bold;font-size: 12px;position: absolute;bottom: 6px;left: 50%;transform: translateX(-50%);width: 100%;">Blockchain-based certificate issued using "credebl.id", by Blockster Labs Pvt. Ltd.</div>
         </div>
       </div>
       
       </body>
       </html>
       `;
-    } catch {}
+    } catch { }
   }
 }
diff --git a/apps/user/templates/world-record-template.ts b/apps/user/templates/world-record-template.ts
@@ -7,20 +7,24 @@ export class WorldRecordTemplate {
 
   async getWorldRecordTemplate(attributes: Attribute[]): Promise<string> {
     try {
-      const [name, country, discipline, issuedBy] = await Promise.all(attributes).then((attributes) => {
+      const [name, discipline, issuedBy] = await Promise.all(attributes).then((attributes) => {
         const name = this.findAttributeByName(attributes, 'full_name')?.full_name ?? '';
-        const country = this.findAttributeByName(attributes, 'country')?.country ?? '';
         const discipline = this.findAttributeByName(attributes, 'discipline')?.discipline ?? '';
         const issuedBy = this.findAttributeByName(attributes, 'issued_by')?.issued_by ?? '';
-        return [name, country, discipline, issuedBy];
+        return [name, discipline, issuedBy];
       });
       return `<!DOCTYPE html>
       <html lang="en">
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <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=Inter&display=swap" rel="stylesheet">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
+
+        <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=Dancing+Script:wght@700&display=swap" rel="stylesheet">
+      
         <style>
           body {
             margin: 0;
@@ -56,14 +60,19 @@ export class WorldRecordTemplate {
       <img id="backgroundImage" src="https://credebl-dev-user-certificate.s3.ap-south-1.amazonaws.com/certificates/background_image.svg" alt="background" 
         style="height: 1000px; width: 770px;"
         />
-        <div id="textOverlay" style="width: 760px; height: 450px;">
+        <div id="textOverlay" style="width: 640px; height: 690px;">
           <div>
               <p style="font-size: 50px; font-family: Inter; margin: 0;">CERTIFICATE</p>
               <p style="font-size: 22px; font-family: Inter; margin: 0;"> OF WORLD RECORD</p>
           </div>
           
           <p style="font-size: 15px; font-family: Inter;margin: 15; margin-top: 15px;">IS PROUDLY PRESENTED TO</p>
-          <p style="font-size: 35px; font-style: italic;">${name}</p>
+          <p style="font-size: 45px; font-family: 'Dancing Script', cursive;
+          background: linear-gradient(90deg, #B9752B 2.4%, #F8D675 29.13%, #CD953F 52.41%, #F6D373 75.07%, #BF7E32 105.84%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          margin: 15px;">${name}</p>
           
           <span style="font-size: 16px;">for successfully creating the world record in the 
              ${discipline}
@@ -75,8 +84,8 @@ export class WorldRecordTemplate {
               <p style="font-size: 14px; margin: 0;">We acknowledge your dedication, hard work, and</p>
               <p style="font-size: 14px; margin: 0;">exceptional memory skills demonstrated during the competition.</p>
           </p>
-          <div style="font-family: Inter; font-weight: bold; font-size: 12px;">Date: 24, 25, 26 November 2023 | Place: Cidco Exhibition Centre, Navi Mumbai, ${country}</div>
-          <div style="font-family: Inter; font-weight: bold; font-size: 12px; margin-top:316px">Blockchain-based certificate issued using "credebl.id", by Blockster Labs Pvt. Ltd.</div>
+          <div style="font-family: Inter; font-weight: bold; font-size: 12px;">Date: 24, 25, 26 November 2023 | Place: Cidco Exhibition Centre, Navi Mumbai, India</div>
+          <div style="font-family: Inter;font-weight: bold;font-size: 12px;position: absolute;bottom: 6px;left: 50%;transform: translateX(-50%);width: 100%;">Blockchain-based certificate issued using "credebl.id", by Blockster Labs Pvt. Ltd.</div>
         </div>
       </div>