update code ui

src/router/index.js

@@ -23,6 +23,7 @@ import ElDropdowns from "../layouts/sections/elements/dropdowns/DropdownsView.vu
 import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressBarsView.vue";
 import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
 import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue";
+import RoomView from "../views/Restroom/RoomView.vue"
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -31,6 +32,11 @@ const router = createRouter({
       name: "presentation",
       component: PresentationView,
     },
+    {
+      path: "/room",
+      name: "room",
+      component: RoomView,
+    },
     {
       path: "/pages/landing-pages/about-us",
       name: "about",

src/views/Presentation/PresentationView.vue

@@ -20,7 +20,7 @@ import PresentationTestimonials from "./Sections/PresentationTestimonials.vue";
 import PresentationInformation from "./Sections/PresentationInformation.vue";
 
 //images
-import vueMkHeader from "@/assets/img/vue-mk-header.jpg";
+import vueMkHeader from "@/assets/img/bg.jpg";
 import wavesWhite from "@/assets/img/waves-white.svg";
 import logoBootstrap from "@/assets/img/logos/bootstrap5.jpg";
 import logoTailwind from "@/assets/img/logos/icon-tailwind.jpg";
@@ -42,32 +42,21 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="container position-sticky z-index-sticky top-0">
+  <!-- <div class="container position-sticky z-index-sticky top-0">
     <div class="row">
       <div class="col-12">
         <NavbarDefault :sticky="true" />
       </div>
     </div>
-  </div>
+  </div> -->
   <Header>
-    <div
+    <div class="page-header min-vh-45" :style="`background-image: url(${vueMkHeader})`" loading="lazy">
-      class="page-header min-vh-75"
-      :style="`background-image: url(${vueMkHeader})`"
-      loading="lazy"
-    >
       <div class="container">
         <div class="row">
           <div class="col-lg-7 text-center mx-auto position-relative">
-            <h1
+            <h1 class=" pt-3 mt-n5 me-2 head-text">
-              class="text-white pt-3 mt-n5 me-2"
+              โปรแกรมทะเบียนบ้านพัก
-              :style="{ display: 'inline-block ' }"
-            >
-              Material Kit 2
             </h1>
-            <p class="lead text-white px-5 mt-3" :style="{ fontWeight: '500' }">
-              Start the Development With Bootstrap 5 Design System inspired by
-              Material Design.
-            </p>
           </div>
         </div>
       </div>
@@ -75,13 +64,13 @@ onUnmounted(() => {
   </Header>
 
   <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
-    <PresentationCounter />
+    <!-- <PresentationCounter /> -->
     <PresentationInformation />
-    <PresentationExample :data="data" />
+    <!-- <PresentationExample :data="data" />
     <PresentationPages />
-    <BuiltByDevelopers />
+    <BuiltByDevelopers /> -->
 
-    <div class="container">
+    <!-- <div class="container">
       <div class="row">
         <div class="col-lg-4">
           <FilledInfoCard
@@ -291,7 +280,18 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
-  <DefaultFooter />
+  <!-- <DefaultFooter /> -->
 </template>
+<style>
+.head-text {
+  display: inline-block;
+  color: rgb(0, 0, 0);
+  padding: 1rem 3rem;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 1rem;
+}
+</style>

src/views/Presentation/Sections/PresentationInformation.vue

@@ -1,11 +1,55 @@
 <script setup>
-import RotatingCard from "../../../examples/cards/rotatingCards/RotatingCard.vue";
-import RotatingCardFront from "../../../examples/cards/rotatingCards/RotatingCardFront.vue";
-import RotatingCardBack from "../../../examples/cards/rotatingCards/RotatingCardBack.vue";
-import DefaultInfoCard from "../../../examples/cards/infoCards/DefaultInfoCard.vue";
 </script>
 <template>
-  <section class="my-5 py-5">
+  <section class="my-4 py-4">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-3">
+                <div class="card">
+                    <div class="card-body text-center">
+                        <h5 class="card-title">ทะเบียน</h5>
+                        <img src="../../../assets/img/register.png"  alt="title" loading="lazy" class="w-70" />
+                        <!-- <RouterLink  class="dropdown-item border-radius-md"> -->
+                            <a href="#" class="btn btn-primary mt-4">ทะเบียน</a>
+                        <!-- </RouterLink> -->
+
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3 mb-3 mb-sm-0">
+                <div class="card">
+                    <div class="card-body text-center">
+                        <h5 class="card-title">สถานะห้องพัก</h5>
+                        <img src="../../../assets/img/status.png" alt="title" loading="lazy" class="w-70" />
+                        <!-- :to="{ name: 'room' }" -->
+                        <RouterLink :to="{ name: 'room' }" class="dropdown-item border-radius-md">
+                            <a href="#" class="btn btn-primary mt-4">สถานะห้องพัก</a>
+                        </RouterLink>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="card">
+                    <div class="card-body text-center">
+                        <h5 class="card-title">ผังห้องพัก</h5>
+                        <img src="../../../assets/img/layout.png" alt="title" loading="lazy" class="w-70" />
+                        <a href="#" class="btn btn-primary mt-4">ผังห้องพัก</a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="card">
+                    <div class="card-body text-center">
+                        <h5 class="card-title">ค่าสาธารณุปโภค</h5>
+                        <img src="../../../assets/img/utilities.png" alt="title" loading="lazy" class="w-70" />
+                        <a href="#" class="btn btn-primary mt-4">ค่าสาธารณุปโภค</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+  <!-- <section class="my-5 py-5">
     <div class="container">
       <div class="row align-items-center">
         <div class="col-lg-4 ms-auto me-auto p-lg-4 mt-lg-0 mt-4">
@@ -66,5 +110,5 @@ import DefaultInfoCard from "../../../examples/cards/infoCards/DefaultInfoCard.v
         </div>
       </div>
     </div>
-  </section>
+  </section> -->
 </template>

src/views/Restroom/RoomView.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { onMounted } from "vue";
+
+//example components
+import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
+import DefaultFooter from "@/examples/footers/FooterDefault.vue";
+
+//image
+import image from "@/assets/img/illustrations/illustration-signin.jpg";
+
+//material components
+import MaterialInput from "@/components/MaterialInput.vue";
+import MaterialTextArea from "@/components/MaterialTextArea.vue";
+import MaterialButton from "@/components/MaterialButton.vue";
+
+// material-input
+import setMaterialInput from "@/assets/js/material-input";
+onMounted(() => {
+  setMaterialInput();
+});
+
+const landingColumns = [
+  {
+    title: "ห้อง 1",
+    dataIndex: "1",
+    status: true
+  },
+  {
+    title: "ห้อง 2",
+    dataIndex: "2",
+    status: false
+  },
+  {
+    title: "ห้อง 3",
+    dataIndex: "3",
+    status: true
+  },
+  {
+    title: "ห้อง 4",
+    dataIndex: "4",
+    status: true
+  },
+  {
+    title: "ห้อง 5",
+    dataIndex: "5",
+    status: false
+  },
+  {
+    title: "ห้อง 6",
+    dataIndex: "6",
+    status: false
+  },
+  {
+    title: "ห้อง 7",
+    dataIndex: "7",
+    status: true
+  },
+  {
+    title: "ห้อง 8",
+    dataIndex: "8",
+    status: false
+  },
+  {
+    title: "ห้อง 9",
+    dataIndex: "9",
+    status: false
+  },
+  {
+    title: "ห้อง 10",
+    dataIndex: "10",
+    status: false
+  },
+  {
+    title: "ห้อง 11",
+    dataIndex: "11",
+    status: true
+  },
+  {
+    title: "ห้อง 12",
+    dataIndex: "12",
+    status: false
+  },
+  {
+    title: "ห้อง 13",
+    dataIndex: "13",
+    status: false
+  },
+];
+</script>
+<template>
+  <div class="container position-sticky z-index-sticky top-0">
+    <div class="row">
+      <div class="col-12">
+        <DefaultNavbar
+          :sticky="true"
+          :action="{
+            route: 'https://www.creative-tim.com/product/vue-material-kit-pro',
+            color: 'bg-gradient-success',
+            label: 'Buy Now',
+          }"
+        />
+      </div>
+    </div>
+  </div>
+  <section>
+    <div class="page-header min-vh-100">
+      <div class="container">
+        <div class=" text-center">
+          <div class="row row-cols-auto" :style="{'--bs-gutter-x': '0.5rem'}">
+            <div class="col" v-for="(item,index) in landingColumns" :key="index">
+              <div class="card mb-2" v-bind:class="{'bg-red': item?.status,  'bg-green': !item?.status}" :style="{ width: `110px`,  }">
+                <div class="card-body">
+                  <p class="card-title " >{{ item?.title }}</p>
+                  <a href="#" class="card-link"><i class="bi bi-pencil-square"></i></a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</template>
+<style>
+.bg-green{
+  background : #567b57 !important;
+  color: #fff;
+}
+.bg-red{
+  background: #d24c4a !important;
+  color: #fff;
+}
+.bg-waring{
+  background: #d1d3d5 !important;
+  color: #fff;
+}
+</style>