Untitled
unknown
plain_text
a month ago
2.4 kB
2
Indexable
Never
<template> <main> <div class="container mx-auto"> <div class="flex justify-center items-center h-screen"> <div class="flex bg-secondary border-2 border-gray-200 rounded-2xl hover:shadow-xl transition-all" > <div class="w-1/2 h-full hidden lg:block bg-cover rounded-lg"> <img src="../components/icons/logimage.jpg" alt="" class="rounded-lg" /> </div> <div class="flex flex-col justify-center p-2 border-l-2 border-gray-200" > <h1 class="text-heading text-2xl text-gray-700 text-center mb-3"> Login </h1> <div class="flex flex-col content-center justify-center"> <label for="" class="font-body text-xl my-2 tracking-wider" >Email</label > <input type="text" v-model="inputEmail" placeholder="Email" class="border-2 focus:outline-none ring-1 ring-gray-400 focus:ring-accent bg-gray-100 rounded-md p-1 mb-4 w-full" /> </div> <div> <label for="" class="font-body text-xl my-2 tracking-wider" >Password</label > <input v-model="inputPassword" type="text" placeholder="Password" class="border-2 focus:outline-none ring-1 ring-gray-400 focus:ring-accent bg-gray-100 rounded-md p-1 mb-4 w-full" /> </div> <button @click="login" class="bg-transparent uppercase border border-gray-400 hover:bg-accent font-semibold tracking-wide transition ease-in-out hover:translate-y-2 hover:shadow-md mt-4 rounded-lg p-2" > Login </button> </div> </div> </div> </div> </main> </template> <script setup> import { ref } from "vue"; import { useRouter } from "vue-router"; const inputEmail = ref(""); const inputPassword = ref(""); const router = useRouter(); const login = () => { if ( inputEmail.value === "admin@admin.com" && inputPassword.value === "admin123" ) { router.push({ path: "home" }); } inputEmail = ""; inputPassword = ""; }; </script>
Leave a Comment