MAPG-4 show real position after guess

make workflow better

views/game.php

@@ -3,7 +3,8 @@
 <head>
     <meta charset="utf-8">
     <title>MapGuesser</title>
-    <link rel="stylesheet" type="text/css" href="static/css/mapguesser.css">
+    <link href="static/css/mapguesser.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
 </head>
 <body>
     <div id="panorama"></div>
@@ -13,6 +14,13 @@
             <button id="guessButton" disabled>Guess</button>
         </div>
     </div>
+    <div id="result">
+        <div id="resultMap"></div>
+        <div id="resultInfo">
+            <p>You were <span id="distance" class="bold"></span> close.</p>
+            <button id="continueButton">Continue</button>
+        </div>
+    </div>
     <script>
         var guessMapBounds = <?= $bounds->toJson() ?>;
     </script>