add a logo color changer

eworm-de · eworm-de · commit 5ae3cb336fa8 · 2023-05-25T10:38:57.000+02:00
Generate a colored logo for your notifications!
diff --git a/contrib/logo-color.d/script.js b/contrib/logo-color.d/script.js
@@ -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);
+}
diff --git a/contrib/logo-color.d/style.css b/contrib/logo-color.d/style.css
@@ -0,0 +1,5 @@
+body {
+  font-family: fira-sans, sans;
+  font-size: 10pt;
+  background-color: transparent;
+}
diff --git a/contrib/logo-color.html b/contrib/logo-color.html
@@ -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>
