Mercurialhg/bck2brwsr / file revision
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | raw | help
ko/archetype/src/main/resources/archetype-resources/src/main/webapp/pages/index.html
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Mon, 09 Sep 2013 17:34:30 +0200
changeset 1273 37ad459579bc
child 1300 ee3fba561fd8
permissions -rw-r--r--
Rewritting the archetype to be simpler and more easily modifiable to one's needs 
     1 <!DOCTYPE html>

     2 <html>

     3     <head>

     4         <title></title>

     5         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     6 

     7         <style type="text/css">

     8             @-webkit-keyframes spin {

     9                 0% { -webkit-transform: rotate(0deg); }

    10                 100% { -webkit-transform: rotate(360deg); }

    11             }

    12 

    13             .rotate {

    14                 -webkit-animation-name: spin;

    15                 -webkit-animation-duration: 3s;

    16                 -webkit-animation-iteration-count: infinite;

    17                 -webkit-animation-direction: alternate;

    18             }

    19 

    20             #scene {

    21                 position: relative;

    22                 top: 60px;

    23                 text-align: center;

    24             }

    25             

    26             #words span {

    27                 border: 1px solid #ccc;

    28                 background: rgba(255,255,155,0.8);

    29                 text-align: center;

    30                 font-size: 30px;                

    31                 -webkit-box-shadow: inset 0 0 40px rgba(0,0,0,0.4);

    32                 position: absolute;

    33             }

    34 

    35             #words span:nth-child(1) { left: 45%; top: 0px; }

    36             #words span:nth-child(2) { left: 25%; top: 100px; }

    37             #words span:nth-child(3) { left: 65%; top: 100px; }

    38             #words span:nth-child(4) { left: 10%; top: 200px; }

    39             #words span:nth-child(5) { left: 45%; top: 200px; }

    40             #words span:nth-child(6) { left: 80%; top: 200px; }

    41             

    42         </style>

    43 

    44     </head>

    45     <body>

    46         <h1>Words Demo</h1>

    47         <input data-bind="value: message, valueUpdate: 'afterkeydown'" size="80">

    48         <br>

    49         <button data-bind="enable: !on(), click: $root.turnOn">Start</button>

    50         <button data-bind="enable: on, click: $root.turnOff">Stop</button>

    51 

    52         <div id="scene">

    53             <span id="words" data-bind="foreach: words">

    54                 <span data-bind="text: $data, css: { 'rotate' : $root.on } "></span>

    55             </span>

    56         </div>

    57         <script type="text/javascript" src="bck2brwsr.js"></script>

    58         <script>

    59             var vm = bck2brwsr('${project.build.finalName}.jar');

    60             vm.loadClass('${package}.Main');

    61         </script>

    62     </body>

    63 </html>
hg/bck2brwsr