From fd84b2ae5ade547d723a478fe510cf59a0bd416f Mon Sep 17 00:00:00 2001
From: ChanMyeong <dece24@gmail.com>
Date: Mon, 8 Oct 2012 09:28:11 +0000
Subject: [PATCH] Issue 2045 fixed. Required enable conditions should not to be
 displayed.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11627 201d5d3c-b55e-5fd7-737f-ddc643e51545
---
 modules/install/lang/lang.xml              | 18 +++----
 modules/install/tpl/admin_form.html        |  9 ++--
 modules/install/tpl/check_env.html         | 56 +++++++++++++---------
 modules/install/tpl/config_form.html       |  9 ++--
 modules/install/tpl/css/install.css        | 33 ++++++-------
 modules/install/tpl/form.cubrid.html       |  9 ++--
 modules/install/tpl/form.firebird.html     |  9 ++--
 modules/install/tpl/form.mssql.html        |  9 ++--
 modules/install/tpl/form.mysql.html        |  9 ++--
 modules/install/tpl/form.mysql_innodb.html |  9 ++--
 modules/install/tpl/form.mysqli.html       |  9 ++--
 modules/install/tpl/form.postgresql.html   |  9 ++--
 modules/install/tpl/form.sqlite2.html      |  9 ++--
 modules/install/tpl/form.sqlite3_pdo.html  |  9 ++--
 modules/install/tpl/ftp.html               | 10 ++--
 modules/install/tpl/header.html            |  3 +-
 modules/install/tpl/introduce.html         | 27 +++++------
 modules/install/tpl/js/install.js          | 15 ++++++
 modules/install/tpl/select_db.html         |  9 ++--
 19 files changed, 135 insertions(+), 135 deletions(-)

diff --git a/modules/install/lang/lang.xml b/modules/install/lang/lang.xml
index 91866febf..eac606f45 100644
--- a/modules/install/lang/lang.xml
+++ b/modules/install/lang/lang.xml
@@ -57,17 +57,13 @@
 			<value xml:lang="jp"><![CDATA[管理者情報入力]]></value>
 		</item>
 	</item>
