gui is ready with mock ups

css/workspace.css

@@ -1,6 +1,6 @@
 <style>
 #username {
-	width:calc(100% - 130px);
+	width:100%; 
 }
 
 #step1, #step2, #step3, #changeaddr{
@@ -8,9 +8,9 @@
 	float:right;
 }
 
-#errUserName {
-	color: red;
-	
+div.error {
+	color:red
+	font-weight: bold;
 }
 
 div.verification, div.details, div.success {
@@ -19,6 +19,7 @@ div.verification, div.details, div.success {
 	margin-top:10px; 
 	margin-bottom:10px;
 	color: black;
+	//display:none;
 }
 
 input.fullwidth{
@@ -45,4 +46,59 @@ textarea.addr{
 	color: blue;
 	resize: none;
 }
+
+.twitter-typeahead {
+	width: 100%;
+}
+
+.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
+	.tt-hint {
+	width: 396px;
+	height: 30px;
+	padding: 8px 12px;
+	font-size: 24px;
+	line-height: 30px;
+	border: 2px solid #ccc;
+	border-radius: 0px;
+	outline: none;
+}
+
+.tt-query {
+	/* UPDATE: newer versions use tt-input instead of tt-query */
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+	color: #999;
+}
+
+.tt-menu {
+	/* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
+	width: 100%;
+	margin-top: 0px;
+	padding: 8px 0;
+	background-color: #fff;
+	border: 1px solid #ccc;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	border-radius: 0px 0px 8px 8px;
+	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+}
+
+.tt-suggestion {
+	padding: 3px 1px 3px 3px;
+	font-size: 16px;
+	line-height: 20px;
+	cursor: pointer;
+	text-align:left;
+}
+
+.tt-suggestion.tt-cursor, .tt-suggestion.tt-is-under-cursor {
+	/* UPDATE: newer versions use .tt-suggestion.tt-cursor */
+	color: #fff;
+	background-color: #ca974d;
+}
+
+.tt-suggestion p {
+	margin: 0;
+}
 </style>

html/workspace.html

@@ -1,6 +1,12 @@
-<input id="username" class="typeahead" type=text name="user" placeholder="input name">
-<button id="step1" class=disabled> Search </button>
-<div id="errUserName"> abcdefg </div>
+<div id="search">
+	<div>
+		<input id="username" class="typeahead" type=text name="user" placeholder="input name">
+		<div class='error' id="errUserName"> abcdefg </div>
+	</div>
+	<div>
+		<button id="step1" class=disabled> Search </button>
+	</div>
+</div>
 
 <div class= 'clear'></div>
 
@@ -12,69 +18,72 @@
 	<button id="step2"> Verify</button>
 </div>
 
-<div class="details"> 
-<table class="details">
-<tr><td colspan=2>
-	<span>Postal Address</span> <br>
-	<textarea class=addr>
-		33 Valerie Ave
-		Baulk Ham Hills,
-		NSW, Australia 2153
-	</textarea>
-	<button id=changeaddr>Change Address</button>
-</td></tr>
-
-
-<tr>
-	<td>Delivery:</td>
-	<td class="left"> 
-		<input type=radio name="delivery"> Direct Post <br>
-		<input type=radio name="delivery" checked> Pickup from <span id=collector> Patrick Sun </span> 
-	</td>
-
-</tr>
-
-<tr>
-	<td style="vertical-align:middle">
-		<input id="medal" type=checkbox checked><br>
-		<label for="medal"> uncheck = 放弃</label>
-	</td>
-	<td >
-		<img src="https://via.placeholder.com/150" >
-	</td>
-</tr>
-
-<tr>
-	<td style="vertical-align:middle">
-	<button id=cardbtn> Apply </button>
-	<img id=cardloading> 
-	<input id="card" type=checkbox checked>
-	</td>
-	<td>
-		<img src="https://via.placeholder.com/150" >
-	</td>
-</tr>
-
-<tr>
-	<td style="vertical-align:middle">
-	<button id=btn90> Apply </button>
-	<img id=loading90 >
-	<input id="medal90" type=checkbox checked>
-	</td>
-	<td>
-		<img src="https://via.placeholder.com/150" >
-	</td>
-</tr>
+<div class= 'clear'></div>
 
-</table> 
+<div id="details" class="details"> 
+	<table class="details">
+	<tr><td colspan=2>
+		<span>Postal Address</span> <br>
+		<textarea class=addr>
+			33 Valerie Ave
+			Baulk Ham Hills,
+			NSW, Australia 2153
+		</textarea>
+		<button id=changeaddr>Change Address</button>
+	</td></tr>
+	
+	
+	<tr>
+		<td>Delivery:</td>
+		<td class="left"> 
+			<input type=radio name="delivery"> Direct Post <br>
+			<input type=radio name="delivery" checked> Pickup from <span id=collector> Patrick Sun </span> 
+		</td>
+	
+	</tr>
+	
+	<tr>
+		<td style="vertical-align:middle">
+			<input id="medal" type=checkbox checked><br>
+			<label for="medal"> uncheck = 放弃</label>
+		</td>
+		<td >
+			<img src="https://via.placeholder.com/150" >
+		</td>
+	</tr>
+	
+	<tr>
+		<td style="vertical-align:middle">
+		<button id=cardbtn> Apply </button>
+		<img id=cardloading style="display:none;"> 
+		<input id="card" type=checkbox checked style="display:none;"">
+		<div class='error' id=errCard></div>
+		</td>
+		<td>
+			<img src="https://via.placeholder.com/150" >
+		</td>
+	</tr>
+	
+	<tr>
+		<td style="vertical-align:middle">
+		<button id=btn90> Apply </button>
+		<img id=loading90 style="display:none;">
+		<input id="medal90" type=checkbox checked style="display:none;">
+		<div class='error' id=errCard></div>
+		</td>
+		<td>
+			<img src="https://via.placeholder.com/150" >
+		</td>
+	</tr>
+	
+	</table> 
 </div>
 
 <div class="success"> 
-<table style="min-height:150px;">
-<tr><td style="text-align:center; vertical-align:middle;">
-<button> Confirm Everything </button> 
-<img id=done>
-</td></tr>
-</table>
-
+	<table style="min-height:150px;">
+		<tr><td style="text-align:center; vertical-align:middle;">
+		<button id='confirm' > Confirm Everything </button> 
+		<img id=done style="display:none;" >
+		</td></tr>
+	</table>
 </div>

js/workspace.js

@@ -73,7 +73,7 @@
                     return '<div><i class="fusion-li-icon fa-user fas"></i> '+ item.username +'-'+ item.userid +'</div>';
                   },
               	pending: function (query) {
-              		return '<img src=' + mm.loading + '>';
+              		return '<img src=' + mm.search_user + '>';
               	},
               },
               'updater' : function(item) {
@@ -109,7 +109,7 @@
         }, function(response,  status, xhr){
         	step2_verify_user(response);	
         }).fail(function(){
-        	errUserName("网络错误，请稍后尝试");
+        	errUserName("Network Error, Please try again later");
         });
 
     });
