1<!DOCTYPE html> 2<html i18n-values="dir:textdirection"> 3<head> 4<title i18n-content="title"></title> 5<style type="text/css"> 6body { 7 background-color:#500; 8 font-family:Helvetica,Arial,sans-serif; 9 margin:0px; 10} 11.background { 12 position:absolute; 13 width:100%; 14 height:100%; 15} 16.cell { 17 padding:40px; 18} 19.box { 20 width:80%; 21 background-color:white; 22 color:black; 23 font-size:10pt; 24 line-height:16pt; 25 text-align:left; 26 padding:20px; 27 position:relative; 28 -webkit-box-shadow:3px 3px 8px #200; 29 border-radius:5px; 30} 31html[dir='rtl'] .box { 32 text-align:right; 33} 34 35.icon { 36 position:absolute; 37} 38.title { 39 margin: 0px 77px 0px; 40 font-size:18pt; 41 line-height: 140%; 42 margin-bottom:6pt; 43 font-weight:bold; 44 color:#660000; 45} 46.main { 47 margin:0px 80px 0px; 48} 49 50.submission { 51 margin:15px 5px 15px 0px; 52 padding:0px; 53} 54input { 55 margin:0px; 56} 57.helpbutton { 58 float:right; 59} 60.example { 61 margin:30px 80px 0px; 62 border-top:1px solid #ccc; 63 padding-top:6px; 64} 65.moreinfotitle { 66 margin-left:5px; 67 margin-right:5px; 68} 69</style> 70 71<script> 72 function $(o) {return document.getElementById(o);} 73 74 function sendCommand(cmd) { 75 window.domAutomationController.setAutomationId(1); 76 window.domAutomationController.send(cmd); 77 } 78 79 function toggleMoreInfo(collapse) { 80 if (collapse) { 81 $("more_info_long").style.display = "none"; 82 $("more_info_short").style.display = "block"; 83 } else { 84 $("more_info_long").style.display = "block"; 85 $("more_info_short").style.display = "none"; 86 } 87 } 88 function setDirectionSensitiveImages() { 89 if (document.documentElement.dir == 'rtl') { 90 $("twisty_closed_rtl").style.display = "inline"; 91 } else { 92 $("twisty_closed").style.display = "inline"; 93 } 94 } 95</script> 96</head> 97<body oncontextmenu="return false;"> 98<script> 99document.addEventListener('DOMContentLoaded', setDirectionSensitiveImages); 100</script> 101<div class="background"><img src="ssl_roadblock_background.png" width="100%" height="100%" alt="background" onmousedown="return false;"></div> 102<table width="100%" cellspacing="0" cellpadding="0"> 103 <td class="cell" valign="middle" align="center"> 104 <div class="box"> 105 <div class="icon"><img src="ssl_roadblock_icon.png" alt="SSL Error Icon" onmousedown="return false;"></div> 106 <div class="title" i18n-content="headLine"></div> 107 <div class="main" i18n-values=".innerHTML:description"></div> 108 <div class="main"> 109 <form class="submission"> 110 <input type="button" i18n-values="value:back" name="back" onClick="sendCommand(0);"> 111 </form> 112 </div> 113 <div class="example" id="more_info_short"> 114 <!-- 115 // The img madness here is due to the inlining of the html file 116 // resources. The script that does this looks for subresources like 117 // images and inlines them, so we need to have references to both the 118 // ltr and rtl versions statically. Just doing 119 // i18n-values="src:path_to_correct_image_set_by_c++" won't work, since 120 // the inlined version will just end up with that path string rather 121 // than the inlined image. 122 --> 123 <a href="#" onclick="toggleMoreInfo(false); return false;" onmousedown="return false;"><img id="twisty_closed" src="twisty_closed.png" border="0" style="display:none"><img id="twisty_closed_rtl" src="twisty_closed_rtl.png" border="0" style="display:none"><span i18n-content="moreInfoTitle" class="moreinfotitle"></span></a> 124 </div> 125 <div class="example" id="more_info_long" style="display:none;"> 126 <a href="#" onclick="toggleMoreInfo(true); return false;" onmousedown="return false;"><img src="twisty_open.png" border="0"><span i18n-content="moreInfoTitle" class="moreinfotitle"></span></a> 127 <p i18n-values=".innerHTML:moreInfo1"></p> 128 <p i18n-values=".innerHTML:moreInfo2"></p> 129 <p i18n-values=".innerHTML:moreInfo3"></p> 130 <p i18n-values=".innerHTML:moreInfo4"></p> 131 <p i18n-values=".innerHTML:moreInfo5"></p> 132 </div> 133 </td> 134</table> 135</body> 136</html> 137
