ホーム エクスプローラ ヘルプ
登録 サインイン
choozmo
/
hhh_step_question
2
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

modification v2

huaisianhuang 3 年 前
親
e0868f77c3
コミット
2b2f35f4f3
5 ファイル変更、131 行追加、23 行削除
分割表示 差分情報を表示
  1. BIN
      step_question/apis/static/images/demo.png
  2. 28 13
      step_question/apis/static/index.html
  3. 36 0
      step_question/apis/static/index_complete.html
  4. 3 3
      step_question/apis/static/script.js
  5. 64 7
      step_question/apis/static/style.css

BIN
step_question/apis/static/images/demo.png
ファイルの表示


+ 28 - 13
step_question/apis/static/index.html
ファイルの表示 

@@ -6,11 +6,26 @@
 
   <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" 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" class="img_logo">
 
+  <nav class="navbar navbar-expand-lg sticky-top">
 
+    <div class="container-fluid d-flex flex-column">
 
+    <!--<a class="navbar-brand" href="#">Navbar</a> -->
 
+      <div class="title__block">
 
+        <img src="https://hhh.com.tw/assets/images/hhh-logo2.svg" width="145" height="40" alt="hhh-logo" class="img_logo">
 
+        <span class="sub-logo mb-0">裝修市調</span>
 
+      </div>
 
+      <span class="slogan">送五萬元裝潢折抵券</span>
 
+    </div>
 
+  </nav>
 
+  <!-- <div class="top">
 
+    <img src="https://hhh.com.tw/assets/images/hhh-logo2.svg" width="145" height="40" alt="hhh-logo" class="img_logo">
 
+    <span style="text-align: center;display: block; margin-bottom: 20px;">裝修市調</span>
 
+    <span style="text-align: center;display: block; font-weight: 700;">送五萬元裝潢折抵券</span>
 
+  </div> -->
 
 <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">
 
@@ -30,9 +45,9 @@
 
       <option value="Male">男</option>
 
       <option value="Female">女</option>
 
     </select>
 
-    <input type="text" name='q2' value="" placeholder="手機號碼" /> <br/>
 
+    <input type="text" name='q2' value="0984933099" placeholder="手機號碼" /> <br/>
 
     <input type="email" name='q3' value="" placeholder="Email" />
 
-    <input type="button" name="next" class="next action-button" value="Next" />
 
+    <input type="button" name="next" class="next action-button" value="下一步" />
 
   </fieldset>
 
   <fieldset>
 
     <h2 class="fs-title">建案資料</h2>
 
@@ -47,8 +62,8 @@
 
       <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 next-2" value="Next" />
 
+    <input type="button" name="previous" class="previous action-button" value="上一步" />
 
+    <input type="button" name="next" class="next action-button next-2" value="下一步" />
 
   </fieldset>
 
   <fieldset>
 
     <h2 class="fs-title">裝修資料</h2>
 
@@ -104,17 +119,17 @@
 
       </div>
 
       <br/>
 
       <input type="button" name="previous" class="previous action-button" value="Previous" />
 
-      <input type="submit" name="submit" class="submit action-button" value="Submit" />
 
+      <input type="submit" name="submit" class="submit action-button" value="提交" />
 
   </fieldset>
 
 </form>
 
-<div id="overlay">
 
-  <div class="thankyou">
 
-    <h3>感謝您的填寫</h3>
 
-    <img src="images/checked.png" alt="">
 
-    <p>至 LINE 領取咖啡兌換券</p>
 
-    <button class="btn-exit">離開</button>
 
+<footer>
 
+  <div class="footer">
 
+    <p>咖啡限量100杯 ，送完為止</p>
 
+    <!-- <div class="img_fr">
 
+      <img src="images/demo.png" alt="">
 
+    </div> -->
 
   </div>
 
-</div>
 
+</footer>
 
 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
 
 <script src="./script.js"></script>

+ 36 - 0
step_question/apis/static/index_complete.html
ファイルの表示 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="./style.css">
 
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
+</head>
 
+<body>
 
+    <nav class="navbar navbar-expand-lg sticky-top">
 
+        <div class="container-fluid d-flex flex-column">
 
+        <!--<a class="navbar-brand" href="#">Navbar</a> -->
 
+          <div class="title__block">
 
