From 5064c274448b92d08e378bd96c1dd10e2dabf8a0 Mon Sep 17 00:00:00 2001
From: MaxKey <shimingxy@163.com>
Date: Sun, 26 Jul 2020 21:21:05 +0800
Subject: [PATCH] mobile support

---
 .../src/main/resources/static/css/base.css    |   4 +-
 .../src/main/resources/static/css/base2.css   | 492 ------------------
 .../src/main/resources/static/css/menu.css    |   3 -
 .../resources/static/css/menu_default.css     |   3 -
 .../main/resources/static/css/menu_minty.css  |   3 -
 .../main/resources/static/css/menu_pulse.css  |   3 -
 .../templates/views/layout/footer.ftl         |  26 +-
 .../templates/views/layout/header.ftl         |   1 +
 .../templates/views/layout/nav_primary.ftl    | 150 +++---
 .../templates/views/layout/nologintop.ftl     |   2 +-
 .../resources/templates/views/layout/top.ftl  | 100 ++--
 .../main/resources/templates/views/login.ftl  | 372 ++++++-------
 .../templates/views/main/appList.ftl          |  23 +-
 .../templates/views/profile/myProfile.ftl     | 193 ++++---
 .../templates/views/safe/changePassword.ftl   |  13 +-
 .../templates/views/safe/setting.ftl          |  18 +-
 .../templates/views/safe/timeBased.ftl        | 133 ++---
 .../views/social/socialSignOnProvider.ftl     |  13 +-
 18 files changed, 561 insertions(+), 991 deletions(-)
 delete mode 100644 maxkey-web-maxkey/src/main/resources/static/css/base2.css

diff --git a/maxkey-web-maxkey/src/main/resources/static/css/base.css b/maxkey-web-maxkey/src/main/resources/static/css/base.css
index fcf709c6..e7e12722 100644
--- a/maxkey-web-maxkey/src/main/resources/static/css/base.css
+++ b/maxkey-web-maxkey/src/main/resources/static/css/base.css
@@ -35,7 +35,7 @@ body{
 	border-bottom: 1px solid #e5e5e5;
 	min-width: 100%;
 	align:left;
-	height:60px;
+	min-height: 60px;
 	margin-bottom: 1px;
 }
 #topNav{
