init project and finish login page

src/App.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import LoginCard from './components/LoginCard.vue';
+
+</script>
+
+<template>
+  <header>
+    <RouterLink to="/user"> Go to User</RouterLink>
+    <RouterLink to="/login"> Go to Login</RouterLink>
+  </header>
+
+  <main>
+    <RouterView />
+  </main>
+</template>
+
+<style scoped>
+@import "./assets/main.css";
+</style>

src/assets/main.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+@plugin "daisyui" {
+  themes: light --default;
+}

src/assets/pwd.svg

@@ -0,0 +1 @@
+<svg t="1741522876251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3628" width="200" height="200"><path d="M327.04 85.333333h369.92C841.472 85.333333 938.666667 186.794667 938.666667 337.749333v348.501334C938.666667 837.205333 841.472 938.666667 696.874667 938.666667h-229.546667a32 32 0 0 1 0-64h229.546667c107.989333 0 177.792-73.941333 177.792-188.416V337.749333c0-114.474667-69.802667-188.416-177.749334-188.416H327.04C219.093333 149.333333 149.333333 223.274667 149.333333 337.749333v348.501334c0 114.474667 69.76 188.416 177.706667 188.416a32 32 0 0 1 0 64C182.442667 938.666667 85.333333 837.205333 85.333333 686.250667V337.749333C85.333333 186.794667 182.442667 85.333333 327.04 85.333333z m-51.114667 381.098667a31.914667 31.914667 0 0 1 42.325334-16.042667 31.914667 31.914667 0 0 1 16.042666 42.282667A47.061333 47.061333 0 1 0 424.192 512c0-25.898667-21.077333-46.933333-47.018667-46.933333a32 32 0 0 1 0-64c50.048 0 91.904 33.408 105.728 78.933333h242.858667a32 32 0 0 1 32 32v79.018667a32 32 0 0 1-64 0V544h-56.704v47.018667a32 32 0 0 1-64 0V544h-90.154667a110.72 110.72 0 0 1-105.728 79.018667 111.104 111.104 0 0 1-101.248-156.544z" fill="#200E32" p-id="3629"></path></svg>

src/assets/user.svg

@@ -0,0 +1 @@
+<svg t="1741522263287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2626" width="200" height="200"><path d="M511.913993 941.605241c-255.612968 0-385.311608-57.452713-385.311608-170.810012 0-80.846632 133.654964-133.998992 266.621871-151.88846L393.224257 602.049387c-79.986561-55.904586-118.86175-153.436587-118.86175-297.240383 0-139.33143 87.211154-222.586259 233.423148-222.586259l7.912649 0c146.211994 0 233.423148 83.254829 233.423148 222.586259 0 54.184445 0 214.67361-117.829666 297.412397l-0.344028 16.685369c132.966907 18.061482 266.105829 71.041828 266.105829 151.716445C897.225601 884.152528 767.526961 941.605241 511.913993 941.605241zM507.957668 141.567613c-79.470519 0-174.250294 28.382328-174.250294 163.241391 0 129.698639 34.230808 213.469511 104.584579 255.784982 8.944734 5.332437 14.277171 14.965228 14.277171 25.286074l0 59.344868c0 15.309256-11.524945 28.0383-26.662187 29.414413-144.319839 14.449185-239.959684 67.429531-239.959684 95.983874 0 92.199563 177.346548 111.637158 325.966739 111.637158 148.792206 0 325.966739-19.26558 325.966739-111.637158 0-28.726356-95.639845-81.534688-239.959684-95.983874-15.48127-1.548127-27.006215-14.621199-26.662187-30.102469l1.376113-59.344868c0.172014-10.148833 5.676466-19.437594 14.277171-24.770032 70.525785-42.487485 103.208466-123.678145 103.208466-255.784982 0-135.031077-94.779775-163.241391-174.250294-163.241391L507.957668 141.567613 507.957668 141.567613z" fill="#575B66" p-id="2627"></path></svg>

src/components/LoginCard.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="card card-dash h-80 w-100 shadow-xl">
+    <div class="card-body">
+      <h1 class="card-title place-self-center my-3 text-2xl">User Login</h1>
+      <div class="flex flex-col w-full h-full">
+        <label class="input w-full my-3">
+          <img class="h-[1em] opacity-50" src="@/assets/user.svg" alt="User img" />
+          <input type="text" class="grow" placeholder="User Name" />
+        </label>
+        <label class="input w-full my-3">
+          <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
+          <input type="text" class="grow" placeholder="User Name" />
+        </label>
+      </div>
+      <div>
+        <RouterLink class="flex justify-end mx-3" to="/">Forget Password</RouterLink>
+      </div>
+      <div class="card-actions flex items-end my-3">
+        <button class="btn flex-1">Sign Up</button>
+        <button class="btn btn-primary flex-3">Login</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+@import "@/assets/main.css"
+</style>

src/components/Navbar.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="navbar bg-base-100 shadow-sm">
+    <div class="navbar-start">
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
+          </svg>
+        </div>
+        <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+          <li><a>Item 1</a></li>
+          <li>
+            <a>Parent</a>
+            <ul class="p-2">
+              <li><a>Submenu 1</a></li>
+              <li><a>Submenu 2</a></li>
+            </ul>
+          </li>
+          <li><a>Item 3</a></li>
+        </ul>
+      </div>
+      <a class="btn btn-ghost text-xl">daisyUI</a>
+    </div>
+    <div class="navbar-center hidden lg:flex">
+      <ul class="menu menu-horizontal px-1">
+        <li><a>Item 1</a></li>
+        <li>
+          <details>
+            <summary>Parent</summary>
+            <ul class="p-2">
+              <li><a>Submenu 1</a></li>
+              <li><a>Submenu 2</a></li>
+            </ul>
+          </details>
+        </li>
+        <li><a>Item 3</a></li>
+      </ul>
+    </div>
+    <div class="navbar-end">
+      <a class="btn">Button</a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import "../assets/main.css";
+</style>

src/main.ts

@@ -0,0 +1,10 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from '@/App.vue'
+import router from './router'
+
+
+const app = createApp(App).use(router).use(createPinia()).mount('#app')

src/router/index.ts

@@ -0,0 +1,16 @@
+import { createMemoryHistory, createRouter } from 'vue-router'
+import LoginView from "@/views/LoginView.vue"
+import User from '@/views/UserView.vue'
+
+const routes = [
+  { path: "/", redirect: "/login" },
+  { path: "/login", name: "Login", component: LoginView },
+  { path: "/user", name: "User", component: User },
+]
+
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes,
+})
+
+export default router

src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

src/views/LoginView.vue

@@ -0,0 +1,13 @@
+<template>
+  <main>
+    <div class="flex items-center justify-center min-h-screen">
+      <LoginCard />
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import LoginCard from '@/components/LoginCard.vue';
+</script>
+
+<style scoped></style>

src/views/UserView.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+@import "../assets/main.css"
+</style>