Skip to content

Commit

Permalink
Merge pull request #276 from vplan-fr/main
Browse files Browse the repository at this point in the history 
Landing Page Progress + fixes
  • Loading branch information
@OfficialFreak
OfficialFreak authored Mar 10, 2024
2 parents 7fd5b2e + 19bc4fe commit ed1cf33
Show file tree
Hide file tree
Showing 8 changed files with 516 additions and 339 deletions.
Binary file added client/public/base_static/images/landing_page/chaos_bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/public/base_static/images/landing_page/favorite_burst.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/public/base_static/images/landing_page/favorite_showcase.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
430 changes: 241 additions & 189 deletions client/src/App.svelte
View file

Large diffs are not rendered by default.

289 changes: 148 additions & 141 deletions client/src/components/Authentication.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,13 @@
$: title.set(register_visible ? "Registrieren" : "Login");
</script>
<svelte:head>
<style>
#page-container {
overflow-x: unset !important;
}
</style>
</svelte:head>
<main transition:fade>
{#if !register_visible}
<form on:submit|preventDefault={login} transition:fly|local={{x:-500}}>
Expand Down Expand Up @@ -121,166 +128,166 @@
{/if}
</main>
<style lang="scss">
.extra-info {
font-size: var(--font-size-base);
margin: 10px 0px;
}
.no-account-info {
font-size: var(--font-size-base);
}
.extra-info {
font-size: var(--font-size-base);
margin: 10px 0px;
}
label {
margin-bottom: 8px;
font-size: var(--font-size-base);
}
.no-account-info {
font-size: var(--font-size-base);
}
main::before {
content: "";
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background-image: url('/public/base_static/images/blurry_gradient_bg.svg');
background-color: #906df5;
background-repeat: no-repeat;
background-size: cover;
background-position-x: 50%;
filter: brightness(1);
z-index: -1;
}
label {
margin-bottom: 8px;
font-size: var(--font-size-base);
}
#forgot_password {
margin-left: auto;
}
main::before {
content: "";
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background-image: url('/public/base_static/images/blurry_gradient_bg.svg');
background-color: #906df5;
background-repeat: no-repeat;
background-size: cover;
background-position-x: 50%;
filter: brightness(1);
z-index: -1;
}
form {
position: absolute;
top: 50%;
left: calc(50% + (100vw - 100%) / 2);
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.3);
min-width: min(400px, 75vw);
#forgot_password {
margin-left: auto;
}
&::before {
content: "";
background-image: url('/public/base_static/images/logo.svg');
background-size: contain;
width: 90px;
aspect-ratio: 1;
position: absolute;
top: -50px;
left: 50%;
transform: translate(-50%, -50%);
}
}
form {
position: absolute;
top: 50%;
left: calc(50% + (100vw - 100%) / 2);
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.3);
min-width: min(400px, 75vw);
.input_icon {
position: relative;
.textfield {
padding-left: 40px;
}
img {
position: absolute;
top: 14px;
left: 12px;
width: 20px;
height: 20px;
background-size: contain;
z-index: 1;
}
&::before {
content: "";
background-image: url('/public/base_static/images/logo.svg');
background-size: contain;
width: 90px;
aspect-ratio: 1;
position: absolute;
top: -50px;
left: 50%;
transform: translate(-50%, -50%);
}
}
.password_field {
.textfield {
padding-right: 40px;
}
.input_icon {
position: relative;
button {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 48px;
z-index: 1;
border: none;
background: transparent;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 5.5px;
.textfield {
padding-left: 40px;
}
.material-symbols-outlined {
color: black !important;
font-size: 25px;
display: flex;
align-items: center;
justify-content: center;
}
}
img {
position: absolute;
top: 14px;
left: 12px;
width: 20px;
height: 20px;
background-size: contain;
z-index: 1;
}
}
.password_field {
.textfield {
width: 100%;
padding: 12px 20px;
margin-bottom: 8px;
box-sizing: border-box;
border: 2px solid white;
border-radius: 5px;
font-size: var(--font-size-sm);
padding-right: 40px;
}
.default-button {
width: 100%;
text-align: center;
padding: 12px 20px;
margin-bottom: 8px;
margin-top: 8px;
border: 0;
border-radius: 99vw;
background: white;
color: black;
font-size: var(--font-size-base);
font-weight: 500;
transition: all .2s ease;
button {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 48px;
z-index: 1;
border: none;
background: transparent;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 5.5px;
&:disabled {
color: #595959;
background: #b9b9b9;
}
.material-symbols-outlined {
color: black !important;
font-size: 25px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.link-button {
display: inline-block;
text-align: left;
padding: 0;
margin: 0;
color: #0f0fff;
background: transparent;
border: 0;
font-size: var(--font-size-base);
}
.textfield {
width: 100%;
padding: 12px 20px;
margin-bottom: 8px;
box-sizing: border-box;
border: 2px solid white;
border-radius: 5px;
font-size: var(--font-size-sm);
}
#back_button {
position: absolute;
top: 5px;
left: 5px;
padding: 0;
border: 0;
background: none;
color: white;
font-size: var(--font-size-md);
}
.default-button {
width: 100%;
text-align: center;
padding: 12px 20px;
margin-bottom: 8px;
margin-top: 8px;
border: 0;
border-radius: 99vw;
background: white;
color: black;
font-size: var(--font-size-base);
font-weight: 500;
transition: all .2s ease;
span, h1, label {
color: white !important;
&:disabled {
color: #595959;
background: #b9b9b9;
}
}
.link-button {
display: inline-block;
text-align: left;
padding: 0;
margin: 0;
color: #0f0fff;
background: transparent;
border: 0;
font-size: var(--font-size-base);
}
#back_button {
position: absolute;
top: 5px;
left: 5px;
padding: 0;
border: 0;
background: none;
color: white;
font-size: var(--font-size-md);
}
span, h1, label {
color: white !important;
}
</style>
Loading

0 comments on commit ed1cf33

Please sign in to comment.