minesweeper/src/main/webapp/pages/index.html
author Jaroslav Tulach <jtulach@netbeans.org>
Sat, 08 Feb 2014 08:47:23 +0100
branchminesweeper
changeset 73 c56d63aee79e
parent 72 9dacd7d46405
child 76 55b2e1d3ad2b
permissions -rw-r--r--
First attempt to do responsive design to fit the mine field on the screen
jtulach@63
     1
<!--
jtulach@63
     2
jtulach@63
     3
    The MIT License (MIT)
jtulach@63
     4
jtulach@63
     5
    Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
jtulach@63
     6
jtulach@63
     7
    Permission is hereby granted, free of charge, to any person obtaining a copy
jtulach@63
     8
    of this software and associated documentation files (the "Software"), to deal
jtulach@63
     9
    in the Software without restriction, including without limitation the rights
jtulach@63
    10
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
jtulach@63
    11
    copies of the Software, and to permit persons to whom the Software is
jtulach@63
    12
    furnished to do so, subject to the following conditions:
jtulach@63
    13
jtulach@63
    14
    The above copyright notice and this permission notice shall be included in
jtulach@63
    15
    all copies or substantial portions of the Software.
jtulach@63
    16
jtulach@63
    17
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
jtulach@63
    18
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
jtulach@63
    19
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
jtulach@63
    20
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
jtulach@63
    21
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
jtulach@63
    22
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
jtulach@63
    23
    THE SOFTWARE.
jtulach@63
    24
jtulach@63
    25
-->
jtulach@63
    26
<!DOCTYPE html>
jtulach@63
    27
<html>
jtulach@63
    28
    <head>
jtulach@63
    29
        <title></title>
jtulach@63
    30
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
jtulach@63
    31
        <link href="bootstrap.css" rel="stylesheet">
jtulach@63
    32
        <link href="bootstrap-responsive.css" rel="stylesheet">
jtulach@63
    33
        <link href="mines.css" rel="stylesheet">
jtulach@71
    34
        <!-- Target tablets -->
jtulach@73
    35
        <link href="mines-tablet-large.css" 
jtulach@73
    36
              media="(min-width:600px) and (max-width:780px), (min-height:620px) and (max-height:830px)" 
jtulach@73
    37
              rel="stylesheet" />
jtulach@73
    38
        <link href="mines-tablet-small.css" 
jtulach@73
    39
              media="(min-width:500px) and (max-width:600px), (min-height:520px) and (max-height:640px)" 
jtulach@73
    40
              rel="stylesheet" />
jtulach@71
    41
        <!-- Target phones -->
jtulach@73
    42
        <link href="mines-phone-large.css" 
jtulach@73
    43
              media="(min-width:400px) and (max-width:500px), (min-height:400px) and (max-height:520px)" 
jtulach@73
    44
              rel="stylesheet" />
jtulach@73
    45
        <link href="mines-phone-small.css" 
jtulach@73
    46
              media="(max-width:400px), (max-height:400px)" 
jtulach@73
    47
              rel="stylesheet" />
jtulach@63
    48
    </head>
jtulach@63
    49
    <body>
jtulach@70
    50
        <div class="navbar">
jtulach@70
    51
            <div class="navbar-inner">
jtulach@73
    52
                <a id="apptitle" class="brand" href="http://html.java.net">Minesweeper</a>
jtulach@73
    53
                <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: false, click: normalGame">New Game!</button>
jtulach@73
    54
                <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: false, click: giveUp ">Show Mines!</button>
jtulach@70
    55
            </div>
jtulach@70
    56
        </div>
jtulach@63
    57
jtulach@63
    58
        <table class="field">
jtulach@63
    59
            <tbody>
jtulach@63
    60
                <!-- ko foreach: rows -->
jtulach@63
    61
                <tr>
jtulach@63
    62
                    <!-- ko foreach: columns -->
jtulach@65
    63
                    <td data-bind="css: style, click: $parents[1].click" >
jtulach@71
    64
                        <div data-bind='html: html'></div>
jtulach@63
    65
                    </td>
jtulach@63
    66
                    <!-- /ko -->
jtulach@63
    67
                </tr>
jtulach@63
    68
                <!-- /ko -->
jtulach@63
    69
            </tbody>
jtulach@63
    70
        </table>
jtulach@63
    71
        
jtulach@63
    72
        
jtulach@63
    73
        
jtulach@63
    74
        <script type="text/javascript" src="bck2brwsr.js"></script>
jtulach@63
    75
        <script>
jtulach@63
    76
            var vm = bck2brwsr('${project.build.finalName}.jar');
jtulach@71
    77
            vm.loadClass('org.apidesign.demo.minesweeper.MainBrwsr');
jtulach@63
    78
        </script>
jtulach@63
    79
        
jtulach@63
    80
    </body>
jtulach@63
    81
</html>