新增功能

about/about.css

@@ -70,7 +70,7 @@ body .arrow:hover {
 
 @media screen and (max-width: 767px) {
   #Navigation {
-    height: 15vw;
+    height: 20vw;
     position: fixed;
     z-index: 5;
     background: rgba(0, 0, 0, 0.8);
@@ -88,7 +88,8 @@ body .arrow:hover {
 
 @media screen and (max-width: 767px) {
   #Navigation #logo {
-    padding-top: 0;
+    padding-top: 5vw;
+    text-align: center;
   }
 }
 
@@ -96,6 +97,23 @@ body .arrow:hover {
   width: 120px;
 }
 
+#Navigation #arrow-left {
+  padding-left: 5vw;
+  padding-top: 8vw;
+}
+
+@media screen and (min-width: 1025px) {
+  #Navigation #arrow-left {
+    display: none;
+  }
+}
+
+#Navigation #arrow-left img {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 26px;
+}
+
 #Navigation #link {
   text-align: right;
   padding: 1.5vw 3vw;

about/about.scss

@@ -58,7 +58,7 @@ body {
         height: 8vw;
     }
     @media screen and(max-width:$moblie) {
-        height: 15vw;
+        height: 20vw;
         position: fixed;
         z-index: 5;
 
@@ -71,15 +71,28 @@ body {
 
     //    rwd要注意高度
     #logo {
+        
         padding-top: 0.5vw;
         @media screen and(max-width:$moblie) {
-            padding-top: 0;
+            padding-top: 5vw;
+            text-align: center;
         }
 
         img {
             width: 120px;
         }
     }
+    #arrow-left{
+        padding-left:5vw;
+        padding-top: 8vw;
+        @media screen and(min-width:$desktop) {
+            display: none;
+        }
+        img {
+            object-fit: cover;
+            width: 26px;
+        }
+    }
     #link {
         text-align: right;
         padding: 1.5vw 3vw;

about/goto2.js

