Merge branch 'master' of http://git.choozmo.com:3000/choozmo/HHH_Home_Decoration_2

api/main.py

@@ -18,7 +18,8 @@ origins = [
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=origins,
+    # allow_origins=origins,
+    allow_origins=["*"],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],

desktop11/goto.js

@@ -1,7 +1,7 @@
 $(".banner-slider").slick({
   speed: 1000,
   swipe: true,
-  arrows:false,
+  arrows: false,
 });
 
 $(".content1-right").slick({
@@ -9,7 +9,7 @@ $(".content1-right").slick({
   dots: true,
   speed: 1000,
 
-  arrows:false,
+  arrows: false,
 
 });
 
@@ -41,7 +41,7 @@ $(".content1-right").slick({
 //     $("#animation3").removeClass("animation-h1");
 //     $("#btn-animation3").removeClass("animation-btn");
 // }
-  
+
 // });
 // content輪播圖片偵測效果
 $(".text-1").addClass("contant-toggle");
@@ -65,37 +65,147 @@ $(".content1-right").on('beforeChange', function (event, slick, currentSlide, ne
 
 });
 
+$.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;
+};
+
+
+
+
+
+// email 格式檢查
+$(document).ready(function () {
+
+  //E-MAIL格式檢查
+
+  $("body").on("change", "#email", function () {
+
+    $Emailchecking = IsEmail($("#email").val());
+
+
+    if ($Emailchecking == false) {
+
+      alert("請填寫正確的E-MAIL格式");
+
+      // $("#email").blur(); //離開焦點
+
+    }
+
+  })
+
+  function IsEmail(email) {
+
+    var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+
+    if (!regex.test(email)) {
+
+      return false;
+
+    } else {
+
+      return true;
+
+    }
+
+  }
+
+});
+// phone 格式檢查
+$(document).ready(function () {
+
+  //phone格式檢查
+
+  $("body").on("change", "#phone", function () {
+
+    $Phonechecking = IsPhone($("#phone").val());
+
+
+    if ($Phonechecking == false) {
+
+      alert("請填寫正確的手機格式");
+
+      // $("#email").blur(); //離開焦點
+
+    }
+
+  })
+
+  function IsPhone(phone) {
+
+    var regex = /^[0-9]+$/;
+
+    if (!regex.test(phone)) {
+
+      return false;
+
+    } else {
+
+      return true;
+
+    }
+
+  }
+
+});
+
+$(".contact-form1").submit(function (e) {
+  /*	var formRef = $('#form1').serializeArray();
+    var jsonString = JSON.stringify(formRef);*/
+  var jsonInfo = $('.contact-form1').serializeObject();
+  var jsonString = JSON.stringify(jsonInfo);
 
-$("#contact-form").submit(function (e) {
-  var param_string = $('#contact-form').serialize();
-  alert('param_string = ' + param_string);
   $.ajax({
-    type: 'GET',
-    url: 'http://172.104.93.163/deco_request_detail',
-    data: param_string,
+    type: 'POST',
+    url: 'https://go.hhh.com.tw:8001/deco_request_detail',
+    data: jsonString,
     dataType: 'json',
-    success: function (data, textStatus, jqXHR) {
-
-      alert("送出成功");
+    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已填過表單");
+      }
     },
     beforeSend: function () {
-      alert("beforeSend");
+      console.log('beforeSend');
     },
     complete: function () {
-      alert("complete");
+      console.log('complete');
     },
-
     error: function (jqXHR, textStatus, errorThrown) {
-      alert("送出失敗");
-
+      console.log(JSON.stringify(jqXHR));
+      console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+      console.log('送出失敗: ' + jqXHR.responseText);
     }
   });
-
   return false;
 });
 
 
 
+
+
+
 $("*").each(function (index, element) {
   // 此元素被點選後執行
   $(this).click(function (e) {
@@ -135,5 +245,8 @@ $("html").on("mousewheel", function () {
   $("html").stop();
 });
 
+$(document).ready(function () {
+  $("#date").datepicker();
+});
 
 

desktop11/goto_202106081744.js

@@ -0,0 +1,171 @@
+$(".banner-slider").slick({
+    speed: 1000,
+    swipe: true,
+    arrows: false,
+  });
+  
+  $(".content1-right").slick({
+    dotsClass: 'slick-dots',
+    dots: true,
+    speed: 1000,
+  
+    arrows: false,
+  
+  });
+  
+  // banner輪播效果
+  // $(".banner-slider").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+  //   console.log('beforeChangeEvent: currenSlide=' + currentSlide + ', nextSlide= ' + nextSlide);
+  //   if (nextSlide == 1) {
+  
+  //     $("#animation2").addClass("animation-h1");
+  //     $("#btn-animation2").addClass("animation-btn");
+  //     $("#animation1").removeClass("animation-h1");
+  //     $("#btn-animation1").removeClass("animation-btn");
+  
+  //     $("#animation3").removeClass("animation-h1");
+  //     $("#btn-animation3").removeClass("animation-btn");
+  //   }
+  //   else if (nextSlide == 2) {
+  //     $("#animation3").addClass("animation-h1");
+  //     $("#btn-animation3").addClass("animation-btn");
+  //     $("#animation1").removeClass("animation-h1");
+  //     $("#btn-animation1").removeClass("animation-btn");
+  //     $("#animation2").removeClass("animation-h1");
+  //     $("#btn-animation2").removeClass("animation-btn");
+  //   }else if (nextSlide == 0) {
+  //     $("#animation1").addClass("animation-h1");
+  //     $("#btn-animation1").addClass("animation-btn");
+  //     $("#animation2").removeClass("animation-h1");
+  //     $("#btn-animation2").removeClass("animation-btn");
+  //     $("#animation3").removeClass("animation-h1");
+  //     $("#btn-animation3").removeClass("animation-btn");
+  // }
+  
+  // });
+  // content輪播圖片偵測效果
+  $(".text-1").addClass("contant-toggle");
+  
+  $(".content1-right").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+    console.log('beforeChangeEvent: currenSlide=' + currentSlide + ', nextSlide= ' + nextSlide);
+    if (nextSlide == 1) {
+      $(".text-1").removeClass("contant-toggle");
+      $(".text-2").addClass("contant-toggle");
+      $(".text-3").removeClass("contant-toggle");
+    } else if (nextSlide == 2) {
+      $(".text-2").removeClass("contant-toggle");
+      $(".text-1").removeClass("contant-toggle");
+      $(".text-3").addClass("contant-toggle");
+  
+    } else if (nextSlide == 0) {
+      $(".text-2").removeClass("contant-toggle");
+      $(".text-1").addClass("contant-toggle");
+      $(".text-3").removeClass("contant-toggle");
+    }
+  
+  });
+  
+  $.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('Mike: ' + jsonString);
+   
+    $.ajax({
+      type: 'POST',
+      url: 'http://cal.ptt.cx/deco_request_detail',
+      data: jsonString,
+      dataType: 'json',
+      success: function (data) {
+        console.log('Mike:送出成功: ' + data);
+        // if (data == 0) {
+        //   alert("送出成功");
+        // } else if (data == 1) {
+        //   alert("email重複");
+        // } else if (data == 2) {
+        //   alert("phone重複");
+        // } else if (data == 3) {
+        //   alert("email、phone重複");
+        // }
+      },
+      beforeSend: function () {
+        console.log('Mike::beforeSend');
+      },
+      complete: function () {
+        console.log('Mike:complete');
+      },
+      error: function (jqXHR, textStatus, errorThrown) {
+        console.log(JSON.stringify(jqXHR));
+        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+        console.log('Mike:送出失敗: ' + jqXHR.responseText);
+      }
+    });
+    return false;
+  });
+  
+  
+  
+  
+  
+  $("*").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();
+  });
+  
+  
+  
+  

desktop11/index.html

@@ -2,72 +2,139 @@
 <html lang="zh">
 
 <head>
+
+
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HHH_Home_Decoration2</title>
+    <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved.">
+    <meta name="creation-date" content="2021-05-24 12:00:04 GTM+8">
+    <meta name="description" content="免費預約裝修諮詢">
+    <meta name="distribution" content="Taiwan">
+    <meta name="keywords" content="">
+    <meta name="revisit-after" content="1 days">
+    <meta name="robots" content="all">
+    <meta name="format-detection" content="telephone=no">
+    <meta property="og:description" content="免費預約裝修諮詢" />
+    <meta property="og:site_name" content="全室裝修" />
+    <meta property="og:title" content="幸福空間 - 全室裝修" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="zh_TW">
+    <title>全室裝修</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>
+    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
+
 
 <body id="top">
+    <script>
+        function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
+            if (response.status === 'connected') {  // 已登入
+                testAPI();
+            }
+        }
+
+        function checkLoginState() {                 // Called when a person is finished with the Login Button.
+            FB.getLoginStatus(function (response) {   // See the onlogin handler
+                statusChangeCallback(response);
+            });
+        }
+
+        window.fbAsyncInit = function () {
+            FB.init({
+                appId: '1388696554848391',
+                cookie: true,            // Enable cookies to allow the server to access the session.
+                xfbml: true,            // Parse social plugins on this webpage.
+                version: 'v11.0'          // Use this Graph API version for this call.
+            });
+
+            FB.getLoginStatus(function (response) {   // Called after the JS SDK has been initialized.
+                statusChangeCallback(response);      // Returns the login status.
+            });
+        };
+
+        function testAPI() {
+            FB.api('/me/?fields=id,name,email', function (response) {
+                console.log('FB API回傳資料: ' + JSON.stringify(response));
+
+                if (response.id) {
+                    // 設定欄位預設值
+                    document.getElementById("email").value = response.email;
+                    document.getElementById("name").value = response.name;
+
+                    // 隱藏FB登入按鈕
+                    document.getElementById("fb_login").style.display = 'none';
+                }
+            });
+        };
+
+
+
+
+    </script>
+
     <div class="container-fluid" style="padding:0;margin:0 ">
         <div class="banner container-fluid" style="padding:0; margin:0 ">
             <!-- <section id="banner"> -->
-                <div class="Navigation">
-                    <div class="logo" >
-                       <a href="https://hhh.com.tw/"> <img src="./img/logo-main-1-1.webp"   alt=""></a>
-                    </div>
-                    <div class="link">
-                        <a href="">首頁</a>
-                        <a data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">我有裝修需求</a>
-                        <a data-gt-target="#feedback" data-gt-duration="500" data-gt-offset="0">屋主都說好</a>
-                        <a data-gt-target="#service-process" data-gt-duration="500" data-gt-offset="0">服務流程</a>
-                    </div>
+            <div class="Navigation">
+                <div class="logo">
+                    <a href="https://hhh.com.tw/"> <img src="./img/logo-main-1-1.webp" alt=""></a>
                 </div>
-                <hr class="hr  bg-white" style="opacity:1">
-                <div id="text">
-                    <div class="banner-slider d-flex align-items-center justify-content-center">
-                        <div class="banner1">
-                            <div style="padding-top:16vw;padding-right:0; margin:0; width: 100vw">
-                                <h1 id="animation1"> 北歐風</h1>
-                                <button id="btn-animation1" class="btn-main">預約免費裝修諮詢</button>
-                            </div>
+                <div class="link">
+                    <a href="">首頁</a>
+                    <a data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">我有裝修需求</a>
+                    <a data-gt-target="#feedback" data-gt-duration="500" data-gt-offset="0">屋主都說好</a>
+                    <a data-gt-target="#service-process" data-gt-duration="500" data-gt-offset="0">服務流程</a>
+                </div>
+            </div>
+            <hr class="hr  bg-white" style="opacity:1">
+            <div id="text">
+                <div class="banner-slider d-flex align-items-center justify-content-center">
+                    <div class="banner1">
+                        <div style="padding-top:16vw;padding-right:0; margin:0; width: 100vw">
+                            <h1 id="animation1"> 北歐風</h1>
+                            <button id="btn-animation1" class="btn-main" data-gt-target="#contact-us"
+                                data-gt-duration="800" data-gt-offset="-300">預約免費裝修諮詢</button>
                         </div>
-                        <div class="banner2">
-                            <div style="padding-top:16vw;width: 100vw">
-                                <h1 id="animation2">次代風</h1>
-                                <button id="btn-animation2" class="btn-main">預約免費裝修諮詢</button>
-                            </div>
+                    </div>
+                    <div class="banner2">
+                        <div style="padding-top:16vw;width: 100vw">
+                            <h1 id="animation2">現代風</h1>
+                            <button id="btn-animation2" class="btn-main">預約免費裝修諮詢</button>
                         </div>
-                        <div class="banner3">
-                            <div style="padding-top:16vw; width: 100vw ">
-                                <h1 id="animation3">美式風</h1>
-                                <button id="btn-animation3" class="btn-main">預約免費裝修諮詢</button>
-                            </div>
+                    </div>
+                    <div class="banner3">
+                        <div style="padding-top:16vw; width: 100vw ">
+                            <h1 id="animation3">美式風</h1>
+                            <button id="btn-animation3" class="btn-main">預約免費裝修諮詢</button>
                         </div>
                     </div>
                 </div>
-            <!-- </section> -->
-            <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/totop.png"
+            </div>
+            </section>
+            <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png"
                 alt="">
         </div>
 
         <div class="container-fluid" style="padding:0;margin: 0; ">
-
             <section id="content1">
                 <div class="content1-left">
-                    <h1 class="title">你有以這些下困擾嗎</h1>
+                    <h1 class="title">你有以下這些困擾嗎</h1>
                     <div class="left">
                         <h1 class="title1">o1</h1>
                         <div class="text1">
                             <div class="text-1">裝修公司眾多</div>
-                            <div class="text-1">不知道如何邀選最適合的設計師?</div>
+                            <div class="text-1">不知道如何挑選最適合的設計師?</div>
                         </div>
                     </div>
                     <hr class="hr2 bg-dark" style="margin:0; opacity:1">
@@ -123,23 +190,25 @@
                         </div>
                         <div id="text-right">
                             <div class="img-icon">
-    
+
                                 <img src="./img/process/icon2.webp" alt="">
                             </div>
                             <div class="icon-text">
-                                <div class="text-p">13年經驗安心把關</div>
+
+                                <div class="text-p"><span style="font-size: 25px;">13</span>年經驗安心把關</div>
                                 <div class="text-p">不懂預算行情</div>
                                 <div class="text-p">也不用擔心受騙</div>
                             </div>
-    
+
                         </div>
                     </div>
                 </div>
-    
-    
-    
+
+
+
                 <div class="btn">
-                    <button class="btn-main">預約免費裝修諮詢</button>
+                    <button class="btn-main" data-gt-target="#contact-us" data-gt-duration="800"
+                        data-gt-offset="-300">預約免費裝修諮詢</button>
                 </div>
             </section>
 
@@ -151,7 +220,7 @@
                 <div id="process-box">
                     <div class="box">
                         <img src="./img/process/box1.png" alt="">
-                        <div class="box-text">填寫需求表單</div>
+                        <div class="box-text">填寫裝修需求表單</div>
                     </div>
                     <div class="box">
                         <img src="./img/process/box2.png" alt="">
@@ -167,7 +236,7 @@
                     <div class="box">
                         <img src="./img/process/box4.png" alt="">
                         <div class="box-text">設計公司會</div>
-                        <div class="box-text"> 主動與屋主</div>
+                        <div class="box-text"> 主動與屋主聯繫</div>
                     </div>
                     <div class="box">
                         <img src="./img/process/box5.png" alt="">
@@ -191,44 +260,62 @@
                 <h1 class="title">客戶真實見證</h1>
                 <div id="feedback-box">
                     <div class="box">
-                        <img src="./img/feedback-img/feedback01.webp" alt="">
+                        <a href="https://hhh.com.tw/video-post.php?id=2905"><img
+                                src="./img/feedback-img/feedback01.webp" alt=""></a>
                         <p>嚮往人文接觸處的溫度-文響</p>
+                        <a href="https://hhh.com.tw/video-post.php?id=2905"><img class="play"
+                                style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                     </div>
                     <div class="box">
-                        <img src="./img/feedback-img/feedback02.webp" alt="">
+                        <a href="https://hhh.com.tw/video-post.php?id=3782"><img
+                                src="./img/feedback-img/feedback02.webp" alt=""></a>
                         <p>緞帶般曲線 譜出家的律動與甜蜜</p>
+                        <a href="https://hhh.com.tw/video-post.php?id=3782"><img class="play"
+                                style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                     </div>
                     <div class="box">
-                        <img src="./img/feedback-img/feedback03.webp" alt="">
+                        <a href="https://hhh.com.tw/video-post.php?id=3549"><img
+                                src="./img/feedback-img/feedback03.webp" alt=""></a>
                         <p>系統設計的變革 前衛科技宅</p>
+                        <a href="https://hhh.com.tw/video-post.php?id=3549"><img class="play"
+                                style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                     </div>
                     <div class="box">
-                        <img src="./img/feedback-img/feedback0411.webp" alt="">
+                        <a href="https://hhh.com.tw/video-post.php?id=2985"><img
+                                src="./img/feedback-img/feedback0411.webp" alt=""></a>
                         <p>用系統設計 實現歐洲皇室城堡夢</p>
+                        <a href="https://hhh.com.tw/video-post.php?id=2985"><img class="play"
+                                style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                     </div>
                     <div class="box">
-                        <img src="./img/feedback-img/feedback05.webp" alt="">
+                        <a href="https://hhh.com.tw/video-post.php?id=2122"><img
+                                src="./img/feedback-img/feedback05.webp" alt=""></a>
                         <p>不良格局變身 3米6日光鄉村宅</p>
+                        <a href="https://hhh.com.tw/video-post.php?id=2122"><img class="play"
+                                style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                     </div>
                     <div class="box">
-                        <img src="./img/feedback-img/feedback06.webp" alt="">
+                        <a href="https://hhh.com.tw/video-post.php?id=3847"><img
+                                src="./img/feedback-img/feedback06.webp" alt=""></a>
                         <p>雙拼豪宅古典、日式一次擁有</p>
+                        <a href="https://hhh.com.tw/video-post.php?id=3847"><img class="play"
+                                style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                     </div>
-    
+
                 </div>
-    
+
             </section>
 
         </div>
         <section id="contact-us">
             <div class="form-title">
-                <h1>已經服務超過14392個生活</h1>
+                <h1>已經服務超過<span style="font-size:38px;">14392</span>個家庭</h1>
                 <h1>打造夢想中的完美居家生活</h1>
                 <h1>即刻啟動!</h1>
             </div>
             <!-- <hr> -->
             <div class="contact-text">
-                <div class="text-p">請撥打全台付費專線<span style="opacity: 0;">11</span><span id="phone"
+                <div class="text-p">請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone1"
                         style="color: #ee751b; font-weight:900;"> 0800-336-086</span></div>
                 <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
             </div>
@@ -237,7 +324,7 @@
                 <form class="contact-form1">
                     <div id="contact-form">
                         <div id="form-left">
-                            <select name="location" id="location" required>
+                            <select name="loc" id="location" required>
                                 <option value="地區" disabled selected="selected">地區</option>
                                 <option class="option">基隆市</option>
                                 <option class="option">台北市</option>
@@ -260,7 +347,7 @@
                                 <option class="option">台東縣</option>
                                 <option class="option">澎湖縣</option>
                             </select>
-                            <select name="type" id="type" required>
+                            <select name="h_class" id="type" required>
                                 <option value="房屋類型" disabled selected="selected">房屋類型</option>
                                 <option class="option">預售屋</option>
                                 <option class="option">中古屋</option>
@@ -268,7 +355,7 @@
                                 <option class="option">毛胚屋</option>
                                 <option class="option">自地自建</option>
                             </select>
-                            <select name="modal" id="modal" required>
+                            <select name="type" id="modal" required>
                                 <option value="房屋型態" disabled selected="selected">房屋型態</option>
                                 <option class="option">透天</option>
                                 <option class="option">電梯華廈</option>
@@ -287,35 +374,35 @@
                                 <option class="option">400~500萬</option>
                                 <option class="option">500萬以上</option>
                             </select>
-                            <input name="square" type="text" id="square" placeholder="請輸入坪數" required>
-                            <select name="rooms" id="rooms" required style="margin-right:1.5vw">
-                                <option value="幾房" disabled selected="selected" >幾房</option>
-                                <option class="option">1房</option>
-                                <option class="option">2房</option>
-                                <option class="option">3房</option>
-                                <option class="option">4房</option>
-                                <option class="option">5房</option>
-                                <option class="option">6房</option>
-                                <option class="option">7房</option>
-                                <option class="option">8房</option>
+                            <input name="size" type="text" id="square" placeholder="請輸入坪數" required>
+                            <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
+                                <option value="幾房" disabled selected="selected">2房</option>
+                                <option class="option" value="1">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="living room" id="livingroom" required style="margin-right:1.5vw">
-                                <option value="幾廳" disabled selected="selected" style="margin-right:25px">幾廳</option>
-                                <option class="option">1廳</option>
-                                <option class="option">2廳</option>
+                            <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
+                                <option value="幾廳" disabled selected="selected" style="margin-right:25px">2廳</option>
+                                <option class="option" value="1">1</option>
+                                <option class="option" value="2">2</option>
                             </select>
-                            <select name="bathroom" id="bathroom" required>
-                                <option value="地區" disabled selected="selected" >幾衛</option>
-                                <option class="option">1衛</option>
-                                <option class="option">2衛</option>
-                                <option class="option">3衛</option>
-                                <option class="option">4衛</option>
-                                <option class="option">5衛</option>
-                                <option class="option">6衛</option>
-                                <option class="option">7衛</option>
-                                <option class="option">8衛</option>
+                            <select name="bath_num" id="bathroom" required>
+                                <option value="地區" disabled selected="selected">1衛</option>
+                                <option class="option" value="1">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="cars" id="style" required>
+                            <select name="style" id="style" required>
                                 <option value="風格類型" disabled selected="selected">風格類型</option>
                                 <option class="option">現代風</option>
                                 <option class="option">鄉村風</option>
@@ -332,24 +419,28 @@
                                 <option class="option">工業風</option>
                                 <option class="option">異國風</option>
                             </select>
-                            <input type="text" id="date" placeholder="預選裝修日期" required>
-
+                            <input name="prefer_date" type="text" id="date" placeholder="預選裝修日期" required>
                         </div>
+                        <hr>
                         <div id="form-right">
-                            <div id="facebook">
-                                <img src="./img/logo/facebook.webp" alt="">
-                                使用FB填入信箱與姓名
+
+                            <div id="fb_login">
+                                <fb:login-button id="fb-button" scope="public_profile,email"
+                                    onlogin="checkLoginState();">使用FB填入信箱與姓名
+                                </fb:login-button>
+                                <div id="status"></div>
                             </div>
-                            <input type="text" id="email" placeholder="請輸入信箱" required>
-                            <input type="text" id="name" placeholder="請輸入姓名" required>
-                            <input type="text" id="phone" placeholder="請輸入電話" required>
-                            <select name="cars" id="gender">
+
+                            <input type="text" name="email" id="email" placeholder="請輸入信箱" required>
+                            <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
+                            <input type="text" name="phone" id="phone" placeholder="請輸入電話" required>
+                            <select name="gender" id="gender">
                                 <option value="性格" disabled selected="selected">性別</option>
                                 <option class="option">男</option>
                                 <option class="option">女</option>
                             </select>
-                            <input type="checkbox" id="checkbox" required> <label for="agree">同意</label><a
-                                href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
+                            <input type="checkbox" style="margin:30px 10px;" id="checkbox" checked><label
+                                for="agree">同意</label><a href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
                         </div>
 
                     </div>
@@ -365,37 +456,24 @@
 
             <div id="footer">
                 <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
-                <a href="x">｜聯絡我們｜</a>
-                <a href="">｜關於本站｜</a>
+                <a href="https://hhh.com.tw/about/contact/">｜聯絡我們｜</a>
+                <a href="https://hhh.com.tw/about/">｜關於本站｜</a>
             </div>
         </div>
     </div>
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+    <!-- Load the JS SDK asynchronously -->
+    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
         integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
-
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
     <script src="./goto.js"></script>

desktop11/style.css

@@ -53,8 +53,15 @@ body .arrow {
   position: fixed;
   right: 30px;
   bottom: 30px;
-  width: 30px;
+  width: 45px;
+  height: 40px;
   z-index: 10;
+  background-color: #E06649;
+}
+
+body .arrow:hover {
+  -webkit-box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+          box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
 }
 
 .banner {
@@ -321,7 +328,7 @@ body .arrow {
 
 #service .service-box #service-text #text-left,
 #service .service-box #service-text #text-right {
-  width: 30vw;
+  width: 40vw;
   text-align: left;
   display: -ms-grid;
   display: grid;
@@ -334,12 +341,8 @@ body .arrow {
   width: 12vw;
 }
 
-#service .service-box #service-text #text-right {
-  padding-left: 1vw;
-}
-
 #service .service-box #service-text .icon-text {
-  width: 25vw;
+  width: 30vw;
   margin-top: 15px;
   font-weight: 600;
 }
@@ -351,7 +354,7 @@ body .arrow {
 
 #service .service-box #service-text .text-p {
   font-size: 18px;
-  color: #4b515e;
+  color: #000;
 }
 
 #service .service-box #service-img {
@@ -393,14 +396,19 @@ body .arrow {
   display: grid;
   -ms-grid-columns: (1fr)[6];
       grid-template-columns: repeat(6, 1fr);
-  width: 78vw;
-  margin: auto;
+  width: 80vw;
+  margin: 0 auto;
 }
 
-#service-process #process-box .box-text {
+#service-process #process-box .box {
+  width: 14vw;
+  margin: 0 auto;
+}
+
+#service-process #process-box .box .box-text {
   font-family: 微軟正黑體;
   text-align: center;
