add LCY liffPage

src/fe/css/all.scss

+@charset "UTF-8";
+
+@import "vendor/bootstrap";   //4.4.1版
+@import "vendor/swiper.min";   //5.3.1版
+
+@import "module/ellipsis";
+@import "module/img-scale";
+@import "module/px2em";
+@import "module/frosted";
+
+@import "variable/base";
+
+@import "component/loading";
+@import "component/tag";
+@import "component/button";
+@import "component/form";
+@import "component/userPhoto";
+@import "component/modal";
+@import "component/section";
+
+@import "layout/body";
+
+@import "page/register";
+@import "page/passport";
+@import "page/method";
+

src/fe/css/component/_button.scss

+@charset "UTF-8";
+.button {
+    background-color: #2AACE2;
+    width: 100%;
+    padding: 1.8em;
+    border-radius: 1em;
+    p {
+        text-align: center;
+        font-size: 1.6em;
+        color: $c-whiite;
+        margin-bottom: 0;
+    }
+    &.disable {
+        background-color: $c-gray-lighten;
+        pointer-events: none;
+    }
+}

src/fe/css/component/_form.scss

+@charset "UTF-8";
+.form {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    legend {
+        font-size: inherit;
+    }
+    label {
+        display: block;
+    }
+    input[type="checkbox"] ,input[type="radio"] {
+        -webkit-appearance: none;
+        appearance: none;
+        background-color: #fff;
+        margin: 0;
+        display: none;
+        // &:checked + label {
+        //     background: $c-blue-active;
+        //     border: 1px solid $c-blue;
+        // }
+    }
+    &__changepic {
+        position: absolute;
+        width: 10em;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    &__item {
+        padding: 0;
+        width: 100%;
+        border: none;
+        margin-bottom: 1em;
+        &-photo {
+            margin-bottom: 3em;
+        }
+        &-agree {
+            background: none;
+            margin-bottom: 0.5em;
+            &::before {
+                display: none;
+            }
+            &::after {
+                display: none;
+            }
+            .label {
+                flex: 0 0 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                p {
+                    display: inline-block;
+                    font-size: 1.3em;
+                    margin-bottom: 0;
+                }
+                &__checkbox {
+                    display: inline-block;
+                    width: 1em;
+                    height: 1em;
+                    border: 1px solid $c-black;
+                    margin-right: 0.5em;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    &::before {
+                        content: "";
+                        width: 80%;
+                        height: 80%;
+                        display: none;
+                        background: url(../images/form-tick.png) no-repeat center center/contain;
+                    }
+                }
+            }
+            input {
+                display: none;
+                flex: 0 0 auto;
+                &:checked + .label__checkbox {
+                    background-color: $c-whiite;
+                    &::before {
+                        display: block;
+                    }
+                }
+            }
+        }
+        .goToActivity {
+            color: $c-blue-bright;
+            text-decoration: underline;
+        }
+    }
+    &__ques {
+        margin-bottom: 1em;
+        p {
+            font-size: 2em;
+            font-weight: 400;
+            white-space: nowrap;
+            margin: 0;
+            color: $c-black;
+        }
+    }
+    &__options {
+        &__item {
+            margin-bottom: 1.8em;
+        }
+    }
+    &__input {
+        width: 100%;
+        border: 0.1em solid $c-gray-lighten;
+        border-radius: 1em;
+        padding: 1em 1.5em;
+        margin-bottom: 1.8em;
+        input, select {
+            width: 100%;
+            border: none;
+            background-color: transparent;
+            font-size: 1.4em;
+            color: #747474;
+            &:focus, &:focus-visible, &:hover {
+                outline: none;
+            }
+        }
+        select {
+            background: url(../images/select-arrow.png) no-repeat center right/0.7em auto;
+        }
+        ::placeholder {
+            color: $c-gray-lighten;
+            opacity: 1; /* Firefox */
+        }
+        
+        ::-ms-input-placeholder { /* Edge 12 -18 */
+            color: $c-gray-lighten;
+        }
+    }
+    .button {
+        p {
+            white-space: nowrap;
+        }
+    }
+}

src/fe/css/component/_loading.scss

+.loading {
+    // opacity: 0;
+    // visibility: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2999;
+    background: $c-blue-bg;
+    &__box {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1;
+    }
+
+    &__ani {
+        position: relative;
+        width: em(130);
+        height: em(130);
+        border-radius: 100%;
+        border: 2px solid transparent;
+        border-color: transparent rgba($c-blue-bright, 0.5) transparent rgba($c-blue-bright, 0.5);
+        animation: rotate-loading 1.5s linear 0s infinite normal;
+        transform-origin: 50% 50%;
+
+        -webkit-transition: all 0.5s ease-in-out;
+        -moz-transition: all 0.5s ease-in-out;
+        -ms-transition: all 0.5s ease-in-out;
+        -o-transition: all 0.5s ease-in-out;
+        transition: all 0.5s ease-in-out;
+    }
+
+    &__text {
+        // -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
+        // -o-animation: loading-text-opacity 2s linear 0s infinite normal;
+        // -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
+        // animation: loading-text-opacity 2s linear 0s infinite normal;
+        color: rgba($c-blue-bright, 0.8);
+        font-size: em(18);
+        font-weight: 400;
+        line-height: 1;
+        opacity: 1;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    @keyframes picIn {
+        0% {
+            transform: scale(0.7);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+
+    @keyframes rotate-loading {
+        0% {
+            transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            -webkit-transform: rotate(0deg);
+            -o-transform: rotate(0deg);
+            -moz-transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            -webkit-transform: rotate(360deg);
+            -o-transform: rotate(360deg);
+            -moz-transform: rotate(360deg);
+        }
+    }
+
+    @keyframes loading-text-opacity {
+        0% {
+            opacity: 0
+        }
+
+        20% {
+            opacity: 0
+        }
+
+        50% {
+            opacity: 1
+        }
+
+        100% {
+            opacity: 0
+        }
+    }
+}

src/fe/css/component/_modal.scss

+@charset "UTF-8";
+.modal {
+    .close {
+        font-size: 1rem;
+    }
+    .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
+        opacity: 1;
+        outline: none;
+    }
+    &-backdrop.fade {
+        opacity: 0;
+        @include frosted(transparent,0,0);
+        transition: 0.3s linear;
+    }
+    &-backdrop.show {
+        opacity: 1;
+        @include frosted(#000,0.6,2px);
+        border-radius: 0;
+    }
+    &-dialog {
+        max-width: em(560);
+    }
+    &-content {
+        background-color: #ffffff;
+        box-shadow: 0px 0px 63px rgba(0, 0, 0, 0.1);
+        border-radius: 1.25em;
+        border: 2px solid #2AACE2;
+        overflow: hidden;
+    }
+    &-header {
+        display: block;
+        text-align: center;
+        border: none;
+        padding: 1.5em em(15) 0.2em;
+    }
+    &-body {
+        padding-bottom: 1em;
+        .alert-message{
+            text-align: center;
+            font-size: 2cqmax;
+            margin-bottom: 0;
+            color: $c-blue-bright;
+        }
+    }
+    &-footer {
+        border: none;
+        border-radius: 0;
+        padding: em(15) em(15) em(30);
+        justify-content: center;
+        &:active,&:focus,&:focus-visible,&:focus-within,&:hover,&:visited {
+            outline: none;
+        }
+        .buttons {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .button {
+            opacity: 1;
+            left: auto;
+            transform: none;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: em(400);
+            height: em(85);
+            padding-bottom: 0;
+            background: $c-blue-bright;
+            border-radius: em(85);
+            box-shadow: 0 0 15px rgba(0,0,0,0.3);
+            p {
+                font-size: 1.8em;
+                font-weight: 300;
+                color: $c-whiite;
+            }
+            &:after {
+                display: none;
+            }
+            &__apart {
+                &-disagree {
+                    background: #eec082;
+                    border: 3px solid #b97453;
+                    text-shadow: 0 3px 3px rgba(#000, 0.3);
+                }
+            }
+        }
+    }
+    &__logo {
+        display: inline-block;
+        width: em(180);
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
+    &__close {
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        top: em(20);
+        right: em(20);
+        opacity: 1;
+        span {
+            color: #fff;
+            font-weight: 700;
+            font-size: em(20);
+            line-height: 1;
+            display: inline-block;
+        }
+    }
+}

src/fe/css/component/_section.scss

+.section {
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    &__container {
+        position: relative;
+        width: em(560);
+        margin: 0 auto;
+        padding-top: 0;
+        transform-origin: center top;
+    }
+}

src/fe/css/component/_tag.scss

+@charset "UTF-8";
+
+.tags {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    .tags__item {
+        border: $c-gray 0.15em solid;
+        border-radius: 0.8em;
+        padding: 0.8em 0.55em;
+        &-md {
+            width: 30%;
+            margin-right: 5%;
+            &:nth-child(3n) {
+                margin-right: 0;
+            }
+        }
+        &-lg {
+            width: 100%;
+        }
+        label {
+            margin-bottom: 0;
+        }
+        p {
+            text-align: center;
+            font-size: 1.4em;
+            margin-bottom: 0;
+            color: $c-gray;
+            font-weight: 400;
+        }
+        &.checked {
+            border: $c-blue 0.15em solid;
+            background-color: $c-blue-active;
+            p {
+                color: $c-blue;
+            }
+        }
+    }
+}

src/fe/css/component/_userPhoto.scss

+@charset "UTF-8";
+.photo {
+  position: relative;
+  &__img {
+    width: 16em;
+    height: 16em;
+    // border: 1px solid red;
+    border-radius: 50%;
+    overflow: hidden;
+    margin: 0 auto;
+    img {
+      display: block;
+      object-fit: cover;
+      object-position: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &__icon {
+    width: 4em;
+    position: absolute;
+    bottom: 0;
+    left: 61%;
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+  .fileInput {
+    display: none;
+  }
+}

src/fe/css/layout/_body.scss

+@charset "UTF-8";
+html,body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    // scroll-behavior: smooth;
+}
+
+body,
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+    font-family: $font-family-base;
+}
+
+
+p {
+    font-family: $font-family-base;
+}
+
+.wrapper {
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+    max-width: 640px;
+    margin: 0 auto;
+    color: $c-black;
+    background-color: $c-blue-bg;
+}
+
+.wrapper__line-scroll-fixed {
+    position: relative;
+    width: 100%;
+    height: calc(100% + 10px);
+    z-index: 1;
+}
+
+.main {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.formLoadingIcon {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-image: url(../images/loading.gif);
+    background-size: auto 80%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    z-index: 1;
+    display: none;
+}
+
+.wapper-loading {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #817b72!important;
+    font-size: em(20)!important;
+    font-weight: 400!important;
+    z-index: 1;
+}
+
+.backform {
+    position: absolute;
+    left: 3em;
+    top: 2em;
+    color: $c-blue-bright;
+    font-weight: 500;
+    z-index: 1;
+    span {
+        display: inline-block;
+        font-size: 1.5em;
+        transform: scaleY(2);
+        margin-right: 0.5em;
+    }
+    p {
+        display: inline-block;
+        font-size: 1.8em;
+        margin-bottom: 0;
+    }
+}
+
+
+@media (min-height: 992px) {
+    .wrapper {
+        min-height: 992px;
+    }
+}
+
+@media screen and (min-width: 641px) {
+    .main {
+        height: calc(100% - 9.4375em);
+        padding-bottom: em(151);
+    }
+}

src/fe/css/module/_ellipsis.scss

+@charset "UTF-8";
+
+@mixin ellipsis($width:auto,$row:1){
+  width:$width;
+  display: -webkit-box;
+  overflow: hidden;
+  min-height: initial !important;
+  text-overflow: clip;
+  /*! autoprefixer: off */
+  -webkit-box-orient: vertical;
+  /* autoprefixer: on */
+  -webkit-line-clamp: $row;
+}

src/fe/css/module/_frosted.scss

+@charset "UTF-8";
+
+@mixin frosted($bg:#ebcd4c,$opacity:0.7, $blur: 7.5px){
+  backdrop-filter: blur($blur);
+  -webkit-backdrop-filter: blur($blur);
+  background-color: rgba($bg,$opacity);
+  box-shadow: 0px 0px 63px rgba(#000,0.1);
+}

src/fe/css/module/_img-scale.scss

+@charset "UTF-8";
+
+@mixin img-scale($imgW:1,$imgH:1) {
+  position: relative;
+  display: block;
+  &:before {
+    content: '';
+    display: block;
+    padding-top: $imgH/$imgW*100%;
+  }
+  >img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    width: auto !important;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}

src/fe/css/module/_px2em.scss

+@charset "UTF-8";
+//un-modified
+
+@function calc-em($target-px, $context) {
+  @return calc(($target-px / $context) * 1em);
+}
+
+// and modified to accept a base context variable
+$browser-context: 16;
+
+@function em($pixels, $context: $browser-context) {
+  @return calc(($pixels / $context) * 1em);
+}
+
+@function rem($pixels, $context: $browser-context) {
+  @return calc(($pixels / $context) * 1rem);
+}
+
+
+@function font-size($size) {
+  @return em($size);
+}
+
+@mixin em($size) {
+  font-size: $size;
+  font-size: em($size);
+}
+
+@mixin rem($size) {
+  font-size: $size;
+  font-size: rem($size);
+}

src/fe/css/page/_method.scss

+@charset "UTF-8";
+.methods {
+    p {
+        font-size: 1.3em;
+        line-height: 1.6;
+    }
+    &__container {
+        width: 100%;
+        height: 100%;
+        padding: 3em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

src/fe/css/page/_passport.scss

+@charset "UTF-8";
+
+.passport {
+    width: 100%;
+    min-height: 100%;
+    background: url(../images/passport-bg.png) no-repeat bottom center/contain, linear-gradient(to bottom, rgba(191,230,246,1) 0%,rgba(191,230,246,0) 100%);;
+    &__container {
+        width: 100%;
+    }
+    &__intro {
+        position: relative;
+        width: 100%;
+        &__bg {
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+        &__container {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        .photo {
+            margin-bottom: 0.8em;
+            &__img {
+                width: 11em;
+                height: 11em;
+            }
+            &__icon {
+                left: 78%;
+            }
+        }
+        &__content {
+            color: $c-whiite;
+        }
+        &__nickname {
+            margin-bottom: 0.1em;
+            h2 {
+                width: 100%;
+                text-align: center;
+                font-size: 2.4em;
+                font-weight: 600;
+                text-shadow: 0 0.1em 0.1em rgba(#000, 0.15);
+                margin-bottom: 0;
+            }
+        }
+        &__info {
+            p {
+                width: 100%;
+                text-align: center;
+                font-size: 1.6em;
+                text-shadow: 0 0.1em 0.1em rgba(#000, 0.2);
+                margin-bottom: 0;
+            }
+        }
+    }
+    &__toggle {
+        width: 89%;
+        margin: 0 auto 2em;
+        box-shadow: 0 0.2em 0.5em rgba(#000, 0.2);
+        border-radius: 1.5em;
+        overflow: hidden;
+        &.toggleClose {
+            .passport__toggle__head {
+                &::before {
+                    transform: translateY(-50%) rotate(0);
+                }
+            }
+            .passport__toggle__body {
+                display: none;
+            }
+        }
+        &__head {
+            position: relative;
+            background-color: $c-blue-bright;
+            padding: 1.5em;
+            &::before {
+                content: "";
+                display: block;
+                width: 2.5em;
+                height: 2.5em;
+                position: absolute;
+                right: 1.5em;
+                top: 50%;
+                transform: translateY(-50%) rotate(-180deg);
+                background: url(../images/arrow-down.png) no-repeat center center/contain;
+            }
+            p {
+                color: $c-whiite;
+                text-align: center;
+                margin-bottom: 0;
+                font-size: 1.6em;
+                font-weight: 300;
+                letter-spacing: 0.07em;
+            }
+        }
+        &__body {
+            background-color: $c-whiite;
+            padding: 1.5em 1.5em 0;
+            .tags {
+                &__item {
+                    margin-bottom: 1.5em;
+                    padding: 0.5em 0.55em;
+                }
+            }
+        }
+    }
+}

src/fe/css/page/_register.scss

+@charset "UTF-8";
+.register {
+    padding-top: 3.5em;
+    padding-bottom: 3em;
+}

src/fe/css/variable/_base.scss

+@charset "UTF-8";
+// 共用變數與函數
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');  // -思源黑體
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');  // -思源宋體
+
+
+/* Font */
+$font-family-base: 'Noto Sans TC','PingFangTC', 'Heiti TC', 'Microsoft JhengHei', 'Noto Sans Myanmar','Arial', 'sans-serif';
+
+/* color */
+$c-blue: #6591BB;
+
+$c-blue-bg: #F9FDFF;
+
+$c-blue-active: #EAF2F8;
+
+$c-blue-bright: #2AACE2;
+
+$c-whiite: #ffffff;
+
+$c-black: #1E2846;
+
+$c-gray: #747474;
+
+$c-gray-lighten: #C8C8C8;
+
+

src/fe/index.html

-test
+<!DOCTYPE html>
+<html lang="zh-Hant-TW">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=640, user-scalable=no" />
+  <meta name="format-detection" content="telephone=no">
+
+  <title>健康護照</title>
+  <meta name="description" content="" />
+  <meta name="keywords" content="" />
+
+  <link rel="shortcut icon" href="" type="image/x-icon" sizes="32x32" />
+  <link rel="image_src" href="/images/share.jpg" />
+  <meta property="og:title" content="健康護照" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="" />
+  <meta property="og:image" content="/images/share.jpg" />
+  <meta property="og:description" content="" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
+    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  <link rel="stylesheet" href="css/all.css">
+
+</head>
+
+<body>
+  <div class="wapper-loading">
+      <!-- Loading Start -->
+    <div class="loading">
+      <div class="loading__box">
+        <div class="loading__ani"></div>
+        <div class="loading__text">Loading</div>
+      </div>
+    </div>
+    <!-- Loading End -->
+  </div>
+  <div class="wrapper">
+    <div class="wrapper__line-scroll-fixed">
+      <main class="main">
+        <!-- 表單 form -->
+        <section class="section register">
+          <div class="section__container form__container">
+            <div class="form">
+              <div class="form__item form__item-photo photo">
+                <div class="photo__img"></div>
+                <input type="file" id="fileInput1" class="fileInput" accept="image/*">
+                <div class="photo__icon photo__icon-1">
+                  <img src="./images/solar_camera-linear.png" alt="">
+                </div>
+              </div>
+              <fieldset class="form__item form__item-1 form__item-healthAction" data-ques="healthAction">
+                <legend class="form__ques">
+                    <p>
+                      平常你有什麼健康行動(複選)
+                    </p>
+                </legend>
+                <div class="form__options tags">
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthActionOption_1" type="checkbox" value="tag-WCzAvKUiL" name="healthAction">
+                      <label for="healthActionOption_1">
+                          <p>良好作息</p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthActionOption_2" type="checkbox" value="tag-lIcE-WkEe" name="healthAction">
+                      <label for="healthActionOption_2">
+                          <p>
+                              規律運動
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthActionOption_3" type="checkbox" value="tag-uEOBbgPoG" name="healthAction">
+                      <label for="healthActionOption_3">
+                          <p>
+                              飲食控制
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthActionOption_4" type="checkbox" value="tag-YEJfK7-I7" name="healthAction">
+                      <label for="healthActionOption_4">
+                          <p>
+                              營養品補充
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthActionOption_5" type="checkbox" value="tag-stfrz1nD8" name="healthAction">
+                      <label for="healthActionOption_5">
+                          <p>
+                              閱讀健康文章
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthActionOption_6" type="checkbox" value="x" name="healthAction">
+                      <label for="healthActionOption_6">
+                          <p>
+                            其他
+                          </p>
+                      </label>
+                  </div>
+                </div>
+              </fieldset>
+              <fieldset class="form__item form__item-2 form__item-healthTopic" data-ques="healthTopic">
+                <legend class="form__ques">
+                    <p>
+                      你對什麼健康話題有興趣(複選)
+                    </p>
+                </legend>
+                <div class="form__options tags">
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthTopicOption_1" type="checkbox" value="tag-vstHmk4YP" name="healthTopic">
+                      <label for="healthTopicOption_1">
+                          <p>流行感冒</p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthTopicOption_2" type="checkbox" value="tag-CorN36876" name="healthTopic">
+                      <label for="healthTopicOption_2">
+                          <p>
+                              免疫調節
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthTopicOption_3" type="checkbox" value="tag-nWHBzbUCr" name="healthTopic">
+                      <label for="healthTopicOption_3">
+                          <p>
+                              腸胃功能
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthTopicOption_4" type="checkbox" value="tag-VQSDoXlAL" name="healthTopic">
+                      <label for="healthTopicOption_4">
+                          <p>
+                              過敏體質
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthTopicOption_5" type="checkbox" value="tag-MLdZCbE9y" name="healthTopic">
+                      <label for="healthTopicOption_5">
+                          <p>
+                              睡眠問題
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                      <input id="healthTopicOption_6" type="checkbox" value="tag-Yz0_DhZBV" name="healthTopic">
+                      <label for="healthTopicOption_6">
+                          <p>
+                            日常保健
+                          </p>
+                      </label>
+                  </div>
+                </div>
+              </fieldset>
+              <fieldset class="form__item form__item-3 form__item-healthStatus" data-ques="healthStatus">
+                <legend class="form__ques">
+                    <p>
+                      你覺得自己的身體狀況如何
+                    </p>
+                </legend>
+                <div class="form__options tags">
+                  <div class="form__options__item tags__item tags__item-md">
+                    <input id="healthStatusOption_1" type="radio" value="tag-TN-u8YIrm" name="healthStatus">
+                    <label for="healthStatusOption_1">
+                        <p>
+                            很少生病
+                        </p>
+                    </label>
+                    
+                </div>
+                <div class="form__options__item tags__item tags__item-md">
+                    <input id="healthStatusOption_2" type="radio" value="tag-ATnIMezXK" name="healthStatus">
+                    <label for="healthStatusOption_2">
+                        <p>
+                            偶爾疲倦​
+                        </p>
+                    </label>
+                </div>
+                <div class="form__options__item tags__item tags__item-md">
+                    <input id="healthStatusOption_3" type="radio" value="tag-LJg1ec9-L" name="healthStatus">
+                    <label for="healthStatusOption_3">
+                        <p>
+                            經常感冒
+                        </p>
+                    </label>
+                </div>
+                </div>
+              </fieldset>
+              <fieldset class="form__item form__item-4 form__item-healthAdapt" data-ques="healthAdapt">
+                <legend class="form__ques">
+                    <p>
+                      面對疫情趨緩，<br>以下哪一個情況最符合你的應對
+                    </p>
+                </legend>
+                <div class="form__options tags">
+                  <div class="form__options__item tags__item tags__item-lg">
+                    <input id="healthAdaptOption_1" type="radio" value="tag-bDRawibcP" name="healthAdapt">
+                    <label for="healthAdaptOption_1">
+                        <p>
+                          我仍會主動參考政府機構的資訊，持續戴口罩積極防疫
+                        </p>
+                    </label>
+                    
+                </div>
+                <div class="form__options__item tags__item tags__item-lg">
+                    <input id="healthAdaptOption_2" type="radio" value="tag-JiWCgTnNs" name="healthAdapt">
+                    <label for="healthAdaptOption_2">
+                        <p>
+                          我在前往人多的地方或搭乘大眾交通工具時會佩戴口罩
+                        </p>
+                    </label>
+                </div>
+                <div class="form__options__item tags__item tags__item-lg">
+                    <input id="healthAdaptOption_3" type="radio" value="tag-4dcsmiwqt" name="healthAdapt">
+                    <label for="healthAdaptOption_3">
+                        <p>
+                          我不再對疫情感到恐慌，幾乎不戴口罩、回到正常生活
+                        </p>
+                    </label>
+                </div>
+                </div>
+              </fieldset>
+              <fieldset class="form__item form__item-5 form__item-healthThought" data-ques="healthThought">
+                <legend class="form__ques">
+                    <p>
+                      下列哪一個敘述符合你的想法<br>
+                      (複選，至多可選擇2個答案)
+                    </p>
+                </legend>
+                <div class="form__options tags">
+                  <div class="form__options__item tags__item tags__item-lg">
+                      <input id="healthThoughtOption_1" type="checkbox" value="tag-FhMvcmSJm" name="healthThought">
+                      <label for="healthThoughtOption_1">
+                          <p>我願意了解新的疫苗並採取行動</p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-lg">
+                      <input id="healthThoughtOption_2" type="checkbox" value="tag-g4GSGpTHq" name="healthThought">
+                      <label for="healthThoughtOption_2">
+                          <p>
+                              我會自律做好防疫，避免造成他人困擾
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-lg">
+                      <input id="healthThoughtOption_3" type="checkbox" value="tag-lDhpoS39o" name="healthThought">
+                      <label for="healthThoughtOption_3">
+                          <p>
+                              我覺得應該維持正常社交，不用過度緊張
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-lg">
+                      <input id="healthThoughtOption_4" type="checkbox" value="tag-qmywOc8af" name="healthThought">
+                      <label for="healthThoughtOption_4">
+                          <p>
+                              我覺得保持正向的態度，與病毒共處自然會產生抗體
+                          </p>
+                      </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-lg">
+                      <input id="healthThoughtOption_5" type="checkbox" value="tag-77KImqQGb" name="healthThought">
+                      <label for="healthThoughtOption_5">
+                          <p>
+                              沒做好防疫準備，我會感到焦慮
+                          </p>
+                      </label>
+                  </div>
+                </div>
+              </fieldset>
+              <fieldset class="form__item form__item-6 form__item-healthAge" data-ques="healthAge">
+                <legend class="form__ques">
+                    <p>
+                      你的年齡
+                    </p>
+                </legend>
+                <div class="form__options tags">
+                  <div class="form__options__item tags__item tags__item-md">
+                    <input id="healthAgeOption_1" type="radio" value="tag-bjbXSt2gi" name="healthAge">
+                    <label for="healthAgeOption_1">
+                        <p>
+                          20歲以下
+                        </p>
+                    </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                    <input id="healthAgeOption_2" type="radio" value="tag-qYe0v6HqF" name="healthAge">
+                    <label for="healthAgeOption_2">
+                        <p>
+                          20-29歲
+                        </p>
+                    </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                    <input id="healthAgeOption_3" type="radio" value="tag-6iaNB8Ea4" name="healthAge">
+                    <label for="healthAgeOption_3">
+                        <p>
+                          30-39歲
+                        </p>
+                    </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                    <input id="healthAgeOption_4" type="radio" value="tag-e4JG3GBG_" name="healthAge">
+                    <label for="healthAgeOption_4">
+                        <p>
+                          40-49歲
+                        </p>
+                    </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                    <input id="healthAgeOption_5" type="radio" value="tag-DTE6DWovG" name="healthAge">
+                    <label for="healthAgeOption_5">
+                        <p>
+                          50-59歲
+                        </p>
+                    </label>
+                  </div>
+                  <div class="form__options__item tags__item tags__item-md">
+                    <input id="healthAgeOption_6" type="radio" value="tag-pAxHnckQs" name="healthAge">
+                    <label for="healthAgeOption_6">
+                        <p>
+                          59歲以上
+                        </p>
+                    </label>
+                  </div>
+                </div>
+              </fieldset>
+              <fieldset class="form__item form__item-6 form__item-healthNickname" data-ques="healthNickname">
+                <legend class="form__ques">
+                    <p>
+                      暱稱
+                    </p>
+                </legend>
+                <div class="form__input">
+                  <input id="nickName" type="text" value="" placeholder="請輸入暱稱">
+                </div>
+              </fieldset>
+              <fieldset class="form__item form__item-6 form__item-healthGender" data-ques="healthGender">
+                <legend class="form__ques">
+                    <p>
+                      性別
+                    </p>
+                </legend>
+                <div class="form__input">
+                  <select name="gender" id="gender">
+                    <option value="">請選擇性別</option>
+                    <option value="tag-8HwqQuQ43">女性</option>
+                    <option value="tag-F8Me8-UGg">男性</option>
+                    <option value="tag-8HwqQuQ43">不提供</option>
+                  </select>
+                </div>
+              </fieldset>
+              <div class="form__item form__item-agree">
+                <label for="methodsAgree" class="label">
+                    <input type="checkbox" id="methodsAgree" name="methodsAgree">
+                    <div class="label__checkbox"></div>
+                    <p>我同意<span class="goToActivity">個人資料使用方法</span></p>
+                </label>
+            </div>
+              <div class="button form-submit">
+                <p>下一步</p>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- 活動辦法 methods -->
+        <section class="section methods">
+          <div class="backform"><span><</span><p>回上一頁</p></div>
+          <div class="section__container methods__container">
+            <p>
+              李慶雲兒童感染暨疫苗發展醫學文教基金會以本訊息向您告知並徵求同意。由於個人資料蒐集涉及您的隱私權益，請您務必詳閱本告知內容。為經營「mRNA 健康管家」LINE官方帳號之需要，帳號內的「健康護照」功能互動，將蒐集您的個人資料，以進行後續的內容分眾溝通。<br><br>
+
+              其中包含暱稱、照片、性別、年齡區間、對於健康議題之
+              想法意向等。但毋須提供姓名、出生年月日、身分證字號
+              、住居所地址、各類電信電話號碼、電子郵件信箱、聯絡
+              人資訊以及其他可辨識之個人資料。本單位只會在中華民
+              國境內利用您的個人資料，利用期間為本單位或業務所必
+              須之保存期間。利用方式為符合個人資料保護相關法令以
+              自動化機器或其他非自動化之利用方式。除非有個人資料
+              保護法所規定例外情形，否則您可以依照個人資料保護法
+              相關規定，就您提供的個人資料行使以下權利：查詢或請
+              求閱覽或請求製給複製本、請求補充或更正、請求停止蒐
+              集、處理或利用、請求刪除，如有相關需求，可透過 Email
+              與我們聯繫（prof.lee.foundation@gmail.com）。<br><br>
+
+              提醒您，您可以自由選擇提供您的個人資料，如果您拒絕
+              提供的個人資料是與前述蒐集、處理與利用目的相關，則
+              會導致您無法使用帳號內的「健康護照」功能。
+            </p>
+          </div>
+        </section>
+        <!-- 護照 passport -->
+        <section class="section passport">
+          <div class="section__container passport__container">
+            <div class="passport__intro">
+              <div class="passport__intro__bg">
+                <img src="./images/passport-intro.png" alt="">
+              </div>
+              <div class="passport__intro__container">
+                <div class="photo">
+                  <div class="photo__img"></div>
+                  <input type="file" id="fileInput2" class="fileInput" accept="image/*">
+                  <div class="photo__icon photo__icon-2">
+                    <img src="./images/solar_camera-linear.png" alt="">
+                  </div>
+                </div>
+                <div class="passport__intro__content">
+                  <div class="passport__intro__nickname">
+                    <h2>王小美</h2>
+                  </div>
+                  <div class="passport__intro__info">
+                    <p><span class="introGender">女性</span> / <span class="introAge">30-39歲 </span></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="passport__toggle passport__toggle-healthTopic">
+              <div class="passport__toggle__head">
+                <p>關注議題</p>
+              </div>
+              <div class="passport__toggle__body">
+                <div class="tags">
+                  <div class="tags__item tags__item-md checked">
+                    <p>良好作息</p>
+                  </div>
+                  <div class="tags__item tags__item-md checked">
+                    <p>良好作息</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="passport__toggle passport__toggle-healthAction">
+              <div class="passport__toggle__head">
+                <p>健康行動</p>
+              </div>
+              <div class="passport__toggle__body">
+                <div class="tags">
+                  <div class="tags__item tags__item-md checked">
+                    <p>良好作息</p>
+                  </div>
+                  <div class="tags__item tags__item-md checked">
+                    <p>良好作息</p>
+                  </div>
+                  <div class="tags__item tags__item-md checked">
+                    <p>良好作息</p>
+                  </div>
+                  <div class="tags__item tags__item-md checked">
+                    <p>良好作息</p>
+                  </div>
+                  <div class="tags__item tags__item-md checked">
+                    <p>良好作息</p>
+                  </div>
+                  <div class="tags__item tags__item-md checked">
+                    <p>良好作息</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <footer class="footer">
+      </footer>
+    </div>
+  </div>
+  <!-- Alert Modal -->
+  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <div class="modal-header">
+        </div>
+        <div class="modal-body">
+          <p class="alert-message"></p>
+        </div>
+        <div class="modal-footer">
+
+          <button type="button" class="close button" data-dismiss="modal" aria-label="Close">
+            <p><span aria-hidden="true">確定</span></p>
+          </button>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="lib/jquery-3.5.1.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
+    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
+    crossorigin="anonymous"></script>
+  <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
+  <script src="./lib/gsap.min.js"></script>
+  <script src="js/utlis.js"></script>
+  <script src="./js/services/userModel.js"></script>
+  <script src="./js/services/index.js"></script>
+  <script src="js/base.js"></script>
+  <script src="js/register.js"></script>
+  <script src="js/passport.js"></script>
+
+  <!-- <script src="https://cdn.jsdelivr.net/npm/vconsole@3.2.0/dist/vconsole.min.js"></script>
+
+  <script>
+    // init vConsole
+    var vConsole = new VConsole();
+    console.log('Hello world');
+  </script> -->
+
+</body>
+
+</html>

src/fe/js/base.js

+base = function () {
+	//private menbers
+	let isActivityOver = false;
+	let userProfile = null;
+	let userData = null;
+
+
+	//private methods
+	function init() {
+
+		console.log('base init')
+
+		// 判斷是否活動已結束
+		// entranceTimer();
+
+		// 用戶登入
+		GameService.getInstanse().init().then((profile) => {
+			$(".wapper-loading .loading__text").text("LINE登入中");
+			// console.log(profile)
+			userProfile = profile;
+			getProfile();
+
+			register.LinePicHandler(profile.pictureUrl)
+
+			// 正式用 記得開
+			GameService.getInstanse().userLogin()
+				.then(_res => {
+					console.log("_res: ",_res);
+
+					$(".wapper-loading").remove();
+
+					gsap.to(".wrapper", {
+						duration: 0.5,
+						autoAlpha: 1
+					});
+
+					userData = GameService.getInstanse().getUserData();
+
+					console.log("userData: ",userData)
+					
+					if(Object.keys(userData).length === 0) {
+						sectionFadeIn(".register");
+					}else {
+						sectionFadeIn(".passport");
+						passport.buildPassportHandler(userData)
+					}
+				})
+				.catch(err => {
+					console.log(err)
+					$(".wapper-loading").remove();
+					gsap.to(".wrapper", {
+						duration: 0.5,
+						autoAlpha: 1
+					});
+				})
+		})
+
+		// 返回表單頁
+		$(".backform").on("click", function(){
+			console.log("backform click")
+			sectionFadeOut(".methods");
+			sectionFadeIn(".register");
+		});
+
+		// 前往活動辦法頁
+		$(".goToActivity").on("click", function(){
+			console.log("backform click")
+			sectionFadeOut(".register");
+			sectionFadeIn(".methods");
+		});
+
+		
+	}
+
+	// 活動期間判斷
+	function entranceTimer() {
+		var _nowDate = new Date();
+		var _endDate = new Date("2023/09/08 23:29");
+
+		if (_nowDate.getTime() >= _endDate.getTime()) {
+
+			isActivityOver = true;
+
+			// 活動結束後提供查詢
+			// myAlert(``);
+			console.log("活動已結束")
+		} else {
+			isActivityOver = false;
+			console.log("活動進行中")
+		}
+	}
+
+	function getProfile() {
+		return userProfile
+	}
+
+	// 提醒popup
+	function myAlert(_msg) {
+		$('#agreeAccModal').modal('hide');
+		$('#exampleModal').find('.alert-message').html(_msg);
+		$('#exampleModal').modal('show');
+		$(".modal-backdrop.show").css("backdrop-filter", "blur(2px)");
+		$(".modal-backdrop.show").css("-webkit-backdrop-filter", "blur(2px)")
+	}
+
+	// page進入動態
+	function sectionFadeIn(el) {
+		// $(el).fadeIn();
+		gsap.to(el, {
+			duration: 0.3,
+			autoAlpha: 1
+		})
+	}
+
+	// page離開動態
+	function sectionFadeOut(el) {
+		// $(el).fadeOut();
+		gsap.to(el, {
+			duration: 0.3,
+			autoAlpha: 0
+		})
+	}
+
+	{
+		$(document).ready(function () {
+			init();
+		});
+	}
+
+	//public
+	return {
+		sectionFadeIn: function(el) {
+			sectionFadeIn(el)
+		},
+		sectionFadeOut: function(el) {
+			sectionFadeOut(el)
+		},
+		myAlert: function (_msg) {
+			myAlert(_msg);
+		},
+		getProfile,
+
+	};
+};
+
+var base = new base();

src/fe/js/passport.js

+passport = function () {
+	//private menbers
+	let tagData = null;
+	let convertData = {}
+
+
+
+
+	//private methods
+	function init() {
+
+		console.log('passport init')
+
+		getTagData();
+
+		$(".photo__icon-2").on("click", function(){
+			$("#fileInput2").click();
+		});
+
+		$(".passport__toggle__head").on("click", function(){
+			if(!$(this).parent(".passport__toggle").hasClass("toggleClose")) {
+				$(this).parent(".passport__toggle").addClass("toggleClose");
+			}else {
+				$(this).parent(".passport__toggle").removeClass("toggleClose");
+			}
+		});
+
+		
+	}
+
+	function getTagData(){
+		$.ajax('./js/tagData.json').then(res => {
+			tagData = res;
+			// console.log(res)
+		})
+	}
+
+	function buildPassportHandler(_data){
+		let data = _data;
+		console.log(data);
+
+		setTimeout(()=>{
+
+			let getHealthAction = convertMultipleTag('healthAction', data.healthAction);
+			let gethealthTopic = convertMultipleTag('healthTopic', data.healthTopic);
+			let getHealthAge = convertSingleTag('healthAge', data.healthAge);
+			let getHealthGender= convertSingleTag('healthGender', data.healthGender);
+			convertData.headSticker = data.headSticker;
+			convertData.healthNickname = data.healthNickname;
+			
+			Promise.all([getHealthAction ,gethealthTopic, getHealthAge, getHealthGender]).then((res) => {
+				console.log(convertData); // [3, 1337, "foo"]
+				buildTagHtml();
+			});
+		}, 200);
+
+	}
+
+	function convertMultipleTag(_name, _arr) {
+		return new Promise(resolve => {
+			// 篩出特定問題資料
+			let tags = tagData.filter(quesItem => {
+				// console.log(item)
+				return quesItem.questionName == _name
+			}).map(quesItem => {
+				return quesItem.tags
+			})
+			// console.log(tags)
+
+			// 轉換回傳資料
+			let convertArr = [];
+			_arr.forEach(element => {
+				// console.log("element: "+element)
+				tags[0].forEach((_tagItem) => {
+					// console.log("tagId: "+_tagItem.tagId)
+					if(_tagItem.tagId == element) {
+						convertArr.push(_tagItem.answer)
+						// console.log("tagId: "+_tagItem.answer)
+					}
+				});
+			});
+			
+			// console.log(convertArr)
+
+			if(_name == "healthAction") {
+				convertData.healthAction = convertArr;
+			}
+			if(_name == "healthTopic") {
+				convertData.healthTopic = convertArr;
+			}
+
+			resolve(_name + " convertMultipleTag success");
+
+			return convertArr;
+		});
+	}
+
+	function convertSingleTag(_name, _value) {
+		return new Promise(resolve => {
+			// 篩出特定問題資料
+			let tags = tagData.filter(quesItem => {
+				// console.log(item)
+				return quesItem.questionName == _name
+			}).map(quesItem => {
+				return quesItem.tags
+			})
+			// console.log(tags)
+
+			let converValue = "";
+			tags[0].forEach((_tagItem) => {
+				// console.log("tagId: "+_tagItem.tagId)
+				if(_tagItem.tagId == _value) {
+					converValue = _tagItem.answer
+					// console.log("tagId: "+_tagItem.answer)
+				}
+			});
+			
+			if(_name == "healthAge") {
+				convertData.healthAge =  converValue;
+			}
+
+			if(_name == "healthGender") {
+				convertData.healthGender =  converValue;
+			}
+
+			// console.log(converValue)
+
+			resolve(_name + " convertMultipleTag success");
+
+			return converValue;
+		});
+	}
+
+	function buildTagHtml() {
+		$(".passport__toggle-healthTopic .tags").html("");
+		$(".passport__toggle-healthAction .tags").html("");
+		$(".passport__intro .photo__img").html("");
+		$(".passport__intro__nickname h2").html("");
+		$(".passport__intro__info .introAge").html("");
+		$(".passport__intro__info .introGender").html("");
+
+		convertData.healthTopic.forEach(_tagName => {
+			$(".passport__toggle-healthTopic .tags").append(
+				`
+				<div class="tags__item tags__item-md checked">
+					<p>${_tagName}</p>
+				</div>	
+				`
+			);
+		});
+
+		convertData.healthAction.forEach(_tagName => {
+			$(".passport__toggle-healthAction .tags").append(
+				`
+				<div class="tags__item tags__item-md checked">
+					<p>${_tagName}</p>
+				</div>	
+				`
+			);
+		});
+		
+		$(".passport__intro .photo__img").append(
+			`
+				<img src="${convertData.headSticker}" />
+			`
+		);
+
+		$(".passport__intro__nickname h2").text(convertData.healthNickname);
+		
+		$(".passport__intro__info .introAge").text(convertData.healthAge);
+		$(".passport__intro__info .introGender").text(convertData.healthGender);
+	}
+
+	{
+		$(document).ready(function () {
+			init();
+		});
+	}
+
+	//public
+	return {
+		buildPassportHandler: function(data) {
+			buildPassportHandler(data)
+		}
+	};
+};
+
+var passport = new passport();

src/fe/js/register.js

+
+register = function () {
+	let _noteScrollTop = 0;
+	let linePicUrl = null;
+	let lineBase64Data = null;
+	let customBase64Data = null;
+	let finalase64Data = null;
+	let registerAlert = "";
+	let registerData = {
+		healthAction: null,
+		healthTopic: null,
+		healthStatus: null,
+		healthAdapt: null,
+        healthThought: null,
+        healthAge: null,
+        healthNickname: null,
+        healthGender: null,
+		headSticker: null,
+		healthGenderRole: null
+	}
+
+
+	//private methods
+	function init() {
+		console.log('register is loaded.');
+
+		selectImage();
+
+		// 換大頭照點擊
+		$(".photo__icon-1").on("click", function(){
+			$("#fileInput1").click();
+		});
+
+		// 多選題選中添加checked樣式
+		$(".register .form__options__item input[type='checkbox']").change(function(){
+			if($(this).prop("checked")) {
+				$(this).parents(".form__options__item").addClass("checked");
+			}else {
+				$(this).parents(".form__options__item").removeClass("checked");
+			}
+		});
+
+		// 單選題選中添加checked樣式
+		$(".register .form__options__item input[type='radio']").change(function(){
+			if($(this).prop("checked")) {
+				$(this).parents(".form__options").children(".form__options__item").removeClass("checked");
+				$(this).parents(".form__options__item").addClass("checked");
+			}
+		});
+
+		// 多選限制複選數
+		$('.register .form__item-healthThought .form__options__item').click(function() {
+			// console.log("healthThought click")
+            $(".form__item-healthThought .form__options__item input[type=checkbox]").attr('disabled', true);
+            if ($(".form__item-healthThought .form__options__item input[type=checkbox]:checked").length >= 2) {
+                $(".form__item-healthThought .form__options__item input[type=checkbox]:checked").attr('disabled', false);
+            } else {
+                $('.form__item-healthThought .form__options__item input[type=checkbox]').attr('disabled', false);
+            }
+        });
+
+		// 點擊資料表單"下一步"
+		$(".register .form-submit").on("click", function(){
+			// console.log("form-submit click");
+			$(this).addClass("disable");
+            $(".form-submit p").text("傳送中...");
+
+			if(checkRegister()) {
+				sendRegister();
+			}else {
+				base.myAlert(registerAlert);
+				$(this).removeClass("disable");
+                $(".form-submit p").text("下一步");
+			}
+		});
+	}
+
+	// Line大頭貼
+	function LinePicHandler(url) {
+
+		linePicUrl = url;
+		$(".photo__img").html("");
+		$(".photo__img").append(`
+			<img src="${linePicUrl}"/>
+		`);
+
+		const imageURL = linePicUrl;
+		if(imageURL.trim() !== '') {
+			const img = new Image();
+			img.src = imageURL;
+
+			const canvas = document.createElement("canvas");
+			const ctx = canvas.getContext("2d");
+			img.crossOrigin = 'Anonymous';
+
+			img.onload = function() {
+				canvas.width = img.width;
+				canvas.height = img.height;
+				ctx.drawImage(img, 0, 0);
+
+				// 將圖片轉換為 Base64
+				lineBase64Data = canvas.toDataURL('image/jpeg')
+				finalase64Data = lineBase64Data;
+
+				// console.log(finalase64Data)
+
+			}
+		}
+	}
+
+	// 選照片
+	function selectImage() {
+		const fileInputs = document.querySelectorAll('.fileInput');
+		const imagePreview = $('.photo__img');
+		// console.log(fileInput.id)
+
+
+		fileInputs.forEach((fileInput)=> {
+			// 當選擇圖片後，顯示圖片的預覽
+			fileInput.addEventListener("change", function(e){
+				console.log(fileInput.id)
+
+				const selectedFile = fileInput.files[0];
+
+				if(selectedFile) {
+					const reader = new FileReader();
+					reader.onload = function(e) {
+						// 移除 data:image/jpeg;base64,
+						// customBase64Data = e.target.result.split(",")[1];
+
+						customBase64Data = e.target.result;
+						finalase64Data = customBase64Data;
+						// console.log(e.target)
+						const img = new Image();
+						img.src = e.target.result;
+						imagePreview.html("");
+						imagePreview.append(img);
+
+						// console.log(finalase64Data)
+					}
+					reader.readAsDataURL(selectedFile);
+				}else {
+					LinePicHandler(linePicUrl);
+				}
+				if(fileInput.id == 'fileInput2') {
+					// console.log(finalase64Data)
+					sendBase64DataToApi(finalase64Data);
+				}
+			});
+		});
+	}
+
+	// 送出圖片
+	function sendBase64DataToApi(finalase64Data) {
+
+		GameService.getInstanse().userUpdatePhoto(finalase64Data).then(res => {
+			console.log('userUpdatePhoto：', res);
+			// base.myAlert('成功上傳。');
+		});
+		
+	}
+
+
+	function getCheckboxVal(name) {
+
+		let vals = $(".register input[type=checkbox][name="+name+"]:checked").map(function() {
+			return $(this).val();
+		}).get();
+
+		return vals;
+	}
+
+	function getRadioVal(name){
+		return $("input[name="+name+"]:checked").val();
+	}
+
+	function checkRegister(){
+		let isComplete = true;
+		registerAlert = "";
+
+		if(getCheckboxVal("healthAction").length > 0) {
+			registerData.healthAction = getCheckboxVal("healthAction");
+		}else {
+			isComplete = false;
+		}
+
+		if(getCheckboxVal("healthTopic").length > 0) {
+			registerData.healthTopic = getCheckboxVal("healthTopic");
+		}else {
+			isComplete = false;
+		}
+		
+		if(getRadioVal("healthStatus") !== "" && getRadioVal("healthStatus") !== undefined ) {
+			registerData.healthStatus = getRadioVal("healthStatus");
+		}else {
+			isComplete = false;
+		}
+
+		if(getRadioVal("healthAdapt") !== "" && getRadioVal("healthAdapt") !== undefined ) {
+			registerData.healthAdapt = getRadioVal("healthAdapt");
+		}else {
+			isComplete = false;
+		}
+
+		if(getCheckboxVal("healthThought").length > 0) {
+			registerData.healthThought = getCheckboxVal("healthThought");
+		}else {
+			isComplete = false;
+		}
+
+		if(getRadioVal("healthAge") !== "" && getRadioVal("healthAge") !== undefined ) {
+			registerData.healthAge = getRadioVal("healthAge");
+		}else {
+			isComplete = false;
+		}
+
+		if($("#nickName").val().trim() !== "") {
+			registerData.healthNickname = $("#nickName").val().trim();
+		}else {
+			isComplete = false;
+		}
+
+		if($("#gender").val() !== "") {
+
+			registerData.healthGender = $("#gender").val();
+
+			if($("#gender").val() === "tag-8HwqQuQ43") {
+				registerData.healthGenderRole = "female"
+			} else if($("#gender").val() === "tag-F8Me8-UGg") {
+				registerData.healthGenderRole = "male"
+			}else {
+				registerData.healthGenderRole = "";
+			}
+
+		}else {
+			isComplete = false;
+		}
+
+		if(!isComplete) {
+			registerAlert = "請確認問題皆已作答";
+		}
+
+		if(getCheckboxVal("methodsAgree").length == 0) {
+			registerAlert == "" ? registerAlert = "請勾選'我同意個人資料使用方法'" : registerAlert+="<br>請勾選'我同意個人資料使用方法'";
+			isComplete = false;
+		}
+
+		if(isComplete) {
+			registerData.headSticker = finalase64Data;
+			console.log(registerData)
+		}
+
+
+		return isComplete;
+	}
+
+	function sendRegister() {
+
+		// 測試用
+		// base.sectionFadeOut(".register");
+		// base.sectionFadeIn(".passport");
+		// $(".register .form-submit").removeClass("disable");
+        // $(".register .form-submit p").text("下一步");
+
+		// 正式用
+		GameService.getInstanse().userRegister(registerData)
+			.then(_res => {
+				console.log(_res);
+				base.sectionFadeOut(".register");
+				base.sectionFadeIn(".passport");
+				$(".register .form-submit").removeClass("disable");
+                $(".register .form-submit p").text("下一步");
+				// 清除表單
+				resetRegister();
+				// 再次載入取得資料
+				GameService.getInstanse().userLogin();
+				passport.buildPassportHandler(registerData);
+			})
+			.catch(_err => {
+				console.log(_err);
+				// let msg = err.message.replaceAll("Error:", "");
+				base.myAlert(_err);
+				$(".register .form-submit").removeClass("disable");
+                $(".register .form-submit p").text("下一步");
+			})
+	}
+
+	function resetRegister() {
+		$('.register .form input[type=checkbox], .register .form input[type=radio]').prop('checked', false);
+		$('.register .form input[type=text], .register .form select').val('');
+	}
+	
+
+
+	//constructor
+
+	{
+		$(document).ready(function () {
+			init();
+		});
+	}
+
+	//public
+
+	return {
+		LinePicHandler: function(url) {
+			LinePicHandler(url);
+		},
+		getCheckboxVal: function(name) {
+			return getCheckboxVal(name)
+		},
+		getRadioVal: function(name) {
+			return getRadioVal(name)
+		},
+		selectImage: function() {
+			selectImage();
+		}
+	};
+};
+
+var register = new register();

src/fe/js/services/userModel.js

+function UserModel(_lineUserId) {
+
+  let m_lineUserId = _lineUserId;
+
+  function init() {
+  }
+
+  /**
+   * 用戶登入
+   * @returns {TypeUserResponse} Promise
+   */
+  function loginUser () {
+    return POST('/api/JWPokeGame/getUserInfo.ashx', {
+      lineUserId: m_lineUserId,
+    });
+  }
+
+  /**
+   * 用戶註冊
+   * @param {object} _formdata 
+   * @returns {TypeResponse} Promise
+   */
+  function registerUser (_formdata) {
+    return POST('/api/JWPokeGame/saveUserInfo.ashx', {
+      lineUserId: m_lineUserId,
+      ..._formdata,
+    }).catch((error)=> {
+      console.log('_register:' + error);
+      throw '表單儲存失敗';
+    });
+  }
+
+  /**
+  * 用戶更新頭貼
+  * @returns {TypeUserResponse} Promise
+  */
+    function updatePhoto(base64Image) {
+      return POST('/api/JWPokeGame/getUserInfo.ashx', {
+        lineUserPhoto: base64Image,
+      });
+    }
+  
+  /**
+    * 驗證表單
+    * @param {object} formdata 
+    * @returns {Object | boolean}
+    */
+  function verifyUserForm(theContext) {
+    const {userName, IDNo, phone, birthday} = formdata;
+    let output;
+    
+    if (!userName || userName.length === 0) {
+      output['userName'] = '姓名格式不正確';
+    }
+
+    if (/[A-Za-z]{1}[1-2]{1}[0-9]{8}$/.test(IDNo)) {
+      output['IDNo'] = '身分證格式不正確';
+    }
+
+    if (/09\d{2}\d{3}\d{3}/.test(phone)) {
+      output['phone'] = '電話格式不正確';
+    }
+
+    if (!/[0-9]{4}\/[0-9]{3}\/[0-9]{3}$/.test(birthday)) {
+      output['birthday'] = '生日格式不正確';
+    }
+
+    if (output) {
+      return output;
+    }
+
+    return true;
+  }
+
+  {
+    init();  
+  }
+
+  return {
+    loginUser,
+    registerUser,
+    verifyUserForm,
+    updatePhoto
+  }
+}

src/fe/js/tagData.json

+[
+    {
+        "question": "平常你有什麼健康行動（複選）",
+        "questionName": "healthAction",
+        "tags": [
+            {
+                "answer": "良好作息",
+                "tagName": "良好作息",
+                "tagId": "tag-WCzAvKUiL"
+            },
+            {
+                "answer": "規律運動",
+                "tagName": "規律運動",
+                "tagId": "tag-lIcE-WkEe"
+            },
+            {
+                "answer": "飲食控制",
+                "tagName": "飲食控制",
+                "tagId": "tag-uEOBbgPoG"
+            },
+            {
+                "answer": "營養品補充",
+                "tagName": "營養品補充",
+                "tagId": "tag-YEJfK7-I7"
+            },
+            {
+                "answer": "閱讀健康文章",
+                "tagName": "閱讀健康文章",
+                "tagId": "tag-stfrz1nD8"
+            },
+            {
+                "answer": "其他",
+                "tagName": "X",
+                "tagId": "x"
+            }
+        ]
+        
+    },
+    {
+        "question": "你對什麼健康話題有興趣（複選）",
+        "questionName": "healthTopic",
+        "tags": [
+            {
+                "answer": "流行感冒",
+                "tagName": "流行感冒",
+                "tagId": "tag-vstHmk4YP"
+            },
+            {
+                "answer": "免疫調節",
+                "tagName": "免疫調節",
+                "tagId": "tag-CorN36876"
+            },
+            {
+                "answer": "腸胃功能",
+                "tagName": "腸胃功能",
+                "tagId": "tag-nWHBzbUCr"
+            },
+            {
+                "answer": "過敏體質",
+                "tagName": "過敏體質",
+                "tagId": "tag-VQSDoXlAL"
+            },
+            {
+                "answer": "睡眠問題",
+                "tagName": "睡眠問題",
+                "tagId": "tag-MLdZCbE9y"
+            },
+            {
+                "answer": "日常保健",
+                "tagName": "日常保健",
+                "tagId": "tag-Yz0_DhZBV"
+            }
+        ]
+        
+    },
+    {
+        "question": "你覺得自己的身體狀況如何",
+        "questionName": "healthStatus",
+        "tags": [
+            {
+                "answer": "很少生病",
+                "tagName": "很少生病",
+                "tagId": "tag-TN-u8YIrm"
+            },
+            {
+                "question": "",
+                "answer": "偶爾疲倦",
+                "tagName": "偶爾疲倦",
+                "tagId": "tag-ATnIMezXK"
+            },
+            {
+                "question": "",
+                "answer": "經常感冒",
+                "tagName": "經常感冒",
+                "tagId": "tag-LJg1ec9-L"
+            }
+        ]
+    },
+    {
+        "question": "面對疫情趨緩，以下哪一個敘述最符合你的應對",
+        "questionName": "healthAdapt",
+        "tags": [
+            {
+                "answer": "我仍會主動參考政府機構的資訊，持續戴口罩積極防疫",
+                "tagName": "一直戴口罩",
+                "tagId": "tag-bDRawibcP"
+            },
+            {
+                "answer": "我在前往人多的地方或搭乘大眾交通工具時會配戴口罩​",
+                "tagName": "人多戴口罩",
+                "tagId": "tag-JiWCgTnNs"
+            },
+            {
+                "answer": "我不再對疫情感到恐慌，幾乎不戴口罩、回到正常生活",
+                "tagName": "不戴口罩",
+                "tagId": "tag-4dcsmiwqt"
+            }
+
+        ]
+        
+    },
+    {
+        "question": "下列哪一個敘述最符合你的想法",
+        "questionName": "healthThought",
+        "tags": [
+            {
+                "answer": "我願意了解新的疫苗並採取行動",
+                "tagName": "開放性人格",
+                "tagId": "tag-FhMvcmSJm"
+            },
+            {
+                "answer": "我會自律做好防疫，避免造成他人困擾",
+                "tagName": "嚴謹性人格",
+                "tagId": "tag-g4GSGpTHq"
+            },
+            {
+                "answer": "我覺得應該維持正常社交，不用過度緊張​",
+                "tagName": "外向性人格",
+                "tagId": "tag-lDhpoS39o"
+            },
+            {
+                "answer": "我覺得保持正向的態度，與病毒共處自然會產生抗體​",
+                "tagName": "親和性人格",
+                "tagId": "tag-qmywOc8af"
+            },
+            {
+                "answer": "沒做好防疫準備，我會感到焦慮",
+                "tagName": "神經質人格",
+                "tagId": "tag-77KImqQGb"
+            }
+        ]
+        
+    },
+    {
+        "question": "你的年齡",
+        "questionName": "healthAge",
+        "tags": [
+            {
+                "answer": "20歲以下",
+                "tagName": "20歲以下",
+                "tagId": "tag-bjbXSt2gi"
+            },
+            {
+                "answer": "20-29歲",
+                "tagName": "20-29歲",
+                "tagId": "tag-qYe0v6HqF"
+            },
+            {
+                "answer": "30-39歲",
+                "tagName": "30-39歲",
+                "tagId": "tag-6iaNB8Ea4"
+            },
+            {
+                "answer": "40-49歲",
+                "tagName": "40-49歲",
+                "tagId": "tag-e4JG3GBG_"
+            },
+            {
+                "answer": "50-59歲",
+                "tagName": "50-59歲",
+                "tagId": "tag-DTE6DWovG"
+            },
+            {
+                "answer": "59歲以上",
+                "tagName": "59歲以上",
+                "tagId": "tag-pAxHnckQs"
+            }
+        ]
+    },
+    {
+        "question": "性別",
+        "questionName": "healthGender",
+        "tags": [
+            {
+                "answer": "男性",
+                "tagName": "男性",
+                "tagId": "tag-F8Me8-UGg"
+            },
+            {
+                "answer": "女性",
+                "tagName": "女性",
+                "tagId": "tag-8HwqQuQ43"
+            },
+            {
+                "answer": "不提供",
+                "tagName": "不提供性別",
+                "tagId": "tag-BrpgwlI5E"
+            }
+        ]
+        
+    }
+]

src/fe/js/type/index.ts

+type TypeResponse = {
+  success: boolean,
+  msg: string,
+  data: object | null
+}
+
+type TypeUserResponse = {
+  success: boolean,
+  msg: string,
+  data: {
+    id: number,
+    activityId: number ,
+    lineUserId: string,
+    lineName: string,
+    picUrl: string,
+    userStatus: number,
+    agreePolicy: number,
+    taxFiled: number,
+    totalPrize: number,
+    cdate: string
+  }
+}
+
+type TypeCoupon = {
+  title: string,
+  subTitle: string,
+  keyValue: string,
+  totalPrize: number,
+  processStatus: number, // 狀態 => 0:待領取（空白）1:待專人聯繫 2:待同意 3:已同意&已領取 4:已同意&已領取
+  cdate: string
+}
+
+type TypeCouponItem = {
+  id: number,
+  campaignId: number,
+  activityId: number,
+  title: string,
+  subTitle: string,
+  keyValue: string,
+  pin: string,
+  activityCheckCode: string,
+  used: number,
+  userId: number,
+  useDate: string,
+  city: string,
+  area: string,
+  store: string,
+  processStatus: number, // 狀態 => 0:待領取（空白）1:待專人聯繫 2:待同意 3:已同意&已領取 4:已同意&已領取
+  cdate: string
+}
+
+type TypeCouponResponse = {
+  success: boolean,
+  msg: "ok",
+  data: TypeCoupon
+}
+
+type TypeCouponListResponse = {
+  success: boolean,
+  msg: "ok",
+  data: TypeCouponItem[]
+}
+
+type TypeRedeemCouponResponse = {
+  success: boolean,
+  msg: string,
+  data: {
+    quoteId: number
+  }
+}

src/fe/js/utlis.js

+
+/* utlis */
+
+// if (typeof console == "undefined") {
+//     window.console = {
+//         log: function () {}
+//     };
+// }
+
+// window.console = {
+//        log: function () {}
+// };
+
+isLIVE = false;
+
+switch (window.location.host.toLowerCase()) {
+
+  case 'mortlach-com.diageoplatform.com':
+    isLIVE = false;
+    break;
+
+  case 'line.maltssociety.com.tw':
+    isLIVE = true;
+    break;
+
+  case 'www.mortlach.com.tw':
+    isLIVE = true;
+    break;
+}
+
+console.log('isLIVE : ' + isLIVE);
+
+function gtag_pageView(_key) {
+  //console.log("gtag_pageView: " + _key);
+}
+
+function gtag_ButtonClick(_key) {
+  console.log("gtag_ButtonClick: " + _key);
+
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    'event': 'customEvent',
+    'eventCategory': 'Button',
+    'eventAction': 'Click',
+    'eventLabel': _key
+  });
+}
+
+function setDefault(_textbox, _value) { // depend on jQuery
+  $(_textbox).val(_value).css({ opacity: .4 });
+  $(_textbox).focus(
+    function () {
+      if ($(this).val() == _value) {
+        $(this).val('').css({ opacity: 1 });
+      }
+    })
+    .blur(function () {
+      if ($(this).val() == '') {
+        $(this).val(_value).css({ opacity: .4 });
+      }
+    });
+}
+
+function getParameterByName(name, url) {
+  if (!url) 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, " "));
+}
+
+function setParameterByName(name, value, url) {
+  if (!url) url = window.location.href;
+  var re = new RegExp("([?|&])" + name + "=.*?(&|$)", "i");
+  separator = url.indexOf('?') !== -1 ? "&" : "?";
+  if (url.match(re)) {
+    return url.replace(re, '$1' + name + "=" + value + '$2');
+  }
+  else {
+    return url + separator + name + "=" + value;
+  }
+}
+
+function loadAnimate(_namespace, $container, _callback) {
+  var $canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
+
+  var key = Object.keys(this[_namespace].compositions)[0];
+  var comp = this[_namespace].getComposition(key);
+  var lib = comp.getLibrary();
+
+  $canvas = $('<canvas></canvas>').attr({
+    width: lib.properties.width,
+    height: lib.properties.height
+  }).appendTo($container);
+
+  var loader = new createjs.LoadQueue(false);
+  loader.addEventListener("fileload", function (evt) { handleFileLoad(evt, comp) });
+  loader.addEventListener("complete", function (evt) { handleComplete(evt, comp) });
+  loader.loadManifest(lib.properties.manifest);
+
+  function handleFileLoad(evt, comp) {
+    var images = comp.getImages();
+    if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
+  }
+  function handleComplete(evt, comp) {
+    var lib = comp.getLibrary();
+    var ss = comp.getSpriteSheet();
+    var queue = evt.target;
+    var ssMetadata = lib.ssMetadata;
+    for (i = 0; i < ssMetadata.length; i++) {
+      ss[ssMetadata[i].name] = new createjs.SpriteSheet({ "images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames })
+    }
+    exportRoot = new lib[_namespace]();
+    stage = new lib.Stage($canvas[0]);
+    fnStartAnimation = function () {
+      stage.addChild(exportRoot);
+      createjs.Ticker.setFPS(lib.properties.fps);
+      createjs.Ticker.addEventListener("tick", stage);
+      exportRoot.stop();
+      if (_callback != null) {
+        _callback(exportRoot);
+      }
+    }
+
+    this[_namespace].compositionLoaded(lib.properties.id);
+    fnStartAnimation();
+  }
+}
+
+function setCookie(name,value,days) {
+  var expires = "";
+  if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (days*24*60*60*1000));
+      expires = "; expires=" + date.toUTCString();
+  }
+  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
+}
+function getCookie(name) {
+  var nameEQ = name + "=";
+  var ca = document.cookie.split(';');
+  for(var i=0;i < ca.length;i++) {
+      var c = ca[i];
+      while (c.charAt(0)==' ') c = c.substring(1,c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+  }
+  return null;
+}
+function eraseCookie(name) {   
+  document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+}
+
+function POST(theUrl, theData) {
+  const _url = API__DOMAIN + theUrl;
+  return fetch(_url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(theData)
+  })
+  .then((response) => {
+    return response.json(); 
+  }).then((jsonData) => {
+    const { success, msg } = jsonData;
+    if (!success) {
+      throw new Error(msg);
+    }
+    return jsonData;
+  }).catch((err) => {
+    throw new Error(err);
+  });
+}
+
+function GET(theUrl, theData) {
+  const _url = API__DOMAIN + theUrl +'?' + serialize(theData);
+  return fetch(_url, {})
+    .then((response) => {
+      return response.json(); 
+    }).then((jsonData) => {
+      const { success, msg } = jsonData;
+      if (!success) {
+        throw new Error(msg);
+      }
+      return jsonData;
+    }).catch((err) => {
+      throw new Error(err);
+  });
+}
+
+const PRE__LIFFID = '2000769399-lGpVNobN'; // 測試liffId待定
+const PRO__LIFFID = '2000844179-J80gOzVP'; // 正式liffId待定
+const LIFFID = (isLIVE) ? PRO__LIFFID : PRE__LIFFID;
+
+function liffInit() {
+  return new Promise((resolve, reject) => {
+    liff.init({
+      liffId: LIFFID,
+    }).then(() => {
+      if (!liff.isLoggedIn() && !liff.isInClient()) {
+        liff.login();
+      } else {
+        liff.getProfile().then((profile) => {
+          resolve(profile);
+        })
+        .catch((err)=>{
+          console.log(err)
+        });
+      }
+    }).catch((err) => {
+      reject(new Error(err));
+    });
+  });
+}
+
+function sleep(seconds) {
+  return new Promise((resolve, reject) => {
+    let _t = setTimeout(() => {
+      clearTimeout(_t);
+      _t - null;
+      resolve();
+    }, seconds);  
+  });
+}
+
+const _PRE__HOST = 'mortlach-com.diageoplatform.com';
+const _PRO__HOST = 'line.maltssociety.com.tw';
+const _URL = location.hostname;
+const _host = (_URL.indexOf(_PRO__HOST) != -1) ? _PRO__HOST : _PRE__HOST;
+const API__DOMAIN = 'https://' + _host;
+
+
+var isIE = false;
+
+utlis = function () {
+
+  //private menbers
+
+
+  //private methods
+  function init() {
+    console.log('all is loaded.');
+  }
+
+  //constructor
+
+  {
+    if ($('html').is('.ie6, .ie7, .ie8')) {
+      isIE = true;
+      // alert('.ie6, .ie7, .ie8');
+    }
+
+    $(document).ready(function () {
+      init();
+    });
+  }
+
+  //public
+
+  return {
+
+  }
+}
+
+utlis = new utlis();

src/fe/lib/cookie.js

+function SetCookie(name,value)
+{
+    var Days = 30;
+    var exp  = new Date();
+    exp.setTime(exp.getTime() + Days*24*60*60*1000);
+    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
+}
+function getCookie(name)    
+{
+    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
+    if(arr != null) return unescape(arr[2]); return null;
+}

src/fe/lib/jquery.mobile.touch.min.js

+/*! jQuery Mobile v1.4.5 | Copyright 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */
+
+(function (e, t, n) {
+    typeof define == "function" && define.amd ? define(["jquery"], function (r) {
+        return n(r, e, t), r.mobile
+    }) : n(e.jQuery, e, t)
+})(this, document, function (e, t, n, r) {
+    (function (e, t, n, r) {
+        function T(e) {
+            while (e && typeof e.originalEvent != "undefined")e = e.originalEvent;
+            return e
+        }
+
+        function N(t, n) {
+            var i = t.type, s, o, a, l, c, h, p, d, v;
+            t = e.Event(t), t.type = n, s = t.originalEvent, o = e.event.props, i.search(/^(mouse|click)/) > -1 && (o = f);
+            if (s)for (p = o.length, l; p;)l = o[--p], t[l] = s[l];
+            i.search(/mouse(down|up)|click/) > -1 && !t.which && (t.which = 1);
+            if (i.search(/^touch/) !== -1) {
+                a = T(s), i = a.touches, c = a.changedTouches, h = i && i.length ? i[0] : c && c.length ? c[0] : r;
+                if (h)for (d = 0, v = u.length; d < v; d++)l = u[d], t[l] = h[l]
+            }
+            return t
+        }
+
+        function C(t) {
+            var n = {}, r, s;
+            while (t) {
+                r = e.data(t, i);
+                for (s in r)r[s] && (n[s] = n.hasVirtualBinding = !0);
+                t = t.parentNode
+            }
+            return n
+        }
+
+        function k(t, n) {
+            var r;
+            while (t) {
+                r = e.data(t, i);
+                if (r && (!n || r[n]))return t;
+                t = t.parentNode
+            }
+            return null
+        }
+
+        function L() {
+            g = !1
+        }
+
+        function A() {
+            g = !0
+        }
+
+        function O() {
+            E = 0, v.length = 0, m = !1, A()
+        }
+
+        function M() {
+            L()
+        }
+
+        function _() {
+            D(), c = setTimeout(function () {
+                c = 0, O()
+            }, e.vmouse.resetTimerDuration)
+        }
+
+        function D() {
+            c && (clearTimeout(c), c = 0)
+        }
+
+        function P(t, n, r) {
+            var i;
+            if (r && r[t] || !r && k(n.target, t))i = N(n, t), e(n.target).trigger(i);
+            return i
+        }
+
+        function H(t) {
+            var n = e.data(t.target, s), r;
+            !m && (!E || E !== n) && (r = P("v" + t.type, t), r && (r.isDefaultPrevented() && t.preventDefault(), r.isPropagationStopped() && t.stopPropagation(), r.isImmediatePropagationStopped() && t.stopImmediatePropagation()))
+        }
+
+        function B(t) {
+            var n = T(t).touches, r, i, o;
+            n && n.length === 1 && (r = t.target, i = C(r), i.hasVirtualBinding && (E = w++, e.data(r, s, E), D(), M(), d = !1, o = T(t).touches[0], h = o.pageX, p = o.pageY, P("vmouseover", t, i), P("vmousedown", t, i)))
+        }
+
+        function j(e) {
+            if (g)return;
+            d || P("vmousecancel", e, C(e.target)), d = !0, _()
+        }
+
+        function F(t) {
+            if (g)return;
+            var n = T(t).touches[0], r = d, i = e.vmouse.moveDistanceThreshold, s = C(t.target);
+            d = d || Math.abs(n.pageX - h) > i || Math.abs(n.pageY - p) > i, d && !r && P("vmousecancel", t, s), P("vmousemove", t, s), _()
+        }
+
+        function I(e) {
+            if (g)return;
+            A();
+            var t = C(e.target), n, r;
+            P("vmouseup", e, t), d || (n = P("vclick", e, t), n && n.isDefaultPrevented() && (r = T(e).changedTouches[0], v.push({touchID: E, x: r.clientX, y: r.clientY}), m = !0)), P("vmouseout", e, t), d = !1, _()
+        }
+
+        function q(t) {
+            var n = e.data(t, i), r;
+            if (n)for (r in n)if (n[r])return !0;
+            return !1
+        }
+
+        function R() {
+        }
+
+        function U(t) {
+            var n = t.substr(1);
+            return {
+                setup: function () {
+                    q(this) || e.data(this, i, {});
+                    var r = e.data(this, i);
+                    r[t] = !0, l[t] = (l[t] || 0) + 1, l[t] === 1 && b.bind(n, H), e(this).bind(n, R), y && (l.touchstart = (l.touchstart || 0) + 1, l.touchstart === 1 && b.bind("touchstart", B).bind("touchend", I).bind("touchmove", F).bind("scroll", j))
+                }, teardown: function () {
+                    --l[t], l[t] || b.unbind(n, H), y && (--l.touchstart, l.touchstart || b.unbind("touchstart", B).unbind("touchmove", F).unbind("touchend", I).unbind("scroll", j));
+                    var r = e(this), s = e.data(this, i);
+                    s && (s[t] = !1), r.unbind(n, R), q(this) || r.removeData(i)
+                }
+            }
+        }
+
+        var i = "virtualMouseBindings", s = "virtualTouchID", o = "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split(" "), u = "clientX clientY pageX pageY screenX screenY".split(" "), a = e.event.mouseHooks ? e.event.mouseHooks.props : [], f = e.event.props.concat(a), l = {}, c = 0, h = 0, p = 0, d = !1, v = [], m = !1, g = !1, y = "addEventListener"in n, b = e(n), w = 1, E = 0, S, x;
+        e.vmouse = {moveDistanceThreshold: 10, clickDistanceThreshold: 10, resetTimerDuration: 1500};
+        for (x = 0; x < o.length; x++)e.event.special[o[x]] = U(o[x]);
+        y && n.addEventListener("click", function (t) {
+            var n = v.length, r = t.target, i, o, u, a, f, l;
+            if (n) {
+                i = t.clientX, o = t.clientY, S = e.vmouse.clickDistanceThreshold, u = r;
+                while (u) {
+                    for (a = 0; a < n; a++) {
+                        f = v[a], l = 0;
+                        if (u === r && Math.abs(f.x - i) < S && Math.abs(f.y - o) < S || e.data(u, s) === f.touchID) {
+                            t.preventDefault(), t.stopPropagation();
+                            return
+                        }
+                    }
+                    u = u.parentNode
+                }
+            }
+        }, !0)
+    })(e, t, n), function (e) {
+        e.mobile = {}
+    }(e), function (e, t) {
+        var r = {touch: "ontouchend"in n};
+        e.mobile.support = e.mobile.support || {}, e.extend(e.support, r), e.extend(e.mobile.support, r)
+    }(e), function (e, t, r) {
+        function l(t, n, i, s) {
+            var o = i.type;
+            i.type = n, s ? e.event.trigger(i, r, t) : e.event.dispatch.call(t, i), i.type = o
+        }
+
+        var i = e(n), s = e.mobile.support.touch, o = "touchmove scroll", u = s ? "touchstart" : "mousedown", a = s ? "touchend" : "mouseup", f = s ? "touchmove" : "mousemove";
+        e.each("touchstart touchmove touchend tap taphold swipe swipeleft swiperight scrollstart scrollstop".split(" "), function (t, n) {
+            e.fn[n] = function (e) {
+                return e ? this.bind(n, e) : this.trigger(n)
+            }, e.attrFn && (e.attrFn[n] = !0)
+        }), e.event.special.scrollstart = {
+            enabled: !0, setup: function () {
+                function s(e, n) {
+                    r = n, l(t, r ? "scrollstart" : "scrollstop", e)
+                }
+
+                var t = this, n = e(t), r, i;
+                n.bind(o, function (t) {
+                    if (!e.event.special.scrollstart.enabled)return;
+                    r || s(t, !0), clearTimeout(i), i = setTimeout(function () {
+                        s(t, !1)
+                    }, 50)
+                })
+            }, teardown: function () {
+                e(this).unbind(o)
+            }
+        }, e.event.special.tap = {
+            tapholdThreshold: 750, emitTapOnTaphold: !0, setup: function () {
+                var t = this, n = e(t), r = !1;
+                n.bind("vmousedown", function (s) {
+                    function a() {
+                        clearTimeout(u)
+                    }
+
+                    function f() {
+                        a(), n.unbind("vclick", c).unbind("vmouseup", a), i.unbind("vmousecancel", f)
+                    }
+
+                    function c(e) {
+                        f(), !r && o === e.target ? l(t, "tap", e) : r && e.preventDefault()
+                    }
+
+                    r = !1;
+                    if (s.which && s.which !== 1)return !1;
+                    var o = s.target, u;
+                    n.bind("vmouseup", a).bind("vclick", c), i.bind("vmousecancel", f), u = setTimeout(function () {
+                        e.event.special.tap.emitTapOnTaphold || (r = !0), l(t, "taphold", e.Event("taphold", {target: o}))
+                    }, e.event.special.tap.tapholdThreshold)
+                })
+            }, teardown: function () {
+                e(this).unbind("vmousedown").unbind("vclick").unbind("vmouseup"), i.unbind("vmousecancel")
+            }
+        }, e.event.special.swipe = {
+            scrollSupressionThreshold: 30, durationThreshold: 1e3, horizontalDistanceThreshold: 30, verticalDistanceThreshold: 30, getLocation: function (e) {
+                var n = t.pageXOffset, r = t.pageYOffset, i = e.clientX, s = e.clientY;
+                if (e.pageY === 0 && Math.floor(s) > Math.floor(e.pageY) || e.pageX === 0 && Math.floor(i) > Math.floor(e.pageX))i -= n, s -= r; else if (s < e.pageY - r || i < e.pageX - n)i = e.pageX - n, s = e.pageY - r;
+                return {x: i, y: s}
+            }, start: function (t) {
+                var n = t.originalEvent.touches ? t.originalEvent.touches[0] : t, r = e.event.special.swipe.getLocation(n);
+                return {time: (new Date).getTime(), coords: [r.x, r.y], origin: e(t.target)}
+            }, stop: function (t) {
+                var n = t.originalEvent.touches ? t.originalEvent.touches[0] : t, r = e.event.special.swipe.getLocation(n);
+                return {time: (new Date).getTime(), coords: [r.x, r.y]}
+            }, handleSwipe: function (t, n, r, i) {
+                if (n.time - t.time < e.event.special.swipe.durationThreshold && Math.abs(t.coords[0] - n.coords[0]) > e.event.special.swipe.horizontalDistanceThreshold && Math.abs(t.coords[1] - n.coords[1]) < e.event.special.swipe.verticalDistanceThreshold) {
+                    var s = t.coords[0] > n.coords[0] ? "swipeleft" : "swiperight";
+                    return l(r, "swipe", e.Event("swipe", {target: i, swipestart: t, swipestop: n}), !0), l(r, s, e.Event(s, {target: i, swipestart: t, swipestop: n}), !0), !0
+                }
+                return !1
+            }, eventInProgress: !1, setup: function () {
+                var t, n = this, r = e(n), s = {};
+                t = e.data(this, "mobile-events"), t || (t = {length: 0}, e.data(this, "mobile-events", t)), t.length++, t.swipe = s, s.start = function (t) {
+                    if (e.event.special.swipe.eventInProgress)return;
+                    e.event.special.swipe.eventInProgress = !0;
+                    var r, o = e.event.special.swipe.start(t), u = t.target, l = !1;
+                    s.move = function (t) {
+                        if (!o || t.isDefaultPrevented())return;
+                        r = e.event.special.swipe.stop(t), l || (l = e.event.special.swipe.handleSwipe(o, r, n, u), l && (e.event.special.swipe.eventInProgress = !1)), Math.abs(o.coords[0] - r.coords[0]) > e.event.special.swipe.scrollSupressionThreshold && t.preventDefault()
+                    }, s.stop = function () {
+                        l = !0, e.event.special.swipe.eventInProgress = !1, i.off(f, s.move), s.move = null
+                    }, i.on(f, s.move).one(a, s.stop)
+                }, r.on(u, s.start)
+            }, teardown: function () {
+                var t, n;
+                t = e.data(this, "mobile-events"), t && (n = t.swipe, delete t.swipe, t.length--, t.length === 0 && e.removeData(this, "mobile-events")), n && (n.start && e(this).off(u, n.start), n.move && i.off(f, n.move), n.stop && i.off(a, n.stop))
+            }
+        }, e.each({scrollstop: "scrollstart", taphold: "tap", swipeleft: "swipe.left", swiperight: "swipe.right"}, function (t, n) {
+            e.event.special[t] = {
+                setup: function () {
+                    e(this).bind(n, e.noop)
+                }, teardown: function () {
+                    e(this).unbind(n)
+                }
+            }
+        })
+    }(e, this)
+});
+
+(function() {
+    var supportTouch = $.support.touch,
+        scrollEvent = "touchmove scroll",
+        touchStartEvent = supportTouch ? "touchstart" : "mousedown",
+        touchStopEvent = supportTouch ? "touchend" : "mouseup",
+        touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
+    $.event.special.swipeupdown = {
+        setup: function() {
+            var thisObject = this;
+            var $this = $(thisObject);
+            $this.bind(touchStartEvent, function(event) {
+                var data = event.originalEvent.touches ?
+                        event.originalEvent.touches[ 0 ] :
+                        event,
+                    start = {
+                        time: (new Date).getTime(),
+                        coords: [ data.pageX, data.pageY ],
+                        origin: $(event.target)
+                    },
+                    stop;
+
+                function moveHandler(event) {
+                    if (!start) {
+                        return;
+                    }
+                    var data = event.originalEvent.touches ?
+                        event.originalEvent.touches[ 0 ] :
+                        event;
+                    stop = {
+                        time: (new Date).getTime(),
+                        coords: [ data.pageX, data.pageY ]
+                    };
+
+                    // prevent scrolling
+                    if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
+                        event.preventDefault();
+                    }
+                }
+                $this
+                    .bind(touchMoveEvent, moveHandler)
+                    .one(touchStopEvent, function(event) {
+                        $this.unbind(touchMoveEvent, moveHandler);
+                        if (start && stop) {
+                            if (stop.time - start.time < 1000 &&
+                                Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
+                                Math.abs(start.coords[0] - stop.coords[0]) < 75) {
+                                start.origin
+                                    .trigger("swipeupdown")
+                                    .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
+                            }
+                        }
+                        start = stop = undefined;
+                    });
+            });
+        }
+    };
+    $.each({
+        swipedown: "swipeupdown",
+        swipeup: "swipeupdown"
+    }, function(event, sourceEvent){
+        $.event.special[event] = {
+            setup: function(){
+                $(this).bind(sourceEvent, $.noop);
+            }
+        };
+    });
+
+})();