add a logo color changer

Generate a colored logo for your notifications!
This commit is contained in:
Christian Hesse 2023-05-23 11:47:06 +02:00
parent c2e7567c13
commit 5ae3cb336f
3 changed files with 37 additions and 0 deletions

View file

@ -0,0 +1,5 @@
function color() {
var svg = document.querySelector(".logo").getSVGDocument();
svg.getElementById("dark-1").setAttribute("stop-color", document.getElementById("color1").value);
svg.getElementById("dark-2").setAttribute("stop-color", document.getElementById("color2").value);
}

View file

@ -0,0 +1,5 @@
body {
font-family: fira-sans, sans;
font-size: 10pt;
background-color: transparent;
}

27
contrib/logo-color.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RouterOS-Scripts Logo Color Changer</title>
<link rel="stylesheet" type="text/css" href="logo-color.d/style.css">
<script src="logo-color.d/script.js"></script>
</head>
<body>
<h1>RouterOS-Scripts Logo Color Changer</h1>
<p>You want the logo for your own notifications? But you joined the
<a href="https://t.me/routeros_scripts">Telegram Group</a> and want
something that differentiates? Color it!</p>
<embed class="logo" src="../logo.svg" width="128" height="128" type="image/svg+xml">
<p>Select the colors here:
<input id="color1" type="color" value="#222222" onchange="color();">
<input id="color2" type="color" value="#444444" onchange="color();"></p>
<p>Then right-click, click "<i>Take Screenshot</i>" and finally select the
logo and download it.</p>
</body>
</html>