-  font-size: 18px;
+  font-size: 17px;
   font-weight: 900;
   padding-right: 3vw;
   color: #6f645a;
@@ -438,6 +446,17 @@ body .arrow {
   transition: 0.5s;
   text-align: center;
   padding-bottom: 1vw;
+  position: relative;
+}
+
+#feedback #feedback-box .box .play {
+  position: absolute;
+  left: 12vw !important;
+  top: 5vw !important;
+  width: 3vw;
+  height: 3vw;
+  opacity: 0.8;
+  z-index: 10;
 }
 
 #feedback #feedback-box .box img {
@@ -463,15 +482,6 @@ body .arrow {
   position: relative;
 }
 
-#contact-us hr {
-  position: absolute;
-  width: 500px;
-  -webkit-transform: rotate(90deg);
-          transform: rotate(90deg);
-  top: 80vh;
-  left: 33vw;
-}
-
 #contact-us .contact-text {
   margin: 0 auto;
   width: 68vw;
@@ -504,6 +514,16 @@ body .arrow {
       grid-template-columns: repeat(2, 1fr);
   margin-top: 10px;
   margin: 0 auto;
+  position: relative;
+}
+
+#contact-us #contact-form hr {
+  position: absolute;
+  width: 34vw;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+  left: 20vw;
+  top: 19vw;
 }
 
 #contact-us #contact-form #location,
