Last active
April 27, 2020 17:06
-
-
Save jywarren/f4ff501cf73f972caf74e42f2f8bf2d0 to your computer and use it in GitHub Desktop.
Certification mark generator/saver
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Cert generator</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> | |
| </head> | |
| <body class="container"> | |
| <!-- | |
| https://yoksel.github.io/url-encoder/ | |
| auto-redirect to SVG isn't working... | |
| --> | |
| <h3>Certification mark generator</h3> | |
| <p>Enter your certification code:</p> | |
| <form id="form" class="form-inline"> | |
| <input id="code" class="form-control mb-2" type="text"/> | |
| <button class="btn btn-primary mb-2" type="submit" id="go">Go</button> | |
| </form> | |
| <p> | |
| <a id="svg-container"> | |
| <img id="svg" style="border:2px solid #ccc;" src="data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='200' width='200' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E%3Cg transform='translate(-614.09 -142.78)'%3E%3Cg fill='%23333'%3E%3Cpath style='color:%23000000;text-indent:0;block-progression:tb;text-decoration-line:none;text-transform:none' d='m713.09 278.5v3 62.062 3h3 141.56 3v-3-65.062h-5.8712l-0.12879 62.062h-135.56v-56.062h115.34v-6h-118.34z' transform='translate(-72.786 -85.361)'/%3E%3Cpath d='m747.71 313.26c-0.00002-5.1406-0.53127-8.8125-1.5938-11.016-1.0469-2.2031-2.7735-3.3047-5.1797-3.3047-2.3906 0.00003-4.1172 1.1016-5.1797 3.3047-1.0469 2.2032-1.5703 5.875-1.5703 11.016-0.00001 5.125 0.52343 8.7891 1.5703 10.992 1.0625 2.2031 2.789 3.3047 5.1797 3.3047 2.4062 0 4.1328-1.0938 5.1797-3.2812 1.0625-2.2031 1.5937-5.875 1.5938-11.016m4.9453 0c-0.00003 6.0938-0.96878 10.641-2.9062 13.641-1.9219 3-4.8594 4.5-8.8125 4.5s-6.8906-1.4922-8.8125-4.4766-2.8828-7.539-2.8828-13.664c0-6.1094 0.96093-10.664 2.8828-13.664 1.9375-3 4.875-4.5 8.8125-4.5 3.9531 0.00004 6.8906 1.5 8.8125 4.5 1.9375 3 2.9062 7.5547 2.9062 13.664' transform='translate(-72.786 -85.361)'/%3E%3Cpath d='m779.1 296.93v4.8047c-1.4375-0.92184-2.8828-1.6172-4.3359-2.0859-1.4375-0.46871-2.8906-0.70309-4.3594-0.70312-2.2344 0.00003-4 0.52347-5.2969 1.5703-1.2969 1.0313-1.9453 2.4297-1.9453 4.1953-0.00001 1.5469 0.42187 2.7266 1.2656 3.5391 0.85936 0.81252 2.4531 1.4922 4.7812 2.0391l2.4844 0.5625c3.2812 0.76564 5.6718 1.9688 7.1719 3.6094 1.5 1.6406 2.25 3.875 2.25 6.7031-0.00003 3.3281-1.0313 5.8672-3.0938 7.6172s-5.0625 2.625-9 2.625c-1.6406 0-3.2891-0.17969-4.9453-0.53907-1.6562-0.34375-3.3203-0.86718-4.9922-1.5703v-5.0391c1.7969 1.1406 3.4922 1.9766 5.0859 2.5078 1.6094 0.53126 3.2266 0.79688 4.8516 0.79688 2.3906 0 4.25-0.53125 5.5781-1.5938 1.3281-1.0781 1.9922-2.5781 1.9922-4.5-0.00002-1.75-0.46096-3.0859-1.3828-4.0078-0.90627-0.92186-2.4922-1.6328-4.7578-2.1328l-2.5312-0.58594c-3.25-0.73435-5.6094-1.8437-7.0781-3.3281-1.4688-1.4844-2.2031-3.4765-2.2031-5.9766 0-3.125 1.0469-5.625 3.1406-7.5 2.1094-1.8906 4.9062-2.8359 8.3906-2.8359 1.3437 0.00004 2.7578 0.15629 4.2422 0.46875 1.4844 0.29691 3.0468 0.75003 4.6875 1.3594' transform='translate(-72.786 -85.361)'/%3E%3Cpath d='m787.46 295.73h4.7578v14.344h12.961v-14.344h4.7578v34.992h-4.7578v-16.664h-12.961v16.664h-4.7578v-34.992' transform='translate(-72.786 -85.361)'/%3E%3C/g%3E%3Cpath d='m813.13 295.73h4.6172l3.3516 28.406 3.9844-18.797h4.9453l4.0312 18.844 11.352-54.453h4.6172l-13.227 60.992h-4.4766l-4.7578-20.789-4.7344 20.789h-4.4766l-5.2266-34.992' transform='translate(-72.786 -85.361)' fill='%23f44'/%3E%3Ctext xml:space='preserve' fill='%23333333' font-size='33.75px' y='300.14502' x='642.95532' font-family='DejaVu Sans Mono,Andale Mono,monospace'%3EUS00001%3C/text%3E%3C/g%3E%3C/svg%3E" /> | |
| </a> | |
| </p> | |
| <p> | |
| <button id="save" class="btn btn-success" href="">Save image</button> | |
| </p> | |
| <script> | |
| (function() { | |
| var code = document.getElementById('code'); | |
| var go = document.getElementById('go'); | |
| var svg = document.getElementById('svg'); | |
| var save = document.getElementById('save'); | |
| form.onclick = function(e) { | |
| e.preventDefault(); | |
| insertCode(code.value); | |
| } | |
| save.onclick = function(e) { | |
| window.location = svg.src; | |
| } | |
| function insertCode(c) { | |
| var dataurl = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='200' width='200' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E%3Cg transform='translate(-614.09 -142.78)'%3E%3Cg fill='%23333'%3E%3Cpath style='color:%23000000;text-indent:0;block-progression:tb;text-decoration-line:none;text-transform:none' d='m713.09 278.5v3 62.062 3h3 141.56 3v-3-65.062h-5.8712l-0.12879 62.062h-135.56v-56.062h115.34v-6h-118.34z' transform='translate(-72.786 -85.361)'/%3E%3Cpath d='m747.71 313.26c-0.00002-5.1406-0.53127-8.8125-1.5938-11.016-1.0469-2.2031-2.7735-3.3047-5.1797-3.3047-2.3906 0.00003-4.1172 1.1016-5.1797 3.3047-1.0469 2.2032-1.5703 5.875-1.5703 11.016-0.00001 5.125 0.52343 8.7891 1.5703 10.992 1.0625 2.2031 2.789 3.3047 5.1797 3.3047 2.4062 0 4.1328-1.0938 5.1797-3.2812 1.0625-2.2031 1.5937-5.875 1.5938-11.016m4.9453 0c-0.00003 6.0938-0.96878 10.641-2.9062 13.641-1.9219 3-4.8594 4.5-8.8125 4.5s-6.8906-1.4922-8.8125-4.4766-2.8828-7.539-2.8828-13.664c0-6.1094 0.96093-10.664 2.8828-13.664 1.9375-3 4.875-4.5 8.8125-4.5 3.9531 0.00004 6.8906 1.5 8.8125 4.5 1.9375 3 2.9062 7.5547 2.9062 13.664' transform='translate(-72.786 -85.361)'/%3E%3Cpath d='m779.1 296.93v4.8047c-1.4375-0.92184-2.8828-1.6172-4.3359-2.0859-1.4375-0.46871-2.8906-0.70309-4.3594-0.70312-2.2344 0.00003-4 0.52347-5.2969 1.5703-1.2969 1.0313-1.9453 2.4297-1.9453 4.1953-0.00001 1.5469 0.42187 2.7266 1.2656 3.5391 0.85936 0.81252 2.4531 1.4922 4.7812 2.0391l2.4844 0.5625c3.2812 0.76564 5.6718 1.9688 7.1719 3.6094 1.5 1.6406 2.25 3.875 2.25 6.7031-0.00003 3.3281-1.0313 5.8672-3.0938 7.6172s-5.0625 2.625-9 2.625c-1.6406 0-3.2891-0.17969-4.9453-0.53907-1.6562-0.34375-3.3203-0.86718-4.9922-1.5703v-5.0391c1.7969 1.1406 3.4922 1.9766 5.0859 2.5078 1.6094 0.53126 3.2266 0.79688 4.8516 0.79688 2.3906 0 4.25-0.53125 5.5781-1.5938 1.3281-1.0781 1.9922-2.5781 1.9922-4.5-0.00002-1.75-0.46096-3.0859-1.3828-4.0078-0.90627-0.92186-2.4922-1.6328-4.7578-2.1328l-2.5312-0.58594c-3.25-0.73435-5.6094-1.8437-7.0781-3.3281-1.4688-1.4844-2.2031-3.4765-2.2031-5.9766 0-3.125 1.0469-5.625 3.1406-7.5 2.1094-1.8906 4.9062-2.8359 8.3906-2.8359 1.3437 0.00004 2.7578 0.15629 4.2422 0.46875 1.4844 0.29691 3.0468 0.75003 4.6875 1.3594' transform='translate(-72.786 -85.361)'/%3E%3Cpath d='m787.46 295.73h4.7578v14.344h12.961v-14.344h4.7578v34.992h-4.7578v-16.664h-12.961v16.664h-4.7578v-34.992' transform='translate(-72.786 -85.361)'/%3E%3C/g%3E%3Cpath d='m813.13 295.73h4.6172l3.3516 28.406 3.9844-18.797h4.9453l4.0312 18.844 11.352-54.453h4.6172l-13.227 60.992h-4.4766l-4.7578-20.789-4.7344 20.789h-4.4766l-5.2266-34.992' transform='translate(-72.786 -85.361)' fill='%23f44'/%3E%3Ctext xml:space='preserve' fill='%23333333' font-size='33.75px' y='300.14502' x='642.95532' font-family='DejaVu Sans Mono,Andale Mono,monospace'%3E"; | |
| dataurl += c; | |
| dataurl += "%3C/text%3E%3C/g%3E%3C/svg%3E"; | |
| svg.src = dataurl; | |
| document.getElementById('svg-container').href = dataurl; | |
| } | |
| // see if one is specified in the URL | |
| var params = getUrlHashParameters(); | |
| if (params['code']) { | |
| insertCode(params['code']); | |
| window.location = params['code']; | |
| } | |
| function getUrlHashParameters() { | |
| var sPageURL = window.location.hash; | |
| if (sPageURL) sPageURL = sPageURL.split('#')[1]; | |
| var pairs = sPageURL.split('&'); | |
| var object = {}; | |
| pairs.forEach(function(pair, i) { | |
| pair = pair.split('='); | |
| if (pair[0] != '') object[pair[0]] = pair[1]; | |
| }); | |
| return object; | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment