adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

added lightmode for login component

Browse Source
This commit is contained in:
selina.mail
2023-11-22 18:40:13 +01:00
parent f6dbf3332c
commit af1db8afba
4 changed files with 211 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
components/LoginForm.vue
View File

@ -1,37 +1,37 @@
<template>
<form class="login-form">
<form :class="['login-form', darkMode ? 'form-darkmode' : 'form-lightmode']">
<div class="title-field">
<span class="title-icon" id="logo-icon">
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
</span>
<pre class="title">Login</pre>
<pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
</div>
<div class="login-field">
<div class="form-field" id="username-field">
<label for="username-input" id="username-label">
<span class="icon" id="username-icon">
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
<img loading="lazy" src="../icons/Mail-Icon.svg" />
</span>
<div class="label">Username:</div>
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
</label>
<div class="input-field">
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
<input type="text" id="username-input" placeholder="user@example.com">
</div>
</div>
<div class="form-field" id="password-field">
<label for="password-input" id="password-label">
<span class="icon" id="password-icon">
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
<img loading="lazy" src="../icons/Lock-Icon.svg" />
</span>
<div class="label">Password:</div>
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
</label>
<div class="input-field">
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
<input type="text" id="password-input" placeholder="*******">
<input type="button" id="show-password-toggle" value="Show">
</div>
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
</div>
</div>
</div>
<input type="button" id="login-button" value="Login">
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login">
</form>
</template>
@ -40,7 +40,12 @@
<script>
export default {
name: "LoginForm",
name: "LoginForm",
data() {
return {
darkMode: true,
};
},
}
</script>
@ -48,166 +53,209 @@ export default {
<style scoped>
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 31.25rem;
height: 31.25rem;
border-radius: 0.625rem;
padding: 2.5rem 1.875rem;
gap: 1.875rem;
border: 0.0625rem solid #000;
background-color: #2c2c2c;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 31.25rem;
height: 31.25rem;
border-radius: 0.625rem;
padding: 2.5rem 1.875rem;
gap: 1.875rem;
}
.form-darkmode {
border: 0.0625rem solid #000;
background-color: #2c2c2c;
}
.title-field {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
}
.form-lightmode {
border: 0.0625rem solid #8e8e8e;
background-color: #fff;
}
.title-icon {
justify-content: center;
align-items: center;
width: 3.125rem;
height: 3.125rem;
}
.title-field {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
}
.title-icon > img {
width: 3.125rem;
height: 3.125rem;
object-fit: contain;
object-position: center;
overflow: hidden;
}
.title-icon {
justify-content: center;
align-items: center;
width: 3.125rem;
height: 3.125rem;
}
.title {
margin: 0;
color: #fff;
letter-spacing: 5%;
white-space: nowrap;
font: 400 1.875rem/1.875rem Overpass, sans-serif;
}
.title-icon>img {
width: 3.125rem;
height: 3.125rem;
object-fit: contain;
object-position: center;
overflow: hidden;
}
.login-field {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
gap: 1.25rem;
}
.title {
margin: 0;
letter-spacing: 5%;
white-space: nowrap;
font: 400 1.875rem/1.875rem Overpass, sans-serif;
}
.form-field {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
width: 25rem;
height: 5rem;
padding: 0.625rem;
gap: 0.625rem;
}
.pre-darkmode,
.title-darkmode {
color: #fff;
}
label {
display: flex;
flex-direction: row;
align-items: flex-start;
width: fit-content;
height: 1.875rem;
gap: 0.625rem;
}
.pre-lightmode,
.title-lightmode {
color: #000;
}
.icon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 1.875rem;
height: 1.875rem;
}
.login-field {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
gap: 1.25rem;
}
.icon > img {
filter: invert(100%);
object-fit: contain;
object-position: center;
overflow: hidden;
}
#username-icon > img {
width: auto;
height: 0.9375rem;
}
#password-icon > img {
width: 0.9375rem;
height: auto;
}
.form-field {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
width: 25rem;
height: 5rem;
padding: 0.625rem;
gap: 0.625rem;
}
.label {
color: #fff;
letter-spacing: 2%;
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
}
label {
display: flex;
flex-direction: row;
align-items: flex-start;
width: fit-content;
height: 1.875rem;
gap: 0.625rem;
}
.input-field {
display: flex;
flex-direction: row;
align-items: center;
justify-content: stretch;
align-self: stretch;
width: 100%;
height: 1.875rem;
border-radius: 0.3125rem;
padding: 0.1875rem 0.625rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
background-color: #212121;
}
.icon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 1.875rem;
height: 1.875rem;
}
input[type=text] {
width: 100%;
height: 100%;
background-color: #00000000;
border: none;
color: #8e8e8e;
letter-spacing: 5%;
white-space: nowrap;
font: 100 0.75rem/1.25rem Overpass, sans-serif;
}
input[type=button] {
width: fit-content;
align-self: flex-end;
background-color: #00000000;
border: none;
color: #fff;
letter-spacing: 5%;
white-space: nowrap;
font: 300 0.75rem/1.25rem Overpass, sans-serif;
}
#login-button {
width: 13.75rem;
height: 4.375rem;
padding: 0.625rem;
border-radius: 0.625rem;
align-self: center;
border: none;
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
color: #fff;
letter-spacing: 2%;
white-space: nowrap;
font: 600 1.25rem/1.875rem Overpass, sans-serif;
}
</style>
.icon>img {
object-fit: contain;
object-position: center;
overflow: hidden;
}
.icon-darkmode>img {
filter: invert(100%);
}
.icon-lightmode>img {
filter: invert(0%);
}
#username-icon>img {
width: auto;
height: 0.9375rem;
}
#password-icon>img {
width: 0.9375rem;
height: auto;
}
.label {
letter-spacing: 2%;
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
}
.label-darkmode {
color: #fff;
}
.label-lightmode {
color: #000;
}
.input-field {
display: flex;
flex-direction: row;
align-items: center;
justify-content: stretch;
align-self: stretch;
width: 100%;
height: 1.875rem;
border-radius: 0.3125rem;
padding: 0.1875rem 0.625rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
}
.input-darkmode {
background-color: #212121;
}
.input-lightmode {
background-color: #EBEBEB;
}
input[type=text] {
width: 100%;
height: 100%;
background-color: #00000000;
border: none;
color: #8e8e8e;
letter-spacing: 5%;
white-space: nowrap;
font: 100 0.75rem/1.25rem Overpass, sans-serif;
}
input[type=button] {
width: fit-content;
align-self: flex-end;
background-color: #00000000;
border: none;
letter-spacing: 5%;
white-space: nowrap;
font: 300 0.75rem/1.25rem Overpass, sans-serif;
}
.button-darkmode {
color: #fff;
}
.button-lightmode {
color: #000;
}
#login-button {
width: 13.75rem;
height: 4.375rem;
padding: 0.625rem;
border-radius: 0.625rem;
align-self: center;
border: none;
color: #000;
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
letter-spacing: 2%;
white-space: nowrap;
font: 600 1.25rem/1.875rem Overpass, sans-serif;
}
</style>

2
pages/login.vue
View File

@ -46,7 +46,7 @@ export default {
flex-direction: column;
float: left;
justify-content: stretch;
align-items: stretch;
align-items: center;
width: 100%;
flex-grow: 1;
gap: 0.625rem;

2
public/icons/Mail-Icon.svg
View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none" viewBox="0 0 16 12">
<path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m4.572 3.857 3.572 2.5 3.571-2.5"/>
<path stroke="#000" d="M1 9.571V2.43C1 1.639 1.64 1 2.429 1h11.428c.79 0 1.429.64 1.429 1.429V9.57c0 .79-.64 1.429-1.429 1.429H2.43A1.427 1.427 0 0 1 1 9.571Z"/>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 375 B

After

Width:  |  Height:  |  Size: 374 B

2
routerFrontend/index.js
View File

@ -11,7 +11,7 @@ const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
path: '/login',
component: LoginPage
},
{