Get It On Codeberg Badge
https://get-it-on.codeberg.org/
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.
168 lines
6.3 KiB
168 lines
6.3 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/Codeberg/GetItOnCodeberg"><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> |
|
<option value="get-it-on-neon-blue.svg">Neon</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") |
|
var file = badgeType.value |
|
|
|
// Background colour is not working with the neon badge |
|
if (file !== 'get-it-on-neon-blue.svg') |
|
{ |
|
rectSvgElem.style.color = color; |
|
rectSvgElem.style.fill = color; |
|
} else { |
|
// The text of the neon badge consists of multiple layers |
|
var layers = [ |
|
svgDoc.getElementById("claim-svg-8"), |
|
svgDoc.getElementById("claim-svg-8-6"), |
|
svgDoc.getElementById("claim-svg-8-6-9") |
|
]; |
|
|
|
layers.forEach(layer => { |
|
layer.textContent = claim; |
|
}); |
|
} |
|
|
|
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> |