hg/html~demo: minesweeper/src/main/webapp/pages/index

     1 <!--

     3     The MIT License (MIT)

     5     Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>

     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:

    14     The above copyright notice and this permission notice shall be included in

    15     all copies or substantial portions of the Software.

    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.

    25 -->

    26 <!DOCTYPE html>

    27 <html>

    28     <head>

    29         <title>Férové miny</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">Miny</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="info-text">Hra</span>

    62                 </button>

    63                 <button class="hidden-phone btn btn-default navbar-btn" disabled="true" data-bind="disable: !gameInProgress(), click: giveUp ">

    64                     <span>&#x2717;</span>

    65                     <span>Vzdát</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="info-text">Označkovat</span>

    70                 </button>

    71             </div>

    72         </div>

    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>

    93         <div data-bind="template: { name : 'field', if: fieldShowing }"></div>

    95         <div class="jumbotron control-label" data-bind="visible: !fieldShowing() ">

    96             <div class="container">

    97                 <h1>Ukázka HTML/Java technologie</h1>

    99                 <p>Na první pohled se jedná o staré dobré <em>miny</em>.

   100                    Bližší pohled však odhalí revoluční technologii, jež

   101                    umožňuje programovat logiku aplikace v <strong>Javě</strong>

   102                    a uživatelské rozhraní definovat v <strong>HTML</strong>.

   103                    To vše na jakémkoli zařízení schopném zobrazit moderní

   104                    <strong>HTML5</strong> prohlížeč.

   105                 </p>

   106                 <p><a class="btn btn-primary btn-lg" role="button"

   107                       target="_blank" href="http://html.java.net"

   108                 >Navštívit stránky projektu</a>

   109                 </p>

   110             </div>

   111         </div>

   113     <div class="container" data-bind="visible: !fieldShowing()">

   114       <div>

   115         <div class="col-md-4">

   116           <h2>Miny</h2>

   117           <p>

   118               Odhalte deset políček jež skrývají miny

   119               a označte je znakem &#x26a0;.

   120               Dotykem políčka se zjistí,

   121               zda-li je na něm mina či kolik min se

   122               nachází v sousedních osmi políčkách.

   123               Nespoléhejte na náhodu,

   124               tato verze min dokáže detekovat

   125               náhodné hádání a v takovém případě přerovnat miny.

   126               Tato hra je <b>fér</b>!

   127           </p>

   128           <p><a class="btn btn-default" href="#" data-bind="click: normalGame"role="button">Hrát &raquo;</a></p>

   129         </div>

   130         <div class="col-md-4">

   131           <h2>Dokumentace</h2>

   132           <p>

   133               Chcete-li psát aplikace jako je tato

   134               (tedy používat <strong>Javu</strong> a <strong>HTML</strong>)

   135               můžete se nyní dozvědět něco o knihovnách, které

   136               to umožňují. Následující odkaz Vás zavede

   137               stránky s dokumentací.

   138           </p>

   139           <p><a class="btn btn-default"

   140                 target="_blank" href="http://bits.netbeans.org/html+java/"

   141                 role="button">Více &raquo;</a></p>

   142        </div>

   143         <div class="col-md-4">

   144           <h2>Verze pro prohlížeč</h2>

   145           <p>

   146               Tato technologie je primárně určena pro

   147               klasické osobní počítače či pro tablety a telefony.

   148               Přesto je však možné spustit tu samou aplikaci

   149               s nezměným kódem v prohlížeči. Je k tomu potřeba

   150               implementace <b>Java</b> virtuálního stroje zvaná

   151               <a href="http://bck2brwsr.apidesign.org">bck2brwsr</a>.

   152           </p>

   153           <p><a class="btn btn-default"

   154                 target="_blank" href="http://xelfi.cz/minesweeper/bck2brwsr/"

   155                 role="button">Vyzkoušet &raquo;</a></p>

   156        </div>

   157       </div>

   158     </div>

   159 <div class="container" data-bind="visible: !fieldShowing()">

   160   <div class="col-sm-6 col-md-4">

   161     <div class="thumbnail">

   162         <img src="android_logo.jpg" width="120" height="120" alt="Android">

   163       <div class="caption">

   164         <h3>DlvkBrwsr</h3>

   165         <p>

   166             Tato apliace byla přeložena pro Váš telefon se systémem Android

   167             a je dostupná na  Google Play! tržišti. V této konfiguraci

   168             se používá virtuální stroj Dalvik pro spouštění <b>Java</b> kódu

   169             a Androidí WebView k zobrazení uživatelského rozhraní a

   170             interpretaci generovaného JavaScriptu. Tyto komponenty jsou

   171             spojeny dohromady pomocí <a href="http://wiki.apidesign.org/wiki/DlvkBrwsr">

   172             DlvkBrwsr</a> technologie.

   173         </p>

   174         <p>

   175             <a href="https://play.google.com/store/apps/details?id=org.apidesign.demo.minesweeper"

   176                target="_blank"

   177                class="btn btn-primary" role="button"

   178                >Instalovat &raquo;</a>

   179         </p>

   180       </div>

   181     </div>

   182   </div>

   183   <div class="col-sm-6 col-md-4">

   184     <div class="thumbnail">

   185         <img src="ios_logo.jpg" width="120" height="120" alt="Android">

   186       <div class="caption">

   187         <h3>iBrwsr</h3>

   188         <p>

   189             Tato aplikace byla přeložena a zabalena tak, aby běžela na

   190             Vašem iPhonu

   191             nebo iPadu a je dostupná na tržišti AppStore.

   192             V této konfiguraci se používá

   193             virtuální stroj <a target="_blank" href="http://www.robovm.org">RoboVM</a>

   194             pro přeložení <b>Java</b> kódu do nativního formátu.

   195             Pro zobrazení a provádění vygenerovaného JavaScriptu

   196             se využívá iOS WebView. Obě tyto komponenty jsou spojeny

   197             pomocí <a target="_blank"

   198                 href="http://wiki.apidesign.org/wiki/IBrwsr">

   199             iBrwsr</a> knihovny.

   200         </p>

   201         <p>

   202             <a href="https://itunes.apple.com/us/app/fair-minesweeper/id903688146"

   203                target="_blank"

   204                class="btn btn-primary" role="button"

   205                >Instalovat &raquo;</a>

   206         </p>

   207       </div>

   208     </div>

   209   </div>

   210   <div class="col-sm-6 col-md-4">

   211     <div class="thumbnail">

   212         <img src="netbeans_logo.jpg" width="120" height="120" alt="Android">

   213       <div class="caption">

   214         <h3>Vyvíjejte své aplikace!</h3>

   215         <p>

   216             Tuto aplikaci lze zabalit jako

   217             <a href="http://plugins.netbeans.org/plugin/53864/"

   218                target="_blank"

   219             >rozšíření pro NetBeans</a> a nebo

   220             lze použít vývojové prostředí

   221             <a href="http://www.netbeans.org" target="_blank">

   222             NetBeans</a> k vytvoření své vlastní aplikace,

   223             jež bude využívat synergie

   224             <em>HTML</em> a <em>Javy</em>.

   225             Pište své aplikace jednou a zobrazte je na

   226             každém zařízení schopném zobrazit <em>HTML</em>!

   227         </p>

   228         <p>

   229             <a href="http://wiki.apidesign.org/wiki/DukeScriptInNetBeans"

   230                target="_blank"

   231                class="btn btn-primary" role="button"

   232                >Vyvíjejte &raquo;</a>

   233         </p>

   234       </div>

   235     </div>

   236   </div>

   237 </div>

   238         <!-- boot bck2brwsr -->

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

   240         <script>

   241             if (!this.hasOwnProperty("main")) {

   242                 this.main = function() {

   243                     var vm = bck2brwsr('minesweeper.js');

   244                     var c = vm.loadClass('org.apidesign.demo.minesweeper.MinesModel');

   245                     c.invoke('main');

   246                 }

   247             }

   248             this.main();

   249         </script>

   250     </body>

   251 </html>

author	Jaroslav Tulach <jaroslav.tulach@apidesign.org>
	Wed, 05 Nov 2014 00:22:49 +0100
changeset 225	385df2e797de
parent 216	7d091558d9f4
child 228	fc2f72be9392
permissions	-rw-r--r--