@@ -568,11 +588,18 @@ body .arrow {
   margin-left: 5vw;
 }
 
-#contact-us #contact-form #form-right #facebook {
+#contact-us #contact-form #form-right #fb_login #fb-button {
+  font-size: 16px;
+  width: 29vw;
+  height: 50px;
+  padding: 30px;
+}
+
+#contact-us #contact-form #form-right #111 {
   margin-top: 12px;
   width: 29vw;
   height: 50px;
-  border: 1px solid #000093;
+  border: 1px solid #3b5998;
   text-align: right;
   padding-right: 50px;
   line-height: 50px;
@@ -582,7 +609,7 @@ body .arrow {
   position: relative;
 }
 
-#contact-us #contact-form #form-right #facebook img {
+#contact-us #contact-form #form-right #111 img {
   position: absolute;
   left: 50px;
   top: 7px;
@@ -590,12 +617,12 @@ body .arrow {
   height: 32px;
 }
 
-#contact-us #contact-form #form-right #facebook:hover {
+#contact-us #contact-form #form-right #111:hover {
   background-color: #2a4f91;
   color: #fff;
 }
 
-#contact-us #contact-form #form-right #facebook:hover img {
+#contact-us #contact-form #form-right #111:hover img {
   -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
           filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 }
@@ -624,7 +651,7 @@ body .arrow {
   background: #edbc96;
   color: #4b515e;
   font-size: 20px;
-  width: 450px;
+  width: 400px;
   border-radius: 10px;
 }
 
@@ -640,7 +667,7 @@ body .arrow {
   margin: 0 auto;
 }
 
-#contact-us .form-btn #phone {
+#contact-us .form-btn #phone1 {
   position: absolute;
   left: 500px;
 }

desktop11/style.scss

@@ -1,5 +1,4 @@
 * {
-   
     font-family: 微軟正黑體;
 }
 $Font-color: #fff;
@@ -52,8 +51,13 @@ body {
         position: fixed;
         right: 30px;
         bottom: 30px;
-        width: 30px;
+        width: 45px;
+        height: 40px;
         z-index: 10;
+        background-color: #E06649;
+        &:hover{
+            box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+        }
     }
 }
 
@@ -75,7 +79,7 @@ body {
                 background-size: cover;
                 background-repeat: no-repeat;
                 background-position: center;
-                padding-right:0 !important;
+                padding-right: 0 !important;
             }
             .banner1 {
                 background-image: url(./img/banner/00.webp);
@@ -146,8 +150,8 @@ body {
                 position: relative;
                 :hover {
                     opacity: 0.8;
-                  }
-                   &:after {
+                }
+                &:after {
                     content: "";
                     display: block;
                     width: 80%;
@@ -157,12 +161,12 @@ body {
                     left: 12%;
                     bottom: 0;
                     transition: all 0.3s;
-                    opacity:0;
-                  }
-                    &:hover:after {
+                    opacity: 0;
+                }
+                &:hover:after {
                     width: 80%;
                     opacity: 1;
-                  }
+                }
             }
         }
     }