@@ -376,4 +376,86 @@ $("*").each(function (index, element) {
       
 //     });
 // }
-// showItem2();
+// showItem2();
+
+$.fn.serializeObject = function () {
+    var o = {};
+    var a = this.serializeArray();
+    o["id"] = 0;
+    o["time_stamp"] = "";
+    $.each(a, function () {
+      if (o[this.name]) {
+        if (!o[this.name].push) {
+          o[this.name] = [o[this.name]];
+        }
+        o[this.name].push(this.value || '');
+      } else {
+        o[this.name] = this.value || '';
+      }
+    });
+  
+    return o;
+  };
+  
+  $(".contact-form1").submit(function (e) {
+    /*	var formRef = $('#form1').serializeArray();
+      var jsonString = JSON.stringify(formRef);*/
+    var jsonInfo = $('.contact-form1').serializeObject();
+    var jsonString = JSON.stringify(jsonInfo);
+    console.log(jsonString);
+    $.ajax({
+      type: 'POST',
+      url: 'https://go.hhh.com.tw:8002/deco_request_detail',
+      data: jsonString,
+      dataType: 'json',
+     
+      success: function (data) {
+        console.log('送出成功: ' + data);
+        if (data == 0) {
+          alert("送出成功");
+        } else if (data == 1) {
+          alert("此email已填過表單");
+        } else if (data == 2) {
+          alert("此phone已填過表單");
+        } else if (data == 3) {
+          alert("此email、phone已填過表單");
+        }
+        location.href ="./index_complete_line.html"; 
+      },
+  
+      beforeSend: function () {
+        console.log('beforeSend');
+      },
+      complete: function () {
+        console.log('complete');
+  
+      },
+  
+      error: function (jqXHR, textStatus, errorThrown) {
+        console.log(JSON.stringify(jqXHR));
+        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+        console.log('送出失敗: ' + jqXHR.responseText);
+        alert("送出失敗");
+      }
+    });
+  
+    return false;
+  });
+
+  $(function() {
+    var dateToday = new Date(); 
+    //jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext
+    $(".datepicker").datepicker({
+      //顯示上個月日期 及下個月日期 ，但是不可選的。
+      //default:false
+      showOtherMonths : true,
+      // 設置當沒有上一個/下一個可選擇的情況下，隱藏掉相應的按鈕。（默認為不可用）
+      //配合有設定最大最小時使用
+      //default:false
+      hideIfNoPrevNext : true,
+  
+      minDate : dateToday ,
+      //  設置一個最大的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），
+      //或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
+    });
+  });

about/index.html

@@ -14,7 +14,7 @@
 
 
 
-
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
@@ -25,10 +25,14 @@
 <body id="top2">
     <section id="Navigation" class="container-fluid" style="padding:0;margin: 0;">
         <div id="nav" class="row">
-            <div id="logo" class=" col-md-2 col-lg-3">
+            <div id="arrow-left" class="col-2 col-lg-3">
+                <a href="../index.html"> <img class="img-fluid" src="../img/004-left-arrow.svg" alt=""></a>
+            </div>
+            <div id="logo" class="col-8 col-lg-3">
                 <a href="https://hhh.com.tw/"> <img src="../img/nav/logo-main-1-1.webp" alt=""></a>
             </div>
-            <div id="link" class="col-md-10 col-lg-9">
+            
+            <div id="link" class="col-0 col-lg-9">
                 <a href="https://line.me/ti/p/%40ovs4341s">
                     <img src="../img/nav/line.png" alt="幸福空間Line" class="" width="20" height="20">
                 </a>

goto.js

@@ -169,12 +169,12 @@ console.log(28);
 
 
 
-function funcTest5() { 
+function funcTest5() {
   $.ajax({
     method: "GET",
     url: "designer4.json",
     dataType: "json",
-    async:false,
+    async: false,
   })
     .done(function (msg) {
       console.log(msg);
@@ -185,85 +185,86 @@ function funcTest5() {
       console.log(msg.length);
       // temp初始化
       for (var i = 0; i < msg.length; i++) {
-        temp[i]=msg[i].id
+        temp[i] = msg[i].id
       }
-      templength=temp.length;
+      templength = temp.length;
     });
-    
+
 
 }
 
-var templength =0;
+var templength = 0;
 var des1 = [];
 var des2 = [];
 var temp = [];
-var numb1=[];
-funcTest5(); 
+var numb1 = [];
+funcTest5();
 funcTest4();
-    
+
 
 function funcTest4() {
-   for (var j = 0; j < templength; j++) {
-     des1[j]=temp[j]
+  for (var j = 0; j < templength; j++) {
+    des1[j] = temp[j]
   }
   console.log(des1)
-  for (var j = 0; j < des1.length-1; j++) {
-    des2[j]=des1[j]
+  for (var j = 0; j < des1.length - 1; j++) {
+    des2[j] = des1[j]
   }
-  numb1[0]=des1[des1.length-1];
-  for(var j=0; j<des1.length-1;j++){
-   numb1[j+1]=des2[j];
+  numb1[0] = des1[des1.length - 1];
+  for (var j = 0; j < des1.length - 1; j++) {
+    numb1[j + 1] = des2[j];
   }
 
   for (var j = 0; j < numb1.length; j++) {
-    temp[j]=numb1[j];
+    temp[j] = numb1[j];
   }
   console.log(temp);
 
-  
+
   var desBanner = '';
   var MobBanner = '';
   var bodyBannerDes = '';
   var DesignerContent = '';
   for (var i = 0; i < temp.length; i++) {
-      var deslist=0; 
-      var deslist2=0;
-      deslist=get_data(temp[i]); 
-      deslist2=get_data(temp[0]);
-      DesignerContent += ' \
+    var deslist = 0;
+    var deslist2 = 0;
+    deslist = get_data(temp[i]);
+    deslist2 = get_data(temp[0]);
+    DesignerContent += ' \
             <div id="'+ deslist.id + '" class="secimg col-4  col-lg-2 mx-0 px-0 border-0"><a  href="./about/index.html?id=' + deslist.id + '"><img class="img-fluid"\
               src="'+ deslist.Designerimg + '"\
               alt="">\
               <div class="sec02-p-m p-1 mt-1 text-center">\
-              <p class="my-0">'+deslist.WorkName + '</p>\
+              <p class="my-0">'+ deslist.WorkName + '</p>\
               <p>'+ deslist.DesignerName + '</p>\
               </div>\
               </a>\
             </div>';
 
-            
-            
-            
-            
-          }
-          desBanner += ' \
+
+
+
+
+  }
+  desBanner += ' \
           <div class="banner-des row vertical align-items-end px-0 mx-0">\
             <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
             <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
             </div>\
             <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
-              <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '"><div class="banner1-1" style="font-weight: 900;">' +deslist2.WorkName + '</div>\
+              <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '"><div class="banner1-1" style="font-weight: 900;">' + deslist2.WorkName + '</div>\
                 <p><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
               </a>\
               <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ deslist2.TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
-              <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
+              <button type="button" id="'+ deslist2.id + '" data-info="' + deslist2.id + '" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
             </div>\
             <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
-            <a class="desbutton" data-info="'+ deslist2.id + '" href="./about/index.html?id='+ deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
+            <a class="desbutton" data-info="'+ deslist2.id + '" href="./about/index.html?id=' + deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
             </div>\
         </div>';
 
-         MobBanner += ' \
+
+  MobBanner += ' \
           <div class="banner-m row vertical align-items-end px-0 mx-0">\
           <div class="bannerm-0 col-12 my-5 px-0">\
           <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
@@ -277,47 +278,49 @@ function funcTest4() {
           <p class=""><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
           </a>\
           <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ deslist2.TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
-          <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
+          <button type="button" id="'+ deslist2.id + '" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
           </div>\
         </div > ';
 
-       bodyBannerDes += ' \
+  bodyBannerDes += ' \
         <img class="banner-img img-fluid" id="img_id"  src="'+ deslist2.workimg[0].img + '" alt="">\
        ';
-    
-    $('.banner-des').html(desBanner);
-    $('.banner-m').html(MobBanner);
-    $('#bannerdes-img').html(bodyBannerDes);      
-    $('.sec01-designer').html(DesignerContent);
-    console.log(deslist2);
-
-  
+
+  $('.banner-des').html(desBanner);
+  $('.banner-m').html(MobBanner);
+  $('#bannerdes-img').html(bodyBannerDes);
+  $('.sec01-designer').html(DesignerContent);
+  console.log(deslist2);
+
+
 }
 
 
 
 function get_data(id) {
-  var A=[];
+  var A = [];
   $.ajax({
-      method: "GET",
-      url: "../designer4.json",
-      dataType: "json",
-      async:false,
+    method: "GET",
+    url: "../designer4.json",
+    dataType: "json",
+    async: false,
   })
-      .done(function (msg) {
-          for (var i = 0; i < msg.length; i++) {
-              if (msg[i].id == id) {
-                A =msg[i]
-              }
-          }
-      });
-     
-      return A
+    .done(function (msg) {
+      for (var i = 0; i < msg.length; i++) {
+        if (msg[i].id == id) {
+          A = msg[i]
+        }
+      }
+    });
+
+  return A
 }
 
 
 
-setInterval("funcTest4()", 1000*10);
+setInterval("funcTest4()", 1000 * 10);
+
+
 
 
 
@@ -527,7 +530,7 @@ $(".contact-form1").submit(function (e) {
     url: 'https://go.hhh.com.tw:8002/deco_request_detail',
     data: jsonString,
     dataType: 'json',
-   
+
     success: function (data) {
       console.log('送出成功: ' + data);
       if (data == 0) {
@@ -539,7 +542,7 @@ $(".contact-form1").submit(function (e) {
       } else if (data == 3) {
         alert("此email、phone已填過表單");
       }
-      location.href ="./index_complete_line.html"; 
+      location.href = "./index_complete_line.html";
     },
 
     beforeSend: function () {
@@ -559,4 +562,29 @@ $(".contact-form1").submit(function (e) {
   });
 
   return false;
+});
+$(function () {
+  var dateToday = new Date();
+  //jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext
+  $(".datepicker").datepicker({
+    //顯示上個月日期 及下個月日期 ，但是不可選的。
+    //default:false
+    showOtherMonths: true,
+    // 設置當沒有上一個/下一個可選擇的情況下，隱藏掉相應的按鈕。（默認為不可用）
+    //配合有設定最大最小時使用
+    //default:false
+    hideIfNoPrevNext: true,
+
+    minDate: dateToday,
+    //  設置一個最大的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），
+    //或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
+  });
+});
+
+$(".btn").click(function () {
+  var desid =$(this).data("info");
+  console.log(desid);
+  // var desid2=String(desid);
+  // console.log(desid2);
+  $("#version").html(desid);
 });

img/004-left-arrow.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 330 330" style="enable-background:new 0 0 330 330;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g id="XMLID_8_">
+	<path id="XMLID_9_" class="st0" d="M205.6,74.4c-5.9-5.9-15.4-5.9-21.2,0l-80,80c-2.8,2.8-4.4,6.6-4.4,10.6c0,4,1.6,7.8,4.4,10.6
+		l80,80c2.9,2.9,6.8,4.4,10.6,4.4s7.7-1.5,10.6-4.4c5.9-5.9,5.9-15.4,0-21.2L136.2,165l69.4-69.4C211.5,89.7,211.5,80.3,205.6,74.4z
+		"/>
+	<path id="XMLID_10_" class="st0" d="M165,0C74,0,0,74,0,165s74,165,165,165s165-74,165-165S256,0,165,0z M165,300
+		c-74.4,0-135-60.6-135-135S90.6,30,165,30s135,60.6,135,135S239.4,300,165,300z"/>
+</g>
+</svg>

index.html

@@ -11,11 +11,12 @@
     <meta property="og:site_name" content=":::幸福空間::: 2021 觀眾最愛設計師 | 滿足你期待回家的夢想推手" />
     <title>:::幸福空間::: 2021 觀眾最愛設計師 | 滿足你期待回家的夢想推手</title>
 
-
+   
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
     <link rel="stylesheet" href="./style.css">
 </head>
 
@@ -458,7 +459,7 @@
                                     <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
                                 </div>
                                 <form class="contact-form1">
-                                    <input type="hidden" name="version" id="version" value="">
+                                    <input class="d-none"  name="version" id="version" value="">
                                     <div id="contact-form" name="myForm">
                                         <div class="row">
                                             <div id="form-left" class="col-lg-5">

style.css

@@ -84,6 +84,7 @@ body .arrow:hover {
 @media screen and (max-width: 767px) {
   #Navigation #logo {
     padding-top: 0;
+    text-align: center;
   }
 }
 

style.scss

@@ -72,6 +72,7 @@ body {
         padding-top: 0.5vw;
         @media screen and(max-width:$moblie) {
             padding-top: 0;
+            text-align: center;
         }
 
         img {