Skip to content

Instantly share code, notes, and snippets.

@willyaranda
Created May 14, 2014 10:06
Show Gist options
  • Save willyaranda/de7e265f5415efc2c674 to your computer and use it in GitHub Desktop.
Save willyaranda/de7e265f5415efc2c674 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Bing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="./css/style.css" rel="stylesheet" />
<link rel="dns-prefetch" href="https://www.bing.com" />
<link rel="prefetch" href="https://www.bing.com/" />
<link rel="next" href="https://www.bing.com/" />
</head>
<body>
<header></header>
<main>
<span class="flash-offline">
<strong>No internet connection!</strong>
Please make sure that you are online and try again.</span>
</main>
<script src="./js/script.js"></script>
</body>
</html>
{
"version": "1.0.0.20140429",
"name": "Bing Search",
"description": "Bing app finds answers to your questions on the internet and gives you a stunning real photo every day!",
"launch_path": "/app/bing.html",
"icons": {
"16": "/app/images/logo-16.png",
"32": "/app/images/logo-32.png",
"48": "/app/images/logo-48.png",
"60": "/app/images/logo-60.png",
"90": "/app/images/logo-90.png",
"120": "/app/images/logo-120.png",
"128": "/app/images/logo-128.png",
"256": "/app/images/logo-256.png"
},
"developer": {
"name": "Microsoft Corporation",
"url": "http://www.bing.com"
},
"locales": {},
"default_locale": "en",
"chrome": { "navigation": true }
}
(function app() {
'use strict';
function ready() {
if (!navigator.onLine) {
return;
}
var url = 'http://www.bing.com';
location.replace(url);
}
// Called on start and on every offline/online event
function onlineCheck() {
if (navigator.onLine) {
document.documentElement.classList.remove('is-offline');
ready();
} else {
document.documentElement.classList.add('is-offline');
}
}
// Called on load to ensure splashscreen
window.addEventListener('load', function() {
window.addEventListener('online', onlineCheck);
window.addEventListener('offline', onlineCheck);
onlineCheck();
});
}());
/* CSS Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/*csslint box-sizing: false, box-model: false; */
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html {
font-size: 100%;
-moz-user-select: none;
user-select: none;
}
body {
font: 1rem/1.6rem sans-serif;
background-color: #f5f5f5;
color: #444;
display: -moz-box;
-moz-box-flex: 1;
-moz-box-orient: vertical;
-moz-box-align: stretch;
align-content: stretch;
display: flex;
flex-direction: column;
width: 100%;
}
header {
-moz-box-flex: 38;
flex: 38 1 auto;
display: -moz-box;
-moz-box-align: center;
-moz-box-pack: center;
display: flex;
background: url('../images/logo.png') center no-repeat;
background-size: auto 3rem;
text-indent: -999rem;
}
iframe {
visibility: hidden;
}
main {
text-align: center;
background: url('../images/spinner.png') center no-repeat;;
background-size: 2rem;
-moz-box-flex: 62;
flex: 62 1 auto;
display: -moz-box;
-moz-box-align: center;
-moz-box-pack: center;
display: flex;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.flash-offline {
margin: auto;
padding: 3rem;
}
.flash-offline {
color: #888;
display: none;
}
.is-offline main {
background: none;
animation: none;
}
.is-offline .flash-offline {
display: inline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment