UI changes
This commit is contained in:
sairaj mote
parent
81871a93ae
commit
f0bec0881d
80
index.html
80
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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user