104 lines
4.0 KiB
Vue
104 lines
4.0 KiB
Vue
<template>
|
|
<div class="flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-4 pl-4">
|
|
<div class="max-w-md flex flex-col items-center z-60" >
|
|
<div class="relative flex items-end justify-center z-30 px-[10px] mt-[10px]">
|
|
<img
|
|
src="/images/logo.png"
|
|
:alt="selectedCharacter.name"
|
|
class="object-contain relative z-30 pb-0"
|
|
/>
|
|
</div>
|
|
<h2 class="mt-6 text-xl font-bold text-gray-700">
|
|
{{ selectedCharacter.name }}
|
|
</h2>
|
|
<div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
|
|
<img
|
|
:src="selectedProfile.img"
|
|
:alt="selectedCharacter.name"
|
|
class="w-40 h-60 object-contain relative z-30 pb-12"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- Character Selection -->
|
|
<div class="w-full flex flex-col items-center z-60" >
|
|
<div class="w-full ">
|
|
<div class="mb-4">
|
|
<input type="text" placeholder="Real Name"
|
|
class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl
|
|
focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<input type="text" placeholder="Email"
|
|
class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl
|
|
focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<input type="text" placeholder="Phone"
|
|
class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl
|
|
focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
|
|
/>
|
|
</div>
|
|
<div >
|
|
<input type="text" placeholder="Password"
|
|
class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl
|
|
focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
|
|
/>
|
|
</div>
|
|
<button class="w-full mt-6 h-[60px] bg-lime-500 border border-transparent rounded-lg px-4 py-2 text-sm font-medium text-white hover:bg-lime-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500"> R E G I S T E R </button>
|
|
<div class="flex items-center justify-center mt-4">
|
|
<router-link to ="/login">
|
|
<span class="font-bold text-sm text-blue-600">L O G I N</span>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "App",
|
|
data() {
|
|
return {
|
|
characters: [
|
|
{ name: "Bear", img: "../images/char/bear.png" },
|
|
{ name: "Rabbit", img: "../images/char/rabbit.png" },
|
|
{ name: "Fox", img: "../images/char/fox.png" },
|
|
{ name: "Brown Bear", img: "../images/char/brownbear.png" },
|
|
{ name: "Lion", img: "../images/char/lion.png" },
|
|
{ name: "Monkey", img: "../images/char/monkey.png" },
|
|
{ name: "Pig", img: "../images/char/pig.png" },
|
|
{ name: "Sheep", img: "../images/char/sheep.png" },
|
|
{ name: "Tiger", img: "../images/char/tiger.png" },
|
|
],
|
|
|
|
profiles : [
|
|
{name : "profile", img: "/images/propic-001.svg"},
|
|
{name : "profile", img: "/images/propic-blank.svg"},
|
|
],
|
|
|
|
selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
|
|
showModal:false,
|
|
selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
|
|
modalType : "profile",
|
|
};
|
|
},
|
|
methods: {
|
|
clickCharacter(char) {
|
|
this.selectedCharacter = char;
|
|
this.showModal = false;
|
|
},
|
|
changeAva(type) {
|
|
this.modalType = type;
|
|
this.showModal = true;
|
|
},
|
|
profileListSelected(profile) {
|
|
this.selectedProfile = profile;
|
|
this.showModal = false;
|
|
}
|
|
},
|
|
};
|
|
</script>
|