add screenshots

README.md

@@ -49,7 +49,20 @@ Perfect for small to medium infrastructures and developers seeking a straightfor
 - **Check**: Process of verifying service availability and response
 
 ## How to run
+
 It's really simple! Set up the config in `stbmon.toml` as you like, then run it with `cargo r -r`. The database is automatically created.
 
 ## How to use
+
 Open the web UI by going to the address defined in `stbmon.toml` (default is `http://127.0.0.1:13337`). From there, you can view your monitors, and after logging in with the password defined in the config, you can add, delete and edit monitors.
+
+## Screenshots
+
+#### Main page
+![The stb-mon main page](https://github.com/Strawberry-Foundations/stb-mon/raw/master/main-page.png)
+
+#### Main page
+![The stb-mon admin page](https://github.com/Strawberry-Foundations/stb-mon/raw/master/admin.png)
+
+#### Main page
+![The stb-mon monitor info page](https://github.com/Strawberry-Foundations/stb-mon/raw/master/monitor-info.png)

src/templates/admin.rs

@@ -5,7 +5,7 @@ use reqwest::StatusCode;
 use crate::{
     config::CONFIG,
     database,
-    templates::{render_monitor_list, NEWCSS},
+    templates::{render_monitor_list, HTML_HEADER_GLOB},
 };
 
 pub async fn admin_template(cookies: CookieJar) -> (StatusCode, Markup) {
@@ -19,7 +19,7 @@ pub async fn admin_template(cookies: CookieJar) -> (StatusCode, Markup) {
         let render = html!(
             (DOCTYPE)
             head {
-                (NEWCSS)
+                (HTML_HEADER_GLOB)
                 title { "Unauthorized" }
             }
 
@@ -37,7 +37,7 @@ pub async fn admin_template(cookies: CookieJar) -> (StatusCode, Markup) {
         (DOCTYPE);
         html {
             head {
-                (NEWCSS);
+                (HTML_HEADER_GLOB);
                 script src="/admin.js" {};
                 title { (CONFIG.get().unwrap().lock().await.instance_name) }
             }

src/templates/index.rs

@@ -5,7 +5,7 @@ use reqwest::StatusCode;
 use crate::{
     config::CONFIG,
     database,
-    templates::{render_monitor_list, NEWCSS},
+    templates::{render_monitor_list, HTML_HEADER_GLOB},
 };
 
 pub async fn index_template(cookies: CookieJar) -> (StatusCode, Markup) {
@@ -23,7 +23,7 @@ pub async fn index_template(cookies: CookieJar) -> (StatusCode, Markup) {
         (DOCTYPE);
         html {
             head {
-                (NEWCSS)
+                (HTML_HEADER_GLOB)
                 script src="/index.js" {};
                 title { (CONFIG.get().unwrap().lock().await.instance_name) }
             }

src/templates/mod.rs

@@ -15,24 +15,14 @@ pub use index::index_template;
 pub use monitor::monitor_template;
 
 #[rustfmt::skip]
-static NEWCSS: PreEscaped<&'static str> = PreEscaped(concat!(
+static HTML_HEADER_GLOB: PreEscaped<&'static str> = PreEscaped(concat!(
 r#"<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">"#,
 r#"<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">"#,
 "<style>",
-    "body {",
-        "max-width: 65%;",
-    "}",
-
+    "body { max-width: 65%; }",
     "#addform {",
-        "input {",
-            "min-width: 30%;",
-            "display: block;",
-        "}",
-
-        "label {",
-            "margin-down: 3px;",
-            "display: block;",
-        "}",
+        "input { min-width: 30%; display: block; }",
+        "label { margin-down: 3px; display: block; }",
     "}",
 "</style>"
 ));

src/templates/monitor.rs

@@ -5,7 +5,7 @@ use crate::{
         record::{MonitorRecord, RecordResult},
     },
     monitor::Monitor,
-    templates::{result_to_text_color, NEWCSS},
+    templates::{result_to_text_color, HTML_HEADER_GLOB},
     time_util::{self, current_unix_time},
 };
 
@@ -167,7 +167,7 @@ pub async fn monitor_template(monitor_id: Path<u64>, cookies: CookieJar) -> (Sta
             (DOCTYPE)
             html {
                 head {
-                    (NEWCSS)
+                    (HTML_HEADER_GLOB)
                     title { "Not found" }
                 }
 
@@ -184,7 +184,7 @@ pub async fn monitor_template(monitor_id: Path<u64>, cookies: CookieJar) -> (Sta
     let render = html!(
         html {
             head {
-                (NEWCSS)
+                (HTML_HEADER_GLOB)
                 @if can_view { title { "Monitor " (*monitor_id) } }
                 @else { title { "Unauthorized" } }
             }