forked from zammer/Dino_Pairs
-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
161 lines (156 loc) · 7.35 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html manifest="./site.appcache">
<head>
<meta charset="utf-8">
<title>BrowserPairs - Foxmosa - MozTW</title>
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/ipad-splash-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/ipad-splash-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-icon" href="images/logo.jpg" />
<meta name="viewport" content="user-scalable=no">
<meta property="og:title" content="Browser Pairs Game" />
<meta property="og:type" content="game" />
<meta property="og:description" content="A game pair your lovely browsers and their characters. The CSS3 Transform demo by MozTW Community" />
<meta property="og:url" content="http://moztw.org/foxmosa/game/pairs/" />
<meta property="og:image" content="http://moztw.org/foxmosa/game/pairs/images/logo.jpg" />
<meta property="og:site_name" content="MozTW, Mozilla Taiwan Community" />
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="IE9.js"></script>
<![endif]-->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:600|Days+One">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="ribbon.css">
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '372562499479751', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<!-- CSS GitHub ribbon http://people.mozilla.com/~jbalogh/ribbon/ribbon.html -->
<div class="right ribbon-holder">
<a target="_blank" href="https://github.com/moztw/browser-pairs" class="red ribbon">
<span class="text">Fork me on GitHub</span>
</a>
</div>
<article id="game">
<header id="gameStats">
<a id="qrcode" href="#codebox">QRCODE</a>
<p id="reset">Reset »</p>
<p id="gameScore">
Click: <span id="click">0</span>
Time: <span id="timer">0</span>
</p>
<a id="credit" href="#creditbox">Credit</a>
<p class="baritem" id="mute">Music</p>
<p class="baritem" id="fullscreen">FullScreen</p>
</header>
<section id="playground">
<div id="cards">
<div class="card">
<div class="face front"></div>
<div class="face back"></div>
</div> <!-- .card -->
</div> <!-- #cards -->
<div id="gameIntro">
<div id="gamePlay">0%</div>
</div>
<div id="gameComplete">
<div id="result">
<p id="score"></p>
<p id="share"><a class="share-button facebook-share-button" href="#" target="_blank" title="Publish message to your Facebook wall">Post on Facebook</a><a class="share-button plurk-share-button" href="#" target="_blank" title="Post to Plurk">Plurk</a>
</p>
</div>
<p><a id="gameAgain" class="button" href="#">Play again</a></p>
</div>
</section>
</article> <!-- #game -->
<div id="splash">
<p>
<span id="ie"><img src="images/icon_ie.png" alt="Internet Explorer" /></span>
<span id="fx"><img src="images/icon_fx.png" alt="Mozilla Firefox" /></span>
<span id="cr"><img src="images/icon_cr.png" alt="Google Chrome" /></span>
<span id="op"><img src="images/icon_op.png" alt="Opera" /></span>
</p>
<p>
<span id="sf"><img src="images/icon_sf.png" alt="Apple Safari" /></span>
<span id="ns"><img src="images/icon_ns.png" alt="Netscape Navigator" /></span>
<span id="ms"><img src="images/icon_ms.png" alt="NCSA Mosaic" /></span>
<span id="tb"><img src="images/icon_tb.png" alt="Mozilla Thunderbird" /></span>
<span id="fm"><img src="images/icon_fm.png" alt="Mascot Foxmosa" /></span>
</p>
</div>
<section id="creditbox" class="lightbox">
<div>
<h2>HTML5 Browser Pairs Game</h2>
<p><img src="images/logo.jpg" alt="LOGO" /><br /><a target="_blank" href="//moztw.org">Mozilla Taiwan Community</a><br />×<br /><a target="_blank" href="http://blog.yam.com/ECBp/article/44076465">Explorer Cyber Browserer Comic</a></p>
<p>Illustrated by ECBp,<br />licensed under <a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/3.0/tw/">CC:BY-NC-SA-3.0-TW</a></p>
<p>Music: Mozilla-Blues, composed by <a target="_blank" href="http://magicdesign.blogspot.com/">MGdesigner</a>,<br />licensed under <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/tw/deed.en">CC:BY-3.0-TW</a></p>
<p>Programed by <a target="_blank" href="http://kidwm.net/">WM</a>, Derived from <a target="_blank" href="http://www.my-html-codes.com/game-using-css3-animation">Dino Pair Game</a><br />by <a target="_blank" href="http://www.my-html-codes.com/">Matt Walker</a>, Thank him for the original game.</p>
<p><a href="#">» close «</a></p>
</div>
</section>
<section id="codebox" class="lightbox">
<div>
<h2>QR Code</h2>
<p><img src="https://chart.googleapis.com/chart?chs=400x400&cht=qr&chl=%3A%2F%2Fmoztw.org%2Ffoxmosa%2Fgame%2Fpairs" alt="QR Code" /></p>
<p><a href="#">» close «</a></p>
</div>
</section>
<audio id="melody">
<source src="sound/song.ogg" type="audio/ogg; codecs=vorbis" />
<source src="sound/song.mp3" type="audio/mpeg" />
</audio>
<audio class="sound">
<source src="sound/intro.ogg" type="audio/ogg; codecs=vorbis" />
<source src="sound/intro.mp3" type="audio/mpeg" />
</audio>
<audio class="sound">
<source src="sound/select.ogg" type="audio/ogg; codecs=vorbis" />
<source src="sound/select.mp3" type="audio/mpeg" />
</audio>
<audio class="sound">
<source src="sound/match.ogg" type="audio/ogg; codecs=vorbis" />
<source src="sound/match.mp3" type="audio/mpeg" />
</audio>
<audio class="sound">
<source src="sound/applause.ogg" type="audio/ogg; codecs=vorbis" />
<source src="sound/applause.mp3" type="audio/mpeg" />
</audio>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="pxloader.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1035080-1']);
_gaq.push(['_setDomainName', 'moztw.org']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>