You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

153 lines
5.4 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<title>GetItOnCodeberg Badge-Generator</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#logo {
float:left;
}
.form-container {
display: grid;
max-width: 99em;
grid-template-columns: auto;
gap: 0.5em;
font-size: 1.3em;
clear: both;
padding-top: 1.3em;
}
input, select, button {
font-size: 1em
}
.fullrow {
grid-column: 1 / -1;
}
.update-btn {
grid-column-start: 1;
}
@media (min-width: 30em) {
.form-container{
grid-template-columns: 1fr 4fr;
}
.update-btn {
grid-column-start: 2;
}
}
</style>
</head>
<body>
<a id="logo" href="https://codeberg.org/get-it-on"><img src="codeberg.png" width="100px"></a><h1>GetItOnCodeberg Badge-Generator</h1>
<div class="form-container">
<label for="claim">Claim: </label><input type="text" name="claim" id="claim" value="GET IT ON"/>
<label for="badge-type">Type: </label><select id="badge-type">
<option value="get-it-on-blue-on-white.svg" selected>Blue on White</option>
<option value="get-it-on-white-on-black.svg">White on Black</option>
<option value="get-it-on-legacy.svg">Legacy</option>
</select>
<label for="background-color">Background: </label><input type="color" id="background-color" value="#ffffff"/>
<label for="png-width">PNG Width: </label><input type="number" id="png-width" value="564" min="100" max="5000"/>
<button class="update-btn" id="button">Update Badge</button>
</div>
<h2>SVG: <a id="svglink">download</a></h2>
<object id="svg-object" data="get-it-on-blue-on-white.svg" type="image/svg+xml" onload="updateBadge();"></object>
<h2>PNG: <a href="javascript:downloadPng();">download</a></h2>
<canvas id="canvas" width="564" height="168"></canvas>
<h2>Original Artwork from</h2>
<p><a href="https://codeberg.org/Codeberg/Design/wiki/Branding#user-content-logo">https://codeberg.org/Codeberg/Design/wiki/Branding#user-content-logo</a></br>
© COPYRIGHT</br>
</br>
Logo material is licensed under CC-BY <a href="http://creativecommons.org/licenses/by/4.0/">http://creativecommons.org/licenses/by/4.0/</a></br>
Codeberg and the Codeberg Logo are trademarks of Codeberg e.V</br>
</p>
<script type="text/javascript">
var btn = document.querySelector('button');
var canvas = document.querySelector('canvas');
var svgObject = document.getElementById('svg-object');
var claimElem = document.getElementById("claim");
var backgroundColor = document.getElementById("background-color");
var badgeType = document.getElementById("badge-type");
var scale = 1;
var svg;
function updateBadge() {
var svgDoc = svgObject.contentDocument;
svg = svgDoc.getElementById('svg-badge');
var claim = claimElem.value;
console.log(claim);
var claimSvgElem = svgDoc.getElementById("claim-svg")
claimSvgElem.textContent = claim;
var color = backgroundColor.value;
var rectSvgElem = svgDoc.getElementById("rect")
rectSvgElem.style.color = color;
rectSvgElem.style.fill = color;
var pngWidth = document.getElementById("png-width").value;
svgObject.width = pngWidth;
scale = pngWidth / 564;
canvas.width = 564 * scale;
canvas.height = 168* scale;
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
};
img.src = url;
var svgUrl = URL.createObjectURL(svgBlob);
//set url value to a element's href attribute.
document.getElementById("svglink").href = svgUrl;
}
btn.addEventListener('click', function () {
updateBadge();
});
badgeType.addEventListener('change', function() {
var file = badgeType.value;
if (file === 'get-it-on-blue-on-white.svg') {
backgroundColor.value = '#ffffff';
} else {
backgroundColor.value = '#000000';
}
document.getElementById('svg-object').data = file;
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
})
function downloadPng() {
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
}
function downloadSvg() {
var svgDoc = svgObject.contentDocument;
var svgBadge = svgDoc.getElementById('svg-badge');
document.write(svgBadge);
}
</script>
</body>