master

分支 (1)

管理

管理

master

PassWord4Chrome
/
optionsE.html

<!doctype html>
<html>

<head>
  <meta name="2PassWord" content="" charset="utf-8">
  <title>2PassWord Settings</title>
  <link rel="stylesheet" type="text/css" href="./css/newvaultGlobal.css">
  <link rel="stylesheet" type="text/css" href="./css/buttons.css">
  <link rel="stylesheet" type="text/css" href="./css/dialog.css">
  <link rel="stylesheet" type="text/css" href="css/loading.css">
  <script src="./js/optionsE.js"></script>
  <style>
    #saveButton {
      outline: none;
      border: none;
    }

    button {
      outline: none;
    }

    #loginDialog {
      max-width: 660px;
      background-color: transparent;
      box-shadow: none;
    }

    #loginDialog .dialogHeader.icon.leftIcon>.dialogHeaderInner {
      background-position: center center;
    }

    #loginDialog label {
      color: white;
      font-size: 13px;
      font-weight: 300;
    }

    .dialogContent {
      overflow: hidden;
    }

    .dialogHeader {
      background-color: transparent;
    }

    #loginDialog .dialogInput {
      border-radius: 4px;
      height: 50px;
      padding: 0 10px;
      border-width: 3px;
      border-color: white;
    }

    .centerButtons {
      margin-top: 16px;
    }

    .nbtn {
      font-size: 18px;
      margin-top: 20px;
    }

    .login-background {
      background-image: url(./images/login-background.jpg);
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: #28353E;
      box-shadow: inset 0 -36px 15px -10px #28353E;
    }

    #tip {
      color: transparent;
    }

    #_tip {
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
      transition: .5s all;
      /* transform: translate3d(-50%, 60px, 0); */
    }

    #_tip.show {
      transform: translate3d(-50%, 80px, 0);
    }

    .tip-content {
      color: #fff;
      background: #d32d27;
      padding: 8px 60px;
      font-size: 13px;
      border-radius: 4px;
    }

    .hide {
      display: none;
    }

    #dataBaseURLP {
      color: #ddd;
      text-align: center;
    }

    .detailSetting {
      -webkit-user-select: none;
      margin-top: 45px;
    }

    #setting .buttons {
      padding: 10px 16px 0 0;
      text-align: initial;
    }

    #setting #setLockKey {
      float: right;
    }

    #setting .detailSetting label {
      width: 100%;
      font-size: 15px;
      line-height: 20px;
    }

    .detailSetting .row {
      margin: 16px 0;
    }

    input[type='radio']+label,
    input[type='checkbox']+label {
      cursor: pointer;
      display: inline-block;
      position: relative;
      padding-left: 25px;
      margin-right: 10px;
      color: #0b4c6a;
    }

    input[type='radio'],
    input[type='checkbox'] {
      display: none;
      cursor: pointer;
    }

    input[type='radio']+label:before,
    input[type='radio']+label:after,
    input[type='checkbox']+label:before,
    input[type='checkbox']+label:after {
      content: '';
      font-family: helvetica;
      display: inline-block;
      width: 20px;
      height: 20px;
      left: 0;
      bottom: 0;
      text-align: center;
      position: absolute;
    }

    input[type='radio']+label:before,
    input[type='checkbox']+label:before {
      background-color: #fafafa;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }

    input[type='radio']+label:after,
    input[type='checkbox']+label:after {
      color: #fff;
    }

    input[type='radio']:checked+label:before,
    input[type='checkbox']:checked+label:before {
      -moz-box-shadow: inset 0 0 0 10px #d32d27;
      -webkit-box-shadow: inset 0 0 0 10px #d32d27;
      box-shadow: inset 0 0 0 10px #d32d27;
    }

    input[type='checkbox']+label:before {
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
    }

    input[type='radio']+label:before {
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
    }

    input[type='checkbox']+label:hover:after,
    input[type='checkbox']:checked+label:after {
      content: "\2713";
      line-height: 20px;
      font-size: 14px;
    }

    input[type='checkbox']+label:hover:after {
      color: #c7c7c7;
    }

    input[type='checkbox']:checked+label:after,
    input[type='checkbox']:checked+label:hover:after {
      color: #fff;
    }
  </style>
</head>

<body class="tab login-background dialogState">
  <div class="dialog" role="dialog" aria-labelledby="loginDialogTitle" id="loginDialog" style="display: block; height: 360px;">
    <div class="dialogHeader icon leftIcon">
      <div class="dialogHeaderInner"><span class="dialogHeaderTitle" id="loginDialogTitle"></span></div>
    </div>
    <form class="dialogContent dialogContentFixed hide" action="#" style="top: 70px;">
      <div>
        <div id="databaseArea">
          <label class="label first">数据储存地址</label>
          <input class="dialogInput" id="dataBaseURL" type="text" placeholder="" autocomplete="true">
		  <label class="label first">访问令牌（可选）</label>
		  <input class="dialogInput" id="dataBaseTOKEN" type="text" autocomplete="true">
        </div>
        <div id="passwordArea" style="display: none;">
          <label class="label first">主密码</label>
          <input class="dialogInput" id="savePassword" type="password">
        </div>
        <div class="buttons centerButtons">
          <p id="tip">说明</p>
          <button id="saveButton" class="nbtn rbtn" action="next" type="submit">下一步</button >
        </div>
      </div>
    </form>
    <div id="setting" class="dialogContent dialogContentFixed hide" style="top: 70px;">

      <div id="databaseArea">
          <label class="label first" style="text-align: center">数据储存地址：</label>
            <p id="dataBaseURLP"></p>
        </div>
        <div class="buttons centerButtons">
           <button id="clearSetting" class="nbtn rbtn">清空设置</button >
           <button id="setLockKey" class="nbtn rbtn">设置保护密码</button >
        </div>
       <div class="detailSetting">
         <div class="row">
          <input id="check-1" type="checkbox" name="clearKeyOnlaunch">
          <label for="check-1">每次使用浏览器都要求输入主密码</label>
         </div>
      </div>
    </div>
  </div>
  <div id="_tip">
    <div class="tip-box">
      <div class="tip-content"></div>
    </div>
  </div>
  <div id="_loading" style="display:none;">
    <div class="loading-mask"></div>
    <div class="loading-box">
      <div class="loading-content animate-spin"></div>
      <div class="loading-content-outer animate-spin-outer"></div>
      <div class="text">
        加载中
      </div>
      <div class="loading-bg"></div>
    </div>
  </div>
</body>
</html>