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
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 © 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>
|