124 lines
4.0 KiB
HTML
124 lines
4.0 KiB
HTML
<html>
|
|
<head>
|
|
|
|
<!-- Metadata -->
|
|
<title>Compass</title>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<meta charset="UTF-8">
|
|
<meta name="author" content="Keith Irwin">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
|
<meta name="keywords" content="phone, gps, location, direction, compass, app">
|
|
<meta name="description" content="This simple compass makes use of a capable device's internal compass and accelerometer. ">
|
|
<meta name="theme-color" content="#000">
|
|
<meta name="msapplication-navbutton-color" content="#000">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
|
|
<!-- Icons -->
|
|
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icons/apple-touch-icon-57x57.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icons/apple-touch-icon-144x144.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="icons/apple-touch-icon-60x60.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="icons/apple-touch-icon-120x120.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="icons/apple-touch-icon-76x76.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="icons/apple-touch-icon-152x152.png" />
|
|
<link rel="icon" type="image/png" href="icons/favicon-196x196.png" sizes="196x196" />
|
|
<link rel="icon" type="image/png" href="icons/favicon-96x96.png" sizes="96x96" />
|
|
<link rel="icon" type="image/png" href="icons/favicon-32x32.png" sizes="32x32" />
|
|
<link rel="icon" type="image/png" href="icons/favicon-16x16.png" sizes="16x16" />
|
|
<link rel="icon" type="image/png" href="icons/favicon-128.png" sizes="128x128" />
|
|
<meta name="application-name" content="Compass"/>
|
|
<meta name="msapplication-TileColor" content="#111" />
|
|
<meta name="msapplication-TileImage" content="icons/mstile-144x144.png" />
|
|
<meta name="msapplication-square70x70logo" content="icons/mstile-70x70.png" />
|
|
<meta name="msapplication-square150x150logo" content="icons/mstile-150x150.png" />
|
|
<meta name="msapplication-wide310x150logo" content="icons/mstile-310x150.png" />
|
|
<meta name="msapplication-square310x310logo" content="icons/mstile-310x310.png" />
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background: #000;
|
|
color: #EEE;
|
|
}
|
|
|
|
main {
|
|
text-align: center;
|
|
}
|
|
|
|
#error {
|
|
color: #E00;
|
|
}
|
|
|
|
@media (orientation:portrait) {
|
|
img {
|
|
width: 100vw;
|
|
height: 100vw;
|
|
|
|
}
|
|
|
|
}
|
|
@media (orientation:landscape) {
|
|
|
|
img {
|
|
width: 100vh;
|
|
height: 100vh;
|
|
}
|
|
|
|
}
|
|
|
|
#error { display: none; }
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
} a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<main>
|
|
|
|
<noscript>You need javascript to use this. </noscript>
|
|
<p id='error'>No direction available. Try this on a smartphone with an internal compass.</p>
|
|
|
|
<img src='rose.svg'>
|
|
|
|
</main>
|
|
|
|
<!--<footer>-->
|
|
<!-- <span style="float:left"><a href="#">About</a></span>-->
|
|
<!-- <span style="float:right">Made by <a href="https://keithirwin.us/">Keith Irwin</a>.</span>-->
|
|
<!--</footer>-->
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
<script>
|
|
window.addEventListener("deviceorientation", handleOrientation, true);
|
|
function handleOrientation(event) {
|
|
|
|
// No orientation data
|
|
if(!event.absolute) {
|
|
$('img').hide();
|
|
$('#error').show();
|
|
|
|
} else {
|
|
var rot = 'rotate('+event.alpha.toString().substring(0,5)+'deg)';
|
|
$('img').css({
|
|
'-ms-transform': rot,
|
|
'-webkit-transform': rot,
|
|
'transform': rot
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|