minesweeper/src/main/webapp/pages/index.html
author Jaroslav Tulach <jtulach@netbeans.org>
Sat, 08 Feb 2014 12:12:39 +0100
branchminesweeper
changeset 77 b344caeda33f
parent 76 55b2e1d3ad2b
child 78 cc5da2ae3940
permissions -rw-r--r--
Using jumbo to provide some application description
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@73
    36
              media="(min-width:600px) and (max-width:780px), (min-height:620px) and (max-height:830px)" 
jtulach@73
    37
              rel="stylesheet" />
jtulach@73
    38
        <link href="mines-tablet-small.css" 
jtulach@73
    39
              media="(min-width:500px) and (max-width:600px), (min-height:520px) and (max-height:640px)" 
jtulach@73
    40
              rel="stylesheet" />
jtulach@71
    41
        <!-- Target phones -->
jtulach@73
    42
        <link href="mines-phone-large.css" 
jtulach@73
    43
              media="(min-width:400px) and (max-width:500px), (min-height:400px) and (max-height:520px)" 
jtulach@73
    44
              rel="stylesheet" />
jtulach@73
    45
        <link href="mines-phone-small.css" 
jtulach@73
    46
              media="(max-width:400px), (max-height:400px)" 
jtulach@73
    47
              rel="stylesheet" />
jtulach@63
    48
    </head>
jtulach@63
    49
    <body>
jtulach@70
    50
        <div class="navbar">
jtulach@70
    51
            <div class="navbar-inner">
jtulach@76
    52
                <a id="apptitle" class="brand" href="#" data-bind="click: showHelp">Minesweeper</a>
jtulach@73
    53
                <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: false, click: normalGame">New Game!</button>
jtulach@76
    54
                <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: !fieldShowing(), click: giveUp ">Show Mines!</button>
jtulach@70
    55
            </div>
jtulach@70
    56
        </div>
jtulach@76
    57
        
jtulach@63
    58
jtulach@76
    59
        <script type="text/html" id="field">
jtulach@76
    60
            <table class="field">
jtulach@76
    61
                <tbody>
jtulach@76
    62
                    <!-- ko foreach: rows -->
jtulach@76
    63
                    <tr>
jtulach@76
    64
                        <!-- ko foreach: columns -->
jtulach@76
    65
                        <td data-bind="css: style, click: $parents[1].click" >
jtulach@76
    66
                            <div data-bind='html: html'></div>
jtulach@76
    67
                        </td>
jtulach@76
    68
                        <!-- /ko -->
jtulach@76
    69
                    </tr>
jtulach@63
    70
                    <!-- /ko -->
jtulach@76
    71
                </tbody>
jtulach@76
    72
            </table>
jtulach@76
    73
        </script>
jtulach@63
    74
        
jtulach@77
    75
        <div class="jumbotron control-label" data-bind="visible: !fieldShowing() ">
jtulach@77
    76
            <div class="container">
jtulach@77
    77
                <h1>HTML/Java Technology Demo</h1>
jtulach@77
    78
jtulach@77
    79
                <p>At first sight this is an old good <em>minesweeper</em>
jtulach@77
    80
                    game. At closer look, this is a demo of a revolutionary 
jtulach@77
    81
                    technology that allows you to use <strong>Java</strong>
jtulach@77
    82
                    to code your application logic and present it using
jtulach@77
    83
                    <strong>HTML</strong> on any device capable of rendering
jtulach@77
    84
                    modern <strong>HTML5</strong> browser.
jtulach@77
    85
                </p>
jtulach@77
    86
                <p><a class="btn btn-primary btn-lg" role="button" 
jtulach@77
    87
                      target="_blank" href="http://bits.netbeans.org/html4j/0.7.5/"
jtulach@77
    88
                >Learn more!</a>
jtulach@77
    89
                <a class="btn btn-primary btn-lg" role="button"
jtulach@77
    90
                      data-bind="click: normalGame"
jtulach@77
    91
                >Play!</a>
jtulach@77
    92
                </p>
jtulach@77
    93
            </div>
jtulach@77
    94
        </div>
jtulach@77
    95
        
jtulach@76
    96
        <div data-bind="template: { name : 'field', if: fieldShowing }"/>
jtulach@63
    97
        
jtulach@63
    98
        <script type="text/javascript" src="bck2brwsr.js"></script>
jtulach@63
    99
        <script>
jtulach@63
   100
            var vm = bck2brwsr('${project.build.finalName}.jar');
jtulach@71
   101
            vm.loadClass('org.apidesign.demo.minesweeper.MainBrwsr');
jtulach@63
   102
        </script>
jtulach@63
   103
        
jtulach@63
   104
    </body>
jtulach@63
   105
</html>