mrspeaker/cache.manifest

## cache.manifest
CACHE MANIFEST
# v0.1
index.html
lib/jquery-1.4.4.min.js
main.css
main.js
images/eng2fr.png

## index.html
<!DOCTYPE html>
<html manifest="cache.manifest">
    <head>
        <title>Eng2Fr</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" >

        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="apple-touch-icon" href="images/icon.png" />
        <link rel="apple-touch-startup-image" href="images/eng2fr.png" />

        <link rel="stylesheet" href="main.css" type="text/css" media="screen" charset="utf-8" />
    </head>
    <body>
        <div id="container">
            <div id="display">
                <div id="from" class="current"></div>
                <div id="to"></div>
            </div>
        </div>

        <script src="lib/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="main.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            $( document ).ready( function(){
                eng2fr.init();
            });
        </script>
    </body>
</html>

## main.css
html {
    height: 100%;
}
body {
    margin:0;
    padding:0;
    height: 100%;
    color:#fff;
    background-color: #222;
}
#container {
    background: -webkit-gradient(linear, 0% 0, 0% 100%, from(#333), to(#5E5E65));
    height: 100%;
    width: 100%;
}
#display{
    width: 100%;
    height: 100%;
    text-align: center;
}
#display > div{
    font-size:36pt;
    font-family: helvetica;
    text-shadow:2px 2px 15px #000;
    display: none;
    position:absolute;
    width: 100%;
    top: 40%;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
}
#display .current{
    display: block;
}

.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 350ms;
}
.push.in { -webkit-animation-name: slideinfromright; }
.push.out { opacity:0; -webkit-animation-name: slideouttoleft; }

@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateX(0); opacity: 1; }
    to { -webkit-transform: translateX(-100%); opacity: 1; }
}

.flip {
    -webkit-animation-duration: .45s;
    -webkit-backface-visibility: hidden;
}
.flip.in { -webkit-animation-name: flipinfromleft;  }
.flip.out { opacity:0; -webkit-animation-name: flipouttoleft; }

@-webkit-keyframes flipinfromleft {
    from { -webkit-transform: rotateY(180deg) scale(.8); }
    to { -webkit-transform: rotateY(0) scale(1); }
}
@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0) scale(1); opacity: 1; }
    to { -webkit-transform: rotateY(-180deg) scale(.8); opacity: 1; }
}

