1 files changed, 91 insertions, 14 deletions
diff --git a/utils/minesweeper/index.html b/utils/minesweeper/index.html
index 16ab664..546d0f8 100644
--- a/utils/minesweeper/index.html
+++ b/utils/minesweeper/index.html
@@ -5,28 +5,105 @@
         <title>cacharle - minesweeper</title>
         <link rel="stylesheet" type="text/css" href="../../style.css"/>
         <meta charset="utf-8"/>
-	    <link rel="icon" type="image/png" href="../../favicon.png" />
+        <link rel="icon" type="image/png" href="../../favicon.png" />
+        <style>
+            h1 {
+                text-align: center;
+            }
+            td {
+                padding: 0px;
+            }
+            table {
+                margin: auto;
+                margin-top: 0%;
+                margin-bottom: 5%;
+                border-collapse: collapse;
+                border-spacing: 0px;
+            }
+            table td {
+                width: 2.5em;
+                height: 2.5em;
+            }
+            table button {
+                display: block;
+                background: lightgrey;
+                margin: 0px;
+                width: 100%;
+                height: 100%;
+                text-align: center;
+                font-size: 1.6em;
+                border-width: 6px;
+                border-style: outset;
+                border-radius: 0px;
+                border-color: grey;
+            }
+            table button:hover {
+                background: forestgreen;
+            }
+            table button.visited {
+                background: lightgrey;
+                border-style: solid;
+                border-width: 1px;
+            }
+            button {
+                font-weight: bold;
+            }
+
+            label,
+            input {
+                display: inline-block;
+            }
+            label {
+                width: 13%;
+                text-align: right;
+            }
+            input {
+                width: 40%;
+                margin: 0px;
+            }
+            button.game-state {
+                float: right;
+                margin-right: 20%;
+                font-size: 2em;
+                text-transform: uppercase;
+            }
+            #minesweeper-timer {
+                display: block;
+                font-weight: bolder;
+                text-align: center;
+
+            }
+
+        </style>
     </head>
 
     <body><div id="page-wrapper">
         <h1>minesweeper</h1>
 
-        <div>
-          before start
-          size:
-          <input type="range"/>
-          mine rate:
-          <input type="range"/>
-          <button>start</button>
-        </div>
 
-        <div>
-          during
-          <div>timer</div>
-          <button>start</button>
+        <table id="minesweeper-table">
+        </table>
+
+        <div id="minesweeper-settings">
+            <button id="minesweeper-start" class="game-state">start</button>
+            <div>
+                <label for="width">width</label>
+                <input id="minesweeper-width" name="width" type="range" min="3" max="20" value="10"/>
+            </div>
+            <div>
+                <label for="height">height</label>
+                <input id="minesweeper-height" name="height" type="range" min="3" max="20" value="10"/>
+            </div>
+            <div>
+                <label for="mine-rate">mine rate</label>
+                <input id="minesweeper-mine-rate" name="mine-rate" type="range" min="0" max="100" value="20"/>
+            </div>
+        </div>
+        <div id="minesweeper-game-info" hidden>
+            <button id="minesweeper-stop" class="game-state">stop</button>
+            <div id="minesweeper-timer">timer</div>
         </div>
 
-        <canvas id="minesweeper-canvas"></canvas>
 
     </div></body>
     <script src="script.js" type="text/javascript"></script>