chodorowicz/index.html

## index.html
<!doctype html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Wing Chun Terms</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<meta name="viewport" content="width=device-width,initial-scale=1">

	<link rel="stylesheet" href="css/style.css">

	<!--[if lt IE 9]>
	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>

</head>
<body>
<div id="body">
</div>
</body>
</html>

## script.coffee
# data
terms = [
    # Basic Attacks
    ['Kuen','Fist'],
    ['Yat Chi Kuen','Single Thrusting Punch'],
    ['Lin Wan Kuen','Chain Punches'],
]

# app namespace setup
_.templateSettings =
    interpolate: /\{\{(.+?)\}\}/g

APP =
    Views: {},
    Models: {},
    Collections: {}

class APP.Models.Card extends Backbone.Model
    defaults:
        term: "Term"
        translation: "Translation"

class APP.Collections.Deck extends Backbone.Collection
    model: APP.Models.Card

class APP.Views.Shuffle extends Backbone.View
    el: 'body'

    events:
        'click #body': 'iterate'
        'touchstart #body': 'iterate'

    count: 0
    current: 0

    tplTerm: _.template('<dfn id="term">{{term}}</dfn>')
    tplTranslation: _.template('<dfn id="translation">{{translation}}</dfn>')

    initialize: ->
        _.bindAll(this, 'render', 'iterate', 'showTerm', 'showTranslation', 'reset')
        @count = @collection.length
        @showTerm()

    reset: ->
        @collection = new APP.Collections.Deck getCards()

    render: ->
        return this

    iterate: ->
        # reset when we reach the end of the deck
        @reset() if @current > @count

        if $('#translation').size()
            @showTerm()
        else
            @showTranslation()

    showTerm: ->
        model = @collection.at @current
        $('#body').empty()
        $('#body').append(@tplTerm(model.toJSON()))

    showTranslation: ->
        model = @collection.at @current
        $('#body').append @tplTranslation model.toJSON()
        @current++


shuffle = (array) ->
    top = array.length

    while --top
        current = Math.floor(Math.random() * (top + 1))
        tmp = array[current]
        array[current] = array[top]
        array[top] = tmp

    return array

getCards = ->
    cards = for item in shuffle(terms)
        new APP.Models.Card
            term: item[0]
            translation: item[1]


$ ->
    APP.Shuffle = new APP.Views.Shuffle
        collection: new APP.Collections.Deck getCards()

    APP.Shuffle.render()

## style.css
@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

html, body, #body {
height: 100%;
}

body {
position: relative;

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #FFF;

background: #333333; /* Old browsers */
background: -moz-linear-gradient(top,  #333333 0%, #45484d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#45484d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #333333 0%,#45484d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #333333 0%,#45484d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #333333 0%,#45484d 100%); /* IE10+ */
background: linear-gradient(top,  #333333 0%,#45484d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#45484d',GradientType=0 ); /* IE6-9 */

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

dfn {
position: absolute;
top: 50%;
display: block;
width: 100%;
font-style: normal;
text-shadow: 2px 2px 2px #333333;
filter: dropshadow(color=#333333, offx=2, offy=2);
text-align: center;
font-size: 2.5em;
line-height: 1em;
}

dfn#term {
margin-top: -2em;
}
	<!doctype html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Wing Chun Terms</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<meta name="viewport" content="width=device-width,initial-scale=1">

	<link rel="stylesheet" href="css/style.css">

	<!--[if lt IE 9]>
	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>

	</head>
	<body>
	<div id="body">
	</div>
	</body>
	</html>
	# data
	terms = [
	# Basic Attacks
	['Kuen','Fist'],
	['Yat Chi Kuen','Single Thrusting Punch'],
	['Lin Wan Kuen','Chain Punches'],
	]

	# app namespace setup
	_.templateSettings =
	interpolate: /\{\{(.+?)\}\}/g

	APP =
	Views: {},
	Models: {},
	Collections: {}

	class APP.Models.Card extends Backbone.Model
	defaults:
	term: "Term"
	translation: "Translation"

	class APP.Collections.Deck extends Backbone.Collection
	model: APP.Models.Card

	class APP.Views.Shuffle extends Backbone.View
	el: 'body'

	events:
	'click #body': 'iterate'
	'touchstart #body': 'iterate'

	count: 0
	current: 0

	tplTerm: _.template('<dfn id="term">{{term}}</dfn>')
	tplTranslation: _.template('<dfn id="translation">{{translation}}</dfn>')

	initialize: ->
	_.bindAll(this, 'render', 'iterate', 'showTerm', 'showTranslation', 'reset')
	@count = @collection.length
	@showTerm()

	reset: ->
	@collection = new APP.Collections.Deck getCards()

	render: ->
	return this

	iterate: ->
	# reset when we reach the end of the deck
	@reset() if @current > @count

	if $('#translation').size()
	@showTerm()
	else
	@showTranslation()

	showTerm: ->
	model = @collection.at @current
	$('#body').empty()
	$('#body').append(@tplTerm(model.toJSON()))

	showTranslation: ->
	model = @collection.at @current
	$('#body').append @tplTranslation model.toJSON()
	@current++


	shuffle = (array) ->
	top = array.length

	while --top
	current = Math.floor(Math.random() * (top + 1))
	tmp = array[current]
	array[current] = array[top]
	array[top] = tmp

	return array

	getCards = ->
	cards = for item in shuffle(terms)
	new APP.Models.Card
	term: item[0]
	translation: item[1]


	$ ->
	APP.Shuffle = new APP.Views.Shuffle
	collection: new APP.Collections.Deck getCards()

	APP.Shuffle.render()
	@media only screen and (min-width: 480px) {
	/* Style adjustments for viewports 480px and over go here */

	}

	@media only screen and (min-width: 768px) {
	/* Style adjustments for viewports 768px and over go here */

	}

	html, body, #body {
	height: 100%;
	}

	body {
	position: relative;

	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #FFF;

	background: #333333; /* Old browsers */
	background: -moz-linear-gradient(top, #333333 0%, #45484d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#45484d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #333333 0%,#45484d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #333333 0%,#45484d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #333333 0%,#45484d 100%); /* IE10+ */
	background: linear-gradient(top, #333333 0%,#45484d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#45484d',GradientType=0 ); /* IE6-9 */

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	}

	dfn {
	position: absolute;
	top: 50%;
	display: block;
	width: 100%;
	font-style: normal;
	text-shadow: 2px 2px 2px #333333;
	filter: dropshadow(color=#333333, offx=2, offy=2);
	text-align: center;
	font-size: 2.5em;
	line-height: 1em;
	}

	dfn#term {
	margin-top: -2em;
	}