Most-favorites/about/goto2.js

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var id = getParameterByName('id');
console.log(id);
function get_data() {
    $.ajax({
        method: "GET",
        url: "../designer4.json",
        dataType: "json",

    })
        .done(function (msg) {
            for (var i = 0; i < msg.length; i++) {
                if (msg[i].id == id) {
                    var aboutContent = '';
                    var aboutInt = '';
                    var aboutImg = '';
                    var aboutViedeo = '';
                    var aboutMethod = '';
                    var aboutIntPhone = '';
                    var bodyBannerDes = '';
                    var webtitle = '';
                    console.log(msg[i]);

                    // var res = msg.length;
                    // console.log(res);
                    // const limit = res;
                    // 公司簡介
                    aboutContent += ' \
                    <div class="row px-0 mx-0">\
                    <div class="condition col-12 col-lg-4 bg-white">\
                        <h1 class="fs-3 pb-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>接案條件 condition</h1>\
                        <table class="table">\
                            <tbody>\
                                <tr>\
                                    <th id="title-test" class="w-25" scope="row">接案區域</th>\
                                    <td>\
                                        '+ msg[i].WorkLoc + '\
                                    </td>\
                                </tr>\
                    <tr>\
                        <th scope="row">接案類型</th>\
                        <td>\
                            '+ msg[i].WorkType + '\
                        </td>\
                    </tr>\
                    <tr>\
                        <th scope="row">接案風格</th>\
                        <td>\
                            '+ msg[i].WorkStyle + '\
                        </td>\
                    </tr>\
                    <tr>\
                        <th scope="row">接案預算</th>\
                        <td>\
                            '+ msg[i].WorkBudget + '\
                        </td>\
                    </tr>\
                    <tr>\
                        <th scope="row">接案坪數</th>\
                        <td>\
                            '+ msg[i].WorkSize + '\
                        </td>\
                    </tr>\
                    <tr>\
                        <th scope="row">特殊接案</th>\
                        <td>\
                            '+ msg[i].WorkSoho + '\
                        </td>\
                    </tr>\
                            </tbody >\
                        </table >\
                    </div >\
                    <div style="background: url(../img/about/sec01/idea.webp);  background-size: cover; background-repeat: no-repeat;"\
                        class="idea col-12 col-lg-4 text-white">\
                        <h1 class="fs-3 pb-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>設計理念 idea</h1>\
                        <table class="table table-borderless text-white">\
                        <tbody>\
                            <tr>\
                                <td>\
                                    '+ msg[i].DesignIdea1 + '\
                                </td>\
                            </tr>\
                        </tbody>\
                    </table>\
                    </div>\
                    <div style="background: url(../img/about/sec01/contact.webp);  background-size: cover;  background-repeat: no-repeat;"\
                        class="contact col-12 col-lg-4 text-white">\
                        <h1 class="fs-3 pb-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>聯絡設計師 contact</h1>\
                        <table class="table text-white">\
                            <tbody>\
                                <tr>\
                                <th scope="row" class="">免付費電話／</th>\
                                    <td class="">\
                                    <a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"> ' + msg[i].TollFreeCall + '</a>\
                                    </td>\
                                </tr>\
                                <tr>\
                                <th scope="row" class="">電.&emsp;&emsp;&ensp;話／</th>\
                                    <td>\
                                       '+ msg[i].Telephone + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                <th scope="row" class="">地.&emsp;&emsp;&ensp;址／</th>\
                                    <td>\
                                        '+ msg[i].Address + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                <th scope="row" class="">傳.&emsp;&emsp;&ensp;真／</th>\
                                    <td>\
                                       '+ msg[i].Fax + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <th scope="row" class="">電&thinsp;子&thinsp;郵&thinsp;件／</th>\
                                    <td>\
                                        <a target="_blank" href="mailto:'+ msg[i].Email + '">' + msg[i].Email + '</a>\
                                    </td>\
                                </tr>\
                                <tr>\
                                <th scope="row" class="">網.&emsp;&emsp;&ensp;站／</th>\
                                    <td>\
                                        <a target="_blank" href="'+ msg[i].Web + '">' + msg[i].Web + '</a>\
                                    </td>\
                                </tr>\
                                <tr>\
                                <th scope="row" class="">Facebook:</th>\
                                    <td>\
                                        <a target="_blank" href="'+ msg[i].Facebook + '">' + msg[i].Facebook + '</a>\
                                    </td>\
                                </tr>\
                            </tbody>\
                        </table>\
                    </div>\
                    </div >';

                    aboutInt += ' \
                        <div class="banner-des row vertical align-items-end">\
                            <div class="banner-3 col-2 pe-0">\
                                <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
                            </div>\
                            <div class="banner-0 col-9 text-white">\
                                <div class="row">\
                                    <div class="banner-1 col-9 align-self-end pb-3">\
                                        <div style="font-weight: 900;" class="fs-2">'+ msg[i].WorkName + '</div>\
                                        <p><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
                                        <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"><img class="" src="../img/002-phone-call.svg" alt=""></a>\</button>\
                                        <button type="button" data-info="' + msg[i].id + '" class="mesg btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="../img/001-blogging.svg" alt=""></button>\
                                    </div>\
                                    <div class="banner-2 col-3 row justify-content-end px-0">\
                                    </div>\
                                </div>\
                            </div> \
                        </div>';
                    aboutIntPhone += ' \
                        <div class="banner-m row vertical align-items-end px-0 mx-0">\
                        <div class="bannerm-0 col-12 my-5 px-0">\
                        <a href="../index.html"><img class="img-fluid" src="../img/banner/banner-mobile.png" alt=""></a>\
                        </div>\
                            <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
                                <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
                            </div>\
                            <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
                                <div class="banner1-1 pt-3 pb-1" style="font-weight: 900;">'+ msg[i].WorkName + '</div>\
                                <p class=""><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
                                <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"><img class="" src="../img/002-phone-call.svg" alt=""></a>\</button>\
                                <button type="button" id="'+ msg[i].id + '" data-info="' + msg[i].id + '" class="mesg btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="../img/001-blogging.svg" alt=""></button>\
                             </div>\
                        </div>';


                    for (var j = 0; j < msg[i].workimg.length; j++) {
                        aboutImg += ' \
                            <div class="secimg col-lg-4 mx-0 px-0">\
                            <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><img class="img-fluid" src="' + msg[i].workimg[j].img + '" alt=""></a>\
                                <div class="sec02-p-m p-1 mt-1 text-center">\
                                <p>'+ msg[i].workimg[j].text + '</p>\
                                <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/arrow.png" alt=""></div></a>\
                                </div>\
                            </div>';

                    }
                    var j = 0;

                    if (msg[i].workVideo[j] == undefined) {
                        aboutViedeo += ' \
                                <div id="sec05" class="sec05-row row align-items-center h-100 mx-0 w-100 px-0" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
                                <div style="padding:20vw 0px">\
                                    <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>\
                                    <p class="align-self-center" style="color:#fff;  letter-spacing: 5px;">...敬請期待...</p>\
                                </div>\
                            </div>';
                    } else {
                        for (var j = 0; j < msg[i].workVideo.length; j++) {
                            aboutViedeo += ' \
                                <div class="secimg col-lg-4 p-0">\
                                <a target="_blank" href="'+ msg[i].workVideo[j].videoSrc + '"><img class="img-fluid" src="' + msg[i].workVideo[j].video + '" alt=""></a>\
                                    <div class="sec03-p-m p-1 mt-1 text-center">\
                                    <p class="mb-1">'+ msg[i].workVideo[j].videotext + '</p>\
                                    <a target="_blank" href="'+ msg[i].workVideo[j].videoSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/play.png" alt=""></div></a>\
                                    </div>\
                                </div>';
                        }
                    }
                    var j = 0;
                    if (msg[i].workMethod[j] == undefined) {
                        aboutMethod += ' \
                            <div id="sec05" class="sec05-row row align-items-center h-100 mx-0 w-100 px-0" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
                            <div style="padding:20vw 0px">\
                                <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>\
                                <p class="align-self-center" style="color:#fff;  letter-spacing: 5px;">...敬請期待...</p>\
                            </div>\
                        </div>';
                    } else {
                        for (var j = 0; j < msg[i].workMethod.length; j++) {
                            aboutMethod += ' \
                                <div class="secimg col-lg-4 p-0">\
                                <a target="_blank" href="'+ msg[i].workMethod[j].Methodsrc + '"><img class="img-fluid" src="' + msg[i].workMethod[j].Methodimg + '" alt=""></a>\
                                <div class="sec04-p-m p-1 mt-1 text-center">\
                                    <p>'+ msg[i].workMethod[j].Methodtext + '</p>\
                                    <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/arrow.png" alt=""></div></a>\
                                    </div>\
                                </div>';
                        }
                    }

                    bodyBannerDes += ' \
                        <img class="banner-img" id="img_id"  src="'+ msg[i].workimg[0].img + '" alt="">\
                       ';
                    webtitle += ' \
                       幸福空間::: 2022 觀眾最愛設計師 | 滿足你期待回家的夢想推手|'+ msg[i].DesignerName + '設計師\
                      ';

                    $('.sec03-1').html(aboutViedeo);
                    $('.sec02-1').html(aboutImg);
                    $('.banner-des-about').html(aboutInt);
                    $('.sec01').html(aboutContent);
                    $('.sec04-1').html(aboutMethod);
                    $('.banner-m').html(aboutIntPhone);
                    $('#bannerdes-img').html(bodyBannerDes);
                    $('#webtitle').html(webtitle);
                }
            }

        });
}
get_data();
$(document).on("click", ".mesg", function(event) {
    console.log(1);
    var desid = $(this).data("info");
    console.log(desid);
    $("#version").val(desid);
});
    

