-
Notifications
You must be signed in to change notification settings - Fork 162
/
index.html
138 lines (112 loc) · 5.86 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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>COLORON GAME</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>COLORON GAME: inspiring developers to use SVG Animations, ES6 and Flexbox</title>
<meta name="description" content="A game made to inspire developers to use GSAP, ES6 and Flexbox">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="https://greghub.github.io/coloron/public/images/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://greghub.github.io/coloron/public/images/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://greghub.github.io/coloron/public/images/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://greghub.github.io/coloron/public/images/touch-icon-ipad-retina.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@CodePen">
<meta name="twitter:title" content="COLORON GAME: inspiring developers to use SVG Animations, ES6 and Flexbox">
<meta name="twitter:description" content="A game made to inspire developers to use GSAP, ES6 and Flexbox">
<meta name="twitter:creator" content="@greghvns">
<meta name="twitter:image" content="https://greghub.github.io/coloron/public/images/coloron-image.png">
<meta property="og:image" content="https://greghub.github.io/coloron/public/images/coloron-image.png">
<meta property="og:title" content="COLORON GAME: inspiring developers to use SVG Animations, ES6 and Flexbox">
<meta property="og:url" content="https://codepen.io/gregh/pen/yVLOyO">
<meta property="og:site_name" content="CodePen">
<meta property="og:description" content="A game made to inspire developers to use GSAP, ES6 and Flexbox"><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,900'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!--
design by https://www.behance.net/vahanhovh
-->
<div class="splash"></div>
<div class="container">
<div class="start-game game-full-flex" id="start-game">
<div class="start-game-top"><a class="play-full-page" href="https://codepen.io/gregh/full/yVLOyO/" target="_blank">Full Page Mode</a></div>
<div class="logo-holder">
<p class="logo">
<span>C</span>
<span>o</span>
<span>l</span>
<span>o</span>
<span>r</span>
<span>o</span>
<span>n</span>
</p>
<a class="play-button" href="#" onclick="game.start()">Play</a>
<h4 class="hint">hint: <span>red</span> color always comes first</h4>
</div>
<div class="how-to-play">
<div class="section section-1">
<h4>Bouncing ball<br>changes color</h4>
<div class="content">
<div class="ball-demo" id="ball-demo"></div>
</div>
</div>
<div class="section section-2">
<h4>Tap on the bar to switch the colors<br>(Red, Yellow, Purple)</h4>
<div class="content">
<div class="bar bar-1" data-index="0"></div>
<div class="bar bar-2"></div>
<div class="bar bar-3"></div>
</div>
</div>
<div class="section section-3">
<h4>Always match the<br>ball and bar colors</h4>
<div class="content">
<div class="ball-demo" id="ball-demo"></div>
<div class="bar bar-1"></div>
</div>
</div>
</div>
</div>
<div class="stop-game game-full-flex">
<div class="score-container">
<h1>Coloron</h1>
<div class="final-score"></div>
<div class="result"></div>
<div>
<a class="play-again" href="#" onclick="game.start()">Play Again</a>
<a class="main-menu" href="#" onclick="game.intro()">Menu</a>
</div>
</div>
</div>
<div class="small-glows"></div>
<div class="glow"><div class="sun"></div></div>
<div class="waves">
<div class="top_wave"></div>
<div class="wave1"></div>
<div class="wave2"></div>
<div class="wave3"></div>
<div class="wave4"></div>
</div>
<div class="mounts">
<div class="mount1"></div>
<div class="mount2"></div>
</div>
<div class="clouds"></div>
<div class="scene">
<div class="learn-to-play">Click on the bars to change the color!</div>
<div class="score" id="score"></div>
<div class="ball-holder"></div>
<div class="sticks" id="sticks"></div>
</div>
<div class="noise"></div>
</div>
<!-- partial -->
<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script><script src="./script.js"></script>
</body>
</html>