init project and finish login page

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>