1.1 --- a/minesweeper/src/main/webapp/pages/index.html Sat Feb 08 12:12:39 2014 +0100
1.2 +++ b/minesweeper/src/main/webapp/pages/index.html Sat Feb 08 13:02:21 2014 +0100
1.3 @@ -71,6 +71,8 @@
1.4 </tbody>
1.5 </table>
1.6 </script>
1.7 +
1.8 + <div data-bind="template: { name : 'field', if: fieldShowing }"></div>
1.9
1.10 <div class="jumbotron control-label" data-bind="visible: !fieldShowing() ">
1.11 <div class="container">
1.12 @@ -84,16 +86,54 @@
1.13 modern <strong>HTML5</strong> browser.
1.14 </p>
1.15 <p><a class="btn btn-primary btn-lg" role="button"
1.16 - target="_blank" href="http://bits.netbeans.org/html4j/0.7.5/"
1.17 - >Learn more!</a>
1.18 - <a class="btn btn-primary btn-lg" role="button"
1.19 - data-bind="click: normalGame"
1.20 - >Play!</a>
1.21 + target="_blank" href="http://html.java.net"
1.22 + >Visit Project Page!</a>
1.23 </p>
1.24 </div>
1.25 </div>
1.26 -
1.27 - <div data-bind="template: { name : 'field', if: fieldShowing }"/>
1.28 +
1.29 + <div class="container" data-bind="visible: !fieldShowing()">
1.30 + <div class="row">
1.31 + <div class="col-md-4">
1.32 + <h2>Minesweeper</h2>
1.33 + <p>
1.34 + At the end this is a <em>minesweeper</em>
1.35 + game and you can of course play it. Discover
1.36 + all fields that don't contain a mine.
1.37 + Touch a field to find out if there is
1.38 + a mine or not. A number on a field indicates
1.39 + how many mines is in the eight surrounding
1.40 + fields.
1.41 + </p>
1.42 + <p><a class="btn btn-default" href="#" data-bind="click: normalGame"role="button">Play »</a></p>
1.43 + </div>
1.44 + <div class="col-md-4">
1.45 + <h2>Documentation</h2>
1.46 + <p>
1.47 + In case you want to write application like
1.48 + this (e.g. use <strong>Java</strong> and <strong>HTML</strong>)
1.49 + you can learn more about the libraries that
1.50 + make that possible. Follow this link to
1.51 + our documentation.
1.52 + </p>
1.53 + <p><a class="btn btn-default"
1.54 + target="_blank" href="http://bits.netbeans.org/html4j/0.7.5/"
1.55 + role="button">Read more »</a></p>
1.56 + </div>
1.57 + <div class="col-md-4">
1.58 + <h2>Run in a Browser</h2>
1.59 + <p>
1.60 + While primarily this technology runs on a desktop
1.61 + or as a table or phone application, it is possible
1.62 + to execute the same unchanged code in a browser
1.63 + as well. To do so, one needs a <strong>bck2brwsr</strong>
1.64 + virtual machine.
1.65 + </p>
1.66 + <p><a class="btn btn-default"
1.67 + target="_blank" href="http://bck2brwsr.apidesign.org"
1.68 + role="button">Learn more »</a></p>
1.69 + </div>
1.70 + </div>
1.71
1.72 <script type="text/javascript" src="bck2brwsr.js"></script>
1.73 <script>
2.1 --- a/minesweeper/src/main/webapp/pages/mines-phone-large.css Sat Feb 08 12:12:39 2014 +0100
2.2 +++ b/minesweeper/src/main/webapp/pages/mines-phone-large.css Sat Feb 08 13:02:21 2014 +0100
2.3 @@ -29,4 +29,25 @@
2.4 }
2.5 h1 {
2.6 font-size: 15px;
2.7 -}
2.8 \ No newline at end of file
2.9 +}
2.10 +.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 {
2.11 + float: none;
2.12 + }
2.13 +.col-md-6 {
2.14 + width: 100%;
2.15 +}
2.16 +.col-md-5 {
2.17 + width: 100%;
2.18 +}
2.19 +.col-md-4 {
2.20 + width: 100%;
2.21 +}
2.22 +.col-md-3 {
2.23 + width: 100%;
2.24 +}
2.25 +.col-md-2 {
2.26 + width: 100%;
2.27 +}
2.28 +.col-md-1 {
2.29 + width: 100%;
2.30 +}
3.1 --- a/minesweeper/src/main/webapp/pages/mines-phone-small.css Sat Feb 08 12:12:39 2014 +0100
3.2 +++ b/minesweeper/src/main/webapp/pages/mines-phone-small.css Sat Feb 08 13:02:21 2014 +0100
3.3 @@ -29,4 +29,25 @@
3.4 }
3.5 h1 {
3.6 font-size: 12px;
3.7 -}
3.8 \ No newline at end of file
3.9 +}
3.10 +.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 {
3.11 + float: none;
3.12 + }
3.13 +.col-md-6 {
3.14 + width: 100%;
3.15 +}
3.16 +.col-md-5 {
3.17 + width: 100%;
3.18 +}
3.19 +.col-md-4 {
3.20 + width: 100%;
3.21 +}
3.22 +.col-md-3 {
3.23 + width: 100%;
3.24 +}
3.25 +.col-md-2 {
3.26 + width: 100%;
3.27 +}
3.28 +.col-md-1 {
3.29 + width: 100%;
3.30 +}
4.1 --- a/minesweeper/src/main/webapp/pages/mines-tablet-large.css Sat Feb 08 12:12:39 2014 +0100
4.2 +++ b/minesweeper/src/main/webapp/pages/mines-tablet-large.css Sat Feb 08 13:02:21 2014 +0100
4.3 @@ -21,7 +21,29 @@
4.4 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
4.5 * THE SOFTWARE.
4.6 */
4.7 -table.field td {
4.8 + .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 {
4.9 + float: left;
4.10 + }
4.11 +.col-md-6 {
4.12 + width: 50%;
4.13 +}
4.14 +.col-md-5 {
4.15 + width: 41.66666666666667%;
4.16 +}
4.17 +.col-md-4 {
4.18 + width: 33.33333333333333%;
4.19 +}
4.20 +.col-md-3 {
4.21 + width: 25%;
4.22 +}
4.23 +.col-md-2 {
4.24 + width: 16.666666666666664%;
4.25 +}
4.26 +.col-md-1 {
4.27 + width: 8.333333333333332%;
4.28 +}
4.29 +
4.30 + table.field td {
4.31 padding: 8px;
4.32 width: 42px;
4.33 height: 42px;
5.1 --- a/minesweeper/src/main/webapp/pages/mines-tablet-small.css Sat Feb 08 12:12:39 2014 +0100
5.2 +++ b/minesweeper/src/main/webapp/pages/mines-tablet-small.css Sat Feb 08 13:02:21 2014 +0100
5.3 @@ -29,4 +29,25 @@
5.4 }
5.5 h1 {
5.6 font-size: 18px;
5.7 -}
5.8 \ No newline at end of file
5.9 +}
5.10 + .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 {
5.11 + float: left;
5.12 + }
5.13 +.col-md-6 {
5.14 + width: 50%;
5.15 +}
5.16 +.col-md-5 {
5.17 + width: 50%;
5.18 +}
5.19 +.col-md-4 {
5.20 + width: 50%;
5.21 +}
5.22 +.col-md-3 {
5.23 + width: 100%;
5.24 +}
5.25 +.col-md-2 {
5.26 + width: 100%;
5.27 +}
5.28 +.col-md-1 {
5.29 + width: 100%;
5.30 +}