UPDATE: discount section (c901a44)

- Add lazy-loading.[c901a44] - Add a hover animation.[c901a44] - Ensure that each image is unique.[c901a44] - Fix the image search keyword. #3[b579f49, c901a44] ------------------------------------------------------------------------ modified: user/discount.php modified: user/slider.php modified: user/style/discount.scss
siMobin · Oct 22, 2023 · 2d40bc4 · 2d40bc4
1 parent e875326
commit 2d40bc4
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/user/discount.php b/user/discount.php
@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="./style/discount.css">
-
 <?php
 ////////////////// cost configuration ////////////////////
 // Read the JSONC configuration file
@@ -22,21 +20,43 @@
 $round_trip_discount  = $config['round_trip_discount'];
 ///////////////////////////////////////////////////////////////
 
-$imageCategories = ["Airport Terminal", "Tourist Attractions", "Famous Places", "Travel Destinations", "Scenic Views", "Airport Aerial View", "Airport Building", "beach", "sea", "sea beach"];
+// Image keyword
+$imageCategories = ["resort", "hotel", "motel", "city", "Mountain", "lake", "Airport", "hill", "Travel", "Private Jet", "beach", "sea", "sea beach", "visiting spots"];
 ?>
+
+<link rel="stylesheet" href="./style/discount.css">
 <div class="discount">
   <div class="hexagon-gallery">
-    <?php for ($i = 1; $i <= 6; $i++) {
-      $randomCategory = $imageCategories[array_rand($imageCategories)];
-      $imageURL = "https://source.unsplash.com/600x300/?$randomCategory&category=visitingSpot&orientation=landscape";
+    <?php
+    $usedCategories = []; // Store used categories
+    for ($i = 1; $i <= 6; $i++) {
+      $randomCategory = getRandomCategory($imageCategories, $usedCategories);
+      array_push($usedCategories, $randomCategory); // Add the used category
+      $imageURL = "https://source.unsplash.com/900x900/?$randomCategory&category=visitingSpot&orientation=squre";
     ?>
+
       <div class="hex">
-        <img src="<?php echo $imageURL ?>" alt="Hexagon Image <?php echo $i; ?>">
+        <img src="<?php echo $imageURL; ?>" alt="<?php echo $i; ?>" loading="lazy">
       </div>
     <?php } ?>
+
   </div>
   <div class="text">
     <h1>Exclusive Offer <span><?php echo $discount . "%"; ?></span> Discount</h1>
     <h1>Round Trip Offer <span><?php echo $round_trip_discount . "%"; ?></span> Discount</h1>
   </div>
-</div>
+</div>
+
+<!-- ensure that each image is unique -->
+<?php
+function getRandomCategory($categories, $usedCategories)
+{
+  $remainingCategories = array_diff($categories, $usedCategories);
+  if (empty($remainingCategories)) {
+    // If all categories are used, reset the used categories array
+    $usedCategories = [];
+    $remainingCategories = $categories;
+  }
+  return $remainingCategories[array_rand($remainingCategories)];
+}
+?>
diff --git a/user/slider.php b/user/slider.php
@@ -54,7 +54,7 @@
             <div class="swiper-wrapper">
                 <?php
                 // Array of image categories
-                $imageCategories = ["Airport Terminal", "Tourist Attractions", "Famous Places", "Travel Destinations", "Scenic Views","Cultural Landmarks","Airport Control Tower","Airport Aerial View","Airport Building"];
+                $imageCategories = ["resort", "hotel", "motel", "city", "Mountain", "lake", "Airport", "hill", "Travel", "Private Jet", "beach", "sea", "sea beach", "visiting spots"];
 
                 foreach ($destinations as $destination) {
                     // Select a random image category from the array

diff --git a/user/style/discount.scss b/user/style/discount.scss
@@ -36,13 +36,22 @@
     position: relative;
     width: 120px;
     height: 130px;
-    background-color: #424242;
     -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 
     img {
       width: 100%;
       object-fit: cover;
+      background-image: url(../image/loading.svg), radial-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      transition: scale 60s linear;
+
+      &:hover {
+        scale: 3;
+        cursor: wait;
+      }
     }
 
     &:nth-child(1) {