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
This commit is contained in:
parent
9f1fece816
commit
598f3b2a18
@ -1,6 +1,8 @@
|
|||||||
use leptos::*;
|
use leptos::*;
|
||||||
use leptos_meta::*;
|
use leptos_meta::*;
|
||||||
use leptos_router::*;
|
use leptos_router::*;
|
||||||
|
use crate::pages::login::*;
|
||||||
|
use crate::pages::signup::*;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn App() -> impl IntoView {
|
pub fn App() -> impl IntoView {
|
||||||
@ -21,6 +23,8 @@ pub fn App() -> impl IntoView {
|
|||||||
<Routes>
|
<Routes>
|
||||||
<Route path="" view=HomePage/>
|
<Route path="" view=HomePage/>
|
||||||
<Route path="/*any" view=NotFound/>
|
<Route path="/*any" view=NotFound/>
|
||||||
|
<Route path="/login" view=Login />
|
||||||
|
<Route path="/signup" view=Signup />
|
||||||
</Routes>
|
</Routes>
|
||||||
</main>
|
</main>
|
||||||
</Router>
|
</Router>
|
||||||
|
|||||||
@ -4,6 +4,7 @@ pub mod playstatus;
|
|||||||
pub mod playbar;
|
pub mod playbar;
|
||||||
pub mod database;
|
pub mod database;
|
||||||
pub mod models;
|
pub mod models;
|
||||||
|
pub mod pages;
|
||||||
use cfg_if::cfg_if;
|
use cfg_if::cfg_if;
|
||||||
|
|
||||||
cfg_if! {
|
cfg_if! {
|
||||||
|
|||||||
2
src/pages.rs
Normal file
2
src/pages.rs
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
pub mod login;
|
||||||
|
pub mod signup;
|
||||||
48
src/pages/login.rs
Normal file
48
src/pages/login.rs
Normal file
@ -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! {
|
||||||
|
<div class="page-container">
|
||||||
|
<div class="login-container">
|
||||||
|
<div class="header">
|
||||||
|
<h1>LibreTunes</h1>
|
||||||
|
</div>
|
||||||
|
<form class="login-form" action="POST">
|
||||||
|
<div class="input-box">
|
||||||
|
<input class="login-info" type="text" required
|
||||||
|
on:input = move |ev| {
|
||||||
|
set_username(event_target_value(&ev));
|
||||||
|
log!("username changed to: {}", username.get());
|
||||||
|
}
|
||||||
|
prop:value=username
|
||||||
|
/>
|
||||||
|
<span>Username/Email</span>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
<div class="input-box">
|
||||||
|
<input class="login-password" type="text" required
|
||||||
|
on:input = move |ev| {
|
||||||
|
set_password(event_target_value(&ev));
|
||||||
|
log!("password changed to: {}", password.get());
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<span>Password</span>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
<p class="forgot-pw">Forgot Password?</p>
|
||||||
|
<input type="submit" value="Login" />
|
||||||
|
<p class="go-to-signup">
|
||||||
|
New here? <span>Create an Account</span>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
14
src/pages/signup.rs
Normal file
14
src/pages/signup.rs
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
use leptos::leptos_dom::*;
|
||||||
|
use leptos::*;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn Signup() -> impl IntoView {
|
||||||
|
view!{
|
||||||
|
<div class="page-container">
|
||||||
|
<div class="signup-container">
|
||||||
|
<h1>"Signup"</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
136
style/login.scss
Normal file
136
style/login.scss
Normal file
@ -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);
|
||||||
|
}
|
||||||
@ -1,5 +1,7 @@
|
|||||||
@import 'playbar.scss';
|
@import 'playbar.scss';
|
||||||
@import 'theme.scss';
|
@import 'theme.scss';
|
||||||
|
@import 'login.scss';
|
||||||
|
@import 'signup.scss';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
|
|||||||
1
style/signup.scss
Normal file
1
style/signup.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import 'theme.scss';
|
||||||
@ -6,3 +6,4 @@ $controls-click-color: #909090;
|
|||||||
$play-bar-background-color: #212121;
|
$play-bar-background-color: #212121;
|
||||||
$play-grad-start: #0a0533;
|
$play-grad-start: #0a0533;
|
||||||
$play-grad-end: $accent-color;
|
$play-grad-end: $accent-color;
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user