added login page, setup templates
This commit is contained in:
jo.kuehner
213
components/LoginForm.vue
Normal file
213
components/LoginForm.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<form class="login-form">
|
||||
<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>
|
||||
</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">
|
||||
<img loading="lazy" src="../icons/Mail-Icon.svg" />
|
||||
</span>
|
||||
<div class="label">Username:</div>
|
||||
</label>
|
||||
<div class="input-field">
|
||||
<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">
|
||||
<img loading="lazy" src="../icons/Lock-Icon.svg" />
|
||||
</span>
|
||||
<div class="label">Password:</div>
|
||||
</label>
|
||||
<div class="input-field">
|
||||
<input type="text" id="password-input" placeholder="*******">
|
||||
<input type="button" id="show-password-toggle" value="Show">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="button" id="login-button" value="Login">
|
||||
</form>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "LoginForm",
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border-radius: 10px;
|
||||
padding: 40px 30px;
|
||||
gap: 30px;
|
||||
border: 1px solid #000;
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
|
||||
.title-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.title-icon > img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
letter-spacing: 1.6px;
|
||||
white-space: nowrap;
|
||||
font: 400 30px/30px Overpass, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.login-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
width: 400px;
|
||||
height: 80px;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: fit-content;
|
||||
height: 30px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.icon > img {
|
||||
filter: invert(100%);
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
#username-icon > img {
|
||||
width: auto;
|
||||
height: 15px;
|
||||
}
|
||||
#password-icon > img {
|
||||
width: 15px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
letter-spacing: 0.3px;
|
||||
font: 400 15px/30px Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
padding: 3px 10px;
|
||||
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25) inset;
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #00000000;
|
||||
border: none;
|
||||
color: #8e8e8e;
|
||||
letter-spacing: 0.6px;
|
||||
white-space: nowrap;
|
||||
font: 100 12px/20px Overpass, sans-serif;
|
||||
}
|
||||
input[type=button] {
|
||||
width: fit-content;
|
||||
align-self: flex-end;
|
||||
background-color: #00000000;
|
||||
border: none;
|
||||
color: #fff;
|
||||
letter-spacing: 0.6px;
|
||||
white-space: nowrap;
|
||||
font: 300 12px/20px Overpass, sans-serif;
|
||||
}
|
||||
|
||||
#login-button {
|
||||
width: 220px;
|
||||
height: 70px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
align-self: center;
|
||||
border: none;
|
||||
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
|
||||
color: #fff;
|
||||
letter-spacing: 0.4px;
|
||||
white-space: nowrap;
|
||||
font: 600 20px/30px Overpass, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user