From 598f3b2a1806793324a205ea11be43ea42f9ae1f Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Fri, 9 Feb 2024 17:15:00 -0500 Subject: [PATCH] Finished Initial Design of Login Page modified: src/app.rs modified: src/lib.rs new file: src/pages.rs new file: src/pages/login.rs new file: src/pages/signup.rs new file: style/login.scss modified: style/main.scss new file: style/signup.scss modified: style/theme.scss --- src/app.rs | 4 ++ src/lib.rs | 1 + src/pages.rs | 2 + src/pages/login.rs | 48 ++++++++++++++++ src/pages/signup.rs | 14 +++++ style/login.scss | 136 ++++++++++++++++++++++++++++++++++++++++++++ style/main.scss | 2 + style/signup.scss | 1 + style/theme.scss | 1 + 9 files changed, 209 insertions(+) create mode 100644 src/pages.rs create mode 100644 src/pages/login.rs create mode 100644 src/pages/signup.rs create mode 100644 style/login.scss create mode 100644 style/signup.scss diff --git a/src/app.rs b/src/app.rs index ae1aa39..5955bb5 100644 --- a/src/app.rs +++ b/src/app.rs @@ -1,6 +1,8 @@ use leptos::*; use leptos_meta::*; use leptos_router::*; +use crate::pages::login::*; +use crate::pages::signup::*; #[component] pub fn App() -> impl IntoView { @@ -21,6 +23,8 @@ pub fn App() -> impl IntoView { + + diff --git a/src/lib.rs b/src/lib.rs index 28db59f..552bdcf 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -4,6 +4,7 @@ pub mod playstatus; pub mod playbar; pub mod database; pub mod models; +pub mod pages; use cfg_if::cfg_if; cfg_if! { diff --git a/src/pages.rs b/src/pages.rs new file mode 100644 index 0000000..40f63fd --- /dev/null +++ b/src/pages.rs @@ -0,0 +1,2 @@ +pub mod login; +pub mod signup; \ No newline at end of file diff --git a/src/pages/login.rs b/src/pages/login.rs new file mode 100644 index 0000000..1f5662e --- /dev/null +++ b/src/pages/login.rs @@ -0,0 +1,48 @@ +use leptos::ev; +use leptos::leptos_dom::*; +use leptos::*; +use leptos_router::*; + +#[component] +pub fn Login() -> impl IntoView { + let (username, set_username) = create_signal("".to_string()); + let (password, set_password) = create_signal("".to_string()); + + view! { +
+ +
+ } +} diff --git a/src/pages/signup.rs b/src/pages/signup.rs new file mode 100644 index 0000000..3f04544 --- /dev/null +++ b/src/pages/signup.rs @@ -0,0 +1,14 @@ +use leptos::leptos_dom::*; +use leptos::*; + +#[component] +pub fn Signup() -> impl IntoView { + view!{ +
+ +
+ } +} \ No newline at end of file diff --git a/style/login.scss b/style/login.scss new file mode 100644 index 0000000..e01be7c --- /dev/null +++ b/style/login.scss @@ -0,0 +1,136 @@ +@import 'theme.scss'; + +.login-container { + display: flex; + flex-direction: column; + align-items: center; + position: fixed; + top: 50%; + left: 50%; + width: 27rem; + height: 30rem; + transform: translate(-50%, -50%); + background: purple; + z-index: 1; + border-radius: 8px; + overflow: hidden; + } + +.login-container .header h1 { + margin-top: 3rem; + font-size: 2.5rem; + color: #2c1308; +} +.login-container .login-form { + width: 75%; +} +.login-form .input-box:first-child { + margin-top: .5rem; +} +.login-form .input-box { + position: relative; + margin-top: 3rem; +} +.login-form .input-box input { + position: relative; + width: 100%; + max-width: 34vw; + padding: 17px 0px 10px; + background: transparent; + outline: none; + border: none; + box-shadow: none; + color: #23242a; + font-size: 1.1em; + font-family: "Roboto", sans-serif; + font-weight: 400; + letter-spacing: 0px; + text-indent: 10px; + vertical-align: middle; + z-index: 10; + color: #fff; +} +.login-form .input-box span { + position: absolute; + left: 0; + padding: 15px 0px 10px; + pointer-events: none; + color: #907163; + font-size: 1.2em; + letter-spacing: 0.5px; + transition: 0.5s; +} +.login-form .input-box input:valid ~ span, +.login-form .input-box input:focus ~ span { + color: #2c1308; + font-size: 1rem; + transform: translateY(-30px); + font-weight: 400; +} +.login-form .input-box i { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background: #907163; + border-radius: 4px; + overflow: hidden; + transition: 0.5s; + pointer-events: none; +} + +.login-form .input-box input:valid ~ i, +.login-form .input-box input:focus ~ i { + height: 2.6rem; +} +.login-form .forgot-pw { + display: inline-flex; + margin-top: 3px; + cursor: pointer; + color: #8f8f8f; + text-decoration: underline; +} +.login-form .forgot-pw:hover { + color: #fff; + transition: all 0.2s; +} +.login-form input[type="submit"] { + margin-top: 2.8rem; + width: 100%; + height: 3rem; + border: none; + border-radius: 8px; + color: rgb(210, 207, 207); + cursor: pointer; + font-size: 1.1rem; + font-weight: 600; + background-color: #582b17; +} +.login-form .go-to-signup { + margin-top: 11px; + color: #8f8f8f; +} +.login-form .go-to-signup span { + cursor: pointer; + color: #8f8f8f; + text-decoration: underline; +} +.login-form .go-to-signup span:hover { + color: #fff; + transition: all 0.2s; +} +.login-container .return { + position: absolute; + left: 15px; + top: 15px; + font-size: 1.8rem; + color: white; + cursor: pointer; + width: 50px; + transition: all 0.3s; + border-radius: 8px; +} +.login-container .return:hover { + background-color: rgba(0, 0, 0, 0.4); +} diff --git a/style/main.scss b/style/main.scss index e49fe50..60b68fd 100644 --- a/style/main.scss +++ b/style/main.scss @@ -1,5 +1,7 @@ @import 'playbar.scss'; @import 'theme.scss'; +@import 'login.scss'; +@import 'signup.scss'; body { font-family: sans-serif; diff --git a/style/signup.scss b/style/signup.scss new file mode 100644 index 0000000..6221d7b --- /dev/null +++ b/style/signup.scss @@ -0,0 +1 @@ +@import 'theme.scss'; \ No newline at end of file diff --git a/style/theme.scss b/style/theme.scss index 9ac5872..f795d06 100644 --- a/style/theme.scss +++ b/style/theme.scss @@ -6,3 +6,4 @@ $controls-click-color: #909090; $play-bar-background-color: #212121; $play-grad-start: #0a0533; $play-grad-end: $accent-color; +