roadblock.html - Android社区 - https://www.androidos.net.cn/

<!DOCTYPE html>
<html i18n-values="dir:textdirection">
<head>
  <meta charset="utf-8">
  <title i18n-content="title"></title>
  <style type="text/css">

  html {
    background-color: rgb(252, 195, 59);
    height: 100%;
  }

  html[dir='rtl'] #twisty-closed {
    -webkit-transform: scaleX(-1);
  }

  body {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
  }

  .box {
    -webkit-box-shadow: 3px 3px 8px #200;
    background-color: white;
    border-radius: 5px;
    color: black;
    font-size: 10pt;
    line-height: 16pt;
    margin: 40px auto auto auto;
    max-width: 800px;
    min-width: 500px;
    padding: 20px;
    position: relative;
    width: 80%;
  }

  .main {
    margin: 1em 80px;
  }

  .more {
    border-top: 1px solid #ccc;
    margin: 0 80px;
    padding-top: 6px;
  }

  .more-info-title {
    margin-left: 5px;
    margin-right: 5px;
  }

  .more-link {
    color: #0000FF;
    cursor: pointer;
    text-decoration: underline;
  }

  #roadblock-icon {
    background-image: url('images/roadblock.png');
    height: 53px;
    position: absolute;
    width: 64px;
  }

  .title {
    color: #660000;
    font-size: 18pt;
    font-weight: bold;
    line-height: 140%;
    margin: 0 77px 6pt;
  }

  .twisty {
    display: inline;
  }
  </style>
  <script src="../../../../ui/webui/resources/js/assert.js"></script>
  <script src="ssl_errors_common.js"></script>
  <script src="roadblock.js"></script>
</head>
<body>
  <div class="box">
    <div class="icon" id="roadblock-icon"></div>
    <div class="title" i18n-content="headLine"></div>
    <div class="main" i18n-values=".innerHTML:description;dir:textdirection"></div>
    <div class="main" i18n-values=".innerHTML:reasonForNotProceeding"></div>
    <div class="main">
      <button i18n-content="proceed" id="proceed-button" hidden></button>
      <button i18n-content="exit" id="exit-button"></button>
    </div>
    <div class="more" id="more-info-short">
      <span class="more-link">
        <img id="twisty-closed" class="twisty" src="twisty_closed.png"
            border="0"><span i18n-content="moreInfoTitle" id="more-info-title"
            class="show-more-info-title"></span>
      </span>
    </div>
    <div class="more" id="more-info-long" hidden>
      <span class="more-link">
        <img class="twisty" src="twisty_open.png" border="0"><span
            i18n-content="moreInfoTitle" class="more-info-title"></span>
      </span>
      <p i18n-values=".innerHTML:moreInfo1"></p>
      <p i18n-values=".innerHTML:moreInfo2"></p>
      <p i18n-values=".innerHTML:moreInfo3"></p>
      <p i18n-values=".innerHTML:moreInfo4"></p>
      <p i18n-values=".innerHTML:moreInfo5"></p>
    </div>
  </div>
</table>
</body>
</html>