From 338d3208944437bf176a01ab9d79181b356ca9e1 Mon Sep 17 00:00:00 2001 From: G2-Games Date: Wed, 30 Oct 2024 01:56:04 -0500 Subject: [PATCH] Added about page, added dark mode, touched up styling --- src/main.rs | 8 ++++- src/pages.rs | 50 +++++++++++++++++++++++++++-- web/main.css | 85 +++++++++++++++++++++++++++++++++++++++++++++++--- web/request.js | 6 ++-- 4 files changed, 138 insertions(+), 11 deletions(-) diff --git a/src/main.rs b/src/main.rs index 4cffe65..581f0ec 100644 --- a/src/main.rs +++ b/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, diff --git a/src/pages.rs b/src/pages.rs index 8732ad6..6d4290e 100644 --- a/src/pages.rs +++ b/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) -> Markup { } } } + +#[get("/about")] +pub fn about(settings: &State) -> 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()) + } + } +} diff --git a/web/main.css b/web/main.css index aac487a..70cd9d2 100644 --- a/web/main.css +++ b/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; + } +} diff --git a/web/request.js b/web/request.js index 6a97ab4..5e2629c 100644 --- a/web/request.js +++ b/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) {