From 20914b466e7602e2e8f890f7c5d571aebfad44c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sun, 4 Apr 2021 13:41:15 +0200
Subject: [PATCH] MAPG-205 add elements for showing countdown

---
 public/static/css/game.css | 38 ++++++++++++++++++++++++++++++++++++++
 views/game.php             |  3 +++
 2 files changed, 41 insertions(+)

diff --git a/public/static/css/game.css b/public/static/css/game.css
index fd08d15..e5d910a 100644
--- a/public/static/css/game.css
+++ b/public/static/css/game.css
@@ -111,6 +111,44 @@
     font-weight: bold;
 }
 
+#countdown {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    height: 28px;
+    line-height: 28px;
+    padding: 0 8px;
+    background-color: #eeeeee;
+    border: solid 1px #555555;
+    border-radius: 3px;
+    opacity: 0.95;
+    z-index: 5;
+    visibility: hidden;
+}
+
+#countdown.yellow {
+    background-color: #f7c789;
+    border: solid 1px #e8a349;
+}
+
+#countdown.red {
+    background-color: #f7a5a5;
+    border: solid 1px #aa5e5e;
+}
+
+#countdown p {
+    font-size: 16px;
+    line-height: inherit;
+}
+
+#countdown.yellow p {
+    color: #9c4308;
+}
+
+#countdown.red p {
+    color: #701919;
+}
+
 @media screen and (max-width: 599px) {
     #mapName {
         display: none;
diff --git a/views/game.php b/views/game.php
index 3e93b42..b197f8c 100644
--- a/views/game.php
+++ b/views/game.php
@@ -21,6 +21,9 @@
 @endsection
 
 @section(main)
+    <div id="countdown">
+        <p id="countdownTime" class="mono bold"></p>
+    </div>
     <div id="panoCover"></div>
     <div id="panorama"></div>
     <div id="showGuessButtonContainer">