diff --git a/src/assets/img/bg.jpg b/src/assets/img/bg.jpg
new file mode 100644
index 0000000..4c77742
Binary files /dev/null and b/src/assets/img/bg.jpg differ
diff --git a/src/assets/img/layout.png b/src/assets/img/layout.png
new file mode 100644
index 0000000..0d2f844
Binary files /dev/null and b/src/assets/img/layout.png differ
diff --git a/src/assets/img/register.png b/src/assets/img/register.png
new file mode 100644
index 0000000..b2ec3d3
Binary files /dev/null and b/src/assets/img/register.png differ
diff --git a/src/assets/img/status.png b/src/assets/img/status.png
new file mode 100644
index 0000000..13db519
Binary files /dev/null and b/src/assets/img/status.png differ
diff --git a/src/assets/img/utilities.png b/src/assets/img/utilities.png
new file mode 100644
index 0000000..2ee8e4f
Binary files /dev/null and b/src/assets/img/utilities.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 6257f01..8fc529d 100644
--- a/src/router/index.js
+++ b/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",
diff --git a/src/views/Presentation/PresentationView.vue b/src/views/Presentation/PresentationView.vue
index eb1e68b..fdc70ba 100644
--- a/src/views/Presentation/PresentationView.vue
+++ b/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
- class="page-header min-vh-75"
- :style="`background-image: url(${vueMkHeader})`"
- loading="lazy"
- >
+ <div class="page-header min-vh-45" :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
- class="text-white pt-3 mt-n5 me-2"
- :style="{ display: 'inline-block ' }"
- >
- Material Kit 2
+ <h1 class=" pt-3 mt-n5 me-2 head-text">
+ โปรแกรมทะเบียนบ้านพัก
</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>
\ No newline at end of file
diff --git a/src/views/Presentation/Sections/PresentationInformation.vue b/src/views/Presentation/Sections/PresentationInformation.vue
index ba84929..630ce60 100644
--- a/src/views/Presentation/Sections/PresentationInformation.vue
+++ b/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>
diff --git a/src/views/Restroom/RoomView.vue b/src/views/Restroom/RoomView.vue
new file mode 100644
index 0000000..9170614
--- /dev/null
+++ b/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>
\ No newline at end of file