@@ -122,5 +122,55 @@
     	el.slideToggle();
     }
     
+    //verify  
+    $(document).on("click", "#step2", function(){
+    	var el = $('#details');
+    	el.slideDown();
+    });    
     
+    //apply card  
+    $(document).on("click", "#cardbtn", function(){
+    	var loading = $('#cardloading');
+    	var check = $('#card');
+    	$(this).hide();
+    	loading.show();
+    	setTimeout(function(){
+    		loading.hide();
+    		check.show();
+    	}, 2000);
+    	
+    });    
+
+    //apply 90 meda;
+    $(document).on("click", "#btn90", function(){
+    	var loading = $('#loading90');
+    	var check = $('#medal90');
+    	$(this).hide();
+    	loading.show();
+    	
+    	setTimeout(function(){
+    		loading.hide();
+    		check.show();
+    	}, 2000);
+    });    
+    
+    //confirm;
+    $(document).on("click", "#confirm", function(){
+    	var search = $("#search");
+    	var verify = $("#userpass");
+    	var details = $("#details");
+    	var btn = $('#confirm');
+    	var img = $('#done');
+    	$(this).hide();
+    	verify.hide();
+    	details.hide();
+    	search.hide();
+    	img.show();
+    	
+    	setTimeout(function(){
+    		btn.show();
+    		img.hide();
+    	}, 4000);
+    });     
+
 })(jQuery);

member.php

@@ -93,6 +93,7 @@ class Member{
             'display_name' => wp_get_current_user()->display_name,
             'loading' => plugins_url('img/loading.gif', __FILE__),
             'done' => plugins_url('img/done.gif', __FILE__),
+            'search_user' => plugins_url('img/loading_user.gif', __FILE__),
             'anonymous' => !is_user_logged_in(),
         ) );
     }