-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (157 loc) · 10.8 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
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns#">
<!-- Standard Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="referrer" content="origin">
<title>Bouncy Balls - Manage noise with bouncing balls!</title>
<!-- General Meta -->
<meta name="author" content="Anweshan Roy Chowdhury">
<meta name="reply-to" content="[email protected]">
<meta name="description" content="A noise level meter, monitor and management tool. Perfect if participants are too noisy! Bouncing balls react to sounds from the microphone.">
<!-- Meta Mobile -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Apple Division -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Bouncy Balls">
<meta name="application-name" content="Bouncy Balls">
<!-- Microsoft Division -->
<meta name="msapplication-tooltip" content="Bouncy Balls">
<meta name="msapplication-starturl" content="https://bouncy.cybrix.in">
<meta name="msapplication-TileImage" content="./assets/images/icons/icon-400.png">
<meta name="msapplication-TileColor" content="#000">
<meta name="msapplication-navbutton-color" content="#000">
<!-- Theme Color -->
<meta name="theme-color" content="#000">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://bouncy.cybrix.in">
<meta property="og:site_name" content="Bouncy Balls">
<meta property="og:title" content="Bouncy Balls - Manage noise with bouncing balls!">
<meta property="og:description" content="A noise level meter, monitor and management tool. Perfect if participants are too noisy! Bouncing balls react to sounds from the microphone.">
<meta property="og:image" content="./assets/images/cover/og-splash.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@cybrixin">
<meta property="twitter:site_name" content="Bouncy Balls">
<meta name="twitter:title" content="Bouncy Balls - Manage noise with bouncing balls!">
<meta name="twitter:description" content="A noise level meter, monitor and management tool. Perfect if participants are too noisy! Bouncing balls react to sounds from the microphone.">
<meta property="twitter:url" content="https://bouncy.cybrix.in">
<meta property="twitter:domain" content="bouncy.cybrix.in">
<meta name="twitter:image" content="./assets/images/cover/og-splash.jpg">
<!-- Link Icons -->
<link rel="shortcut icon" href="./assets/images/icons/icon-32.png" type="image/png">
<link rel="icon" sizes="16x16" href="./assets/images/icons/icon-16.png" type="image/png">
<link rel="icon" sizes="32x32" href="./assets/images/icons/icon-32.png" type="image/png">
<link rel="icon" sizes="100x100" href="./assets/images/icons/icon-100.png" type="image/png">
<link rel="icon" sizes="200x200" href="./assets/images/icons/icon-200.png" type="image/png">
<link rel="icon" sizes="400x400" href="./assets/images/icons/icon-400.png" type="image/png">
<link rel="apple-touch-icon-precomposed" href="./assets/images/icons/icon-400.png" type="image/png">
<link rel="image_src" href="./assets/images/cover/og-splash.jpg" type="image/png">
<!-- manifest.json -->
<link rel="manifest" href="./manifest.json?v=958">
<!-- Canonical Link -->
<link rel="canonical" href="https://cybrix.in/bouncy-balls">
<!-- Stylesheet -->
<link rel="stylesheet" href="https://cybrix.in/vendor/SnackBar/snackbar.min.css" type="text/css">
<link rel="stylesheet" href="./assets/css/styles.css" type="text/css">
</head>
<body>
<div class="bg"></div>
<div class="bg"></div>
<div class="intro-text">
<p>Bounce balls with your microphone!</p>
<p>A fun way to manage noise or visualize music.</p>
<p class="description notranslate" translate="no">A noise level meter, monitor and management tool. Perfect if participants are too noisy! Bouncing balls react to sounds from the microphone.</p>
</div>
<div class="intro-text error">
<p>Sorry, Bouncy Balls can’t bounce in your web browser :(</p>
<p>Please try using another browser such as <a href="https://www.google.com/chrome/">Chrome</a> or <a href="https://www.mozilla.org/firefox/">Firefox.</a></p>
</div>
<div class="stage"></div>
<div class="intro-text noscript">
<noscript>
<p>Please <a href="http://enable-javascript.com/" target="_blank">enable JavaScript</a> to bounce the Bouncy Balls!</p>
</noscript>
</div>
<div class="intro-main">
<h1 class="notranslate" translate="no"><span>Bouncy Balls</span></h1>
<div class="button">
<p>Begin bouncing!</p>
</div>
</div>
<div class="noise-alert fade">
<h3 style="display: none;">Quiet!</h3>
<h3 style="display: none;">Too noisy!</h3>
<h3 style="display: none;">Shhhh!</h3>
</div>
<form class="menu hidden">
<fieldset>
<div class="item mic" data-error="Sorry, this web browser is unable to access the microphone.">
<h2>Microphone</h2>
<div class="icon off"></div>
</div>
<div class="item elasticity">
<h2>Sensitivity</h2>
<div class="range">
<div class="track"></div>
<div class="thumb"></div>
</div>
</div>
<div class="item total">
<h2>Total</h2>
<div class="range">
<div class="track"></div>
<div class="thumb"></div>
</div>
</div>
<div class="item mode">
<h2>Theme</h2>
<div class="list">
<input type="radio" name="mode" id="plastic" checked><label for="plastic">Plastic</label>
<input type="radio" name="mode" id="emoji"><label for="emoji">Emoji</label>
<input type="radio" name="mode" id="numbers"><label for="numbers">Numbers</label>
<input type="radio" name="mode" id="bubbles"><label for="bubbles">Bubbles</label>
<input type="radio" name="mode" id="eyes"><label for="eyes">Eyeballs</label>
</div>
</div>
<div class="item noise">
<h2>Noise Alert</h2>
<div class="checkbox">
<input type="checkbox" name="noise" id="noise" checked><label for="noise"></label>
</div>
<div class="list">
<input type="radio" name="sound" id="none"><label for="none">No sound</label>
<input type="radio" name="sound" id="beep"><label for="beep">Beep</label>
<input type="radio" name="sound" id="shush" checked><label for="shush">Shush</label>
</div>
</div>
</fieldset>
</form>
<!-- Script / Javascript -->
<!-- Eruda for mobile context debugging. Will be removed at production -->
<script>
const ERUDA_NEEDED = false;
window.mobileAndTabletCheck = function() {
let check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
if(ERUDA_NEEDED && window.mobileAndTabletCheck() && ('ontouchstart' in window || navigator.msMaxTouchPoints)){
// We need to add eruda for development.
const script = document.createElement("script");
script.onload = function(){
eruda.init();
}
script.src = `https://cdn.jsdelivr.net/npm/eruda`;
script.type = "application/javascript";
document.head.appendChild(script);
}
</script>
<script src="./assets/js/app.js?v=27798"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>