## main.js
var eng2fr = {
    from: null,
    to: null,
    suggester: {
        i: 0,
        words: [
            [ "beer", "binouze" ],
            [ "another beer", "une autre bière" ],
            [ "crazy", "fou" ],
            [ "What the heck?!", "c'est quoi ce délire" ],
            [ "whatever", "n'importe quoi"]
        ],
        next: function(){
            return this.words[ ( this.i++ ) % this.words.length ];
        }
    },

    init: function() {
        this.bindSwipe( $( "#display" ) );
        this.from = $( "#from" );
        this.to = $( "#to" );
        Events.listen( "card_next", $.proxy( this.next, this ) );
        Events.listen( "card_flip", $.proxy( this.flip, this ) );

        // Begin!
        this.next();
    },

    next: function() {
        var to = this.to,
            from = this.from,
            next = this.suggester.next(),
            _this = this;

        to.text( next[ 0 ] );

        to.addClass( "push in current" );
        from.addClass( "push out" ).one( "webkitAnimationEnd", function() {
            from.text( next[ 1 ] );
            from.removeClass( "current push out" );
            to.removeClass( "push in" );
            _this.from = to;
            _this.to = from;
        });
    },

    flip: function() {
        var to = this.to,
            from = this.from,
            _this = this;

        to.addClass( "flip in current" );
        from.addClass( "flip out" ).one( "webkitAnimationEnd", function() {
            from.removeClass( "current flip out" );
            to.removeClass( "flip in" );
            _this.from = to;
            _this.to = from;
        });
    },

    bindSwipe: function( el ) {
        this.xStart = null;
        this.downEvent = 'ontouchstart' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchstart' : 'mousedown';
        this.upEvent =  'ontouchend' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchend' : 'mouseup';

        var _this = this;
        el.bind({
            "touchstart mousedown": function( e ) {
                if( e.type !== _this.downEvent ) return;
                e.preventDefault();
                _this.xStart = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
            },
            "touchend mouseup": function( e ) {
                if( e.type !== _this.upEvent ) return;
                var newX = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
                var diff = newX - _this.xStart;
                if( Math.abs( diff ) > 20) {
                    if( diff > 0 ){
                        Events.trigger( "card_previous", {} );
                    } else {
                        Events.trigger( "card_next", {} );
                    }
                } else {
                    Events.trigger( "card_flip", {} );
                }
            },
            "touchmove": function( e ) {
                e.preventDefault();
            }
        });
    }
};
	CACHE MANIFEST
	# v0.1
	index.html
	lib/jquery-1.4.4.min.js
	main.css
	main.js
	images/eng2fr.png
	<!DOCTYPE html>
	<html manifest="cache.manifest">
	<head>
	<title>Eng2Fr</title>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" >

	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-icon" href="images/icon.png" />
	<link rel="apple-touch-startup-image" href="images/eng2fr.png" />

	<link rel="stylesheet" href="main.css" type="text/css" media="screen" charset="utf-8" />
	</head>
	<body>
	<div id="container">
	<div id="display">
	<div id="from" class="current"></div>
	<div id="to"></div>
	</div>
	</div>

	<script src="lib/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="main.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	$( document ).ready( function(){
	eng2fr.init();
	});
	</script>
	</body>
	</html>
	html {
	height: 100%;
	}
	body {
	margin:0;
	padding:0;
	height: 100%;
	color:#fff;
	background-color: #222;
	}
	#container {
	background: -webkit-gradient(linear, 0% 0, 0% 100%, from(#333), to(#5E5E65));
	height: 100%;
	width: 100%;
	}
	#display{
	width: 100%;
	height: 100%;
	text-align: center;
	}
	#display > div{
	font-size:36pt;
	font-family: helvetica;
	text-shadow:2px 2px 15px #000;
	display: none;
	position:absolute;
	width: 100%;
	top: 40%;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
	}
	#display .current{
	display: block;
	}

	.in, .out {
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 350ms;
	}
	.push.in { -webkit-animation-name: slideinfromright; }
	.push.out { opacity:0; -webkit-animation-name: slideouttoleft; }

	@-webkit-keyframes slideinfromright {
	from { -webkit-transform: translateX(100%); }
	to { -webkit-transform: translateX(0); }
	}

	@-webkit-keyframes slideouttoleft {
	from { -webkit-transform: translateX(0); opacity: 1; }
	to { -webkit-transform: translateX(-100%); opacity: 1; }
	}

	.flip {
	-webkit-animation-duration: .45s;
	-webkit-backface-visibility: hidden;
	}
	.flip.in { -webkit-animation-name: flipinfromleft; }
	.flip.out { opacity:0; -webkit-animation-name: flipouttoleft; }

	@-webkit-keyframes flipinfromleft {
	from { -webkit-transform: rotateY(180deg) scale(.8); }
	to { -webkit-transform: rotateY(0) scale(1); }
	}
	@-webkit-keyframes flipouttoleft {
	from { -webkit-transform: rotateY(0) scale(1); opacity: 1; }
	to { -webkit-transform: rotateY(-180deg) scale(.8); opacity: 1; }
	}
	var eng2fr = {
	from: null,
	to: null,
	suggester: {
	i: 0,
	words: [
	[ "beer", "binouze" ],
	[ "another beer", "une autre bière" ],
	[ "crazy", "fou" ],
	[ "What the heck?!", "c'est quoi ce délire" ],
	[ "whatever", "n'importe quoi"]
	],
	next: function(){
	return this.words[ ( this.i++ ) % this.words.length ];
	}
	},

	init: function() {
	this.bindSwipe( $( "#display" ) );
	this.from = $( "#from" );
	this.to = $( "#to" );
	Events.listen( "card_next", $.proxy( this.next, this ) );
	Events.listen( "card_flip", $.proxy( this.flip, this ) );

	// Begin!
	this.next();
	},

	next: function() {
	var to = this.to,
	from = this.from,
	next = this.suggester.next(),
	_this = this;

	to.text( next[ 0 ] );

	to.addClass( "push in current" );
	from.addClass( "push out" ).one( "webkitAnimationEnd", function() {
	from.text( next[ 1 ] );
	from.removeClass( "current push out" );
	to.removeClass( "push in" );
	_this.from = to;
	_this.to = from;
	});
	},

	flip: function() {
	var to = this.to,
	from = this.from,
	_this = this;

	to.addClass( "flip in current" );
	from.addClass( "flip out" ).one( "webkitAnimationEnd", function() {
	from.removeClass( "current flip out" );
	to.removeClass( "flip in" );
	_this.from = to;
	_this.to = from;
	});
	},

	bindSwipe: function( el ) {
	this.xStart = null;
	this.downEvent = 'ontouchstart' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchstart' : 'mousedown';
	this.upEvent = 'ontouchend' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchend' : 'mouseup';

	var _this = this;
	el.bind({
	"touchstart mousedown": function( e ) {
	if( e.type !== _this.downEvent ) return;
	e.preventDefault();
	_this.xStart = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
	},
	"touchend mouseup": function( e ) {
	if( e.type !== _this.upEvent ) return;
	var newX = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
	var diff = newX - _this.xStart;
	if( Math.abs( diff ) > 20) {
	if( diff > 0 ){
	Events.trigger( "card_previous", {} );
	} else {
	Events.trigger( "card_next", {} );
	}
	} else {
	Events.trigger( "card_flip", {} );
	}
	},
	"touchmove": function( e ) {
	e.preventDefault();
	}
	});
	}
	};