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;

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">