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

170 lines
7.5 KiB
HTML

<!DOCTYPE html>
<html class="codeberg-design" 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">
<link rel="stylesheet" href="https://design.codeberg.org/design-kit/codeberg.css">
<style>
.footer .license a {
color: var(--lm-navbar-link-text-color);
}
</style>
</head>
<body>
<div class="page-wrapper with-navbar with-navbar-fixed-bottom with-transitions">
<nav class="navbar">
<a class="navbar-brand" href="https://codeberg.org/Codeberg/GetItOnCodeberg">
<img src="https://design.codeberg.org/logo-kit/icon_inverted.svg">
GetItOnCodeberg Badge-Generator
</a>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<div class="content d-flex flex-column flex-lg-row">
<form class="container-sm float-left card ml-0">
<div class="px-card pb-10 border-bottom">
<h2 class="card-title font-size-18 m-0">
Badge settings
</h2>
</div>
<div class="form-group pt-10">
<label for="claim">Claim</label>
<input class="form-control" type="text" name="claim" id="claim" value="GET IT ON"/>
</div>
<div class="form-group">
<label for="badge-type">Type</label>
<select id="badge-type" class="form-control">
<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-neon-blue.svg">Neon (unofficial)</option>
</select>
</div>
<div class="form-group">
<label for="background-color">Background</label>
<input type="color" id="background-color" value="#ffffff" class="form-control"/>
</div>
<div class="form-group">
<label for="png-width">PNG Width</label>
<input type="number" id="png-width" value="564" min="100" max="5000" class="form-control"/>
</div>
<button class="btn btn-primary btn-lg update-btn">Update Badge</button>
</form>
<div class="container-sm float-right card ml-0 mr-lg-0">
<div class="px-card pb-10 border-bottom">
<h2 class="card-title font-size-18 m-0">
Badge
</h2>
</div>
<div class="d-flex flex-column align-items-center py-15">
<object id="svg-object" type="image/svg+xml" class="mw-full"></object>
<div class="mt-20">
<a class="btn btn-primary btn-lg svglink mb-lg-0 mb-10">Download SVG</a>
<a class="btn btn-primary btn-lg pnglink">Download PNG</a>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-fixed-bottom footer h-lg-50 h-100 flex-column flex-lg-row">
<a class="nav-link" href="https://codeberg.org/Codeberg/GetItOnCodeberg">Source Code</a>
<a class="nav-link" href="https://codeberg.org/Codeberg/Design">Codeberg &copy; COPYRIGHT</a>
<span class="d-lg-flex d-block navbar-text license ml-lg-auto">Logo material is licensed under <a class="p-lg-5" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>
Codeberg and the Codeberg Logo are trademarks of Codeberg e.V</span>
</nav>
</div>
<script type="text/javascript">
const updateButton = document.querySelector('.update-btn');
const svgObject = document.querySelector('#svg-object');
const claimElem = document.querySelector("#claim");
const backgroundColorElem = document.querySelector("#background-color");
const badgeTypeElem = document.querySelector("#badge-type");
const updateBageType = () => {
const file = badgeTypeElem.value;
if (file === 'get-it-on-blue-on-white.svg') {
backgroundColorElem.value = '#ffffff';
} else {
backgroundColorElem.value = '#000000';
}
svgObject.data = file;
};
badgeTypeElem.addEventListener('change', updateBageType);
function updateBadge() {
const svgDoc = svgObject.contentDocument;
const claim = claimElem.value;
const claimSvgElem = svgDoc.querySelector("#claim-svg")
claimSvgElem.textContent = claim;
const color = backgroundColorElem.value;
const rectSvgElem = svgDoc.getElementById("rect")
const file = badgeTypeElem.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
[svgDoc.getElementById("claim-svg-8"), svgDoc.getElementById("claim-svg-8-6"), svgDoc.getElementById("claim-svg-8-6-9")].forEach((layer) => {
layer.textContent = claim;
});
}
svgObject.width = document.querySelector('#png-width').value;
const svgData = (new XMLSerializer()).serializeToString(svgDoc.querySelector('#svg-badge'));
const svgBlob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
// Set url value to a element's href attribute.
document.querySelector(".svglink").href = URL.createObjectURL(svgBlob);
}
updateButton.addEventListener('click', () => {
updateBadge();
});
svgObject.addEventListener('load', () => updateBadge());
updateBageType();
function downloadURI(uri, name) {
const link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function downloadPNG() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const loader = new Image();
const svgBadge = svgObject.contentDocument.querySelector('#svg-badge');
loader.width = canvas.width = svgBadge.width.baseVal.value;
loader.height = canvas.height = svgBadge.height.baseVal.value;
loader.onload = () => {
ctx.drawImage(loader, 0, 0, loader.width, loader.height);
downloadURI(canvas.toDataURL());
};
const svgData = (new XMLSerializer).serializeToString(svgBadge);
loader.src = 'data:image/svg+xml,' + encodeURIComponent(svgData);
}
document.querySelector('.pnglink').addEventListener('click', () => {
downloadPNG();
});
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
});
</script>
</body>