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_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 {
|
||||
<Routes>
|
||||
<Route path="" view=HomePage/>
|
||||
<Route path="/*any" view=NotFound/>
|
||||
<Route path="/login" view=Login />
|
||||
<Route path="/signup" view=Signup />
|
||||
</Routes>
|
||||
</main>
|
||||
</Router>
|
||||
|
||||
@ -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! {
|
||||
|
||||
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 'theme.scss';
|
||||
@import 'login.scss';
|
||||
@import 'signup.scss';
|
||||
|
||||
body {
|
||||
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-grad-start: #0a0533;
|
||||
$play-grad-end: $accent-color;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user