@@ -180,7 +184,7 @@ body {
 #content1 {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    margin:  0 auto;
+    margin: 0 auto;
     padding-top: 150px;
     width: 90vw;
     position: relative;
@@ -226,9 +230,7 @@ body {
                 font-weight: 400;
                 font-family: "Times New Roman", Times, serif;
                 color: #8593a4;
-        padding-left: 3vw;
-               
-
+                padding-left: 3vw;
             }
 
             .text1,
@@ -250,7 +252,7 @@ body {
     .content1-right {
         width: 35vw;
         text-align: center;
-  
+
         .slick-dots {
             margin-bottom: 50px;
             ::before {
@@ -258,7 +260,7 @@ body {
             }
         }
         img {
-          width: 35vw;
+            width: 35vw;
             height: 40vw;
             object-fit: cover;
         }
@@ -268,7 +270,7 @@ body {
 // service
 #service {
     width: 100vw;
-  
+
     h1 {
         padding: 15px;
         padding-left: 10vw;
@@ -285,7 +287,7 @@ body {
             width: 70vw;
             #text-left,
             #text-right {
-                width: 30vw;
+                width: 40vw;
                 text-align: left;
                 display: grid;
                 grid-template-columns: 1fr 1fr;
@@ -293,11 +295,8 @@ body {
                     width: 12vw;
                 }
             }
-            #text-right {
-                padding-left: 1vw;
-            }
             .icon-text {
-                width: 25vw;
+                width: 30vw;
                 margin-top: 15px;
                 font-weight: 600;
             }
@@ -308,7 +307,7 @@ body {
             }
             .text-p {
                 font-size: 18px;
-                color: $title-color;
+                color: #000;
             }
         }
         #service-img {
@@ -344,16 +343,19 @@ body {
     #process-box {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
-        width: 78vw;
-        margin: auto;
-
-        .box-text {
-            font-family: 微軟正黑體;
-            text-align: center;
-            font-size: 18px;
-            font-weight: 900;
-            padding-right: 3vw;
-            color: $process;
+        width: 80vw;
+        margin: 0 auto;
+        .box {
+            width: 14vw;
+            margin: 0 auto;
+            .box-text {
+                font-family: 微軟正黑體;
+                text-align: center;
+                font-size: 17px;
+                font-weight: 900;
+                padding-right: 3vw;
+                color: $process;
+            }
         }
         img {
             width: 180px;
@@ -383,6 +385,16 @@ body {
             transition: 0.5s;
             text-align: center;
             padding-bottom: 1vw;
+            position: relative;
+            .play {
+                position: absolute;
+                left: 12vw !important;
+                top: 5vw !important;
+                width: 3vw;
+                height: 3vw;
+                opacity: 0.8;
+                z-index: 10;
+            }
             img {
                 width: 25vw;
                 margin: 0 auto;
@@ -409,13 +421,7 @@ body {
 
     background: #eee;
     position: relative;
-    hr {
-        position: absolute;
-        width: 500px;
-        transform: rotate(90deg);
-        top: 80vh;
-        left: 33vw;
-    }
+
     .contact-text {
         margin: 0 auto;
         width: 68vw;
@@ -445,6 +451,14 @@ body {
         grid-template-columns: repeat(2, 1fr);
         margin-top: 10px;
         margin: 0 auto;
+        position: relative;
+        hr {
+            position: absolute;
+            width: 34vw;
+            transform: rotate(90deg);
+            left: 20vw;
+            top: 19vw;
+        }
         #location,
         #type,
         #modal,
@@ -491,20 +505,27 @@ body {
             }
             #square,
             #date{
-                background:none;
+                background: none;
                 background-color: #fff;
-
             }
         }
         #form-right {
             width: 29vw;
             margin-left: 5vw;
+            #fb_login{
+                #fb-button{
+                    font-size: 16px;
+                    width: 29vw;
+                    height: 50px;
+                    padding: 30px;
+                }
+            }
 
-            #facebook {
+            #111 {
                 margin-top: 12px;
                 width: 29vw;
                 height: 50px;
-                border: 1px solid #000093;
+                border: 1px solid #3b5998;
                 text-align: right;
                 padding-right: 50px;
                 line-height: 50px;
@@ -532,14 +553,14 @@ body {
             a {
                 text-decoration: none;
                 color: #ee751b;
-                 font-weight:900;
+                font-weight: 900;
             }
             #checkbox {
                 margin: 15px;
             }
             #email,
             #name,
-            #phone{
+            #phone {
                 background: none;
                 background-color: #fff;
             }
@@ -552,7 +573,7 @@ body {
         background: #edbc96;
         color: #4b515e;
         font-size: 20px;
-        width: 450px;
+        width: 400px;
         border-radius: 10px;
 
         &:hover {
@@ -565,7 +586,7 @@ body {
         position: relative;
         width: 75vw;
         margin: 0 auto;
-        #phone {
+        #phone1 {
             position: absolute;
             left: 500px;
         }

index.html

@@ -11,12 +11,10 @@ window.onload=function(){
     
     if(screen.width>1024)
     {
-        alert("pc");
         window.location.href ="./desktop11/index.html";   
     }
     else
     {
-        alert("phone");
         window.location.href ="./mobile/index.html";  
         
     }

mobile/index.html

@@ -5,9 +5,28 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HHH_Home_Decoration</title>
+    <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved.">
+    <meta name="creation-date" content="2021-05-24 12:00:04 GTM+8">
+    <meta name="description" content="預約居家布置諮詢">
+    <meta name="distribution" content="Taiwan">
+    <meta name="keywords" content="">
+    <meta name="revisit-after" content="1 days">
+    <meta name="robots" content="all">
+    <meta name="format-detection" content="telephone=no">
+    <meta property="og:description" content="預約居家布置諮詢" />
+    <meta property="og:site_name" content="全室裝修" />
+    <meta property="og:title" content="幸福空間 - 全室裝修" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="zh_TW">
+    <title>全室裝修</title>
 
 
+    
+
+
+
+
+    
     <!-- Slick CDN -->
     <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" />
@@ -18,10 +37,53 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
     <link rel="stylesheet" href="./style.css">
+    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 </head>
 
-<body>
+<body id="top">
+    <script>
+        function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
+            if (response.status === 'connected') {  // 已登入
+                testAPI();
+            }
+        }
+
+        function checkLoginState() {                 // Called when a person is finished with the Login Button.
+            FB.getLoginStatus(function (response) {   // See the onlogin handler
+                statusChangeCallback(response);
+            });
+        }
+
+        window.fbAsyncInit = function () {
+            FB.init({
+                appId: '1388696554848391',
+                cookie: true,            // Enable cookies to allow the server to access the session.
+                xfbml: true,            // Parse social plugins on this webpage.
+                version: 'v11.0'          // Use this Graph API version for this call.
+            });
+
+            FB.getLoginStatus(function (response) {   // Called after the JS SDK has been initialized.
+                statusChangeCallback(response);      // Returns the login status.
+            });
+        };
+
+        function testAPI() {
+            FB.api('/me/?fields=id,name,email', function (response) {
+                console.log('FB API回傳資料: ' + JSON.stringify(response));
+
+                if (response.id) {
+                    // 設定欄位預設值
+                    document.getElementById("email").value = response.email;
+                    document.getElementById("name").value = response.name;
+
+                    // 隱藏FB登入按鈕
+                    document.getElementById("fb_login").style.display = 'none';
+                }
+            });
+        };
+    </script>
     <nav class="navigation">
         <div class="logo">
             <a href="https://hhh.com.tw/"><img src="./img/logo/logomain-3.webp" alt=""></a>
@@ -29,91 +91,85 @@
         <img id="menu-btn1" src="./img/logo/menu.webp" alt="">
     </nav>
 
-    <div id="menu-box">
-
+    <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
         <div id="menu-box2">
-            <div id="menu1" class="menu-text"><a href="#!">首頁</a>
-                <div class="menu-text"><a class="link" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">我有裝修需求</a></div>
-                <div class="menu-text"><a  class="link" data-gt-target="#feedback" data-gt-duration="500" data-gt-offset="0">屋主都說好</a></div>
-                <div class="menu-text"><a class="link" data-gt-target="#service-process" data-gt-duration="500" data-gt-offset="0">服務流程</a></div>
+            <div id="menu1" class="menu-text"><a style="letter-spacing: 5px;" href="https://hhh.com.tw/">首頁</a>
+                <div class="menu-text"><a class="link" data-gt-target="#contact-us" data-gt-duration="800"
+                        data-gt-offset="-300">我有裝修需求</a></div>
+                <div class="menu-text"><a class="link" data-gt-target="#feedback" data-gt-duration="500"
+                        data-gt-offset="0">屋主都說好</a></div>
+                <div class="menu-text"><a class="link" data-gt-target="#service-process" data-gt-duration="500"
+                        data-gt-offset="0">服務流程</a></div>
             </div>
             <hr>
             <div id="menu-link">
-                <div class="menu-logo"><img src="./img/process/logo1.webp" alt=""></div>
-                <div class="menu-logo"><img src="./img/logo/facebook (3).webp" alt=""></div>
-                <div class="menu-logo"><img src="./img/logo/line.webp" alt=""></div>
+                <div class="menu-logo"><a href="https://hhh.com.tw/"><img src="./img/process/logo1.webp" alt=""></a></div>
+                <div class="menu-logo"><a href="https://www.facebook.com/hhhfb"><img src="./img/logo/facebook (3).webp" alt=""></a></div>
+                <div class="menu-logo"><a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/logo/line.webp" alt=""></a></div>
             </div>
 
         </div>
 
     </div>
+    <div class="container-fluid" style="padding:0;margin:0 ">
 
-    <section id="banner-box">
-        <div class="banner-slider">
-            <div class="banner1">
+        <section id="banner-box">
+            <div class="banner-slider">
+                <div class="banner1">
 
-                <h1>北歐風</h1>
-            </div>
-            <div class="banner2">
+                    <h1>北歐風</h1>
+                </div>
+                <div class="banner2">
 
-                <h1>次代風</h1>
-            </div>
-            <div class="banner3">
+                    <h1>現代風</h1>
+                </div>
+                <div class="banner3">
 
-                <h1>美式風</h1>
+                    <h1>美式風</h1>
+                </div>
             </div>
-        </div>
-
 
-    </section>
+        </section>
+    </div>
+    <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png"
+    alt="">
     <div class="btn">
-        <button class="btn-main">預約居家布置諮詢</button>
+        <button   id="banner-btn" class="btn-main" data-gt-target="#contact-us" data-gt-duration="800"
+            data-gt-offset="-300">預約免費裝修諮詢</button>
     </div>
-    <section id="content1">
-        <h1 class="title">你有以下這些下困擾嗎</h1>
-        <div class="box">
-
-            <div class="text">
-                <div class="text2">
-                    <h2>裝修公司眾多</h2>
-                    <h2>不知道如何邀選最適合的設計師?</h2>
+    <div class="container-fluid" style="padding:0;margin:0  ">
+        <section id="content1">
+            <h1 class="title">你有以下這些困擾嗎</h1>
+            <div class="box">
+
+                <div class="text">
+                    <div class="text2">
+                        <h2>裝修公司眾多</h2>
+                        <h2>不知道如何挑選最適合的設計師?</h2>
+                    </div>
+                    <img src="./img/content/01.webp" alt="">
                 </div>
-                <img src="./img/content/01.webp" alt="">
-            </div>
-            <div class="text">
-                <div class="text2">
-                    <h2>擔心遇到不良裝修公司</h2>
-                    <h2>容易產生裝修糾紛</h2>
+                <div class="text">
+                    <div class="text2">
+                        <h2>擔心遇到不良裝修公司</h2>
+                        <h2>容易產生裝修糾紛</h2>
+                    </div>
+                    <img src="./img/content/02.webp" alt="">
                 </div>
-                <img src="./img/content/02.webp" alt="">
-            </div>
-            <div class="text">
-                <div class="text2">
-                    <h2>不了解裝修工程預算行情</h2>
-                    <h2>害怕被騙嗎?</h2>
+                <div class="text">
+                    <div class="text2">
+                        <h2>不了解裝修工程預算行情</h2>
+                        <h2>害怕被騙嗎?</h2>
+                    </div>
+                    <img src="./img/content/03.webp" alt="">
                 </div>
-                <img src="./img/content/03.webp" alt="">
-            </div>
 
 
-    </section>
+        </section>
+
+    </div>
     <section id="service">
         <h1 class="title">我們提供的服務</h1>
-        <!-- <div class="service container-fluid ">
-            <div class="row  vh-25">
-                <div class="col-lg-5 col-md-4  bg-light.bg-gradient " style="background-color: #eee;">
-                    <img class="icon" src="./img/process/icon1.webp" alt="">
-                    <div>推薦合法立案</div>
-                    <div>無裝修司法糾紛紀錄的</div>
-                    <div>專業設計師</div>
-                    <div>輕鬆找到合適人選</div>
-                    <div>不再大海撈針</div>
-                </div>
-                <div class="col-lg-7 col-md-8 ">
-                    <img class="img-fluid" src="./img/service/service001.jpg" alt="">
-                </div>
-            </div>
-        </div> -->
         <div class="container-fluid  mt-5 ">
             <div class="row">
                 <div class="text col-6  bg-light.bg-gradient  " style="background-color: #eee;">
@@ -139,7 +195,7 @@
                     <div class="left-box ">
                         <img class="icon  " src="./img/process/icon2.webp" alt="">
                         <div class="left-text">
-                            <div class="text-font  "><span style="font-size: 20px;" >13</span>年經驗安心把關</div>
+                            <div class="text-font  "><span style="font-size: 20px;">13</span>年經驗安心把關</div>
                             <div class="text-font">不懂預算行情</div>
                             <div class="text-font">也不用擔心受騙</div>
                         </div>
@@ -151,261 +207,247 @@
 
             </div>
         </div>
-        <!-- <div class="service-box">
-            <div class="text-left">
-                <img src="./img/process/icon1.webp" alt="">
-                <div class="icon-text">
-                    <p>推薦合法立案</p>
-                    <p>無裝修司法糾紛紀錄的</p>
-                    <p>專業設計師</p>
-                    <p>輕鬆找到合適人選</p>
-                    <p>不再大海撈針</p>
-                </div>
-            </div>
-            <div class="text-right">
-                <img src="./img/service/service01.webp" alt="">
-            </div>
-        </div> -->
-        <!-- <div class="service-box">
-            <div class="text-left">
-                <img src="./img/process/icon2.webp" alt="">
-                <div class="icon-text">
-                    <p>推薦合法立案</p>
-                    <p>無裝修司法糾紛紀錄的</p>
-                    <p>專業設計師</p>
-                    <p>輕鬆找到合適人選</p>
-                    <p>不再大海撈針</p>
-                </div>
-            </div>
-            <div class="text-right">
-                <img src="./img/service/service02.webp" alt="">
-            </div>
-        </div> -->
         <div class="btn">
-            <button class="btn-main">預約居家布置諮詢</button>
+            <button style="margin-top: 50px;" class="btn-main" data-gt-target="#contact-us" data-gt-duration="800"
+                data-gt-offset="-300">預約免費裝修諮詢</button>
         </div>
     </section>
-    <section id="service-process">
-        <h1 class="title">最嚴謹的服務流程</h1>
-        <div class="process-box">
-            <img src="./img/process/box1.webp" alt="">
-            <div style="margin-top: 70px;" class="process-title">
-                <div class="p-text">填寫需求表單</div>
-                <img src="./img/process/arrowdown.webp" alt="">
+    <div style="width: 100vw; background:#f7f7f7;margin-top: 100px; padding: 50px 0;">
+        <section id="service-process">
+            <h1 class="title">最嚴謹的服務流程</h1>
+            <div class="process-box">
+                <img src="./img/process/box1.webp" alt="">
+                <div style="margin-top: 70px;" class="process-title">
+                    <div class="p-text">填寫裝修需求表單</div>
+                    <img src="./img/process/arrowdown.webp" alt="">
+                </div>
             </div>
-        </div>
-        <div class="process-box">
-            <img src="./img/process/box2.webp" alt="">
-            <div style="margin-top: 50px;" class="process-title">
-                <div class="p-text">專人聯繫</div>
-                <div class="p-text">進行裝修前諮詢</div>
-                <img src="./img/process/arrowdown.webp" alt="">
+            <div class="process-box">
+                <img src="./img/process/box2.webp" alt="">
+                <div style="margin-top: 50px;" class="process-title">
+                    <div class="p-text">專人聯繫</div>
+                    <div class="p-text">進行裝修前諮詢</div>
+                    <img src="./img/process/arrowdown.webp" alt="">
+                </div>
             </div>
-        </div>
-        <div class="process-box">
-            <img src="./img/process/box3.webp" alt="">
-            <div style="margin-top: 30px;" class="process-title">
-                <div class="p-text">依照屋主的需求</div>
-                <div class="p-text">推薦合法立案的</div>
-                <div class="p-text">設計公司</div>
-                <img src="./img/process/arrowdown.webp" alt="">
+            <div class="process-box">
+                <img src="./img/process/box3.webp" alt="">
+                <div style="margin-top: 30px;" class="process-title">
+                    <div class="p-text">依照屋主的需求</div>
+                    <div class="p-text">推薦合法立案的</div>
+                    <div class="p-text">設計公司</div>
+                    <img src="./img/process/arrowdown.webp" alt="">
+                </div>
             </div>
-        </div>
-        <div class="process-box">
-            <img src="./img/process/box4.webp" alt="">
-            <div style="margin-top: 50px;" class="process-title">
-                <div class="p-text">設計公司會</div>
-                <div class="p-text">主動與屋主聯繫</div>
-                <img src="./img/process/arrowdown.webp" alt="">
+            <div class="process-box">
+                <img src="./img/process/box4.webp" alt="">
+                <div style="margin-top: 50px;" class="process-title">
+                    <div class="p-text">設計公司會</div>
+                    <div class="p-text">主動與屋主聯繫聯繫</div>
+                    <img src="./img/process/arrowdown.webp" alt="">
+                </div>
             </div>
-        </div>
-        <div class="process-box">
-            <img src="./img/process/box5.webp" alt="">
-            <div style="margin-top: 30px;" class="process-title">
-                <div class="p-text">選擇是否使用</div>
-                <div class="p-text">幸福經紀人制度</div>
-                <div class="p-text">來保障裝修權益</div>
-                <img src="./img/process/arrowdown.webp" alt="">
+            <div class="process-box">
+                <img src="./img/process/box5.webp" alt="">
+                <div style="margin-top: 30px;" class="process-title">
+                    <div class="p-text">選擇是否使用</div>
+                    <div class="p-text">幸福經紀人制度</div>
+                    <div class="p-text">來保障裝修權益</div>
+                    <img src="./img/process/arrowdown.webp" alt="">
+                </div>
             </div>
-        </div>
-        <div class="process-box">
-            <img src="./img/process/box6.webp" alt="">
-            <div style="margin-top: 50px;" class="process-title">
-                <div class="p-text">媒合成功</div>
+            <div class="process-box">
+                <img src="./img/process/box6.webp" alt="">
+                <div style="margin-top: 50px;" class="process-title">
+                    <div class="p-text">媒合成功</div>
+                </div>
             </div>
-        </div>
-    </section>
+        </section>
+    </div>
 
     <section id="feedback">
         <h1 class="title">客戶真實見證</h1>
         <div class="feedback-slider1">
             <div class="box">
-                <img src="./img/feedback/feedback01.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=2905"><img src="./img/feedback/feedback01.webp" alt=""></a>
                 <p>嚮往仁文街處的溫度-文響</p>
-                <a href="https://hhh.com.tw/video-post.php?id=2905"><img  class="play" src="./img/play (1).png" alt=""></a>
-            </div>            <div class="box">
-                <img src="./img/feedback/feedback02.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=2905"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
+            </div>
+            <div class="box">
+                <a href="https://hhh.com.tw/video-post.php?id=3782"><img src="./img/feedback/feedback02.webp" alt=""></a>
                 <p>緞帶般曲線 譜出家的律動與甜蜜</p>
-                <a href="https://hhh.com.tw/video-post.php?id=3782"><img  class="play" src="./img/play (1).png" alt=""></a>
+                <a href="https://hhh.com.tw/video-post.php?id=3782"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback03.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=3549"><img src="./img/feedback/feedback03.webp" alt=""></a>
                 <p>系統設計的變革 前衛科技宅</p>
-                <a href="https://hhh.com.tw/video-post.php?id=3549"><img  class="play" src="./img/play (1).png" alt=""></a>
+                <a href="https://hhh.com.tw/video-post.php?id=3549"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback04.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=2985"><img src="./img/feedback/feedback04.webp" alt=""></a>
                 <p>用系統設計 實現歐洲皇室城堡夢</p>
-                <a href="https://hhh.com.tw/video-post.php?id=2985"><img  class="play" src="./img/play (1).png" alt=""></a>
+                <a href="https://hhh.com.tw/video-post.php?id=2985"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback05.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=2122"><img src="./img/feedback/feedback05.webp" alt=""></a>
                 <p>不良格局變身 3米6日光鄉村宅</p>
-                <a href="https://hhh.com.tw/video-post.php?id=2122"><img  class="play" src="./img/play (1).png" alt=""></a>
+                <a href="https://hhh.com.tw/video-post.php?id=2122"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback06.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=3847"><img src="./img/feedback/feedback06.webp" alt=""></a>
                 <p>雙拼豪宅古典、日式一次擁有</p>
-                <a href="https://hhh.com.tw/video-post.php?id=3847"><img  class="play" src="./img/play (1).png" alt=""></a>
+                <a href="https://hhh.com.tw/video-post.php?id=3847"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
             </div>
 
         </div>
     </section>
 
-    <section id="contact-us">
+    <section id="contact-us" style="width: 100vw; background: #f7f7f7;">
         <div id="form-title">
-            <h1>已經服務超過14392個生活</h1>
+            <h1>已經服務超過<span style="font-size: 28px;">14392</span>個家庭</h1>
             <h1>打造夢想中的完美居家生活</h1>
             <h1>即刻啟動!</h1>
 
         </div>
         <div id="form-text">
-            <p>請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone" style="color:  #ee751b;">0800-336-086</span></p>
+            <p>請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone"
+                    style="color:  #ee751b;">0800-336-086</span></p>
             <p>或填寫以下資料，專人將盡速與您聯繫。</p>
         </div>
-        <div id="contact-form">
-            <select name="location" id="location">
-                <option value="地區" disabled selected="selected">地區</option>
-                <option class="option" value="type">基隆市</option>
-                <option class="option" value="type">台北市</option>
-                <option class="option" value="type">新北市</option>
-                <option class="option" value="type">桃園市</option>
-                <option class="option" value="type">新竹縣</option>
-                <option class="option" value="type">新竹市</option>
-                <option class="option" value="type">苗栗縣</option>
-                <option class="option" value="type">台中市</option>
-                <option class="option" value="type">彰化縣</option>
-                <option class="option" value="type">雲林縣</option>
-                <option class="option" value="type">嘉義縣</option>
-                <option class="option" value="type">嘉義市</option>
-                <option class="option" value="type">台南市</option>
-                <option class="option" value="type">高雄市</option>
-                <option class="option" value="type">屏東縣</option>
-                <option class="option" value="type">宜蘭縣</option>
-                <option class="option" value="type">花蓮縣</option>
-                <option class="option" value="type">台東縣</option>
-                <option class="option" value="type">澎湖縣</option>
-
-
-            </select>
-            <select name="type" id="type">
-                <option value="房屋類型" disabled selected="selected">房屋類型</option>
-                <option class="option" value="type">預售屋</option>
-                <option class="option" value="type">中古屋</option>
-                <option class="option" value="type">新成屋</option>
-                <option class="option" value="type">毛胚屋</option>
-                <option class="option" value="type">自地自建</option>
-            </select>
-            <select name="modal" id="modal">
-                <option value="modal" disabled selected="selected">房屋型態</option>
-                <option class="option" value="type">透天</option>
-                <option class="option" value="type">電梯華廈</option>
-                <option class="option" value="type">公寓</option>
-                <option class="option" value="type">平房</option>
-                <option class="option" value="type">民宿</option>
-                <option class="option" value="type">商空</option>
-                <option class="option" value="type">其他</option>
-            </select>
-            <select name="budget" id="budget">
-                <option value="裝修預算" disabled selected="selected">裝修預算</option>
-                <option class="option" value="type">50~100萬</option>
-                <option class="option" value="type">100~200萬</option>
-                <option class="option" value="type">200~300萬</option>
-                <option class="option" value="type">300萬~400萬</option>
-                <option class="option" value="type">400~500萬</option>
-                <option class="option" value="type">500萬以上</option>
-            </select>
-            <input type="text" id="square" placeholder="請輸入坪數" required>
-            <select name="rooms" id="rooms">
-                <option value="幾房" disabled selected="selected">幾房</option>
-                <option class="option" value="type">1房</option>
-                <option class="option" value="type">2房</option>
-                <option class="option" value="type">3房</option>
-                <option class="option" value="type">4房</option>
-                <option class="option" value="type">5房</option>
-                <option class="option" value="type">6房</option>
-                <option class="option" value="type">7房</option>
-                <option class="option" value="type">8房</option>
-            </select>
-            <select name="living room" id="livingroom">
-                <option value="living room" disabled selected="selected">幾廳</option>
-                <option class="option" value="type">1廳</option>
-                <option class="option" value="type">2廳</option>
-            </select>
-            <select name="bathroom" id="bathroom">
-                <option value="bathroom" disabled selected="selected">幾衛</option>
-                <option class="option" value="type">1衛</option>
-                <option class="option" value="type">2衛</option>
-                <option class="option" value="type">3衛</option>
-                <option class="option" value="type">4衛</option>
-                <option class="option" value="type">5衛</option>
-                <option class="option" value="type">6衛</option>
-                <option class="option" value="type">7衛</option>
-                <option class="option" value="type">8衛</option>
-            </select>
-            <select name="cars" id="style">
-                <option value="風格類型" disabled selected="selected">風格類型</option>
-                <option class="option" value="type">現代風</option>
-                <option class="option" value="type">鄉村風</option>
-                <option class="option" value="type">古典風</option>
-                <option class="option" value="type">休閒多元</option>
-                <option class="option" value="type">美式風</option>
-                <option class="option" value="type">奢華風</option>
-                <option class="option" value="type">新古典</option>
-                <option class="option" value="type">日式禪風</option>
-                <option class="option" value="type">東方風</option>
-                <option class="option" value="type">混搭風</option>
-                <option class="option" value="type">前衛風</option>
-                <option class="option" value="type">北歐風</option>
-                <option class="option" value="type">工業風</option>
-                <option class="option" value="type">異國風</option>
-            </select>
-            <input type="text" id="date" placeholder="預選裝修日期" required>
-            <div id="facebook">
-                <img src="./img/process/facebook.webp" alt="">
-                <p>使用FB填入信箱與姓名 </p>
+        <form class="contact-form1">
+            <div id="contact-form">
+                <select name="loc" id="location" required>
+                    <option value="地區" disabled selected="selected">地區</option>
+                    <option class="option" value="type">基隆市</option>
+                    <option class="option" value="type">台北市</option>
+                    <option class="option" value="type">新北市</option>
+                    <option class="option" value="type">桃園市</option>
+                    <option class="option" value="type">新竹縣</option>
+                    <option class="option" value="type">新竹市</option>
+                    <option class="option" value="type">苗栗縣</option>
+                    <option class="option" value="type">台中市</option>
+                    <option class="option" value="type">彰化縣</option>
+                    <option class="option" value="type">雲林縣</option>
+                    <option class="option" value="type">嘉義縣</option>
+                    <option class="option" value="type">嘉義市</option>
+                    <option class="option" value="type">台南市</option>
+                    <option class="option" value="type">高雄市</option>
+                    <option class="option" value="type">屏東縣</option>
+                    <option class="option" value="type">宜蘭縣</option>
+                    <option class="option" value="type">花蓮縣</option>
+                    <option class="option" value="type">台東縣</option>
+                    <option class="option" value="type">澎湖縣</option>
+
+
+                </select>
+                <select name="h_class" id="type" required>
+                    <option value="房屋類型" disabled selected="selected">房屋類型</option>
+                    <option class="option" value="type">預售屋</option>
+                    <option class="option" value="type">中古屋</option>
+                    <option class="option" value="type">新成屋</option>
+                    <option class="option" value="type">毛胚屋</option>
+                    <option class="option" value="type">自地自建</option>
+                </select>
+                <select name="type" id="modal" required>
+                    <option value="modal" disabled selected="selected">房屋型態</option>
+                    <option class="option" value="type">透天</option>
+                    <option class="option" value="type">電梯華廈</option>
+                    <option class="option" value="type">公寓</option>
+                    <option class="option" value="type">平房</option>
+                    <option class="option" value="type">民宿</option>
+                    <option class="option" value="type">商空</option>
+                    <option class="option" value="type">其他</option>
+                </select>
+                <select name="budget" id="budget" required>
+                    <option value="裝修預算" disabled selected="selected">裝修預算</option>
+                    <option class="option" value="type">50~100萬</option>
+                    <option class="option" value="type">100~200萬</option>
+                    <option class="option" value="type">200~300萬</option>
+                    <option class="option" value="type">300萬~400萬</option>
+                    <option class="option" value="type">400~500萬</option>
+                    <option class="option" value="type">500萬以上</option>
+                </select>
+                <input name="size" type="text" id="square" placeholder="請輸入坪數" required>
+                <select name="bed_num" id="rooms" required>
+                    <option value="幾房" disabled selected="selected">2房</option>
+                    <option class="option" value="1">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="liv_num" id="livingroom" required style="margin-right:1.5vw">
+                    <option value="living room" disabled selected="selected">2廳</option>
+                    <option class="option" value="1">1</option>
+                    <option class="option" value="2">2</option>
+                </select>
+                <select name="bath_num" id="bathroom" required>
+                    <option value="bathroom" disabled selected="selected">1衛</option>
+                    <option class="option" value="1">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" value="type">現代風</option>
+                    <option class="option" value="type">鄉村風</option>
+                    <option class="option" value="type">古典風</option>
+                    <option class="option" value="type">休閒多元</option>
+                    <option class="option" value="type">美式風</option>
+                    <option class="option" value="type">奢華風</option>
+                    <option class="option" value="type">新古典</option>
+                    <option class="option" value="type">日式禪風</option>
+                    <option class="option" value="type">東方風</option>
+                    <option class="option" value="type">混搭風</option>
+                    <option class="option" value="type">前衛風</option>
+                    <option class="option" value="type">北歐風</option>
+                    <option class="option" value="type">工業風</option>
+                    <option class="option" value="type">異國風</option>
+                </select>
+                <input name="prefer_date" type="text" id="date"  placeholder="預選裝修日期" required>
+                <div id="fb_login">
+                    <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">使用FB填入信箱與姓名</fb:login-button>
+                    <div id="status"></div>
+                </div>
+                <input type="text" name="email" id="email" placeholder="請輸入信箱" required>
+                <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
+                <input type="text" name="phone" id="phone" placeholder="請輸入電話" required>
+                <select name="gender" id="gender">
+                    <option value="性格" disabled selected="selected">性別</option>
+                    <option class="option" value="type">男</option>
+                    <option class="option" value="type">女</option>
+                </select>
+                <input type="checkbox" id="checkbox" checked> <label id="agree" for="agree">同意</label><a
+                    href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
+                <div class="form-btn">
+                    <input class="btn" style="opacity: 1;" type="submit" value="送出">
+                </div>
             </div>
-            <input type="text" id="email" placeholder="請輸入信箱" required>
-            <input type="text" id="name" placeholder="請輸入姓名" required>
-            <input type="text" id="phone" placeholder="請輸入電話" required>
-            <select name="cars" id="gender">
-                <option value="性格" disabled selected="selected">性別</option>
-                <option class="option" value="type">男</option>
-                <option class="option" value="type">女</option>
-            </select>
-            <input type="checkbox" id="checkbox"> <label id="agree" for="agree">同意</label><a href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
-        </div>
-        <div id="form">
-            <button id="btn">送出</button>
-        </div>
+        </form>
     </section>
     <div id="footer">
         <p>幸福空間 版權所有 &copy; Gorgeous Space Co.Ltd.</p>
         <p>All Rights Reserved.</p>
-        <a href="x">｜聯絡我們</a>
-        <a href="">｜關於本站｜</a>
+        <a href="https://hhh.com.tw/about/contact/">｜聯絡我們</a>
+        <a href="https://hhh.com.tw/about/">｜關於本站｜</a>
     </div>
 
+
+    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
         crossorigin="anonymous"></script>
@@ -414,6 +456,7 @@
         crossorigin="anonymous"></script>
     <!-- jQuery CDN -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
     <script src="./script/goto.js"></script>
 </body>

mobile/script/goto.js

@@ -1,67 +1,204 @@
 // menu彈跳視窗
 
 $("#menu-box2").hide();
+$("#menu-box").hide();
 
 $("#menu-btn1").click(function () {
-    $("#menu-box2").slideToggle( "slow" );
+  $("#menu-box").fadeToggle("slow");
+  $("#menu-box2").slideToggle("slow");
+
 });
 
 $(".feedback-slider1").slick({
-    dots:true,
-    dotsClass:'slick-dots',
-    speed:1000, 
-    swipe:true,
-  });
+  dots: true,
+  dotsClass: 'slick-dots',
+  speed: 1000,
+  swipe: true,
+});
+
+$(".banner-slider").slick({
+  dots: true,
+  dotsClass: 'slick-dots',
+  speed: 1000,
+  swipe: true,
+});
 
-  $(".banner-slider").slick({
-    dots:true,
-    dotsClass:'slick-dots',
-    speed:1000, 
-   
+$(".link").click(function () {
+  $("#menu-box2").fadeOut("slow", function () {
+    // Animation complete.
   });
+});
 
-  $( ".link" ).click(function() {
-    $( "#menu-box2" ).fadeOut( "slow", function() {
-      // Animation complete.
-    });
+$.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 || '';
+    }
   });
 
-  $("*").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() 將文字轉為數字
+  return o;
+};
+
+ // email 格式檢查
+ $(document).ready(function () {
   
-        $("html").stop().animate({
-          scrollTop: top - offset
-        }, parseInt(duration));
+  //E-MAIL格式檢查
+
+  $("body").on("change", "#email", function () {
+
+    $Emailchecking = IsEmail($("#email").val());
+
+
+    if ($Emailchecking == false) {
+
+      alert("請填寫正確的E-MAIL格式");
+
+      // $("#email").blur(); //離開焦點
+
+    }
+
+  })
+
+  function IsEmail(email) {
+
+    var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+
+    if (!regex.test(email)) {
+
+      return false;
+
+    } else {
+
+      return true;
+
+    }
+
+  }
+
+});
+// phone 格式檢查
+$(document).ready(function () {
+
+  //phone格式檢查
+
+  $("body").on("change", "#phone", function () {
+
+    $Phonechecking = IsPhone($("#phone").val());
+
+
+    if ($Phonechecking == false) {
+
+      alert("請填寫正確的手機格式");
+
+      // $("#email").blur(); //離開焦點
+
+    }
+
+  })
+
+  function IsPhone(phone) {
+
+    var regex = /^[0-9]+$/;
+
+    if (!regex.test(phone)) {
+
+      return false;
+
+    } else {
+
+      return true;
+
+    }
+
+  }
+
+});
+$(".contact-form1").submit(function (e) {
+  /*	var formRef = $('#form1').serializeArray();
+    var jsonString = JSON.stringify(formRef);*/
+  var jsonInfo = $('.contact-form1').serializeObject();
+  var jsonString = JSON.stringify(jsonInfo);
+  $.ajax({
+    type: 'POST',
+    url: 'https://go.hhh.com.tw:8001/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已填過表單");
       }
-    });
+    },
+    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);
+    }
   });
-  
-  // 避免動畫與使用者滾輪衝突
-  // html 在滾動滾輪時 停止 html 所有效果
-  $("html").on("mousewheel", function () {
-    $("html").stop();
+  return false;
+});
+
+
+$("*").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();
+});
+
+$(document).ready(function () {
+  $("#date").datepicker();
+});

mobile/style.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;600&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -12,15 +13,10 @@
   font-weight: 900;
 }
 
