hhh_new/template/footer.html

<footer class="footer">
  <div class="container" style="margin:0 auto;">
    <div class="row">
      <div class="col-12 col-lg-4 about-list">
        <section>
          <h4>相關連結</h4>
          <div class="d-flex justify-content-lg-center">
            <ul>
              <li>
                <a href="https://event.hhh.com.tw/agent/lecture.html" target="_blank">
                  <img src="https://hhh.com.tw/hhh_index/images/menu/freelecture.svg" alt="免費報名幸福講堂">
                  免費報名幸福講堂
                </a>
              </li>
              <li>
                <a href="https://event.hhh.com.tw/agent/" target="_blank">
                  <img src="https://hhh.com.tw/hhh_index/images/menu/agent.svg" alt="幸福經紀人">
                  幸福經紀人 <span>0800-366-086</span>
                </a>
              </li>
              <!-- <li>
                <a href="">
                  <img src="https://hhh.com.tw/hhh_index/images/menu/lecture.svg" alt="">
                  講堂活動
                </a>
              </li> -->
              <li>
                <a href="http://gstv.com.tw/" target="_blank">
                  <img src="https://hhh.com.tw/hhh_index/images/menu/tv.svg" alt="幸福空間居家台">
                  幸福空間居家台
                </a>
              </li>
              <li>
                <a href="https://event.hhh.com.tw/contest/2018/" target="_blank">
                  <img src="https://hhh.com.tw/hhh_index/images/menu/prize.svg" alt="ADA 亞洲設計獎">
                  ADA 亞洲設計獎
                </a>
              </li>
              <!-- <li>
                <a href="">
                  <img src="https://hhh.com.tw/hhh_index/images/menu/champion.svg" alt="">
                  國際設計大獎代辦
                </a>
              </li> -->
              <li>
                <a href="https://www.leju.com.tw/" target="_blank">
                  <img src="https://hhh.com.tw/hhh_index/images/menu/Image-1@2x.png" alt="樂居網">
                  樂居網
                </a>
              </li>
            </ul>
          </div>
        </section>
      </div>
      <div class="col-12 col-lg-4 follow-list">
        <section>
          <h4>追蹤我們</h4>
          <div class="d-flex flex-column align-items-center">
            <section class="media">
              <a href="https://www.facebook.com/hhhfb" target="_blank">
                <img src="../../img/media/fb.svg" alt="Facebook" class="media-item before">
                <img src="../../img/media/fb_h.svg" alt="Facebook" class="media-item after">
              </a>
              <a href="https://page.line.me/ovs4341s?openQrModal=true" target="_blank">
                <img src="../../img/media/ln.svg" alt="Line" class="media-item before">
                <img src="../../img/media/ln_h.svg" alt="Line" class="media-item after">
              </a>
              <a href="https://www.youtube.com/user/gorgeousspace" target="_blank">
                <img src="../../img/media/yt.svg" alt="YouTube" class="media-item before">
                <img src="../../img/media/yt_h.svg" alt="YouTube" class="media-item after">
              </a>
              <a href="https://www.instagram.com/gorgeous_space/" target="_blank">
                <img src="../../img/media/ig.svg" alt="Instagram" class="media-item before">
                <img src="../../img/media/ig_h.svg" alt="Instagram" class="media-item after">
              </a>
              <!-- <a href="" target="_blank">
                <img src="../../img/media/rb.svg" alt="" class="media-item before">
                <img src="../../img/media/rb_h.svg" alt="" class="media-item after rounded-circle">
              </a> -->
              <a href="https://www.tiktok.com/@gorgeousspace" target="_blank">
                <img src="../../img/media/tt.svg" alt="Tiktok" class="media-item before">
                <img src="../../img/media/tt_h.svg" alt="Tiktok" class="media-item after rounded-circle">
              </a>
            </section>
            <!-- <section class="fb-list">
              <a href="https://www.facebook.com/agent.hhh.com.tw" target="_blank">
                <img src="hhh_index/images/media/fb_h.svg" alt="agent">
                幸福經紀人粉絲專頁
              </a>
              <a href="https://www.facebook.com/retire.tw/" target="_blank">
                <img src="hhh_index/images/media/fb_h.svg" alt="retire">
                退休好幸福粉絲專頁
              </a>
            </section> -->
          </div>
        </section>
      </div>
      <div class="col-12 col-lg-4 more-list">
        <section>
          <h4 class="d-none d-lg-block">了解更多</h4>
          <div class="d-flex flex-column mt-2 mt-lg-0">
            <section class="subscriber-item">
              <input type="email" placeholder="訂閱電子報，請輸入您的 Email">
              <button class="d-flex justify-content-center align-items-center subscriber-btn">
                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                <p>訂閱</p>
              </button>
            </section>
            <div class="d-lg-flex justify-content-center">
              <section class="mt-4 link">
                <a href="https://hhh.com.tw/about/contact/" target="_blank">
                  聯絡我們
                </a>
                <a href="https://hhh.com.tw/about/privacy_policy" target="_blank">
                  隱私保護
                </a>
                <a href="https://hhh.com.tw/about/" target="_blank">
                  關於我們
                </a>
                <a href="https://hhh.com.tw/about/timeline/" target="_blank">
                  公司歷程
                </a>
                <a href="https://www.104.com.tw/company/d6hr8sg" target="_blank">
                  企業徵才
                </a>
                <a href="https://hhh.com.tw/about/sitemap/" target="_blank">
                  網站地圖
                </a>
              </section>
            </div>
          </div>
        </section>
      </div>
      <h2 class="d-none d-md-block">
        幸福空間 版權所有 © Gorgeous Space Co.Ltd. All Rights Reserved
      </h2>
      <h2 class="d-block d-md-none">
        幸福空間 版權所有 <br> © Gorgeous Space Co.Ltd. All Rights Reserved
      </h2>
    </div>
  </div>
