Added about page, added dark mode, touched up styling

src/main.rs

@@ -15,7 +15,7 @@ use database::{clean_loop, Database, Mmid, MochiFile};
 use endpoints::{file_info, lookup_mmid, lookup_mmid_name, lookup_mmid_noredir, server_info};
 use log::info;
 use maud::{html, Markup, PreEscaped};
-use pages::{api_info, footer, head};
+use pages::{about, api_info, footer, head};
 use rocket::{
     data::{Limits, ToByteUnit}, form::Form, fs::TempFile, get, http::ContentType, post, response::content::{RawCss, RawJavaScript}, routes, serde::{json::Json, Serialize}, tokio, Config, FromForm, State
 };
@@ -236,6 +236,12 @@ async fn main() {
             routes![
                 home,
                 api_info,
+                about,
+            ],
+        )
+        .mount(
+            config.server.root_path.clone() + "/",
+            routes![
                 handle_upload,
                 form_handler_js,
                 stylesheet,

src/pages.rs

@@ -18,10 +18,10 @@ pub fn footer() -> Markup {
     html! {
         footer {
             p {a href="/" {"Home"}}
-            p {a href="https://github.com/Dangoware/confetti-box" {"Source"}}
-            p {a href="https://g2games.dev/" {"My Website"}}
+            p {a href="about" {"About"}}
             p {a href="api" {"API"}}
-            p {a href="https://ko-fi.com/g2_games" {"Donate"}}
+            p {a href="https://github.com/Dangoware/confetti-box" {"Source"}}
+            p {a href="https://github.com/Dangoware/" {"Dangoware"}}
         }
     }
 }
@@ -128,3 +128,47 @@ pub fn api_info(settings: &State<Settings>) -> Markup {
         }
     }
 }
+
+#[get("/about")]
+pub fn about(settings: &State<Settings>) -> Markup {
+    html! {
+        (head("Confetti-Box | About"))
+
+        center {
+            h1 { "What's this?" }
+            hr;
+
+            div style="text-align: left;" {
+                p {
+                    "Confetti-Box is a temporary file host, inspired by "
+                    a target="_blank" href="//litterbox.catbox.moe" {"Litterbox"}
+                    " and " a target="_blank" href="//uguu.se" {"Uguu"} ".
+                    It is designed to be simple to use and host! Files are stored
+                    until they expire, at which point they are deleted to free up
+                    space on the server."
+                }
+
+                p {
+                    "Confetti-Box was created by and is maintained by "
+                    a target="_blank" href="#dangowaresite" {"Dangoware"} " and is open-source
+                    software available under the terms of the "
+                    a target="_blank" href="//www.gnu.org/licenses/agpl-3.0.txt" {"AGPL-3.0 license"}
+                    ". The source code is available on "
+                    a target="_blank" href="https://github.com/Dangoware/confetti-box" {"GitHub"}
+                    " and a couple of other places. The AGPL is very restrictive
+                    when it comes to use on servers, so if you would like to use
+                    Confetti-Box for a commercial purpose, please contact
+                    Dangoware."
+                }
+
+                p {
+                    "If you upload files which are disallowed either legally or
+                    by the terms of this particular service, they will be removed."
+                }
+            }
+
+            hr;
+            (footer())
+        }
+    }
+}

web/main.css

@@ -1,5 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Chokokutai&family=Fira+Code:wght@300..700&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
+
 body {
-    font-family: sans-serif;
+    font-family: "Roboto Flex", sans-serif;
+    font-size: 14pt;
+    font-optical-sizing: auto;
 }
 
 center {
@@ -12,7 +16,7 @@ footer {
     width: fit-content;
 
     p {
-        border-right: 1px dotted grey;
+        border-right: 2px dotted grey;
         padding: 0 10px;
     }
 
@@ -21,6 +25,14 @@ footer {
     }
 }
 
+hr {
+    background-color: gray;
+    width: 100%;
+    height: 2px;
+    display: block;
+    border: none;
+}
+
 h1 {
     font-size: 3em;
     font-weight: bolder;
@@ -77,6 +89,7 @@ button.main_file_upload {
 }
 
 pre {
+    font-family: "Fira Code", monospace;
     color: white;
     background-color: #161b22;
     font-size: 11pt;
@@ -86,12 +99,14 @@ pre {
 }
 
 p code {
+    font-family: "Fira Code", monospace;
     background-color: lightgray;
     font-size: 12pt;
     padding: 2px;
 }
 
 h2 code {
+    font-family: "Fira Code", monospace;
     font-size: 15pt;
 }
 
@@ -124,7 +139,8 @@ h2 code {
 }
 
 #uploadedFilesDisplay p.status {
-    font-family: monospace;
+    font-family: "Fira Code", monospace;
+    font-weight: 500;
     font-size: 11pt;
     overflow: clip;
     text-overflow: ellipsis;
@@ -160,6 +176,38 @@ h2 code {
     background-color: white;
 }
 
+.upload_inprogress {
+
+}
+
+.upload_failed {
+    color: black;
+    background-color: #ffb2ae;
+    a:link {
+        all: revert;
+    }
+    a:visited {
+        all: revert;
+    }
+    a:hover {
+        all: revert;
+    }
+}
+
+.upload_done {
+    color: black;
+    background-color: #a4ffbb;
+    a:link {
+        all: revert;
+    }
+    a:visited {
+        all: revert;
+    }
+    a:hover {
+        all: revert;
+    }
+}
+
 progress {
     --color: #84FFAE;  /* the progress color */
     --background: lightgrey; /* the background color */
@@ -207,14 +255,41 @@ progress:not([value])::-moz-progress-bar {
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
     width: 20%;
-    animation-name: example;
+    animation-name: bounce;
     animation-duration: 1s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-timing-function: cubic-bezier(.17,.67,.83,.67);
 }
 
-@keyframes example {
+@keyframes bounce {
     from {margin-left: 0%}
     to {margin-left: 80%}
 }
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #131316;
+        color: #ededed;
+    }
+
+    a:link {
+        color: #3c9fe5;
+    }
+
+    a:visited {
+        color: #37d6a7;
+    }
+
+    a:hover {
+        color: #79d646;
+    }
+
+    p code {
+        color: black;
+        white-space: pre;
+        background-color: lightgray;
+        font-size: 12pt;
+        padding: 2px;
+    }
+}

web/request.js

@@ -79,6 +79,8 @@ async function sendFile(files, duration, maxSize) {
         request.addEventListener('error',
             (e) => {networkErrorHandler(e, progressBar, progressText, linkRow);}, false);
 
+        linkRow.classList.add("upload_inprogress");
+
         // Create and send FormData
         try {
             const formData = new FormData();
@@ -95,7 +97,7 @@ async function sendFile(files, duration, maxSize) {
 function makeErrored(progressBar, progressText, linkRow, errorMessage) {
     progressText.textContent = errorMessage;
     progressBar.style.display = "none";
-    linkRow.style.background = "#ffb2ae";
+    linkRow.classList.add("upload_failed");
 }
 
 function makeFinished(progressBar, progressText, linkRow, response) {
@@ -123,7 +125,7 @@ function makeFinished(progressBar, progressText, linkRow, response) {
     });
 
     progressBar.style.display = "none";
-    linkRow.style.background = "#a4ffbb";
+    linkRow.classList.add("upload_done");
 }
 
 function networkErrorHandler(err, progressBar, progressText, linkRow) {