-body {
-  height: 6000px;
-}
-
 body .title {
-  font-weight: 900;
+  font-weight: bolder;
   padding: 15px;
-  font-family: "Times New Roman", Times, serif;
-  font-size: 36px;
+  font-family: 'Noto Serif TC', serif !important;
   color: #4b515e;
   text-align: center;
 }
@@ -33,14 +29,19 @@ body .title {
 
 @media screen and (max-width: 767px) {
   body .title {
-    font-size: 34px;
+    font-size: 40px;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  body .title {
+    font-size: 30px !important;
   }
 }
 
 body .btn {
   width: 100vw;
   text-align: center;
-  margin-top: 20px;
 }
 
 body .btn-main {
@@ -56,7 +57,6 @@ body .btn-main {
   border-radius: 30px;
   -webkit-transition: 0.3s;
   transition: 0.3s;
-  margin-top: 50px;
 }
 
 body .btn-main:hover {
@@ -72,6 +72,21 @@ body .btn-main:hover {
   }
 }
 
+body .arrow {
+  position: fixed;
+  right: 20px;
+  bottom: 100px;
+  width: 45px;
+  height: 40px;
+  z-index: 10;
+  background-color: #E06649;
+}
+
+body .arrow:hover {
+  -webkit-box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+          box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+}
+
 .navigation {
   width: auto;
   height: 60px;
@@ -101,6 +116,8 @@ body .btn-main:hover {
 
 #banner-box {
   height: 45vh;
+  overflow: hidden;
+  position: relative;
 }
 
 @media screen and (max-width: 767px) {
@@ -130,6 +147,7 @@ body .btn-main:hover {
   height: 50vh;
   background-size: contain;
   background-repeat: no-repeat;
+  background-size: 100vw 70vh;
 }
 
 @media screen and (max-width: 767px) {
@@ -138,7 +156,7 @@ body .btn-main:hover {
   #banner-box .banner-slider .banner3 {
     height: 50vh;
     background-size: cover;
-    background-position: 40% 50%;
+    background-position: center center;
   }
 }
 
@@ -195,6 +213,12 @@ body .btn-main:hover {
   }
 }
 
+@media screen and (max-width: 400px) {
+  #content1 .title {
+    font-size: 25px;
+  }
+}
+
 #content1 .text {
   position: relative;
 }
@@ -225,7 +249,7 @@ body .btn-main:hover {
   color: #fff;
   text-align-last: left;
   font-size: 20px;
-  letter-spacing: 5px;
+  letter-spacing: 1px;
 }
 
 @media screen and (max-width: 1024px) {
@@ -236,7 +260,13 @@ body .btn-main:hover {
 
 @media screen and (max-width: 767px) {
   #content1 .text .text2 h2 {
-    font-size: 22px;
+    font-size: 1.3rem;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  #content1 .text .text2 h2 {
+    font-size: 1.1rem;
   }
 }
 
@@ -261,6 +291,14 @@ body .btn-main:hover {
   text-align: center;
 }
 
+@media screen and (max-width: 400px) {
+  #service h1 {
+    margin: 50px 0;
+    padding: 0;
+    font-size: 30px !important;
+  }
+}
+
 #service .text {
   font-size: 1.5rem;
   display: inline;
@@ -279,6 +317,11 @@ body .btn-main:hover {
   }
 }
 
+#service .text .left-box .left-text {
+  color: #000;
+  font-weight: 900;
+}
+
 @media screen and (max-width: 769px) {
   #service .text .left-box .left-text {
     padding-top: 3vw;
@@ -287,10 +330,17 @@ body .btn-main:hover {
 
 @media screen and (max-width: 576px) {
   #service .text .left-box .left-text {
+    font-size: 0.9rem;
     padding-top: 5vw;
   }
 }
 
+@media screen and (max-width: 400px) {
+  #service .text .left-box .left-text {
+    font-size: 0.7rem;
+  }
+}
+
 @media screen and (max-width: 769px) {
   #service .text .left-box {
     width: 45vw;
@@ -306,6 +356,14 @@ body .btn-main:hover {
   }
 }
 
