Skip to content

Instantly share code, notes, and snippets.

@dstaley
Created December 1, 2014 21:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dstaley/1dc68557cd1b3e55d4c7 to your computer and use it in GitHub Desktop.
Save dstaley/1dc68557cd1b3e55d4c7 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
body {
background-color: #CE3426;
color: white;
font-family: sans-serif;
line-height: 25px;
}
.content {
width: 600px;
margin: 0 auto;
padding-top: 60px;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
a, a:visited {
color: white;
}
.info a {
padding: 10px 10px 10px 0;
}
.info a.button {
padding-left: 10px;
text-decoration: none;
border: 1px solid white;
border-radius: 3px;
}
button.info {
padding: 10px;
border: 1px solid white;
border-radius: 3px;
background: none;
color: white;
font-size: 16px;
cursor: pointer;
cursor: hand;
}
button.info:disabled {
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
cursor: hand;
}
a.button.disabled {
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.3);
}
.icon {
font-size: 76px;
}
#details {
margin-top: 80px;
display: none;
}
</style>
</head>
<body>
<div class="content">
<div class="symbol"><img src="http://i.imgur.com/cmRiVkj.png" /></div>
<h1>Your browser is out of date.</h1>
<p>The version of Internet Explorer you are using is <strong>out of date</strong>. It has known <strong>security flaws</strong> and <strong>is not supported by Daily Report</strong>. Beginning January 1, 2015, your web browser will no longer be allowed to access The Daily Report unless you upgrade. If you would like to see alternatives to Internet Explorer, you may do so <a href="http://browsehappy.com">here</a>.</p>
<p class="info"><a href="#" class="pull-left" id="show-details">Details</a>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" class="button pull-right">Upgrade Internet Explorer</a></p>
<div id="details">
<p>Daily Report was designed to work on modern web browsers. You're seeing this message because you're running <!--[if IE 6]>Internet Explorer 6 (released over 13 years ago)<![endif]--><!--[if IE 7]>Internet Explorer 7 (released over 8 years ago)<![endif]--><!--[if IE 8]>Internet Explorer 8 (released over 5 years ago)<![endif]--><!--[if IE 9]>Internet Explorer 9 (released over 3 years ago)<![endif]-->, which doesn't support the functionality necessary for Daily Report.</p>
<p><input type="checkbox" id="i-understand" /> I understand that my version of Internet Explorer is out of date and that my computer is vulnerable to viruses and malware.</p>
<button id="i-understand-button" class="info" disabled>Continue to Daily Report</button>
</div>
</div>
<script id="jsbin-javascript">
$('#show-details').on('click', function(){
if ($('#details').is(":visible")) {
$('#show-details').text('Details');
$('#details').hide();
} else {
$('#show-details').text('Hide details');
$('#details').show();
}
});
$('#i-understand').change(function(){
$('#i-understand-button').prop('disabled',!$('#i-understand-button').prop('disabled'));
});
$('#i-understand-button').on('click', function(){
if (!$('#i-understand-button').prop('disabled')) {
document.location = 'http://google.com';
} else {
return false;
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="content">
<div class="symbol"><img src="http://i.imgur.com/cmRiVkj.png" /></div>
<h1>Your browser is out of date.</h1>
<p>The version of Internet Explorer you are using is <strong>out of date</strong>. It has known <strong>security flaws</strong> and <strong>is not supported by Daily Report</strong>. Beginning January 1, 2015, your web browser will no longer be allowed to access The Daily Report unless you upgrade. If you would like to see alternatives to Internet Explorer, you may do so <a href="http://browsehappy.com">here</a>.</p>
<p class="info"><a href="#" class="pull-left" id="show-details">Details</a>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" class="button pull-right">Upgrade Internet Explorer</a></p>
<div id="details">
<p>Daily Report was designed to work on modern web browsers. You're seeing this message because you're running <\!--[if IE 6]>Internet Explorer 6 (released over 13 years ago)<![endif]--><\!--[if IE 7]>Internet Explorer 7 (released over 8 years ago)<![endif]--><\!--[if IE 8]>Internet Explorer 8 (released over 5 years ago)<![endif]--><\!--[if IE 9]>Internet Explorer 9 (released over 3 years ago)<![endif]-->, which doesn't support the functionality necessary for Daily Report.</p>
<p><input type="checkbox" id="i-understand" /> I understand that my version of Internet Explorer is out of date and that my computer is vulnerable to viruses and malware.</p>
<button id="i-understand-button" class="info" disabled>Continue to Daily Report</button>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body {
background-color: #CE3426;
color: white;
font-family: sans-serif;
line-height: 25px;
}
.content {
width: 600px;
margin: 0 auto;
padding-top: 60px;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
a, a:visited {
color: white;
}
.info a {
padding: 10px 10px 10px 0;
}
.info a.button {
padding-left: 10px;
text-decoration: none;
border: 1px solid white;
border-radius: 3px;
}
button.info {
padding: 10px;
border: 1px solid white;
border-radius: 3px;
background: none;
color: white;
font-size: 16px;
cursor: pointer;
cursor: hand;
}
button.info:disabled {
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
cursor: hand;
}
a.button.disabled {
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.3);
}
.icon {
font-size: 76px;
}
#details {
margin-top: 80px;
display: none;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$('#show-details').on('click', function(){
if ($('#details').is(":visible")) {
$('#show-details').text('Details');
$('#details').hide();
} else {
$('#show-details').text('Hide details');
$('#details').show();
}
});
$('#i-understand').change(function(){
$('#i-understand-button').prop('disabled',!$('#i-understand-button').prop('disabled'));
});
$('#i-understand-button').on('click', function(){
if (!$('#i-understand-button').prop('disabled')) {
document.location = 'http://google.com';
} else {
return false;
}
});</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment