# HG changeset patch
# User Jaroslav Tulach <jtulach@netbeans.org>
# Date 1391860941 -3600
# Node ID cc5da2ae3940d8027a51943da9cb5767a66ca1ff
# Parent  b344caeda33fbb9905948ce6ef14fd5ec007a816
More topics of documentation

diff -r b344caeda33f -r cc5da2ae3940 minesweeper/src/main/webapp/pages/index.html
--- a/minesweeper/src/main/webapp/pages/index.html	Sat Feb 08 12:12:39 2014 +0100
+++ b/minesweeper/src/main/webapp/pages/index.html	Sat Feb 08 13:02:21 2014 +0100
@@ -71,6 +71,8 @@
                 </tbody>
             </table>
         </script>
+
+        <div data-bind="template: { name : 'field', if: fieldShowing }"></div>
         
         <div class="jumbotron control-label" data-bind="visible: !fieldShowing() ">
             <div class="container">
@@ -84,16 +86,54 @@
                     modern <strong>HTML5</strong> browser.
                 </p>
                 <p><a class="btn btn-primary btn-lg" role="button" 
-                      target="_blank" href="http://bits.netbeans.org/html4j/0.7.5/"
-                >Learn more!</a>
-                <a class="btn btn-primary btn-lg" role="button"
-                      data-bind="click: normalGame"
-                >Play!</a>
+                      target="_blank" href="http://html.java.net"
+                >Visit Project Page!</a>
                 </p>
             </div>
         </div>
-        
-        <div data-bind="template: { name : 'field', if: fieldShowing }"/>
+
+    <div class="container" data-bind="visible: !fieldShowing()">
+      <div class="row">
+        <div class="col-md-4">
+          <h2>Minesweeper</h2>
+          <p>
+              At the end this is a <em>minesweeper</em>
+              game and you can of course play it. Discover
+              all fields that don't contain a mine. 
+              Touch a field to find out if there is
+              a mine or not. A number on a field indicates
+              how many mines is in the eight surrounding 
+              fields.
+          </p>
+          <p><a class="btn btn-default" href="#" data-bind="click: normalGame"role="button">Play &raquo;</a></p>
+        </div>
+        <div class="col-md-4">
+          <h2>Documentation</h2>
+          <p>
+              In case you want to write application like 
+              this (e.g. use <strong>Java</strong> and <strong>HTML</strong>)
+              you can learn more about the libraries that
+              make that possible. Follow this link to
+              our documentation.
+          </p>
+          <p><a class="btn btn-default"
+                target="_blank" href="http://bits.netbeans.org/html4j/0.7.5/"
+                role="button">Read more &raquo;</a></p>
+       </div>
+        <div class="col-md-4">
+          <h2>Run in a Browser</h2>
+          <p>
+              While primarily this technology runs on a desktop
+              or as a table or phone application, it is possible
+              to execute the same unchanged code in a browser 
+              as well. To do so, one needs a <strong>bck2brwsr</strong>
+              virtual machine.
+          </p>
+          <p><a class="btn btn-default"
+                target="_blank" href="http://bck2brwsr.apidesign.org"
+                role="button">Learn more &raquo;</a></p>
+       </div>
+    </div>
         
         <script type="text/javascript" src="bck2brwsr.js"></script>
         <script>
diff -r b344caeda33f -r cc5da2ae3940 minesweeper/src/main/webapp/pages/mines-phone-large.css
--- a/minesweeper/src/main/webapp/pages/mines-phone-large.css	Sat Feb 08 12:12:39 2014 +0100
+++ b/minesweeper/src/main/webapp/pages/mines-phone-large.css	Sat Feb 08 13:02:21 2014 +0100
@@ -29,4 +29,25 @@
 }
 h1 {
     font-size: 15px;
-}
\ No newline at end of file
+}
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+    float: none;
+ }
+.col-md-6 {
+ width: 100%;
+}
+.col-md-5 {
+ width: 100%;
+}
+.col-md-4 {
+ width: 100%;
+}
+.col-md-3 {
+ width: 100%;
+}
+.col-md-2 {
+ width: 100%;
+}
+.col-md-1 {
+ width: 100%;
+}
diff -r b344caeda33f -r cc5da2ae3940 minesweeper/src/main/webapp/pages/mines-phone-small.css
--- a/minesweeper/src/main/webapp/pages/mines-phone-small.css	Sat Feb 08 12:12:39 2014 +0100
+++ b/minesweeper/src/main/webapp/pages/mines-phone-small.css	Sat Feb 08 13:02:21 2014 +0100
@@ -29,4 +29,25 @@
 }
 h1 {
     font-size: 12px;
-}
\ No newline at end of file
+}
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+    float: none;
+ }
+.col-md-6 {
+ width: 100%;
+}
+.col-md-5 {
+ width: 100%;
+}
+.col-md-4 {
+ width: 100%;
+}
+.col-md-3 {
+ width: 100%;
+}
+.col-md-2 {
+ width: 100%;
+}
+.col-md-1 {
+ width: 100%;
+}
diff -r b344caeda33f -r cc5da2ae3940 minesweeper/src/main/webapp/pages/mines-tablet-large.css
--- a/minesweeper/src/main/webapp/pages/mines-tablet-large.css	Sat Feb 08 12:12:39 2014 +0100
+++ b/minesweeper/src/main/webapp/pages/mines-tablet-large.css	Sat Feb 08 13:02:21 2014 +0100
@@ -21,7 +21,29 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-table.field td {
+ .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+    float: left;
+ }
+.col-md-6 {
+ width: 50%;
+}
+.col-md-5 {
+ width: 41.66666666666667%;
+}
+.col-md-4 {
+ width: 33.33333333333333%;
+}
+.col-md-3 {
+ width: 25%;
+}
+.col-md-2 {
+ width: 16.666666666666664%;
+}
+.col-md-1 {
+ width: 8.333333333333332%;
+}
+
+ table.field td {
     padding: 8px;
     width: 42px;
     height: 42px;
diff -r b344caeda33f -r cc5da2ae3940 minesweeper/src/main/webapp/pages/mines-tablet-small.css
--- a/minesweeper/src/main/webapp/pages/mines-tablet-small.css	Sat Feb 08 12:12:39 2014 +0100
+++ b/minesweeper/src/main/webapp/pages/mines-tablet-small.css	Sat Feb 08 13:02:21 2014 +0100
@@ -29,4 +29,25 @@
 }
 h1 {
     font-size: 18px;
-}
\ No newline at end of file
+}
+ .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+    float: left;
+ }
+.col-md-6 {
+ width: 50%;
+}
+.col-md-5 {
+ width: 50%;
+}
+.col-md-4 {
+ width: 50%;
+}
+.col-md-3 {
+ width: 100%;
+}
+.col-md-2 {
+ width: 100%;
+}
+.col-md-1 {
+ width: 100%;
+}