JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<script src="https://raw.github.com/blueimp/JavaScript-MD5/master/md5.js"></script>
<!-- 
<h3>Acceleration</h3>

<p>acceleration.x: <span id="acceleration-x"></span></p>
<p>acceleration.y: <span id="acceleration-y"></span></p>
<p>acceleration.z: <span id="acceleration-z"></span></p>

<h3>Acceleration Including Gravity</h3>

<p>accelerationIncludingGravity.x:
    <span id="acceleration-gravity-x"></span></p>
<p>accelerationIncludingGravity.y:
    <span id="acceleration-gravity-y"></span></p>
<p>accelerationIncludingGravity.z:
    <span id="acceleration-gravity-z"></span></p>

<h3>Time Between Motion Events</h3>

<p><span id="interval"></span> milliseconds</p>

<h3>Rotation Rate</h3>

<p>rotationRate.alpha: <span id="rot-rate-alpha"></span></p>
<p>rotationRate.beta: <span id="rot-rate-beta"></span></p>
<p>rotationRate.gamma: <span id="rot-rate-gamma"></span></p>

<h3>Orientation</h3>

<p>orientation.alpha: <span id="orientation-alpha"></span></p>
<p>orientation.beta: <span id="orientation-beta"></span></p>
<p>orientation.gamma: <span id="orientation-gamma"></span></p> -->


<img src="http://www.mysupersweetprommitzvah.com/images/logo.png" style="width: 100%; position: fixed; top: 25%; opacity: 0.4">

CSS

</style>

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<style>
* {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
    background: #000;
    color: #fff;
}

JavaScript

/**
 * Hide the addressbar on ios & android devices
 * https://gist.github.com/yckart/5609969
 *
 * Based on the work from Nate Smith
 * @see https://gist.github.com/nateps/1172490
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/05/20
 */
 
;(function(a){a.hideAdressbar=function(g){g=typeof g==="string"?document.querySelector(g):g;var b=navigator.userAgent,i=~b.indexOf("iPhone")||~b.indexOf("iPod"),k=~b.indexOf("iPad"),f=i||k,e=~b.indexOf("Android"),j=a.navigator.standalone,c=0;if(!(f||e)||!g){return}if(e){a.addEventListener("scroll",function(){g.style.height=a.innerHeight+"px"},false)}var h=function(){var l=0;if(f){l=document.documentElement.clientHeight;if(i&&!j){l+=60}}else{if(e){l=a.innerHeight+56}}g.style.height=l+"px";setTimeout(scrollTo,0,0,1)};(function d(){var l=g.offsetWidth;if(c===l){return}c=l;h();a.addEventListener("resize",d,false)}())}}(this));

hideAdressbar();

window.ondevicemotion = function (event) {
    // document.getElementById("acceleration-x")
    //     .innerHTML = event.acceleration ?
    //         event.acceleration.x : "not reported";
    // document.getElementById("acceleration-y")
    //     .innerHTML = event.acceleration ?
    //         event.acceleration.y : "not reported";
    // document.getElementById("acceleration-z")
    //     .innerHTML = event.acceleration ?
    //         event.acceleration.z : "not reported";

    // document.getElementById("acceleration-gravity-x")
    //     .innerHTML = event.accelerationIncludingGravity ?
    //         event.accelerationIncludingGravity.x : "not reported";
    // document.getElementById("acceleration-gravity-y")
    //     .innerHTML = event.accelerationIncludingGravity ?
    //         event.accelerationIncludingGravity.y : "not reported";
    // document.getElementById("acceleration-gravity-z")
    //     .innerHTML = event.accelerationIncludingGravity ?
    //        ...