-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
144 lines (127 loc) · 5.95 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
<html>
<head>
<title>BOOM BOOM BOOM!</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,700,900' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="/Assets/favicon.ico" type="image/x-icon">
<link rel="icon" href="/Assets/favicon.ico" type="image/x-icon">
<script type='text/javascript'>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43611103-6', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</head>
<body id='fullscreen'>
<div class='valignOuter'>
<div id="about" class='valign upAndAway solidBackground'>
<div id="aboutContent" class='valignWrap'>
<h2>Boom Boom Boom! is an app to brighten up parties all over the world.</h2>
<p>Throw up graphics, animations, text, photos and effects using your mobile device or keyboard as a controller, or leave it to play in time with the music.</p>
<p>The app uses web-technologies including the <i>Web Audio API</i> to analyse audio from the mic, <i><a href="http://socket.io" target="blank">Web-Sockets</a></i> on a <i><a href="http://nodejs.org" target="blank">Node.js</a></i> server to handle device—desktop interaction, and <i>CSS3</i> and <i><a href="http://jonobr1.github.io/two.js/" target="blank">Two.js</a></i> to control visuals.</p>
<p>Designed and built by <a href="http://www.isjackwild.com" target="blank">Jack Wild</a> <i>(<a href="http://www.twitter.com/isjackwild" target="blank">@isjackwild</a>)</i>. Questions? Suggestions? Want to work together? Get in touch.</p>
<p>Berlin, Summer 2014.</p>
<p id="keyInAbout" class="hidden">Your mobile device controller key is <b><span class="key"></span></b></p>
</div>
</div>
</div>
<div class='valignOuter'>
<div id="browserNotSupported" class='valign hidden'>
<div id="browserNotSupportedContent" class='valignWrap'>
<h2>Sorry, you need Chrome!</h2>
<p>Throw up graphics, animations, text, photos and effects using your mobile device or keyboard as a controller, or leave it to play in time with the music.</p>
<p>The app uses web-technologies including the <i>Web Audio API</i>, <i>Web-Sockets</i> and <i>CSS3 Animations</i> and to make the most of these, please come back in <a href="http://www.google.com/chrome">Chrome.</a></p>
<p>Designed and built by <a href="http://www.isjackwild.com" target="blank">Jack Wild</a> <i>(<a href="http://www.twitter.com/isjackwild" target="blank">@isjackwild</a>)</i>. Questions? Suggestions? Want to work together? Get in touch.</p>
<p>Berlin, Summer 2014.</p>
</div>
</div>
</div>
<div class='valignOuter'>
<div id="instructions" class='valign'>
<div class="valignWrap">
<div id="music" class="instruction hidden">
<img src='Assets/ear.svg'></img>
<h1>
Put on Music.
</h1>
</div>
<div id="visuals" class="instruction hidden">
<img src='Assets/eye.svg'></img>
<h1>
Enjoy visuals.
</h1>
</div>
<div id="play" class="instruction hidden">
<img src='Assets/finger.svg'></img>
<h1>
Take control.
</h1>
</div>
</div>
</div>
</div>
<div class='valignOuter'>
<div id="keyboardOrIpad" class='valign hidden'>
<div class='valignWrap'>
<div id="tablet" class="choice continue upAndAway">
<img src='Assets/tablet.svg'></img>
<h1>
Connect your mobile
</h1>
</div>
<div id="keyboard" class="choice continue upAndAway">
<img src='Assets/key.svg'></img>
<h1>
Play with your Keyboard
</h1>
</div>
</div>
</div>
</div>
<div class='valignOuter'>
<div id="ipadInstructions" class='hidden upAndAway valign'>
<div class='valignWrap'>
<h1>Visit on your mobile device and enter</br><span class="key"></span></br> <i><span class="sidenote">*Connect as many as you want. Find this key by clicking the top-left '?'</i></span></h1>
</div>
</div>
</div>
<div class="showAbout">
<div id='aboutIcon' class='flipContainer'><img src="Assets/info.svg"></img></div>
<div id='closeIcon' class='flipContainer'><img src="Assets/close.svg"></img></div>
</div>
<div id="share">
<img src="Assets/share.svg"></img>
<a id='facebook' class='socialIcon' href="http://www.facebook.com/sharer.php?u=http://www.bbboooooommm.com" target="blank"><img src="Assets/facebook.svg"></img></a>
<a id='twitter' class='socialIcon' href="http://ctt.ec/UTjo1" target="blank"><img src="Assets/twitter.svg"></img></a>
<a id='github' class='socialIcon' href="https://github.com/isjackwild/boomboomboom/" target="blank"><img src="Assets/github.svg"></img></a>
</div>
<div id="makeFullScreen"><img src="Assets/fullscreen.svg"></img></div>
<div class="accept hidden offLeft"><h1>Boom Boom Boom reacts to audio. Put on some music and click <i>Allow</i> ^</h1></div>
<div id="twoMagic"></div>
<div id="text">
<span id="boom">boom</span>
<span id="tssk">tssk</span>
<span id="wobb">wobb</span>
<span id="clap">clap</span>
</div>
<div id="illus">
<img id="ear" src='Assets/ear.svg'></img>
<img id="eye" src='Assets/eye.svg'></img>
<img id="mouth" src='Assets/mouth.svg'></img>
<img id="heart" src='Assets/heart.svg'></img>
<img id="hand" src='Assets/hand.svg'></img>
</div>
<div id="photo"></div>
<script src="JS/libs/two.js" type='text/javascript'></script>
<script src="JS/libs/signals.min.js" type='text/javascript'></script>
<script src="JS/libs/jquery-2.0.0.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.0.4.js"></script>
<script src="JS/main.js" type="text/javascript"></script>
</body>
</html>