+@media screen and (max-width: 400px) {
+  #service .text .left-box {
+    padding-top: 5px;
+    margin-top: 15px;
+    padding-left: 10px;
+  }
+}
+
 #service .icon {
   width: 20vw;
 }
@@ -320,9 +378,16 @@ body .btn-main:hover {
   }
 }
 
+@media screen and (max-width: 400px) {
+  #service h1 {
+    font-size: 30px !important;
+  }
+}
+
 #service-process {
   margin: 0 auto;
   width: 60vw;
+  background-color: #f7f7f7;
 }
 
 @media screen and (max-width: 767px) {
@@ -331,10 +396,6 @@ body .btn-main:hover {
   }
 }
 
-#service-process h1 {
-  margin-top: 150px;
-}
-
 @media screen and (max-width: 1024px) {
   #service-process h1 {
     margin-bottom: 150px;
@@ -440,6 +501,7 @@ body .btn-main:hover {
 #feedback {
   margin: auto;
   width: 70vw;
+  padding-top: 50px;
 }
 
 @media screen and (max-width: 767px) {
@@ -459,7 +521,6 @@ body .btn-main:hover {
 }
 
 #feedback h1 {
-  margin-top: 150px;
   margin-bottom: 50px;
 }
 
@@ -504,6 +565,10 @@ body .btn-main:hover {
   z-index: 10;
 }
 
+#contact-us {
+  margin-top: 100px;
+}
+
 #contact-us p {
   font-size: 16px;
   font-weight: 600;
