Home Verkennen Help
Registreren Inloggen
choozmo
/
hhh_step_question
2
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

interface modification

huaisianhuang 3 jaren geleden
bovenliggende
d6652f936a
commit
8b31a27dcc
5 gewijzigde bestanden met toevoegingen van 192 en 54 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. BIN
      step_question/.DS_Store
  2. BIN
      step_question/multi_steps/images/checked.png
  3. 68 37
      step_question/multi_steps/index.html
  4. 21 10
      step_question/multi_steps/script.js
  5. 103 7
      step_question/multi_steps/style.css

BIN
step_question/.DS_Store
Bestand weergeven


BIN
step_question/multi_steps/images/checked.png
Bestand weergeven


+ 68 - 37
step_question/multi_steps/index.html
Bestand weergeven 

@@ -4,13 +4,19 @@
 
   <meta charset="UTF-8">
 
   <title>幸福空間 - 問卷調查</title>
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
 
+    crossorigin="anonymous">
 
   <link rel="stylesheet" href="./style.css">
 
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
 </head>
 
 <body>
 
-<img src="https://hhh.com.tw/assets/images/hhh-logo2.svg" width="145" height="40" alt="hhh-logo">
 
+<img src="https://hhh.com.tw/assets/images/hhh-logo2.svg" width="145" height="40" alt="hhh-logo" class="img_logo">
 
 <iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
 
 <form action="http://127.0.0.1:8000/step_questions/submit" method="post" id="msform" target="dummyframe">
 
+  <div class="notice_card">
 
+    您好，我們是幸福空間，想要進行裝修市場調查。只要填寫完畢就送您 City Cafe 或 Cama 咖啡乙杯及裝修折價卷五萬元！
 
+    贈送方式將以LINE寄送數位條碼，可直接至全省 City Cafe 或 Cama 門市兌換，為確保兌換權益，請務必填寫真實資訊，感謝您的配合。
 
+  </div>
 
   <ul id="progressbar">
 
     <li class="active">基本資料</li>
 
     <li>建案資料</li>
 
@@ -19,60 +25,82 @@
 
   <!-- fieldsets -->
 
   <fieldset>
 
     <h2 class="fs-title">基本資料</h2>
 
-    <h3 class="fs-subtitle">This is step 1</h3>
 
+    <h3 class="fs-subtitle">Step 1</h3>
 
     <select name="q1">
 
       <option value="Male">男</option>
 
       <option value="Female">女</option>
 
     </select>
 
     <input type="text" name='q2' value="" placeholder="手機號碼" /> <br/>
 
-    <input type="text" name='q3' value="" placeholder="Email" />
 
+    <input type="email" name='q3' value="" placeholder="Email" />
 
     <input type="button" name="next" class="next action-button" value="Next" />
 
   </fieldset>
 
   <fieldset>
 
     <h2 class="fs-title">建案資料</h2>
 
-    <h3 class="fs-subtitle">This is step 2</h3>
 
-    <input type="text" name='q4' value="" placeholder="請問您所在哪個建案" />
 
-    <div class="left_align">
 
-    <p>建案類型?</p> <br/>
 
-    <label><input type="checkbox" class="check_button" value="預售屋" name="q5" />預售屋</label>
 
-    <label><input type="checkbox" class="check_button" value="新成屋" name="q5" />新成屋</label> <br/>
 
+    <h3 class="fs-subtitle">Step 2</h3>
 
+    <label class="fs-label"><i class="fas fa-chevron-right"></i>請問您所在哪個建案?</label>
 
+    <input type="text" name='q4' value="" placeholder="建案名" class="mb" />
 
+
 
+    <label class="fs-label"><i class="fas fa-chevron-right"></i>建案類型</label>
 
+    <div class="fs-label">
 
+      <input type="radio" class="check_button" value="預售屋" name="q5" id="pre-sold" />
 
+      <label for="pre-sold" class="fs-label-type">預售屋</label>
 
+      <input type="radio" class="check_button ml" value="新成屋" name="q5" id="new" />
 
+      <label for="new" class="fs-label-type">新成屋</label>
 
     </div>
 
     <input type="button" name="previous" class="previous action-button" value="Previous" />
 
-    <input type="button" name="next" class="next action-button" value="Next" />
 
+    <input type="button" name="next" class="next action-button next-2" value="Next" />
 
   </fieldset>
 
   <fieldset>
 
     <h2 class="fs-title">裝修資料</h2>
 
-    <h3 class="fs-subtitle">This is step 3</h3>
 
-      <div class="left_align">
 
-        <p>喜歡的裝修風格?</p><br/>
 
-        <label><input type="checkbox" value="簡單大方" name="q6" />簡單大方</label>
 
