added blockchain link

This commit is contained in:
sairaj mote 2022-12-06 22:28:21 +05:30
parent aa2d12bf87
commit bfce38d868
4 changed files with 21 additions and 20 deletions

View File

@ -88,12 +88,9 @@ button {
margin-left: auto;
}
.observe-empty-state:empty {
display: none;
}
.observe-empty-state:empty,
.observe-empty-state:not(:empty) ~ .empty-state {
display: none;
display: none !important;
}
#loader {
@ -183,9 +180,9 @@ button {
padding: 0.4rem 0.8rem;
text-decoration: none;
border-radius: 3rem;
margin-left: auto;
font-weight: 500;
color: var(--accent-color);
font-size: 0.9rem;
gap: 0.3rem;
}
.button--primary {
@ -201,6 +198,10 @@ button {
filter: saturate(0);
}
a.button {
background-color: rgba(189, 20, 46, 0.062745098);
}
.cert-card {
display: grid;
gap: 0.6rem;

2
css/main.min.css vendored
View File

@ -1 +1 @@
*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto slab",serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: rgb(219, 32, 45);--secondary-color: #ffac2e;--text-color: 34, 34, 34;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: rgb(91, 33, 255);--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #92a2ff;--secondary-color: #d60739;--text-color: 200, 200, 200;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}button{padding:1rem;font-size:inherit;background-color:var(--accent-color);border:none;border-radius:.3rem;color:#fff;font-weight:500;cursor:pointer}.capitalize{text-transform:capitalize}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-0-5{gap:.5rem}.align-items-center{align-items:center}.space-between{justify-content:space-between}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.margin-left-auto{margin-left:auto}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1rem}#home>*{width:min(100%,56rem);margin:0 auto}#home header{display:grid;width:100%;background:linear-gradient(#e32e4a, #bd142e);padding-bottom:3rem;margin-bottom:-2rem}#home .rm-logo{margin-top:10vmax;height:2rem;justify-self:center;background-color:rgba(0,0,0,.2);height:4rem;width:4rem;padding:1rem;border-radius:5rem;fill:rgba(var(--foreground-color), 1)}#home h1{padding:1rem;font-size:max(1.8rem,3vw);text-align:center;color:rgba(var(--foreground-color), 1)}@-webkit-keyframes gradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}#cert_sec{padding:1.5rem;font-family:"intern"}#search_certificates{position:-webkit-sticky;position:sticky;top:1rem;width:min(24rem,100% - 2rem);margin:0 auto;--border-radius: 0.5rem;border-radius:.5rem;--padding: 1rem 1.2rem;--background: rgba(var(--foreground-color), 1);box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);border:solid thin rgba(var(--text-color), 0.2)}#issued_cert_list{display:grid;gap:1rem;padding:1rem;padding-bottom:4rem;margin-top:1rem}.button{display:flex;align-items:center;padding:.4rem .8rem;text-decoration:none;border-radius:3rem;margin-left:auto;font-weight:500;color:var(--accent-color);gap:.3rem}.button--primary{background-color:var(--accent-color);color:#fff}.button--primary .icon{fill:#fff}.button:disabled{opacity:.5;cursor:not-allowed;filter:saturate(0)}.cert-card{display:grid;gap:.6rem;padding:max(1rem,1.5vw);background-color:rgba(var(--foreground-color), 1);border-radius:.5rem}.cert-card h4{font-size:1.2rem}.cert-card time{font-size:.9rem;color:rgba(var(--text-color), 0.8)}.cert-card p{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.cert-card .tag{padding:.3rem .5rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.9);background-color:rgba(var(--text-color), 0.06);margin-right:auto}.cert-card .tag::first-letter{text-transform:uppercase}@media(max-width: 768px){.cert-card{margin:0 -1rem;gap:1rem}}.hidden{display:none !important}
*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto slab",serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: rgb(219, 32, 45);--secondary-color: #ffac2e;--text-color: 34, 34, 34;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: rgb(91, 33, 255);--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #92a2ff;--secondary-color: #d60739;--text-color: 200, 200, 200;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}button{padding:1rem;font-size:inherit;background-color:var(--accent-color);border:none;border-radius:.3rem;color:#fff;font-weight:500;cursor:pointer}.capitalize{text-transform:capitalize}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-0-5{gap:.5rem}.align-items-center{align-items:center}.space-between{justify-content:space-between}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.margin-left-auto{margin-left:auto}.observe-empty-state:empty,.observe-empty-state:not(:empty)~.empty-state{display:none !important}#loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1rem}#home>*{width:min(100%,56rem);margin:0 auto}#home header{display:grid;width:100%;background:linear-gradient(#e32e4a, #bd142e);padding-bottom:3rem;margin-bottom:-2rem}#home .rm-logo{margin-top:10vmax;height:2rem;justify-self:center;background-color:rgba(0,0,0,.2);height:4rem;width:4rem;padding:1rem;border-radius:5rem;fill:rgba(var(--foreground-color), 1)}#home h1{padding:1rem;font-size:max(1.8rem,3vw);text-align:center;color:rgba(var(--foreground-color), 1)}@-webkit-keyframes gradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}#cert_sec{padding:1.5rem;font-family:"intern"}#search_certificates{position:-webkit-sticky;position:sticky;top:1rem;width:min(24rem,100% - 2rem);margin:0 auto;--border-radius: 0.5rem;border-radius:.5rem;--padding: 1rem 1.2rem;--background: rgba(var(--foreground-color), 1);box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);border:solid thin rgba(var(--text-color), 0.2)}#issued_cert_list{display:grid;gap:1rem;padding:1rem;padding-bottom:4rem;margin-top:1rem}.button{display:flex;align-items:center;padding:.4rem .8rem;text-decoration:none;border-radius:3rem;font-weight:500;color:var(--accent-color);font-size:.9rem;gap:.3rem}.button--primary{background-color:var(--accent-color);color:#fff}.button--primary .icon{fill:#fff}.button:disabled{opacity:.5;cursor:not-allowed;filter:saturate(0)}a.button{background-color:rgba(189,20,46,.062745098)}.cert-card{display:grid;gap:.6rem;padding:max(1rem,1.5vw);background-color:rgba(var(--foreground-color), 1);border-radius:.5rem}.cert-card h4{font-size:1.2rem}.cert-card time{font-size:.9rem;color:rgba(var(--text-color), 0.8)}.cert-card p{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.cert-card .tag{padding:.3rem .5rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.9);background-color:rgba(var(--text-color), 0.06);margin-right:auto}.cert-card .tag::first-letter{text-transform:uppercase}@media(max-width: 768px){.cert-card{margin:0 -1rem;gap:1rem}}.hidden{display:none !important}

View File

@ -79,13 +79,11 @@ button {
margin-left: auto;
}
.observe-empty-state:empty {
display: none;
.observe-empty-state:empty,
.observe-empty-state:not(:empty) ~ .empty-state {
display: none !important;
}
.observe-empty-state:not(:empty) ~ .empty-state {
display: none;
}
#loader {
display: flex;
flex-direction: column;
@ -161,9 +159,9 @@ button {
padding: 0.4rem 0.8rem;
text-decoration: none;
border-radius: 3rem;
margin-left: auto;
font-weight: 500;
color: var(--accent-color);
font-size: 0.9rem;
gap: 0.3rem;
&--primary {
background-color: var(--accent-color);
@ -178,6 +176,9 @@ button {
filter: saturate(0);
}
}
a.button {
background-color: #bd142e10;
}
.cert-card {
display: grid;
gap: 0.6rem;

View File

@ -33,7 +33,7 @@
<body>
<section id="loader" class="page">
<sm-spinner></sm-spinner>
<p>Getting certificates</p>
<p>Getting certificates from FLO blockchain</p>
</section>
<section id="home" class="page hidden">
<header>
@ -54,8 +54,8 @@
</svg>
</sm-input>
<ul id="issued_cert_list" class="observe-empty-state"></ul>
<div class="empty-state">
<h2>No related certificates issued yet</h2>
<div class="empty-state" style="text-align:center; padding: 3rem 1.5rem">
<p>No related certificates issued yet</p>
</div>
</section>
<script>
@ -275,11 +275,11 @@
</div>
<h4 class="capitalize">${name.toLowerCase()}</h4>
<p class="wrap-around">${floId}</p>
<div class="flex align-items-center gap-0-5 margin-left-auto">
<a href=${verificationLink} target="_blank" class="button">Verify</a>
<div class="flex align-items-center gap-0-5">
<a href=${`https://flosight.duckdns.org/tx/${txid}`} target="_blank" class="button">View on blockchain</a>
<a href=${verificationLink} target="_blank" class="button margin-left-auto">Verify</a>
<button class="download-button button button--primary" data-txid=${txid}>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
Download
</button>
</div>
</li>
@ -374,7 +374,6 @@
function readTx() {
return new Promise((resolve, reject) => {
floBlockchainAPI.readAllTxs('FFCpiaZi31TpbYw5q5VNk8qJMeDiTLgsrE').then(res => {
// res.unshift({ floData: 'CERTIFICATE OF INTERNSHIP|FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd|Sairaj mote|worked as an intern on projects for RanchiMall from 11th September 2020 to 2nd February 2021: Twitter Marketing and Peer-to-Peer Content Collaboration on FLO Blockchain. She contributed mostly to Twitter marketing and also collaborated with other content writers on writing articles for RanchiMall Times. She performed well under the guidance of the RIBC team of RanchiMall.', time: Date.now() })
for (tx of res) {
const { vin, vout, time, floData, txid } = tx
if (!vin.some(i => i.addr === floGlobals.RM_CertificateIssuer_id)) continue;