noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert login screen to tailwind

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-06 21:12:07 +02:00
parent 3098cf862e
commit d5a32de32e
1 changed files with 18 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/screens/Login.vue
View File

@ -1,23 +1,25 @@
<template>
<div class="login-screen">
<div class="content-wrapper">
<h1 class="main-title">NEW QUEST</h1>
<div class="login-screen bg-gray-300">
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full z-10 pointer-events-none"></div>
<div class="content-wrapper z-20 w-full h-dvh flex items-center justify-between flex-col relative">
<div class="filler"></div>
<h1 class="main-title mt-[115px] text-center text-6xl">NEW QUEST</h1>
<form @submit.prevent="loginFunc">
<div class="content-elements">
<div class="login-form">
<div class="form-field">
<label for="username">Username</label>
<input id="username" v-model="username" type="text" name="username" required autofocus />
<div class="content-elements my-[80px] mx-0 w-full flex flex-col gap-[24px]">
<div class="login-form w-full grid gap-[15px]">
<div class="form-field flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
<input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
</div>
<div class="form-field">
<label for="password">Password</label>
<input id="password" v-model="password" type="password" name="password" required />
<div class="form-field flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
<input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
</div>
</div>
<div class="row-buttons">
<button class="button btn-cyan" type="submit"><span>PLAY</span></button>
<button class="button btn-cyan" type="button" @click.prevent="registerFunc"><span>REGISTER</span></button>
<button class="button btn-cyan"><span>CREDITS</span></button>
<div class="row-buttons flex justify-center sm:gap-[15px] gap-[8px]">
<button class="button btn-cyan py-2 px-0 min-w-[100px]" type="submit"><span class="m-auto">PLAY</span></button>
<button class="button btn-cyan py-2 px-0 min-w-[100px]" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
<button class="button btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
</div>
</div>
</form>
@ -100,120 +102,3 @@ async function registerFunc() {
socket.initConnection()
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.login-screen {
&::before {
content: '';
position: absolute;
background-image: url('/assets/shapes/select-screen-bg-shape.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% cover;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
background-color: $dark-gray;
.content-wrapper {
z-index: 2;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
position: relative;
&::before {
content: '';
}
.content-elements {
margin: 80px 0;
width: inherit;
display: flex;
flex-direction: column;
gap: 24px;
.login-form {
width: inherit;
display: grid;
gap: 15px;
.form-field {
display: flex;
flex-direction: column;
background-color: rgba($white, 0.5);
border-radius: 3px;
border: $light-gray 1px solid;
min-width: 500px;
margin: 0 auto;
label {
color: $black;
background-color: rgba($white, 0.5);
padding: 4px;
font-size: 0.875rem;
border-radius: 3px 3px 0 0;
}
input {
padding: 4px;
font-size: 0.875rem;
&:focus-visible {
outline: none;
}
}
}
}
.row-buttons {
display: flex;
justify-content: center;
gap: 15px;
.button {
padding: 8px 0;
min-width: 100px;
span {
margin: auto;
}
}
}
}
}
.main-title {
margin-top: 115px;
text-align: center;
font-size: 4rem;
}
a {
text-decoration: none;
}
// Mobile screens (< 450px)
@media screen and (max-width: 550px) {
.content-wrapper {
.content-elements {
.login-form {
.form-field {
width: 100%;
min-width: unset;
}
}
.row-buttons {
gap: 8px;
}
}
}
}
}
</style>