<!DOCTYPE html>
<html class="app bg-black" style="background-image: none;">
<head>
  <meta charset="utf-8" />
  <title>{if isset($title)}{$title} | {/if}{$domain}</title>
  <meta name="keywords" content="{if isset($meta_keywords)}{$meta_keywords}{else}{$lang.page_keywords}{/if}" />
  <meta name="description" content="{if isset($meta_description)}{$meta_description}{else}{$lang.page_title}{/if}" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="/mbthemes/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="/mbthemes/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="/mbthemes/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="/mbthemes/css/icon.css" type="text/css" />
  <link rel="stylesheet" href="/mbthemes/css/font.css" type="text/css" />
  <link rel="stylesheet" href="/mbthemes/css/app.css" type="text/css" />
  <link rel="Shortcut icon" href="{$data_server}favicon.ico" />
  {include file="$template_path/html/jstemplate.html"}
  {literal}
  <style>
    .bg-bubbles {
      position: absolute;
      top: 0;
      left: 0;
      bottom:0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .bg-bubbles li {
      position: absolute;
      list-style: none;
      display: block;
      border-radius: 50%;
      width: 6px;
      height: 6px;
      background-color: rgba(255, 255, 255, 0.15);
      bottom: -50px;
      -webkit-animation: square 8s infinite;
      animation: square 25s infinite;
      -webkit-transition-timing-function: linear;
      transition-timing-function: linear;
    }
    .bg-bubbles li:nth-child(1) {
      left: 10%;
    }
    .bg-bubbles li:nth-child(2) {
      left: 20%;
      width: 8px;
      height: 8px;
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
      -webkit-animation-duration: 17s;
      animation-duration: 17s;
    }
    .bg-bubbles li:nth-child(3) {
      left: 25%;
      -webkit-animation-delay: 4s;
      animation-delay: 4s;
    }
    .bg-bubbles li:nth-child(4) {
      left: 40%;
      width: 4px;
      height: 4px;
      -webkit-animation-duration: 22s;
      animation-duration: 22s;
      background-color: rgba(255, 255, 255, 0.1);
    }
    .bg-bubbles li:nth-child(5) {
      left: 70%;
    }
    .bg-bubbles li:nth-child(6) {
      left: 80%;
      width: 2px;
      height: 2px;
      -webkit-animation-delay: 3s;
      animation-delay: 1s;
      background-color: rgba(255, 255, 255, 0.2);
    }
    .bg-bubbles li:nth-child(14) {
      left: 60%;
      width: 2px;
      height: 2px;
      -webkit-animation-delay: 5s;
      animation-delay: 8s;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .bg-bubbles li:nth-child(7) {
      left: 32%;
      width: 5px;
      height: 5px;
      -webkit-animation-delay: 7s;
      animation-delay: 7s;
    }
    .bg-bubbles li:nth-child(8) {
      left: 55%;
      width: 7px;
      height: 7px;
      -webkit-animation-delay: 15s;
      animation-delay: 15s;
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
    }
    .bg-bubbles li:nth-child(13) {
      left: 40%;
      width: 2px;
      height: 2px;
      -webkit-animation-delay: 12s;
      animation-delay: 12s;
      -webkit-animation-duration: 3s;
      animation-duration: 15s;
      background-color: rgba(255, 255, 255, 0.6);
    }

    .bg-bubbles li:nth-child(15) {
      left: 10%;
      width: 1px;
      height: 1px;
      -webkit-animation-delay: 12s;
      animation-delay: 12s;
      -webkit-animation-duration: 6s;
      animation-duration: 5s;
      background-color: rgba(255, 255, 255, 0.7);
    }
    .bg-bubbles li:nth-child(9) {
      left: 25%;
      width: 10px;
      height: 10px;
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
      -webkit-animation-duration: 40s;
      animation-duration: 40s;
      background-color: rgba(255, 255, 255, 0.15);
    }
    .bg-bubbles li:nth-child(10) {
      left: 90%;
      width: 5px;
      height: 5px;
      -webkit-animation-delay: 11s;
      animation-delay: 11s;
    }
    .bg-bubbles li:nth-child(11) {
      left: 95%;
      width: 5px;
      height: 5px;
      -webkit-animation-delay: 7s;
      animation-delay: 7s;
    }
    .bg-bubbles li:nth-child(12) {
      left: 98%;
      width: 1px;
      height: 1px;
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
      -webkit-animation-duration: 30s;
      animation-duration: 30s;
      background-color: rgba(255, 255, 255, 0.5);
    }
    @-webkit-keyframes square {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-1200px) rotate(600deg);
        transform: translateY(-1200px) rotate(600deg);
      }
    }
    @keyframes square {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-700px) rotate(600deg);
        transform: translateY(-700px) rotate(600deg);
      }
    }
  </style>
  {/literal}