$(".arrow").hide();
$(window).scroll(function () {
    var y1 = window.scrollY;
    if (y1 > 100) {
        $(".arrow").show();
    } else {
        $(".arrow").hide();
    }

});

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    o["id"] = 0;
    o["time_stamp"] = "";
    $.each(a, function () {
      if (o[this.name]) {
        if (!o[this.name].push) {
          o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
      } else {
        o[this.name] = this.value || '';
      }
    });
  
    return o;
  };
  
  $(".contact-form1").submit(function (e) {
    /*	var formRef = $('#form1').serializeArray();
      var jsonString = JSON.stringify(formRef);*/
    var jsonInfo = $('.contact-form1').serializeObject();
    var jsonString = JSON.stringify(jsonInfo);
    console.log(jsonString);
    $.ajax({
      type: 'POST',
      url: 'https://go.hhh.com.tw:8002/deco_request_detail',
      data: jsonString,
      dataType: 'json',
  
      success: function (data) {
        console.log('送出成功: ' + data);
        if (data == 0) {
          alert("送出成功");
        } else if (data == 1) {
          alert("此email已填過表單");
        } else if (data == 2) {
          alert("此phone已填過表單");
        } else if (data == 3) {
          alert("此email、phone已填過表單");
        }
        location.href = "./index_complete_line.html";
      },
  
      beforeSend: function () {
        console.log('beforeSend');
      },
      complete: function () {
        console.log('complete');
  
      },
  
      error: function (jqXHR, textStatus, errorThrown) {
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
        console.log('送出失敗: ' + jqXHR.responseText);
        alert("送出失敗");
      }
    });
  
    return false;
  });

