1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/minesweeper/src/main/webapp/pages/index_cs.html Fri Aug 29 19:04:17 2014 +0200
1.3 @@ -0,0 +1,247 @@
1.4 +<!--
1.5 +
1.6 + The MIT License (MIT)
1.7 +
1.8 + Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
1.9 +
1.10 + Permission is hereby granted, free of charge, to any person obtaining a copy
1.11 + of this software and associated documentation files (the "Software"), to deal
1.12 + in the Software without restriction, including without limitation the rights
1.13 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
1.14 + copies of the Software, and to permit persons to whom the Software is
1.15 + furnished to do so, subject to the following conditions:
1.16 +
1.17 + The above copyright notice and this permission notice shall be included in
1.18 + all copies or substantial portions of the Software.
1.19 +
1.20 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1.21 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1.22 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1.23 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1.24 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
1.25 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
1.26 + THE SOFTWARE.
1.27 +
1.28 +-->
1.29 +<!DOCTYPE html>
1.30 +<html>
1.31 + <head>
1.32 + <title>Férové miny</title>
1.33 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
1.34 + <link href="bootstrap.css" rel="stylesheet">
1.35 + <link href="bootstrap-responsive.css" rel="stylesheet">
1.36 + <link href="mines.css" rel="stylesheet">
1.37 + <!-- Target tablets -->
1.38 + <link href="mines-tablet-large.css"
1.39 + media="(min-width:640px), (min-height:660px)"
1.40 + rel="stylesheet" />
1.41 + <link href="mines-tablet-small.css"
1.42 + media="(min-width:510px) and (max-width:640px), (min-height:520px) and (max-height:660px)"
1.43 + rel="stylesheet" />
1.44 + <!-- Target phones -->
1.45 + <link href="mines-phone-large.css"
1.46 + media="(min-width:410px) and (max-width:510px), (min-height:400px) and (max-height:520px)"
1.47 + rel="stylesheet" />
1.48 + <link href="mines-phone-small.css"
1.49 + media="(min-width:300px) and (max-width:410px), (min-height:300px) and (max-height:400px)"
1.50 + rel="stylesheet" />
1.51 + <link href="mines-phone-smaller.css"
1.52 + media="(max-width:300px), (max-height:300px)"
1.53 + rel="stylesheet" />
1.54 + </head>
1.55 + <body>
1.56 + <div class="navbar">
1.57 + <div class="navbar-inner">
1.58 + <a id="apptitle" class="brand" href="#" data-bind="click: showHelp">
1.59 + <img height="20" width="20" src="DukeSweeper.png">
1.60 + <span class="hidden-phone">Miny</span>
1.61 + </a>
1.62 + <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: false, click: normalGame">
1.63 + <span>↻</span>
1.64 + <span class="info-text">Hra</span>
1.65 + </button>
1.66 + <button class="hidden-phone btn btn-default navbar-btn" disabled="true" data-bind="disable: !gameInProgress(), click: giveUp ">
1.67 + <span>✗</span>
1.68 + <span>Vzdát</span>
1.69 + </button>
1.70 + <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: !gameInProgress(), click: markMine">
1.71 + <span>⚠</span>
1.72 + <span class="info-text">Označkovat</span>
1.73 + </button>
1.74 + </div>
1.75 + </div>
1.76 +
1.77 +
1.78 + <script type="text/html" id="field">
1.79 + <center>
1.80 + <table class="field" data-bind="css: gameStyle">
1.81 + <tbody>
1.82 + <!-- ko foreach: rows -->
1.83 + <tr>
1.84 + <!-- ko foreach: columns -->
1.85 + <td data-bind="css: style, click: $parents[1].click" >
1.86 + <div></div>
1.87 + </td>
1.88 + <!-- /ko -->
1.89 + </tr>
1.90 + <!-- /ko -->
1.91 + </tbody>
1.92 + </table>
1.93 + </center>
1.94 + </script>
1.95 +
1.96 + <div data-bind="template: { name : 'field', if: fieldShowing }"></div>
1.97 +
1.98 + <div class="jumbotron control-label" data-bind="visible: !fieldShowing() ">
1.99 + <div class="container">
1.100 + <h1>Ukázka HTML/Java technologie</h1>
1.101 +
1.102 + <p>Na první pohled se jedná o staré dobré <em>miny</em>.
1.103 + Bližší pohled však odhalí revoluční technologii, jež
1.104 + umožňuje programovat logiku aplikace v <strong>Javě</strong>
1.105 + a uživatelské rozhraní definovat v <strong>HTML</strong>.
1.106 + To vše na jakémkoli zařízení schopném zobrazit moderní
1.107 + <strong>HTML5</strong> prohlížeč.
1.108 + </p>
1.109 + <p><a class="btn btn-primary btn-lg" role="button"
1.110 + target="_blank" href="http://html.java.net"
1.111 + >Navštívit stránky projektu</a>
1.112 + </p>
1.113 + </div>
1.114 + </div>
1.115 +
1.116 + <div class="container" data-bind="visible: !fieldShowing()">
1.117 + <div>
1.118 + <div class="col-md-4">
1.119 + <h2>Miny</h2>
1.120 + <p>
1.121 + Odhalte deset políček jež skrývají miny
1.122 + a označte je znakem ⚠.
1.123 + Dotykem políčka se zjistí,
1.124 + zda-li je na něm mina či kolik min se
1.125 + nachází v sousedních osmi políčkách.
1.126 + Nespoléhejte na náhodu,
1.127 + tato verze min dokáže detekovat
1.128 + náhodné hádání a v takovém případě přerovnat miny.
1.129 + Tato hra je <b>fér</b>!
1.130 + </p>
1.131 + <p><a class="btn btn-default" href="#" data-bind="click: normalGame"role="button">Hrát »</a></p>
1.132 + </div>
1.133 + <div class="col-md-4">
1.134 + <h2>Dokumentace</h2>
1.135 + <p>
1.136 + Chcete-li psát aplikace jako je tato
1.137 + (tedy používat <strong>Javu</strong> a <strong>HTML</strong>)
1.138 + můžete se nyní dozvědět něco o knihovnách, které
1.139 + to umožňují. Následující odkaz Vás zavede
1.140 + stránky s dokumentací.
1.141 + </p>
1.142 + <p><a class="btn btn-default"
1.143 + target="_blank" href="http://bits.netbeans.org/html+java/"
1.144 + role="button">Více »</a></p>
1.145 + </div>
1.146 + <div class="col-md-4">
1.147 + <h2>Verze pro prohlížeč</h2>
1.148 + <p>
1.149 + Tato technologie je primárně určena pro
1.150 + klasické osobní počítače či pro tablety a telefony.
1.151 + Přesto je však možné spustit tu samou aplikaci
1.152 + s nezměným kódem v prohlížeči. Je k tomu potřeba
1.153 + implementace <b>Java</b> virtuálního stroje zvaná
1.154 + <a href="http://bck2brwsr.apidesign.org">bck2brwsr</a>.
1.155 + </p>
1.156 + <p><a class="btn btn-default"
1.157 + target="_blank" href="http://xelfi.cz/minesweeper/bck2brwsr/"
1.158 + role="button">Vyzkoušet »</a></p>
1.159 + </div>
1.160 + </div>
1.161 + </div>
1.162 +<div class="container" data-bind="visible: !fieldShowing()">
1.163 + <div class="col-sm-6 col-md-4">
1.164 + <div class="thumbnail">
1.165 + <img src="android_logo.jpg" width="120" height="120" alt="Android">
1.166 + <div class="caption">
1.167 + <h3>DlvkBrwsr</h3>
1.168 + <p>
1.169 + Tato apliace byla přeložena pro Váš telefon se systémem Android
1.170 + a je dostupná na Google Play! tržišti. V této konfiguraci
1.171 + se používá virtuální stroj Dalvik pro spouštění <b>Java</b> kódu
1.172 + a Androidí WebView k zobrazení uživatelského rozhraní a
1.173 + interpretaci generovaného JavaScriptu. Tyto komponenty jsou
1.174 + spojeny dohromady pomocí <a href="http://wiki.apidesign.org/wiki/DlvkBrwsr">
1.175 + DlvkBrwsr</a> technologie.
1.176 + </p>
1.177 + <p>
1.178 + <a href="https://play.google.com/store/apps/details?id=org.apidesign.demo.minesweeper"
1.179 + target="_blank"
1.180 + class="btn btn-primary" role="button"
1.181 + >Instalovat »</a>
1.182 + </p>
1.183 + </div>
1.184 + </div>
1.185 + </div>
1.186 + <div class="col-sm-6 col-md-4">
1.187 + <div class="thumbnail">
1.188 + <img src="ios_logo.jpg" width="120" height="120" alt="Android">
1.189 + <div class="caption">
1.190 + <h3>iBrwsr</h3>
1.191 + <p>
1.192 + Tato aplikace byla přeložena a zabalena tak, aby běžela na
1.193 + Vašem iPhonu
1.194 + nebo iPadu a je dostupná na tržišti AppStore.
1.195 + V této konfiguraci se používá
1.196 + virtuální stroj <a target="_blank" href="http://www.robovm.org">RoboVM</a>
1.197 + pro přeložení <b>Java</b> kódu do nativního formátu.
1.198 + Pro zobrazení a provádění vygenerovaného JavaScriptu
1.199 + se využívá iOS WebView. Obě tyto komponenty jsou spojeny
1.200 + pomocí <a target="_blank"
1.201 + href="http://wiki.apidesign.org/wiki/IBrwsr">
1.202 + iBrwsr</a> knihovny.
1.203 + </p>
1.204 + <p>
1.205 + <a href="https://itunes.apple.com/us/app/fair-minesweeper/id903688146"
1.206 + target="_blank"
1.207 + class="btn btn-primary" role="button"
1.208 + >Instalovat »</a>
1.209 + </p>
1.210 + </div>
1.211 + </div>
1.212 + </div>
1.213 + <div class="col-sm-6 col-md-4">
1.214 + <div class="thumbnail">
1.215 + <img src="netbeans_logo.jpg" width="120" height="120" alt="Android">
1.216 + <div class="caption">
1.217 + <h3>Vyvíjejte své aplikace!</h3>
1.218 + <p>
1.219 + Tuto aplikace lze zabalit jako
1.220 + <a href="http://plugins.netbeans.org/plugin/53864/"
1.221 + target="_blank"
1.222 + >rozšíření pro NetBeans</a> a nebo
1.223 + lze použít vývojové prostředí
1.224 + <a href="http://www.netbeans.org" target="_blank">
1.225 + NetBeans</a> k vytvoření své vlastní aplikace,
1.226 + jež bude využívat synergie
1.227 + <em>HTML</em> a <em>Javy</em>.
1.228 + Pište své aplikace jednou a zobrazte je na
1.229 + každém zařízení schopném zobrazit <em>HTML</em>!
1.230 + </p>
1.231 + <p>
1.232 + <a href="http://wiki.apidesign.org/wiki/DukeScriptInNetBeans"
1.233 + target="_blank"
1.234 + class="btn btn-primary" role="button"
1.235 + >Vyvíjejte »</a>
1.236 + </p>
1.237 + </div>
1.238 + </div>
1.239 + </div>
1.240 +</div>
1.241 + <!-- boot bck2brwsr -->
1.242 + <script type="text/javascript" src="bck2brwsr.js"></script>
1.243 + <script>
1.244 + var vm = bck2brwsr('minesweeper.js');
1.245 + var c = vm.loadClass('org.apidesign.demo.minesweeper.MinesModel');
1.246 + c.invoke('main');
1.247 + </script>
1.248 +
1.249 + </body>
1.250 +</html>