﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title></title>
<link type="text/css" href="theme/common.css" rel="stylesheet" />
<link type="text/css" href="theme/chosen.css" rel="stylesheet" />
<link href="favicon.ico" rel="shortcut icon" />
<meta name="viewport" initial-scale="1.0" />
<!--[if lt IE 9]>
    <link type="text/css" href="theme/IE678css.css" rel="stylesheet" />
<![endif]-->
<!-- link href="theme/slideshow.css" rel="stylesheet" / -->
<!--[if lt IE 9]>
	   <script type="text/javascript" src="js/lib/html5shiv.js"></script>
	<![endif]-->
</head>
<body>
	<div id='msgOverlay'>
		<div><span  id='msgDiv'></span></div>
	</div>
	<div id="mainBody-fluid">
	    <div id='topStatus' class="row-fluid" style="display:none;">
			<div id='lang'>
            <div id="langLogoBar" class="row-fluid langborder">
                <div class="span5">
                	<img src="img/logo_zte.png" class="paddingleft10" height="48"/>
                    <span class="verticalalign" id="webui_title"></span>
				</div>
                <div id="statusBar" class="span7 side-right margintop8" style="display: none;">
                <span class="statusItem" title="domain" i18n="true" id="pcdomain" data-bind="text: pcdomain"></span>
                    <span class="statusItem" title="network_type" i18n="true" id="networkType" data-bind="text: networkType"></span>
                    <span class="statusItem" title="network_provider" i18n="true" id="operator" data-bind="text: networkOperator"></span>
                    <span class="statusItem" title="ota_title" i18n="true" id="OTA" data-bind="visible:OTAStatus">
                        <a onclick="return showOTAAlert();">
                            <img class="paddingbottom6" src="./img/update.gif"/>
                        </a>
                    </span>
                    <span class="statusItem" title="signal_strength" i18n="true" id="signal_strength"><i class="signal" data-bind="attr:{'class': signalCssClass}">&nbsp;</i></span>
                    <span class="statusItem" title="connection_status" i18n="true" id="connection_status"><i class="icon_connection" data-bind="attr:{'class': connectionCssClass}">&nbsp;</i></span>					
                    <span class="statusItem" title="sms_unread_count" i18n="true" id="sms_unread_count" data-bind="visible: smsUnreadCount() > 0 || showSmsDeleteConfirm()" style="display: none;">
                    	<a onclick="return gotoSmsList();" href="javascript: void(0)">
                    		<img data-bind="visible: smsUnreadCount() > 0 && !showSmsDeleteConfirm()" class="paddingbottom6" src="./img/sms_unread.png"/>
                    		<img data-bind="visible: showSmsDeleteConfirm()" class="paddingbottom6" src="./img/sms_full.gif"/>
                    		<span data-bind="visible: smsUnreadCount() > 0, text: smsUnreadCount" class="smsUnreadCount"></span>
                    	</a>
                    </span>
                    <span class="statusItem" title="sim_status" i18n="true" id="statusItemSimStatus"><img data-bind="attr: {src: simStatus}" class="paddingbottom6"/></span>
                    <span class="statusItem" title="roaming_status" i18n="true" id="roamingStatus" data-bind="visible: roamingStatus() == 'R'" style="display: none;"><img class="paddingbottom6" src="./img/roaming.png"/></span>
                    <span class="statusItem" title="wifi_status" i18n="true" id="wifi_status" data-bind="visible: hasWifi"><img class="paddingbottom6" id="wifi_status_img" data-bind="attr: {src: wifiStatusImg}"/></span>
					<span class="statusItem" title="battery_level" i18n="true" data-bind="visible: hasBattery"><img  class="paddingbottom6" id="batteryCharging" data-bind="attr: {src: batteryPers}"/></span>
				</div>
            </div>
            <div class="row-fluid marginbottom5">
                <div id="themeContainer" class="span12 side-right" >
                    <span id="themeSection" style="display: none;">
						<span class="colorBlock default" data-bind="css: {active: currentTheme() == 'style'}, click: function(data, event) { themeClickHandler(data, event, 'style') }">&nbsp;</span>
						<!-- span class="colorBlock blue" data-bind="css: {active: currentTheme() == 'blue'}, click: function(data, event) { themeClickHandler(data, event, 'blue') }">&nbsp;</span-->
						<span class="colorBlock mac" data-bind="css: {active: currentTheme() == 'mac'}, click: function(data, event) { themeClickHandler(data, event, 'mac') }">&nbsp;</span>
						<link data-bind="attr: {href: themeHref}" rel="stylesheet" id="customTheme" type="text/css"/>
					</span>
                    <select id="language" class="marginright10" data-bind="options: languages, value: currentLan, optionsText: 'text', optionsValue: 'value', event:{ change: langChangeHandler}"></select>
					<span id="logout">
						<a id="logoutlink" class="logout marginright10" trans="logout" href="javascript:void(0)" data-bind="click:logout,visible:showLogout() "></a>
				    </span>
                </div>
            </div>
        </div>
    </div>

    <div id='nav' data-bind="visible:showMenu()"  class="row-fluid">
        <ul id="list-nav" data-bind="foreach: mainMenu" class="span12">
            <li data-bind='attr: {mid: hash.substring(1)}'>
            	<a data-bind='attr: {href: hash, trans: hash.substring(1)}'></a>
            </li>
        </ul>

    </div>
    <div  class="row-fluid" style="display: none;" id="navMenuImg">
        <ul id="list-nav_img" class="span12">
            <li>
                <a href="#home"><img src="img/HomeImgBtn_enable.png" width="70" id="HomeImgBtn" sel="selected"/></a>
            </li>
            <li>
                <a href="#status"><img src="img/InfoImgBtn_enable.png" width="70" id="InfoImgBtn"/></a>
            </li>
            <li>
                <a href="#sd"><img src="img/TcardImgBtn_enable.png" width="70" id="TcardImgBtn"/></a>
            </li>
            <li>
                <a href="#sms"><img src="img/SmsImgBtn_enable.png" width="70" id="SmsImgBtn"/></a>
            </li>
            <li>
                <a href="#phonebook"><img src="img/PBMImgBtn_enable.png" width="70" id="PBMImgBtn"/></a>
            </li>
            <li>
                <a href="#setting" ><img src="img/SettingImgBtn_enable.png" width="70" id="SettingImgBtn"/></a>
            </li>
        </ul>
     </div>
    <div class="row-fluid">
        <div id="mainContainer" class="row-fluid">
            <div id='left' class="span3" data-bind='visible: secondMenu().length > 0'>
                <ul id="leftmenu" data-bind="foreach: {data: secondMenu }">
                    <li data-bind="visible: false, text: $root.getThirdMenu($data)"></li>
                    <li data-bind="attr: {'class': 'menu-two-level ' + hash.substring(1) }">
                    	<a data-bind='attr: {href: hash, trans: hash.substring(1)}'></a>
                    </li>
                    <li data-bind='visible: $root.thirdMenu().length > 0' class="hide">
                        <ul class="third" data-bind="foreach: $root.thirdMenu()">
                            <li data-bind="attr: {'class': 'menu-three-level ' + hash.substring(1) }">
                            	<a data-bind='attr: {href: hash, trans: hash.substring(1)}'></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id='container' class="span9 paddingnone"></div>
        </div>
    </div>
