From 0f930b18f4132aa475cc3d6c5f3998411210f20c Mon Sep 17 00:00:00 2001 From: zoe Date: Sat, 29 Jan 2022 16:04:01 +0100 Subject: [PATCH] add login page --- src/main.rs | 14 +++----- static/index.html | 22 ++++++++---- static/style.css | 88 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 107 insertions(+), 17 deletions(-) diff --git a/src/main.rs b/src/main.rs index a836ce6..b6186ef 100644 --- a/src/main.rs +++ b/src/main.rs @@ -28,17 +28,11 @@ fn rocket() -> _ { config.port = ARGS.port; rocket::custom(config) .attach(Template::fairing()) - .mount("/static", FileServer::from(relative!("static"))) + .mount("/", FileServer::from(relative!("static"))) .mount("/", routes![join]) } -/** - * Tries to join a room for the according id, fails if someone with the same id has already joined - **/ -#[get("/join//")] -async fn join(room_id: &str, name: &str) -> String { - format!( - "Hey, {}! You're joining '{}', please give us a second!", - name, room_id - ) +#[get("/?")] +fn join (roomname: &str) -> String { + format!("You're joining {}", roomname) } diff --git a/static/index.html b/static/index.html index 70e3c02..8916942 100644 --- a/static/index.html +++ b/static/index.html @@ -2,12 +2,7 @@ - + Reversi Online -
+
+
+ + +
+
+ diff --git a/static/style.css b/static/style.css index 8b13789..c3a1550 100644 --- a/static/style.css +++ b/static/style.css @@ -1 +1,89 @@ +@import url("https://fonts.googleapis.com/css2?family=Sen&display=swap"); +:root { + --background: #28282e; + --text: #fff7e4; + --accent2: #f98284; + --accent1: #accce4; +} + +body, +html { + color: var(--text); + background-color: var(--background); + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + text-align: center; + justify-content: center; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +::selection { + color: var(--background); + background-color: var(--accent2); +} + +footer { + font-family: "Sen", sans-serif; + background-color: var(--text); + color: var(--background); + position: sticky; + overflow: visible; + left: 0; + display: flex; + height: 10%; + bottom: 0; + width: 100%; + font-size: 1.6em; + justify-content: center; + align-items: center; + font-size: 3em; +} + +.contentdiv { + display: flex; + align-items: center; + align-self: center; + height: 90%; + justify-content: center; +} + +button, +.contentdiv * { + line-height: 1.84em; + border-radius: 0.48em; + font-size: 1.84em; + margin: 0.5em; + text-align: center; + font-family: "Sen", sans-serif; +} + +button, +input { + outline: none; + padding: 2%; + background-color: var(--background); + color: var(--text); + border: 0.12em solid var(--text); +} + +input { + cursor: text; +} + +button { + cursor: pointer; +} + +button:hover, +button:focus, +input:hover, +input:focus { + border-color: var(--accent1); + color: var(--accent1); +}