-        <label><input type="checkbox" value="北歐風" name="q6" />北歐風</label>
 
-        <label><input type="checkbox" value="日式風格" name="q6" />日式風格</label>
 
-        <label><input type="checkbox" value="美式鄉村風" name="q6" />美式鄉村風</label>
 
-        <label><input type="checkbox" value="" id='q6_checkbox' onclick="show_input_text('q6_checkbox', 'q6_input')" />其他</label>
 
-        <input type="text" id="q6_input" name="q6" style="display:none" value="" />
 
+    <h3 class="fs-subtitle">Step 3</h3>
 
+      <div class="fs-label">
 
+        <label class="fs-label"><i class="fas fa-chevron-right"></i>喜歡的裝修風格?</label>
 
+        <input type="checkbox" value="簡單大方" name="q6" id="6a" />
 
+        <label class="mr fs-label-info" for="6a">簡單大方</label>
 
+        <input type="checkbox" value="北歐風" name="q6" id="6b" />
 
+        <label class="mr fs-label-info" for="6b">北歐風</label>
 
+        <input type="checkbox" value="日式風格" name="q6" id="6c" />
 
+        <label class="mr fs-label-info" for="6c">日式風格</label>
 
+        <input type="checkbox" value="美式鄉村風" name="q6" id="6d"/>
 
+        <label class="mr fs-label-info" for="6d">美式鄉村風</label>
 
+        <input type="checkbox" value="" id='q6_checkbox' onclick="show_input_text('q6_checkbox', 'q6_input')" />
 
+        <label class="mr fs-label-info" for="q6_checkbox">其他</label>
 
+        <input type="text" id="q6_input" name="q6" style="display:none" value="" placeholder="其他風格" />
 
       </div>
 
       <br/>
 
-      <div class="left_align">
 
-        <p>預計裝修預算(不含活動型傢俱/廚具/空調/窗簾/主燈)? </p><br/>
 
-        <label><input type="checkbox" value="50萬以下" name="q7" />50萬以下</label>
 
-        <label><input type="checkbox" value="50~100萬" name="q7" />50~100萬</label>
 
-        <label><input type="checkbox" value="100~200萬" name="q7" />100~200萬</label>
 
-        <label><input type="checkbox" value="200~300萬" name="q7" />200~300萬</label>
 
-        <label><input type="checkbox" value="300~500萬" name="q7" />300~500萬</label>
 
-        <label><input type="checkbox" value="500~800萬" name="q7" />500~800萬</label>
 
-        <label><input type="checkbox" value="800萬以上" name="q7" />800萬以上</label>
 
-        <label><input type="checkbox" value="" id='q7_checkbox' onclick="show_input_text('q7_checkbox', 'q7_input')"/>其他</label>
 
-        <input type="text" id="q7_input" name="q7" style="display:none" value="" />
 
+      <div class="fs-label">
 
+        <label class="fs-label"><i class="fas fa-chevron-right"></i>預計裝修預算(不含活動型傢俱/廚具/空調/窗簾/主燈)?</label>
 
+        <input type="checkbox" value="50萬以下" name="q7" id="7a" />
 
+        <label class="mr fs-label-info" for="7a">50萬以下</label>
 
+        <input type="checkbox" value="50~100萬" name="q7" id="7b" />
 
+        <label class="mr fs-label-info" for="7b">50~100萬</label>
 
+        <input type="checkbox" value="100~200萬" name="q7" id="7c" />
 
+        <label class="mr fs-label-info" for="7c">100~200萬</label>
 
+        <input type="checkbox" value="200~300萬" name="q7" id="7d" />
 
+        <label class="mr fs-label-info" for="7d">200~300萬</label>
 
+        <input type="checkbox" value="300~500萬" name="q7" id="7e" />
 
+        <label class="mr fs-label-info" for="7f">300~500萬</label>
 
+        <input type="checkbox" value="500~800萬" name="q7" id="7f"/>
 
+        <label class="mr fs-label-info" for="7f">500~800萬</label>
 
+        <input type="checkbox" value="800萬以上" name="q7" id="7g" />
 
+        <label class="mr fs-label-info" for="7g">800萬以上</label>
 
+        <input type="checkbox" value="" id='q7_checkbox' onclick="show_input_text('q7_checkbox', 'q7_input')"/>
 
+        <label class="mr fs-label-info" for="q7_checkbox">其他</label>
 
+        <input type="text" id="q7_input" name="q7" style="display:none" value="" placeholder="自訂預算" />
 
         <br/>
 
       </div>
 
-      <div class="left_align">
 
-        <p>喜歡的裝修風格?</p><br/>
 
-        <label><input type="checkbox" value="20坪以下" name="q8" />20坪以下</label>
 
-        <label><input type="checkbox" value="20~30坪" name="q8" />20~30坪</label>
 
