forked from noxious/client
Convert login screen to tailwind
This commit is contained in:
parent
3098cf862e
commit
d5a32de32e
@ -1,23 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-screen">
|
<div class="login-screen bg-gray-300">
|
||||||
<div class="content-wrapper">
|
<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>
|
||||||
<h1 class="main-title">NEW QUEST</h1>
|
<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">
|
<form @submit.prevent="loginFunc">
|
||||||
<div class="content-elements">
|
<div class="content-elements my-[80px] mx-0 w-full flex flex-col gap-[24px]">
|
||||||
<div class="login-form">
|
<div class="login-form w-full grid gap-[15px]">
|
||||||
<div class="form-field">
|
<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 for="username">Username</label>
|
<label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
|
||||||
<input id="username" v-model="username" type="text" name="username" required autofocus />
|
<input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-field">
|
<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 for="password">Password</label>
|
<label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
|
||||||
<input id="password" v-model="password" type="password" name="password" required />
|
<input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row-buttons">
|
<div class="row-buttons flex justify-center sm:gap-[15px] gap-[8px]">
|
||||||
<button class="button btn-cyan" type="submit"><span>PLAY</span></button>
|
<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" type="button" @click.prevent="registerFunc"><span>REGISTER</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"><span>CREDITS</span></button>
|
<button class="button btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@ -100,120 +102,3 @@ async function registerFunc() {
|
|||||||
socket.initConnection()
|
socket.initConnection()
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user