-	<item name="install_condition_title">
-		<value xml:lang="ko"><![CDATA[필수 설치조건을 확인하세요.]]></value>
-		<value xml:lang="en"><![CDATA[Please check the installation requirement.]]></value>
-		<value xml:lang="jp"><![CDATA[インストールするための必須条件を確認してください。]]></value>
-		<value xml:lang="zh-CN"><![CDATA[检测运行环境]]></value>
-		<value xml:lang="zh-TW"><![CDATA[確認安裝時必備的條件]]></value>
-		<value xml:lang="fr"><![CDATA[Vérifiez  les conditions obligatoires pour l'installation, S.V.P.]]></value>
-		<value xml:lang="ru"><![CDATA[Пожалуйста, проверьте требования к установке.]]></value>
-		<value xml:lang="es"><![CDATA[Por favor chequee los requerimientos de la instalación.]]></value>
-		<value xml:lang="tr"><![CDATA[Lütfen kurulum gereksinimlerini kontrol ediniz.]]></value>
-		<value xml:lang="vi"><![CDATA[Xin hãy kiểm tra những yêu cầu cài đặt.]]></value>
+	<item name="install_condition_enable">
+		<value xml:lang="ko"><![CDATA[설치가 가능합니다.]]></value>
+		<value xml:lang="en"><![CDATA[You can Install.]]></value>
+	</item>
+	<item name="install_details">
+		<value xml:lang="ko"><![CDATA[자세히]]></value>
+		<value xml:lang="en"><![CDATA[Details]]></value>
 	</item>
 	<item name="install_checklist_title" type="array">
 		<item name="php_version">
diff --git a/modules/install/tpl/admin_form.html b/modules/install/tpl/admin_form.html
index 80af0610d..732b6719a 100644
--- a/modules/install/tpl/admin_form.html
+++ b/modules/install/tpl/admin_form.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -30,4 +29,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/check_env.html b/modules/install/tpl/check_env.html
index ce254e366..07d39feda 100644
--- a/modules/install/tpl/check_env.html
+++ b/modules/install/tpl/check_env.html
@@ -1,28 +1,38 @@
-<!--#include("header.html")-->
-	<div id="body">
-<!--#include("progress_menu.html")-->
-	<span class="dummy"></span>
+<include target="header.html" />
+<div id="body">
+	<include target="progress_menu.html" />
 	<div id="content">
-		<div class="table">
-			<table border="1" cellspacing="0">
-				<tbody>
-					<!--@foreach($checklist as $key => $val)-->
-					<tr>
-						<th scope="row">{$lang->install_checklist_title[$key]}<!--@if($key == 'php_version')--> (Ver. {$phpversion})<!--@end--></th>
-						<td><!--@if($val)-->{$lang->enable}<!--@else--><strong>{$lang->disable}</strong><br />{$lang->install_checklist_desc[$key]}<!--@end--></td>
-					</tr>
-					<!--@end-->
-				</tbody>
-			</table>
-			
+		<ul>
+			<li loop="$checklist => $key,$val" cond="!$val">
+				{@ $isDisable = TRUE}
+				<strong>{$lang->install_checklist_title[$key]}<block cond="$key == 'php_version'">(Ver. {$phpversion})</block></strong> 
+				:
+				<em><i class="x_icon-ban-circle x_icon-white"></i> {$lang->disable}</em>
+				<p>{$lang->install_checklist_desc[$key]}</p>
+			</li>
+		</ul>
+		<div cond="!$isDisable">
+			<p>
+				<i class="x_icon-ok-sign x_icon-white"></i>
+				<strong>XE {__ZBXE_VERSION__}</strong> {$lang->install_condition_enable} 
+				<a href="#details" data-toggle="#details">&rsaquo; {$lang->install_details}</a>
+			</p>
+			<ul id="details" style="display:none;outline:none">
+				<li loop="$checklist => $key,$val">
+					<strong>{$lang->install_checklist_title[$key]}<block cond="$key == 'php_version'">(Ver. {$phpversion})</block></strong> 
+					:
+					<em>{$lang->enable}</em>
+				</li>
+			</ul>
 		</div>
 		<div class="ibtnArea">
-			<div class="fLeft">
-				<span class="ibtn icon"><span class="back"></span> <a href="{getUrl('')}">{$lang->cmd_back}</a></span>
-			</div>
-			<div class="fRight">
-				<span class="ibtn icon"><span class="check"></span><!--@if($install_enable)--><a href="{getUrl('','act','dispInstallSelectDB')}">{$lang->cmd_install_next}</a><!--@else--><a href="{getUrl('','act',$act)}">{$lang->cmd_install_fix_checklist}</a><!--@end--></span>
-			</div>
+			<span class="x_pull-left">
+				<a href="{getUrl('')}" class="x_btn x_btn-small x_btn-inverse"><i class="x_icon-chevron-left x_icon-white"></i> {$lang->cmd_back}</a>
+			</span>
+			<span class="x_pull-right">
+				<a cond="$install_enable" class="x_btn x_btn-small x_btn-inverse" href="{getUrl('','act','dispInstallSelectDB')}">{$lang->cmd_install_next} <i class="x_icon-chevron-right x_icon-white"></i></a>
+				<a cond="!$install_enable" class="x_btn x_btn-small x_btn-inverse" href="{getUrl('','act',$act)}">{$lang->cmd_install_fix_checklist} <i class="x_icon-chevron-right x_icon-white"></i></a>
+			</span>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/config_form.html b/modules/install/tpl/config_form.html
index 72136b2e3..6b01b6a8a 100644
--- a/modules/install/tpl/config_form.html
+++ b/modules/install/tpl/config_form.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -45,4 +44,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/css/install.css b/modules/install/tpl/css/install.css
index a60bd36a9..804dbeaa9 100644
--- a/modules/install/tpl/css/install.css
+++ b/modules/install/tpl/css/install.css
@@ -1,8 +1,9 @@
 @charset "utf-8";
 /* NHN (developers@xpressengine.com) */
 /* Element Reset */
-html, body{margin:0}
+html, body{margin:0;min-height:100%}
 body, input, textarea, select, table, button {font-family:Tahoma, Geneva, sans-serif;font-size:12px}
+body{background:#3EAF0E -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff));background:#3EAF0E -moz-linear-gradient(top, #ccc, #fff);background:#3EAF0E -o-linear-gradient(top, #ccc, #fff)}
 img, fieldset {border:0}
 form, fieldset {margin:0;padding:0}
 em, address {font-style:normal}
@@ -14,21 +15,21 @@ a:hover, a:active, a:focus {text-decoration:underline}
 .iCheck, .iRadio{width:13px;height:13px;margin:0;padding:0;vertical-align:middle}
 .hide{position:absolute;left:0;top:0;width:1px;height:1px;font-size:0;line-height:0;visibility:hidden}
 /* Layout */
-html{height:100%;background:url(../img/bgHtml.gif) repeat-x 0 0}
 #xei{width:800px;margin:0 auto;padding:120px 0 0 0}
-#xei #header{position:relative;background:#444;margin:0 0 1px 0;padding:10px 20px;color:#fff}
+#xei #header{position:relative;background:#444;margin:0 0 1px 0;padding:10px 20px;color:#fff;border-radius:5px 5px 0 0}
 #xei #header h1{margin:0}
-#xei #header em{position:absolute;top:10px;right:20px;font-weight:bold;font-size:14px;color:#eee}
+#xei #header em{position:absolute;bottom:10px;right:20px;font-weight:bold;font-size:14px;color:#eee}
 #xei #header em strong{font-size:20px;color:#F60}
-#xei #body{width:580px;padding:0 0 0 220px;position:relative;overflow:hidden;*zoom:1}
+#xei #body{width:580px;padding:0 0 0 220px;position:relative;*zoom:1}
 #xei #body:after{content:"";display:block;clear:both}
-#xei #body .dummy{position:absolute;left:0;top:287px;display:block;width:219px;height:1000px;background:#484848;*zoom:1}
 #xei #progress{position:absolute;left:0;top:0;width:219px}
 #xei #progress ul{list-style:none;margin:0;padding:0}
-#xei #progress li{position:relative;margin:0 0 1px 0;vertical-align:top;line-height:40px;color:#999;text-indent:30px;background-color:#555;background-image:url(../img/icoStatus.gif);background-repeat:no-repeat;background-position:10px 0;*zoom:1}
+#xei #progress li{position:relative;margin:0 0 1px 0;vertical-align:top;line-height:40px;color:#999;text-indent:30px;background-color:#555;background-image:url(../img/icoStatus.gif);background-repeat:no-repeat;background-position:10px 0;*zoom:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#xei #progress li:last-child{border-radius:0 0 0 5px}
 #xei #progress li.done{background-position:10px -40px}
 #xei #progress li.active{background-color:#666;background-position:10px -80px;font-weight:bold;color:#fff;margin-right:-1px}
-#xei #content{position:relative;width:580px;min-height:328px;_height:328px;padding:20px 0 60px 0;background:#666}
+#xei #content{position:relative;width:500px;min-height:145px;padding:40px;background:#666;color:#fff}
+#xei #content a{color:#FFC}
 /* Button */
 .ibtn,
 .ibtn *{position:relative;margin:0;padding:0;display:inline-block;height:30px;line-height:30px;text-decoration:none !important;border:0;font-size:12px;font-family:Tahoma, Sans-serif;white-space:nowrap;background:url(../img/btnPack.gif) no-repeat;vertical-align:top;overflow:visible;color:#eee}
@@ -44,12 +45,10 @@ html{height:100%;background:url(../img/bgHtml.gif) repeat-x 0 0}
 .ibtn .back{background-position:-14px -146px}
 .ibtn .monitor{background-position:-37px -147px}
 /* Button Area */
-.ibtnArea{position:absolute;bottom:0;right:0;width:540px;margin:0;padding:15px 20px;text-align:center;*zoom:1;color:#fff;border-top:1px solid #444;background:#555}
+.ibtnArea{position:absolute;bottom:-61px;right:0;width:540px;height:30px;margin:1px 0 0 0;padding:15px 20px;text-align:center;*zoom:1;color:#fff;background:#555;border-radius:0 0 5px 5px}
 .ibtnArea:after{content:"";display:block;clear:both}
-.ibtnArea .fLeft{float:left}
-.ibtnArea .fRight{float:right}
-.ibtnArea label{font-weight:bold}
-.ibtnArea select{background:#666;color:#fff}
+.ibtnArea .x_btn-inverse{color:#fff !important}
+.ibtnArea .x_btn>i{opacity:.75;filter:alpha(opacity=75)}
 /* table */
 .table{margin:0 20px 20px 20px}
 .table table{width:100%;border:0;border-top:1px solid #484848}
@@ -108,10 +107,8 @@ html{height:100%;background:url(../img/bgHtml.gif) repeat-x 0 0}
 .desc{padding:10px 20px;margin:0 20px 20px 20px;background:#555;color:#eee;line-height:1.5}
 .desc ul{margin:0 0 0 20px;padding:0}
 .desc strong{color:#F60}
-.agreement{color:#eee}
-.agreement label{font-weight:bold;vertical-align:middle;cursor:pointer}
-.agreement a{color:#6CF;text-decoration:underline;vertical-align:middle}
-.agreement em{color:#f60}
-.agreement p{line-height:1.5}
+.language{list-style:none;margin:0;padding:0 0 0 20px}
+.language li{position:relative;margin:0 0 7px 0}
+.language li>i{position:absolute;top:2px;left:-20px}
 /* Waiting for server response */
 .wfsr{display:none;position:absolute;position:fixed;left:0;top:0;z-index:100; border:1px solid #EAE9DC;background:#FFFDEF url(../../common/img/msg.update.png) no-repeat 1em .5em;margin:1em;padding:1em 1em 1em 55px;border-radius:5px;line-height:1.4;font-size:12px}
diff --git a/modules/install/tpl/form.cubrid.html b/modules/install/tpl/form.cubrid.html
index bd1f2b7ed..809e5820b 100644
--- a/modules/install/tpl/form.cubrid.html
+++ b/modules/install/tpl/form.cubrid.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -32,4 +31,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/form.firebird.html b/modules/install/tpl/form.firebird.html
index a930c8ba2..d3cb19d30 100644
--- a/modules/install/tpl/form.firebird.html
+++ b/modules/install/tpl/form.firebird.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -32,4 +31,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/form.mssql.html b/modules/install/tpl/form.mssql.html
index 1d4f42dea..67fc1c871 100644
--- a/modules/install/tpl/form.mssql.html
+++ b/modules/install/tpl/form.mssql.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -32,4 +31,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/form.mysql.html b/modules/install/tpl/form.mysql.html
index 64e6cd820..a0003a437 100644
--- a/modules/install/tpl/form.mysql.html
+++ b/modules/install/tpl/form.mysql.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -32,4 +31,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/form.mysql_innodb.html b/modules/install/tpl/form.mysql_innodb.html
index 64e6cd820..a0003a437 100644
--- a/modules/install/tpl/form.mysql_innodb.html
+++ b/modules/install/tpl/form.mysql_innodb.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -32,4 +31,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/form.mysqli.html b/modules/install/tpl/form.mysqli.html
index 64e6cd820..a0003a437 100644
--- a/modules/install/tpl/form.mysqli.html
+++ b/modules/install/tpl/form.mysqli.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -32,4 +31,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/form.postgresql.html b/modules/install/tpl/form.postgresql.html
index 59beed55e..c676c25cd 100644
--- a/modules/install/tpl/form.postgresql.html
+++ b/modules/install/tpl/form.postgresql.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -32,4 +31,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/form.sqlite2.html b/modules/install/tpl/form.sqlite2.html
index 3bda3543b..7a3956939 100644
--- a/modules/install/tpl/form.sqlite2.html
+++ b/modules/install/tpl/form.sqlite2.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -28,4 +27,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/form.sqlite3_pdo.html b/modules/install/tpl/form.sqlite3_pdo.html
index 3bda3543b..7a3956939 100644
--- a/modules/install/tpl/form.sqlite3_pdo.html
+++ b/modules/install/tpl/form.sqlite3_pdo.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 				<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -28,4 +27,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/ftp.html b/modules/install/tpl/ftp.html
index cc8250791..37e9b3b34 100644
--- a/modules/install/tpl/ftp.html
+++ b/modules/install/tpl/ftp.html
@@ -1,9 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
-
+		<include target="progress_menu.html" />
 		<div id="content">
 			<form action="./" method="post" onsubmit="return doInstallFTPInfo(this);" id="ftp_form">
 				<ul class="form formFtp">
@@ -39,4 +37,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />
diff --git a/modules/install/tpl/header.html b/modules/install/tpl/header.html
index 275e15eec..e4edd590c 100644
--- a/modules/install/tpl/header.html
+++ b/modules/install/tpl/header.html
@@ -1,5 +1,6 @@
+<load target="../../../common/css/bootstrap.min.css" />
 <load target="./css/install.css" />
-<div id="xei">
+<div id="xei" class="x">
 	<div id="header">
 		<h1><img src="img/xe.gif" width="163" height="26" alt="Xpress Engine" /></h1>
 		<em>Version <strong>{__ZBXE_VERSION__}</strong> {$lang->introduce_title}</em>
diff --git a/modules/install/tpl/introduce.html b/modules/install/tpl/introduce.html
index b39610b9b..225cff1cf 100644
--- a/modules/install/tpl/introduce.html
+++ b/modules/install/tpl/introduce.html
@@ -2,23 +2,18 @@
 <include target="header.html" />
 	<div id="body">
 		<include target="progress_menu.html" />
-		<span class="dummy"></span>
 		<div id="content">
-			<div class="agreement">
-				<div class="desc">
-					<ul style="list-style:none">
-						<li loop="$lang_supported=>$key,$val" style="position:relative; margin:0 0 4px 0">
-							<i cond="$l==$key" style="position:absolute;top:0;left:-16px;font-style:normal;font-weight:bold;color:red" title="Selected Language">&#10004;</i>
-							<a href="{getUrl('l', $key)}" cond="$l!=$key">{$val}</a>
-							<strong cond="$l==$key">{$val}</strong>
-						</li>
-					</ul>
-				</div>
-				<div class="ibtnArea">
-					<div class="fRight">
-						<span class="ibtn icon"><span class="check"></span> <a href="{getUrl('', 'act', 'dispInstallCheckEnv')}" >{$lang->cmd_next}</a></span>
-					</div>
-				</div>
+			<ul class="language">
+				<li loop="$lang_supported=>$key,$val">
+					<i cond="$l==$key" class="x_icon-ok-sign x_icon-white" title="Selected Language"></i>
+					<a href="{getUrl('l', $key)}" cond="$l!=$key">{$val}</a>
+					<strong cond="$l==$key">{$val}</strong>
+				</li>
+			</ul>
+			<div class="ibtnArea">
+				<span class="x_pull-right">
+					<a href="{getUrl('', 'act', 'dispInstallCheckEnv')}" class="x_btn x_btn-small x_btn-inverse" id="task-choose-language">{$lang->cmd_next} <i class="x_icon-chevron-right x_icon-white"></i></a>
+				</span>
 			</div>
 		</div>
 	</div>
diff --git a/modules/install/tpl/js/install.js b/modules/install/tpl/js/install.js
index d63db0139..dd0b1c84c 100644
--- a/modules/install/tpl/js/install.js
+++ b/modules/install/tpl/js/install.js
@@ -1,4 +1,19 @@
 jQuery(function($){
+// TARGET toggle
+	$(document.body).on('click', '.x [data-toggle]', function(){
+		var $this = $(this);
+		var $target = $($this.attr('data-toggle'));
+		$target.toggle();
+		if($target.is(':visible') && !$target.find('a,input,button,textarea,select').length){
+			$target.attr('tabindex','0').focus();
+		} else if($target.is(':visible') && $target.find('a,input,button,textarea,select').length) {
+			$target.find('a,input,button,textarea,select').eq(0).focus();
+		} else {
+			$this.focus();
+		}
+		return false;
+	});
+
 	// Input Clear
 	var iText = $('.item>.iLabel').next('.iText');
 	$('.item>.iLabel').css('position','absolute');
diff --git a/modules/install/tpl/select_db.html b/modules/install/tpl/select_db.html
index e2b137b39..17bfbe6a1 100644
--- a/modules/install/tpl/select_db.html
+++ b/modules/install/tpl/select_db.html
@@ -1,8 +1,7 @@
-<!--%import("js/install_admin.js")-->
-<!--#include("header.html")-->
+<load target="js/install_admin.js" />
+<include target="header.html" />
 	<div id="body">
-<!--#include("progress_menu.html")-->
-		<span class="dummy"></span>
+		<include target="progress_menu.html" />
 		<div id="content">
 			<form method="post" action="./">
 			<input type="hidden" name="module" value="{$module}" />
@@ -32,4 +31,4 @@
 			</form>
 		</div>
 	</div>
-<!--#include("footer.html")-->
+<include target="footer.html" />