215 lines
19 KiB
HTML
215 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
<script src="qrcode-svg.min.js"></script>
|
|
<script src="components.js"></script>
|
|
<script src="svg2pdf.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<main id="main">
|
|
<section>
|
|
<svg id="mySVG" width="1400" height="980" viewBox="0 0 1400 980" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g id="certificate">
|
|
<rect width="1400" height="980" fill="white" />
|
|
<g id="Frame" clip-path="url(#clip0_60_2)">
|
|
<rect width="732" height="860" transform="translate(14 59)" fill="url(#paint0_linear_60_2)" />
|
|
<path id="Vector"
|
|
d="M743.049 888.362C723.171 821.713 662.462 771.188 521.434 701.85C481.236 684.237 443.347 661.764 408.612 634.931C394.886 622.047 383.522 606.857 375.034 590.05C369.199 570.225 369.199 549.137 375.034 529.312C384.973 500.288 396.256 487.119 479.529 407.031C519.424 373.332 550.266 330.188 569.249 281.525C575.201 256.661 575.66 230.797 570.592 205.738C551.252 155.75 513.107 112.75 448.1 72.1687C424.193 57.1188 413.448 54.9688 413.179 65.7188C411.346 72.4921 408.637 78.9971 405.12 85.0688L397.061 99.85L374.497 84.2625C363.215 75.6625 347.097 65.9875 341.456 63.0312C330.711 57.6563 321.847 58.1937 322.115 64.375C317.591 76.6979 312.112 88.6487 305.729 100.119C305.729 100.119 301.969 100.119 298.477 96.625C249.318 61.4188 228.903 51.7438 228.903 65.1813C220.264 87.6137 209.088 108.984 195.594 128.875C143.212 216.756 90.0244 260.294 34.6879 260.294C10.7804 260.294 11.049 260.294 18.3018 287.169C24.2116 310.012 27.1664 311.894 47.5818 305.713C64.5284 301.071 80.4676 293.325 94.591 282.869C100.769 278.3 106.679 275.075 107.754 275.881C110.657 281.154 112.655 286.877 113.663 292.812C114.646 299.149 117.34 305.096 121.453 310.012C143.241 306.763 164.054 298.783 182.431 286.631L202.041 274L205.533 288.781C210.637 308.669 214.129 310.819 232.395 306.25C269.457 294.202 301.91 271.024 325.339 239.869L341.456 220.788L339.845 237.988C335.278 281.794 304.923 329.9 248.781 383.65L194.788 435.25C108.559 517.487 114.201 585.481 210.905 650.25C250.863 674.112 292.116 695.735 334.472 715.019C341.994 718.513 361.335 728.994 377.183 738.4C466.098 792.15 510.152 843.75 510.152 897.769C509.698 904.723 510.333 911.705 512.033 918.462C514.45 920.881 512.033 921.15 536.209 914.7C544.078 913.131 551.619 910.222 558.504 906.1C557.981 888.693 552.886 871.73 543.73 856.919C524.192 826.959 499.446 800.744 470.664 779.519C427.222 749.731 381.401 723.573 333.666 701.312C265.704 667.45 239.111 650.25 216.009 627.944C206.542 619.517 198.86 609.277 193.416 597.829C187.971 586.382 184.876 573.959 184.311 561.294C184.311 524.206 203.384 491.956 251.467 447.612C327.757 377.738 356.768 342.531 376.915 295.769C385.729 279.298 389.644 260.646 388.197 242.019C389.892 225.321 386.916 208.479 379.601 193.375L371.005 173.488L378.795 160.588C383.362 153.331 388.734 143.656 391.152 139.088L395.181 131.025L407.001 148.225C422.25 170.692 431.498 196.69 433.863 223.744C433.093 241.638 429.278 259.27 422.581 275.881C422.581 279.106 419.357 283.944 418.551 286.631C413.228 296.882 407.215 306.759 400.554 316.194C368.87 358.283 332.856 396.926 293.104 431.487C245.558 475.294 230.246 500.825 228.903 536.838C227.678 550.677 229.741 564.611 234.923 577.501C240.105 590.392 248.259 601.875 258.72 611.013C284.239 637.888 314.325 657.775 399.748 700.237C497.527 749.15 539.969 778.175 571.936 817.95C590.091 838.664 601.109 864.668 603.365 892.125C603.411 900.506 604.678 908.835 607.125 916.85C611.027 917.202 614.959 916.744 618.676 915.506L640.972 909.594L653.329 906.369L651.717 894.006C646.076 852.888 608.2 806.663 545.879 765.006C501.209 736.085 454.322 710.744 405.657 689.219C370.579 674.215 338.115 653.712 309.49 628.481C293.432 615.102 282.512 596.563 278.593 576.028C274.674 555.492 277.999 534.232 288 515.875C299.014 493.031 310.296 480.669 389.271 404.344C453.473 342.263 481.409 293.35 481.409 243.094C480.709 221.029 475.372 199.358 465.745 179.494C456.118 159.629 442.418 142.016 425.536 127.8C419.357 122.156 413.716 116.244 408.075 110.331C410.317 98.1223 415.896 86.7735 424.193 77.5438C454.779 97.2253 481.313 122.586 502.362 152.256C517.87 173.065 525.658 198.625 524.389 224.55C525.579 253.254 517.374 281.562 501.019 305.175C481.947 337.962 467.172 354.087 386.317 430.681C363.809 450.512 344.985 474.167 330.711 500.556C323.801 513.198 320.721 527.579 321.847 541.944C320.753 555.579 323.449 569.252 329.637 581.45C344.948 613.969 389.54 649.981 454.547 681.694C509.511 705.27 561.901 734.449 610.886 768.769C668.909 811.769 696.846 853.694 696.846 897.769C696.288 904.67 697.11 911.614 699.263 918.194C714.673 917.464 729.804 913.816 743.855 907.444C747.078 903.412 747.078 902.069 743.049 888.362ZM177.864 247.125C165.753 253.792 152.406 257.908 138.645 259.219L121.453 260.831L139.72 238.525C171.394 198.535 198.43 155.078 220.307 108.987C225.161 98.8592 230.541 88.9916 236.424 79.425C239.379 76.2 257.108 88.025 277.524 106.3L294.447 121.887L279.136 144.463C254.999 187.005 220.065 222.419 177.864 247.125ZM331.249 199.287C311.319 220.559 287.988 238.361 262.212 251.962C252.059 255.667 241.513 258.192 230.783 259.488H215.203L232.664 238.525C253.903 212.295 272.78 184.235 289.075 154.675C294.984 143.656 300.357 134.25 300.894 133.444C301.431 132.637 314.325 145 325.07 166.769L336.352 193.375L331.249 199.287ZM374.228 139.625C371.012 145.889 366.944 151.677 362.14 156.825C353.614 149.149 345.542 140.983 337.964 132.369L315.4 108.181L320.504 96.0875C329.637 74.8562 330.98 74.5875 347.366 87.7563C360.91 97.7698 373.418 109.114 384.705 121.619C381.481 127.71 377.989 133.892 374.228 140.162V139.625Z"
|
|
fill="#F3F3F3" />
|
|
</g>
|
|
<text id="main_name" fill="black" xml:space="preserve" style="white-space: pre" font-family="Times New Roman"
|
|
font-size="64" font-weight="bold">
|
|
<tspan x="412.046" y="385.927">SALOMI SARKAR</tspan>
|
|
</text>
|
|
<text id="intern_flo_id" fill="#333333" xml:space="preserve" style="white-space: pre"
|
|
font-family="Times New Roman" font-size="18">
|
|
<tspan x="506.036" y="445.573">F7HVKrF68Y6YKE9XXpHhAcxt6MwRLcUD67</tspan>
|
|
</text>
|
|
<text id="text " fill="#333333" xml:space="preserve" style="white-space: pre" font-family="Times New Roman"
|
|
font-size="18">
|
|
<tspan x="669.433" y="424.573">FLO ID</tspan>
|
|
</text>
|
|
<text id="certify" fill="#333333" xml:space="preserve" style="white-space: pre" font-family="Times New Roman"
|
|
font-size="18">
|
|
<tspan x="490.187" y="310.073">RanchiMall, a blockchain incorporated entity certifies that </tspan>
|
|
</text>
|
|
<text id="issue_date" fill="#373737" xml:space="preserve" style="white-space: pre"
|
|
font-family="Times New Roman" font-size="18">
|
|
<tspan x="647.493" y="253.573">16th Dec 2020</tspan>
|
|
</text>
|
|
<g id="Frame_2" clip-path="url(#clip1_60_2)">
|
|
<rect width="34" height="40" transform="translate(683 122)" fill="url(#paint1_linear_60_2)" />
|
|
<path id="Vector_2"
|
|
d="M716.862 160.575C715.938 157.475 713.118 155.125 706.568 151.9C704.701 151.081 702.941 150.036 701.328 148.788C700.69 148.188 700.162 147.482 699.768 146.7C699.497 145.778 699.497 144.797 699.768 143.875C700.23 142.525 700.754 141.913 704.622 138.188C706.475 136.62 707.907 134.613 708.789 132.35C709.065 131.194 709.087 129.991 708.851 128.825C707.953 126.5 706.181 124.5 703.162 122.613C702.051 121.913 701.552 121.812 701.54 122.312C701.455 122.628 701.329 122.93 701.165 123.213L700.791 123.9L699.743 123.175C699.219 122.775 698.47 122.325 698.208 122.188C697.709 121.938 697.298 121.962 697.31 122.25C697.1 122.823 696.845 123.379 696.549 123.912C696.549 123.913 696.374 123.912 696.212 123.75C693.929 122.113 692.981 121.662 692.981 122.287C692.579 123.331 692.06 124.325 691.433 125.25C689 129.337 686.53 131.362 683.96 131.362C682.849 131.362 682.862 131.362 683.198 132.612C683.473 133.675 683.61 133.763 684.558 133.475C685.346 133.259 686.086 132.899 686.742 132.413C687.029 132.2 687.303 132.05 687.353 132.087C687.488 132.333 687.581 132.599 687.628 132.875C687.673 133.17 687.799 133.446 687.99 133.675C689.002 133.524 689.968 133.153 690.822 132.588L691.733 132L691.895 132.688C692.132 133.613 692.294 133.712 693.143 133.5C694.864 132.94 696.372 131.862 697.46 130.413L698.208 129.525L698.134 130.325C697.921 132.363 696.512 134.6 693.904 137.1L691.396 139.5C687.391 143.325 687.653 146.487 692.145 149.5C694.001 150.61 695.917 151.616 697.884 152.513C698.233 152.675 699.132 153.163 699.868 153.6C703.998 156.1 706.044 158.5 706.044 161.012C706.023 161.336 706.052 161.661 706.131 161.975C706.244 162.087 706.131 162.1 707.254 161.8C707.62 161.727 707.97 161.592 708.29 161.4C708.266 160.59 708.029 159.801 707.604 159.112C706.696 157.719 705.547 156.5 704.21 155.513C702.192 154.127 700.064 152.91 697.847 151.875C694.69 150.3 693.455 149.5 692.382 148.462C691.942 148.071 691.585 147.594 691.332 147.062C691.079 146.529 690.936 145.952 690.909 145.363C690.909 143.638 691.795 142.138 694.029 140.075C697.572 136.825 698.92 135.188 699.855 133.013C700.265 132.246 700.447 131.379 700.379 130.512C700.458 129.736 700.32 128.953 699.98 128.25L699.581 127.325L699.943 126.725C700.155 126.387 700.404 125.938 700.517 125.725L700.704 125.35L701.253 126.15C701.961 127.195 702.391 128.404 702.501 129.663C702.465 130.495 702.288 131.315 701.976 132.087C701.976 132.237 701.827 132.463 701.789 132.588C701.542 133.064 701.263 133.524 700.953 133.962C699.482 135.92 697.809 137.717 695.963 139.325C693.754 141.362 693.043 142.55 692.981 144.225C692.924 144.869 693.019 145.517 693.26 146.116C693.501 146.716 693.88 147.25 694.365 147.675C695.551 148.925 696.948 149.85 700.916 151.825C705.458 154.1 707.429 155.45 708.914 157.3C709.757 158.263 710.269 159.473 710.374 160.75C710.376 161.14 710.435 161.527 710.548 161.9C710.729 161.916 710.912 161.895 711.085 161.838L712.12 161.562L712.694 161.413L712.619 160.838C712.357 158.925 710.598 156.775 707.703 154.838C705.629 153.492 703.451 152.314 701.19 151.312C699.561 150.615 698.053 149.661 696.724 148.488C695.978 147.865 695.471 147.003 695.289 146.048C695.106 145.093 695.261 144.104 695.725 143.25C696.237 142.188 696.761 141.613 700.429 138.062C703.411 135.175 704.709 132.9 704.709 130.562C704.676 129.536 704.429 128.528 703.981 127.604C703.534 126.68 702.898 125.861 702.114 125.2C701.827 124.938 701.565 124.662 701.303 124.388C701.407 123.82 701.666 123.292 702.051 122.863C703.472 123.778 704.704 124.958 705.682 126.338C706.402 127.305 706.764 128.494 706.705 129.7C706.761 131.035 706.379 132.352 705.62 133.45C704.734 134.975 704.048 135.725 700.292 139.288C699.247 140.21 698.372 141.31 697.709 142.538C697.388 143.125 697.245 143.794 697.298 144.462C697.247 145.097 697.372 145.733 697.659 146.3C698.371 147.812 700.442 149.487 703.461 150.962C706.014 152.059 708.448 153.416 710.723 155.013C713.418 157.013 714.716 158.962 714.716 161.012C714.69 161.333 714.728 161.656 714.828 161.962C715.544 161.929 716.246 161.759 716.899 161.463C717.049 161.275 717.049 161.213 716.862 160.575ZM690.61 130.75C690.047 131.06 689.427 131.252 688.788 131.312L687.99 131.388L688.838 130.35C690.309 128.49 691.565 126.469 692.581 124.325C692.807 123.854 693.057 123.395 693.33 122.95C693.467 122.8 694.291 123.35 695.239 124.2L696.025 124.925L695.314 125.975C694.193 127.954 692.57 129.601 690.61 130.75ZM697.734 128.525C696.809 129.514 695.725 130.342 694.528 130.975C694.056 131.147 693.566 131.265 693.068 131.325H692.344L693.155 130.35C694.142 129.13 695.019 127.825 695.775 126.45C696.05 125.938 696.299 125.5 696.324 125.463C696.349 125.425 696.948 126 697.447 127.013L697.971 128.25L697.734 128.525ZM699.731 125.75C699.581 126.041 699.392 126.311 699.169 126.55C698.773 126.193 698.398 125.813 698.046 125.412L696.998 124.288L697.235 123.725C697.659 122.737 697.722 122.725 698.483 123.338C699.112 123.803 699.693 124.331 700.217 124.912C700.067 125.196 699.905 125.483 699.731 125.775V125.75Z"
|
|
fill="black" />
|
|
</g>
|
|
<text id="Scan to verify this certificate" fill="#434343" xml:space="preserve" style="white-space: pre"
|
|
font-family="Times New Roman" font-size="18">
|
|
<tspan x="596.464" y="844.573">Scan to verify this certificate</tspan>
|
|
</text>
|
|
<g id="cert_qr"></g>
|
|
<text id="certificate_type" fill="black" xml:space="preserve" style="white-space: pre"
|
|
font-family="Times New Roman" font-size="36" font-weight="bold" letter-spacing="0.07em">
|
|
<tspan x="506.293" y="217.646">CERTIFICATE TYPE</tspan>
|
|
</text>
|
|
<rect id="Rectangle 69" x="62" y="57" width="1277" height="865" rx="12" stroke="url(#paint2_linear_60_2)"
|
|
stroke-width="8" />
|
|
<text id="cert_data" fill="#333333" xml:space="preserve" style="white-space: pre"
|
|
font-family="Times New Roman" font-size="18">
|
|
</text>
|
|
<g id="Group 12">
|
|
<text id="FLO INCORPORATION ID" fill="#353535" xml:space="preserve" style="white-space: pre"
|
|
font-family="Times New Roman" font-size="12">
|
|
<tspan x="1099.93" y="790.049">FLO INCORPORATION ID</tspan>
|
|
</text>
|
|
<text id="digital_id" fill="#373737" xml:space="preserve" style="white-space: pre"
|
|
font-family="Times New Roman" font-size="16">
|
|
<tspan x="936.531" y="816.732">FKNW5eCCp2SnJMJ6pLLpUCvk5hAage8Jtk</tspan>
|
|
</text>
|
|
</g>
|
|
<g id="Group 16">
|
|
<text id="CERTIFICATE ISSUER" fill="#353535" xml:space="preserve" style="white-space: pre"
|
|
font-family="Times New Roman" font-size="12">
|
|
<tspan x="162" y="793.049">CERTIFICATE ISSUER</tspan>
|
|
</text>
|
|
<text id="digital_id_2" fill="#373737" xml:space="preserve" style="white-space: pre"
|
|
font-family="Times New Roman" font-size="16">
|
|
<tspan x="162" y="819.398">FFCpiaZi31TpbYw5q5VNk8qJMeDiTLgsrE</tspan>
|
|
</text>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<linearGradient id="paint0_linear_60_2" x1="47.7391" y1="1.20232e-05" x2="732.723" y2="939.102"
|
|
gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="white" />
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
|
</linearGradient>
|
|
<linearGradient id="paint1_linear_60_2" x1="2.21739" y1="5.5922e-07" x2="34.0904" y2="43.6377"
|
|
gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="white" />
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
|
</linearGradient>
|
|
<linearGradient id="paint2_linear_60_2" x1="58" y1="62.5" x2="1343" y2="926" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#5B21FF" />
|
|
<stop offset="1" stop-color="#21A2FF" />
|
|
</linearGradient>
|
|
<clipPath id="clip0_60_2">
|
|
<rect width="732" height="860" fill="white" transform="translate(14 59)" />
|
|
</clipPath>
|
|
<clipPath id="clip1_60_2">
|
|
<rect width="34" height="40" fill="white" transform="translate(683 122)" />
|
|
</clipPath>
|
|
<clipPath id="clip2_60_2">
|
|
<rect width="137" height="137" fill="white" transform="translate(632 679)" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
|
|
</section>
|
|
<section id="details">
|
|
<h3>Fill the details</h3>
|
|
<sm-input type="text" id="name_field" data-bind="name" placeholder="Name" animate></sm-input>
|
|
<input type="date" id="issue_date_field" data-bind="issue_date" placeholder="Issue date">
|
|
<sm-input type="text" id="intern_id_field" data-bind="intern_flo_id" placeholder="Intern FLO ID" animate>
|
|
</sm-input>
|
|
<sm-input type="text" id="flo_link" data-bind="intern_flo_id" placeholder="FLO trasansaction link" animate>
|
|
</sm-input>
|
|
<sm-textarea id="cert_text" placeholder="data" rows="4"></sm-textarea>
|
|
<sm-input type="text" id="digital_id_field" data-bind="digital_id" placeholder="Incorporation id"
|
|
value="FKNW5eCCp2SnJMJ6pLLpUCvk5hAage8Jtk" animate></sm-input>
|
|
<button id="download_btn">Download</button>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const { jsPDF } = window.jspdf;
|
|
const { svg2pdf } = window.svg2pdf;
|
|
function convertSvgToPdf(svgElement) {
|
|
const margin = 5
|
|
const sizeArray = new Array(2)
|
|
sizeArray[0] = 1400 + 2 * margin
|
|
sizeArray[1] = 980 + 2 * margin
|
|
// eslint-disable-next-line no-undef,new-cap
|
|
const jsPdf = new jsPDF({
|
|
orientation: sizeArray[0] > sizeArray[1] ? 'l' : 'p',
|
|
unit: 'pt',
|
|
format: sizeArray,
|
|
compress: true,
|
|
floatPrecision: 'smart'
|
|
})
|
|
jsPdf
|
|
.svg(svgElement, {
|
|
x: 0,
|
|
y: 0,
|
|
width: 1400,
|
|
height: 980
|
|
})
|
|
.then(() => {
|
|
// save the created pdf
|
|
jsPdf.save('myPDF.pdf')
|
|
})
|
|
}
|
|
|
|
var svgElement = document.getElementById('mySVG');
|
|
//svgElement.style.fill = '#fff'
|
|
document.getElementById('name_field').addEventListener('input', e => {
|
|
document.getElementById('main_name').firstElementChild.textContent = e.target.value
|
|
alignTextCenter(document.getElementById('main_name').firstElementChild)
|
|
})
|
|
document.getElementById('issue_date_field').addEventListener('input', e => {
|
|
document.getElementById('issue_date').firstElementChild.textContent = e.target.value
|
|
alignTextCenter(document.getElementById('issue_date').firstElementChild)
|
|
})
|
|
document.getElementById('intern_id_field').addEventListener('input', e => {
|
|
document.getElementById('intern_flo_id').firstElementChild.textContent = e.target.value
|
|
alignTextCenter(document.getElementById('intern_flo_id').firstElementChild)
|
|
})
|
|
document.getElementById('cert_text').addEventListener('input', e => {
|
|
document.getElementById('cert_data').innerHTML = ''
|
|
e.target.value.split('\n').forEach((line, index) => {
|
|
let tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
|
|
tspan.textContent = line
|
|
tspan.setAttribute('x', '0')
|
|
if (index === 0) {
|
|
tspan.setAttribute('y', '500')
|
|
}
|
|
tspan.setAttribute('dy', '1.5em')
|
|
document.getElementById('cert_data').appendChild(tspan)
|
|
alignTextCenter(tspan)
|
|
})
|
|
})
|
|
document.getElementById('flo_link').addEventListener('input', e => {
|
|
document.getElementById('cert_qr').innerHTML = ''
|
|
let svgNode = QRCode({
|
|
msg: e.target.value.trim(),
|
|
dim: 156
|
|
});
|
|
console.log(e.target.value.trim())
|
|
svgNode.setAttribute('x', 626);
|
|
svgNode.setAttribute('y', 670);
|
|
document.getElementById('cert_qr').appendChild(svgNode);
|
|
})
|
|
let a = document.getElementById('download_btn')
|
|
a.addEventListener('click', e => {
|
|
var myPDF = convertSvgToPdf(svgElement)
|
|
})
|
|
function alignTextCenter(element) {
|
|
element.setAttribute('x', `${700 - element.getBoundingClientRect().width / 2}`)
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |