Added examples in certificate verification

assets/css/main.css

@@ -16,7 +16,7 @@ body {
   --text-color-light: 100, 100, 100;
   --foreground-color: 255, 255, 255;
   --background-color: #f6f6f6;
-  --error-color: red;
+  --danger-color: red;
   --green: #007936;
   --banner-color: #1e88e5;
   --secondary-text-color: #034baa;
@@ -33,7 +33,7 @@ body[data-theme=dark] {
   --text-color-light: 170, 170, 170;
   --foreground-color: 20, 20, 20;
   --background-color: #0a0a0a;
-  --error-color: rgb(255, 106, 106);
+  --danger-color: rgb(255, 106, 106);
   --banner-color: #0166be;
   --secondary-text-color: #4393fc;
   --font-weight-factor: 0.9;

assets/css/main.scss

@@ -14,7 +14,7 @@ body {
   --text-color-light: 100, 100, 100;
   --foreground-color: 255, 255, 255;
   --background-color: #f6f6f6;
-  --error-color: red;
+  --danger-color: red;
   --green: #007936;
   --banner-color: #1e88e5;
   --secondary-text-color: #034baa;
@@ -30,7 +30,7 @@ body[data-theme="dark"] {
   --text-color-light: 170, 170, 170;
   --foreground-color: 20, 20, 20;
   --background-color: #0a0a0a;
-  --error-color: rgb(255, 106, 106);
+  --danger-color: rgb(255, 106, 106);
   --banner-color: #0166be;
   --secondary-text-color: #4393fc;
   --font-weight-factor: 0.9;

assets/js/index.js

@@ -353,8 +353,8 @@ const siteMap = [
         brief: `This outlet has access to blockchain verification to all of RanchiMall issued Internship & Employment  certificates`,
         outletLinks: [
             {
-                label: "See Intern Payments",
-                url: "https://ranchimall.github.io/ribcpayments/",
+                label: "Certificate list",
+                url: "https://www.ranchimall.net/certify/",
                 outbound: true,
             },
             {
@@ -362,10 +362,10 @@ const siteMap = [
                 url: "verify.html",
             },
             {
-                label: "Check issued certificates",
-                url: "https://www.ranchimall.net/certify/",
+                label: "See Intern Payments",
+                url: "https://ranchimall.github.io/ribcpayments/",
                 outbound: true,
-          }
+            },
         ],
       }
     ],

verify.html

@@ -26,6 +26,16 @@
             --gap: 0;
             width: min(26rem, 100%);
         }
+
+        dt {
+            margin-bottom: 0.3rem;
+            font-weight: 500;
+            font-size: 0.95rem;
+        }
+
+        dd {
+            margin-bottom: 1.5rem;
+        }
     </style>
 </head>
 
@@ -76,6 +86,17 @@
                     <sm-input id="tx_id_input" type="search" placeholder="Transaction ID"></sm-input>
                     <button class="button button--primary" type="submit" onclick="checkId(event)">Check</button>
                 </sm-form>
+                <div class="grid gap-1 margin-top-1-5">
+                    <h4>Sample transaction IDs</h4>
+                    <dl>
+                        <dt>Internship certificate</dt>
+                        <dd class="breakable">Transaction ID:
+                            8a56f42b495a7df3757ce7a8ca271e29eed39f78f09392d1ec6e0de7ebcedef2</dd>
+                        <dt>Employment certificate</dt>
+                        <dd class="breakable">Transaction ID:
+                            f938cc7af934154a47a12bf10068587e8617a7753c61ee8347b2d550dfe68186</dd>
+                    </dl>
+                </div>
             </div>
         </section>
     </main>
@@ -108,6 +129,8 @@
                     case "CERTIFICATE OF PARTICIPATION":
                         certificateVerification = 'participationCertificate';
                         break;
+                    default:
+                        return notify('Certificate transaction ID is not valid', 'error')
                 }
                 window.open(`https://www.ranchimall.net/verify/?${certificateVerification}=${toVerify}`, '_blank').focus();
             }).catch(err => {