eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

Finished Initial Signup Page Design/Outline

Browse Source
This commit is contained in:
Danny Zou 2024-02-10 01:12:19 -05:00
parent 5a630daebc
commit 2a183eec2c
2 changed files with 173 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/pages/signup.rs
View File

@ -1,5 +1,7 @@
use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::IoIcon::*;
use leptos_icons::*;
#[component]
pub fn Signup() -> impl IntoView {
@ -7,10 +9,51 @@ pub fn Signup() -> impl IntoView {
let (email, set_email) = create_signal("".to_string());
let (password, set_password) = create_signal("".to_string());
view!{
<div class="page-container">
<div class="signup-container">
<a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a>
<div class="header">
<h1>LibreTunes</h1>
</div>
<form class="signup-form" action="POST">
<div class="input-box">
<input class="signup-email" type="text" required
on:input = move |ev| {
set_email(event_target_value(&ev));
log!("email changed to: {}", email.get());
}
prop:value=email
/>
<span>Email</span>
<i></i>
</div>
<div class="input-box">
<input class="signup-username" type="text" required
on:input = move |ev| {
set_username(event_target_value(&ev));
log!("username changed to: {}", username.get());
}
/>
<span>Username</span>
<i></i>
</div>
<div class="input-box">
<input class="signup-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>
<input type="submit" value="Sign Up" />
<span class="go-to-login">
Already Have an Account? <a href="/login">Go to Login</a>
</span>
</form>
</div>
</div>
}

128
style/signup.scss
View File

@ -1 +1,129 @@
@import 'theme.scss';
.signup-container {
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 50%;
left: 50%;
width: 27rem;
height: 35rem;
transform: translate(-50%, -50%);
background: purple;
z-index: 1;
border-radius: 8px;
overflow: hidden;
}
.signup-container .header h1 {
margin-top: 3rem;
font-size: 2.5rem;
color: #2c1308;
}
.signup-container .signup-form {
width: 80%;
}
.signup-form .input-box {
position: relative;
margin-top: 3rem;
}
.signup-form .input-box:first-child {
margin-top: 1rem;
}
.signup-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;
}
.signup-form .input-box span {
position: absolute;
left: 0;
padding: 15px 0px 10px;
pointer-events: none;
color: #907163;
font-size: 1.19em;
letter-spacing: 0.5px;
transition: 0.5s;
}
.signup-form .input-box input:valid ~ span,
.signup-form .input-box input:focus ~ span {
color: #2c1308;
font-size: 1rem;
transform: translateY(-30px);
font-weight: 400;
}
.signup-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;
}
.signup-form .input-box input:valid ~ i,
.signup-form .input-box input:focus ~ i {
height: 2.6rem;
}
.signup-form input[type="submit"] {
margin-top: 3.5rem;
width: 100%;
height: 45px;
border: none;
border-radius: 8px;
color: rgb(210, 207, 207);
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
background-color: #582b17;
}
.signup-form .go-to-login {
color: #8f8f8f;
font-size: 0.9rem;
}
.signup-form .go-to-login span {
cursor: pointer;
color: #8f8f8f;
text-decoration: underline;
}
.signup-form .go-to-login span:hover {
color: #fff;
transition: all 0.2s;
}
.signup-container .return {
position: absolute;
left: 10px;
top: 10px;
font-size: 1.8rem;
color: white;
cursor: pointer;
transition: all 0.3s;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: .3rem;
}
.signup-container .return:hover {
background-color: rgba(0, 0, 0, 0.4);
}