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 |