diff options
| author |  Christian Hesse <mail@eworm.de> | 2023-03-06 16:54:41 +0100 |
|---|---|---|
| committer | Christian Hesse <mail@eworm.de> | 2023-03-06 21:07:58 +0100 |
| commit | 1e6e0646e256c4acb9f8470853d0699286af010e (patch) | |
| tree | aea49bc6a7a751db22dcb65dd6ca9cb9ee8abd94 | |
| parent | 4ca8f83a526c71ffa541be8f065e0fec6b768461 (diff) | |
add the notification generator
| -rw-r--r-- | contrib/notification.d/style.css | 39 | ||||
| -rw-r--r-- | contrib/notification.html | 33 |
2 files changed, 72 insertions, 0 deletions
diff --git a/contrib/notification.d/style.css b/contrib/notification.d/style.css new file mode 100644 index 0000000..c07de89 --- /dev/null +++ b/contrib/notification.d/style.css @@ -0,0 +1,39 @@ +body { + font-family: fira-sans, sans; + 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, mono; + white-space: pre-wrap; +} +span.link { + color: #863600; +} +tt { + background-color: #e6e6e6; +} diff --git a/contrib/notification.html b/contrib/notification.html new file mode 100644 index 0000000..56cb612 --- /dev/null +++ b/contrib/notification.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<title>RouterOS-Scripts Notification Generator</title> +<link rel="stylesheet" type="text/css" href="notification.d/style.css"> +</head> +<body> + +<h1>RouterOS-Scripts Notification Generator</h1> + +<div class="notification"> + <img src="../logo.svg" 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>ℹ️ Open the inspector, select the <tt>div</tt> element, right click and select "<i>Screenshot Node</i>"!</p> + +</body> +</html> |