minesweeper/src/main/webapp/pages/index.html
author Jaroslav Tulach <jtulach@netbeans.org>
Thu, 20 Mar 2014 11:25:28 +0100
changeset 116 4dce5ea7e13a
parent 94 9aab40420432
child 117 b5562abbf0f3
permissions -rw-r--r--
Merging teavm branch into default line, now when teavm 0.1 is out
jtulach@63
     1
<!--
jtulach@63
     2
jtulach@63
     3
    The MIT License (MIT)
jtulach@63
     4
jtulach@63
     5
    Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
jtulach@63
     6
jtulach@63
     7
    Permission is hereby granted, free of charge, to any person obtaining a copy
jtulach@63
     8
    of this software and associated documentation files (the "Software"), to deal
jtulach@63
     9
    in the Software without restriction, including without limitation the rights
jtulach@63
    10
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
jtulach@63
    11
    copies of the Software, and to permit persons to whom the Software is
jtulach@63
    12
    furnished to do so, subject to the following conditions:
jtulach@63
    13
jtulach@63
    14
    The above copyright notice and this permission notice shall be included in
jtulach@63
    15
    all copies or substantial portions of the Software.
jtulach@63
    16
jtulach@63
    17
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
jtulach@63
    18
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
jtulach@63
    19
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
jtulach@63
    20
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
jtulach@63
    21
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
jtulach@63
    22
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
jtulach@63
    23
    THE SOFTWARE.
jtulach@63
    24
jtulach@63
    25
-->
jtulach@63
    26
<!DOCTYPE html>
jtulach@63
    27
<html>
jtulach@63
    28
    <head>
jtulach@63
    29
        <title></title>
jtulach@63
    30
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
jtulach@63
    31
        <link href="bootstrap.css" rel="stylesheet">
jtulach@63
    32
        <link href="bootstrap-responsive.css" rel="stylesheet">
jtulach@63
    33
        <link href="mines.css" rel="stylesheet">
jtulach@71
    34
        <!-- Target tablets -->
jtulach@73
    35
        <link href="mines-tablet-large.css" 
jtulach@80
    36
              media="(min-width:640px) and (max-width:780px), (min-height:660px) and (max-height:830px)" 
jtulach@73
    37
              rel="stylesheet" />
jtulach@73
    38
        <link href="mines-tablet-small.css" 
jtulach@80
    39
              media="(min-width:510px) and (max-width:640px), (min-height:520px) and (max-height:660px)" 
jtulach@73
    40
              rel="stylesheet" />
jtulach@71
    41
        <!-- Target phones -->
jtulach@73
    42
        <link href="mines-phone-large.css" 
jtulach@80
    43
              media="(min-width:410px) and (max-width:510px), (min-height:400px) and (max-height:520px)" 
jtulach@73
    44
              rel="stylesheet" />
jtulach@73
    45
        <link href="mines-phone-small.css" 
jtulach@80
    46
              media="(min-width:250px) and (max-width:410px), (min-height:250px) and (max-height:400px)" 
jtulach@80
    47
              rel="stylesheet" />
jtulach@80
    48
        <link href="mines-phone-smaller.css" 
jtulach@80
    49
              media="(max-width:250px), (max-height:250px)" 
jtulach@73
    50
              rel="stylesheet" />
jtulach@63
    51
    </head>
jtulach@63
    52
    <body>
jtulach@70
    53
        <div class="navbar">
jtulach@70
    54
            <div class="navbar-inner">
jtulach@76
    55
                <a id="apptitle" class="brand" href="#" data-bind="click: showHelp">Minesweeper</a>
jtulach@80
    56
                <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: false, click: normalGame">
jtulach@80
    57
                    <span>&#x21bb;</span>
jtulach@80
    58
                    <span class="hidden-phone">New Game!</span>
jtulach@80
    59
                </button>
jtulach@80
    60
                <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: !fieldShowing(), click: giveUp ">
jtulach@80
    61
                    <span>&#x2717;</span>
jtulach@80
    62
                    <span class="hidden-phone">Show Mines!</span>
jtulach@80
    63
                </button>
jtulach@70
    64
            </div>
jtulach@70
    65
        </div>
jtulach@76
    66
        
jtulach@63
    67
jtulach@76
    68
        <script type="text/html" id="field">
jtulach@76
    69
            <table class="field">
jtulach@76
    70
                <tbody>
jtulach@76
    71
                    <!-- ko foreach: rows -->
jtulach@76
    72
                    <tr>
jtulach@76
    73
                        <!-- ko foreach: columns -->
jtulach@76
    74
                        <td data-bind="css: style, click: $parents[1].click" >
jtulach@76
    75
                            <div data-bind='html: html'></div>
