From fd574912c0fc9597a9fbf35800b01f15305ea9ce Mon Sep 17 00:00:00 2001
From: Marcel <kingofdog@web.de>
Date: Thu, 10 May 2018 12:41:44 +0200
Subject: [PATCH] Update main page

---
 index.html | 43 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 69d33cb..d76558d 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <title>Minesweeper.js</title>
     <style>
         html {
             overflow: hidden;
@@ -13,11 +13,48 @@
             top: 0;
             left: 0;
         }
+
+        #game-container {
+            position: absolute;
+            bottom: 2.5%;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        #game-stats {
+            position: absolute;
+            top: calc(2.5vh / 2);
+            left: 50%;
+            height: 5vh;
+            width: 1592px;
+            transform: translateX(-50%);
+        }
+
+        #time-container {
+            float: right;
+            background-color: black;
+            border-radius: 10px;
+            color: red;
+            font-size: 4vh;
+            font-family: "SF Digital Readout", Roboto, Arial, sans-serif;
+        }
+
+        #time {
+            margin: 0 15px;
+        }
     </style>
 </head>
 <body style="margin: 0">
 
-<div>
+<div id="game-stats">
+    <div id="time-container">
+        <span id="time">
+            00:00
+        </span>
+    </div>
+</div>
+
+<div id="game-container">
     <canvas id="minesweeper-game" width="100" height="100"></canvas>
     <canvas id="minesweeper-overlay" width="100" height="100"></canvas>
     <canvas id="minesweeper-overlay2" width="100" height="100"></canvas>
@@ -28,4 +65,4 @@
 <script type="text/javascript" src="minesweeper.js"></script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
