|
jaroslav@1941
|
1 |
<!--
|
|
jaroslav@1941
|
2 |
|
|
jaroslav@1941
|
3 |
Back 2 Browser Bytecode Translator
|
|
jaroslav@1941
|
4 |
Copyright (C) 2012-2015 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
|
|
jaroslav@1941
|
5 |
|
|
jaroslav@1941
|
6 |
This program is free software: you can redistribute it and/or modify
|
|
jaroslav@1941
|
7 |
it under the terms of the GNU General Public License as published by
|
|
jaroslav@1941
|
8 |
the Free Software Foundation, version 2 of the License.
|
|
jaroslav@1941
|
9 |
|
|
jaroslav@1941
|
10 |
This program is distributed in the hope that it will be useful,
|
|
jaroslav@1941
|
11 |
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
jaroslav@1941
|
12 |
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
jaroslav@1941
|
13 |
GNU General Public License for more details.
|
|
jaroslav@1941
|
14 |
|
|
jaroslav@1941
|
15 |
You should have received a copy of the GNU General Public License
|
|
jaroslav@1941
|
16 |
along with this program. Look for COPYING file in the top folder.
|
|
jaroslav@1941
|
17 |
If not, see http://opensource.org/licenses/GPL-2.0.
|
|
jaroslav@1941
|
18 |
|
|
jaroslav@1941
|
19 |
-->
|
|
jaroslav@1941
|
20 |
<!DOCTYPE html>
|
|
jaroslav@1941
|
21 |
<html>
|
|
jaroslav@1941
|
22 |
<head>
|
|
jaroslav@1941
|
23 |
<title></title>
|
|
jaroslav@1941
|
24 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
jaroslav@1941
|
25 |
<style type="text/css">
|
|
jaroslav@1941
|
26 |
@-webkit-keyframes spin {
|
|
jaroslav@1941
|
27 |
0% { -webkit-transform: rotate(0deg); }
|
|
jaroslav@1941
|
28 |
100% { -webkit-transform: rotate(360deg); }
|
|
jaroslav@1941
|
29 |
}
|
|
jaroslav@1941
|
30 |
@keyframes spin {
|
|
jaroslav@1941
|
31 |
0% { transform: rotate(0deg); }
|
|
jaroslav@1941
|
32 |
100% { transform: rotate(360deg); }
|
|
jaroslav@1941
|
33 |
}
|
|
jaroslav@1941
|
34 |
|
|
jaroslav@1941
|
35 |
input {
|
|
jaroslav@1941
|
36 |
width: 100%;
|
|
jaroslav@1941
|
37 |
}
|
|
jaroslav@1941
|
38 |
|
|
jaroslav@1941
|
39 |
.rotate {
|
|
jaroslav@1941
|
40 |
-webkit-animation-name: spin;
|
|
jaroslav@1941
|
41 |
-webkit-animation-duration: 3s;
|
|
jaroslav@1941
|
42 |
-webkit-animation-iteration-count: infinite;
|
|
jaroslav@1941
|
43 |
-webkit-animation-direction: alternate;
|
|
jaroslav@1941
|
44 |
animation-name: spin;
|
|
jaroslav@1941
|
45 |
animation-duration: 3s;
|
|
jaroslav@1941
|
46 |
animation-iteration-count: infinite;
|
|
jaroslav@1941
|
47 |
animation-direction: alternate;
|
|
jaroslav@1941
|
48 |
}
|
|
jaroslav@1941
|
49 |
|
|
jaroslav@1941
|
50 |
#scene {
|
|
jaroslav@1941
|
51 |
position: relative;
|
|
jaroslav@1941
|
52 |
top: 60px;
|
|
jaroslav@1941
|
53 |
text-align: center;
|
|
jaroslav@1941
|
54 |
}
|
|
jaroslav@1941
|
55 |
|
|
jaroslav@1941
|
56 |
#words span {
|
|
jaroslav@1941
|
57 |
border: 1px solid #ccc;
|
|
jaroslav@1941
|
58 |
background: rgba(255,255,155,0.8);
|
|
jaroslav@1941
|
59 |
text-align: center;
|
|
jaroslav@1941
|
60 |
font-size: 30px;
|
|
jaroslav@1941
|
61 |
-webkit-box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
|
|
jaroslav@1941
|
62 |
box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
|
|
jaroslav@1941
|
63 |
position: absolute;
|
|
jaroslav@1941
|
64 |
}
|
|
jaroslav@1941
|
65 |
|
|
jaroslav@1941
|
66 |
#words span:nth-child(1) { left: 45%; top: 0px; }
|
|
jaroslav@1941
|
67 |
#words span:nth-child(2) { left: 25%; top: 100px; }
|
|
jaroslav@1941
|
68 |
#words span:nth-child(3) { left: 65%; top: 100px; }
|
|
jaroslav@1941
|
69 |
#words span:nth-child(4) { left: 10%; top: 200px; }
|
|
jaroslav@1941
|
70 |
#words span:nth-child(5) { left: 45%; top: 200px; }
|
|
jaroslav@1941
|
71 |
#words span:nth-child(6) { left: 80%; top: 200px; }
|
|
jaroslav@1941
|
72 |
|
|
jaroslav@1941
|
73 |
</style>
|
|
jaroslav@1941
|
74 |
</head>
|
|
jaroslav@1941
|
75 |
<body>
|
|
jaroslav@1941
|
76 |
<h1>Words Demo</h1>
|
|
jaroslav@1941
|
77 |
<input data-bind="textInput: message">
|
|
jaroslav@1941
|
78 |
<br>
|
|
jaroslav@1941
|
79 |
<button data-bind="enable: !rotating(), click: $root.turnAnimationOn">Start</button>
|
|
jaroslav@1941
|
80 |
<button data-bind="enable: rotating, click: $root.turnAnimationOff">Stop</button>
|
|
jaroslav@1941
|
81 |
<button data-bind="enable: !rotating(), click: $root.rotate5s">Rotate Few Seconds</button>
|
|
jaroslav@1941
|
82 |
<button data-bind="click: $root.showScreenSize">Screen Size!</button>
|
|
jaroslav@1947
|
83 |
<button id='beginTest' data-bind="click: $root.beginTest">Automatic Test</button>
|
|
jaroslav@1941
|
84 |
|
|
jaroslav@1941
|
85 |
<div id="scene">
|
|
jaroslav@1941
|
86 |
<span id="words" data-bind="foreach: words">
|
|
jaroslav@1941
|
87 |
<span data-bind="text: $data, css: { 'rotate' : $root.rotating } "></span>
|
|
jaroslav@1941
|
88 |
</span>
|
|
jaroslav@1941
|
89 |
</div>
|
|
jaroslav@1941
|
90 |
<!-- ${browser.bootstrap} -->
|
|
jaroslav@1941
|
91 |
</body>
|
|
jaroslav@1941
|
92 |
</html>
|