jtulach@76
    76
                        </td>
jtulach@76
    77
                        <!-- /ko -->
jtulach@76
    78
                    </tr>
jtulach@63
    79
                    <!-- /ko -->
jtulach@76
    80
                </tbody>
jtulach@76
    81
            </table>
jtulach@76
    82
        </script>
jtulach@78
    83
jtulach@78
    84
        <div data-bind="template: { name : 'field', if: fieldShowing }"></div>
jtulach@63
    85
        
jtulach@77
    86
        <div class="jumbotron control-label" data-bind="visible: !fieldShowing() ">
jtulach@77
    87
            <div class="container">
jtulach@77
    88
                <h1>HTML/Java Technology Demo</h1>
jtulach@77
    89
jtulach@77
    90
                <p>At first sight this is an old good <em>minesweeper</em>
jtulach@77
    91
                    game. At closer look, this is a demo of a revolutionary 
jtulach@77
    92
                    technology that allows you to use <strong>Java</strong>
jtulach@77
    93
                    to code your application logic and present it using
jtulach@77
    94
                    <strong>HTML</strong> on any device capable of rendering
jtulach@77
    95
                    modern <strong>HTML5</strong> browser.
jtulach@77
    96
                </p>
jtulach@77
    97
                <p><a class="btn btn-primary btn-lg" role="button" 
jtulach@78
    98
                      target="_blank" href="http://html.java.net"
jtulach@78
    99
                >Visit Project Page!</a>
jtulach@77
   100
                </p>
jtulach@77
   101
            </div>
jtulach@77
   102
        </div>
jtulach@78
   103
jtulach@78
   104
    <div class="container" data-bind="visible: !fieldShowing()">
jtulach@78
   105
      <div class="row">
jtulach@78
   106
        <div class="col-md-4">
jtulach@78
   107
          <h2>Minesweeper</h2>
jtulach@78
   108
          <p>
jtulach@78
   109
              At the end this is a <em>minesweeper</em>
jtulach@78
   110
              game and you can of course play it. Discover
jtulach@78
   111
              all fields that don't contain a mine. 
jtulach@78
   112
              Touch a field to find out if there is
jtulach@78
   113
              a mine or not. A number on a field indicates
jtulach@78
   114
              how many mines is in the eight surrounding 
jtulach@78
   115
              fields.
jtulach@78
   116
          </p>
jtulach@78
   117
          <p><a class="btn btn-default" href="#" data-bind="click: normalGame"role="button">Play &raquo;</a></p>
jtulach@78
   118
        </div>
jtulach@78
   119
        <div class="col-md-4">
jtulach@78
   120
          <h2>Documentation</h2>
jtulach@78
   121
          <p>
jtulach@78
   122
              In case you want to write application like 
jtulach@78
   123
              this (e.g. use <strong>Java</strong> and <strong>HTML</strong>)
jtulach@78
   124
              you can learn more about the libraries that
jtulach@78
   125
              make that possible. Follow this link to
jtulach@78
   126
              our documentation.
jtulach@78
   127
          </p>
jtulach@78
   128
          <p><a class="btn btn-default"
jtulach@78
   129
                target="_blank" href="http://bits.netbeans.org/html4j/0.7.5/"
jtulach@78
   130
                role="button">Read more &raquo;</a></p>
jtulach@78
   131
       </div>
jtulach@78
   132
        <div class="col-md-4">
jtulach@78
   133
          <h2>Run in a Browser</h2>
jtulach@78
   134
          <p>
jtulach@78
   135
              While primarily this technology runs on a desktop
jtulach@78
   136
              or as a table or phone application, it is possible
jtulach@78
   137
              to execute the same unchanged code in a browser 
jtulach@78
   138
              as well. To do so, one needs a <strong>bck2brwsr</strong>
jtulach@78
   139
              virtual machine.
jtulach@78
   140
          </p>
jtulach@78
   141
          <p><a class="btn btn-default"
jtulach@78
   142
                target="_blank" href="http://bck2brwsr.apidesign.org"
jtulach@78
   143
                role="button">Learn more &raquo;</a></p>
jtulach@78
   144
       </div>
jtulach@93
   145
      </div>
jtulach@78
   146
    </div>
jtulach@91
   147
jtulach@94
   148
        <!-- boot bck2brwsr -->
jtulach@63
   149
        <script type="text/javascript" src="bck2brwsr.js"></script>
jtulach@63
   150
        <script>
jtulach@63
   151
            var vm = bck2brwsr('${project.build.finalName}.jar');
jtulach@71
   152
            vm.loadClass('org.apidesign.demo.minesweeper.MainBrwsr');
jtulach@63
   153
        </script>
jtulach@63
   154
    </body>
jtulach@63
   155
</html>