-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
51 lines (48 loc) · 17.4 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
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Number Rush</title>
<meta name="description" content="An 'against-the-clock' style game to help you learn and remember German numbers!">
<link rel="shortcut icon" href="assets/images/favicon.ico">
<style>
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}legend,td,th{padding:0}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:after,*:before{box-sizing:border-box}body,html{height:100%}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}body{line-height:1.6;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;overflow-x:hidden;background-color:#1b1b1b;color:#fff}@media (max-width:769px){body{font-size:1.4rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:300;line-height:1.4;margin-top:0;margin-bottom:1.6rem}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1}.as-h1 .small,.as-h1 small,.as-h2 .small,.as-h2 small,.as-h3 .small,.as-h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.as-h4 .small,.as-h4 small,.as-h5 .small,.as-h5 small,.as-h6 .small,.as-h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.as-h1,h1{font-size:3.4rem}@media (max-width:769px){.as-h1,h1{font-size:2.6rem}}.as-h2,h2{font-size:2.6rem}@media (max-width:769px){.as-h2,h2{font-size:2rem}}.as-h3,h3{font-size:2rem}@media (max-width:769px){.as-h3,h3{font-size:1.8rem}}.as-h4,h4{font-size:1.8rem}@media (max-width:769px){.as-h4,h4{font-size:1.6rem}}.as-h5,h5{font-size:1.6rem}@media (max-width:769px){.as-h5,h5{font-size:1.6rem}}.as-h6,h6{font-size:1.6rem}a{text-decoration:none;-webkit-transition:.15s color ease-in-out;transition:.15s color ease-in-out;color:#fff;font-weight:700}a:active,a:focus,a:hover{color:#f2f2f2}a:hover{text-decoration:underline}blockquote,dl,form,hr,p,pre,table{margin-top:0;margin-bottom:2.4rem}hr{margin-top:2.4rem;border:0;border-top:1px solid #eaeaea}.small,small{font-size:85%}@media (max-width:479px){.small,small{font-size:90%}}.smaller{font-size:90%}@media (max-width:479px){.smaller{font-size:95%}}.strong,strong{font-weight:600}.stronger{font-weight:500}.disabled,.disabled:hover{color:#444;text-decoration:none}.disabled:hover{cursor:not-allowed}cite{font-style:normal}address{margin-bottom:2.4rem;font-style:italic;line-height:1.6}ol,ul{margin-top:0;margin-bottom:1.2rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}ol{counter-reset:top sub subsub;list-style-type:none;padding-left:0;padding-bottom:1.2rem}ol li{margin-bottom:1.2rem}ol li:before{counter-increment:top;content:counter(top)": ";font-weight:700}ol ol{margin-top:1.2rem;padding-left:1em;counter-reset:sub}ol ol ol{padding-left:2em;counter-reset:subsub}ol ol ol li:before{counter-increment:sub;content:counter(top)"." counter(sub)": "}ol ol ol ol li:before{counter-increment:subsub;content:counter(top)"." counter(sub)"." counter(subsub)": "}.list-inline,.list-unstyled{padding-left:0;padding-bottom:0;margin-left:0;list-style:none}.list-inline li:before,.list-unstyled li:before{content:none}.list-inline{margin-top:-5px}.list-inline>li{display:inline-block;margin-right:1.4rem;margin-top:5px}.list-inline>li:last-child{margin-right:0}.list-inline--divided li:after{content:"|";margin-left:1.2rem}.list-inline--divided li:last-child:after{content:none}.list-inline--blocked{display:block;width:100%}.list-inline--fluid{display:table;table-layout:fixed;width:100%;margin:0}.list-inline--fluid>li{display:table-cell}.header{height:50px;background-color:#222;text-align:center;line-height:50px;position:fixed;top:0;left:0;right:0;z-index:1;will-change:transform;overflow:hidden}@media (max-width:769px){.header{position:relative}}.header__controls{position:absolute;right:0;top:0}.header__input{text-overflow:'';text-indent:.01px;-moz-appearance:none;-webkit-appearance:none;background-color:transparent;border:none}.header__input--select{background-position:right center;background-size:1rem;background-image:url(assets/images/arrow.svg);background-repeat:no-repeat;padding:0 2.4rem 0 1.2rem}.header__input--select:focus{outline:none}.header__input--absolute{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);position:absolute}.header__input--left,.header__input--right{right:0}.header__input--push-left{left:1rem}.header__input--push-right{right:1rem}.header__input--btn{color:#fff;padding:0 2.4rem;border-left:1px solid #090909}.header__input--btn:focus{outline:0}.window__container{position:relative;max-width:40em;margin:auto}@media (max-width:769px){.window__container{padding-top:2.4rem}}.window__outer{display:table;table-layout:fixed;text-align:center;height:auto;width:100%}@media (min-width:770px){.window__outer{height:100%}}.window__inner{display:table-cell;vertical-align:middle;width:100%;height:100%;padding:12rem 2.4rem}@media (max-width:769px){.window__inner{padding:2.4rem 2.4rem 0}}.window__focus{-webkit-appearance:none;border:0;background-color:transparent;font-size:20rem;color:#fff;margin:0 auto 2.4rem}@media (max-width:769px){.window__focus{font-size:10rem}}.window__focus--sm{font-size:10rem}@media (max-width:769px){.window__focus--sm{font-size:4rem}}.window__form-control{-webkit-appearance:none;border:none;padding:1.2rem 2rem;background-color:#fff;width:100%;max-width:250px;border-radius:10em;color:#222;box-shadow:0 0 100px 5px rgba(255,255,255,.25)}@media (max-width:769px){.window__form-control{max-width:200px}}.window__form-control:focus{outline:none}.window__form-control--push{margin:4.8rem 0}@media (max-width:769px){.window__form-control--push{margin:2.4rem 0}}.window__form-control--wide{max-width:320px}.bubble{display:table;margin-left:auto;margin-right:auto;border-radius:50%;position:relative;overflow:hidden;font-size:1.8rem;will-change:transform}.bubble:after,.bubble:before{content:"";position:absolute}.bubble:before{width:100%;height:100%;background-image:-webkit-radial-gradient(50% 0%,ellipse,transparent,rgba(0,0,0,.1));background-image:radial-gradient(ellipse at 50% 0%,transparent,rgba(0,0,0,.1));background-image:-webkit-linear-gradient(top,transparent 0%,rgba(0,0,0,.1)85%);background-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.1)85%);bottom:2.5%;border-radius:50%}.bubble:after{top:5px;width:55%;height:30%;background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5)0%,rgba(255,255,255,0)80%);background-image:linear-gradient(to bottom,rgba(255,255,255,.5)0%,rgba(255,255,255,0)80%);left:22.5%;border-radius:50%}.bubble>*:last-child,.bubble>*:last-child>*:last-child,.bubble>*:last-child>*:last-child>*:last-child{margin-bottom:0}.bubble--lg{width:40rem;height:40rem}.bubble--lg .bubble__desc{font-size:1.6rem}@media (max-width:769px){.bubble--lg{width:25rem;height:25rem}.bubble--lg .bubble__desc{font-size:1.4rem}}.bubble--sm{width:10rem;height:10rem;font-size:2.2rem}.bubble--sm:before{bottom:5%}.bubble--sm:after{top:2.5px}.bubble--sm .bubble__desc{font-size:1.4rem}@media (max-width:769px){.bubble--sm{width:8rem;height:8rem;font-size:1.8rem}.bubble--sm .bubble__desc{font-size:1.2rem}}.bubble--timer{background-color:rgba(239,47,47,.85);position:absolute;right:18%}@media (max-width:769px){.bubble--timer{right:22%}}@media (max-width:479px){.bubble--timer{margin-top:-1.2rem;right:15%}}.bubble--score{background-color:rgba(0,175,22,.85);position:absolute;left:22.5%;margin-top:-5%}@media (max-width:769px){.bubble--score{left:30%}}@media (max-width:479px){.bubble--score{left:20%}}.bubble--personalbest{background-color:rgba(233,30,99,.85);position:absolute;left:12%;margin-top:2.4rem}@media (max-width:769px){.bubble--personalbest{left:18%}}@media (max-width:479px){.bubble--personalbest{left:8%}}.bubble--focus{background-color:#1e88ff;z-index:-1}.bubble--input{padding:1.2rem 2rem;-webkit-appearance:none;background-color:#e91e63;color:#fff;border:none;border-radius:10rem;-webkit-transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}@media (max-width:769px){.bubble--input{padding:.96rem 2rem;font-size:1.4rem}}.bubble--input:hover{-webkit-transform:scale(1.05,1.05);transform:scale(1.05,1.05);-webkit-transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}.bubble--input:before{width:100%;height:100%;left:0;border-radius:10rem}.bubble--input:after{top:2.5px;width:90%;height:20px;background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5)0%,rgba(255,255,255,0)80%);background-image:linear-gradient(to bottom,rgba(255,255,255,.5)0%,rgba(255,255,255,0)80%);left:5%;border-radius:10rem}.bubble__inner{display:table-cell;vertical-align:middle}.bubble__inner--pad{padding:2.4rem}.bubble__title{line-height:1;-webkit-appearance:none;border:0;background-color:transparent;font-size:12rem;font-weight:700;color:#fff;margin:auto;top:-.25rem;position:relative}@media (max-width:769px){.bubble__title{font-size:8rem}}.bubble__desc{line-height:1.4;margin-bottom:0}.bubble__desc--offset-top{position:absolute;top:20%}.bubble__desc--offset-bottom{position:absolute;top:70%}.bubble__desc--constrained{position:absolute;width:60%;margin:auto;display:block;left:20%}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes pulse{0%,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}@keyframes pulse{0%,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes flashText{0%,to{color:#fff}50%{color:rgba(255,255,255,0)}}@keyframes flashText{0%,to{color:#fff}50%{color:rgba(255,255,255,0)}}.pulse{-webkit-animation:pulse .5s linear;animation:pulse .5s linear}.bounce-in{-webkit-animation:bounceIn 1s linear;animation:bounceIn 1s linear}.flash-text{-webkit-animation:flashText 1s infinite;animation:flashText 1s infinite}.flash-text--slow{-webkit-animation-duration:2s;animation-duration:2s}.fade-in{-webkit-animation:fadeIn .25s linear;animation:fadeIn .25s linear}.disabled,.is-disabled,fieldset[disabled]{cursor:not-allowed}.contained{position:relative}.kill-scroll{overflow:hidden}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.hidden,.hide{display:none!important}.show{display:block!important}.hidden,.invisible{visibility:hidden!important}.guttering>*:last-child,.guttering>*:last-child>*:last-child,.guttering>*:last-child>*:last-child>*:last-child{margin-bottom:0}.pull-right{float:right!important}.pull-left{float:left!important}.push{margin:2.4rem!important}.push-left{margin-left:2.4rem!important}.push-right{margin-right:2.4rem!important}.push-bottom{margin-bottom:2.4rem!important}.push-top{margin-top:2.4rem!important}.nudge{margin:.8rem!important}.nudge-left{margin-left:.8rem!important}.nudge-right{margin-right:.8rem!important}.nudge-bottom{margin-bottom:.8rem!important}.nudge-top{margin-top:.8rem!important}.zero{margin:0!important}.zero-top{margin-top:0!important}.zero-bottom{margin-bottom:0!important}.zero-left{margin-left:0!important}.zero-right{margin-right:0!important}.zero-pad{padding:0!important}.zero-pad-bottom{padding-bottom:0!important}.zero-pad-top{padding-top:0!important}.zero-pad-left{padding-left:0!important}.zero-pad-right{padding-right:0!important}.zero-border-bottom{border-bottom:0!important}.zero-border-top{border-top:0!important}.zero-border-left{border-left:0!important}.zero-border-right{border-right:0!important}.interaction{cursor:pointer}.no-interaction{cursor:default}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}@media (max-width:769px){.text-right-max-xs{text-align:right}}@media (min-width:770px){.text-right-min-sm{text-align:right}}.text-light{font-weight:lighter}.text-normal{font-weight:400}.text-strong{font-weight:700}.text-capitalise{text-transform:capitalize}.text-linethrough{text-decoration:line-through}.keyline-top{border-top:1px solid #eaeaea}.keyline-bottom{border-bottom:1px solid #eaeaea}.keyline-right{border-right:1px solid #eaeaea}.keyline-left{border-left:1px solid #eaeaea}.zero-keyline{border:0!important}.zero-keyline-top{border-top:none!important}.zero-keyline-bottom{border-bottom:none!important}.zero-keyline-right{border-right:none!important}.zero-keyline-left{border-left:none!important}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.no-decoration:focus,.no-decoration:hover{text-decoration:none}.no-interaction:focus,.no-interaction:hover{color:inherit!important}
</style>
</head>
<body>
<div id="root">
<div class="window">
<div class="window__outer">
<div class="window__inner">
<h2 class="flash-text flash-text--slow">Loading...</h2>
</div>
</div>
</div>
</div>
<!-- Service Worker -->
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
<!-- End Service Worker -->
<!-- App -->
<script src="assets/scripts/dist/bundle.js"></script>
<!-- End App -->
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-31575166-1', 'auto');
ga('send', 'pageview');
</script>
<script async src='//www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
</body>
</html>