-        <label><input type="checkbox" value="30~40坪" name="q8" />30~40坪</label>
 
-        <label><input type="checkbox" value="40~50坪" name="q8" />40~50坪</label>
 
-        <label><input type="checkbox" value="50坪以上" name="q8" />50坪以上</label>
 
+      <div class="fs-label">
 
+        <label class="fs-label"><i class="fas fa-chevron-right"></i>喜歡的裝修風格?</label>
 
+        <input type="checkbox" value="20坪以下" name="q8" id="8a" />
 
+        <label class="mr fs-label-info" for="8a">20坪以下</label>
 
+        <input type="checkbox" value="20~30坪" name="q8" id="8b" />
 
+        <label class="mr fs-label-info" for="8b">20~30坪</label>
 
+        <input type="checkbox" value="30~40坪" name="q8" id="8c" />
 
+        <label class="mr fs-label-info" for="8c">30~40坪</label>
 
+        <input type="checkbox" value="40~50坪" name="q8" id="8d" />
 
+        <label class="mr fs-label-info" for="8d">40~50坪</label>
 
+        <input type="checkbox" value="50坪以上" name="q8" id="8e" />
 
+        <label class="mr fs-label-info" for="8e">50坪以上</label>
 
       </div>
 
       <br/>
 
       <input type="button" name="previous" class="previous action-button" value="Previous" />
 
@@ -82,6 +110,9 @@
 
 <div id="overlay">
 
   <div class="thankyou">
 
     <h3>感謝您的填寫</h3>
 
+    <img src="images/checked.png" alt="">
 
+    <p>至 LINE 領取咖啡兌換券</p>
 
+    <button class="btn-exit">離開</button>
 
   </div>
 
 </div>
 
 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

+ 21 - 10
step_question/multi_steps/script.js
Bestand weergeven 

@@ -80,8 +80,9 @@ $(".previous").click(function(){
 
 	});
 
 });
 
 
+
 
 $("input[name=submit]").click(function(){
 
-  console.log($("#msform").serialize());
 
+  /* console.log($("#msform").serialize());
 
   $.ajax({
 
     url: 'http://127.0.0.1:8000/step_questions/submit',
 
     type: 'post',
 
@@ -91,13 +92,18 @@ $("input[name=submit]").click(function(){
 
       showThankyou();
 
       }
 
   });
 
-	return false;
 
+	return false; */
 
+	showThankyou();
 
 })
 
 
 function showThankyou() {
 
   $('#overlay').show();
 
 }
 
 
+$('.btn-exit').click(function() {
 
+	document.location = 'https://hhh.com.tw/'
 
+})
 