</div>
<div id='loading'>
    <div class='header'><span id="loadMsg"></span></div>
    <br/>

    <div style='text-align: center'>
        <img id="loadingImg"/>
        <div id="loading_container"></div>
    </div>
</div>

<div id='progress'>
    <div class='header'><span id="barMsg"></span></div>
     <br/>
     <div class="progress-content">
         <div class="progress-bar-container">
             <div id="bar" class="progress-bar"></div>
             <div id="barValue" class="progress-bar-value"></div>
         </div>
         <div id="progress_container" class="progress-prompt"></div>
     </div>
 </div>
<!-- confirm content -->
<div id='confirm'>
    <div class='header'><span id="popTitle"></span></div>
    <div class='icon'><img id='confirmImg'/></div>
    <div class='message'></div>
    <div class='promptDiv hide'><input name="promptInput" id="promptInput" type="text" maxlength="25" class="width190"/><br/>
        <label class="promptErrorLabel colorRed"></label></div>
    <div class='buttons'>
        <input type="button" class="btn-1 simplemodal-close" id='okbtn' trans='ok'/>
        <input type="button" class="btn-1 " id='yesbtn' trans='yes'/>
        <input type="button" class="btn-1 simplemodal-close" id='nobtn' trans='no'/>
    </div>
</div>
<div id="buttom-bubble">
</div>
<script type="text/x-jquery-tmpl" id="newMessagePopTmpl">
    <div class="bubbleItem ${report}" id="${mark}">
        <h3>
			<span trans="${titleTrans}">${title}</span> ${name} <a href="javascript:void(0);" data-targetid="${mark}" class="bubbleCloseBtn"></a>
		</h3>
        <div class="bubbleContainer">
            <div class="bubbleContent">${content}</div>
            <div class="bubbleDatetime">${datetime}</div>
        </div>
    </div>
</script>
<script type="text/javascript" data-main="js/main" src="js/lib/require/require-jquery.js"></script>
</body>
</html>