update

src/fe/css/all.css

   border: #747474 0.15em solid;
   border-radius: 0.8em;
   padding: 0.8em 0.55em;
+  background-color: #ffffff;
 }
 .tags .tags__item-md {
   width: 30%;
   border-radius: 1em;
   padding: 1em 1.5em;
   margin-bottom: 1.8em;
+  background-color: #ffffff;
 }
 .form__input input, .form__input select {
   width: 100%;
     padding-bottom: 9.4375em;
   }
 }
-.register {
-  padding-top: 3.5em;
-  padding-bottom: 3em;
+.register .section__container {
+  width: 100%;
+  padding: 3.5em 2.2em 3em;
+  background: linear-gradient(to bottom, #A8E2FF 0%, rgba(191, 230, 246, 0) 100%);
+}
+.register .section__container::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(../images/register-bg.png) no-repeat center center/contain;
+  opacity: 0.5;
+}
+.register .form {
+  position: relative;
 }
 
 .passport {

src/fe/css/component/_button.scss

     p {
         text-align: center;
         font-size: 1.6em;
-        color: $c-whiite;
+        color: $c-white;
         margin-bottom: 0;
     }
     &.disable {

src/fe/css/component/_form.scss

                 display: none;
                 flex: 0 0 auto;
                 &:checked + .label__checkbox {
-                    background-color: $c-whiite;
+                    background-color: $c-white;
                     &::before {
                         display: block;
                     }
         border-radius: 1em;
         padding: 1em 1.5em;
         margin-bottom: 1.8em;
+        background-color: $c-white;
         input, select {
             width: 100%;
             border: none;

src/fe/css/component/_modal.scss

             p {
                 font-size: 1.8em;
                 font-weight: 300;
-                color: $c-whiite;
+                color: $c-white;
             }
             &:after {
                 display: none;

src/fe/css/component/_tag.scss

         border: $c-gray 0.15em solid;
         border-radius: 0.8em;
         padding: 0.8em 0.55em;
+        background-color: $c-white;
         &-md {
             width: 30%;
             margin-right: 5%;

src/fe/css/page/_passport.scss

             }
         }
         &__content {
-            color: $c-whiite;
+            color: $c-white;
         }
         &__nickname {
             margin-bottom: 0.1em;
                 background: url(../images/arrow-down.png) no-repeat center center/contain;
             }
             p {
-                color: $c-whiite;
+                color: $c-white;
                 text-align: center;
                 margin-bottom: 0;
                 font-size: 1.6em;
             }
         }
         &__body {
-            background-color: $c-whiite;
+            background-color: $c-white;
             padding: 1.5em 1.5em 0;
             .tags {
                 &__item {

src/fe/css/page/_register.scss

 @charset "UTF-8";
 .register {
-    padding-top: 3.5em;
-    padding-bottom: 3em;
+    .section__container {
+        width: 100%;
+        padding: 3.5em 2.2em 3em;
+        background: linear-gradient(to bottom, #A8E2FF 0%, rgba(191, 230, 246, 0) 100%);
+        &::before {
+            content: "";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url(../images/register-bg.png) no-repeat center center/contain;
+            opacity: 0.5;
+        }
+    }
+    .form {
+        position: relative;
+    }
 }

src/fe/css/variable/_base.scss

 
 $c-blue-bright: #2AACE2;
 
-$c-whiite: #ffffff;
+$c-white: #ffffff;
 
 $c-black: #1E2846;
 

src/fe/index.html

                     <input id="healthAgeOption_1" type="radio" value="tag-bjbXSt2gi" name="healthAge">
                     <label for="healthAgeOption_1">
                         <p>
-                          20歲以下
+                          19歲以下
                         </p>
                     </label>
                   </div>
                     <input id="healthAgeOption_6" type="radio" value="tag-pAxHnckQs" name="healthAge">
                     <label for="healthAgeOption_6">
                         <p>
-                          59歲以上
+                          60歲以上
                         </p>
                     </label>
                   </div>
                     <option value="">請選擇性別</option>
                     <option value="tag-8HwqQuQ43">女性</option>
                     <option value="tag-F8Me8-UGg">男性</option>
-                    <option value="tag-8HwqQuQ43">不提供</option>
+                    <option value="tag-8HwqQuQ43">其他</option>
                   </select>
                 </div>
               </fieldset>

src/fe/js/base.js

 
 					console.log("userData: ",userData)
 					
-					if(Object.keys(userData).length === 0) {
+					if(userData === null) {
 						sectionFadeIn(".register");
 					}else {
 						sectionFadeIn(".passport");
 						passport.buildPassportHandler(userData)
 					}
 				})
-				.catch(err => {
-					console.log(err)
-					$(".wapper-loading").remove();
-					gsap.to(".wrapper", {
-						duration: 0.5,
-						autoAlpha: 1
-					});
-				})
 		})
 
 		// 返回表單頁

src/fe/js/passport.js

 
 		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;
+			let getHealthAction = convertMultipleTag('healthAction', data.filler_content.healthAction);
+			let gethealthTopic = convertMultipleTag('healthTopic', data.filler_content.healthTopic);
+			let getHealthAge = convertSingleTag('healthAge', data.filler_content.healthAge);
+			let getHealthGender= convertSingleTag('healthGender', data.filler_content.healthGender);
+			convertData.headSticker = data.head_sticker;
+			convertData.healthNickname = data.nickname;
 			
 			Promise.all([getHealthAction ,gethealthTopic, getHealthAge, getHealthGender]).then((res) => {
 				console.log(convertData); // [3, 1337, "foo"]
 				buildTagHtml();
 			});
+
 		}, 200);
 
 	}

src/fe/js/register.js

 					LinePicHandler(linePicUrl);
 				}
 				if(fileInput.id == 'fileInput2') {
-					// console.log(finalase64Data)
-					sendBase64DataToApi(finalase64Data);
+					setTimeout(()=>{
+						console.log(finalase64Data)
+						sendBase64DataToApi(finalase64Data);
+					}, 200);
+					
 				}
 			});
 		});
 		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);
