| <!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%; |
| } |
| |
| .icon { |
| position:absolute; |
| } |
| |
| .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; |
| } |
| |
| html[dir='rtl'] .test-image { |
| float: left; |
| } |
| |
| .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"> |
| <img src="roadblock_icon.png" alt="SSL Error 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> |
