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

Added new colors, adjusted login styling

Browse Source
This commit is contained in:
Colin Kallemein
2024-10-08 21:28:16 +02:00
parent 15442764c2
commit e610e866c7
10 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/screens/Login.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="relative">
<div class="bg-gradient-to-r from-gray-50 to-transparent w-1/2 h-dvh absolute right-0 top-0 z-10"></div>
<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="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-gray-50 z-20 w-1/2 h-dvh relative">
<div class="bg-gray-900 z-20 w-1/2 h-dvh relative">
<div class="w-full h-dvh flex items-center justify-center flex-col px-8">
<img src="/assets/login/nq-logo-v1.png" class="mb-10" />
<div class="relative">
@ -10,25 +10,25 @@
<img src="/assets/login/login-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" />
<!-- Login Form -->
<form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative p-10">
<div class="flex flex-col gap-6 p-2 mb-8 relative">
<div class="w-full grid gap-2 mb-9 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-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<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="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 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<span v-if="gameStore.loginMessage" class="text-red-200 text-sm absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
</div>
<button class="text-right text-cyan-50 text-base">Forgot password?</button>
<button class="btn-cyan py-2 px-0 w-full text-xl" type="submit">Play now</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>
<!-- Divider shape -->
<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-36 h-full bg-white/30"></div>
<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-gray-300"></div>
<div class="w-0.5 h-full bg-gray-300"></div>
</div>
</div>
<div class="pt-8">
<p class="m-0 text-center">Don't have an account? <button ref="toggleRegister" class="text-cyan-50 text-base p-0" @click.prevent="switchForm = 'register'">Sign up</button></p>
<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>
</div>
</form>
@ -37,8 +37,8 @@
<div class="flex flex-col gap-6 p-2 mb-8 relative">
<div class="w-full grid gap-2 mb-9 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-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<span v-if="gameStore.loginMessage" class="text-red-200 text-sm absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
<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] bg-[url('/assets/icons/eye.svg')] bg-no-repeat" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<span v-if="gameStore.loginMessage" class="text-red-200 text-xs absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
</div>
<button class="text-right text-cyan-50 text-base">Forgot password?</button>
<button class="btn-cyan py-2 px-0 w-full text-xl" type="submit">Register</button>