OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>Hello, World!</title> | |
5 <style> | |
6 .balls { | |
7 border: 1px solid black; | |
8 width: 420px; | |
9 height: 420px; | |
10 margin: 5px; | |
11 } | |
12 | |
13 .ball { | |
14 display: inline-block; | |
15 position: absolute; | |
16 width: 20px; | |
17 height: 20px; | |
18 border: 1px solid black; | |
19 -webkit-border-radius: 10px; | |
20 -moz-border-radius: 10px; | |
21 border-radius: 10px; | |
22 } | |
23 | |
24 .fps-bar { | |
25 width: 200px; | |
26 height: 10px; | |
27 border: 1px solid black; | |
28 display: inline-block; | |
29 margin-left: 5px; | |
30 } | |
31 | |
32 .fps { | |
33 height: 10px; | |
34 width: 60px; | |
35 background-color: green; | |
36 } | |
37 </style> | |
38 </head> | |
39 <body ng-app> | |
40 <div bounce-controller> | |
41 <div class="balls"> | |
42 <div ng-repeat="ball in bounce.balls" | |
43 class="{{bounce.ballClassName}}" | |
44 ball-position="ball"></div> | |
45 </div> | |
46 | |
47 <div> | |
48 <div class="fps-bar"> | |
49 <div class="fps" ng-style-width="bounce.fps*4 + 'px'"></div> | |
50 </div> | |
51 </div> | |
52 | |
53 {{bounce.fps}} fps. ({{bounce.balls.length}} balls) [{{1000/bounce.fps}} ms]
<br> | |
54 Digest: {{bounce.digestTime}} ms<br> | |
55 <a href ng-click="bounce.changeCount(1)">+1</a> | |
56 <a href ng-click="bounce.changeCount(10)">+10</a> | |
57 <a href ng-click="bounce.changeCount(100)">+100</a> | |
58 <br> | |
59 <a href ng-click="bounce.changeCount(-1)">-1</a> | |
60 <a href ng-click="bounce.changeCount(-10)">-10</a> | |
61 <a href ng-click="bounce.changeCount(-100)">-100</a> | |
62 <br> | |
63 <a href ng-click="bounce.playPause()">▶❙❙</a> <br> | |
64 <a href ng-click="bounce.toggleCSS()">Toggle CSS</a><br> | |
65 <a href ng-click="bounce.timeDigest()">noop</a><br> | |
66 </div> | |
67 | |
68 <script type="application/dart" src="bouncy_balls.dart"></script> | |
69 <script src="packages/browser/dart.js"></script> | |
70 </body> | |
71 </html> | |
OLD | NEW |