JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en">        <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en">               <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>MSSPM</title>
    <link rel="shortcut icon" href="static/images/favicon.ico" />
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="static/css/app.css">
    <script src="static/js/vendor.js"></script>
    <script src="static/js/app.js"></script>
    <script>require('initialize');</script>
</head>
<body>
    <div id="page">
        <div id="vine">
            <div class="vine-iframe-wrapper vine-iframe-wrapper-background">
                <iframe src="" frameborder="0" scrolling="no"></iframe>
            </div>
            <div class="vine-mouse-cover"></div>
            <div class="vine-iframe-wrapper">
                <iframe src="" frameborder="0" scrolling="no"></iframe>
            </div>
            <input class="vine-hash-input" type="text" autocomplete="off" spellcheck="false" maxlength="32" value="" placeholder="Search vines..." />
        </div>
        <div id="scoreboard">
        </div>
    </div>

    <a id="logo-link" href="http://mysupersweetprommitzvah.com" target="_blank"><img class="logo" src="static/images/logo.png" /></a>

    <!-- Force 3d acceleration always and forever :) -->
    <div style="-webkit-transform: translateZ(0)"></div>
</body>
</html>

JavaScript

var count = 0;
var direction = 1;

var iphone = {};

    iphone = {};

    iphone.total_flips = 0;

    iphone.flip_direction = 1;

    iphone.init = function() {
      $('#vine').empty();
      if (!window.navigator.standalone) {
        //return alert('Add My Super Sweet Promitzvah to your Home Screen');
      }
      return iphone.setup_events();
    };

    iphone.setup_events = function() {
      return window.ondeviceorientation = function(event) {
        var alpha;
        alpha = parseInt(event.alpha, 10);
        if (((iphone.flip_direction === 1) && ((0 < alpha && alpha < 50))) || ((iphone.flip_direction === -1) && ((130 < alpha && alpha < 180)))) {
          iphone.total_flips++;
          iphone.flip_direction *= -1;
        }
        if ((iphone.total_flips % 50) === 0) iphone.go_crazy();
        if (!iphone.is_going_crazy) {
          return $('body').css('background-color', 'hsla(' + (360 - alpha) + ', 65%, 80%, 1)');
        }
      };
    };

    iphone.go_crazy = function() {
      var hue;
      iphone.is_going_crazy = true;
      hue = 0;
      setInterval(function() {
        hue += 30;
        return $('body').css('background-color', 'hsla(' + hue + ', 100%, 100%, 1)');
      }, 30);
      return setTimeout(function() {
        return iphone.is_going_crazy = false;
      }, 10 * 1000);
    };



iphone.init();