@@ -526,7 +591,7 @@ body .btn-main:hover {
 #contact-us #form-title {
   padding-top: 100px;
   margin-bottom: 50px;
-  color: #5c5248;
+  color: #4b515e;
 }
 
 #contact-us #form-text {
@@ -552,6 +617,7 @@ body .btn-main:hover {
 #contact-us h1 {
   text-align: center;
   font-size: 24px;
+  font-weight: 900;
 }
 
 @media screen and (max-width: 1024px) {
@@ -570,6 +636,22 @@ body .btn-main:hover {
   text-align: center;
 }
 
+#contact-us #contact-form .btn {
+  margin: 50px auto;
+  border: none;
+  padding: 15px;
+  background: #ffaf60;
+  color: #404854;
+  font-size: 20px;
+  width: 300px;
+  border-radius: 30px;
+}
+
+#contact-us #contact-form .btn:hover {
+  color: #fff;
+  background-color: #745c54;
+}
+
 #contact-us #contact-form #location,
 #contact-us #contact-form #type,
 #contact-us #contact-form #modal,
@@ -614,11 +696,11 @@ body .btn-main:hover {
   margin: 0 auto;
 }
 
-#contact-us #contact-form #facebook {
+#contact-us #contact-form #000 {
   margin: 15px auto;
   width: 85vw;
   height: 60px;
-  border: 1px solid #000093;
+  border: 1px solid #3B5998;
   text-align: right;
   background-color: #fff;
   -webkit-transition: 0.3s;
@@ -626,25 +708,25 @@ body .btn-main:hover {
   position: relative;
 }
 
-#contact-us #contact-form #facebook p {
+#contact-us #contact-form #000 p {
   position: absolute;
   right: 30px;
   font-weight: normal;
 }
 
 @media screen and (max-width: 1024px) {
-  #contact-us #contact-form #facebook p {
+  #contact-us #contact-form #000 p {
     top: 10px;
   }
 }
 
 @media screen and (max-width: 767px) {
-  #contact-us #contact-form #facebook p {
+  #contact-us #contact-form #000 p {
     top: 15px;
   }
 }
 
-#contact-us #contact-form #facebook img {
+#contact-us #contact-form #000 img {
   position: absolute;
   left: 30px;
   top: 15px;
@@ -652,12 +734,12 @@ body .btn-main:hover {
   height: 32px;
 }
 
-#contact-us #contact-form #facebook:hover {
+#contact-us #contact-form #000:hover {
   background-color: #2a4f91;
   color: #fff;
 }
 
-#contact-us #contact-form #facebook:hover img {
+#contact-us #contact-form #000:hover img {
   -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
           filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 }
@@ -667,13 +749,6 @@ body .btn-main:hover {
   color: #ee751b;
 }
 
-#contact-us #contact-form #checkbox {
-  margin-top: 50px;
-  padding: 20px;
-  width: 15px;
-  height: 15px;
-}
-
 #contact-us #contact-form #email,
 #contact-us #contact-form #name,
 #contact-us #contact-form #phone {
@@ -690,29 +765,12 @@ body .btn-main:hover {
   position: relative;
 }
 
-#contact-us #form #btn {
-  margin: 50px auto;
-  border: none;
-  padding: 15px;
-  background: #ffaf60;
-  color: #404854;
-  font-size: 20px;
-  width: 300px;
-  border-radius: 30px;
-}
-
-#contact-us #form #btn:hover {
-  color: #fff;
-  background-color: #745c54;
-}
-
 #contact-us #form #phone {
   position: absolute;
   left: 500px;
 }
 
 #footer {
-  margin-top: 50px;
   padding-top: 50px;
   width: 100vw;
   height: 150px;
