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;
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#verification_steps {
|
.verification-steps {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -185,10 +185,48 @@
|
|||||||
margin-top: 1.5rem;
|
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) {
|
@media screen and (max-width: 640px) {
|
||||||
#verification_status {
|
#verification_status {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hover-over .verification-steps {
|
||||||
|
position: fixed;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 640px) {
|
@media screen and (min-width: 640px) {
|
||||||
@ -225,13 +263,13 @@
|
|||||||
<h4>Verifying Certificate</h4>
|
<h4>Verifying Certificate</h4>
|
||||||
<p>Please wait while we verify your certificate</p>
|
<p>Please wait while we verify your certificate</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="verification_steps">
|
<div class="verification-steps">
|
||||||
<div class="step">
|
<div class="step">
|
||||||
<div class="step-icon">
|
<div class="step-icon">
|
||||||
<sm-spinner></sm-spinner>
|
<sm-spinner></sm-spinner>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<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
|
FFCpiaZi31TpbYw5q5VNk8qJMeDiTLgsrE
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -240,7 +278,7 @@
|
|||||||
<sm-spinner></sm-spinner>
|
<sm-spinner></sm-spinner>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<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
|
FKNW5eCCp2SnJMJ6pLLpUCvk5hAage8Jtk, or FDaX363r1ooANA9A2erhehhigNTnidq3o4
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -249,7 +287,7 @@
|
|||||||
<sm-spinner></sm-spinner>
|
<sm-spinner></sm-spinner>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<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
|
verification link has
|
||||||
those words
|
those words
|
||||||
</p>
|
</p>
|
||||||
@ -308,7 +346,35 @@
|
|||||||
statusComposition = `
|
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>
|
<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>
|
<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>
|
<a href="${link}" target="_blank" class="transaction-link">View on blockchain</a>
|
||||||
`
|
`
|
||||||
document.getElementById('main').className = 'success'
|
document.getElementById('main').className = 'success'
|
||||||
@ -326,7 +392,7 @@
|
|||||||
document.getElementById('main').classList.remove('hidden')
|
document.getElementById('main').classList.remove('hidden')
|
||||||
}
|
}
|
||||||
|
|
||||||
function wait(ms = 1000) {
|
function wait(ms = 500) {
|
||||||
return new Promise(resolve => setTimeout(resolve, ms));
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
}
|
}
|
||||||
function processStatus(iVerify, oVerify, cVerify) {
|
function processStatus(iVerify, oVerify, cVerify) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user