</head>
<body>
<div class="login-bg"></div>
<div class="login-covers block"></div>
<ul class="bg-bubbles hidden-xs">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<section id="content" class="m-t-lg p-t-sm animated fadeInUp bg-black no-bgc">

  <div class="container aside-xl text-center text-warning">
    <span class="text-info-lt">{$errorMessage}</span>
  </div>

  {if $res_data.show_status == 1}
  <div class="container aside-xxl m-t-lg text-center m-xs-t-none p-t-lg p-xs-t-none">
    <a class="text-center block" href="/index.php/" title="返回首页">
      <img src="/mbthemes/images/logo.png" alt="返回首页">
    </a>

    <section class="m-b-lg">
      <header class="wrapper text-white-only h1 m-t-lg h2-xs">
        验证邮箱完成注册！
      </header>
      <p class="text-white h5 m-t-sm m-b-lg p-b-md">系统给您发送了一封验证邮件，马上通过验证享受更多精彩服务。</p>
      <div class="form-group text-left iptbg none">
        <input class="formipt form-control" id="usermail" name="usermail" autocomplete="off" />
        <span class="errtxt"></span>
      </div>
      <div class="clearfix">
        <a href="{$smarty.session.THE_USER_RES_SEND_MAIL_4_M_MAIL}" id="gotomail" class="maillink btn btn-danger btn-xs-xs btn-rounded" target="_blank" title="马上登录邮箱">马上登录邮箱</a>
        <a href="javascript:void(0)" id="resendbtn" class="maillink btn btn-purple btn-rounded btn-xs-xs m-l-sm" title="重新发送">重新发送</a>
        <a href="javascript:void(0)" id="setmailbtn" class="maillink btn btn-info btn-rounded btn-xs-xs m-l-sm" title="重设邮箱">重设邮箱</a>
      </div>

    </section>
  </div>
  <script type="text/javascript">
    {literal}
    seajs.use(["jq", "modules/mails"], function($, mails){
      mails.btninit({
        resetbtn: $("#resendbtn"),
        setmailbtn: $("#setmailbtn"),
        mailipt: $("#usermail"),
        maillink: $("#gotomail"),
        purl: "{/literal}/{$languageURL}{literal}apps/users/ajax/api.php",
        uid: "{/literal}{$smarty.session.THE_USER_RES_SEND_MAIL_4_M}{literal}"
      });
    });
    {/literal}
  </script>
  {/if}
  {if $res_data.show_status == 0}
  <div class="container aside-xl m-t-lg m-xs-t-none p-t-lg p-xs-t-none">
    <a class="text-center block" href="/index.php/" title="返回首页">
      <img src="/mbthemes/images/logo.png" alt="返回首页">
    </a>
    <section class="m-b-lg">
      <header class="wrapper text-center text-light-i">
        登录获得更好的体验
      </header>
      <form action="" method="post" id="signin-form" class="listform" autocomplete="off">
        <div class="list-group">
          <div class="list-group-item regitem">
            <div class="iptbg"><input type="text" tabindex="1" class="form-control no-border" name="username" id="username" data-type="用户名" autocomplete="off" placeholder="用户名"></div>
            <span class="errtxt"></span>
            <span class="suctxt"></span>
          </div>
          <div class="list-group-item regitem">
            <div class="iptbg"><input type="password" tabindex="2" class="form-control no-border" name="password" id="password" data-type="密码" autocomplete="off" placeholder="******"></div>
            <span class="errtxt"></span>
            <span class="suctxt"></span>
          </div>


          <div class="list-group-item regitem formitem">

            <div class="row">
              <div class="col-xs-5 col-md-4 iptbg2">
                <input id="yzm" type="text" tabindex="3" maxlength="4" class="formipt form-control no-border" name="verify" id="verify" data-type="验证码" autocomplete="off" placeholder="输入验证码">
              </div>
              <img class="yzmimg img-responsive col-xs-4 col-md-5" alt="刷新验证码" src="/{$languageURL}verify" id="verify_pic" />
              <div class="col-xs-3">
                <a class="block yzmfrush m-t-sm text-black-i" title="刷新验证码" id="verify_btn" style="cursor:pointer;">刷新</a>
              </div>
              <span class="col-xs-12 errtxt"></span>
              <span class="col-xs-12 suctxt"></span>
            </div>
          </div>


        </div>
        <span class="ipttxt">&nbsp;</span>
        <a title="登录" class="regsubmit btn btn-lg btn-info btn-block submit" id="loginbtn">
          登录
          <input type="hidden" name="login" value="yes" />
        </a>
        <div class="text-center m-t m-b"><a class="text-grays" href="/{$languageURL}reset_password/"><small>忘记密码?</small></a></div>
        <div class="line line-dashed"></div>
        <a href="/{$languageURL}sign_up/" class="btn btn-lg btn-default btn-block">注册账号</a>
      </form>
    </section>
  </div>
  {/if}
  {literal}
  <style>
    .regitem span { padding-left:12px; padding-right:12px; font-size:12px; color:#FF0004; display:block; }
  </style>
  {/literal}
  <script type="text/javascript">
    {literal}
    seajs.use(["jq", "datavalid"], function($, dvo){
      dvo.loginInit($("#signin-form"));
      dvo.placeholder($("#signin-form"));
      dvo.yzminit($("#verify_pic"), [$("#verify_pic"), $("#verify_btn")]);
    });
    {/literal}
  </script>

</section>
</body>
</html>