Fix #9: Adjust CSS for iOS, add fallback JS for Android < 4.4
(with warning message in settings about old OS)
This commit is contained in:
parent
0edb1cadcb
commit
5eb299b7c7
211
www/css/main.css
211
www/css/main.css
@ -488,6 +488,109 @@ body {
|
||||
z-index: 90000;
|
||||
}
|
||||
|
||||
@-webkit-keyframes cooldown-fade {
|
||||
0% { background: linear-gradient(to top, rgba(255,255,255,.8) 0%, rgba(0,0,0,.8) 0%); }
|
||||
1% { background: linear-gradient(to top, rgba(255,255,255,.8) 1%, rgba(0,0,0,.8) 0%); }
|
||||
2% { background: linear-gradient(to top, rgba(255,255,255,.8) 2%, rgba(0,0,0,.8) 0%); }
|
||||
3% { background: linear-gradient(to top, rgba(255,255,255,.8) 3%, rgba(0,0,0,.8) 0%); }
|
||||
4% { background: linear-gradient(to top, rgba(255,255,255,.8) 4%, rgba(0,0,0,.8) 0%); }
|
||||
5% { background: linear-gradient(to top, rgba(255,255,255,.8) 5%, rgba(0,0,0,.8) 0%); }
|
||||
6% { background: linear-gradient(to top, rgba(255,255,255,.8) 6%, rgba(0,0,0,.8) 0%); }
|
||||
7% { background: linear-gradient(to top, rgba(255,255,255,.8) 7%, rgba(0,0,0,.8) 0%); }
|
||||
8% { background: linear-gradient(to top, rgba(255,255,255,.8) 8%, rgba(0,0,0,.8) 0%); }
|
||||
9% { background: linear-gradient(to top, rgba(255,255,255,.8) 9%, rgba(0,0,0,.8) 0%); }
|
||||
10% { background: linear-gradient(to top, rgba(255,255,255,.8) 10%, rgba(0,0,0,.8) 0%); }
|
||||
11% { background: linear-gradient(to top, rgba(255,255,255,.8) 11%, rgba(0,0,0,.8) 0%); }
|
||||
12% { background: linear-gradient(to top, rgba(255,255,255,.8) 12%, rgba(0,0,0,.8) 0%); }
|
||||
13% { background: linear-gradient(to top, rgba(255,255,255,.8) 13%, rgba(0,0,0,.8) 0%); }
|
||||
14% { background: linear-gradient(to top, rgba(255,255,255,.8) 14%, rgba(0,0,0,.8) 0%); }
|
||||
15% { background: linear-gradient(to top, rgba(255,255,255,.8) 15%, rgba(0,0,0,.8) 0%); }
|
||||
16% { background: linear-gradient(to top, rgba(255,255,255,.8) 16%, rgba(0,0,0,.8) 0%); }
|
||||
17% { background: linear-gradient(to top, rgba(255,255,255,.8) 17%, rgba(0,0,0,.8) 0%); }
|
||||
18% { background: linear-gradient(to top, rgba(255,255,255,.8) 18%, rgba(0,0,0,.8) 0%); }
|
||||
19% { background: linear-gradient(to top, rgba(255,255,255,.8) 19%, rgba(0,0,0,.8) 0%); }
|
||||
20% { background: linear-gradient(to top, rgba(255,255,255,.8) 20%, rgba(0,0,0,.8) 0%); }
|
||||
21% { background: linear-gradient(to top, rgba(255,255,255,.8) 21%, rgba(0,0,0,.8) 0%); }
|
||||
22% { background: linear-gradient(to top, rgba(255,255,255,.8) 22%, rgba(0,0,0,.8) 0%); }
|
||||
23% { background: linear-gradient(to top, rgba(255,255,255,.8) 23%, rgba(0,0,0,.8) 0%); }
|
||||
24% { background: linear-gradient(to top, rgba(255,255,255,.8) 24%, rgba(0,0,0,.8) 0%); }
|
||||
25% { background: linear-gradient(to top, rgba(255,255,255,.8) 25%, rgba(0,0,0,.8) 0%); }
|
||||
26% { background: linear-gradient(to top, rgba(255,255,255,.8) 26%, rgba(0,0,0,.8) 0%); }
|
||||
27% { background: linear-gradient(to top, rgba(255,255,255,.8) 27%, rgba(0,0,0,.8) 0%); }
|
||||
28% { background: linear-gradient(to top, rgba(255,255,255,.8) 28%, rgba(0,0,0,.8) 0%); }
|
||||
29% { background: linear-gradient(to top, rgba(255,255,255,.8) 29%, rgba(0,0,0,.8) 0%); }
|
||||
30% { background: linear-gradient(to top, rgba(255,255,255,.8) 30%, rgba(0,0,0,.8) 0%); }
|
||||
31% { background: linear-gradient(to top, rgba(255,255,255,.8) 31%, rgba(0,0,0,.8) 0%); }
|
||||
32% { background: linear-gradient(to top, rgba(255,255,255,.8) 32%, rgba(0,0,0,.8) 0%); }
|
||||
33% { background: linear-gradient(to top, rgba(255,255,255,.8) 33%, rgba(0,0,0,.8) 0%); }
|
||||
34% { background: linear-gradient(to top, rgba(255,255,255,.8) 34%, rgba(0,0,0,.8) 0%); }
|
||||
35% { background: linear-gradient(to top, rgba(255,255,255,.8) 35%, rgba(0,0,0,.8) 0%); }
|
||||
36% { background: linear-gradient(to top, rgba(255,255,255,.8) 36%, rgba(0,0,0,.8) 0%); }
|
||||
37% { background: linear-gradient(to top, rgba(255,255,255,.8) 37%, rgba(0,0,0,.8) 0%); }
|
||||
38% { background: linear-gradient(to top, rgba(255,255,255,.8) 38%, rgba(0,0,0,.8) 0%); }
|
||||
39% { background: linear-gradient(to top, rgba(255,255,255,.8) 39%, rgba(0,0,0,.8) 0%); }
|
||||
40% { background: linear-gradient(to top, rgba(255,255,255,.8) 40%, rgba(0,0,0,.8) 0%); }
|
||||
41% { background: linear-gradient(to top, rgba(255,255,255,.8) 41%, rgba(0,0,0,.8) 0%); }
|
||||
42% { background: linear-gradient(to top, rgba(255,255,255,.8) 42%, rgba(0,0,0,.8) 0%); }
|
||||
43% { background: linear-gradient(to top, rgba(255,255,255,.8) 43%, rgba(0,0,0,.8) 0%); }
|
||||
44% { background: linear-gradient(to top, rgba(255,255,255,.8) 44%, rgba(0,0,0,.8) 0%); }
|
||||
45% { background: linear-gradient(to top, rgba(255,255,255,.8) 45%, rgba(0,0,0,.8) 0%); }
|
||||
46% { background: linear-gradient(to top, rgba(255,255,255,.8) 46%, rgba(0,0,0,.8) 0%); }
|
||||
47% { background: linear-gradient(to top, rgba(255,255,255,.8) 47%, rgba(0,0,0,.8) 0%); }
|
||||
48% { background: linear-gradient(to top, rgba(255,255,255,.8) 48%, rgba(0,0,0,.8) 0%); }
|
||||
49% { background: linear-gradient(to top, rgba(255,255,255,.8) 49%, rgba(0,0,0,.8) 0%); }
|
||||
50% { background: linear-gradient(to top, rgba(255,255,255,.8) 50%, rgba(0,0,0,.8) 0%); }
|
||||
51% { background: linear-gradient(to top, rgba(255,255,255,.8) 51%, rgba(0,0,0,.8) 0%); }
|
||||
52% { background: linear-gradient(to top, rgba(255,255,255,.8) 52%, rgba(0,0,0,.8) 0%); }
|
||||
53% { background: linear-gradient(to top, rgba(255,255,255,.8) 53%, rgba(0,0,0,.8) 0%); }
|
||||
54% { background: linear-gradient(to top, rgba(255,255,255,.8) 54%, rgba(0,0,0,.8) 0%); }
|
||||
55% { background: linear-gradient(to top, rgba(255,255,255,.8) 55%, rgba(0,0,0,.8) 0%); }
|
||||
56% { background: linear-gradient(to top, rgba(255,255,255,.8) 56%, rgba(0,0,0,.8) 0%); }
|
||||
57% { background: linear-gradient(to top, rgba(255,255,255,.8) 57%, rgba(0,0,0,.8) 0%); }
|
||||
58% { background: linear-gradient(to top, rgba(255,255,255,.8) 58%, rgba(0,0,0,.8) 0%); }
|
||||
59% { background: linear-gradient(to top, rgba(255,255,255,.8) 59%, rgba(0,0,0,.8) 0%); }
|
||||
60% { background: linear-gradient(to top, rgba(255,255,255,.8) 60%, rgba(0,0,0,.8) 0%); }
|
||||
61% { background: linear-gradient(to top, rgba(255,255,255,.8) 61%, rgba(0,0,0,.8) 0%); }
|
||||
62% { background: linear-gradient(to top, rgba(255,255,255,.8) 62%, rgba(0,0,0,.8) 0%); }
|
||||
63% { background: linear-gradient(to top, rgba(255,255,255,.8) 63%, rgba(0,0,0,.8) 0%); }
|
||||
64% { background: linear-gradient(to top, rgba(255,255,255,.8) 64%, rgba(0,0,0,.8) 0%); }
|
||||
65% { background: linear-gradient(to top, rgba(255,255,255,.8) 65%, rgba(0,0,0,.8) 0%); }
|
||||
66% { background: linear-gradient(to top, rgba(255,255,255,.8) 66%, rgba(0,0,0,.8) 0%); }
|
||||
67% { background: linear-gradient(to top, rgba(255,255,255,.8) 67%, rgba(0,0,0,.8) 0%); }
|
||||
68% { background: linear-gradient(to top, rgba(255,255,255,.8) 68%, rgba(0,0,0,.8) 0%); }
|
||||
69% { background: linear-gradient(to top, rgba(255,255,255,.8) 69%, rgba(0,0,0,.8) 0%); }
|
||||
70% { background: linear-gradient(to top, rgba(255,255,255,.8) 70%, rgba(0,0,0,.8) 0%); }
|
||||
71% { background: linear-gradient(to top, rgba(255,255,255,.8) 71%, rgba(0,0,0,.8) 0%); }
|
||||
72% { background: linear-gradient(to top, rgba(255,255,255,.8) 72%, rgba(0,0,0,.8) 0%); }
|
||||
73% { background: linear-gradient(to top, rgba(255,255,255,.8) 73%, rgba(0,0,0,.8) 0%); }
|
||||
74% { background: linear-gradient(to top, rgba(255,255,255,.8) 74%, rgba(0,0,0,.8) 0%); }
|
||||
75% { background: linear-gradient(to top, rgba(255,255,255,.8) 75%, rgba(0,0,0,.8) 0%); }
|
||||
76% { background: linear-gradient(to top, rgba(255,255,255,.8) 76%, rgba(0,0,0,.8) 0%); }
|
||||
77% { background: linear-gradient(to top, rgba(255,255,255,.8) 77%, rgba(0,0,0,.8) 0%); }
|
||||
78% { background: linear-gradient(to top, rgba(255,255,255,.8) 78%, rgba(0,0,0,.8) 0%); }
|
||||
79% { background: linear-gradient(to top, rgba(255,255,255,.8) 79%, rgba(0,0,0,.8) 0%); }
|
||||
80% { background: linear-gradient(to top, rgba(255,255,255,.8) 80%, rgba(0,0,0,.8) 0%); }
|
||||
81% { background: linear-gradient(to top, rgba(255,255,255,.8) 81%, rgba(0,0,0,.8) 0%); }
|
||||
82% { background: linear-gradient(to top, rgba(255,255,255,.8) 82%, rgba(0,0,0,.8) 0%); }
|
||||
83% { background: linear-gradient(to top, rgba(255,255,255,.8) 83%, rgba(0,0,0,.8) 0%); }
|
||||
84% { background: linear-gradient(to top, rgba(255,255,255,.8) 84%, rgba(0,0,0,.8) 0%); }
|
||||
85% { background: linear-gradient(to top, rgba(255,255,255,.8) 85%, rgba(0,0,0,.8) 0%); }
|
||||
86% { background: linear-gradient(to top, rgba(255,255,255,.8) 86%, rgba(0,0,0,.8) 0%); }
|
||||
87% { background: linear-gradient(to top, rgba(255,255,255,.8) 87%, rgba(0,0,0,.8) 0%); }
|
||||
88% { background: linear-gradient(to top, rgba(255,255,255,.8) 88%, rgba(0,0,0,.8) 0%); }
|
||||
89% { background: linear-gradient(to top, rgba(255,255,255,.8) 89%, rgba(0,0,0,.8) 0%); }
|
||||
90% { background: linear-gradient(to top, rgba(255,255,255,.8) 90%, rgba(0,0,0,.8) 0%); }
|
||||
91% { background: linear-gradient(to top, rgba(255,255,255,.8) 91%, rgba(0,0,0,.8) 0%); }
|
||||
92% { background: linear-gradient(to top, rgba(255,255,255,.8) 92%, rgba(0,0,0,.8) 0%); }
|
||||
93% { background: linear-gradient(to top, rgba(255,255,255,.8) 93%, rgba(0,0,0,.8) 0%); }
|
||||
94% { background: linear-gradient(to top, rgba(255,255,255,.8) 94%, rgba(0,0,0,.8) 0%); }
|
||||
95% { background: linear-gradient(to top, rgba(255,255,255,.8) 95%, rgba(0,0,0,.8) 0%); }
|
||||
96% { background: linear-gradient(to top, rgba(255,255,255,.8) 96%, rgba(0,0,0,.8) 0%); }
|
||||
97% { background: linear-gradient(to top, rgba(255,255,255,.8) 97%, rgba(0,0,0,.8) 0%); }
|
||||
98% { background: linear-gradient(to top, rgba(255,255,255,.8) 98%, rgba(0,0,0,.8) 0%); }
|
||||
99% { background: linear-gradient(to top, rgba(255,255,255,.8) 99%, rgba(0,0,0,.8) 0%); }
|
||||
100% { background: linear-gradient(to top, rgba(255,255,255,.8) 100%, rgba(0,0,0,.8) 0%); }
|
||||
}
|
||||
|
||||
@keyframes cooldown-fade {
|
||||
/* Apparently gradients don't animate. We'll see about that! */
|
||||
@ -599,112 +702,8 @@ body {
|
||||
100% { background: linear-gradient(to top, rgba(255,255,255,.8) 100%, rgba(0,0,0,.8) 0%); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes cooldown-fade {
|
||||
0% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 0%, rgba(0,0,0,.8) 0%); }
|
||||
1% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 1%, rgba(0,0,0,.8) 0%); }
|
||||
2% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 2%, rgba(0,0,0,.8) 0%); }
|
||||
3% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 3%, rgba(0,0,0,.8) 0%); }
|
||||
4% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 4%, rgba(0,0,0,.8) 0%); }
|
||||
5% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 5%, rgba(0,0,0,.8) 0%); }
|
||||
6% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 6%, rgba(0,0,0,.8) 0%); }
|
||||
7% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 7%, rgba(0,0,0,.8) 0%); }
|
||||
8% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 8%, rgba(0,0,0,.8) 0%); }
|
||||
9% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 9%, rgba(0,0,0,.8) 0%); }
|
||||
10% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 10%, rgba(0,0,0,.8) 0%); }
|
||||
11% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 11%, rgba(0,0,0,.8) 0%); }
|
||||
12% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 12%, rgba(0,0,0,.8) 0%); }
|
||||
13% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 13%, rgba(0,0,0,.8) 0%); }
|
||||
14% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 14%, rgba(0,0,0,.8) 0%); }
|
||||
15% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 15%, rgba(0,0,0,.8) 0%); }
|
||||
16% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 16%, rgba(0,0,0,.8) 0%); }
|
||||
17% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 17%, rgba(0,0,0,.8) 0%); }
|
||||
18% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 18%, rgba(0,0,0,.8) 0%); }
|
||||
19% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 19%, rgba(0,0,0,.8) 0%); }
|
||||
20% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 20%, rgba(0,0,0,.8) 0%); }
|
||||
21% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 21%, rgba(0,0,0,.8) 0%); }
|
||||
22% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 22%, rgba(0,0,0,.8) 0%); }
|
||||
23% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 23%, rgba(0,0,0,.8) 0%); }
|
||||
24% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 24%, rgba(0,0,0,.8) 0%); }
|
||||
25% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 25%, rgba(0,0,0,.8) 0%); }
|
||||
26% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 26%, rgba(0,0,0,.8) 0%); }
|
||||
27% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 27%, rgba(0,0,0,.8) 0%); }
|
||||
28% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 28%, rgba(0,0,0,.8) 0%); }
|
||||
29% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 29%, rgba(0,0,0,.8) 0%); }
|
||||
30% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 30%, rgba(0,0,0,.8) 0%); }
|
||||
31% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 31%, rgba(0,0,0,.8) 0%); }
|
||||
32% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 32%, rgba(0,0,0,.8) 0%); }
|
||||
33% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 33%, rgba(0,0,0,.8) 0%); }
|
||||
34% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 34%, rgba(0,0,0,.8) 0%); }
|
||||
35% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 35%, rgba(0,0,0,.8) 0%); }
|
||||
36% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 36%, rgba(0,0,0,.8) 0%); }
|
||||
37% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 37%, rgba(0,0,0,.8) 0%); }
|
||||
38% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 38%, rgba(0,0,0,.8) 0%); }
|
||||
39% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 39%, rgba(0,0,0,.8) 0%); }
|
||||
40% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 40%, rgba(0,0,0,.8) 0%); }
|
||||
41% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 41%, rgba(0,0,0,.8) 0%); }
|
||||
42% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 42%, rgba(0,0,0,.8) 0%); }
|
||||
43% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 43%, rgba(0,0,0,.8) 0%); }
|
||||
44% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 44%, rgba(0,0,0,.8) 0%); }
|
||||
45% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 45%, rgba(0,0,0,.8) 0%); }
|
||||
46% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 46%, rgba(0,0,0,.8) 0%); }
|
||||
47% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 47%, rgba(0,0,0,.8) 0%); }
|
||||
48% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 48%, rgba(0,0,0,.8) 0%); }
|
||||
49% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 49%, rgba(0,0,0,.8) 0%); }
|
||||
50% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 50%, rgba(0,0,0,.8) 0%); }
|
||||
51% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 51%, rgba(0,0,0,.8) 0%); }
|
||||
52% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 52%, rgba(0,0,0,.8) 0%); }
|
||||
53% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 53%, rgba(0,0,0,.8) 0%); }
|
||||
54% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 54%, rgba(0,0,0,.8) 0%); }
|
||||
55% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 55%, rgba(0,0,0,.8) 0%); }
|
||||
56% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 56%, rgba(0,0,0,.8) 0%); }
|
||||
57% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 57%, rgba(0,0,0,.8) 0%); }
|
||||
58% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 58%, rgba(0,0,0,.8) 0%); }
|
||||
59% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 59%, rgba(0,0,0,.8) 0%); }
|
||||
60% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 60%, rgba(0,0,0,.8) 0%); }
|
||||
61% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 61%, rgba(0,0,0,.8) 0%); }
|
||||
62% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 62%, rgba(0,0,0,.8) 0%); }
|
||||
63% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 63%, rgba(0,0,0,.8) 0%); }
|
||||
64% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 64%, rgba(0,0,0,.8) 0%); }
|
||||
65% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 65%, rgba(0,0,0,.8) 0%); }
|
||||
66% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 66%, rgba(0,0,0,.8) 0%); }
|
||||
67% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 67%, rgba(0,0,0,.8) 0%); }
|
||||
68% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 68%, rgba(0,0,0,.8) 0%); }
|
||||
69% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 69%, rgba(0,0,0,.8) 0%); }
|
||||
70% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 70%, rgba(0,0,0,.8) 0%); }
|
||||
71% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 71%, rgba(0,0,0,.8) 0%); }
|
||||
72% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 72%, rgba(0,0,0,.8) 0%); }
|
||||
73% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 73%, rgba(0,0,0,.8) 0%); }
|
||||
74% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 74%, rgba(0,0,0,.8) 0%); }
|
||||
75% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 75%, rgba(0,0,0,.8) 0%); }
|
||||
76% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 76%, rgba(0,0,0,.8) 0%); }
|
||||
77% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 77%, rgba(0,0,0,.8) 0%); }
|
||||
78% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 78%, rgba(0,0,0,.8) 0%); }
|
||||
79% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 79%, rgba(0,0,0,.8) 0%); }
|
||||
80% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 80%, rgba(0,0,0,.8) 0%); }
|
||||
81% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 81%, rgba(0,0,0,.8) 0%); }
|
||||
82% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 82%, rgba(0,0,0,.8) 0%); }
|
||||
83% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 83%, rgba(0,0,0,.8) 0%); }
|
||||
84% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 84%, rgba(0,0,0,.8) 0%); }
|
||||
85% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 85%, rgba(0,0,0,.8) 0%); }
|
||||
86% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 86%, rgba(0,0,0,.8) 0%); }
|
||||
87% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 87%, rgba(0,0,0,.8) 0%); }
|
||||
88% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 88%, rgba(0,0,0,.8) 0%); }
|
||||
89% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 89%, rgba(0,0,0,.8) 0%); }
|
||||
90% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 90%, rgba(0,0,0,.8) 0%); }
|
||||
91% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 91%, rgba(0,0,0,.8) 0%); }
|
||||
92% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 92%, rgba(0,0,0,.8) 0%); }
|
||||
93% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 93%, rgba(0,0,0,.8) 0%); }
|
||||
94% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 94%, rgba(0,0,0,.8) 0%); }
|
||||
95% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 95%, rgba(0,0,0,.8) 0%); }
|
||||
96% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 96%, rgba(0,0,0,.8) 0%); }
|
||||
97% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 97%, rgba(0,0,0,.8) 0%); }
|
||||
98% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 98%, rgba(0,0,0,.8) 0%); }
|
||||
99% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 99%, rgba(0,0,0,.8) 0%); }
|
||||
100% { background: -webkit-linear-gradient(to top, rgba(255,255,255,.8) 100%, rgba(0,0,0,.8) 0%); }
|
||||
}
|
||||
|
||||
/* To change cooldown time, also change CODE_SCAN_COOLDOWN_SECONDS in main.js */
|
||||
.cooldown-fade-anim {
|
||||
/* To change cooldown time, also change CODE_SCAN_COOLDOWN_SECONDS in main.js */
|
||||
animation: cooldown-fade 15s ease-in-out;
|
||||
-webkit-animation: cooldown-fade 15s ease-in-out;
|
||||
animation: cooldown-fade 15s ease-in-out;
|
||||
}
|
||||
206
www/js/main.js
206
www/js/main.js
@ -56,6 +56,46 @@ function onDeviceReady() {
|
||||
});
|
||||
}
|
||||
|
||||
// Depending on the device, a few examples are:
|
||||
// - "Android"
|
||||
// - "BlackBerry"
|
||||
// - "iOS"
|
||||
// - "webOS"
|
||||
// - "WinCE"
|
||||
// - "Tizen"
|
||||
|
||||
var DEVICE_ANDROID = 0;
|
||||
var DEVICE_GOOGLEPLAY = 1;
|
||||
var DEVICE_IOS = 2;
|
||||
var DEVICE_WEB = 3;
|
||||
var DEVICE_WINDOWS_PHONE = 5;
|
||||
var DEVICE_WINDOWS = 6;
|
||||
var DEVICE_OTHER = 10;
|
||||
|
||||
function getPlatform() {
|
||||
var devicePlatform = device.platform;
|
||||
switch (devicePlatform) {
|
||||
case 'Android':
|
||||
return DEVICE_ANDROID;
|
||||
case 'iOS':
|
||||
return DEVICE_IOS;
|
||||
case 'WinCE':
|
||||
return DEVICE_WINDOWS_PHONE;
|
||||
case 'Win32NT':
|
||||
return DEVICE_WINDOWS_PHONE;
|
||||
case 'Windows':
|
||||
return DEVICE_WINDOWS;
|
||||
case 'browser':
|
||||
return DEVICE_WEB;
|
||||
default:
|
||||
return DEVICE_OTHER;
|
||||
}
|
||||
}
|
||||
|
||||
function getDeviceVersion() {
|
||||
return device.version;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compare two version strings.
|
||||
* http://stackoverflow.com/a/16187766/2534036
|
||||
@ -192,6 +232,34 @@ function closemodal(modalselector) {
|
||||
|
||||
var scanCodeEnabled = true;
|
||||
|
||||
function startCooldown() {
|
||||
// don't do animation on old stuff
|
||||
if (getPlatform() === DEVICE_ANDROID && compareVersions(getDeviceVersion(), "4.4") < 0) {
|
||||
fallback_anim('#codescanbtn', 0, CODE_SCAN_COOLDOWN_SECONDS, 1000);
|
||||
} else {
|
||||
$('#codescanbtn').addClass('cooldown-fade-anim');
|
||||
}
|
||||
setTimeout(function () {
|
||||
endCooldown();
|
||||
}, CODE_SCAN_COOLDOWN_SECONDS * 1000);
|
||||
}
|
||||
|
||||
function fallback_anim(selector, currstep, maxstep, interval) {
|
||||
var cval = Math.round((currstep / maxstep) * 255);
|
||||
$(selector).css('background-color', 'rgba(' + cval + ',' + cval + ',' + cval + ',.8)');
|
||||
if (currstep < maxstep) {
|
||||
setTimeout(function () {
|
||||
fallback_anim(selector, currstep + 1, maxstep, interval);
|
||||
}, intervalsecs);
|
||||
}
|
||||
}
|
||||
|
||||
function endCooldown() {
|
||||
scanCodeEnabled = true;
|
||||
$('#codescanbtn').removeClass('cooldown-fade-anim');
|
||||
$('#codescanbtn').css('background-color', 'rgba(255,255,255,.8)');
|
||||
}
|
||||
|
||||
function scanCode() {
|
||||
// If code scanning disabled (cooldown, etc)
|
||||
if (!scanCodeEnabled) {
|
||||
@ -201,7 +269,7 @@ function scanCode() {
|
||||
cordova.plugins.barcodeScanner.scan(
|
||||
function (result) {
|
||||
if (!result.cancelled) {
|
||||
scanCodeEnabled = false;
|
||||
startCooldown();
|
||||
$.getJSON(mkApiUrl('code2item', 'gs'), {
|
||||
code: result.text,
|
||||
latitude: latitude,
|
||||
@ -209,24 +277,17 @@ function scanCode() {
|
||||
accuracy: gpsaccuracy
|
||||
}, function (data) {
|
||||
if (data.status === 'OK') {
|
||||
$('#codescanbtn').addClass('cooldown-fade-anim');
|
||||
setTimeout(function () {
|
||||
scanCodeEnabled = true;
|
||||
$('#codescanbtn').removeClass('cooldown-fade-anim');
|
||||
}, CODE_SCAN_COOLDOWN_SECONDS * 1000);
|
||||
if (data.messages.length >= 2) {
|
||||
showFoundBox2(data.messages[0].title, data.messages[0].text, data.messages[1].title, data.messages[1].text);
|
||||
} else {
|
||||
showFoundBox(data.messages[0].title, data.messages[0].text);
|
||||
}
|
||||
} else {
|
||||
scanCodeEnabled = true;
|
||||
$('#codescanbtn').removeClass('cooldown-fade-anim');
|
||||
endCooldown();
|
||||
showFoundBox("Huh?", data.message);
|
||||
}
|
||||
}).fail(function () {
|
||||
scanCodeEnabled = true;
|
||||
$('#codescanbtn').removeClass('cooldown-fade-anim');
|
||||
endCooldown();
|
||||
showFoundBox("Huh?", "Nothing happened!");
|
||||
//navigator.notification.alert("Nothing happened!", null, "Huh?", 'OK');
|
||||
});
|
||||
@ -234,8 +295,7 @@ function scanCode() {
|
||||
}
|
||||
},
|
||||
function (error) {
|
||||
scanCodeEnabled = true;
|
||||
$('#codescanbtn').removeClass('cooldown-fade-anim');
|
||||
endCooldown();
|
||||
navigator.notification.alert("Scanning failed: " + error, null, "Error", 'Dismiss');
|
||||
},
|
||||
{
|
||||
@ -324,10 +384,11 @@ function getTeamColorFromId(id) {
|
||||
*/
|
||||
function getWwwFolderPath() {
|
||||
var path = window.location.pathname;
|
||||
var sizefilename = path.length - (path.lastIndexOf("/")+1);
|
||||
path = path.substr( path, path.length - sizefilename );
|
||||
var sizefilename = path.length - (path.lastIndexOf("/") + 1);
|
||||
path = path.substr(path, path.length - sizefilename);
|
||||
return path;
|
||||
};
|
||||
}
|
||||
;
|
||||
|
||||
// Handle back button to close things
|
||||
document.addEventListener("backbutton", function (event) {
|
||||
@ -339,4 +400,117 @@ document.addEventListener("backbutton", function (event) {
|
||||
} else if ($('#chatmsgs').css('display') !== 'none') {
|
||||
toggleChat();
|
||||
}
|
||||
}, false);
|
||||
}, false);
|
||||
|
||||
/*
|
||||
* Konami-JS ~
|
||||
* :: Now with support for touch events and multiple instances for
|
||||
* :: those situations that call for multiple easter eggs!
|
||||
* Code: https://github.com/snaptortoise/konami-js
|
||||
* Examples: http://www.snaptortoise.com/konami-js
|
||||
* Copyright (c) 2009 George Mandis (georgemandis.com, snaptortoise.com)
|
||||
* Version: 1.4.6 (3/2/2016)
|
||||
* Licensed under the MIT License (http://opensource.org/licenses/MIT)
|
||||
* Tested in: Safari 4+, Google Chrome 4+, Firefox 3+, IE7+, Mobile Safari 2.2.1 and Dolphin Browser
|
||||
*/
|
||||
|
||||
var Konami = function (callback) {
|
||||
var konami = {
|
||||
addEvent: function (obj, type, fn, ref_obj) {
|
||||
if (obj.addEventListener)
|
||||
obj.addEventListener(type, fn, false);
|
||||
else if (obj.attachEvent) {
|
||||
// IE
|
||||
obj["e" + type + fn] = fn;
|
||||
obj[type + fn] = function () {
|
||||
obj["e" + type + fn](window.event, ref_obj);
|
||||
}
|
||||
obj.attachEvent("on" + type, obj[type + fn]);
|
||||
}
|
||||
},
|
||||
input: "",
|
||||
pattern: "38384040373937396665",
|
||||
load: function (link) {
|
||||
this.addEvent(document, "keydown", function (e, ref_obj) {
|
||||
if (ref_obj)
|
||||
konami = ref_obj; // IE
|
||||
konami.input += e ? e.keyCode : event.keyCode;
|
||||
if (konami.input.length > konami.pattern.length)
|
||||
konami.input = konami.input.substr((konami.input.length - konami.pattern.length));
|
||||
if (konami.input == konami.pattern) {
|
||||
konami.code(link);
|
||||
konami.input = "";
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}, this);
|
||||
this.iphone.load(link);
|
||||
},
|
||||
code: function (link) {
|
||||
window.location = link
|
||||
},
|
||||
iphone: {
|
||||
start_x: 0,
|
||||
start_y: 0,
|
||||
stop_x: 0,
|
||||
stop_y: 0,
|
||||
tap: false,
|
||||
capture: false,
|
||||
orig_keys: "",
|
||||
keys: ["UP", "UP", "DOWN", "DOWN", "LEFT", "RIGHT", "LEFT", "RIGHT", "TAP", "TAP"],
|
||||
code: function (link) {
|
||||
konami.code(link);
|
||||
},
|
||||
load: function (link) {
|
||||
this.orig_keys = this.keys;
|
||||
konami.addEvent(document, "touchmove", function (e) {
|
||||
if (e.touches.length == 1 && konami.iphone.capture == true) {
|
||||
var touch = e.touches[0];
|
||||
konami.iphone.stop_x = touch.pageX;
|
||||
konami.iphone.stop_y = touch.pageY;
|
||||
konami.iphone.tap = false;
|
||||
konami.iphone.capture = false;
|
||||
konami.iphone.check_direction();
|
||||
}
|
||||
});
|
||||
konami.addEvent(document, "touchend", function (evt) {
|
||||
if (konami.iphone.tap == true)
|
||||
konami.iphone.check_direction(link);
|
||||
}, false);
|
||||
konami.addEvent(document, "touchstart", function (evt) {
|
||||
konami.iphone.start_x = evt.changedTouches[0].pageX;
|
||||
konami.iphone.start_y = evt.changedTouches[0].pageY;
|
||||
konami.iphone.tap = true;
|
||||
konami.iphone.capture = true;
|
||||
});
|
||||
},
|
||||
check_direction: function (link) {
|
||||
x_magnitude = Math.abs(this.start_x - this.stop_x);
|
||||
y_magnitude = Math.abs(this.start_y - this.stop_y);
|
||||
x = ((this.start_x - this.stop_x) < 0) ? "RIGHT" : "LEFT";
|
||||
y = ((this.start_y - this.stop_y) < 0) ? "DOWN" : "UP";
|
||||
result = (x_magnitude > y_magnitude) ? x : y;
|
||||
result = (this.tap == true) ? "TAP" : result;
|
||||
|
||||
if (result == this.keys[0])
|
||||
this.keys = this.keys.slice(1, this.keys.length);
|
||||
if (this.keys.length == 0) {
|
||||
this.keys = this.orig_keys;
|
||||
this.code(link);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
typeof callback === "string" && konami.load(callback);
|
||||
if (typeof callback === "function") {
|
||||
konami.code = callback;
|
||||
konami.load();
|
||||
}
|
||||
|
||||
return konami;
|
||||
};
|
||||
|
||||
var dev_console = new Konami(function () {
|
||||
alert(eval(prompt("Enter console command: ", "$(\"#\")")));
|
||||
});
|
||||
@ -15,43 +15,6 @@
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
// Depending on the device, a few examples are:
|
||||
// - "Android"
|
||||
// - "BlackBerry"
|
||||
// - "iOS"
|
||||
// - "webOS"
|
||||
// - "WinCE"
|
||||
// - "Tizen"
|
||||
|
||||
var DEVICE_ANDROID = 0;
|
||||
var DEVICE_GOOGLEPLAY = 1;
|
||||
var DEVICE_IOS = 2;
|
||||
var DEVICE_WEB = 3;
|
||||
var DEVICE_WINDOWS_PHONE = 5;
|
||||
var DEVICE_WINDOWS = 6;
|
||||
var DEVICE_OTHER = 10;
|
||||
|
||||
function getPlatform() {
|
||||
var devicePlatform = device.platform;
|
||||
switch (devicePlatform) {
|
||||
case 'Android':
|
||||
return DEVICE_ANDROID;
|
||||
case 'iOS':
|
||||
return DEVICE_IOS;
|
||||
case 'WinCE':
|
||||
return DEVICE_WINDOWS_PHONE;
|
||||
case 'Win32NT':
|
||||
return DEVICE_WINDOWS_PHONE;
|
||||
case 'Windows':
|
||||
return DEVICE_WINDOWS;
|
||||
case 'browser':
|
||||
return DEVICE_WEB;
|
||||
default:
|
||||
return DEVICE_OTHER;
|
||||
}
|
||||
}
|
||||
|
||||
function buycoins(productId) {
|
||||
if (getPlatform() == DEVICE_ANDROID) {
|
||||
inAppPurchase
|
||||
|
||||
@ -17,6 +17,9 @@
|
||||
-->
|
||||
<div class="scrollable-box">
|
||||
<div class='list-group'>
|
||||
<div class="list-group-item" style="display: none;" id="old-device-warning" onclick="snark()">
|
||||
Warning: Your device's operating system is outdated. Some features may not work properly.
|
||||
</div>
|
||||
<div class='list-group-item' onclick='openIntro()'>
|
||||
Show Introduction
|
||||
</div>
|
||||
@ -63,6 +66,29 @@
|
||||
}
|
||||
loadToggles();
|
||||
}
|
||||
|
||||
|
||||
loadToggles();
|
||||
|
||||
/* Old OS warning */
|
||||
if (getPlatform() === DEVICE_ANDROID && compareVersions(getDeviceVersion(), "4.4") < 0) {
|
||||
$('#old-device-warning').css('display', 'block');
|
||||
}
|
||||
|
||||
function snark() {
|
||||
var text = "Warning: Your device's operating system is outdated. Some features may not work properly.<br />";
|
||||
switch (Math.round(Math.random() * (4 - 1) + 1)) {
|
||||
case 1:
|
||||
text += "You might want to buy a new phone. They almost never explode!";
|
||||
break;
|
||||
case 2:
|
||||
text += "Don't complain, it was new when you bought it. <i>I</i> didn't make it old!";
|
||||
break;
|
||||
case 3:
|
||||
text += "Cheer up, most of the game will still work. Just not the best part ;)";
|
||||
break;
|
||||
case 4:
|
||||
text += "If it makes you feel better, you can think about filing a bug report.";
|
||||
}
|
||||
$('#old-device-warning').html(text);
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user