1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/ko/kosample/client/src/main/webapp/pages/index.html Tue Apr 26 08:04:12 2016 +0200
1.3 @@ -0,0 +1,91 @@
1.4 +<!--
1.5 +
1.6 + Back 2 Browser Bytecode Translator
1.7 + Copyright (C) 2012-2015 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
1.8 +
1.9 + This program is free software: you can redistribute it and/or modify
1.10 + it under the terms of the GNU General Public License as published by
1.11 + the Free Software Foundation, version 2 of the License.
1.12 +
1.13 + This program is distributed in the hope that it will be useful,
1.14 + but WITHOUT ANY WARRANTY; without even the implied warranty of
1.15 + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
1.16 + GNU General Public License for more details.
1.17 +
1.18 + You should have received a copy of the GNU General Public License
1.19 + along with this program. Look for COPYING file in the top folder.
1.20 + If not, see http://opensource.org/licenses/GPL-2.0.
1.21 +
1.22 +-->
1.23 +<!DOCTYPE html>
1.24 +<html>
1.25 + <head>
1.26 + <title></title>
1.27 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
1.28 + <style type="text/css">
1.29 + @-webkit-keyframes spin {
1.30 + 0% { -webkit-transform: rotate(0deg); }
1.31 + 100% { -webkit-transform: rotate(360deg); }
1.32 + }
1.33 + @keyframes spin {
1.34 + 0% { transform: rotate(0deg); }
1.35 + 100% { transform: rotate(360deg); }
1.36 + }
1.37 +
1.38 + input {
1.39 + width: 100%;
1.40 + }
1.41 +
1.42 + .rotate {
1.43 + -webkit-animation-name: spin;
1.44 + -webkit-animation-duration: 3s;
1.45 + -webkit-animation-iteration-count: infinite;
1.46 + -webkit-animation-direction: alternate;
1.47 + animation-name: spin;
1.48 + animation-duration: 3s;
1.49 + animation-iteration-count: infinite;
1.50 + animation-direction: alternate;
1.51 + }
1.52 +
1.53 + #scene {
1.54 + position: relative;
1.55 + top: 60px;
1.56 + text-align: center;
1.57 + }
1.58 +
1.59 + #words span {
1.60 + border: 1px solid #ccc;
1.61 + background: rgba(255,255,155,0.8);
1.62 + text-align: center;
1.63 + font-size: 30px;
1.64 + -webkit-box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
1.65 + box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
1.66 + position: absolute;
1.67 + }
1.68 +
1.69 + #words span:nth-child(1) { left: 45%; top: 0px; }
1.70 + #words span:nth-child(2) { left: 25%; top: 100px; }
1.71 + #words span:nth-child(3) { left: 65%; top: 100px; }
1.72 + #words span:nth-child(4) { left: 10%; top: 200px; }
1.73 + #words span:nth-child(5) { left: 45%; top: 200px; }
1.74 + #words span:nth-child(6) { left: 80%; top: 200px; }
1.75 +
1.76 + </style>
1.77 + </head>
1.78 + <body>
1.79 + <h1>Words Demo</h1>
1.80 + <input data-bind="textInput: message">
1.81 + <br>
1.82 + <button data-bind="enable: !rotating(), click: $root.turnAnimationOn">Start</button>
1.83 + <button data-bind="enable: rotating, click: $root.turnAnimationOff">Stop</button>
1.84 + <button data-bind="enable: !rotating(), click: $root.rotate5s">Rotate Few Seconds</button>
1.85 + <button data-bind="click: $root.showScreenSize">Screen Size!</button>
1.86 +
1.87 + <div id="scene">
1.88 + <span id="words" data-bind="foreach: words">
1.89 + <span data-bind="text: $data, css: { 'rotate' : $root.rotating } "></span>
1.90 + </span>
1.91 + </div>
1.92 +<!-- ${browser.bootstrap} -->
1.93 + </body>
1.94 +</html>