Skip to content

Instantly share code, notes, and snippets.

@jywarren

jywarren/index.html

Last active April 27, 2020 17:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jywarren/f4ff501cf73f972caf74e42f2f8bf2d0 to your computer and use it in GitHub Desktop.
Save jywarren/f4ff501cf73f972caf74e42f2f8bf2d0 to your computer and use it in GitHub Desktop.
Download ZIP
Certification mark generator/saver
Raw
index.html
<!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