BAC

by amindunited

HTML

<div class="body" ontouchstart="">
    <div id="app" class="app">
        <script type="text/x-handlebars" data-template-name="index">
                
            <div id="home" class="page current">
                <div class="genderToggleWrap">
                    <div class="toggle-iphone">
                      <div class="toggle toggle-select" data-type="select"></div>
                    </div>
                </div>
                {{#link-to "gender"}}Gender{{/link-to}}
                <a {{action "goBack"}}><--</a>
                <!--
                <form id="BAC_form" class="BAC_form">
                    <h1>Blood Alcohol Calculator</h1>
                    <div>
                        <label for="weight">How much do you weigh?</label>
                        <select id="weight" name="weight" class="ranger"></select><span>kgs</span>
                    </div>
                    <div>
                        <label for="drinks">How many drinks have you had?</label>
                        <select id="drinks" name="drinks" class="ranger"></select>
                    </div>
                    <div>
                        <label for="session_length">How long have you been drinking today?</label>
                        <select id="session_length" name="session_length" class="ranger"></select><span>Hours</span>
                    </div>
                </form>
            -->
            </div> 
        </script><!-- Index Template -->
        <script type="text/x-handlebars" data-template-name="gender">
            <h2>Your Gender?</h2>
                
                <a {{action "goBack"}}><--</a>
                <div class="genderToggleWrap">
                    <div class="toggle-iphone">
                      <div class="toggle toggle-select" data-type="select"></div>
                    </div>
                </div>
        </script>
    </div>    
    <!--
    
-->
</div>

<script...

CSS

</style>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/simontabor/jquery-toggles/master/toggles.css"></link>
<style type="text/css">
/* GENERAL */
.genderToggleWrap {
    margin: 10px;
}
/* GENERAL */

body {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
  font-size: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-family: "Roboto", "HelveticaNeue", Helvetica, Arial, sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

/* APP */

.app {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position:absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* PAGES */

.page {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 44px;
  padding: 10px;
  background-color: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(1000%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.page.current {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.page.left {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
 
.page.right {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
 
.page.transition {
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
}

/* NAVBAR */

.navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  color: #666;
  background-color: #ddd;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  z-index: 1;
}

.navbar .title {
  position: absolute;
  left: 44px;
  right: 44px;
  text-align: center;
  font-size: 150%;
  margin: 8px;
  font-weight: bold;
}

/* BUTTONS */

a.button {
  position: relative;
  display: block;
  padding: 10px;
  margin: 10px;
  background-color: #ddd;
  text-align:...

JavaScript

BACApp = Em.Application.create();
Em.Router.reopen({
    history: [],
    didTransition: function(){
        var entry, handler;
        handler = Array.prototype.slice.call(arguments, [0]).pop();
        entry = [handler[handler.length-1].name, handler[handler.length-1].context];
        this.get('history').push(entry);
        return this._super.apply(this, arguments);
    }
});
BACApp.ApplicationRoute = Ember.Route.extend({
    actions: {
        goBack: function(){
            var hist = this.get('router').get('history');
            var lastPage;
            /*
            var histPop = function(){
                var L = hist[hist.length-1];
                hist.removeObject(L);
                return L;
            };
            */
            if (hist.length > 2) {
                hist.pop();//remove the current Page from the history
                lastPage = hist.pop();
            } else if (hist.length == 2) {
                lastPage = hist.shift();
                hist.clear();
            }
            
            var dest = lastPage[0];
            console.log("lastPage ", lastPage);
            this.transitionTo(dest);
            
        }
    }
});

BACApp.Router.map(function() {
    this.route("gender");
});

function BAC(){
	var min_weight = 43;
	var max_weight = 141;
	var min_drinks = 1;
	var max_drinks = 20;
	var min_session = 0;
	var max_session = 24;	
	/* create weight inputs */
    var wUl = $("<ul/>").appendTo('#home');//("#BAC_form #weight");
	for (var i = min_weight; i <= max_weight; i++) {
		var opt = $("<option></option>").html(i).attr({
			value:i
		});
        $("<li/>").html(i).appendTo(wUl);
		$(opt).appendTo($("#BAC_form #weight"));
	}

	/* create drinks inputs */
	for (var i = min_drinks; i <= max_drinks; i++) {
		var opt = $("<option></option>").html(i).attr({
			value:i
		});
		$(opt).appendTo($("#BAC_form #drinks"));
	}
	
	/* create session_length inputs */
	for (var i = min_session; i <= max_session; i++) {
		var opt =...