+            <img src="https://hhh.com.tw/assets/images/hhh-logo2.svg" width="145" height="40" alt="hhh-logo" class="img_logo">
 
+            <span class="sub-logo mb-0">裝修市調</span>
 
+          </div>
 
+          <span class="slogan">送五萬元裝潢折抵券</span>
 
+        </div>
 
+      </nav>
 
+      <main>
 
+      <div class="">
 
+        <div class="thankyou">
 
+            <h3>再次感謝您的協助填寫</h3>
 
+            <img src="images/checked.png" alt="" class="mb-2">
 
+            <p>咖啡兌換卷已經寄到您的email 信箱，請至您的信箱查看。</p>
 
+            <button class="btn-exit">離開</button>
 
+        </div>
 
+        </div>
 
+    </main>
 
+</body>
 
+</html>

+ 3 - 3
step_question/apis/static/script.js
ファイルの表示 

@@ -82,7 +82,7 @@ $(".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,12 +91,12 @@ $("input[name=submit]").click(function(){
 
     success: function(data) {
 
       showThankyou();
 
       }
 
-  });
 
+  }); 
 	return false; 
 })
 
 
 function showThankyou() {
 
-  $('#overlay').show();
 
+	document.location = 'index_complete.html';
 
 }
 
 
 $('.btn-exit').click(function() {

+ 64 - 7
step_question/apis/static/style.css
ファイルの表示 

@@ -10,12 +10,13 @@ html {
 
 	/*Image only BG fallback*/
 
 	
 	/*background = gradient + image pattern combo*/
 
-	background: 
-		linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
 
+	/* background: 
+		linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */
 
 }
 
 
 body {
 
 	font-family: montserrat, arial, verdana;
 
+	background-color: white;
 
 }
 
 
 .ml {
 
@@ -30,10 +31,45 @@ body {
 
 	margin-bottom: 12px;
 
 }
 
 
+.top {
 
+	margin-top: 20px;
 
+	position: sticky;
 
+	top: 0;
 
+	left: 50%;
 
+	z-index: 20;
 
+	background-color: inherit;
 
+}
 
+
 
+.navbar {
 
+	background-color: #ee7800;
 
+}
 
+
 
 /*form styles*/
 
 .img_logo {
 
+	display: inline-block;
 
+	margin: 0 auto;
 
+	margin-bottom: 10px;
 
+}
 
+
 
+.title__block {
 
+	display: flex;
 
+	justify-content: center;
 
+	align-items: center;
 
+	margin: 0px auto;
 
+}
 
+
 
+.sub-logo {
 
+	display: inline-block;
 
+	font-weight: 700;
 
+	font-size: 1.4rem;
 
+	color: white;
 
+}
 
+
 
+.slogan {
 
 	display: block;
 
-	margin: 20px auto;
 
+	font-weight: 700;
 
+	font-size: 1.2rem;
 
+	color: white;
 
 }
 
 
 .notice_card {
 
@@ -135,7 +171,7 @@ body {
 
 }
 
 #progressbar li {
 
 	list-style-type: none;
 
-	color: white;
 
+	color: black;
 
 	text-transform: uppercase;
 
 	font-size: 9px;
 
 	width: 33.33%;
 
@@ -218,15 +254,15 @@ select {
 
 
 .thankyou {
 
 	margin: auto;
 
-	width: 260px;
 
-	height: 160px;
 
+	min-width: 350px;
 
+	height: 250px;
 
 	margin-top: 190px;
 
 	background: #fff;
 
 	padding: 15px 20px;
 
 	line-height: 25px;
 
 	border-radius: 4px;
 
 	text-align: center;
 
-	box-shadow: -1px 5px 32px 7px rgba(0, 0, 0, 0.5);
 
+	
 }
 
 .thankyou input {
 
 	margin-top: 40px;
 
@@ -287,3 +323,24 @@ input[type="checkbox"]:checked + .fs-label-info {
 
 	margin-top: .3rem;
 
 }
 
 
+footer {
 
+	padding: 2rem;
 
+	padding-top: .5rem;
 
+}
 
+
 
+.footer {
 
+	display: flex;
 
+	justify-content: center;
 
+}
 
+
 
+.img_fr {
 
+	width: 170px;
 
+	height: 200px;
 
+	object-fit: cover;
 
+}
 
+
 
+.img_fr img {
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+