+				if(_res.result === 'successed') {
+					$(".register .form-submit").removeClass("disable");
+					$(".register .form-submit p").text("下一步");
+					// 清除表單
+					resetRegister();
+					// 再次載入取得資料
+					GameService.getInstanse().userLogin().then(_res => {
+						console.log("_res: ",_res);
+	
+						userData = GameService.getInstanse().getUserData();
+	
+						console.log("userData: ",userData)
+						
+						base.sectionFadeOut(".register");
+						base.sectionFadeIn(".passport");
+						passport.buildPassportHandler(userData)
+					})
+				}
+				
 			})
 			.catch(_err => {
 				console.log(_err);

src/fe/js/services/userModel.js

    * @returns {TypeUserResponse} Promise
    */
   function loginUser () {
-    return POST('/api/JWPokeGame/getUserInfo.ashx', {
-      lineUserId: m_lineUserId,
-    });
+    return GET('/api/survey/healthyPassPort/profile?lineUserId='+m_lineUserId);
   }
 
   /**
    * @returns {TypeResponse} Promise
    */
   function registerUser (_formdata) {
-    return POST('/api/JWPokeGame/saveUserInfo.ashx', {
+    return POST('/api/survey/healthyPassPort/post', {
       lineUserId: m_lineUserId,
       ..._formdata,
     }).catch((error)=> {
   * @returns {TypeUserResponse} Promise
   */
     function updatePhoto(base64Image) {
-      return POST('/api/JWPokeGame/getUserInfo.ashx', {
-        lineUserPhoto: base64Image,
+      return POST('/api/survey/healthyPassPort/stickerUpdate', {
+        lineUserId: m_lineUserId,
+        headSticker: base64Image,
       });
     }
   

src/fe/js/utlis.js

 
 switch (window.location.host.toLowerCase()) {
 
-  case 'mortlach-com.diageoplatform.com':
+  case 'infra.cecmartech.com:8077':
     isLIVE = false;
     break;
 
 
 function POST(theUrl, theData) {
   const _url = API__DOMAIN + theUrl;
+  // console.log(JSON.stringify(theData))
   return fetch(_url, {
     method: 'POST',
     headers: {
   .then((response) => {
     return response.json(); 
   }).then((jsonData) => {
-    const { success, msg } = jsonData;
-    if (!success) {
-      throw new Error(msg);
-    }
+    // const { success, msg } = jsonData;
+    // if (!success) {
+    //   throw new Error(msg);
+    // }
+    console.log(jsonData)
     return jsonData;
-  }).catch((err) => {
-    throw new Error(err);
-  });
+  })
+  // .catch((err) => {
+  //   throw new Error(err);
+  // });
 }
 
-function GET(theUrl, theData) {
-  const _url = API__DOMAIN + theUrl +'?' + serialize(theData);
+function GET(theUrl) {
+  const _url = API__DOMAIN + theUrl;
   return fetch(_url, {})
     .then((response) => {
       return response.json(); 
     }).then((jsonData) => {
-      const { success, msg } = jsonData;
-      if (!success) {
-        throw new Error(msg);
-      }
+      console.log(jsonData)
       return jsonData;
-    }).catch((err) => {
-      throw new Error(err);
-  });
+    })
+    // .catch((err) => {
+    //   throw new Error(err);
+    // });
 }
 
 const PRE__LIFFID = '2000769399-lGpVNobN'; // 測試liffId待定
   });
 }
 
-const _PRE__HOST = 'mortlach-com.diageoplatform.com';
+const _PRE__HOST = 'infra.cecmartech.com:8077';
 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;
+const API__DOMAIN = location.protocol+'//' + _host;
 
 
 var isIE = false;