@@ -63,7 +63,6 @@ body{
 }
 
 .container {
-	width: 990px;
 	margin-left: auto;
 	margin-right: auto;
 	padding: 0 10px
@@ -74,7 +73,6 @@ body{
 	margin-left: auto;
 	margin-right: auto;
 	display: block;
-	width:990px;
 	align:center;
 }
 
diff --git a/maxkey-web-maxkey/src/main/resources/static/css/base2.css b/maxkey-web-maxkey/src/main/resources/static/css/base2.css
deleted file mode 100644
index 5d2f8f5b..00000000
--- a/maxkey-web-maxkey/src/main/resources/static/css/base2.css
+++ /dev/null
@@ -1,492 +0,0 @@
-* { padding:0; margin:0; outline:0; }
-body{
-	margin: 0;
-	margin-top: 0px;
-	margin-left: auto;
-	margin-right: auto;
-	padding: 0 0 0 0px;
-	font-size: 12px;
-	text-align:center;
-	float:center;
-	font-family: "Arial", "Helvetica", "Verdana", "sans-serif";
-}
-/*table td,select,button,input{
-	font-size: 12px;
-}
-
-table.datatable {
-	border: 1px solid #d8dcdf;
-	border-collapse:collapse;
-	border-spacing:0;
-	width: 100%;
-}
-
-table.datatable th{
-	border: 1px solid #d8dcdf;
-	border-collapse:collapse;
-	border-spacing:0;
-	height: 40px;
-}
-
-table.datatable td{
-	border: 1px solid #d8dcdf;
-	border-collapse:collapse;
-	border-spacing:0;
-	height: 40px;
-	text-align: left;
-  	text-indent: 5px;
-}
-
-table.datatable td.center{
-	border: 1px solid #d8dcdf;
-	border-collapse:collapse;
-	border-spacing:0;
-	height: 40px;
-	text-align: center;
-  	text-indent: 0px;
-}
-
-table.hidetable {
-	border-collapse:collapse;
-	width: 100%;
-	border: 0px;
-}
-
-table.hidetable th{
-	border: 0px;
-	border-collapse:collapse;
-	border-spacing:0;
-}
-
-table.hidetable td{
-	border-collapse:collapse;
-	border-spacing:0;
-	border: 0px;
-}
-*/
-.form_title_bar{
-	width: 100%;
-	height: 36px;
-  	text-align: left;
-  	text-indent: 30px;
-  	background-color: #f8f8f8;
-}
-
-.form_title_bar a {
-  text-decoration: none;
-  display: inline-block;
-  height: 14px;
-  color: #333;
-  font-size: 14px;
-  font-weight: bold;
-  padding: 8px 0;
-  vertical-align: central;
-}
-
-
-button,input{
-	color: #393939;
-}
-
-#topBar{
-	text-shadow: 0 1px 0 #fff;
-	border-bottom: 1px solid #e5e5e5;
-	min-width: 100%;
-	align:left;
-	height:60px;
-	margin-bottom: 1px;
-}
-#topNav{
-	border-bottom: 1px solid #e5e5e5;
-}
-
-#navs{
-	border-bottom: 1px solid #e5e5e5;
-}
-
-#nav_primary{
-	background: #414141;
-}
-
-#nav_second{
-	height:31px;
-}
-#nav_third{
-	/*border-top: 1px solid #e5e5e5;*/
-}
-
-.container {
-	width: 990px;
-	margin-left: auto;
-	margin-right: auto;
-	padding: 0 10px
-}
-
-#mainFrame{
-	margin-top: 0px;
-	margin-left: auto;
-	margin-right: auto;
-	display: block;
-	width:990px;
-	align:center;
-}
-
-#footer{
-	text-shadow: 0 1px 0 #fff;
-	border-top: 1px solid #e5e5e5;
-	min-width: 100%;
-	height:80px;
-	
-}
-
-#content{
-	margin-top: 10px;
-	min-height:480px;
-	*height:480px;
-	margin-bottom: 10px;
-}
-
-#tool_box {
-	margin-bottom: 10px;
-	border: 1px solid #e5e5e5;
-}
-
-#tool_box_left {
-	padding-left: 10px;
-	float: left;
-	height:30px;
-	width:50%;
-	text-align: left;
-	border-right: 1px solid #e5e5e5;
-}
-
-#tool_box_right {
-	height:32px;
-	text-align: right;
-	padding-right: 10px;
-	width:484px;
-}
-
-#advanced_search {
-	margin-top: 10px;
-	min-height:30px;
-	*height:40px;
-	border: 1px solid #e5e5e5;
-	margin-bottom: 10px;
-	display: none;
-}
-
-#logout{
-	width: 40px;
-  	background: #c00 ;
-  	color: #fff;
-  	font-weight: bold;	
-}
-
-#manage{
-	width: 40px;
-	background-color: #2AA9A9;
-	font-weight: bold;	
-}
-
-#changepassword{
-	width: 65px;
-	background-color: #f28018;
-	font-weight: bold;	
-}
-
-#manage a,#logout a,#changepassword a{
-	  color: #fff;
-}
-
-a {
-	color: #4183c4;
-	text-decoration: none;
-}
-
-
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="number"],
-input[type="tel"],
-input[type="url"] {
-	min-height: 27px;
-	height: 27px;
-	padding: 4px 8px;
-	outline: none;
-	color: #333;
-	background-color: #fff;
-	background-repeat: no-repeat;
-	background-position: right center;
-	border: 1px solid #ccc;
-	border-radius: 3px;
-	box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
-	transition: all 0.15s ease-in;
-	-webkit-transition: all 0.15s ease-in 0;
-	vertical-align: middle;
-	width:90%;
-}
-
-textarea {
-	min-height: 27px;
-	padding: 4px 8px;
-	outline: none;
-	color: #333;
-	background-color: #fff;
-	background-repeat: no-repeat;
-	background-position: right center;
-	border: 1px solid #ccc;
-	border-radius: 3px;
-	box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
-	transition: all 0.15s ease-in;
-	-webkit-transition: all 0.15s ease-in 0;
-	vertical-align: middle;
-	width:90%;
-}
-input[type="text"]:focus,
-input[type="text"].focus,
-input[type="password"].focus,
-input[type="password"]:focus,
-input[type="email"].focus,
-input[type="email"]:focus,
-input[type="number"].focus,
-input[type="number"]:focus,
-input[type="tel"].focus,
-input[type="tel"]:focus,
-input[type="url"].focus,
-input[type="url"]:focus,
-textarea.focus,
-textarea:focus {
-	border-color: #51a7e8;
-	box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5)
-}
-
-.button,.minibutton {
-	position: relative;
-	display: inline-block;
-	padding: 7px 15px;
-	font-size: 13px;
-	font-weight: bold;
-	color: #333;
-	text-shadow: 0 1px 0 rgba(255,255,255,0.9);
-	white-space: nowrap;
-	background-color: #eaeaea;
-	background-image: -moz-linear-gradient(#eaeaea, #eaeaea);
-	background-image: -webkit-linear-gradient(#eaeaea, #eaeaea);
-	background-image: linear-gradient(#eaeaea, #eaeaea);
-	background-repeat: repeat-x;
-	border-radius: 3px;
-	border: 1px solid #ddd;
-	border-bottom-color: #c5c5c5;
-	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-	vertical-align: middle;
-	cursor: pointer;
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	-webkit-appearance: none
-}
-
-.button:hover,.button:active,.button.zeroclipboard-is-hover,.button.zeroclipboard-is-active,.minibutton:hover,.minibutton:active,.minibutton.zeroclipboard-is-hover,.minibutton.zeroclipboard-is-active {
-	text-decoration: none;
-	background-color: #dadada;
-	background-image: -moz-linear-gradient(#dadada, #dadada);
-	background-image: -webkit-linear-gradient(#dadada, #dadada);
-	background-image: linear-gradient(#dadada, #dadada);
-	background-repeat: repeat-x;
-	border-color: #ccc #ccc #b5b5b5
-}
-
-.button:active,.button.selected,.button.zeroclipboard-is-active,.minibutton:active,.minibutton.selected,.context-menu-container.active .minibutton.switcher,.context-menu-container.active .context-button,.minibutton.zeroclipboard-is-active {
-	background-color: #dadada;
-	background-image: none;
-	border-color: #b5b5b5;
-	box-shadow: inset 0 3px 5px rgba(0,0,0,0.15)
-}
-
-.button:disabled,.button:disabled:hover,.button.disabled,.button.disabled:hover,.minibutton:disabled,.minibutton:disabled:hover,.minibutton.disabled,.minibutton.disabled:hover {
-	opacity: .5;
-	color: #666;
-	text-shadow: 0 1px 0 rgba(255,255,255,0.9);
-	background-image: none;
-	background-color: #e5e5e5;
-	border-color: #c5c5c5;
-	cursor: default;
-	box-shadow: none
-}
-
-.button.primary,.minibutton.primary {
-	color: #fff;
-	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
-	background-color: #44b549;
-	background-image: -moz-linear-gradient(#44b549, #44b549);
-	background-image: -webkit-linear-gradient(#44b549, #44b549);
-	background-image: linear-gradient(#44b549, #44b549);
-	background-repeat: repeat-x;
-	border-color: #44b549
-}
-
-.button.primary:hover,.minibutton.primary:hover {
-	color: #fff;
-	background-color: #4aaf33;
-	background-image: -moz-linear-gradient(#4aaf33, #4aaf33);
-	background-image: -webkit-linear-gradient(#4aaf33, #4aaf33);
-	background-image: linear-gradient(#4aaf33, #4aaf33);
-	background-repeat: repeat-x;
-	border-color: #4aaf33
-}
-
-.button.primary:active,.button.primary.selected,.minibutton.primary:active,.minibutton.primary.selected,.context-menu-container.active .primary.minibutton.switcher,.context-menu-container.active .primary.context-button {
-	background-color: #569e3d;
-	background-image: none;
-	border-color: #418737
-}
-
-.button.primary:disabled,.button.primary:disabled:hover,.button.primary.disabled,.button.primary.disabled:hover,.minibutton.primary:disabled,.minibutton.primary:disabled:hover,.minibutton.primary.disabled,.minibutton.primary.disabled:hover {
-	color: #fff;
-	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
-	background-color: #60b044;
-	background-image: -moz-linear-gradient(#8add6d, #60b044);
-	background-image: -webkit-linear-gradient(#8add6d, #60b044);
-	background-image: linear-gradient(#8add6d, #60b044);
-	background-repeat: repeat-x;
-	border-color: #74bb5a #74bb5a #509338
-}
-
-.button,.minibutton {
-	outline: none
-}
-
-.button:focus,.minibutton:focus {
-	text-decoration: none;
-	border-color: #51a7e8;
-	box-shadow: 0 0 5px rgba(81,167,232,0.5)
-}
-
-.button img {
-	position: relative;
-	top: -1px;
-	margin-right: 3px;
-	vertical-align: middle
-}
-
-.button>.octicon {
-	vertical-align: middle;
-	margin-top: -1px
-}
-
-.minibutton {
-	padding: 0 10px;
-	line-height: 32px;
-	box-shadow: none
-}
-
-.minibutton:hover .octicon-device-desktop:before {
-	background-position: -18px 0
-}
-
-.minibutton i {
-	font-weight: 500;
-	font-style: normal;
-	opacity: .6
-}
-
-.form_radio_label, .form_checkbox_label{
-  display: inline-block;
-  text-align: left;
-  cursor: pointer;
-  margin-right: 1em;
-}
-
-.icon_checkbox {
-  background: url("../images/checkbox.png") 0 -83px no-repeat;
-  width: 16px;
-  height: 16px;
-  vertical-align: middle;
-  display: inline-block;
-  margin-top: -0.2em;
-}
-
-.icon_checkbox_selected{
-  background: url("../images/checkbox.png") 0 -109px no-repeat;
-  width: 16px;
-  height: 16px;
-  vertical-align: middle;
-  display: inline-block;
-  margin-top: -0.2em;
-}
-
-.icon_radiobox {
-  background: url("../images/checkbox.png") 0 -5px no-repeat;
-  width: 16px;
-  height: 16px;
-  vertical-align: middle;
-  display: inline-block;
-  margin-top: -0.2em;
-}
-
-.icon_radiobox_selected{
-  background: url("../images/checkbox.png") 0 -31px no-repeat;
-  width: 16px;
-  height: 16px;
-  vertical-align: middle;
-  display: inline-block;
-  margin-top: -0.2em;
-}
-
-.select-menu-modal{
-	position: absolute;
-	display: none;
-	z-index: 1989;
-	width: 300px;
-	margin-top: 4px;
-	margin-bottom: 20px;
-	overflow: hidden;
-	font-size: 12px;
-	color: #666;
-	background-color: #fff;
-	background-clip: padding-box;
-	border: 1px solid #ccc;
-	border: 1px solid rgba(0,0,0,0.15);
-	border-radius: 5px;
-	box-shadow: 0 3px 12px rgba(0,0,0,0.25);
-}
-
-.select-menu-item{
-	cursor: pointer;
-	line-height: 33px;
-	border-bottom: 1px solid #eee;
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-	overflow: hidden;
-	color: inherit;
-	text-align: left;
-}
-.select-menu-item a{
-	text-decoration : none;
-}
-
-
-.select-menu-item a div{
-	width: 140px;
-	line-height: 33px;
-}
-
-
-
-
-.select-menu-item-selected{
-	background-color: #4183c4;
-	color: #fff;
-}
-
-.select-menu-item-selected a{
-	color: #fff;
-}
-
-
diff --git a/maxkey-web-maxkey/src/main/resources/static/css/menu.css b/maxkey-web-maxkey/src/main/resources/static/css/menu.css
index dea110da..dbe277fb 100644
--- a/maxkey-web-maxkey/src/main/resources/static/css/menu.css
+++ b/maxkey-web-maxkey/src/main/resources/static/css/menu.css
@@ -3,14 +3,12 @@
 }
 .menuprimary {
 	font: bold 12px Verdana;
-	width: 990px;
 	margin: auto;
 	height: 41px;
 }
 
 .menucontainer {
 	float: left;
-	width: 990px;
 	margin-top: -2px;
 }
 
@@ -151,7 +149,6 @@
 .menusecond {
 	font: bold 12px Verdana;
 	background: white; /*background of menu bar (default state)*/
-	width: 990px;
 	margin: auto;
 }
 
diff --git a/maxkey-web-maxkey/src/main/resources/static/css/menu_default.css b/maxkey-web-maxkey/src/main/resources/static/css/menu_default.css
index dea110da..dbe277fb 100644
--- a/maxkey-web-maxkey/src/main/resources/static/css/menu_default.css
+++ b/maxkey-web-maxkey/src/main/resources/static/css/menu_default.css
@@ -3,14 +3,12 @@
 }
 .menuprimary {
 	font: bold 12px Verdana;
-	width: 990px;
 	margin: auto;
 	height: 41px;
 }
 
 .menucontainer {
 	float: left;
-	width: 990px;
 	margin-top: -2px;
 }
 
@@ -151,7 +149,6 @@
 .menusecond {
 	font: bold 12px Verdana;
 	background: white; /*background of menu bar (default state)*/
-	width: 990px;
 	margin: auto;
 }
 
diff --git a/maxkey-web-maxkey/src/main/resources/static/css/menu_minty.css b/maxkey-web-maxkey/src/main/resources/static/css/menu_minty.css
index 272035f2..f7e16070 100644
--- a/maxkey-web-maxkey/src/main/resources/static/css/menu_minty.css
+++ b/maxkey-web-maxkey/src/main/resources/static/css/menu_minty.css
@@ -3,14 +3,12 @@
 }
 .menuprimary {
 	font: bold 12px Verdana;
-	width: 990px;
 	margin: auto;
 	height: 41px;
 }
 
 .menucontainer {
 	float: left;
-	width: 990px;
 	margin-top: -2px;
 }
 
@@ -151,7 +149,6 @@
 .menusecond {
 	font: bold 12px Verdana;
 	background: white; /*background of menu bar (default state)*/
-	width: 990px;
 	margin: auto;
 }
 
diff --git a/maxkey-web-maxkey/src/main/resources/static/css/menu_pulse.css b/maxkey-web-maxkey/src/main/resources/static/css/menu_pulse.css
index 20b0c304..a0929fb7 100644
--- a/maxkey-web-maxkey/src/main/resources/static/css/menu_pulse.css
+++ b/maxkey-web-maxkey/src/main/resources/static/css/menu_pulse.css
@@ -4,14 +4,12 @@
 
 .menuprimary {
 	font: bold 12px Verdana;
-	width: 990px;
 	margin: auto;
 	height: 41px;
 }
 
 .menucontainer {
 	float: left;
-	width: 990px;
 	margin-top: -2px;
 }
 
@@ -152,7 +150,6 @@
 .menusecond {
 	font: bold 12px Verdana;
 	background: white; /*background of menu bar (default state)*/
-	width: 990px;
 	margin: auto;
 }
 
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/layout/footer.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/layout/footer.ftl
index 866d1b26..679608c7 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/layout/footer.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/layout/footer.ftl
@@ -1,15 +1,19 @@
      <#-- footer -->
  	<div class="footer" >
-	    <div class="container">
-		    <table cellpadding="2" cellspacing="0" style="margin-top: 30px;width:100%;height:100%; border:0;">
-		        <TR>
-		          <TD align="center" valign="middle" class="footer  ">
-		          	MaxKey&nbsp;&nbsp;<@locale code="global.application.version"/><br>
-		          	&copy; <@locale code="global.text.copyright.content"/>&nbsp;&nbsp; <a href="https://www.maxkey.top/" target="_blank">https://www.maxkey.top/</a>
-		          	<br>
-		          	<@locale code="global.text.copyright.license"/><br>
-		          </TD>
-		        </TR>
-		    </table> 
+	    <div class="container row">
+	    	<div class="col-sm-4"></div>
+	    	<div class="col-sm-4">
+			    <table cellpadding="2" cellspacing="0" style="margin-top: 30px;width:100%;height:100%; border:0;">
+			        <TR>
+			          <TD align="center" valign="middle" class="footer  ">
+			          	MaxKey&nbsp;&nbsp;<@locale code="global.application.version"/><br>
+			          	&copy; <@locale code="global.text.copyright.content"/>&nbsp;&nbsp; <a href="https://www.maxkey.top/" target="_blank">https://www.maxkey.top/</a>
+			          	<br>
+			          	<@locale code="global.text.copyright.license"/><br>
+			          </TD>
+			        </TR>
+			    </table> 
+		    </div>
+		    <div class="col-sm-4"></div>
 	    </div>
 	 </div>
\ No newline at end of file
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/layout/header.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/layout/header.ftl
index 51a926de..1d39b507 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/layout/header.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/layout/header.ftl
@@ -1,5 +1,6 @@
     <title><@locale code="global.application"/></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<meta http-equiv="pragma" content="no-cache">
 	<meta http-equiv="cache-control" content="no-cache">
 	<meta http-equiv="expires" content="0">    
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/layout/nav_primary.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/layout/nav_primary.ftl
index b2cad19c..2f964dab 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/layout/nav_primary.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/layout/nav_primary.ftl
@@ -1,78 +1,84 @@
 <div id="nav_primary" >
-<div id="nav_primary"  class="menuprimary">
-	<ul >
-		<li  id="nav_primay_11"  class="nav_primay_level primaryleft"  xpath="">
-			<!--我的应用-->
-			<a   href="<@base/>/appList"><@locale code="navs.mypps"/></a>
-		</li>
-		<li  id="nav_primay_13"  class="nav_primay_level primaryleft"  xpath="">
-			<!--安全设置-->
-			<a   href="<@base/>/safe/forward/setting"><@locale code="navs.setting"/></a>
-			<div id="nav_child_1301"  class="nav_second_child">
-				<ul>
-					<!--安全设置-->
-					<li id="nav_second_1301" class="nav_second_level">
-						<a   href="<@base/>/safe/forward/setting"><@locale code="navs.setting.security"/></a>
-					</li>
-				</ul>
-				<ul>
-					<!--认证关联-->
-					<li id="nav_second_1301" class="nav_second_level">
-						<a   href="<@base/>/socialsignon/list"><@locale code="navs.setting.sociallink"/></a>
-					</li>
-				</ul>
-				<ul>
-					<!--密码修改-->
-					<li id="nav_second_1302" class="nav_second_level">
-						<a   href="<@base/>/safe/forward/changePasswod"><@locale code="navs.setting.changepassword"/></a>
-					</li>
-				</ul>
-				<ul>
-					<!--应用配置-->
-					<li id="nav_second_1304" class="nav_second_level">
-						<a   href="<@base/>/appConfigList"><@locale code="navs.setting.appaccount"/></a>
-					</li>
-				</ul>
-				<ul>
-					<!--时间令牌-->
-					<li id="nav_second_1305" class="nav_second_level">
-						<a   href="<@base/>/safe/otp/timebased"><@locale code="navs.setting.timetoken"/></a>
-					</li>
-				</ul>
-			</div>
-		</li>
-		<!--我的资料-->
-		<li  id="nav_primay_14"  class="nav_primay_level primaryleft"  xpath="">
-			<a  href="<@base/>/profile/myProfile"><@locale code="navs.myprofile"/></a>
-		</li>
-		<!--日志审计-->
-		<li  id="nav_primay_15"  class="nav_primay_level primaryleft"  xpath="">
-			<a   href="<@base/>/historys/login"><@locale code="navs.audit"/></a>
-			<div id="nav_child_1501"  class="nav_second_child">
-				<ul>
-					<!--登录日志-->
-					<li id="nav_second_1501" class="nav_second_level">
-						<a   href="<@base/>/historys/login"><@locale code="navs.audit.login"/></a>
-					</li>
-				</ul>
-				<ul>
-					<!--访问日志-->
-					<li id="nav_second_1502" class="nav_second_level">
-						<a   href="<@base/>/historys/loginApps"><@locale code="navs.audit.signon"/></a>
-					</li>
-				</ul>
-				<ul>
-					<!--操作日志-->
-					<li id="nav_second_1503" class="nav_second_level">
-						<a   href="<@base/>/historys/logs"><@locale code="navs.audit.operation"/></a>
-					</li>
-				</ul>
-			</div>
-		</li>
-	</ul>
+<div  class="container row">
+	<div class="col-sm-8">
+	<div id="nav_primary"  class="menuprimary">
+		<ul >
+			<li  id="nav_primay_11"  class="nav_primay_level primaryleft"  xpath="">
+				<!--我的应用-->
+				<a   href="<@base/>/appList"><@locale code="navs.mypps"/></a>
+			</li>
+			<li  id="nav_primay_13"  class="nav_primay_level primaryleft"  xpath="">
+				<!--安全设置-->
+				<a   href="<@base/>/safe/forward/setting"><@locale code="navs.setting"/></a>
+				<div id="nav_child_1301"  class="nav_second_child">
+					<ul>
+						<!--安全设置-->
+						<li id="nav_second_1301" class="nav_second_level">
+							<a   href="<@base/>/safe/forward/setting"><@locale code="navs.setting.security"/></a>
+						</li>
+					</ul>
+					<ul>
+						<!--认证关联-->
+						<li id="nav_second_1301" class="nav_second_level">
+							<a   href="<@base/>/socialsignon/list"><@locale code="navs.setting.sociallink"/></a>
+						</li>
+					</ul>
+					<ul>
+						<!--密码修改-->
+						<li id="nav_second_1302" class="nav_second_level">
+							<a   href="<@base/>/safe/forward/changePasswod"><@locale code="navs.setting.changepassword"/></a>
+						</li>
+					</ul>
+					<ul>
+						<!--应用配置-->
+						<li id="nav_second_1304" class="nav_second_level">
+							<a   href="<@base/>/appConfigList"><@locale code="navs.setting.appaccount"/></a>
+						</li>
+					</ul>
+					<ul>
+						<!--时间令牌-->
+						<li id="nav_second_1305" class="nav_second_level">
+							<a   href="<@base/>/safe/otp/timebased"><@locale code="navs.setting.timetoken"/></a>
+						</li>
+					</ul>
+				</div>
+			</li>
+			<!--我的资料-->
+			<li  id="nav_primay_14"  class="nav_primay_level primaryleft"  xpath="">
+				<a  href="<@base/>/profile/myProfile"><@locale code="navs.myprofile"/></a>
+			</li>
+			<!--日志审计-->
+			<li  id="nav_primay_15"  class="nav_primay_level primaryleft"  xpath="">
+				<a   href="<@base/>/historys/login"><@locale code="navs.audit"/></a>
+				<div id="nav_child_1501"  class="nav_second_child">
+					<ul>
+						<!--登录日志-->
+						<li id="nav_second_1501" class="nav_second_level">
+							<a   href="<@base/>/historys/login"><@locale code="navs.audit.login"/></a>
+						</li>
+					</ul>
+					<ul>
+						<!--访问日志-->
+						<li id="nav_second_1502" class="nav_second_level">
+							<a   href="<@base/>/historys/loginApps"><@locale code="navs.audit.signon"/></a>
+						</li>
+					</ul>
+					<ul>
+						<!--操作日志-->
+						<li id="nav_second_1503" class="nav_second_level">
+							<a   href="<@base/>/historys/logs"><@locale code="navs.audit.operation"/></a>
+						</li>
+					</ul>
+				</div>
+			</li>
+		</ul>
+	</div>
+	</div>
+	</div>
 </div>
+<div class="container row">
+<div id="nav_second"  class ="col-sm-8" style="clear: left"><div class='menusecond '></div><br style='clear: left' /></div>
 </div>
-<div id="nav_second"  style="clear: left"><div class='menusecond'></div><br style='clear: left' /></div>
 <script>
 	$(function(){
 		function displaySecondNavs(menuId){
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/layout/nologintop.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/layout/nologintop.ftl
index 96bfea46..764976dd 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/layout/nologintop.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/layout/nologintop.ftl
@@ -2,7 +2,7 @@
 	<div class="container">
 		<div style="float:left;margin-left:20px;margin-top: 5px;"><IMG SRC="<@base/>/static/images/logo.jpg" style="width:55px;heigth:55px"></div>
 		<div style="margin-top:15px;margin-left:10px;float:left">
-			<div style="letter-spacing:2px;font-size:28px;font-weight:bolder;"><@locale code="global.application"/></div>
+			<div style="letter-spacing:2px;font-size:24px;font-weight:bolder;"><@locale code="global.application"/></div>
 		</div>
 		<div style="margin-top:30px;margin-right:10px;float:right;">
 
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/layout/top.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/layout/top.ftl
index 75070076..94588f11 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/layout/top.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/layout/top.ftl
@@ -1,47 +1,59 @@
 <div id="topBar"  > 
-	<div class="container">
-		<div style="float:left;margin-left:20px;margin-top: 5px;"><IMG SRC="<@base/>/static/images/logo.jpg" style="width:55px;heigth:55px"></div>
-		<div style="margin-top:20px;margin-left:10px;float:left">
-			<div style="letter-spacing:2px;font-size:20px;font-weight:bolder;"><@locale code="global.application"/></div>
-			
+		<div class="container row">
+			<div class="col-sm-5">
+				<div>
+				<div style="float:left;margin-top: 5px;"><IMG SRC="<@base/>/static/images/logo.jpg" style="width:55px;heigth:55px"></div>
+				<div style="letter-spacing:2px;font-size:24px;font-weight:bolder;margin-top: 16px;float:left;"><@locale code="global.application"/></div>
+				</div>
+			</div>
+			<div class="col-sm-3">
+				<div  style="margin-top:25px;margin-right:10px;float:right;">
+					<table  style="height: 31px;">
+						<tr>
+							<td>
+								<@locale code="global.text.welcome"/>：
+								<#if  Session["current_user"]?exists>
+									${Session["current_user"].displayName}  ${Session["current_user"].username} 
+								</#if>
+								&nbsp;&nbsp;
+							</td>
+							
+						</tr>
+					</table>
+				</div >
+			</div>
+			<div class="col-sm-4">
+				<div  style="margin-top:25px;margin-right:10px;float:right;">
+					<table  style="height: 31px;">
+						<tr>
+							<#if  Session["current_user"].gridList==0 >
+							<td>
+								<a href="<@base/>/appList?mnid=110101020000&gridList=1"><img class="grid_list_sel" src='<@base/>/static/images/list_sel.png' ></a>
+							</td>
+							<#else>
+							<td>
+								<a href="<@base/>/appList?mnid=110101020000&gridList=0" ><img class="grid_list_sel"  src='<@base/>/static/images/grid_sel.png'></a>
+							</td>
+							</#if>
+							<td id="changepassword" nowrap>
+								<a  href="<@base/>/safe/forward/changePasswod">
+									<div  style="float:right;" >&nbsp;&nbsp;<@locale code="login.password.changepassword"/>&nbsp;&nbsp;</div>
+								</a>
+							</td>
+							<td id="manage" nowrap>
+								<a target="_blank"  href="<@base/>/authz/maxkey_mgt">
+									<div  style="float:right;" >&nbsp;&nbsp;<@locale code="global.text.manage"/>&nbsp;&nbsp;</div>
+								</a>
+							</td>
+				
+							<td id="logout" class="ui-widget-header" >
+								<a  href="<@base/>/logout?reLoginUrl=login">
+									<div  style="float:right;" >&nbsp;&nbsp;<@locale code="global.text.logout"/>&nbsp;&nbsp;</div>
+								</a>
+							</td>
+						</tr>
+					</table>
+				</div >
+			</div>
 		</div>
-		<div style="margin-top:25px;margin-right:10px;float:right;">
-			<table  style="height: 31px;">
-				<tr>
-					<td>
-						<@locale code="global.text.welcome"/>：
-						<#if  Session["current_user"]?exists>
-							${Session["current_user"].displayName}  ${Session["current_user"].username} 
-						</#if>
-						&nbsp;&nbsp;
-					</td>
-					<#if  Session["current_user"].gridList==0 >
-					<td>
-						<a href="<@base/>/appList?mnid=110101020000&gridList=1"><img class="grid_list_sel" src='<@base/>/static/images/list_sel.png' ></a>
-					</td>
-					<#else>
-					<td>
-						<a href="<@base/>/appList?mnid=110101020000&gridList=0" ><img class="grid_list_sel"  src='<@base/>/static/images/grid_sel.png'></a>
-					</td>
-					</#if>
-					<td id="changepassword" nowrap>
-						<a  href="<@base/>/safe/forward/changePasswod">
-							<div  style="float:right;" >&nbsp;&nbsp;<@locale code="login.password.changepassword"/>&nbsp;&nbsp;</div>
-						</a>
-					</td>
-					<td id="manage" nowrap>
-						<a target="_blank"  href="<@base/>/authz/maxkey_mgt">
-							<div  style="float:right;" >&nbsp;&nbsp;<@locale code="global.text.manage"/>&nbsp;&nbsp;</div>
-						</a>
-					</td>
-		
-					<td id="logout" class="ui-widget-header" >
-						<a  href="<@base/>/logout?reLoginUrl=login">
-							<div  style="float:right;" >&nbsp;&nbsp;<@locale code="global.text.logout"/>&nbsp;&nbsp;</div>
-						</a>
-					</td>
-				</tr>
-			</table>
-		</div>
-	</div>
 </div>
\ No newline at end of file
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/login.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/login.ftl
index d07b5fb6..4060330c 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/login.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/login.ftl
@@ -177,202 +177,210 @@ $(function(){
 	<#include "layout/nologintop.ftl">
 </div>
 <div class="container">	
-	<table border="0">
-		<tr>
-			<td width="630px">
-				
-			</td>
-			<td>
-	<table id="tableform">
-		<tr>
-			<td>
-				<ul id="switch_tab" class="switch_tab">
-					<li id="switch_commonLogin" value="div_commonLogin" class="switch_tab_class switch_tab_current"><a href="javascript:void(0);">
-						<@locale code="login.text.login.normal"/></a></li>
-					<li id="switch_tfaLogin"  value="div_tfaLogin"  class="switch_tab_class"><a href="javascript:void(0);">
-						<@locale code="login.text.login.twofactor"/></a></li>
-				</ul>
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<div id="div_commonLogin" >
-					<form id="loginForm" name="loginForm" action="<@base />/logon.do" method="post" class="needs-validation" novalidate>
-						<input type="hidden" name="authType" value="basic"/>
-						<table  class="table login_form_table">
-							<tr>
-								<td><@locale code="login.text.username"/>：</td>
-								<td><input required="" class="form-control" type='text' id='j_username'  name='username' value="admin" tabindex="1"/></td>
-							</tr>
-							<tr>
-								<td><@locale code="login.text.password"/>：</td>
-								<td><input required="" class="form-control"  type='password' id='j_password'  name='password' value="admin"  tabindex="2"/></td>
-							</tr>
-							<#if true==isCaptcha> 
-							<tr>
-								<td><@locale code="login.text.captcha"/>：</td>
-								<td>
-								<input required="" class="form-control"  type='text' id="j_captcha" name="captcha"  tabindex="3"  value="" style="float: left;"/><img id="j_captchaimg" src="<@base/>/captcha"/>
-								</td>
-								
-							</tr>
-							</#if>
-							<#if true==isRemeberMe>
-							<tr>
-								<td colspan="2">
-									<table  style="width:100%">
+	<div class="row">
+		<div class="col-sm-6"></div>
+        <div class="col-md-4 col-md-offset-4 col-lg-offset-4col-xl-offset-4">
+            <div class="panel panel-default">
+				<table border="0">
+					<tr>
+						<td >
+							
+						</td>
+						<td>
+				<table id="tableform">
+					<tr>
+						<td>
+							<ul id="switch_tab" class="switch_tab">
+								<li id="switch_commonLogin" value="div_commonLogin" class="switch_tab_class switch_tab_current"><a href="javascript:void(0);">
+									<@locale code="login.text.login.normal"/></a></li>
+								<li id="switch_tfaLogin"  value="div_tfaLogin"  class="switch_tab_class"><a href="javascript:void(0);">
+									<@locale code="login.text.login.twofactor"/></a></li>
+							</ul>
+						</td>
+					</tr>
+					<tr>
+						<td>
+							<div id="div_commonLogin" >
+								<form id="loginForm" name="loginForm" action="<@base />/logon.do" method="post" class="needs-validation" novalidate>
+									<input type="hidden" name="authType" value="basic"/>
+									<table  class="table login_form_table">
+										<tr>
+											<td><@locale code="login.text.username"/>：</td>
+											<td><input required="" class="form-control" type='text' id='j_username'  name='username' value="admin" tabindex="1"/></td>
+										</tr>
 										<tr>
-											<td style="width:50%">
-												<span class="form_checkbox_label">
-													<input type='checkbox' id="remeberMe" name="remeberMe"  class="checkbox"   tabindex="4"  value="remeberMe" />
-													<@locale code="login.text.remeberme"/>
-												</span>
+											<td><@locale code="login.text.password"/>：</td>
+											<td><input required="" class="form-control"  type='password' id='j_password'  name='password' value="admin"  tabindex="2"/></td>
+										</tr>
+										<#if true==isCaptcha> 
+										<tr>
+											<td><@locale code="login.text.captcha"/>：</td>
+											<td>
+											<input required="" class="form-control"  type='text' id="j_captcha" name="captcha"  tabindex="3"  value="" style="float: left;"/><img id="j_captchaimg" src="<@base/>/captcha"/>
 											</td>
-											<td style="width:50%"><a href="<@base />/forgotpassword/forward"><@locale code="login.text.forgotpassword"/></a></td>
+											
+										</tr>
+										</#if>
+										<#if true==isRemeberMe>
+										<tr>
+											<td colspan="2">
+												<table  style="width:100%">
+													<tr>
+														<td style="width:50%">
+															<span class="form_checkbox_label">
+																<input type='checkbox' id="remeberMe" name="remeberMe"  class="checkbox"   tabindex="4"  value="remeberMe" />
+																<@locale code="login.text.remeberme"/>
+															</span>
+														</td>
+														<td style="width:50%"><a href="<@base />/forgotpassword/forward"><@locale code="login.text.forgotpassword"/></a></td>
+													</tr>
+												</table>
+											</td>								
+										</tr>
+										</#if>
+										<tr   style="display:none">
+											<td>sessionid：</td>
+											<td><input  class="form-control"  type='text' id="j_sessionid" name="sessionId" value="${sessionid}" /></td>
+											
+										</tr>
+										<tr >
+											<td colspan="2">
+											 <input type="submit" id="loginSubmitButton" style="display: none;" />
+											 <input id="loginSubmit" type="button"  tabindex="5"  style="width: 100%;" class="button btn btn-lg btn-primary btn-block"  value="<@locale code="login.button.login"/>"/></td>
+											
 										</tr>
 									</table>
-								</td>								
-							</tr>
-							</#if>
-							<tr   style="display:none">
-								<td>sessionid：</td>
-								<td><input  class="form-control"  type='text' id="j_sessionid" name="sessionId" value="${sessionid}" /></td>
-								
-							</tr>
-							<tr >
-								<td colspan="2">
-								 <input type="submit" id="loginSubmitButton" style="display: none;" />
-								 <input id="loginSubmit" type="button"  tabindex="5"  style="width: 100%;" class="button btn btn-lg btn-primary btn-block"  value="<@locale code="login.button.login"/>"/></td>
-								
-							</tr>
-						</table>
-						<div class="clear"></div>
-					    </form>
-					</div>
-					<div id="div_tfaLogin" >
-					<form id="tfaLoginForm" name="tfaLoginForm" action="<@base />/logon.do" method="post"  class="needs-validation" novalidate>
-						<input type="hidden" name="authType" value="tfa"/>
-						<table  class="login_form_table">
-							<tr>
-								<td><@locale code="login.text.username"/>：</td>
-								<td><input required="" class="form-control"  type='text' id='tfa_j_username'  name='username' value="" tabindex="1"/></td>
-							</tr>
-							<tr> 
-								<td><@locale code="login.text.password"/>：</td>
-								<td><input required="" class="form-control"  type='password' id='tfa_j_password'  name='password' value=""  tabindex="2" /></td>
-							</tr>
-							<#if true==isMfa >
-							<#if "TOPT"==optType >
-							<tr>
-								<td><@locale code="login.text.currenttime"/>：</td>
-								<td>
-									<input  class="form-control"  readonly type='text' id="currentTime" name="currentTime"  tabindex="3"  value="" />
-								</td>
-							</tr>
-							</#if>
-							<tr>
-								<td><@locale code="login.text.captcha"/>：</td>
-								<td>
-									<input required="" class="form-control"  type='text' id="tfa_j_otp_captcha" name="otpCaptcha"  tabindex="3"  value=""   style="float: left;"/>
-									<input class="form-control"  id="tfa_j_otp_captcha_button" type="button"  tabindex="5" class="button"  value="获取动态验证码"/>
-									
-								</td>
-							</tr>
-							<tr>
-								<td></td>
-								<td>
-									<div id="currentTime"></div>
-								</td>
-							</tr>
-							</#if>
-							<#if true==isRemeberMe>
-							<tr> 
-								<td colspan="2">
-									<table  style="width:100%">
+									<div class="clear"></div>
+								    </form>
+								</div>
+								<div id="div_tfaLogin" >
+								<form id="tfaLoginForm" name="tfaLoginForm" action="<@base />/logon.do" method="post"  class="needs-validation" novalidate>
+									<input type="hidden" name="authType" value="tfa"/>
+									<table  class="login_form_table">
 										<tr>
-											<td style="width:50%">
-												<span class="form_checkbox_label">
-													<input type='checkbox' id="tfa_remeberMe" name="remeberMe"  class="checkbox"   tabindex="4"  value="remeberMe" />
-													<@locale code="login.text.remeberme"/>
-												</span>
+											<td><@locale code="login.text.username"/>：</td>
+											<td><input required="" class="form-control"  type='text' id='tfa_j_username'  name='username' value="" tabindex="1"/></td>
+										</tr>
+										<tr> 
+											<td><@locale code="login.text.password"/>：</td>
+											<td><input required="" class="form-control"  type='password' id='tfa_j_password'  name='password' value=""  tabindex="2" /></td>
+										</tr>
+										<#if true==isMfa >
+										<#if "TOPT"==optType >
+										<tr>
+											<td><@locale code="login.text.currenttime"/>：</td>
+											<td>
+												<input  class="form-control"  readonly type='text' id="currentTime" name="currentTime"  tabindex="3"  value="" />
+											</td>
+										</tr>
+										</#if>
+										<tr>
+											<td><@locale code="login.text.captcha"/>：</td>
+											<td>
+												<input required="" class="form-control"  type='text' id="tfa_j_otp_captcha" name="otpCaptcha"  tabindex="3"  value=""   style="float: left;"/>
+												<input class="form-control"  id="tfa_j_otp_captcha_button" type="button"  tabindex="5" class="button"  value="获取动态验证码"/>
+												
 											</td>
-											<td style="width:50%"><a href="<@base />/forgotpassword/forward"><@locale code="login.text.forgotpassword"/></a></td>
+										</tr>
+										<tr>
+											<td></td>
+											<td>
+												<div id="currentTime"></div>
+											</td>
+										</tr>
+										</#if>
+										<#if true==isRemeberMe>
+										<tr> 
+											<td colspan="2">
+												<table  style="width:100%">
+													<tr>
+														<td style="width:50%">
+															<span class="form_checkbox_label">
+																<input type='checkbox' id="tfa_remeberMe" name="remeberMe"  class="checkbox"   tabindex="4"  value="remeberMe" />
+																<@locale code="login.text.remeberme"/>
+															</span>
+														</td>
+														<td style="width:50%"><a href="<@base />/forgotpassword/forward"><@locale code="login.text.forgotpassword"/></a></td>
+													</tr>
+												</table>
+											</td>								
+										</tr>
+										</#if>
+										<tr   style="display:none">
+											<td>sessionid：</td>
+											<td><input class="form-control"  type='text' id="tfa_sessionid" name="sessionId" value="${sessionid}" /></td>
+											
+										</tr>
+										<tr >
+											<td colspan="2">
+											 <input type="submit" id="tfaLoginSubmitButton" style="display: none;" />
+											<input id="tfa_loginSubmit" type="button" style="width: 100%;" tabindex="5" class="button btn btn-lg btn-primary btn-block"  value="<@locale code="login.button.login"/>"/></td>
+											
 										</tr>
 									</table>
-								</td>								
-							</tr>
-							</#if>
-							<tr   style="display:none">
-								<td>sessionid：</td>
-								<td><input class="form-control"  type='text' id="tfa_sessionid" name="sessionId" value="${sessionid}" /></td>
-								
-							</tr>
-							<tr >
-								<td colspan="2">
-								 <input type="submit" id="tfaLoginSubmitButton" style="display: none;" />
-								<input id="tfa_loginSubmit" type="button" style="width: 100%;" tabindex="5" class="button btn btn-lg btn-primary btn-block"  value="<@locale code="login.button.login"/>"/></td>
-								
-							</tr>
-						</table>
-						<div class="clear"></div>
-					    </form>
-					</div>
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<table>
-					<tr >
-						<td ><@locale code="global.change.language"/> :</td>
-						<td >
-							<div > 
-								<a href="<@basePath />/login?language=en">
-									<@locale code="global.change.language.en"/>
-								</a>|
-								<a href="<@basePath />/login?language=zh_CN">
-									<@locale code="global.change.language.zh"/>
-								</a>/ Locale : <@locale/>
-							</div>
+									<div class="clear"></div>
+								    </form>
+								</div>
+						</td>
+					</tr>
+					<tr>
+						<td>
+							<table>
+								<tr >
+									<td ><@locale code="global.change.language"/> :</td>
+									<td >
+										<div > 
+											<a href="<@basePath />/login?language=en">
+												<@locale code="global.change.language.en"/>
+											</a>|
+											<a href="<@basePath />/login?language=zh_CN">
+												<@locale code="global.change.language.zh"/>
+											</a>/ Locale : <@locale/>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<td colspan="2">
+										 <div>
+									      	<table width="100%" frame="void" cellpadding="8px;" cellspacing="8px;">
+									      		<tr>
+									      			<td align="left"><@locale code="login.text.otherlogins"/>：</td>
+									      		</tr>
+									      		
+									      		<#list ssopList as ssop>
+									      			<#if (ssop_index)%3==0>
+										      			<tr>
+										      		</#if>
+										      			<td align="right" nowrap>
+												      			<a href="<@base />/logon/oauth20/authorize/${ssop.provider}"  title="${ssop.providerName}" >
+												      				<img src="<@base />/static/${ssop.icon}" title="${ssop.providerName}"  style="width=:32px;height:32px;border:0;"/>
+												      			</a>&nbsp;&nbsp;
+										      			</td>
+										      		<#if (ssop_index +1)%3==0>
+										      		</tr>
+										      		</#if>
+										      	</#list>
+										      	<#if (ssopList?size)%3!=0>
+										      		</tr>
+										      	</#if>
+									      	</table>
+								  		</div>
+									</td>
+								</tr>
+							</table>
 						</td>
 					</tr>
 					<tr>
-						<td colspan="2">
-							 <div>
-						      	<table width="100%" frame="void" cellpadding="8px;" cellspacing="8px;">
-						      		<tr>
-						      			<td align="left"><@locale code="login.text.otherlogins"/>：</td>
-						      		</tr>
-						      		
-						      		<#list ssopList as ssop>
-						      			<#if (ssop_index)%3==0>
-							      			<tr>
-							      		</#if>
-							      			<td align="right" nowrap>
-									      			<a href="<@base />/logon/oauth20/authorize/${ssop.provider}"  title="${ssop.providerName}" >
-									      				<img src="<@base />/static/${ssop.icon}" title="${ssop.providerName}"  style="width=:32px;height:32px;border:0;"/>
-									      			</a>&nbsp;&nbsp;
-							      			</td>
-							      		<#if (ssop_index +1)%3==0>
-							      		</tr>
-							      		</#if>
-							      	</#list>
-							      	<#if (ssopList?size)%3!=0>
-							      		</tr>
-							      	</#if>
-						      	</table>
-					  		</div>
+						<td id="register"><@locale code="login.text.register"/></td>
+					</tr>
+				</table>
 						</td>
 					</tr>
 				</table>
-			</td>
-		</tr>
-		<tr>
-			<td id="register"><@locale code="login.text.register"/></td>
-		</tr>
-	</table>
-			</td>
-		</tr>
-	</table>
+			</div>
+		</div>
+		<div class="col-sm-2"></div>
+	</div>
 </div>
 <div id="footer">
 	<#include "layout/footer.ftl">
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/main/appList.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/main/appList.ftl
index a1a1aba9..446f1934 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/main/appList.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/main/appList.ftl
@@ -9,14 +9,13 @@
 <#include  "../layout/nav_primary.ftl"/>
 <div class="container">
 <#if  Session["current_user"].gridList==0 >
-<table  class="table">
 	<#list appList as app>
 		<#if (app_index)%4==0>
-			<tr>
+		<div class="row">
 		</#if>
-			<td align="left" nowrap style="width:20%">
-	  				<table  class="none" style="width:100%; border-spacing: 0;border-collapse: collapse;">
-	  				<tr><td style="text-align: center;border-spacing: 0;border-collapse: collapse;border: 0px;">
+			<div class="col-3" style="min-width: 170px;">
+	  				<table  class="none" style="min-width: 170px; min-height: 150px;border-spacing: 0;border-collapse: collapse;">
+	  					<tr><td style="text-align: center;border-spacing: 0;border-collapse: collapse;border: 0px;">
 	  					<#if "Desktop"==app.protocol>
 	  						<a href="javascript:void(0);" title="${app.name}" 
 	  						onclick="window.open('<@base/>/authz/${app.id}');">
@@ -28,18 +27,18 @@
 	  							<img src="<@base/>/image/${app.id}" title="${app.name}" width="65px" height="65px"  style="border:0;"/>
 	  						</a>
 	  					</#if>
-	  				</td></tr>
-	  				<tr><td style="text-align: center;border-spacing: 0;border-collapse: collapse;border: 0px;">${app.name}</td></tr>
+	  					</td></tr>
+	  					<tr><td style="text-align: center;border-spacing: 0;border-collapse: collapse;border: 0px;">${app.name}</td></tr>
 	  				</table>
-			</td>
+	  		</div>
 		<#if (app_index +1)%4==0>
-		</tr>
+		</div>
 		</#if>
 	</#list>
   	<#if (appList?size)%4!=0>
-  		</tr>
+  		</div >
   	</#if>
-</table>
+
 <#else>
 
 <table  class="table">
@@ -89,7 +88,7 @@
 		</td>
 	</tr>
 </#list>
-</table>
+</div>
 </#if>
 </div>
 <div id="footer">
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/profile/myProfile.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/profile/myProfile.ftl
index 4816e6cd..1b5ebbf7 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/profile/myProfile.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/profile/myProfile.ftl
@@ -17,6 +17,8 @@
 <#include  "../layout/top.ftl"/>
 <#include  "../layout/nav_primary.ftl"/>
 <div class="container">
+
+
 <form id="actionFormProfile"  
 	method="post" 
 	type="alert" 
@@ -24,62 +26,44 @@
 	action="<@base/>/profile/update/myProfile" 
 	enctype="multipart/form-data"
 	class="needs-validation" novalidate>
-	 <div class="" style="width:100%;">
-	    <div class="main">
-	    <div class="mainin">			 
-  	        <!-- content -->    
-  	      	<!--table-->
+	<input  class="form-control"  type="hidden" id="id" name="id" value="${model.id!}"/>  
+	
+<div class="row">
+<div class="col-md-6">
+ 	      	<!--table-->
 			  <table class="table table-bordered">
 				<tbody>				
 				<tr>
 					<th style="width:15%;"><@locale code="userinfo.username" />：</th>
 					<td style="width:35%;">
-					<input  class="form-control"  type="hidden" id="id" name="id" value="${model.id!}"/>
 						<input  class="form-control"  type="text" readonly id="username" name="username"  title="" value="${model.username!}"/>
-						<label for="username"></label>
+
 					</td>
+				</tr>
+				<tr>
 					<th style="width:15%;"><@locale code="userinfo.userType" />：</th>
 					<td  style="width:35%;">
 						<input  class="form-control"  readonly type="text" id="userType" name="userType"  title="" value="${model.userType !}"/>
 					</td>
 				</tr>
-				<tr>
-					<td colspan="4">&nbsp;
-					</td>
-					
-				</tr>
 				<tr>
 					<th><@locale code="userinfo.displayName" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="displayName" name="displayName"  title="" value="${model.displayName!}"  required="" />
-						<label for="displayName"></label>
-					</td>
-					<th rowspan="4"><@locale code="userinfo.picture" />：</th>
-					<td rowspan="4">
-						<#if  model.picture? default("")=="" >
-							<img id="picture" width="150px" height="150px" src="<@base/>/static/images/uploadimage.jpg" />
-						<#else>
-							<img id="picture" width="150px" height="150px" src="<@base/>/image/${model.id}" />
-						</#if>
-						<input  class="form-control"  type="file" id="pictureFile" name="pictureFile" style="display:none" />
-						<b class="orange">*</b><label for="picture"></label>
 					</td>
+					
 				</tr>
+				
 				<tr>
 					<th><@locale code="userinfo.familyName" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="familyName" name="familyName"  title="" value="${model.familyName!}"/>
-						<b class="orange">*</b><label for="familyName"></label>
 					</td>
-					
-					
-					
 				</tr>
 				<tr>
 					<th><@locale code="userinfo.givenName" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="givenName" name="givenName"  title="" value="${model.givenName!}"/>
-						<b class="orange">*</b><label for="givenName"></label>
 					</td>
 					
 					
@@ -88,7 +72,6 @@
 					<th><@locale code="userinfo.middleName" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="middleName" name="middleName"  title="" value="${model.middleName!}"/>
-						<label for="middleName"></label>
 					</td>
 					
 					
@@ -98,15 +81,16 @@
 					<th><@locale code="userinfo.nickName" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="nickName" name="nickName"  title="" value="${model.nickName!}"/>
-						<label for="nickName"></label>
 					</td>
+					
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.gender" />：</th>
 					<td>
 						<select class="form-control" name="gender"  class="gender">
 								<option value="1"  <#if 1==model.gender>selected</#if> ><@locale code="userinfo.gender.female" /></option>
 								<option value="2"  <#if 2==model.gender>selected</#if> ><@locale code="userinfo.gender.male" /></option>
 						</select>
-						<label for="gender"></label>
 						
 					</td>
 				</tr>
@@ -122,10 +106,13 @@
 							<option value="4"  <#if 4==model.married>selected</#if> ><@locale code="userinfo.married.widowed" /></option>
 						</select>
 					</td>
+					
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.website" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="webSite" name="webSite"  title="" value="${model.webSite!}"/>
-						<label for="webSite"></label>
+
 						
 					</td>
 				</tr>
@@ -141,23 +128,21 @@
 						</select>
 					</td>
 					
+				</tr>
+				<tr>					
 					<th><@locale code="userinfo.idCardNo" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="idCardNo" name="idCardNo"  title="" value="${model.idCardNo!}"/>
-						<label for="idCardNo"></label>
 					</td>
 				</tr>
-				<tr>
-					<td colspan="4">&nbsp;
-					</td>
-					
-				</tr>
 				<tr>
 					<th><@locale code="userinfo.startWorkDate" />：</th>
 					<td>
 						<input class="form-control"  type="text"  class="datepicker"  id="startWorkDate" name="startWorkDate"  title="" value="${model.startWorkDate!}"/>
-						<label for="startWorkDate"></label>
 					</td>
+					
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.preferredLanguage" />：</th>
 					<td>
 						<select class="form-control"  name="preferredLanguage" id="preferredLanguage">
@@ -286,6 +271,8 @@
 							</select>
 
 					</td>
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.locale" />：</th>
 					<td>
 						<select class="form-control"  name="locale" id="locale">
@@ -308,48 +295,72 @@
 						</select>
 					</td>
 				</tr>
+				</tbody>
+			  </table>
+</div>
+<div class="col-md-6">
+		
+  	      	<!--table-->
+			  <table class="table table-bordered">
+				<tbody>				
 				<tr>
-					<td colspan="4">&nbsp;
+					<th ><@locale code="userinfo.picture" />：</th>
+					<td>
+						<img id="picture" width="150px" height="215px" 
+						<#if  model.picture? default("")=="" >
+							src="<@base/>/static/images/uploadimage.jpg" />
+						<#else>
+							 src="<@base/>/image/${model.id}" />
+						</#if>
+						<input  class="form-control"  type="file" id="pictureFile" name="pictureFile" style="display:none" />
+						
 					</td>
-					
 				</tr>
 				<tr>
 					<th><@locale code="userinfo.employeeNumber" />：</th>
 					<td>
 						<input class="form-control"  readonly type="text" id="employeeNumber" name="employeeNumber"  title="" value="${model.employeeNumber!}"/>
-						<label for="username"></label>
+					
 					</td>
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.windowsAccount" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="windowsAccount" name="windowsAccount"  title="" value="${model.windowsAccount!}"/>
-						<label for="windowsAccount"></label>
+						
 					</td>
 				</tr>
 				<tr>
 					<th><@locale code="userinfo.organization" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="organization" name="organization"  title="" value="${model.organization!}"/>
-						<label for="organization"></label>
+						
 					</td>
+					
+					
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.division" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="division" name="division"  title="" value="${model.division!}"/>
-						<label for="division"></label>
+						
 					</td>
 					
 				</tr>
-				
 				<tr>
 					<th><@locale code="userinfo.department" />：</th>
 					<td>
 						<input class="form-control"  type="hidden" id="departmentId" name="departmentId"  title="" value="${model.departmentId!}"/>
 						<input class="form-control"  type="text" id="department" name="department"  title="" value="${model.department!}"/>
-						<label for="department"></label>
+						
 					</td>
+					
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.costCenter" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="costCenter" name="costCenter"  title="" value="${model.costCenter!}"/>
-						<label for="costCenter"></label>
+						
 					</td>
 					
 				</tr>
@@ -357,12 +368,14 @@
 					<th><@locale code="userinfo.jobTitle" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="jobTitle" name="jobTitle"  title="" value="${model.jobTitle!}"/>
-						<label for="jobTitle"></label>
+						
 					</td>
-					<th><@locale code="userinfo.jobLevel" />：</th>
+				</tr>
+				<tr>
+					<th><@locale code="userinfo.jobTitle" />：</th>
 					<td>
-						<input class="form-control"  type="text" id="jobLevel" name="jobLevel"  title="" value="${model.jobLevel!}"/>
-						<label for="jobLevel"></label>
+						<input class="form-control"  type="text" id="jobTitle" name="jobTitle"  title="" value="${model.jobTitle!}"/>
+						
 					</td>
 				</tr>
 				<tr>
@@ -370,29 +383,48 @@
 					<td>
 						<input class="form-control"  type="hidden" id="managerId" name="managerId"  title="" value="${model.managerId!}"/>
 						<input class="form-control"  type="text" id="manager" name="manager"  title="" value="${model.manager!}"/>
-						<label for="manager"></label>
+						
 					</td>
-					<th><@locale code="userinfo.assistant" />：</th>
+					
+				</tr>
+				<tr>
+					<th><@locale code="userinfo.manager" />：</th>
 					<td>
-						<input class="form-control"  type="hidden" id="assistantId" name="assistantId"  title="" value="${model.assistantId!}"/>
-						<input class="form-control"   type="text" id="assistant" name="assistant"  title="" value="${model.assistant!}"/>
-						<label for="delegatedApprover"></label>
+						<input class="form-control"  type="hidden" id="managerId" name="managerId"  title="" value="${model.managerId!}"/>
+						<input class="form-control"  type="text" id="manager" name="manager"  title="" value="${model.manager!}"/>
+						
 					</td>
+					
 				</tr>
 				<tr>
 					<th><@locale code="userinfo.entryDate" />：</th>
 					<td>
 						<input class="form-control"  type="text" class="datepicker"  id="entryDate" name="entryDate"  title="" value="${model.entryDate!}"/>
-						<label for="entryDate"></label>
+						
 					</td>
+					
+				</tr>
+				<tr>
+					
 					<th><@locale code="userinfo.quitDate" />：</th>
 					<td>
 						<input class="form-control"   type="text" class="datepicker"  id="quitDate" name="quitDate"  title="" value="${model.quitDate!}"/>
-						<label for="delegatedApprover"></label>
+						
 					</td>
 				</tr>
-				<tr>
-					<td colspan="4">&nbsp;
+				</tbody>
+			  </table>
+				
+			  
+	</div>	
+</div>	
+
+<div class="row">
+	<div class="col-md-6">
+		<table class="table table-bordered">
+		<tbody>		
+		<tr>
+					<td colspan="2">单位信息
 					</td>
 					
 				</tr>
@@ -652,6 +684,8 @@
 						</select>
 						<label for="workCountry"></label>
 					</td>
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.workRegion" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="workRegion" name="workRegion"  title="" value="${model.workRegion!}"/>
@@ -665,6 +699,8 @@
 						<input class="form-control"  type="text" id="workLocality" name="workLocality"  title="" value="${model.workLocality!}"/>
 						<label for="workLocality"></label>
 					</td>
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.workStreetAddress" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="workStreetAddress" name="workStreetAddress"  title="" value="${model.workStreetAddress!}"/>
@@ -678,19 +714,23 @@
 						<input class="form-control"  type="text" id="workPostalCode" name="workPostalCode"  title="" value="${model.workPostalCode!}"/>
 						<label for="workPostalCode"></label>
 					</td>
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.workFax" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="workFax" name="workFax"  title="" value="${model.workFax!}"/>
 						<label for="workFax"></label>
 					</td>
 				</tr>
-
 				<tr>
 					<th><@locale code="userinfo.workPhoneNumber" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="workPhoneNumber" name="workPhoneNumber"  title="" value="${model.workPhoneNumber!}"/>
 						<label for="workPhoneNumber"></label>
 					</td>
+					
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.workEmail" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="workEmail" name="workEmail"  title="" value="${model.workEmail!}"/>
@@ -698,8 +738,14 @@
 					</td>
 					
 				</tr>
-				<tr>
-					<td colspan="4">&nbsp;
+				</tbody>
+			  </table>
+	</div>
+	<div class="col-md-6">
+		<table class="table table-bordered">
+		<tbody>		
+		<tr>
+					<td colspan="2">家庭信息
 					</td>
 					
 				</tr>
@@ -960,6 +1006,8 @@
 						</select>
 						<label for="homeCountry"></label>
 					</td>
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.homeRegion" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="homeRegion" name="homeRegion"  title="" value="${model.homeRegion!}"/>
@@ -973,6 +1021,8 @@
 						<input class="form-control"  type="text" id="homeLocality" name="homeLocality"  title="" value="${model.homeLocality!}"/>
 						<label for="homeLocality"></label>
 					</td>
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.homeStreetAddress" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="homeStreetAddress" name="homeStreetAddress"  title="" value="${model.homeStreetAddress!}"/>
@@ -986,6 +1036,8 @@
 						<input class="form-control"  type="text" id="homePostalCode" name="homePostalCode"  title="" value="${model.homePostalCode!}"/>
 						<label for="homePostalCode"></label>
 					</td>
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.homeFax" />：</th>
 					<td>
 						<input class="form-control"  type="text" id="homeFax" name="homeFax"  title="" value="${model.homeFax!}"/>
@@ -999,22 +1051,19 @@
 						<input class="form-control"  type="text" id="homePhoneNumber" name="homePhoneNumber"  title="" value="${model.homePhoneNumber!}"/>
 						<label for="homePhoneNumber"></label>
 					</td>
+				</tr>
+				<tr>
 					<th><@locale code="userinfo.homeEmail" />：</th>
 					<td >
 						<input class="form-control"  type="text" id="homeEmail" name="homeEmail"  title="" value="${model.homeEmail!}"/>
 						<label for="homeEmail"></label>
 					</td>
 				</tr>
-				<tr>
-					<td colspan="4">&nbsp;
-					</td>
-					
-				</tr>
 				</tbody>
 			  </table>
+	</div>
+</div>
   	        <div class="clear"></div>
-		</div>
-		</div>
 			<div >
 				<div >
 					<input id="_method" type="hidden" name="_method"  value="post"/>
@@ -1022,7 +1071,7 @@
 					<input id="submitBtn" class="button btn btn-primary mr-3" type="button" value="<@locale code="button.text.save" />"/>
 				</div>
 			</div>
-	 </div> 
+	</div>
 </form>
 </div>
 <div id="footer">
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/safe/changePassword.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/safe/changePassword.ftl
index 9daa1f85..7ba0113d 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/safe/changePassword.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/safe/changePassword.ftl
@@ -8,10 +8,9 @@
 <#include  "../layout/top.ftl"/>
 <#include  "../layout/nav_primary.ftl"/>
 <div class="container">
-<table width="100%">
-  <tr>
-    <td>
-
+<div class="row">
+<div class="col-md-1"></div>
+<div class="col-md-10">
 <form    method="post"  action="<@base/>/safe/changePassword"  class="needs-validation" novalidate> 
 
 	  <table   class="table table-bordered" >
@@ -63,9 +62,9 @@
 		</tbody>
 	  </table>
 </form>
-</td>
-  </tr>
-</table>
+</div>
+<div class="col-md-1"></div>
+</div >
 </div>
 <div id="footer">
 	<#include   "../layout/footer.ftl"/>
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/safe/setting.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/safe/setting.ftl
index 1ad9ae78..71087d4a 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/safe/setting.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/safe/setting.ftl
@@ -8,20 +8,18 @@
 <#include  "../layout/top.ftl"/>
 <#include  "../layout/nav_primary.ftl"/>
 <div class="container">
-<table width="100%">
-  <tr>
-    <td>
-
+<div class="row">
+<div class="col-md-1"></div>
+<div class="col-md-10">
 <form id="actionForm"  method="post" type="label" autoclose="true"  action="<@base/>/safe/setting"  class="needs-validation" novalidate> 
-
-	  <table  class="table table-bordered" >
+	  <table  class="table table-bordered"  style="width:100%;">
 			<tbody>
 			<tr>
 				<th  colspan="2"><@locale code="userinfo.authnType" /></th>
 			</tr>
 			<tr>
 				<th><@locale code="userinfo.displayName" /> :</th>
-				<td style="width:700px">
+				<td >
 					<input  class="form-control"  readonly type="text" id="displayName" name="displayName" class="required" title="" value="${model.displayName}"/>
 					
 				</td>
@@ -104,9 +102,9 @@
 		</tbody>
 	  </table>
 </form>
-</td>
-  </tr>
-</table>
+</div>
+<div class="col-md-1"></div>
+</div >
 </div>
 <div id="footer">
 	<#include   "../layout/footer.ftl"/>
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/safe/timeBased.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/safe/timeBased.ftl
index 00435f24..38fe4f55 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/safe/timeBased.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/safe/timeBased.ftl
@@ -8,72 +8,73 @@
 <#include  "../layout/top.ftl"/>
 <#include  "../layout/nav_primary.ftl"/>
 <div class="container">
-	  <table class="table table-bordered"  style="width:100%;">
-			<tbody>
-			<tr>
-				<td colspan="2"><@locale code="login.totp.title" /></td>
-			</tr>
-			<tr>
-				<td> <img id="captchaimg" src="<@base/>/image/${id}" /><br>
-				支持<b>Google Authenticator等</b></td>
-				<td   style="width:75%;">
-					<table  class="table"   style="width:100%;">
-						<tr>
-							<th style="width:30%;"><@locale code="userinfo.displayName" /> :</th>
-							<td>
-								<input readonly type="text" class="required form-control" title="" value="${userInfo.displayName}"/>
-								
-							</td>
-						</tr>
-						<tr>
-							<th><@locale code="userinfo.username" /> :</th>
-							<td>
-								<input readonly type="text" class="required form-control" title="" value="${userInfo.username}"/>
-							</td>
-						</tr>
-						<tr>
-							<th><@locale code="login.totp.sharedSecret" />(BASE32) :</th>
-							<td>
-							<input readonly type="text" class="required form-control" title="" value="${sharedSecret}"/>
-							</td>
-						</tr>
-						<tr>
-							<th><@locale code="login.totp.sharedSecret" />(HEX) :</th>
-							<td>
-								<input readonly type="text" class="required form-control" title="" value="${hexSharedSecret}"/>
-							</td>
-						</tr>
-						<tr>
-							<th><@locale code="login.totp.period" />:</th>
-							<td>
-								<input readonly type="text" class="required form-control" title="" value="${format.period}"/>
-							</td>
-						</tr>
-						<tr>
-							<th><@locale code="login.totp.digits" />:</th>
-							<td>
-								<input readonly type="text" class="required form-control" title="" value="${format.digits}"/>
-							</td>
-						</tr>
-						<tr>
-							<th><@locale code="login.totp.crypto" />:</th>
-							<td>
-								<input readonly type="text" class="required form-control" title="" value="${format.crypto}"/>
-							</td>
-						</tr>
+	<div class="row">
+		<div class="col-md-12">
+				<@locale code="login.totp.title" />
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-6">
+				<img id="captchaimg" src="<@base/>/image/${id}" /><br>
+				支持<b>Google Authenticator等</b>
+		</div>
+		<div class="col-md-6">
+			<table  class="table table-bordered"   >
+				<tr>
+					<th style="width:30%;"><@locale code="userinfo.displayName" /> :</th>
+					<td>
+						<input readonly type="text" class="required form-control" title="" value="${userInfo.displayName}"/>
 						
-						<tr>
-							<td colspan="2"  class="center">
-					    		<input class="button forward btn  btn-primary" style="width:100px" wurl="<@base/>/safe/otp/gen/timebased"  type="button"    id="forward" value="<@locale code="login.totp.generate" />"/>
-							</td>
-						</tr>
-					</table>
-				</td>
-			</tr>
-		</tbody>
-	  </table>
-<div id="footer">
-	<#include   "../layout/footer.ftl"/>
-</div>
+					</td>
+				</tr>
+				<tr>
+					<th><@locale code="userinfo.username" /> :</th>
+					<td>
+						<input readonly type="text" class="required form-control" title="" value="${userInfo.username}"/>
+					</td>
+				</tr>
+				<tr>
+					<th><@locale code="login.totp.sharedSecret" />(BASE32) :</th>
+					<td>
+					<input readonly type="text" class="required form-control" title="" value="${sharedSecret}"/>
+					</td>
+				</tr>
+				<tr>
+					<th><@locale code="login.totp.sharedSecret" />(HEX) :</th>
+					<td>
+						<input readonly type="text" class="required form-control" title="" value="${hexSharedSecret}"/>
+					</td>
+				</tr>
+				<tr>
+					<th><@locale code="login.totp.period" />:</th>
+					<td>
+						<input readonly type="text" class="required form-control" title="" value="${format.period}"/>
+					</td>
+				</tr>
+				<tr>
+					<th><@locale code="login.totp.digits" />:</th>
+					<td>
+						<input readonly type="text" class="required form-control" title="" value="${format.digits}"/>
+					</td>
+				</tr>
+				<tr>
+					<th><@locale code="login.totp.crypto" />:</th>
+					<td>
+						<input readonly type="text" class="required form-control" title="" value="${format.crypto}"/>
+					</td>
+				</tr>
+				
+				<tr>
+					<td colspan="2"  class="center">
+			    		<input class="button forward btn  btn-primary" style="width:100px" wurl="<@base/>/safe/otp/gen/timebased"  type="button"    id="forward" value="<@locale code="login.totp.generate" />"/>
+					</td>
+				</tr>
+			</table>
+		</div>
+	</div>
+	
+	<div id="footer">
+		<#include   "../layout/footer.ftl"/>
+	</div>
 <body>
 </html>
\ No newline at end of file
diff --git a/maxkey-web-maxkey/src/main/resources/templates/views/social/socialSignOnProvider.ftl b/maxkey-web-maxkey/src/main/resources/templates/views/social/socialSignOnProvider.ftl
index d131b761..21e52078 100644
--- a/maxkey-web-maxkey/src/main/resources/templates/views/social/socialSignOnProvider.ftl
+++ b/maxkey-web-maxkey/src/main/resources/templates/views/social/socialSignOnProvider.ftl
@@ -8,14 +8,14 @@
 <#include  "../layout/top.ftl"/>
 <#include  "../layout/nav_primary.ftl"/>
 <div class="container">
-<table  class="table">
+
 	<#list listSocialSignOnProvider as socialSignOnProvider>
 		<#if (socialSignOnProvider_index)%4==0>
-			<tr>
+			<div class="row">
 		</#if>
-			<td align="left" nowrap  style="width:25%">
+			<div class="col-3" style="min-width: 170px;">
 				<#if socialSignOnProvider.provider?default("")!="">
-	  				<table class="none"  style="width:100%;">
+	  				<table class="none"  style="min-width: 170px; min-height: 150px;">
 	  				<tr><td  style="text-align: center;border-spacing: 0;border-collapse: collapse;border: 0px;">
 	  					<img src="<@base />/static/${socialSignOnProvider.icon}" title="${socialSignOnProvider.providerName}" width="65px;" height="65px;"/>
 	  				</td></tr>
@@ -29,12 +29,11 @@
 	  				</div></td></tr>
 	  				</table>
 	  			</#if>
-			</td>
+			</div>
 		<#if (socialSignOnProvider_index +1)%4==0>
-			</tr>
+			</div>
 		</#if>
 	</#list>
-</table>
 </div >
 <div id="footer">
 	<#include   "../layout/footer.ftl"/>
-- 
GitLab