minesweeper/src/main/webapp/pages/index.html
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Thu, 14 Aug 2014 07:50:10 +0200
branchAppStore
changeset 197 197472ca59d4
parent 186 541d0898da47
permissions -rw-r--r--
Adressing comments from the first AppStore review: 1. don't mention android, 2. don't use word 'demo', replace it with 'showcase'.
     1 <!--
     2 
     3     The MIT License (MIT)
     4 
     5     Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
     6 
     7     Permission is hereby granted, free of charge, to any person obtaining a copy
     8     of this software and associated documentation files (the "Software"), to deal
     9     in the Software without restriction, including without limitation the rights
    10     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    11     copies of the Software, and to permit persons to whom the Software is
    12     furnished to do so, subject to the following conditions:
    13 
    14     The above copyright notice and this permission notice shall be included in
    15     all copies or substantial portions of the Software.
    16 
    17     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    18     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    19     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    20     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    21     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    22     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    23     THE SOFTWARE.
    24 
    25 -->
    26 <!DOCTYPE html>
    27 <html>
    28     <head>
    29         <title>Fair Minesweeper</title>
    30         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    31         <link href="bootstrap.css" rel="stylesheet">
    32         <link href="bootstrap-responsive.css" rel="stylesheet">
    33         <link href="mines.css" rel="stylesheet">
    34         <!-- Target tablets -->
    35         <link href="mines-tablet-large.css" 
    36               media="(min-width:640px), (min-height:660px)" 
    37               rel="stylesheet" />
    38         <link href="mines-tablet-small.css" 
    39               media="(min-width:510px) and (max-width:640px), (min-height:520px) and (max-height:660px)" 
    40               rel="stylesheet" />
    41         <!-- Target phones -->
    42         <link href="mines-phone-large.css" 
    43               media="(min-width:410px) and (max-width:510px), (min-height:400px) and (max-height:520px)" 
    44               rel="stylesheet" />
    45         <link href="mines-phone-small.css" 
    46               media="(min-width:300px) and (max-width:410px), (min-height:300px) and (max-height:400px)" 
    47               rel="stylesheet" />
    48         <link href="mines-phone-smaller.css" 
    49               media="(max-width:300px), (max-height:300px)" 
    50               rel="stylesheet" />
    51     </head>
    52     <body>
    53         <div class="navbar">
    54             <div class="navbar-inner">
    55                 <a id="apptitle" class="brand" href="#" data-bind="click: showHelp">
    56                     <img height="20" width="20" src="DukeSweeper.png">
    57                     <span class="hidden-phone">Minesweeper</span>
    58                 </a>
    59                 <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: false, click: normalGame">
    60                     <span>&#x21bb;</span>
    61                     <span class="hidden-phone">New Game!</span>
    62                 </button>
    63                 <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: !gameInProgress(), click: giveUp ">
    64                     <span>&#x2717;</span>
    65                     <span class="hidden-phone">Show Mines!</span>
    66                 </button>
    67                 <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: !gameInProgress(), click: markMine">
    68                     <span>&#x26A0;</span>
    69                     <span class="hidden-phone">Mark Mine!</span>
    70                 </button>
    71             </div>
    72         </div>
    73 
    74 
    75         <script type="text/html" id="field">
    76           <center>
    77               <table class="field" data-bind="css: gameStyle">
    78                 <tbody>
    79                     <!-- ko foreach: rows -->
    80                     <tr>
    81                         <!-- ko foreach: columns -->
    82                         <td data-bind="css: style, click: $parents[1].click" >
    83                             <div></div>
    84                         </td>
    85                         <!-- /ko -->
    86                     </tr>
    87                     <!-- /ko -->
    88                 </tbody>
    89             </table>
    90           </center>
    91         </script>
    92 
    93         <div data-bind="template: { name : 'field', if: fieldShowing }"></div>
    94         
    95         <div class="jumbotron control-label" data-bind="visible: !fieldShowing() ">
    96             <div class="container">
    97                 <h1>HTML/Java Technology Showcase</h1>
    98 
    99                 <p>At first sight this is an old good <em>minesweeper</em>
   100                     game. At closer look, this is a sample use of a revolutionary 
   101                     technology that allows you to use <strong>Java</strong>
   102                     to code your application logic and present it using
   103                     <strong>HTML</strong> on any device providing
   104                     modern <strong>HTML5</strong> browser.
   105                 </p>
   106                 <p><a class="btn btn-primary btn-lg" role="button" 
   107                       target="_blank" href="http://html.java.net"
   108                 >Visit Project Page!</a>
   109                 </p>
   110             </div>
   111         </div>
   112 
   113     <div class="container" data-bind="visible: !fieldShowing()">
   114       <div>
   115         <div class="col-sm-8 col-md-6">
   116           <h2>Minesweeper</h2>
   117           <p>
   118               Discover ten square fields that contain a mine and
   119               mark them with a <b>&#x26a0;</b> sign.
   120               Touch a square to find out if there is
   121               a mine or not and
   122               how many mines are in the eight surrounding 
   123               ones. Avoid random play, the game 
   124               recognizes guessing and can re-arrange
   125               the mines. This game is <b>fair</b>!
   126           </p>
   127           <p><a class="btn btn-default" href="#" data-bind="click: normalGame"role="button">Play &raquo;</a></p>
   128         </div>
   129         <div class="col-sm-8 col-md-6">
   130           <h2>Documentation</h2>
   131           <p>
   132               In case you want to write application like 
   133               this (e.g. use <strong>Java</strong> and <strong>HTML</strong>)
   134               you can learn more about the libraries that
   135               make that possible. Follow this link to
   136               <em>HTML for Java</em> documentation.
   137           </p>
   138           <p><a class="btn btn-default"
   139                 target="_blank" href="http://bits.netbeans.org/html+java/"
   140                 role="button">Read more &raquo;</a></p>
   141        </div>
   142       </div>
   143     </div>
   144 <div class="container" data-bind="visible: !fieldShowing()">
   145   <div class="col-sm-6 col-md-4">
   146     <div class="thumbnail">
   147         <img src="safari_logo.png" width="120" height="120" alt="Safari">
   148       <div class="caption">
   149           <h3>Run in a Browser</h3>
   150           <p>
   151               While primarily this technology runs on a desktop
   152               or as a tablet or phone application, it is also possible
   153               to execute the same unchanged code directly in a browser 
   154               as well. To do so, one needs a 
   155               <a href="http://bck2brwsr.apidesign.org">bck2brwsr</a>
   156               virtual machine.
   157           </p>
   158           <p><a class="btn btn-primary" role="button"
   159                 target="_blank" href="http://xelfi.cz/minesweeper/bck2brwsr/"
   160              >Try it &raquo;</a></p>
   161        </div>
   162     </div>
   163   </div>
   164   <div class="col-sm-6 col-md-4">
   165     <div class="thumbnail">
   166         <img src="ios_logo.jpg" width="120" height="120" alt="Android">
   167       <div class="caption">
   168         <h3>iBrwsr</h3>
   169         <p>
   170             This application can also be packaged to run on your iPhone
   171             or iPad.
   172             In this mode it
   173             uses <a target="_blank" href="http://www.robovm.org">RoboVM</a> 
   174             virtual machine to execute Java code natively.
   175             It uses iOS WebView to display the UI and execute
   176             generated JavaScript. Both these components are
   177             bound together via <a target="_blank" 
   178                 href="http://wiki.apidesign.org/wiki/IBrwsr">
   179             iBrwsr</a> library.
   180         </p>
   181         <p>
   182             <a href="http://wiki.apidesign.org/wiki/IBrwsr"
   183                target="_blank"
   184                class="btn btn-primary" role="button"
   185                >Learn more &raquo;</a> 
   186         </p>
   187       </div>
   188     </div>
   189   </div>
   190   <div class="col-sm-6 col-md-4">
   191     <div class="thumbnail">
   192         <img src="netbeans_logo.jpg" width="120" height="120" alt="Android">
   193       <div class="caption">
   194         <h3>Develop Own App!</h3>
   195         <p>
   196             One can package this application as a 
   197             <a href="http://plugins.netbeans.org/plugin/53864/"
   198                target="_blank"
   199             >plugin for NetBeans</a> or
   200             use <a href="http://www.netbeans.org" target="_blank">
   201             NetBeans</a> IDE to create
   202             application like this yourself. Enjoy the
   203             power of <em>HTML</em> and <em>Java</em>.
   204             Write your applications once and deploy and display 
   205             them on any device!
   206         </p>
   207         <p>
   208             <a href="http://wiki.apidesign.org/wiki/DukeScriptInNetBeans"
   209                target="_blank"
   210                class="btn btn-primary" role="button"
   211                >Develop &raquo;</a> 
   212         </p>
   213       </div>
   214     </div>
   215   </div>
   216 </div>
   217         <!-- boot bck2brwsr -->
   218         <script type="text/javascript" src="bck2brwsr.js"></script>
   219         <script>
   220             var vm = bck2brwsr('minesweeper.js');
   221             var c = vm.loadClass('org.apidesign.demo.minesweeper.MinesModel');
   222             c.invoke('main');
   223         </script>
   224 
   225     </body>
   226 </html>