</footer>

<script>
  $(".follow-list a").on({
    mouseenter: function () {
      // $(this).find(".media-item.before").hide();
      // $(this).find(".media-item.after").show();
      $(this).find(".media-item.before").css("opacity", "0");
      $(this).find(".media-item.after").css("opacity", "1");
    },
    mouseleave: function () {
      // $(this).find(".media-item.before").show();
      // $(this).find(".media-item.after").hide();
      $(this).find(".media-item.before").css("opacity", "1");
      $(this).find(".media-item.after").css("opacity", "0");
    }
  });

  let formData = {
    email: ""
  };

  // 訂閱
  $('.subscriber-btn, .subscriber-mb-btn').on('click', function () {
    let parent = $(this).closest('.subscriber-item'); // 對應父元素
    parent.find('.spinner-border').addClass('show');
    let mail = parent.find('input').val();
    console.log("Input value:", mail);

    let regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;

    let validate = regex.test(mail); // 判斷 mail 格式
    if (!validate) {
      parent.addClass('input-error');
      parent.find('.spinner-border').removeClass('show');
      parent.find('button p').text('email 格式錯誤');
    } else {
      parent.removeClass('input-error');
      let formData = { email: mail };
      let email = JSON.stringify(formData);
      $.ajax({
        method: "post",
        url: "https://hhh.com.tw/adapter/index?http_method=POST&api_url=/third/v1/edm/subscriber",
        contentType: "application/json",
        data: email
      }).done((data) => {
        parent.find('.spinner-border').removeClass('show');
        parent.find('button p').text('已完成訂閱！');
      }).fail((error) => {
        parent.find('.spinner-border').removeClass('show');
        parent.find('button p').text('訂閱失敗，請稍後再試');
      });
    }
  });

  $('.subscriber-item input').on('focusin', function () {
    console.log('focusin');
    let parent = $(this).closest('.subscriber-item');
    parent.addClass('input-focus');
    let buttonText = parent.find('button p').text();
    if (buttonText !== "訂閱") {
      parent.find('button p').text('訂閱');
      parent.removeClass('input-error');
    }
  }).on('focusout', function () {
    $(this).closest('.subscriber-item').removeClass('input-focus');
  });

  // $('.subscriber-item button').on('click', function () {
  //   $('.subscriber-item .spinner-border').addClass('show');
  //   let mail = $('.subscriber-item input').val();
  //   console.log("$('.subscriber-item input')", $('.subscriber-item input'));
  //   let regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;

  //   let validate = regex.test(mail); // 判斷 mail 格式
  //   if (!validate) {
  //     $('.subscriber-item').addClass('input-error');
  //     $('.subscriber-item .spinner-border').removeClass('show');
  //     $('.subscriber-item button p').text('email 格式錯誤');
  //   } else {
  //     $('.subscriber-item').removeClass('input-error');
  //     formData.email = mail;
  //     let email = JSON.stringify(formData);
  //     $.ajax({
  //       method: "post",
  //       url: "https://hhh.com.tw/adapter/index?http_method=POST&api_url=/third/v1/edm/subscriber",
  //       type: "json",
  //       data: {
  //         data: email
  //       }
  //     }).done((data) => {
  //       $('.subscriber-item .spinner-border').removeClass('show');
  //       $('.subscriber-item button p').text('已完成訂閱！');
  //     }).fail((error) => {
  //       $('.subscriber-item .spinner-border').removeClass('show');
  //     });
  //   }
  // })

  // $('.subscriber-item input').focusin(
  //   function () {
  //     console.log('focusin');
  //     $('.subscriber-item').addClass('input-focus');
  //     let buttonText = $('.subscriber-item button p').text();
  //     if (buttonText !== "訂閱") {
  //       $('.subscriber-item button p').text('訂閱');
  //       $('.subscriber-item').removeClass('input-error');
  //     }
  //   }).focusout(
  //     function () {
  //       $('.subscriber-item').removeClass('input-focus');
  //     });
</script>