@@ -740,10 +798,12 @@ body .btn-main:hover {
   width: 100vw;
   position: fixed;
   z-index: 5;
+  overflow: hidden;
 }
 
 #menu-box hr {
-  margin: 30px;
+  margin-left: 10px;
+  width: 350px;
   background: #65584c;
 }
 

mobile/style.scss

@@ -6,6 +6,7 @@
 $table: 1024px;
 $moblie: 767px;
 
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;600&display=swap');
 $process: #6f645a;
 // 行動裝置
 @font-face {
@@ -17,26 +18,28 @@ $Font-color: #fff;
 $toggle: #9c857b;
 $title-color: #4b515e;
 body {
-    height: 6000px;
-
+   
     .title {
-        font-weight: 900;
+        font-weight: bolder;
         padding: 15px;
-        font-family: "Times New Roman", Times, serif;
-        font-size: 36px;
+        font-family: 'Noto Serif TC', serif !important;
         color:$title-color;
         text-align: center;
         @media screen and(max-width:$table) {
             font-size: 48px;
         }
         @media screen and(max-width:$moblie) {
-            font-size: 34px;
+            font-size: 40px;
         }
+        @media screen and(max-width:400px) {
+            font-size:30px!important;
+           
+        }
+        
     }
     .btn {
         width: 100vw;
         text-align: center;
-        margin-top: 20px;
     }
     .btn-main {
         box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
@@ -49,7 +52,6 @@ body {
         width: 280px;
         border-radius: 30px;
         transition: 0.3s;
-        margin-top: 50px;
         &:hover {
             background-color: $toggle;
             width: 285px;
@@ -60,6 +62,20 @@ body {
             padding: 20px;
         }
     }
+    .arrow {
+        position: fixed;
+        right: 20px;
+        bottom: 100px;
+        width: 45px;
+    height: 40px;
+        z-index: 10;
+        background-color: #E06649;
+        &:hover{
+            box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+        }
+
+
+    }
 }
 .navigation {
     width: auto;
@@ -85,7 +101,8 @@ body {
 }
 #banner-box {
     height: 45vh;
-
+    overflow: hidden;
+    position:relative;
     @media screen and(max-width:$moblie) {
         height: 50vh;
     }
@@ -107,10 +124,12 @@ body {
             height: 50vh;
             background-size: contain;
             background-repeat: no-repeat;
+            background-size: 100vw 70vh;
+          
             @media screen and(max-width:$moblie) {
                 height: 50vh;
                 background-size: cover;
-                background-position: 40% 50%;
+                background-position:center center;
             }
 
             @media screen and(max-width:$table) {
@@ -149,6 +168,10 @@ body {
         @media screen and(max-width:$moblie) {
             font-size: 30px;
         }
+        @media screen and(max-width:400px) {
+            font-size: 25px;
+         }
+        
     }
     .text {
         position: relative;
@@ -165,18 +188,22 @@ body {
                 width: 80vw;
                 left: 10vw;
             }
+           
 
             h2 {
                 line-height: 1.5;
                 color: #fff;
                 text-align-last: left;
                 font-size: 20px;
-                letter-spacing: 5px;
+                letter-spacing: 1px;
                 @media screen and(max-width:$table) {
                     font-size: 32px;
                 }
                 @media screen and(max-width:$moblie) {
-                    font-size: 22px;
+                    font-size: 1.3rem;
+                }
+                @media screen and(max-width: 400px) {
+                    font-size: 1.1rem;
                 }
             }
         }
@@ -195,7 +222,14 @@ body {
 #service {
     width: 100vw;
     text-align: center;
-    
+    h1{
+        @media screen and(max-width: 400px) {
+            margin: 50px 0;
+            padding: 0;
+            font-size: 30px !important;
+        }
+        
+    }
     .text {
         font-size: 1.5rem;
         display: inline;
@@ -210,13 +244,18 @@ body {
 
         .left-box {
             .left-text{
+                color: #000;
+                font-weight: 900;
                 @media screen and(max-width: 769px) {
                     padding-top: 3vw;
                 }
                 @media screen and(max-width: 576px) {
-                   
+                   font-size: 0.9rem;
                     padding-top: 5vw;
                 }
+                @media screen and(max-width: 400px) {
+                    font-size: 0.7rem;
+                }
             }
             @media screen and(max-width: 769px) {
                 width: 45vw;
@@ -227,6 +266,10 @@ body {
                 padding-left: 30px;
                 margin-top: 20px;
             }
+            @media screen and(max-width: 400px) {
+               padding-top:5px;
+               margin-top: 15px;   
+            padding-left: 10px;         }
         }
     }
     .icon {
@@ -237,98 +280,23 @@ body {
         @media screen and(max-width:$moblie) {
             font-size: 34px;
         }
+        @media screen and(max-width: 400px) {
+            font-size:30px!important;
+           
+        }
     }
-    // .service-box {
-    //     display: grid;
-    //     grid-template-columns: repeat(2, 1fr);
-    //     width: 100vw;
-    //     height: 35vh;
-    //     @media screen and(max-width:$moblie) {
-    //         width: 100vw;
-    //         height: 40vh;
-    //     }
-    //     @media screen and(max-width:$table) {
-    //         width: 100vw;
-
-    //     }
-    //     .text-left {
-    //         background: #eee;
-    //         text-align: left;
-    //         @media screen and(max-width:$table) {
-    //             width: 40vw;
-    //             height: 32vh;
-    //             padding-left: 10vw;
-
-    //         }
-    //         @media screen and(max-width:$moblie) {
-    //             text-align: left;
-    //             width: 50vw;
-    //             padding-left:-10vw;
-    //         }
-
-    //         .icon-text {
-    //             width: 60vw;
-    //             @media screen and(max-width:$moblie) {
-    //                 margin: 10px 10px;
-    //                 font-size: 15px;
-    //             }
-    //             @media screen and(max-width:$table) {
-    //                 font-size: 24px;
-    //                padding-top: 3vw;
-
-    //             }
-    //             p {
-    //                 font-family: 微軟正黑體;
-    //                 font-weight: bolder;
-    //                 font-size: 15px;
-    //                 line-height: 1.5;
-    //                 text-align: left;
-    //                 @media screen and(max-width:$table) {
-    //                     font-size: 24px;
-    //                 }
-    //                 @media screen and(max-width:$moblie) {
-    //                     font-size: 14px;
-    //                 }
-    //             }
-    //         }
-    //         img {
-
-    //             @media screen and(max-width:$table) {
-    //                 width: 150px;
-    //                 height: 150px;
-    //                 margin-top: 2vw;
-    //             }
-    //             @media screen and(max-width:$moblie) {
-    //                 width: 80px;
-    //                 height: 80px;
-    //                 margin-left: 15px;
-    //             }
-    //         }
-    //     }
-    //     .text-right {
-    //         img {
-    //             object-fit: cover;
-    //             @media screen and(max-width:$table) {
-    //                 height: 32vh;
-    //                 width: 60vw;
-    //             }
-    //             @media screen and(max-width:$moblie) {
-    //                 width: 50vw;
-    //                 height: 32vh;
-    //             }
-    //         }
-    //     }
-    // }
+    
 }
 #service-process {
+   
     margin: 0 auto;
     width: 60vw;
+    background-color: #f7f7f7;
     @media screen and(max-width:$moblie) {
         width: 80vw;
     }
     h1 {
-        margin-top: 150px;
-       
+        
         @media screen and(max-width:$table) {
             margin-bottom: 150px;
         }
@@ -402,6 +370,8 @@ body {
 #feedback {
     margin: auto;
     width: 70vw;
+    padding-top: 50px;
+   
     @media screen and(max-width:$moblie) {
         width: 90vw;
     }
@@ -413,7 +383,7 @@ body {
         }
     }
     h1 {
-        margin-top: 150px;
+       
         margin-bottom: 50px;
     }
     .box {
@@ -450,6 +420,8 @@ body {
     }
 }
 #contact-us {
+    margin-top: 100px;
+  
     p {
         font-size: 16px;
         font-weight: 600;
@@ -467,7 +439,7 @@ body {
     #form-title {
         padding-top: 100px;
         margin-bottom: 50px;
-        color: #5c5248;
+        color: $title-color;
     }
     #form-text {
         width: 100vw;
@@ -485,6 +457,7 @@ body {
     h1 {
         text-align: center;
         font-size: 24px;
+        font-weight: 900;
         @media screen and(max-width:$table) {
             font-size: 36px;
         }
@@ -494,6 +467,21 @@ body {
     }
     #contact-form {
         text-align: center;
+        .btn {
+            margin: 50px auto;
+            border: none;
+            padding: 15px;
+            background: #ffaf60;
+            color: rgb(64, 72, 84);
+            font-size: 20px;
+            width: 300px;
+            border-radius: 30px;
+
+            &:hover {
+                color: #fff;
+                background-color: #745c54;
+            }
+        }
         #location,
         #type,
         #modal,
@@ -533,11 +521,11 @@ body {
             display: block;
             margin: 0 auto;
         }
-        #facebook {
+        #000 {
             margin: 15px auto;
             width: 85vw;
             height: 60px;
-            border: 1px solid #000093;
+            border: 1px solid #3B5998;
             text-align: right;
             // background: url(./img/facebook.png) 10% 50% no-repeat scroll transparent;
             // background-size: 32px 32px;
@@ -576,12 +564,7 @@ body {
             text-decoration: none;
             color: #ee751b;
         }
-        #checkbox {
-            margin-top: 50px;
-            padding: 20px;
-            width: 15px;
-            height: 15px;
-        }
+       
         #email,
         #name,
         #phone {
@@ -597,21 +580,7 @@ body {
     #form {
         text-align: center;
         position: relative;
-        #btn {
-            margin: 50px auto;
-            border: none;
-            padding: 15px;
-            background: #ffaf60;
-            color: rgb(64, 72, 84);
-            font-size: 20px;
-            width: 300px;
-            border-radius: 30px;
-
-            &:hover {
-                color: #fff;
-                background-color: #745c54;
-            }
-        }
+      
 
         #phone {
             position: absolute;
@@ -621,7 +590,7 @@ body {
 }
 
 #footer {
-    margin-top: 50px;
+  
     padding-top: 50px;
     width: 100vw;
     height: 150px;
@@ -647,10 +616,14 @@ body {
     width: 100vw;
     position: fixed;
     z-index: 5;
+    overflow: hidden;
+
 
     hr {
-        margin: 30px;
+        margin-left: 10px;
+       width: 350px;
         background: #65584c;
+        
     }
     #menu-box2 {
         width: 100vw;
@@ -659,6 +632,7 @@ body {
         opacity: 0.9;
         z-index: 7;
         text-align: center;
+    
         #menu-link {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
@@ -680,6 +654,7 @@ body {
             color: #65584c;
             font-size: 16px;
             margin-top: 20px;
+
         }
 
         .menu-text {