+
 
 function show_input_text(checkbox_id, input_id) {
 
 	var checkBox = document.getElementById(checkbox_id);
 
 	var inp = document.getElementById(input_id);
 
@@ -109,14 +115,19 @@ function show_input_text(checkbox_id, input_id) {
 
 }
 
 
 function validate() {
 
-  function q2_validate() {
 
-    if( $('input[name="q2"]:visible').val() !== undefined && $('input[name="q2"]:visible').val().length <= 0 ) {
 
+  function q2_validate() { 
+	let phoneno = /^\d{10}$/;
 
+    if( $('input[name="q2"]:visible').val() !== undefined && $('input[name="q2"]:visible').val().length <= 0) {
 
       $('input[name="q2"]:visible').addClass('error');
 
       if( !$('.error-text').length )
 
-          $('input.error').after('<p class="error-text">手機號碼 is Required</p>');
 
+          $('input.error').after('<p class="error-text">請輸入正確手機號碼</p>');
 
       return false;
 
-    }
 
-    else {
 
+    } else if($('input[name="q2"]:visible').val() !== undefined && !phoneno.test($('input[name="q2"]:visible').val())){
 
+		$('input[name="q2"]:visible').addClass('error');
 
+      if( !$('.error-text').length )
 
+          $('input.error').after('<p class="error-text">請輸入正確手機號碼</p>');
 
+      return false;
 
+	}else {
 
         $('input[name="q2"]:visible').removeClass('error');
 
         $('.error-text').remove();
 
         return true;
 
@@ -124,10 +135,10 @@ function validate() {
 
   }
 
 
   function q3_validate() {
 
-    if( $('input[name="q3"]:visible').val() !== undefined && $('input[name="q3"]:visible').val().length <= 0 ) {
 
+    if( $('input[name="q3"]:visible').val() !== undefined && $('input[name="q3"]:visible').val().length <= 0) {
 
       $('input[name="q3"]:visible').addClass('error');
 
       if( !$('.error-text').length )
 
-          $('input.error').after('<p class="error-text">Email Field is Required</p>');
 
+          $('input.error').after('<p class="error-text">請輸入E-mail</p>');
 
       return false;
 
     }
 
     else {
 
@@ -138,4 +149,4 @@ function validate() {
 
   }
 
 
   return q2_validate() && q3_validate()
 
-}
 
+}

+ 103 - 7
step_question/multi_steps/style.css
Bestand weergeven 

@@ -5,7 +5,8 @@
 
 * {margin: 0; padding: 0;}
 
 
 html {
 
-	height: 100%;
 
+	min-height: 100%;
 
+	height: auto;
 
 	/*Image only BG fallback*/
 
 	
 	/*background = gradient + image pattern combo*/
 
@@ -16,9 +17,42 @@ html {
 
 body {
 
 	font-family: montserrat, arial, verdana;
 
 }
 
+
 
+.ml {
 
+	margin-left: 10px;
 
+}
 
+
 
+.mr {
 
+	margin-right: 10px;
 
+}
 
+
 
+.mb {
 
+	margin-bottom: 12px;
 
+}
 
+
 
+/*form styles*/
 
+.img_logo {
 
+	display: block;
 
+	margin: 20px auto;
 
+}
 
+
 
+.notice_card {
 
+	box-sizing: border-box;
 
+	width: 80%;
 
+	margin: 0 10%;
 
+	margin-bottom: 1.5rem;
 
+	background: white;
 
+	border: 0 none;
 
+	border-radius: 3px;
 
+	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
 
+	padding: 10px 20px;
 
+	line-height: 1.5rem;
 
+}
 
+
 
 /*form styles*/
 
 #msform {
 
-	width: 400px;
 
+	min-width: 370px;
 
+	max-width: 1000px;
 
 	margin: 50px auto;
 
 	text-align: center;
 
 	position: relative;
 
@@ -41,11 +75,11 @@ body {
 
 	display: none;
 
 }
 
 /*inputs*/
 
-#msform input[type="text"], #msform textarea {
 
+#msform input[type="text"], #msform textarea, #msform input[type="email"] {
 
 	padding: 15px;
 
 	border: 1px solid #ccc;
 
 	border-radius: 3px;
 
-	margin-bottom: 10px;
 
+	margin-bottom: 16px;
 
 	width: 100%;
 
 	box-sizing: border-box;
 
 	font-family: montserrat;
 
@@ -75,11 +109,23 @@ body {
 
 	margin-bottom: 10px;
 
 }
 
 .fs-subtitle {
 
+	display: inline-block;
 
 	font-weight: normal;
 
 	font-size: 13px;
 
 	color: #666;
 
 	margin-bottom: 20px;
 
+	padding-bottom: 3px;
 
+	border-bottom: 2px solid #27AE60;
 
+}
 
+.fs-label {
 
+	display: block;
 
+	text-align: left;
 
+	margin-bottom: 8px;
 
+}
 
+.fs-label > i {
 
+	margin-right: 3px;
 
 }
 
+
 
 /*progressbar*/
 
 #progressbar {
 
 	margin-bottom: 30px;
 
@@ -186,8 +232,58 @@ select {
 
 	margin-top: 40px;
 
 }
 
 .thankyou h3 {
 
-	font-size: 3em;
 
+	font-size: 2rem;
 
 	font-weight: 700;
 
 	color: #21ba45;
 
-	line-height: 50px;
 
-}
 
+	line-height: 2.5rem;
 
+	margin-bottom: 1.5rem;
 
+}
 
+
 
+.check_button {
 
+	display: none;
 
+}
 
+
 
+.fs-label-type {
 
+	background: transparent;
 
+	padding: 5px;
 
+	border: 1px solid black;
 
+	border-radius: 5px;
 
+	display: inline-block;
 
+}
 
+
 
+.check_button:checked + .fs-label-type{
 
+	background-color: #27AE60;
 
+	color: white;
 
+	padding: 5px;
 
+	border: 1px solid #27AE60;
 
+	border-radius: 5px;
 
+}
 
+
 
+input[type="checkbox"] {
 
+	display: none;
 
+}
 
+
 
+.fs-label-info {
 
+	background: transparent;
 
+	padding: 5px;
 
+	border: 1px solid black;
 
+	border-radius: 5px;
 
+	display: inline-block;
 
+	margin-bottom: 8px;
 
+}
 
+
 
+input[type="checkbox"]:checked + .fs-label-info {
 
+	background-color: #27AE60;
 
+	color: white;
 
+	padding: 5px;
 
+	border: 1px solid #27AE60;
 
+	border-radius: 5px;
 
+}
 
+
 
+.btn-exit {
 
+	padding: .5rem .75rem;
 
+	background-color: transparent;
 
+	border: 1px solid black;
 
+	margin-top: .3rem;
 
+}
 
+