<!DOCTYPE html>
<html id="template_root" i18n-values="dir:textdirection">
<head>
<title i18n-content="title">
</title>
<style>
html {
height: 100%;
}
body {
color: #000;
font-family: arial, sans-serif;
background-image: -webkit-linear-gradient(white 50%, rgb(236, 244, 255));
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
visibility: hidden;
-webkit-user-select: none;
}
.upper {
position: relative;
width: 100%;
-webkit-box-flex: 0.8;
}
#lower {
position: relative;
margin-top: 0;
width: 100%;
-webkit-box-flex: 1;
background-image: -webkit-gradient(radial, 50% -20%, 700, 50% -70%, 0, from(#FFF), color-stop(.7, #EEE), to(#EEE));
}
.icon {
float: left;
margin: 15px;
overflow: visible;
}
.h3 {
float: left;
height: 10%;
width: 80%;
font-family: Sans-serif;
font-size: 120%;
font-weight: bold;
padding: 3px;
}
.message {
float: left;
margin-top: 10px;
}
.link {
float: left;
clear: both;
padding: 3px;
font-weight: bold;
}
.offline_message {
position: absolute;
width: 600px;
height: 49%;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -20%;
}
.activation_message {
position: absolute;
width: 500px;
top: 0;
margin-top: 0;
left: 50%;
margin-left: -250px;
min-height: 380px;
}
#carrierPage {
padding-top: 10px;
width: 500px;
height: 380px;
overflow-x: none;
overflow-y: none;
}
.hidden {
display: none;
}
.splitter {
border-top: 1px solid #DDD;
height: 1px;
}
</style>
<script src="shared/js/local_strings.js"></script>
<script>
var localStrings = new LocalStrings();
function sendCommand(cmd) {
window.domAutomationController.setAutomationId(1);
window.domAutomationController.send(cmd);
}
// Show the offline page.
function showPage() {
document.body.style.visibility = 'visible';
}
document.addEventListener('DOMContentLoaded', function() {
var time_to_wait = localStrings.getString('time_to_wait');
var show_activation = localStrings.getString('show_activation') == 'true';
window.setTimeout(showPage, time_to_wait);
var lower = document.getElementById('lower');
if (show_activation)
lower.style.display = 'block';
});
</script>
<body oncontextmenu="return false;">
<div class="upper" i18n-values=".title:url">
<div class="offline_message">
<div class="icon" i18n-values=".src:icon;.style.display:display_icon"></div>
<h3 i18n-content="heading"></h3>
<div class="message" i18n-values=".innerHTML:msg"></div>
<div class="link"><a href="chrome://settings/internet"
onclick="sendCommand('proceed')"
i18n-content="try_loading"></a>
</div>
<div class="link"><a href="chrome://settings/internet"
onclick="sendCommand('open_network_settings')"
i18n-content="network_settings"></a>
</div>
</div>
</div>
<div id="lower" class="hidden">
<div class="activation_message">
<div class="splitter"></div>
<iframe src="chrome-extension://iadeocfgjdjdmpenejdbfeaocpbikmab/activation_in_offline.html"
id="carrierPage" frameborder="0"></iframe>
</div>
</div>
</body>
</html>