From f0bec0881d8a438207d76582f12f867b50348265 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sat, 26 Nov 2022 19:45:15 +0530
Subject: [PATCH] UI changes

---
 index.html | 80 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 73 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 6f5ee00..bf79994 100644
--- a/index.html
+++ b/index.html
@@ -109,7 +109,7 @@
             padding: 1.5rem;
         }
 
-        #verification_steps {
+        .verification-steps {
             display: grid;
             gap: 1.5rem;
             align-items: center;
@@ -185,10 +185,48 @@
             margin-top: 1.5rem;
         }
 
+        .link {
+            display: inline;
+            background-color: transparent;
+            color: #3d5afe;
+            border: none;
+            font-size: inherit;
+            font-family: inherit;
+            cursor: pointer;
+        }
+
+        .hover-over {
+            position: relative;
+        }
+
+        .hover-over .verification-steps {
+            display: none;
+            position: absolute;
+            flex-direction: column;
+            text-align: left;
+            background-color: white;
+            width: 40vw;
+            left: 0;
+            right: 0;
+            margin-top: 0;
+            padding: max(1rem, 2vw);
+            box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.2), 0 0 0 100vmax rgba(0, 0, 0, 0.2);
+            border-radius: 0.5rem;
+        }
+
+        .hover-over:hover .verification-steps {
+            display: flex;
+        }
+
         @media screen and (max-width: 640px) {
             #verification_status {
                 margin-top: 1.5rem;
             }
+
+            .hover-over .verification-steps {
+                position: fixed;
+                width: 100vw;
+            }
         }
 
         @media screen and (min-width: 640px) {
@@ -225,13 +263,13 @@
             <h4>Verifying Certificate</h4>
             <p>Please wait while we verify your certificate</p>
         </div>
-        <div id="verification_steps">
+        <div class="verification-steps">
             <div class="step">
                 <div class="step-icon">
                     <sm-spinner></sm-spinner>
                 </div>
                 <p>
-                    Checking whether certificate <strong>issued by Authorized Blockchain Issuer ID</strong>
+                    Verifying if this certificate was <strong>issued by Authorized Blockchain Issuer ID</strong>
                     FFCpiaZi31TpbYw5q5VNk8qJMeDiTLgsrE
                 </p>
             </div>
@@ -240,7 +278,7 @@
                     <sm-spinner></sm-spinner>
                 </div>
                 <p>
-                    Checking whether certificate was <strong>correctly sent to approved Blockchain ID</strong>
+                    Verifying if this certificate was <strong>correctly sent to approved Blockchain ID</strong>
                     FKNW5eCCp2SnJMJ6pLLpUCvk5hAage8Jtk, or FDaX363r1ooANA9A2erhehhigNTnidq3o4
                 </p>
             </div>
@@ -249,7 +287,7 @@
                     <sm-spinner></sm-spinner>
                 </div>
                 <p>
-                    Checking whether <strong>blockchain data starts with CERTIFICATE OF INTERNSHIP</strong>, and
+                    Verifying if <strong>blockchain data starts with CERTIFICATE OF INTERNSHIP</strong>, and
                     verification link has
                     those words
                 </p>
@@ -308,7 +346,35 @@
                     statusComposition = `
                         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon--big" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg>
                         <h4> Verified </h4>
-                        <p> This is a genuine certificate issued by RanchiMall </p>
+                        <div class="hover-over">
+                            <button class="link">See how verification works.</button>
+                            <div class="verification-steps">
+                                <div class="step">
+                                    <div class="step-icon">
+                                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
+                                    </div>
+                                    <p>
+                                        Verified that this certificate was <strong>issued by Authorized Blockchain Issuer ID</strong> FFCpiaZi31TpbYw5q5VNk8qJMeDiTLgsrE
+                                    </p>
+                                </div>
+                                <div class="step">
+                                    <div class="step-icon">
+                                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
+                                    </div>
+                                    <p>
+                                        Verified that this certificate was <strong>correctly sent to approved Blockchain ID</strong> FKNW5eCCp2SnJMJ6pLLpUCvk5hAage8Jtk, or FDaX363r1ooANA9A2erhehhigNTnidq3o4
+                                    </p>
+                                </div>
+                                <div class="step">
+                                    <div class="step-icon">
+                                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
+                                    </div>
+                                    <p>
+                                        Verified that <strong>blockchain data starts with CERTIFICATE OF INTERNSHIP</strong>, and verification link has those words
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
                         <a href="${link}" target="_blank" class="transaction-link">View on blockchain</a>
                         `
                     document.getElementById('main').className = 'success'
@@ -326,7 +392,7 @@
             document.getElementById('main').classList.remove('hidden')
         }
 
-        function wait(ms = 1000) {
+        function wait(ms = 500) {
             return new Promise(resolve => setTimeout(resolve, ms));
         }
         function processStatus(iVerify, oVerify, cVerify) {