6-4-23

components/Navbar.vue

@@ -36,6 +36,13 @@
             mdi-newspaper
           </v-icon>
         </v-btn>
+
+        <v-btn to="/home-page">
+          <span>HOME PAGE</span>
+          <v-icon dense>
+            mdi-home
+          </v-icon>
+        </v-btn>
       </v-toolbar-title>
 
       <v-spacer />
@@ -80,6 +87,9 @@
 </template>
 <script>
 export default {
+  mounted () {
+    console.log('123')
+  },
   methods: {
     async logout () {
       try {

components/user/Header.vue

@@ -43,6 +43,12 @@
               </div>
             </div>
             <v-divider vertical />
+            <div class="header-info" @click="changeColor">
+              <v-icon small>
+                mdi-moon-waning-crescent
+              </v-icon>
+              <span>night</span>
+            </div>
             <div class="header-info">
               <v-icon small>
                 mdi-map-marker-outline
@@ -373,6 +379,10 @@ export default {
         console.log('abc')
         this.getCardProducts()
       })
+    },
+    changeColor () {
+      console.log('abcd')
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
     }
   }
 }
@@ -546,4 +556,17 @@ b {
   width: 70px !important;
   min-width: 70px;
 }
+.header-bottom {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+@media only screen and (max-width: 768px) {
+  .header-middle-content {
+    display: flex;
+    flex-direction: column;
+  }
+  .header-middle-right {
+    margin-top: 10px;
+    width: 95%;
+  }
+}
 </style>

pages/home-page/categories/_id/index.vue

@@ -42,13 +42,15 @@
               link
             >
               <div>
-                <v-img
-                  :src="item.images[0]"
-                  height="250px"
-                  cover
-                />
+                <router-link :to="`/home-page/products/${item.id}`">
+                  <v-img
+                    :src="item.images[0]"
+                    height="250px"
+                    cover
+                  />
+                </router-link>
               </div>
-              <v-card-title class="d-flex justify-center">
+              <v-card-title class="d-flex justify-center" style="color: black">
                 {{ item.name }}
               </v-card-title>
               <v-card-subtitle class="d-flex justify-center">

pages/home-page/products/_id/index.vue

+<template>
+  <v-container>
+    <!-- Full-width images with number text -->
+    <div class="sub-container">
+      <div class="gallery-product">
+        <div>
+          <div class="mySlides">
+            <div class="numbertext">
+              1 / 4
+            </div>
+            <img src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%; height: 100%;">
+          </div>
+
+          <div class="mySlides">
+            <div class="numbertext">
+              2 / 4
+            </div>
+            <img src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%; height: 100%;">
+          </div>
+
+          <div class="mySlides">
+            <div class="numbertext">
+              3 / 4
+            </div>
+            <img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%; height: 100%;">
+          </div>
+
+          <div class="mySlides">
+            <div class="numbertext">
+              4 / 4
+            </div>
+            <img src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%; height: 100%;">
+          </div>
+
+          <!-- Next and previous buttons -->
+          <a class="prev" @click="plusSlides(-1)">&#10094;</a>
+          <a class="next" @click="plusSlides(1)">&#10095;</a>
+        </div>
+
+        <!-- Thumbnail images -->
+        <div class="c2">
+          <div class="column">
+            <img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%; height: 100%;" alt="The Woods" @click="currentSlide(1)">
+          </div>
+          <div class="column">
+            <img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%; height: 100%;" alt="Cinque Terre" @click="currentSlide(2)">
+          </div>
+          <div class="column">
+            <img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%; height: 100%;" alt="Mountains and fjords" @click="currentSlide(3)">
+          </div>
+          <div class="column">
+            <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
+          </div>
+        </div>
+      </div>
+      <div class="detail-product">
+        <v-col>
+          <v-row class="flex-row align-center justify-space-between mt-2">
+            <v-card-title class="modal-title" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem">
+              MACBOOK PRO 1
+            </v-card-title>
+          </v-row>
+          <v-row class="flex-row align-center">
+            <h3 class="mr-4">
+              Price:
+            </h3>
+            <v-card-title style="color: #d26e4b;font-weight: 700;line-height: 1;">
+              100$
+            </v-card-title>
+          </v-row>
+          <v-card-text class="descrip">
+            Sed egestas, ante et vulputate volutpat,
+          </v-card-text>
+          <v-row class="flex-row align-center">
+            <h3 class="mr-4">
+              Color:
+            </h3>
+            <v-col cols="12" sm="6" md="4">
+              <v-select
+                label="Color"
+                :items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
+              />
+            </v-col>
+          </v-row>
+          <v-row class="flex-row align-center">
+            <h3 class="mr-4">
+              Size:
+            </h3>
+            <v-col cols="12" sm="6" md="4">
+              <v-select
+                label="Color"
+                :items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
+              />
+            </v-col>
+          </v-row>
+          <v-row class="mt-7">
+            <v-divider :thickness="2" />
+          </v-row>
+          <v-row cols="12" md="2" class="flex-row align-center">
+            <h3 class="mr-4">
+              Quantity
+            </h3>
+            <v-col md="2">
+              <v-text-field
+                type="number"
+              />
+            </v-col>
+            <v-btn color="primary" dense>
+              Add to card (+)
+            </v-btn>
+            <v-btn
+              plain
+            >
+              <v-icon large>
+                mdi-heart-outline
+              </v-icon>
+            </v-btn>
+          </v-row>
+          <v-row class="mb-1">
+            <v-divider :thickness="2" />
+          </v-row>
+          <v-row>
+            <v-icon class="mx-2">
+              mdi-twitter
+            </v-icon>
+            <v-icon class="mx-2">
+              mdi-facebook
+            </v-icon>
+            <v-icon class="mx-2">
+              mdi-instagram
+            </v-icon>
+          </v-row>
+        </v-col>
+      </div>
+    </div>
+  </v-container>
+</template>
+
+<script>
+export default {
+  layout: 'user',
+  data: () => {
+    return {
+      product: [],
+      slideIndex: 1
+    }
+  },
+  mounted () {
+    this.showSlides(1)
+  },
+  created () {
+    this.getProduct()
+  },
+  methods: {
+    async getProduct () {
+      const resp = await this.$axios.get(`/products/detail/${this.$route.params.id}`, {
+        headers: {
+          Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+        }
+      })
+        .then(response => (this.product = response.data))
+        .catch(function (error) {
+          console.log(error)
+        })
+      console.log(resp)
+    },
+    // css gallery function
+    plusSlides (n) {
+      this.showSlides(this.slideIndex += n)
+    },
+    currentSlide (n) {
+      this.showSlides(this.slideIndex = n)
+    },
+
+    showSlides (n) {
+      let i
+      const slides = document.getElementsByClassName('mySlides')
+      const dots = document.getElementsByClassName('demo')
+      if (n > slides.length) { this.slideIndex = 1 }
+      if (n < 1) { this.slideIndex = slides.length }
+      for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = 'none'
+      }
+      for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(' active', '')
+      }
+      slides[this.slideIndex - 1].style.display = 'block'
+      dots[this.slideIndex - 1].className += ' active'
+    }
+  }
+}
+
+</script>
+
+<style scope>
+* {
+  box-sizing: border-box;
+}
+
+/* Position the image container (needed to position the left and right arrows) */
+.container {
+  position: relative;
+}
+
+/* Hide the images by default */
+.mySlides {
+  display: none;
+  height:100%;
+  max-width:543,41px;
+  max-height:461,6px;
+}
+
+/* Add a pointer when hovering over the thumbnail images */
+.cursor {
+  cursor: pointer;
+}
+
+/* Next & previous buttons */
+.prev,
+.next {
+  cursor: pointer;
+  position: absolute;
+  top: 40%;
+  width: auto;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover,
+.next:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+  color: #f2f2f2;
+  font-size: 12px;
+  padding: 12px 12px;
+  position: absolute;
+  top: 0;
+}
+
+/* Container for image text */
+.caption-container {
+  text-align: center;
+  background-color: #222;
+  padding: 2px 16px;
+  color: white;
+}
+
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* Six columns side by side */
+.column {
+  float: left;
+  width: 100%;
+  height: 25%;
+  max-width:109px;
+  max-height:122px;
+}
+
+/* Add a transparency effect for thumnbail images */
+.demo {
+  opacity: 0.6;
+}
+
+.active,
+.demo:hover {
+  opacity: 1;
+}
+
+.gallery-product {
+    margin-top: 40px;
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 5px;
+    justify-content: flex-end;
+}
+.c2 {
+  display: flex;
+  flex-direction: column;
+  margin-right: 20px;
+  max-width: 91px;
+  gap: 10px;
+}
+.sub-container {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+</style>

pages/login.vue

@@ -157,4 +157,9 @@ export default {
   border-radius: 1rem;
 }
 
+@media only screen and (max-width: 768px) {
+.login-form{
+  width: 80%;
+}
+}
 </style>