forked from jeromeetienne/marbleTable
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (135 loc) · 4.88 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
<!doctype html><title>Marble Table Game</title>
<link rel="canonical" href="http://jeromeetienne.github.io/marbleTable/"/>
<!-- css for bootstrap -->
<link href="menu/vendor/bootstrap/css/bootstrap-cyborg.css" rel="stylesheet">
<link href="menu/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<body>
<style type="text/css">
/* Main marketing message and sign up button */
.jumbotron {
margin: 120px 0;
text-align: center;
color: white;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .btn {
font-size: 42px;
padding: 28px 48px;
}
.modal {
font-size: 150%;
line-height: 1.5;
}
.redglow {
text-shadow: 0 0 0.2em #F66, 0 0 0.2em #F22, 0 0 0.4em #F22;
}
.btn:hover {
text-shadow: 0 0 0.2em #F66, 0 0 0.2em #F22, 0 0 0.4em #F22;
}
/* put image as background */
/* body {
background: url(images/earthmoonsun-small.jpg) no-repeat center center fixed;
background-size: cover;
}
*/</style>
<div class='container'>
<!-- Jumbotron -->
<div class="jumbotron">
<h1><strong class='redglow'>Marble Table</strong></h1>
<br/>
<p class="lead">
You are controlling a <strong class='redglow'>Marble</strong>
on a table!
</p>
<p class="lead">
Use <strong class='redglow'>Arrows</strong> to move the ball.
</p>
<p class="lead">
Use <strong class='redglow'>1 to 4</strong> to move the camera.
</p>
<br/>
<div class="row btn-group btn-group-horizontal">
<a href='game'
class="icon-play btn btn-large btn-primary">
Play
</a>
<a href="#myModalTutorial" role="button" data-toggle="modal"
class="icon-info-sign btn btn-large btn-info">
Tutorial
</a>
<a href="#myModalAbout" role="button" data-toggle="modal"
class="icon-question-sign btn btn-large btn-info">
About
</a>
</div>
</div>
<!-- modal About -->
<div id="myModalAbout" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalAboutLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalAboutLabel" class='redglow'>What about Marble Table</h3>
</div>
<div class="modal-body">
<p>
It has been written by
<a href='http://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>.
It uses
<a href='https://github.com/mrdoob/three.js/' target='_blank'>three.js</a> with
<a href='http://jeromeetienne.github.com/tquery/' target='_blank'>tQuery API</a> for 3D
and
<a href='http://schteppe.github.com/cannon.js/' target='_blank'>cannon.js</a> for physics
</p>
</div>
</div>
<!-- modal Tutorial -->
<div id="myModalTutorial" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalTutorialLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
</div>
<div class="modal-body">
<p>
You are controlling a <em>Marble</em>
on a table!
</p>
<h3 class='redglow'>Goal</h3>
<p>
The goal is to reach the checkerboard without touching the grey spheres as faster as you can. Each time you touch the grey spheres, the game start again.
</p>
<h3 class='redglow'>How to play</h3>
<p>
Use <em>Arrows</em> to move the ball.
Use <em>1 to 4</em> to move the camera position.
</p>
</div>
</div>
</div> <!-- /container -->
<!-- js for bootstrap -->
<script src='menu/vendor/jquery/jquery.min.js'></script>
<script src='menu/vendor/bootstrap/js/bootstrap.min.js'></script>
<!-- ************************************************************ -->
<!-- Share Part -->
<!-- github ribbon -->
<a href="https://github.com/jeromeetienne/marbleTable" target='_blank'><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div style='position: absolute; top: 10px; left: 10px;'>
<!-- twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-via="jerome_etienne">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<br/>
<!-- ******************* google plus ************************* -->
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</body>