1d1ac155cc
Switching std_op from standalone file script tags to cdn script tags. - To reduce the server bandwidth
264 lines
8.7 KiB
HTML
264 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Ranchimall Certificate Verifier</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<script id="floGlobals">
|
|
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
|
|
const floGlobals = {
|
|
|
|
//Required for all
|
|
blockchain: "FLO",
|
|
|
|
//Required for blockchain API operators
|
|
apiURL: {
|
|
FLO: [ 'https://livenet.flocha.in/', 'https://flosight.duckdns.org/'],
|
|
FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/']
|
|
},
|
|
//adminID: null,
|
|
RMincorporationID: "FKNW5eCCp2SnJMJ6pLLpUCvk5hAage8Jtk",
|
|
RMcertificateProvider: "FFCpiaZi31TpbYw5q5VNk8qJMeDiTLgsrE",
|
|
//sendAmt: 0.001,
|
|
//fee: 0.0005,
|
|
}
|
|
</script>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
:root{
|
|
font-size: clamp(16px, 1.2vmax, 40px);
|
|
}
|
|
body{
|
|
display: grid;
|
|
gap: 2em 0;
|
|
grid-template-columns: 2rem 1fr 2rem;
|
|
padding-bottom: 4rem;
|
|
}
|
|
body > * {
|
|
grid-column: 2;
|
|
}
|
|
#result_box h2{
|
|
text-transform: capitalize;
|
|
}
|
|
#result_box h3{
|
|
text-align: center;
|
|
}
|
|
h4{
|
|
font-weight: 500;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
background: rgba(0,0,0,0.06);
|
|
border-radius: 2rem;
|
|
padding: 0.6rem 1.6rem;
|
|
width: auto;
|
|
align-self: center;
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
#result_box p{
|
|
font-size: 1.1rem;
|
|
text-align: center;
|
|
line-height: 1.7;
|
|
max-width: 70ch;
|
|
opacity: 0.8;
|
|
}
|
|
.hide-completely{
|
|
display: none !important;
|
|
}
|
|
.icon {
|
|
height: 4rem;
|
|
width: 4rem;
|
|
fill: none;
|
|
stroke-width: 4;
|
|
overflow: visible;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
margin-bottom: 1rem;
|
|
align-self: center;
|
|
}
|
|
header{
|
|
border-bottom: solid 0.1rem rgba(0,0,0,0.2);
|
|
grid-column: 1/4;
|
|
padding: 1.5rem 2rem;
|
|
}
|
|
header h3{
|
|
font-weight: 500;
|
|
}
|
|
#result_box{
|
|
display: grid;
|
|
gap: 1em;
|
|
}
|
|
#verified{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#verified .icon{
|
|
stroke: rgb(18, 192, 70);
|
|
}
|
|
#unverified .icon{
|
|
stroke: rgb(255, 48, 48);
|
|
}
|
|
#try-again .icon{
|
|
stroke: rgb(255, 115, 0);
|
|
}
|
|
@media screen and (min-width: 640px){
|
|
body{
|
|
grid-template-columns: 1fr 60vw 1fr;
|
|
}
|
|
header{
|
|
padding: 1.5rem 3rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body onload="onLoadStartUp()">
|
|
<header>
|
|
<h3>Ranchimall Certificate Verifier</h3>
|
|
</header>
|
|
<div id="verified" class="hide-completely">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
|
|
<title>success</title>
|
|
<ellipse cx="32" cy="32" rx="31.5" ry="31.49"/>
|
|
<polyline points="17.04 30.48 27.92 41.36 46.96 22.32"/>
|
|
</svg>
|
|
<h4>
|
|
Verified, This is a genuine certificate issued by RanchiMall.
|
|
</h4>
|
|
</div>
|
|
<div id="unverified" class="hide-completely">
|
|
<svg viewBox="0 0 64 64" class="icon">
|
|
<title>failed</title>
|
|
<path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/>
|
|
<line x1="32" y1="24" x2="32" y2="36"/>
|
|
<line x1="32" y1="46" x2="32" y2="48"/>
|
|
</svg>
|
|
<h4>
|
|
Verification failed!
|
|
</h4>
|
|
</div>
|
|
<div id="try-again" class="hide-completely">
|
|
<svg viewBox="0 0 64 64" class="icon">
|
|
<title>error</title>
|
|
<path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/>
|
|
<line x1="32" y1="24" x2="32" y2="36"/>
|
|
<line x1="32" y1="46" x2="32" y2="48"/>
|
|
</svg>
|
|
<h4>
|
|
Try Again Later!
|
|
</h4>
|
|
</div>
|
|
<div id="result_box"></div>
|
|
|
|
<script src="https://github.com/ranchimall/Standard_Operations/releases/download/latest/floCrypto.js"></script>
|
|
<script src="https://github.com/ranchimall/Standard_Operations/releases/download/latest/floBlockchainAPI.js"></script>
|
|
<script id="onLoadStartUp">
|
|
function onLoadStartUp() {
|
|
console.log("Ranchimall Certificate Verifier")
|
|
floBlockchainAPI.getBalance(floCrypto.generateNewID().floID).then(r => {
|
|
let req = window.location.search.substring(1).split('=')
|
|
let key = req[0],
|
|
value = req[1]
|
|
console.log(key, value)
|
|
switch (key) {
|
|
case "internCertificate":
|
|
verifyCertificate(value, "RIBC certificate", "CERTIFICATE OF INTERNSHIP");
|
|
break;
|
|
case "employeeCertificate":
|
|
verifyCertificate(value, "Employee certificate", "CERTIFICATE OF EMPLOYMENT");
|
|
break;
|
|
case "volunteerCertificate":
|
|
verifyCertificate(value, "Volunteer certificate", "CERTIFICATE OF VOLUNTEERSHIP");
|
|
break;
|
|
case "participationCertificate":
|
|
verifyCertificate(value, "Participation certificate", "CERTIFICATE OF PARTICIPATION");
|
|
break;
|
|
|
|
}
|
|
}).catch(e => {
|
|
console.error(e)
|
|
verified.classList.add('hide-completely')
|
|
unverified.classList.add('hide-completely')
|
|
tryagain.classList.remove('hide-completely')
|
|
})
|
|
}
|
|
|
|
const verified = document.getElementById('verified'),
|
|
unverified = document.getElementById('unverified'),
|
|
tryagain = document.getElementById('try-again');
|
|
|
|
function verifyCertificate(id, certType, verifierContent) {
|
|
floBlockchainAPI.getTx(id).then(tx => {
|
|
let iVerify = false,
|
|
oVerify = false,
|
|
cVerify = false;
|
|
for (let i of tx.vin)
|
|
if (floGlobals.RMcertificateProvider === i.addr) {
|
|
iVerify = true;
|
|
break;
|
|
}
|
|
for (let o of tx.vout)
|
|
if (floGlobals.RMincorporationID === o.scriptPubKey.addresses[0]) {
|
|
oVerify = true;
|
|
break;
|
|
}
|
|
cVerify = tx.floData.startsWith(verifierContent);
|
|
if (iVerify && oVerify && cVerify) {
|
|
console.log(`${certType} (${id}) verified`);
|
|
let link = getBlockchainLink(`tx/${id}`),
|
|
content = tx.floData.substring(verifierContent.length).trim(),
|
|
time = `Issue Date: ${trimDate(tx.time*1000)}`;
|
|
outputUI(certType, verifierContent, content, time, link);
|
|
verified.classList.remove('hide-completely')
|
|
unverified.classList.add('hide-completely')
|
|
tryagain.classList.add('hide-completely')
|
|
} else {
|
|
console.log(`${certType} (${id}) verification failed`);
|
|
verified.classList.add('hide-completely')
|
|
unverified.classList.remove('hide-completely')
|
|
tryagain.classList.add('hide-completely')
|
|
}
|
|
}).catch(error => {
|
|
console.log(`${certType} (${id}) not verified`);
|
|
verified.classList.add('hide-completely')
|
|
unverified.classList.remove('hide-completely')
|
|
tryagain.classList.add('hide-completely')
|
|
})
|
|
}
|
|
|
|
function outputUI(head, type, body, foot, link) {
|
|
let h = document.createElement('h2');
|
|
h.textContent = head;
|
|
let t = document.createElement('h3');
|
|
t.textContent = type;
|
|
let b = document.createElement('p');
|
|
b.textContent = body;
|
|
let f = document.createElement('a');
|
|
f.textContent = foot;
|
|
if (link) {
|
|
f.setAttribute('href', link)
|
|
f.setAttribute('target', '_blank')
|
|
f.setAttribute('title', 'View in blockchain')
|
|
}
|
|
document.getElementById("result_box").append(h, t, b, f);
|
|
}
|
|
|
|
function getBlockchainLink(path) {
|
|
let flosight = floBlockchainAPI.util.serverList[floBlockchainAPI.util.curPos]
|
|
return flosight + path
|
|
}
|
|
|
|
function trimDate(d) {
|
|
d = new Date(d).toString()
|
|
return `${d.substring(4, 10)}, ${d.substring(11, 15)}`
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|