added page titles and icon
This commit is contained in:
Johanna Kuehner
@ -4,13 +4,13 @@
|
||||
<span class="title-icon" id="logo-icon">
|
||||
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
|
||||
</span>
|
||||
<pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-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', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
|
||||
<img loading="lazy" src="../icons/Mail-Icon.svg" />
|
||||
<img loading="lazy" src="/icons/Mail-Icon.svg" />
|
||||
</span>
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
|
||||
</label>
|
||||
@ -21,14 +21,13 @@
|
||||
<div class="form-field" id="password-field">
|
||||
<label for="password-input" id="password-label">
|
||||
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
|
||||
<img loading="lazy" src="../icons/Lock-Icon.svg" />
|
||||
<img loading="lazy" src="/icons/Lock-Icon.svg" />
|
||||
</span>
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
|
||||
</label>
|
||||
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
||||
<input type="text" id="password-input" placeholder="*******">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
|
||||
value="Show">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,10 +36,10 @@
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']"> {{ errorMsg }} </div>
|
||||
</label>
|
||||
</div>
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
|
||||
@click="handleLogin">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Signup"
|
||||
@click="testFunctionSignup">
|
||||
<div class="buttons">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login" @click="handleLogin">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup">
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@ -162,22 +161,22 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 31.25rem;
|
||||
height: 33rem;
|
||||
min-height: 33rem;
|
||||
height: fit-content;
|
||||
border-radius: 0.625rem;
|
||||
padding: 2.5rem 1.875rem;
|
||||
gap: 1.875rem;
|
||||
}
|
||||
|
||||
.form-darkmode {
|
||||
border: 0.0625rem solid #000;
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.form-lightmode {
|
||||
border: 0.0625rem solid #8e8e8e;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.title-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -192,7 +191,6 @@ export default {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
.title-icon>img {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
@ -203,20 +201,14 @@ export default {
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.05rem;
|
||||
white-space: nowrap;
|
||||
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.title-darkmode { color: #ffffff; }
|
||||
.title-lightmode { color: #000000; }
|
||||
|
||||
.pre-darkmode,
|
||||
.title-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode,
|
||||
.title-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.login-field {
|
||||
display: flex;
|
||||
@ -227,6 +219,7 @@ export default {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -238,16 +231,6 @@ export default {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.form-field-error-msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 25rem;
|
||||
height: 3rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -265,43 +248,28 @@ label {
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.icon-darkmode>img { filter: invert(100%); }
|
||||
.icon-lightmode>img { filter: invert(0%); }
|
||||
|
||||
.label {
|
||||
letter-spacing: 2%;
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
.label-darkmode { color: #ffffff; }
|
||||
.label-lightmode { color: #000000; }
|
||||
|
||||
.input-field {
|
||||
display: flex;
|
||||
@ -314,15 +282,9 @@ label {
|
||||
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-darkmode { background-color: #212121; }
|
||||
.input-lightmode { background-color: #EBEBEB; }
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
@ -330,40 +292,63 @@ input[type=text] {
|
||||
background-color: #00000000;
|
||||
border: none;
|
||||
color: #8e8e8e;
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.01rem;
|
||||
white-space: nowrap;
|
||||
font: 100 0.75rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
input[type=button] {
|
||||
#show-password-toggle {
|
||||
width: fit-content;
|
||||
height: auto;
|
||||
align-self: flex-end;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background-color: #00000000;
|
||||
background: none;
|
||||
border: none;
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.01rem;
|
||||
white-space: nowrap;
|
||||
font: 300 0.75rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.button-darkmode {
|
||||
color: #fff;
|
||||
|
||||
|
||||
.form-field-error-msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 25rem;
|
||||
height: 3rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.button-lightmode {
|
||||
color: #000;
|
||||
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.625rem 0.625rem 0;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
#login-button {
|
||||
width: 13.75rem;
|
||||
height: 4.375rem;
|
||||
|
||||
input[type=button] {
|
||||
width: 9.375rem;
|
||||
height: 3.125rem;
|
||||
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%;
|
||||
letter-spacing: 0.02rem;
|
||||
white-space: nowrap;
|
||||
font: 600 1.25rem/1.875rem Overpass, sans-serif;
|
||||
font: 600 1.125rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.button-darkmode { color: #ffffff; }
|
||||
.button-lightmode { color: #000000; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user