// $(window).scroll(function () {
//     var y = window.scrollY;

//     if (y > 550) {
//         $(".nav").addClass("sfixed");
//     } else {
//         $(".nav").removeClass("sfixed");
//     }

// });
if (jQuery(window).width() < 767) {

    $(window).scroll(function () {
        var y = window.scrollY;

        if (y > 550) {
            $(".nav").css({ "position": "fixed", "top": "75px", "z-index": "10" });
        } else {
            $(".nav").css({ "position": "static" });
        }

    });
}

// $(document).ready(function(){
//     $(window).resize(function() {
//         wdth=$(window).width();
//       console.log(wdth)
//     });
// });
$("*").each(function (index, element) {
    // 此元素被點選後執行
    $(this).click(function (e) {
        // 取得被點選元素的屬性：data-gt-target
        var target = $(this).attr("data-gt-target");
        var duration = $(this).attr("data-gt-duration");
        var offset = $(this).attr("data-gt-offset");

        // JS 語法：判斷式
        // if (條件) {程式區塊}
        // 當條件成立，會執行程式區塊

        // 如果 目標有資料 才會執行 { } 內的程式
        // 避免出現 undefine (未定義 - 不存在的資料)
        if (target) {
            //console.log("目標：" + target);
            //console.log("時間：" + duration);
            //console.log("位移：" + offset);

            // 上方位置 = 目標區塊.位移().上方位置
            var top = $(target).offset().top;
            //console.log("要前往元素的上方位置：" + top);

            // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
            // parseInt() 將文字轉為數字

            $("html").stop().animate({
                scrollTop: top - offset
            }, parseInt(duration));
        }
    });
});

// 避免動畫與使用者滾輪衝突
// html 在滾動滾輪時 停止 html 所有效果
$("html").on("mousewheel", function () {
    $("html").stop();
});

function showItem() {
    $(".nav-item1").click(function () {
        $(this).addClass('nav-item-achive');
        $(".nav-item2").removeClass('nav-item-achive');
        $(".nav-item3").removeClass('nav-item-achive');
        $(".nav-item4").removeClass('nav-item-achive');
    });
    $(".nav-item2").click(function () {
        $(".nav-item2").addClass('nav-item-achive');
        $(".nav-item1").removeClass('nav-item-achive');
        $(".nav-item3").removeClass('nav-item-achive');
        $(".nav-item4").removeClass('nav-item-achive');
    });
    $(".nav-item3").click(function () {
        $(".nav-item3").addClass('nav-item-achive');
        $(".nav-item1").removeClass('nav-item-achive');
        $(".nav-item2").removeClass('nav-item-achive');
        $(".nav-item4").removeClass('nav-item-achive');
    });
    $(".nav-item4").click(function () {
        $(".nav-item4").addClass('nav-item-achive');
        $(".nav-item1").removeClass('nav-item-achive');
        $(".nav-item2").removeClass('nav-item-achive');
        $(".nav-item3").removeClass('nav-item-achive');
    });
}
showItem();

//   function showItem2(){
//     $(".nav-item2").click(function(){
//         $(this).addClass('nav-item-achive');
//         $(this).siblings().removeClass('nav-item-achive');

//     });
// }
// showItem2();


$(function () {
    var dateToday = new Date();
    //jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext
    $(".datepicker").datepicker({
        //顯示上個月日期 及下個月日期 ，但是不可選的。
        //default:false
        showOtherMonths: true,
        // 設置當沒有上一個/下一個可選擇的情況下，隱藏掉相應的按鈕。（默認為不可用）
        //配合有設定最大最小時使用
        //default:false
        hideIfNoPrevNext: true,

        minDate: dateToday,
        //  設置一個最大的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），
        //或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
    });
});