| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html id="template_root" i18n-values="dir:textdirection"> | 2 <html id="template_root" i18n-values="dir:textdirection"> |
| 3 <head> | 3 <head> |
| 4 <title i18n-content="title"> | 4 <title i18n-content="title"> |
| 5 </title> | 5 </title> |
| 6 <style> | 6 <style> |
| 7 html { | 7 html { |
| 8 height: 100%; | 8 height: 100%; |
| 9 } | 9 } |
| 10 body { | 10 body { |
| 11 border: green 1px solid; | |
| 12 color: #000; | 11 color: #000; |
| 13 font-family: Helvetica, Arial, sans-serif; | 12 font-family: arial, sans-serif; |
| 14 background-image: -webkit-linear-gradient(white 50%, rgb(236, 244, 255)); | 13 background-image: -webkit-linear-gradient(white 50%, rgb(236, 244, 255)); |
| 14 width: 100%; |
| 15 height: 100%; | 15 height: 100%; |
| 16 padding: 0; | 16 padding: 0; |
| 17 margin: 0; | 17 margin: 0; |
| 18 display: -webkit-box; | 18 display: -webkit-box; |
| 19 -webkit-box-orient: vertical; | 19 -webkit-box-orient: vertical; |
| 20 -webkit-box-pack: center; | 20 -webkit-box-align: stretch; |
| 21 -webkit-box-align: center; | 21 visibility: hidden; |
| 22 -webkit-user-select: none; |
| 22 } | 23 } |
| 23 | 24 |
| 24 .upper { | 25 .upper { |
| 25 width: 60%; | 26 position: relative; |
| 26 height: 50%; | 27 width: 100%; |
| 28 -webkit-box-flex: 0.8; |
| 27 } | 29 } |
| 28 | 30 |
| 29 .upper_main { | 31 #lower { |
| 30 position: relative; | 32 position: relative; |
| 33 margin-top: 0; |
| 31 width: 100%; | 34 width: 100%; |
| 32 bottom: -35%; | 35 -webkit-box-flex: 1; |
| 33 } | 36 background-image: -webkit-gradient(radial, 50% -20%, 700, 50% -70%, 0, from(#F
FF), color-stop(.7, #EEE), to(#EEE)); |
| 34 | |
| 35 .lower { | |
| 36 height: 50%; | |
| 37 width: 100%; | |
| 38 display: -webkit-box; | |
| 39 -webkit-box-pack: center; | |
| 40 -webkit-box-orient: horizontal; | |
| 41 } | |
| 42 | |
| 43 .lower_left { | |
| 44 height: 100%; | |
| 45 width: 24%; | |
| 46 background-image: -webkit-linear-gradient(-100deg, rgb(230, 230, 230), rgb(23
0, 230, 230) 3px, rgb(240, 240, 240) 3px, rgba(240, 240, 240, 0) 20%); | |
| 47 } | |
| 48 | |
| 49 .lower_right { | |
| 50 height: 100%; | |
| 51 width: 24%; | |
| 52 background-image: -webkit-linear-gradient(-80deg, rgb(230, 230, 230), rgb(230
, 230, 230) 3px, rgb(240, 240, 240) 3px, rgba(240, 240, 240, 0) 20%); | |
| 53 } | |
| 54 | |
| 55 .lower_main { | |
| 56 position: relative; | |
| 57 height: 100%; | |
| 58 width: 50%; | |
| 59 padding-top: 20px; | |
| 60 background-image: -webkit-linear-gradient(rgb(230, 230, 230), rgb(230, 230, 2
30) 3px, rgb(240, 240, 240) 3px, rgba(240, 240, 240, 0) 20%); | |
| 61 } | 37 } |
| 62 | 38 |
| 63 .icon { | 39 .icon { |
| 64 float: left; | 40 float: left; |
| 65 margin: 15px; | 41 margin: 15px; |
| 66 overflow: visible; | 42 overflow: visible; |
| 67 } | 43 } |
| 68 | 44 |
| 69 .title { | 45 .h3 { |
| 70 float: left; | 46 float: left; |
| 71 height: 10%; | 47 height: 10%; |
| 72 width: 80%; | 48 width: 80%; |
| 73 font-family: Sans-serif; | 49 font-family: Sans-serif; |
| 74 font-size: 120%; | 50 font-size: 120%; |
| 75 font-weight: bold; | 51 font-weight: bold; |
| 76 padding: 3px; | 52 padding: 3px; |
| 77 } | 53 } |
| 78 | 54 |
| 79 .message { | 55 .message { |
| 80 float: left; | 56 float: left; |
| 81 margin-top: 10px; | 57 margin-top: 10px; |
| 82 } | 58 } |
| 83 | 59 |
| 84 .link { | 60 .link { |
| 85 float: left; | 61 float: left; |
| 86 clear: both; | 62 clear: both; |
| 87 padding: 3px; | 63 padding: 3px; |
| 64 font-weight: bold; |
| 88 } | 65 } |
| 89 | 66 |
| 90 .activation_button { | 67 .offline_message { |
| 91 float: left; | 68 position: absolute; |
| 92 clear both; | 69 width: 600px; |
| 70 height: 49%; |
| 71 top: 50%; |
| 72 left: 50%; |
| 73 margin-left: -300px; |
| 74 margin-top: -20%; |
| 93 } | 75 } |
| 94 | 76 |
| 77 .activation_message { |
| 78 position: absolute; |
| 79 width: 500px; |
| 80 top: 0; |
| 81 margin-top: 0; |
| 82 left: 50%; |
| 83 margin-left: -250px; |
| 84 min-height: 380px; |
| 85 } |
| 86 |
| 87 #carrierPage { |
| 88 padding-top: 10px; |
| 89 width: 500px; |
| 90 height: 380px; |
| 91 overflow-x: none; |
| 92 overflow-y: none; |
| 93 } |
| 94 |
| 95 .hidden { |
| 96 display: none; |
| 97 } |
| 98 |
| 99 .splitter { |
| 100 border-top: 1px solid #DDD; |
| 101 height: 1px; |
| 102 } |
| 95 </style> | 103 </style> |
| 104 <script src="shared/js/local_strings.js"></script> |
| 105 |
| 96 <script> | 106 <script> |
| 107 var localStrings = new LocalStrings(); |
| 108 |
| 97 function sendCommand(cmd) { | 109 function sendCommand(cmd) { |
| 98 window.domAutomationController.setAutomationId(1); | 110 window.domAutomationController.setAutomationId(1); |
| 99 window.domAutomationController.send(cmd); | 111 window.domAutomationController.send(cmd); |
| 100 } | 112 } |
| 113 |
| 101 // Show the offline page. | 114 // Show the offline page. |
| 102 function showPage() { | 115 function showPage() { |
| 103 document.body.style.visibility = 'visible'; | 116 document.body.style.visibility = 'visible'; |
| 104 } | 117 } |
| 105 // Start the timer to show the page. | 118 |
| 106 function startTimer(time) { | 119 document.addEventListener('DOMContentLoaded', function() { |
| 107 // wait 2.5 seconds before showing 'load now', 'go back' button. | 120 var time_to_wait = localStrings.getString('time_to_wait'); |
| 108 setTimeout('showPage()', time); | 121 var show_activation = localStrings.getString('show_activation') == 'true'; |
| 109 } | 122 window.setTimeout(showPage, time_to_wait); |
| 123 var lower = document.getElementById('lower'); |
| 124 if (show_activation) |
| 125 lower.style.display = 'block'; |
| 126 }); |
| 110 </script> | 127 </script> |
| 111 | 128 |
| 112 <body oncontextmenu="return false;"> | 129 <body oncontextmenu="return false;"> |
| 113 <div class="upper" i18n-values=".title:url"> | 130 <div class="upper" i18n-values=".title:url"> |
| 114 <div class="upper_main"> | 131 <div class="offline_message"> |
| 115 <div class="icon" i18n-values=".src:icon;.style.display:display_icon"></di
v> | 132 <div class="icon" i18n-values=".src:icon;.style.display:display_icon"></di
v> |
| 116 <div class="title" i18n-content="heading"> </div> | 133 <h3 i18n-content="heading"></h3> |
| 117 <div class="message" i18n-values=".innerHTML:msg"> </div> | 134 <div class="message" i18n-values=".innerHTML:msg"></div> |
| 118 <div class="link"><a href="chrome://settings/internet" | 135 <div class="link"><a href="chrome://settings/internet" |
| 119 onclick="sendCommand('proceed')" | 136 onclick="sendCommand('proceed')" |
| 120 i18n-content="try_loading"> | 137 i18n-content="try_loading"></a> |
| 121 </a> </div> | 138 </div> |
| 122 <div class="link"> | 139 <div class="link"><a href="chrome://settings/internet" |
| 123 <a href="chrome://settings/internet" | 140 onclick="sendCommand('open_network_settings')" |
| 124 onclick="sendCommand('open_network_settings')" | 141 i18n-content="network_settings"></a> |
| 125 i18n-content="network_settings"> | |
| 126 </a> | |
| 127 </div> | 142 </div> |
| 128 </div> | 143 </div> |
| 129 </div> | 144 </div> |
| 130 <div class="lower" i18n-values=".style.display:display_activation"> | 145 <div id="lower" class="hidden"> |
| 131 <div class="lower_left"> </div> | 146 <div class="activation_message"> |
| 132 <div class="lower_main"> | 147 <iframe src="chrome-extension://iadeocfgjdjdmpenejdbfeaocpbikmab/activatio
n_in_offline.tml" |
| 133 <img class="icon" src="activate_broadband_info.png"></img> | 148 id="carrierPage" frameborder="0"></iframe> |
| 134 <div class="title" i18n-content="activation_heading"></div> | 149 <div class="splitter"> </div> |
| 135 <div class="message" i18n-content="activation_msg"></div> | 150 <iframe src="http://www/~oshima/activation/activation.html" |
| 136 <button class="activation_button" i18n-content="activation_button" | 151 id="carrierPage" frameborder="0"></iframe> |
| 137 onclick="sendCommand('open_activate_broadband')"> | |
| 138 </button> | |
| 139 </div> | 152 </div> |
| 140 <div class="lower_right"> </div> | |
| 141 </div> | 153 </div> |
| 142 </body> | 154 </body> |
| 143 </html> | 155 </html> |
| OLD | NEW |