Skip to content

Commit bb11822

Browse files
author
Raphael Brand
committed
added distribution files
1 parent 0a1ed60 commit bb11822

File tree

5 files changed

+526
-0
lines changed

5 files changed

+526
-0
lines changed

‎demo/dist/css/acceleration.css‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
.active .zero {
2+
animation: blink_animation 2s;
3+
animation-direction: alternate;
4+
animation-delay: 1s; }
5+
6+
@keyframes blink_animation {
7+
0% {
8+
color: #fff; }
9+
100% {
10+
color: #bbb; } }
11+
12+
.btnWrap button {
13+
width: 100px;
14+
height: 100px;
15+
margin: 5px;
16+
font-size: 1.3em;
17+
border-radius: 5px;
18+
border: 4px solid #505;
19+
background-color: #dcd;
20+
box-shadow: 0px 0px 10px #333;
21+
transition: all 300ms;
22+
text-transform: uppercase; }
23+
.btnWrap button:focus, .btnWrap button:active, .btnWrap button.active {
24+
background-color: #abc;
25+
background: linear-gradient(#abc 30%, #def 70%);
26+
border: 4px solid #eee;
27+
color: #f03;
28+
filter: blur(0.045em); }
29+
.btnWrap button:hover {
30+
cursor: pointer; }
31+
32+
.btnWrap {
33+
top: 10px;
34+
overflow: hidden;
35+
display: inline;
36+
position: absolute;
37+
width: calc(50% - 10px);
38+
right: 10px;
39+
min-width: 280px;
40+
opacity: 1;
41+
transition: all 1s; }
42+
43+
body {
44+
overflow: hidden;
45+
background-color: slategray;
46+
padding: 7px;
47+
transition: background-color 1s; }
48+
49+
.overlay {
50+
position: absolute;
51+
text-align: center;
52+
top: 50px;
53+
left: 50px;
54+
opacity: 1;
55+
font-size: 36px;
56+
transition: opacity 1s, font-size 3s;
57+
animation: fadeIn 800ms; }
58+
59+
@keyframes fadeIn {
60+
0% {
61+
opacity: 0; }
62+
100% {
63+
opacity: 100%; } }
64+
.overlay.hidden {
65+
opacity: 0;
66+
font-size: 16px; }
67+
.overlay p, .overlay div.info.button {
68+
font-family: "Courier";
69+
font-size: inherit;
70+
text-decoration: none;
71+
text-align: center;
72+
display: block;
73+
color: #fff; }
74+
75+
div.info.button {
76+
font-family: 'Courier';
77+
cursor: pointer;
78+
display: block;
79+
margin-top: 12px;
80+
height: 45px;
81+
font-size: 1.1em;
82+
font-stretch: 1.1em;
83+
background-color: lightgray;
84+
padding: 10px;
85+
overflow: hidden;
86+
line-height: 1.4em;
87+
transition: all 1s;
88+
color: #000; }
89+
div.info.button .innerText {
90+
padding: 0;
91+
opacity: 0;
92+
transition: padding 2s, opacity 1s; }
93+
div.info.button.active {
94+
height: 300px;
95+
overflow-y: yes;
96+
text-decoration: none; }
97+
div.info.button.active .innerText {
98+
padding: 3px;
99+
opacity: 1; }
100+
101+
@media screen and (max-width: 414px) {
102+
body {
103+
background-color: #338; }
104+
.btnWrap {
105+
opacity: 0.5;
106+
position: absolute;
107+
top: 40px; }
108+
div.info.button {
109+
min-width: 279px;
110+
height: 72px; }
111+
div.info.button.active {
112+
color: transparent;
113+
height: 282px; }
114+
div.info.button.active .innerText {
115+
padding: 3px;
116+
color: black;
117+
position: relative;
118+
bottom: 62px;
119+
clear: both; } }

‎demo/dist/css/main.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
.active .zero {
2+
animation: blink_animation 2s;
3+
animation-direction: alternate;
4+
animation-delay: 1s; }
5+
6+
@keyframes blink_animation {
7+
0% {
8+
color: #fff; }
9+
100% {
10+
color: #bbb; } }
11+
12+
.btnWrap button {
13+
width: 100px;
14+
height: 100px;
15+
margin: 5px;
16+
font-size: 1.3em;
17+
border-radius: 5px;
18+
border: 4px solid #505;
19+
background-color: #dcd;
20+
box-shadow: 0px 0px 10px #333;
21+
transition: all 300ms;
22+
text-transform: uppercase; }
23+
.btnWrap button:focus, .btnWrap button:active, .btnWrap button.active {
24+
background-color: #abc;
25+
background: linear-gradient(#abc 30%, #def 70%);
26+
border: 4px solid #eee;
27+
color: #f03;
28+
filter: blur(0.045em); }
29+
.btnWrap button:hover {
30+
cursor: pointer; }
31+
32+
.btnWrap {
33+
top: 10px;
34+
overflow: hidden;
35+
display: inline;
36+
position: absolute;
37+
width: calc(50% - 10px);
38+
right: 10px;
39+
min-width: 280px;
40+
opacity: 1;
41+
transition: all 1s; }
42+
43+
body {
44+
overflow: hidden;
45+
background-color: slategray;
46+
padding: 7px;
47+
transition: background-color 1s; }
48+
49+
.overlay {
50+
position: absolute;
51+
text-align: center;
52+
top: 50px;
53+
left: 50px;
54+
opacity: 1;
55+
font-size: 36px;
56+
transition: opacity 1s, font-size 3s;
57+
animation: fadeIn 800ms; }
58+
59+
@keyframes fadeIn {
60+
0% {
61+
opacity: 0; }
62+
100% {
63+
opacity: 100%; } }
64+
.overlay.hidden {
65+
opacity: 0;
66+
font-size: 16px; }
67+
.overlay p, .overlay div.info.button {
68+
font-family: "Courier";
69+
font-size: inherit;
70+
text-decoration: none;
71+
text-align: center;
72+
display: block;
73+
color: #fff; }
74+
75+
div.info.button {
76+
font-family: 'Courier';
77+
cursor: pointer;
78+
display: block;
79+
margin-top: 12px;
80+
height: 45px;
81+
font-size: 1.1em;
82+
font-stretch: 1.1em;
83+
background-color: lightgray;
84+
padding: 10px;
85+
overflow: hidden;
86+
line-height: 1.4em;
87+
transition: all 1s;
88+
color: #000; }
89+
div.info.button .innerText {
90+
padding: 0;
91+
opacity: 0;
92+
transition: padding 2s, opacity 1s; }
93+
div.info.button.active {
94+
height: 300px;
95+
overflow-y: yes;
96+
text-decoration: none; }
97+
div.info.button.active .innerText {
98+
padding: 3px;
99+
opacity: 1; }
100+
101+
@media screen and (max-width: 414px) {
102+
body {
103+
background-color: #338; }
104+
.btnWrap {
105+
opacity: 0.5;
106+
position: absolute;
107+
top: 40px; }
108+
div.info.button {
109+
min-width: 279px;
110+
height: 72px; }
111+
div.info.button.active {
112+
color: transparent;
113+
height: 282px; }
114+
div.info.button.active .innerText {
115+
padding: 3px;
116+
color: black;
117+
position: relative;
118+
bottom: 62px;
119+
clear: both; } }
120+
121+
#perspective {
122+
position: absolute;
123+
top: 0px;
124+
right: 0px; }

‎demo/dist/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<html><head><title>Canvas - Pacman-alike-playfield (work-in-progress)</title><link href="https://fonts.googleapis.com/css?family=Fresca"/><link href="/css/main.css" rel="stylesheet"/><script src="https://threejs.org/build/three.min.js"></script><script src="https://threejs.org/examples/js/renderers/Projector.js"></script><script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script><script type="text/javascript" data-main="js/main" src="js/vendor/require.min.js"></script></head><body><div class="container"><canvas id="canvas" width="300" height="300"></canvas><div id="perspective"></div><div id="perspective_stats"></div><div class="btnWrap"><button class="left">left</button><button class="up">up</button><button class="right">right</button><button class="down">down</button></div><div class="overlay"><p class="text-2x m-xs-b-lg">starting app ...</p></div><div class="info button text-2x m-xs-b-lg" title="You can use the arrow keys, too">Click here to see the map to get from left to top right!<br/><div class="innerText"></div></div></div></body></html>

0 commit comments

Comments
 (0)