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

Added mobile responsive version to login

Browse Source
This commit is contained in:
Colin Kallemein 2024-10-09 21:26:38 +02:00
parent 53daa758a8
commit 34393a31ac
1 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/screens/Login.vue
View File

@ -1,27 +1,27 @@
<template> <template>
<div class="relative"> <div class="relative max-lg:h-dvh">
<div class="bg-gradient-to-r from-gray-900 to-transparent w-1/2 h-dvh absolute right-0 top-0 z-10"></div> <div class="lg:bg-gradient-to-r bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute right-0 max-lg:bottom-0 lg:top-0 z-10"></div>
<div class="bg-[url('/assets/login/login-bg.png')] w-1/2 h-dvh absolute right-0 top-0 bg-no-repeat bg-cover bg-center"></div> <div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute right-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
<div class="bg-gray-900 z-20 w-1/2 h-dvh relative"> <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
<div class="w-full h-dvh flex items-center justify-center flex-col px-8"> <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
<img src="/assets/login/nq-logo-v1.png" class="mb-10" /> <img src="/assets/login/nq-logo-v1.png" class="mb-10" />
<div class="relative"> <div class="relative">
<img src="/assets/login/login-box-outer.svg" class="absolute w-full h-full" /> <img src="/assets/login/login-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
<img src="/assets/login/login-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" /> <img src="/assets/login/login-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" />
<!-- Login Form --> <!-- Login Form -->
<form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative px-6 py-11"> <form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative px-6 py-11">
<div class="flex flex-col gap-5 p-2 mb-8 relative"> <div class="flex flex-col gap-5 p-2 mb-8 relative">
<div class="w-full grid gap-3 relative"> <div class="w-full grid gap-3 relative">
<input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus /> <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 xs:min-w-[350px] min-w-64" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
<div class="relative"> <div class="relative">
<input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required /> <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 xs:min-w-[350px] min-w-64" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button> <button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
</div> </div>
<span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span> <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
</div> </div>
<button class="text-right text-cyan-300 text-base">Forgot password?</button> <button class="text-right text-cyan-300 text-base">Forgot password?</button>
<button class="btn-cyan py-3 px-0 w-full text-base rounded" type="submit">Play now</button> <button class="btn-cyan py-3 px-0 xs:w-full text-base rounded" type="submit">Play now</button>
<!-- Divider shape --> <!-- Divider shape -->
<div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between"> <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
@ -31,33 +31,32 @@
</div> </div>
</div> </div>
<div class="pt-8"> <div class="pt-8">
<p class="m-0 text-center">Don't have an account? <button ref="toggleRegister" class="text-cyan-300 text-base p-0" @click.prevent="switchForm = 'register'">Sign up</button></p> <p class="m-0 text-center">Don't have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="switchForm = 'register'">Sign up</button></p>
</div> </div>
</form> </form>
<!-- Register Form --> <!-- Register Form -->
<form v-show="switchForm === 'register'" @submit.prevent="registerFunc" class="relative p-10"> <form v-show="switchForm === 'register'" @submit.prevent="registerFunc" class="relative px-6 py-11">
<div class="flex flex-col gap-6 p-2 mb-8 relative"> <div class="flex flex-col gap-5 p-2 mb-8 relative">
<div class="w-full grid gap-2 mb-9 relative"> <div class="w-full grid gap-3 relative">
<input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus /> <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 xs:min-w-[350px] min-w-64" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
<div class="relative"> <div class="relative">
<input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required /> <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 xs:min-w-[350px] min-w-64" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<button class="absolute right-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button> <button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
</div> </div>
<span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span> <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
</div> </div>
<button class="text-right text-cyan-50 text-base">Forgot password?</button> <button class="btn-cyan py-3 px-0 xs:w-full text-base rounded" type="submit">Register now</button>
<button class="btn-cyan py-2 px-0 w-full text-xl" type="submit">Register</button>
<!-- Divider shape --> <!-- Divider shape -->
<div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between"> <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
<div class="w-0.5 h-full bg-white/30"></div> <div class="w-0.5 h-full bg-gray-300"></div>
<div class="w-36 h-full bg-white/30"></div> <div class="w-36 h-full bg-gray-300"></div>
<div class="w-0.5 h-full bg-white/30"></div> <div class="w-0.5 h-full bg-gray-300"></div>
</div> </div>
</div> </div>
<div class="pt-8"> <div class="pt-8">
<p class="m-0 text-center">Already have an account? <button class="text-cyan-50 text-base p-0" @click.prevent="switchForm = 'login'">Log in</button></p> <p class="m-0 text-center">Already have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="switchForm = 'login'">Log in</button></p>
</div> </div>
</form> </form>
</div> </div>