輪播測試

about/about.css

@@ -912,13 +912,14 @@ body .arrow:hover {
 }
 
 #light-box #form-lightbox {
-  width: 70vw;
   margin: 0 auto;
+  padding: 15px;
 }
 
 @media screen and (max-width: 767px) {
   #light-box #form-lightbox {
-    width: 80vw;
+    width: 85vw;
+    padding: 0px;
   }
 }
 
@@ -966,10 +967,19 @@ body .arrow:hover {
 }
 
 #light-box #form-lightbox .contact-text .text-p {
+  margin-left: 15px;
+  padding-left: 12px;
   font-size: 16px;
   font-weight: 600;
 }
 
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-text .text-p {
+    margin-left: 0px;
+    padding-left: 0px;
+  }
+}
+
 @media screen and (max-width: 350px) {
   #light-box #form-lightbox .contact-text .text-p {
     font-size: 14px;
@@ -984,7 +994,7 @@ body .arrow:hover {
   margin-top: 10px;
 }
 
-#light-box #form-lightbox .contact-form1 #contact-form .col-lg-2 .divider {
+#light-box #form-lightbox .contact-form1 #contact-form .col-lg-1 .divider {
   position: relative;
   width: 1px;
   height: 100%;

about/about.scss

@@ -271,6 +271,7 @@ body {
                     padding-right: 5px;
                     padding-left: 7px;
                 }
+               
                 .btn{
                     color:#fff;
                     width: 55px;
@@ -705,10 +706,11 @@ body {
 #light-box{
 
     #form-lightbox{
-        width: 70vw;
         margin: 0 auto;
+        padding: 15px;
         @media screen and(max-width:$moblie) {
-            width: 80vw;
+            width: 85vw;
+            padding: 0px;
         }
         .form-title {
             margin: 0 auto;
@@ -738,10 +740,15 @@ body {
         .contact-text {
             margin: 0 auto;
    
-
             .text-p {
+                margin-left: 15px;
+                padding-left: 12px;
                 font-size: 16px;
                 font-weight: 600;
+                @media screen and(max-width:$moblie) {
+                    margin-left: 0px;
+                    padding-left: 0px;
+                }
                 @media screen and(max-width:350px) {
                     font-size: 14px;
                 }
@@ -752,7 +759,7 @@ body {
         margin: 0 auto;
             #contact-form {
                 margin-top: 10px;
-                .col-lg-2{
+                .col-lg-1{
                    .divider{
                        position: relative;
                        width: 1px;

about/goto2.js

@@ -6,42 +6,41 @@ function getParameterByName(name, url = window.location.href) {
     if (!results[2]) return '';
     return decodeURIComponent(results[2].replace(/\+/g, ' '));
 }
-$(document).ready(function () {
-    var id = getParameterByName('id');
-    console.log(id);
-
-    function get_data() {
-        $.ajax({
-            method: "GET",
-            url: "../designer4.json",
-            dataType: "json",
-
-        })
-            .done(function (msg) {
-                for (var i = 0; i < msg.length; i++) {
-                    if (msg[i].id == id) {
-                        var aboutContent = '';
-                        var aboutInt = '';
-                        var aboutImg = '';
-                        var aboutViedeo = '';
-                        var aboutMethod = '';
-                        var aboutIntPhone = '';
-                        var bodyBannerDes = '';
-                        var webtitle='';
-                        console.log(msg[i]);
-
-                        // var res = msg.length;
-                        // console.log(res);
-                        // const limit = res;
-                        // 公司簡介
-                        aboutContent += ' \
+
+var id = getParameterByName('id');
+console.log(id);
+function get_data() {
+    $.ajax({
+        method: "GET",
+        url: "../designer4.json",
+        dataType: "json",
+
+    })
+        .done(function (msg) {
+            for (var i = 0; i < msg.length; i++) {
+                if (msg[i].id == id) {
+                    var aboutContent = '';
+                    var aboutInt = '';
+                    var aboutImg = '';
+                    var aboutViedeo = '';
+                    var aboutMethod = '';
+                    var aboutIntPhone = '';
+                    var bodyBannerDes = '';
+                    var webtitle = '';
+                    console.log(msg[i]);
+
+                    // var res = msg.length;
+                    // console.log(res);
+                    // const limit = res;
+                    // 公司簡介
+                    aboutContent += ' \
                 <div class="row px-0 mx-0">\
                     <div class="condition col-12 col-lg-4 bg-white">\
                         <h1 class="fs-3 pb-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>接案條件 condition</h1>\
                         <table class="table">\
                             <tbody>\
                                 <tr>\
-                                    <th class="w-25" scope="row">接案區域</th>\
+                                    <th id="title-test" class="w-25" scope="row">接案區域</th>\
                                     <td>\
                                         '+ msg[i].WorkLoc + '\
                                     </td>\
@@ -100,7 +99,7 @@ $(document).ready(function () {
                                 <tr>\
                                 <th scope="row" class="">免付費電話／</th>\
                                     <td class="">\
-                                    <a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"> '+ msg[i].TollFreeCall + '</a>\
+                                    <a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"> ' + msg[i].TollFreeCall + '</a>\
                                     </td>\
                                 </tr>\
                                 <tr>\
@@ -144,7 +143,7 @@ $(document).ready(function () {
                     </div>\
                 </div >';
 
-                        aboutInt += ' \
+                    aboutInt += ' \
                         <div class="banner-des row vertical align-items-end">\
                             <div class="banner-3 col-2 pe-0">\
                                 <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
@@ -155,14 +154,14 @@ $(document).ready(function () {
                                         <div style="font-weight: 900;" class="fs-2">'+ msg[i].WorkName + '</div>\
                                         <p><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
                                         <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"><img class="" src="../img/002-phone-call.svg" alt=""></a>\</button>\
-                                        <button type="button" class="mesg btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="../img/001-blogging.svg" alt=""></button>\
+                                        <button type="button" data-info="' + msg[i].id + '" class="mesg 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-3 row justify-content-end px-0">\
                                     </div>\
                                 </div>\
                             </div> \
                         </div>';
-                        aboutIntPhone += ' \
+                    aboutIntPhone += ' \
                         <div class="banner-m row vertical align-items-end px-0 mx-0">\
                         <div class="bannerm-0 col-12 my-5 px-0">\
                         <a href="../index.html"><img class="img-fluid" src="../img/banner/banner-mobile.png" alt=""></a>\
@@ -174,13 +173,13 @@ $(document).ready(function () {
                                 <div class="banner1-1 pt-3 pb-1" style="font-weight: 900;">'+ msg[i].WorkName + '</div>\
                                 <p class=""><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
                                 <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[i].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="'+ msg[i].id + '" data-info="' + msg[i].id + '" class="mesg btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="../img/001-blogging.svg" alt=""></button>\
                              </div>\
                         </div>';
 
-                     
-                        for (var j = 0; j < msg[i].workimg.length; j++) {
-                            aboutImg += ' \
+
+                    for (var j = 0; j < msg[i].workimg.length; j++) {
+                        aboutImg += ' \
                             <div class="secimg col-lg-4 mx-0 px-0">\
                             <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><img class="img-fluid" src="' + msg[i].workimg[j].img + '" alt=""></a>\
                                 <div class="sec02-p-m p-1 mt-1 text-center">\
@@ -189,20 +188,20 @@ $(document).ready(function () {
                                 </div>\
                             </div>';
 
-                        }
-                            var j =0;
-                       
-                            if (msg[i].workVideo[j]==undefined) {
-                                aboutViedeo += ' \
+                    }
+                    var j = 0;
+
+                    if (msg[i].workVideo[j] == undefined) {
+                        aboutViedeo += ' \
                                 <div id="sec05" class="sec05-row row align-items-center h-100 mx-0 w-100 px-0" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
                                 <div style="padding:20vw 0px">\
                                     <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>\
                                     <p class="align-self-center" style="color:#fff;  letter-spacing: 5px;">...敬請期待...</p>\
                                 </div>\
                             </div>';
-                            } else {
-                            for (var j = 0; j < msg[i].workVideo.length; j++) {
-                                aboutViedeo += ' \
+                    } else {
+                        for (var j = 0; j < msg[i].workVideo.length; j++) {
+                            aboutViedeo += ' \
                                 <div class="secimg col-lg-4 p-0">\
                                 <a target="_blank" href="'+ msg[i].workVideo[j].videoSrc + '"><img class="img-fluid" src="' + msg[i].workVideo[j].video + '" alt=""></a>\
                                     <div class="sec03-p-m p-1 mt-1 text-center">\
@@ -210,20 +209,20 @@ $(document).ready(function () {
                                     <a target="_blank" href="'+ msg[i].workVideo[j].videoSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/play.png" alt=""></div></a>\
                                     </div>\
                                 </div>';
-                            }
                         }
-                        var j =0;
-                        if (msg[i].workMethod[j]==undefined) {
-                            aboutMethod += ' \
+                    }
+                    var j = 0;
+                    if (msg[i].workMethod[j] == undefined) {
+                        aboutMethod += ' \
                             <div id="sec05" class="sec05-row row align-items-center h-100 mx-0 w-100 px-0" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
                             <div style="padding:20vw 0px">\
                                 <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>\
                                 <p class="align-self-center" style="color:#fff;  letter-spacing: 5px;">...敬請期待...</p>\
                             </div>\
                         </div>';
-                        } else {
-                            for (var j = 0; j < msg[i].workMethod.length; j++) {
-                                aboutMethod += ' \
+                    } else {
+                        for (var j = 0; j < msg[i].workMethod.length; j++) {
+                            aboutMethod += ' \
                                 <div class="secimg col-lg-4 p-0">\
                                 <a target="_blank" href="'+ msg[i].workMethod[j].Methodsrc + '"><img class="img-fluid" src="' + msg[i].workMethod[j].Methodimg + '" alt=""></a>\
                                 <div class="sec04-p-m p-1 mt-1 text-center">\
@@ -231,39 +230,42 @@ $(document).ready(function () {
                                     <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/arrow.png" alt=""></div></a>\
                                     </div>\
                                 </div>';
-                            }
                         }
+                    }
 
-                        bodyBannerDes += ' \
+                    bodyBannerDes += ' \
                         <img class="banner-img" id="img_id"  src="'+ msg[i].workimg[0].img + '" alt="">\
                        ';
-                       webtitle += ' \
-                       幸福空間::: 2022 觀眾最愛設計師 | 滿足你期待回家的夢想推手|'+ msg[i].DesignerName +'設計師\
+                    webtitle += ' \
+                       幸福空間::: 2022 觀眾最愛設計師 | 滿足你期待回家的夢想推手|'+ msg[i].DesignerName + '設計師\
                       ';
 
-                        $('.sec03-1').html(aboutViedeo);
-                        $('.sec02-1').html(aboutImg);
-                        $('.banner-des-about').html(aboutInt);
-                        $('.sec01').html(aboutContent);
-                        $('.sec04-1').html(aboutMethod);
-                        $('.banner-m').html(aboutIntPhone);
-                        $('#bannerdes-img').html(bodyBannerDes);
-                        $('#webtitle').html(webtitle);
-                    }
+                    $('.sec03-1').html(aboutViedeo);
+                    $('.sec02-1').html(aboutImg);
+                    $('.banner-des-about').html(aboutInt);
+                    $('.sec01').html(aboutContent);
+                    $('.sec04-1').html(aboutMethod);
+                    $('.banner-m').html(aboutIntPhone);
+                    $('#bannerdes-img').html(bodyBannerDes);
+                    $('#webtitle').html(webtitle);
                 }
+            }
 
-            });
-    }
-
-    get_data();
-
-
+        });
+}
+get_data();
+$(document).on("click", ".mesg", function(event) {
+    console.log(1);
+    var desid = $(this).data("info");
+    console.log(desid);
+    $("#version").val(desid);
 });
+    
 
 $(".arrow").hide();
 $(window).scroll(function () {
     var y1 = window.scrollY;
-    if (y1> 100) {
+    if (y1 > 100) {
         $(".arrow").show();
     } else {
         $(".arrow").hide();
@@ -271,113 +273,6 @@ $(window).scroll(function () {
 
 });
 
-
-// $(window).scroll(function () {
-//     var y = window.scrollY;
-
-//     if (y > 550) {
-//         $(".nav").addClass("sfixed");
-//     } else {
-//         $(".nav").removeClass("sfixed");
-//     }
-
-// });
-if (jQuery(window).width() < 767) {
-
-    $(window).scroll(function () {
-        var y = window.scrollY;
-    
-        if (y > 550) {
-            $(".nav").css({"position":"fixed","top":"38px","z-index":"10"});
-        } else {
-            $(".nav").css({"position":"static"});
-        }
-    
-    });
-}
-
-// $(document).ready(function(){
-//     $(window).resize(function() {
-//         wdth=$(window).width();
-//       console.log(wdth)
-//     });
-// });
-$("*").each(function (index, element) {
-    // 此元素被點選後執行
-    $(this).click(function (e) {
-      // 取得被點選元素的屬性：data-gt-target
-      var target = $(this).attr("data-gt-target");
-      var duration = $(this).attr("data-gt-duration");
-      var offset = $(this).attr("data-gt-offset");
-  
-      // JS 語法：判斷式
-      // if (條件) {程式區塊}
-      // 當條件成立，會執行程式區塊
-  
-      // 如果 目標有資料 才會執行 { } 內的程式
-      // 避免出現 undefine (未定義 - 不存在的資料)
-      if (target) {
-        //console.log("目標：" + target);
-        //console.log("時間：" + duration);
-        //console.log("位移：" + offset);
-  
-        // 上方位置 = 目標區塊.位移().上方位置
-        var top = $(target).offset().top;
-        //console.log("要前往元素的上方位置：" + top);
-  
-        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
-        // parseInt() 將文字轉為數字
-  
-        $("html").stop().animate({
-          scrollTop: top - offset
-        }, parseInt(duration));
-      }
-    });
-  });
-  
-  // 避免動畫與使用者滾輪衝突
-  // html 在滾動滾輪時 停止 html 所有效果
-  $("html").on("mousewheel", function () {
-    $("html").stop();
-  });
-
-  function showItem(){
-      $(".nav-item1").click(function(){
-        $(this).addClass('nav-item-achive');
-        $( ".nav-item2").removeClass('nav-item-achive');
-        $( ".nav-item3").removeClass('nav-item-achive');
-        $( ".nav-item4").removeClass('nav-item-achive');
-      });
-      $(".nav-item2").click(function(){
-        $( ".nav-item2").addClass('nav-item-achive');
-        $( ".nav-item1").removeClass('nav-item-achive');
-        $( ".nav-item3").removeClass('nav-item-achive');
-        $( ".nav-item4").removeClass('nav-item-achive');
-      });
-      $(".nav-item3").click(function(){
-        $( ".nav-item3").addClass('nav-item-achive');
-        $( ".nav-item1").removeClass('nav-item-achive');
-        $( ".nav-item2").removeClass('nav-item-achive');
-        $( ".nav-item4").removeClass('nav-item-achive');
-      });
-      $(".nav-item4").click(function(){
-        $( ".nav-item4").addClass('nav-item-achive');
-        $( ".nav-item1").removeClass('nav-item-achive');
-        $( ".nav-item2").removeClass('nav-item-achive');
-        $( ".nav-item3").removeClass('nav-item-achive');
-      });
-  }
-  showItem();
-
-//   function showItem2(){
-//     $(".nav-item2").click(function(){
-//         $(this).addClass('nav-item-achive');
-//         $(this).siblings().removeClass('nav-item-achive');
-      
-//     });
-// }
-// showItem2();
-
 $.fn.serializeObject = function () {
     var o = {};
     var a = this.serializeArray();
@@ -408,7 +303,7 @@ $.fn.serializeObject = function () {
       url: 'https://go.hhh.com.tw:8002/deco_request_detail',
       data: jsonString,
       dataType: 'json',
-     
+  
       success: function (data) {
         console.log('送出成功: ' + data);
         if (data == 0) {
@@ -420,7 +315,7 @@ $.fn.serializeObject = function () {
         } else if (data == 3) {
           alert("此email、phone已填過表單");
         }
-        location.href ="./index_complete_line.html"; 
+        location.href = "./index_complete_line.html";
       },
   
       beforeSend: function () {
@@ -442,20 +337,129 @@ $.fn.serializeObject = function () {
     return false;
   });
 
-  $(function() {
-    var dateToday = new Date(); 
+// $(window).scroll(function () {
+//     var y = window.scrollY;
+
+//     if (y > 550) {
+//         $(".nav").addClass("sfixed");
+//     } else {
+//         $(".nav").removeClass("sfixed");
+//     }
+
+// });
+if (jQuery(window).width() < 767) {
+
+    $(window).scroll(function () {
+        var y = window.scrollY;
+
+        if (y > 550) {
+            $(".nav").css({ "position": "fixed", "top": "38px", "z-index": "10" });
+        } else {
+            $(".nav").css({ "position": "static" });
+        }
+
+    });
+}
+
+// $(document).ready(function(){
+//     $(window).resize(function() {
+//         wdth=$(window).width();
+//       console.log(wdth)
+//     });
+// });
+$("*").each(function (index, element) {
+    // 此元素被點選後執行
+    $(this).click(function (e) {
+        // 取得被點選元素的屬性：data-gt-target
+        var target = $(this).attr("data-gt-target");
+        var duration = $(this).attr("data-gt-duration");
+        var offset = $(this).attr("data-gt-offset");
+
+        // JS 語法：判斷式
+        // if (條件) {程式區塊}
+        // 當條件成立，會執行程式區塊
+
+        // 如果 目標有資料 才會執行 { } 內的程式
+        // 避免出現 undefine (未定義 - 不存在的資料)
+        if (target) {
+            //console.log("目標：" + target);
+            //console.log("時間：" + duration);
+            //console.log("位移：" + offset);
+
+            // 上方位置 = 目標區塊.位移().上方位置
+            var top = $(target).offset().top;
+            //console.log("要前往元素的上方位置：" + top);
+
+            // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
+            // parseInt() 將文字轉為數字
+
+            $("html").stop().animate({
+                scrollTop: top - offset
+            }, parseInt(duration));
+        }
+    });
+});
+
+// 避免動畫與使用者滾輪衝突
+// html 在滾動滾輪時 停止 html 所有效果
+$("html").on("mousewheel", function () {
+    $("html").stop();
+});
+
+function showItem() {
+    $(".nav-item1").click(function () {
+        $(this).addClass('nav-item-achive');
+        $(".nav-item2").removeClass('nav-item-achive');
+        $(".nav-item3").removeClass('nav-item-achive');
+        $(".nav-item4").removeClass('nav-item-achive');
+    });
+    $(".nav-item2").click(function () {
+        $(".nav-item2").addClass('nav-item-achive');
+        $(".nav-item1").removeClass('nav-item-achive');
+        $(".nav-item3").removeClass('nav-item-achive');
+        $(".nav-item4").removeClass('nav-item-achive');
+    });
+    $(".nav-item3").click(function () {
+        $(".nav-item3").addClass('nav-item-achive');
+        $(".nav-item1").removeClass('nav-item-achive');
+        $(".nav-item2").removeClass('nav-item-achive');
+        $(".nav-item4").removeClass('nav-item-achive');
+    });
+    $(".nav-item4").click(function () {
+        $(".nav-item4").addClass('nav-item-achive');
+        $(".nav-item1").removeClass('nav-item-achive');
+        $(".nav-item2").removeClass('nav-item-achive');
+        $(".nav-item3").removeClass('nav-item-achive');
+    });
+}
+showItem();
+
+//   function showItem2(){
+//     $(".nav-item2").click(function(){
+//         $(this).addClass('nav-item-achive');
+//         $(this).siblings().removeClass('nav-item-achive');
+
+//     });
+// }
+// showItem2();
+
+
+$(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')。
+        //顯示上個月日期 及下個月日期 ，但是不可選的。
+        //default:false
+        showOtherMonths: true,
+        // 設置當沒有上一個/下一個可選擇的情況下，隱藏掉相應的按鈕。（默認為不可用）
+        //配合有設定最大最小時使用
+        //default:false
+        hideIfNoPrevNext: true,
+
+        minDate: dateToday,
+        //  設置一個最大的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），
+        //或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
     });
-  });
+});
+
+

about/index.html

@@ -14,11 +14,12 @@
 
 
 
-    <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" />
     <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="./about.css">
 </head>
 
@@ -371,6 +372,180 @@
             </div>
         </div>
     </section>
+    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl">
+            <div class="modal-content">
+                <div class="modal-header border-0">
+                    <h5 class="modal-title" id="exampleModalLabel"></h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div id="light-box">
+                        <div id="form-lightbox">
+                            <div class="form-title">
+                                <h1>已經服務超過<span>14392</span>個家庭</h1>
+                                <h1>打造夢想中的完美居家生活</h1>
+                                <h1>即刻啟動!</h1>
+                            </div>
+                            <div class="contact-text">
+                                <div class="text-p">請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone1"
+                                        style="color: #ee751b; font-weight:900;"> 0800-366-086</span></div>
+                                <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
+                            </div>
+                            <form class="contact-form1">
+                                <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">
+                                            <select name="loc" id="loc" required>
+                                                <option value="" disabled selected="selected">地區</option>
+                                                <option class="option">基隆市</option>
+                                                <option class="option">台北市</option>
+                                                <option class="option">新北市</option>
+                                                <option class="option">桃園市</option>
+                                                <option class="option">新竹縣</option>
+                                                <option class="option">新竹市</option>
+                                                <option class="option">苗栗縣</option>
+                                                <option class="option">台中市</option>
+                                                <option class="option">彰化縣</option>
+                                                <option class="option">南投縣</option>
+                                                <option class="option">雲林縣</option>
+                                                <option class="option">嘉義縣</option>
+                                                <option class="option">嘉義市</option>
+                                                <option class="option">台南市</option>
+                                                <option class="option">高雄市</option>
+                                                <option class="option">屏東縣</option>
+                                                <option class="option">宜蘭縣</option>
+                                                <option class="option">花蓮縣</option>
+                                                <option class="option">台東縣</option>
+                                                <option class="option">澎湖縣</option>
+                                            </select>
+                                            <select name="h_class" id="type" required>
+                                                <option value="" disabled selected="selected">房屋類型</option>
+                                                <option class="option">預售屋</option>
+                                                <option class="option">中古屋</option>
+                                                <option class="option">新成屋</option>
+                                                <option class="option">毛胚屋</option>
+                                                <option class="option">自地自建</option>
+                                            </select>
+                                            <select name="type" id="modal" required>
+                                                <option value="" disabled selected="selected">房屋型態</option>
+                                                <option class="option">透天</option>
+                                                <option class="option">電梯華廈</option>
+                                                <option class="option">公寓</option>
+                                                <option class="option">平房</option>
+                                                <option class="option">民宿</option>
+                                                <option class="option">商空</option>
+                                                <option class="option">其他</option>
+                                            </select>
+                                            <select name="budget" id="budget" required>
+                                                <option value="" disabled selected="selected">裝修預算</option>
+                                                <option class="option">50~100萬</option>
+                                                <option class="option">100~200萬</option>
+                                                <option class="option">200~300萬</option>
+                                                <option class="option">300萬~400萬</option>
+                                                <option class="option">400~500萬</option>
+                                                <option class="option">500萬以上</option>
+                                            </select>
+                                            <input name="size" type="text" id="square" placeholder="請輸入坪數" required>
+                                            <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
+                                                <option class="option" value="1">1房</option>
+                                                <option class="option" value="2" selected>2房</option>
+                                                <option class="option" value="3">3房</option>
+                                                <option class="option" value="4">4房</option>
+                                                <option class="option" value="5">5房</option>
+                                                <option class="option" value="6">6房</option>
+                                                <option class="option" value="7">7房</option>
+                                                <option class="option" value="8">8房</option>
+                                            </select>
+                                            <select name="liv_num" id="livingroom" required
+                                                style="margin-right:1.5vw">
+                                                <option class="option" value="1">1廳</option>
+                                                <option class="option" value="2" selected>2廳</option>
+                                            </select>
+                                            <select name="bath_num" id="bathroom" required>
+                                                <option class="option" value="1" selected>1衛</option>
+                                                <option class="option" value="2">2衛</option>
+                                                <option class="option" value="3">3衛</option>
+                                                <option class="option" value="4">4衛</option>
+                                                <option class="option" value="5">5衛</option>
+                                                <option class="option" value="6">6衛</option>
+                                                <option class="option" value="7">7衛</option>
+                                                <option class="option" value="8">8衛</option>
+                                            </select>
+                                            <select name="style" id="style" required>
+                                                <option value="" disabled selected="selected">風格類型</option>
+                                                <option class="option">現代風</option>
+                                                <option class="option">鄉村風</option>
+                                                <option class="option">古典風</option>
+                                                <option class="option">休閒多元</option>
+                                                <option class="option">美式風</option>
+                                                <option class="option">奢華風</option>
+                                                <option class="option">新古典</option>
+                                                <option class="option">日式禪風</option>
+                                                <option class="option">東方風</option>
+                                                <option class="option">混搭風</option>
+                                                <option class="option">前衛風</option>
+                                                <option class="option">北歐風</option>
+                                                <option class="option">工業風</option>
+                                                <option class="option">異國風</option>
+                                            </select>
+                                            <input name="prefer_date" class="datepicker" type="text" id="datepicker"
+                                                placeholder="預選裝修日期" required>
+                                        </div>
+                                        <div class="col-lg-1 my-1 my-md-0 divider-wrapper d-flex justify-content-center align-items-center">
+                                            <div class="divider"></div>
+                                        </div>
+                                        <div id="form-right" class="col-lg-5">
+                                            <hr>
+                                            <div id="fb_login">
+                                                <button id="fb-button"><img src="../img/facebook.png" alt="">
+                                                    <span id="line" style=" font-size: 30px;">｜</span>
+                                                    <p>使用fb填入信箱與姓名</p>
+                                                </button>
+                                                <span id="FB_STATUS_2"></span>
+                                            </div>
+                                            <!-- <div id="fb_login">
+                                    <fb:login-button id="fb-button" scope="public_profile,email"
+                                        onlogin="checkLoginState();" data-button-type="continue_with" data-size="large">
+                                        使用FB填入信箱與姓名
+                                    </fb:login-button>
+                                    <div id="status"></div>
+                                </div> -->
+
+                                            <input type="email" name="email" id="email" placeholder="請輸入信箱"
+                                                required>
+                                            <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
+                                            <input type="text" name="phone" id="phone" placeholder="請輸入行動電話"
+                                                pattern="09\d{2}\d{6}" required>
+                                            <select name="gender" id="gender" required>
+                                                <option value="" disabled selected="selected">性別</option>
+                                                <option class="option">男</option>
+                                                <option class="option">女</option>
+                                            </select>
+                                            <div>
+
+                                                <input type="checkbox" style="margin:30px 10px;" id="checkbox"
+                                                    checked><label for="agree" style="width: 40px;">同意</label><a
+                                                    target="https://hhh.com.tw/about/privacy_policy/"
+                                                    href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                                <div class="form-btn">
+                                    <input class="btn" style="opacity: 1;" type="submit" value="送出">
+
+                                </div>
+                            </form>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     <!-- <section style="text-align: center;" class="py-4">
         <img src="../img/about/banner/return.png" alt="">
     </section> -->
@@ -589,183 +764,11 @@
 
 
         // });
+        
     </script>
     
         <!-- Modal -->
-        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-xl">
-                <div class="modal-content">
-                    <div class="modal-header border-0">
-                        <h5 class="modal-title" id="exampleModalLabel"></h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-                    <div class="modal-body">
-                        <div id="light-box">
-                            <div id="form-lightbox">
-                                <div class="form-title">
-                                    <h1>已經服務超過<span>14392</span>個家庭</h1>
-                                    <h1>打造夢想中的完美居家生活</h1>
-                                    <h1>即刻啟動!</h1>
-                                </div>
-                                <div class="contact-text">
-                                    <div class="text-p">請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone1"
-                                            style="color: #ee751b; font-weight:900;"> 0800-366-086</span></div>
-                                    <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
-                                </div>
-                                <form class="contact-form1">
-                                    <input type="hidden" name="version" id="version" value="">
-                                    <div id="contact-form" name="myForm">
-                                        <div class="row">
-                                            <div id="form-left" class="col-lg-5">
-                                                <select name="loc" id="loc" required>
-                                                    <option value="" disabled selected="selected">地區</option>
-                                                    <option class="option">基隆市</option>
-                                                    <option class="option">台北市</option>
-                                                    <option class="option">新北市</option>
-                                                    <option class="option">桃園市</option>
-                                                    <option class="option">新竹縣</option>
-                                                    <option class="option">新竹市</option>
-                                                    <option class="option">苗栗縣</option>
-                                                    <option class="option">台中市</option>
-                                                    <option class="option">彰化縣</option>
-                                                    <option class="option">南投縣</option>
-                                                    <option class="option">雲林縣</option>
-                                                    <option class="option">嘉義縣</option>
-                                                    <option class="option">嘉義市</option>
-                                                    <option class="option">台南市</option>
-                                                    <option class="option">高雄市</option>
-                                                    <option class="option">屏東縣</option>
-                                                    <option class="option">宜蘭縣</option>
-                                                    <option class="option">花蓮縣</option>
-                                                    <option class="option">台東縣</option>
-                                                    <option class="option">澎湖縣</option>
-                                                </select>
-                                                <select name="h_class" id="type" required>
-                                                    <option value="" disabled selected="selected">房屋類型</option>
-                                                    <option class="option">預售屋</option>
-                                                    <option class="option">中古屋</option>
-                                                    <option class="option">新成屋</option>
-                                                    <option class="option">毛胚屋</option>
-                                                    <option class="option">自地自建</option>
-                                                </select>
-                                                <select name="type" id="modal" required>
-                                                    <option value="" disabled selected="selected">房屋型態</option>
-                                                    <option class="option">透天</option>
-                                                    <option class="option">電梯華廈</option>
-                                                    <option class="option">公寓</option>
-                                                    <option class="option">平房</option>
-                                                    <option class="option">民宿</option>
-                                                    <option class="option">商空</option>
-                                                    <option class="option">其他</option>
-                                                </select>
-                                                <select name="budget" id="budget" required>
-                                                    <option value="" disabled selected="selected">裝修預算</option>
-                                                    <option class="option">50~100萬</option>
-                                                    <option class="option">100~200萬</option>
-                                                    <option class="option">200~300萬</option>
-                                                    <option class="option">300萬~400萬</option>
-                                                    <option class="option">400~500萬</option>
-                                                    <option class="option">500萬以上</option>
-                                                </select>
-                                                <input name="size" type="text" id="square" placeholder="請輸入坪數" required>
-                                                <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
-                                                    <option class="option" value="1">1房</option>
-                                                    <option class="option" value="2" selected>2房</option>
-                                                    <option class="option" value="3">3房</option>
-                                                    <option class="option" value="4">4房</option>
-                                                    <option class="option" value="5">5房</option>
-                                                    <option class="option" value="6">6房</option>
-                                                    <option class="option" value="7">7房</option>
-                                                    <option class="option" value="8">8房</option>
-                                                </select>
-                                                <select name="liv_num" id="livingroom" required
-                                                    style="margin-right:1.5vw">
-                                                    <option class="option" value="1">1廳</option>
-                                                    <option class="option" value="2" selected>2廳</option>
-                                                </select>
-                                                <select name="bath_num" id="bathroom" required>
-                                                    <option class="option" value="1" selected>1衛</option>
-                                                    <option class="option" value="2">2衛</option>
-                                                    <option class="option" value="3">3衛</option>
-                                                    <option class="option" value="4">4衛</option>
-                                                    <option class="option" value="5">5衛</option>
-                                                    <option class="option" value="6">6衛</option>
-                                                    <option class="option" value="7">7衛</option>
-                                                    <option class="option" value="8">8衛</option>
-                                                </select>
-                                                <select name="style" id="style" required>
-                                                    <option value="" disabled selected="selected">風格類型</option>
-                                                    <option class="option">現代風</option>
-                                                    <option class="option">鄉村風</option>
-                                                    <option class="option">古典風</option>
-                                                    <option class="option">休閒多元</option>
-                                                    <option class="option">美式風</option>
-                                                    <option class="option">奢華風</option>
-                                                    <option class="option">新古典</option>
-                                                    <option class="option">日式禪風</option>
-                                                    <option class="option">東方風</option>
-                                                    <option class="option">混搭風</option>
-                                                    <option class="option">前衛風</option>
-                                                    <option class="option">北歐風</option>
-                                                    <option class="option">工業風</option>
-                                                    <option class="option">異國風</option>
-                                                </select>
-                                                <input name="prefer_date" class="datepicker" type="text" id="datepicker"
-                                                    placeholder="預選裝修日期" required>
-                                            </div>
-                                            <div class="col-lg-2 my-1 my-md-0 divider-wrapper d-flex justify-content-center align-items-center">
-                                                <div class="divider"></div>
-                                            </div>
-                                            <div id="form-right" class="col-lg-5">
-                                                <hr>
-                                                <div id="fb_login">
-                                                    <button id="fb-button"><img src="../img/facebook.png" alt="">
-                                                        <span id="line" style=" font-size: 30px;">｜</span>
-                                                        <p>使用fb填入信箱與姓名</p>
-                                                    </button>
-                                                    <span id="FB_STATUS_2"></span>
-                                                </div>
-                                                <!-- <div id="fb_login">
-                                        <fb:login-button id="fb-button" scope="public_profile,email"
-                                            onlogin="checkLoginState();" data-button-type="continue_with" data-size="large">
-                                            使用FB填入信箱與姓名
-                                        </fb:login-button>
-                                        <div id="status"></div>
-                                    </div> -->
-
-                                                <input type="email" name="email" id="email" placeholder="請輸入信箱"
-                                                    required>
-                                                <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
-                                                <input type="text" name="phone" id="phone" placeholder="請輸入行動電話"
-                                                    pattern="09\d{2}\d{6}" required>
-                                                <select name="gender" id="gender" required>
-                                                    <option value="" disabled selected="selected">性別</option>
-                                                    <option class="option">男</option>
-                                                    <option class="option">女</option>
-                                                </select>
-                                                <div>
-
-                                                    <input type="checkbox" style="margin:30px 10px;" id="checkbox"
-                                                        checked><label for="agree" style="width: 40px;">同意</label><a
-                                                        target="https://hhh.com.tw/about/privacy_policy/"
-                                                        href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                    </div>
-                                    <div class="form-btn">
-                                        <input class="btn" style="opacity: 1;" type="submit" value="送出">
-
-                                    </div>
-                                </form>
-
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+       
 </body>
 
 </html>

goto.js

@@ -168,157 +168,219 @@ console.log(28);
 // });
 
 
-
-function funcTest5() {
-  $.ajax({
-    method: "GET",
-    url: "designer4.json",
-    dataType: "json",
-    async: false,
-  })
-    .done(function (msg) {
-      console.log(msg);
-      function shuffleArray(inputArray) {
-        inputArray.sort(() => Math.random() - 0.5);
-      }
-      shuffleArray(msg);
-      console.log(msg.length);
-      // temp初始化
-      for (var i = 0; i < msg.length; i++) {
-        temp[i] = msg[i].id
+window.onload=function(){
+  function funcTest5() {
+    $.ajax({
+      method: "GET",
+      url: "designer4.json",
+      dataType: "json",
+      async: false,
+    })
+      .done(function (msg) {
+        console.log(msg);
+        function shuffleArray(inputArray) {
+          inputArray.sort(() => Math.random() - 0.5);
+        }
+        shuffleArray(msg);
+        console.log(msg.length);
+        // temp初始化
+        for (var i = 0; i < msg.length; i++) {
+          temp[i] = msg[i].id
+        }
+       
+        templength = temp.length;
+      });
+      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 += ' \
+                <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>'+ deslist.DesignerName + '</p>\
+                  </div>\
+                  </a>\
+                </div>';
       }
-      templength = temp.length;
-    });
-
-
-}
-
-var templength = 0;
-var des1 = [];
-var des2 = [];
-var temp = [];
-var numb1 = [];
-funcTest5();
-funcTest4();
-
-
-function funcTest4() {
-  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]
-  }
-  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];
-  }
-  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 += ' \
-            <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>'+ deslist.DesignerName + '</p>\
-              </div>\
-              </a>\
+      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>\
+                    <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" id="'+ deslist2.id + '" data-info="' + deslist2.id + '" class="mesg 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>\
+                </div>\
             </div>';
-
-
-
-
-
-  }
-  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>\
-                <p><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
+    
+    
+      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="">\
+              </div>\
+              <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
+              <a href="./about/index.html?id='+ deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
+              </div>\
+              <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
+              <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '">\
+              <div class="banner1-1 pt-3 pb-1" style="font-weight: 900;">'+ deslist2.WorkName + '</div>\
+              <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" id="'+ deslist2.id + '" data-info="' + deslist2.id + '" class="mesg 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>\
-            </div>\
-        </div>';
-
-
-  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="">\
-          </div>\
-          <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
-          <a href="./about/index.html?id='+ deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
-          </div>\
-          <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
-          <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '">\
-          <div class="banner1-1 pt-3 pb-1" style="font-weight: 900;">'+ deslist2.WorkName + '</div>\
-          <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" 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 += ' \
-        <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);
-
-
-}
-
-
-
-function get_data(id) {
-  var A = [];
-  $.ajax({
-    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]
+              </div>\
+            </div > ';
+    
+      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);
+    
+  
+  }
+  
+  var templength = 0;
+  var des1 = [];
+  var des2 = [];
+  var temp = [];
+  var numb1 = [];
+  funcTest5();
+  // funcTest4();
+  
+  function funcTest4() {
+    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]
+    }
+    numb1[0] = des1[des1.length - 1];
+    console.log(numb1[0]);
+    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];
+    }
+    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 += ' \
+    //           <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>'+ deslist.DesignerName + '</p>\
+    //             </div>\
+    //             </a>\
+    //           </div>';
+    // }
+    // 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>\
+    //               <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" id="'+ deslist2.id + '" data-info="' + deslist2.id + '" class="mesg 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>\
+    //           </div>\
+    //       </div>';
+  
+  
+    // 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="">\
+    //         </div>\
+    //         <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
+    //         <a href="./about/index.html?id='+ deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
+    //         </div>\
+    //         <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
+    //         <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '">\
+    //         <div class="banner1-1 pt-3 pb-1" style="font-weight: 900;">'+ deslist2.WorkName + '</div>\
+    //         <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" id="'+ deslist2.id + '" data-info="' + deslist2.id + '" class="mesg btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
+    //         </div>\
+    //       </div > ';
+  
+    // 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);
+  
+  
+  }
+  
+  
+  
+  function get_data(id) {
+    var A = [];
+    $.ajax({
+      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
+  }
 
-  return A
 }
 
 
 
-setInterval("funcTest4()", 1000 * 10);
+// setInterval("funcTest4()", 1000 * 10);
 
 
 
@@ -582,6 +644,7 @@ $(function () {
 });
 
 $(".mesg").click(function () {
+  console.log(1);
   var desid =$(this).data("info");
   console.log(desid);
   // var desid2=String(desid);

style.css

@@ -547,7 +547,8 @@ body .arrow:hover {
 
 @media screen and (max-width: 767px) {
   #light-box #form-lightbox {
-    width: 80vw;
+    width: 85vw;
+    padding: 0px;
   }
 }
 
@@ -601,6 +602,13 @@ body .arrow:hover {
   font-weight: 600;
 }
 
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-text .text-p {
+    margin-left: 0px;
+    padding-left: 0px;
+  }
+}
+
 @media screen and (max-width: 350px) {
   #light-box #form-lightbox .contact-text .text-p {
     font-size: 14px;

style.scss

@@ -400,7 +400,8 @@ body {
         margin: 0 auto;
         padding: 15px;
         @media screen and(max-width:$moblie) {
-            width: 80vw;
+            width: 85vw;
+            padding: 0px;
         }
         .form-title {
             margin: 0 auto;
@@ -430,12 +431,15 @@ body {
         .contact-text {
             margin: 0 auto;
    
-
             .text-p {
                 margin-left: 15px;
                 padding-left: 12px;
                 font-size: 16px;
                 font-weight: 600;
+                @media screen and(max-width:$moblie) {
+                    margin-left: 0px;
+                    padding-left: 0px;
+                }
                 @media screen and(max-width:350px) {
                     font-size: 14px;
                 }