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         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

    32         <link href="bootstrap.css" rel="stylesheet">

    33         <link href="bootstrap-responsive.css" rel="stylesheet">

    34         <link href="mines.css" rel="stylesheet">

    35         <!-- Target tablets -->

    36         <link href="mines-tablet-large.css"

    37               media="(min-width:640px), (min-height:660px)"

    38               rel="stylesheet" />

    39         <link href="mines-tablet-small.css"

    40               media="(min-width:510px) and (max-width:640px), (min-height:520px) and (max-height:660px)"

    41               rel="stylesheet" />

    42         <!-- Target phones -->

    43         <link href="mines-phone-large.css"

    44               media="(min-width:410px) and (max-width:510px), (min-height:400px) and (max-height:520px)"

    45               rel="stylesheet" />

    46         <link href="mines-phone-small.css"

    47               media="(min-width:300px) and (max-width:410px), (min-height:300px) and (max-height:400px)"

    48               rel="stylesheet" />

    49         <link href="mines-phone-smaller.css"

    50               media="(max-width:300px), (max-height:300px)"

    51               rel="stylesheet" />

    52     </head>

    53     <body>

    54         <div class="navbar">

    55             <div class="navbar-inner">

    56                 <a id="apptitle" class="brand" href="#" data-bind="click: showHelp">

    57                     <img height="20" width="20" src="DukeSweeper.png">

    58                     <span class="hidden-phone">Miny</span>

    59                 </a>

    60                 <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: false, click: normalGame">

    61                     <span>&#x21bb;</span>

    62                     <span class="info-text">Hra</span>

    63                 </button>

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

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

    66                     <span>Vzdát</span>

    67                 </button>

    68                 <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: !gameInProgress(), click: markMine">

    69                     <span>&#x26A0;</span>

    70                     <span class="info-text">Označkovat</span>

    71                 </button>

    72             </div>

    73         </div>

    76         <script type="text/html" id="field">

    77           <center>

    78               <table class="field" data-bind="css: gameStyle">

    79                 <tbody>

    80                     <!-- ko foreach: rows -->

    81                     <tr>

    82                         <!-- ko foreach: columns -->

    83                         <td data-bind="css: style, click: $parents[1].click" >

    84                             <div></div>

    85                         </td>

    86                         <!-- /ko -->

    87                     </tr>

    88                     <!-- /ko -->

    89                 </tbody>

    90             </table>

    91           </center>

    92         </script>

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

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

    97             <div class="container">

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

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

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

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

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

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

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

   106                 </p>

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

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

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

   110                 </p>

   111             </div>

   112         </div>

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

   115       <div>

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

   117           <h2>Miny</h2>

   118           <p>

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

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

   121               Dotykem políčka se zjistí,

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

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

   124               Nespoléhejte na náhodu,

   125               tato verze min dokáže detekovat

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

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

   128           </p>

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

   130         </div>

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

   132           <h2>Dokumentace</h2>

   133           <p>

   134               Chcete-li psát aplikace jako je tato

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

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

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

   138               stránky s dokumentací.

   139           </p>

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

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

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

   143        </div>

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

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

   146           <p>

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

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

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

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

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

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

   153           </p>

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

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

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

   157        </div>

   158       </div>

   159     </div>

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

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

   162     <div class="thumbnail">

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

   164       <div class="caption">

   165         <h3>DlvkBrwsr</h3>

   166         <p>

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

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

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

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

   171             interpretaci generovaného JavaScriptu. Tyto komponenty jsou

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

   173             DlvkBrwsr</a> technologie.

   174         </p>

   175         <p>

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

   177                target="_blank"

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

   179                >Instalovat &raquo;</a>

   180         </p>

   181       </div>

   182     </div>

   183   </div>

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

   185     <div class="thumbnail">

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

   187       <div class="caption">

   188         <h3>iBrwsr</h3>

   189         <p>

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

   191             Vašem iPhonu

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

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

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

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

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

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

   198             pomocí <a target="_blank"

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

   200             iBrwsr</a> knihovny.

   201         </p>

   202         <p>

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

   204                target="_blank"

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

   206                >Instalovat &raquo;</a>

   207         </p>

   208       </div>

   209     </div>

   210   </div>

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

   212     <div class="thumbnail">

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

   214       <div class="caption">

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

   216         <p>

   217             Tuto aplikaci lze zabalit jako

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

   219                target="_blank"

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

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

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

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

   224             jež bude využívat synergie

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

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

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

   228         </p>

   229         <p>

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

   231                target="_blank"

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

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

   234         </p>

   235       </div>

   236     </div>

   237   </div>

   238 </div>

   239         <!-- boot bck2brwsr -->

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

   241         <script>

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

   243                 this.main = function() {

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

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

   246                     c.invoke('main');

   247                 }

   248             }

   249             this.main();

   250         </script>

   251     </body>

   252 </html>

author	Jaroslav Tulach <jaroslav.tulach@apidesign.org>
	Thu, 06 Nov 2014 21:58:57 +0100
changeset 228	fc2f72be9392
parent 225	385df2e797de
permissions	-rw-r--r--