9 files changed, 134 insertions, 0 deletions
diff --git a/contrib/logo-color.d/browser-01.avif b/contrib/logo-color.d/browser-01.avif
new file mode 100644
index 0000000..3dc0a1f
--- /dev/null
+++ b/contrib/logo-color.d/browser-01.avif
diff --git a/contrib/logo-color.d/browser-02.avif b/contrib/logo-color.d/browser-02.avif
new file mode 100644
index 0000000..1867fbe
--- /dev/null
+++ b/contrib/logo-color.d/browser-02.avif
diff --git a/contrib/logo-color.d/browser-03.avif b/contrib/logo-color.d/browser-03.avif
new file mode 100644
index 0000000..dc24bbb
--- /dev/null
+++ b/contrib/logo-color.d/browser-03.avif
diff --git a/contrib/logo-color.d/script.js b/contrib/logo-color.d/script.js
new file mode 100644
index 0000000..82cc204
--- /dev/null
+++ b/contrib/logo-color.d/script.js
@@ -0,0 +1,12 @@
+function invertHex(hex) {
+  return (Number("0x1" + hex) ^ 0xffffff).toString(16).substr(1);
+}
+
+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);
+  var background = document.getElementById("color3").value;
+  svg.getElementById("background").setAttribute("fill", background);
+  svg.getElementById("hexagon").setAttribute("stroke", "#" + invertHex(background.substring(1)));
+}
diff --git a/contrib/logo-color.d/style.css b/contrib/logo-color.d/style.css
new file mode 100644
index 0000000..eb2ec6a
--- /dev/null
+++ b/contrib/logo-color.d/style.css
@@ -0,0 +1,5 @@
+body {
+  font-family: fira-sans, sans-serif;
+  font-size: 10pt;
+  background-color: transparent;
+}
diff --git a/contrib/logo-color.html b/contrib/logo-color.html
new file mode 100644
index 0000000..17942ce
--- /dev/null
+++ b/contrib/logo-color.html
@@ -0,0 +1,40 @@
+<!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="192" height="192" 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();">
+<input id="color3" type="color" value="#ffffff" onchange="color();"></p>
+
+<p>Then right-click, click "<i>Take Screenshot</i>" and finally select the
+logo and download it.</p>
+
+<p><img src="logo-color.d/browser-01.avif" width=533 height=482 alt="Screenshot Browser 01">
+<img src="logo-color.d/browser-02.avif" width=533 height=482 alt="Screenshot Browser 02">
+<img src="logo-color.d/browser-03.avif" width=533 height=482 alt="Screenshot Browser 03"></p>
+
+<p>(This example is with
+<a href="https://www.mozilla.org/de/firefox/new/">Firefox</a>. The workflow
+for other browsers may differ.)</p>
+
+<p>See how to
+<a href="../../about/doc/mod/notification-telegram.md#set-a-profile-photo">Set
+a profile photo</a> for your Telegram bot.</p>
+
+</body>
+</html>
diff --git a/contrib/notification.d/script.js b/contrib/notification.d/script.js
new file mode 100644
index 0000000..91741fd
--- /dev/null
+++ b/contrib/notification.d/script.js
@@ -0,0 +1,6 @@
+function visible(cb, element) {
+  document.getElementById(element).style.display = cb.checked ? "block" : "none";
+}
+function update(cb, element) {
+  document.getElementById(element).innerHTML = cb.value;
+}
diff --git a/contrib/notification.d/style.css b/contrib/notification.d/style.css
new file mode 100644
index 0000000..648ea23
--- /dev/null
+++ b/contrib/notification.d/style.css
@@ -0,0 +1,36 @@
+body {
+  font-family: fira-sans, sans-serif;
+  font-size: 10pt;
+  background-color: transparent;
+}
+div.notification {
+  position: relative;
+  float: right;
+  width: 600px;
+  border: 3px outset #6c5d53;
+  /* border-radius: 5px; */
+  padding: 10px;
+  background-color: #e6e6e6;
+}
+div.content {
+  padding-left: 60px;
+}
+img.logo {
+  float: left;
+  border-radius: 50%;
+}
+p.heading {
+  margin: 0px;
+  font-weight: bold;
+  text-decoration: underline;
+}
+p.hint {
+  display: none;
+}
+pre {
+  font-family: fira-mono, monospace;
+  white-space: pre-wrap;
+}
+span.link {
+  color: #863600;
+}
diff --git a/contrib/notification.html b/contrib/notification.html
new file mode 100644
index 0000000..7875036
--- /dev/null
+++ b/contrib/notification.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>RouterOS-Scripts Notification Generator</title>
+<link rel="stylesheet" type="text/css" href="notification.d/style.css">
+<script src="notification.d/script.js"></script> 
+</head>
+<body>
+
+<h1>RouterOS-Scripts Notification Generator</h1>
+
+<div class="notification">
+  <img src="../logo.svg" alt="logo" class="logo" width=48 height=48>
+  <div class="content">
+  <p id="heading" class="heading">[<span id="hostname">MikroTik</span>] <span id="subject">ℹ️  Subject</span></p>
+  <pre id="message">Message</pre>
+  <p id="link" class="hint">🔗 <span id="link-text" class="link">https://eworm.de/</span></p>
+  <p id="queued" class="hint">⏰ This message was queued since <span id="queued-since">oct/18/2022 18:30:48</span> and may be obsolete.</p>
+  <p id="cut" class="hint">✂️ The message was too long and has been truncated, cut off <span id="cut-percent">13</span>%!</p>
+  </div>
+</div>
+
+<p>Hostname: <input type="text" value="MikroTik" onchange="update(this, 'hostname')"></p>
+<p>Subject: <input type="text" size=50 value="ℹ️  Subject" onchange="update(this, 'subject')"></p>
+<p>Message: <textarea id="w3review" name="w3review" rows="4" cols="50" onchange="update(this, 'message')">Message</textarea></p>
+<p><input type="checkbox" onclick="visible(this, 'link')"> Show link: <input type="text" value="https://eworm.de/" onchange="update(this, 'link-text')"></p>
+<p><input type="checkbox" onclick="visible(this, 'queued')"> Queued since <input type="text" value="oct/18/2022 18:30:48" onchange="update(this, 'queued-since')"></p>
+<p><input type="checkbox" onclick="visible(this, 'cut')"> Cut-off with <input type="number" min=1 max=99 value=13 onchange="update(this, 'cut-percent')"> percent</p>
+
+<p>Then right-click, click "<i>Take Screenshot</i>" and finally select the
+notification and download it.</p>
+
+</body>
+</html>