From 82fa4e1c5ffa266d339c603efab89a05e6cd383c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sat, 30 May 2020 23:16:31 +0200
Subject: [PATCH 1/4] MAPG-81 update .gitattributes to store PNG files with Git
 LFS

---
 .gitattributes | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.gitattributes b/.gitattributes
index fe357d6..24a8e87 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,2 +1 @@
-*.gif filter=lfs diff=lfs merge=lfs -text
-
+*.png filter=lfs diff=lfs merge=lfs -text

From 2e2524474fca442c5d4757259b3e924dfb9b78e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sat, 30 May 2020 23:16:42 +0200
Subject: [PATCH 2/4] MAPG-81 add favicons

---
 public/static/img/favicon/16x16.png   | 3 +++
 public/static/img/favicon/192x192.png | 3 +++
 public/static/img/favicon/32x32.png   | 3 +++
 public/static/img/favicon/96x96.png   | 3 +++
 public/static/img/favicon/favicon.svg | 5 +++++
 views/game.php                        | 4 ++++
 views/maps.php                        | 4 ++++
 7 files changed, 25 insertions(+)
 create mode 100644 public/static/img/favicon/16x16.png
 create mode 100644 public/static/img/favicon/192x192.png
 create mode 100644 public/static/img/favicon/32x32.png
 create mode 100644 public/static/img/favicon/96x96.png
 create mode 100644 public/static/img/favicon/favicon.svg

diff --git a/public/static/img/favicon/16x16.png b/public/static/img/favicon/16x16.png
new file mode 100644
index 0000000..5600d45
--- /dev/null
+++ b/public/static/img/favicon/16x16.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a294790b57f274ec8833d3abbdb8fd7e8e39b60cfa7ad27e01267dcbf0692b66
+size 713
diff --git a/public/static/img/favicon/192x192.png b/public/static/img/favicon/192x192.png
new file mode 100644
index 0000000..a80322c
--- /dev/null
+++ b/public/static/img/favicon/192x192.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e74142bd65248bce22e250b3f5ee5a229a7fe7bed138cc9e9461f29ad4c75a76
+size 2018
diff --git a/public/static/img/favicon/32x32.png b/public/static/img/favicon/32x32.png
new file mode 100644
index 0000000..22a91e1
--- /dev/null
+++ b/public/static/img/favicon/32x32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:36a1b35e1b197b2aafd347e82a8f4ccd99224f7b2e4d67f9077c53184098773c
+size 789
diff --git a/public/static/img/favicon/96x96.png b/public/static/img/favicon/96x96.png
new file mode 100644
index 0000000..47e0387
--- /dev/null
+++ b/public/static/img/favicon/96x96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8306b2942d75f1d864e53f77b623462729d91d61cc852df6ccee82961d56ee78
+size 1295
diff --git a/public/static/img/favicon/favicon.svg b/public/static/img/favicon/favicon.svg
new file mode 100644
index 0000000..b08c37a
--- /dev/null
+++ b/public/static/img/favicon/favicon.svg
@@ -0,0 +1,5 @@
+<!-- The PNGs in this folder are generated from this SVG. -->
+<!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z" />
+</svg>
diff --git a/views/game.php b/views/game.php
index 1e17b03..e654686 100644
--- a/views/game.php
+++ b/views/game.php
@@ -6,6 +6,10 @@
     <title>MapGuesser</title>
     <link href="static/css/mapguesser.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/png" sizes="192x192" href="static/img/favicon/192x192.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="static/img/favicon/96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon/32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon/16x16.png">
 </head>
 <body>
     <div id="loading">
diff --git a/views/maps.php b/views/maps.php
index 2df5482..9b45134 100644
--- a/views/maps.php
+++ b/views/maps.php
@@ -6,6 +6,10 @@
     <title>MapGuesser</title>
     <link href="static/css/mapguesser.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/png" sizes="192x192" href="static/img/favicon/192x192.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="static/img/favicon/96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon/32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon/16x16.png">
 </head>
 <body>
     <div id="loading">

From ea272582eb1f6220c920625ec3dcba879c89d11d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sat, 30 May 2020 23:19:10 +0200
Subject: [PATCH 3/4] MAPG-81 modify Bootstrap Icon copyright not to be in
 generated code

---
 views/game.php | 2 +-
 views/maps.php | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/views/game.php b/views/game.php
index e654686..118607f 100644
--- a/views/game.php
+++ b/views/game.php
@@ -19,7 +19,7 @@
         <div class="grid">
             <h1>
                 <a href="maps" title="Back to playable maps">
-                    <!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+                    <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
                     <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z" />
                     </svg>
diff --git a/views/maps.php b/views/maps.php
index 9b45134..67531e7 100644
--- a/views/maps.php
+++ b/views/maps.php
@@ -17,7 +17,7 @@
     </div>
     <div class="header">
         <h1>
-            <!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+            <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
             <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z" />
             </svg>
@@ -36,14 +36,14 @@
                     <div class="inner">
                         <div class="info">
                             <p>
-                                <!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+                                <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
                                 <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                     <path fill-rule="evenodd" d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                                 </svg>
                                 <?= $map['num_places'] ?> places
                             </p>
                             <p>
-                                <!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+                                <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
                                 <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                     <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" />
                                     <path fill-rule="evenodd" d="M14 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM2 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />

From 9a4d9435d93234947356395d0f2ec8a2e9a4d574 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sun, 31 May 2020 00:21:29 +0200
Subject: [PATCH 4/4] MAPG-82 introduce very basic templating

---
 views/game.php                  | 110 ++++++++++++----------------
 views/maps.php                  | 122 +++++++++++++-------------------
 views/templates/icon.php        |   4 ++
 views/templates/main_footer.php |   2 +
 views/templates/main_header.php |  17 +++++
 5 files changed, 119 insertions(+), 136 deletions(-)
 create mode 100644 views/templates/icon.php
 create mode 100644 views/templates/main_footer.php
 create mode 100644 views/templates/main_header.php

diff --git a/views/game.php b/views/game.php
index 118607f..5732766 100644
--- a/views/game.php
+++ b/views/game.php
@@ -1,73 +1,53 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>MapGuesser</title>
-    <link href="static/css/mapguesser.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
-    <link rel="icon" type="image/png" sizes="192x192" href="static/img/favicon/192x192.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="static/img/favicon/96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon/32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon/16x16.png">
-</head>
-<body>
-    <div id="loading">
-        <img src="static/img/loading.svg">
+<?php require 'templates/main_header.php'; ?>
+<div class="header small">
+    <div class="grid">
+        <h1>
+            <a href="maps" title="Back to playable maps">
+                <?php require 'templates/icon.php'; ?>
+                <span>MapGuesser</span>
+            </a>
+        </h1>
+        <p id="roundInfo">Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p>
     </div>
-    <div class="header small">
-        <div class="grid">
-            <h1>
-                <a href="maps" title="Back to playable maps">
-                    <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-                    <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z" />
-                    </svg>
-                    <span>MapGuesser</span>
-                </a>
-            </h1>
-            <p id="roundInfo">Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p>
-        </div>
+</div>
+<div id="cover"></div>
+<div id="panorama"></div>
+<div id="showGuessButtonContainer">
+    <button id="showGuessButton" class="fullWidth">Show guess map</button>
+</div>
+<div id="guess">
+    <div id="closeGuessButtonContainer" class="buttonContainer marginBottom">
+        <button id="closeGuessButton" class="fullWidth gray">Close</button>
     </div>
-    <div id="cover"></div>
-    <div id="panorama"></div>
-    <div id="showGuessButtonContainer">
-        <button id="showGuessButton" class="fullWidth">Show guess map</button>
+    <div id="map"></div>
+    <div id="guessButtonContainer" class="buttonContainer marginTop">
+        <button id="guessButton" class="fullWidth" disabled>Guess</button>
     </div>
-    <div id="guess">
-        <div id="closeGuessButtonContainer" class="buttonContainer marginBottom">
-            <button id="closeGuessButton" class="fullWidth gray">Close</button>
+    <div id="resultInfo">
+        <div id="distanceInfo">
+            <p>You were <span id="distance" class="bold"></span> close.</p>
+            <p class="bold">Game finished.</p>
         </div>
-        <div id="map"></div>
-        <div id="guessButtonContainer" class="buttonContainer marginTop">
-            <button id="guessButton" class="fullWidth" disabled>Guess</button>
+        <div id="scoreInfo">
+            <p>You earned <span id="score" class="bold"></span> points.</p>
+            <p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
         </div>
-        <div id="resultInfo">
-            <div id="distanceInfo">
-                <p>You were <span id="distance" class="bold"></span> close.</p>
-                <p class="bold">Game finished.</p>
-            </div>
-            <div id="scoreInfo">
-                <p>You earned <span id="score" class="bold"></span> points.</p>
-                <p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
-            </div>
-            <div>
-                <div id="scoreBarBase">
-                    <div id="scoreBar"></div>
-                </div>
+        <div>
+            <div id="scoreBarBase">
+                <div id="scoreBar"></div>
             </div>
         </div>
-        <div id="continueButtonContainer" class="buttonContainer marginTop">
-            <button id="continueButton" class="fullWidth">Continue</button>
-            <button id="showSummaryButton" class="fullWidth">Show summary</button>
-            <button id="startNewGameButton" class="fullWidth">Play this map again</button>
-        </div>
     </div>
-    <script>
-        var mapId = '<?= $mapId ?>';
-        var mapBounds = <?= json_encode($bounds) ?>;
-    </script>
-    <script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script>
-    <script src="static/js/game.js"></script>
-</body>
-</html>
+    <div id="continueButtonContainer" class="buttonContainer marginTop">
+        <button id="continueButton" class="fullWidth">Continue</button>
+        <button id="showSummaryButton" class="fullWidth">Show summary</button>
+        <button id="startNewGameButton" class="fullWidth">Play this map again</button>
+    </div>
+</div>
+<script>
+    var mapId = '<?= $mapId ?>';
+    var mapBounds = <?= json_encode($bounds) ?>;
+</script>
+<script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script>
+<script src="static/js/game.js"></script>
+<?php require 'templates/main_footer.php'; ?>
\ No newline at end of file
diff --git a/views/maps.php b/views/maps.php
index 67531e7..2aa4b18 100644
--- a/views/maps.php
+++ b/views/maps.php
@@ -1,74 +1,54 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>MapGuesser</title>
-    <link href="static/css/mapguesser.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
-    <link rel="icon" type="image/png" sizes="192x192" href="static/img/favicon/192x192.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="static/img/favicon/96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon/32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon/16x16.png">
-</head>
-<body>
-    <div id="loading">
-        <img src="static/img/loading.svg">
-    </div>
-    <div class="header">
-        <h1>
-            <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-            <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z" />
-            </svg>
-            MapGuesser
-        </h1>
-    </div>
-    <div class="main">
-        <h2>Playable maps</h2>
-        <div class="mapContainer">
-            <?php foreach ($maps as $map) : ?>
-                <div class="mapItem">
-                    <div class="title">
-                        <p class="title"><?= $map['name'] ?></p>
-                    </div>
-                    <img src="https://maps.googleapis.com/maps/api/staticmap?size=350x175&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>">
-                    <div class="inner">
-                        <div class="info">
-                            <p>
-                                <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-                                <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                                    <path fill-rule="evenodd" d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
-                                </svg>
-                                <?= $map['num_places'] ?> places
-                            </p>
-                            <p>
-                                <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-                                <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                                    <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" />
-                                    <path fill-rule="evenodd" d="M14 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM2 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
-                                </svg>
-                                ~ <?= $map['area'][0] ?> <?= $map['area'][1] ?><sup>2</sup>
-                            </p>
-                        </div>
-                        <p class="small justify marginTop"><?= $map['description'] ?></p>
-                    </div>
-                    <a class="button fullWidth" href="game?map=<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
+<?php require 'templates/main_header.php'; ?>
+<div class="header">
+    <h1>
+        <?php require 'templates/icon.php'; ?>
+        MapGuesser
+    </h1>
+</div>
+<div class="main">
+    <h2>Playable maps</h2>
+    <div class="mapContainer">
+        <?php foreach ($maps as $map) : ?>
+            <div class="mapItem">
+                <div class="title">
+                    <p class="title"><?= $map['name'] ?></p>
                 </div>
-            <?php endforeach; ?>
-            <?php if (count($maps) < 4): ?>
-                <?php for ($i = 0; $i < 4 - count($maps); ++$i): ?>
-                    <div class="mapItem"></div>
-                <?php endfor; ?>
-            <?php endif; ?>
-        </div>
+                <img src="https://maps.googleapis.com/maps/api/staticmap?size=350x175&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>">
+                <div class="inner">
+                    <div class="info">
+                        <p>
+                            <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
+                            <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
+                            </svg>
+                            <?= $map['num_places'] ?> places
+                        </p>
+                        <p>
+                            <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
+                            <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" />
+                                <path fill-rule="evenodd" d="M14 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM2 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
+                            </svg>
+                            ~ <?= $map['area'][0] ?> <?= $map['area'][1] ?><sup>2</sup>
+                        </p>
+                    </div>
+                    <p class="small justify marginTop"><?= $map['description'] ?></p>
+                </div>
+                <a class="button fullWidth" href="game?map=<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
+            </div>
+        <?php endforeach; ?>
+        <?php if (count($maps) < 4): ?>
+            <?php for ($i = 0; $i < 4 - count($maps); ++$i): ?>
+                <div class="mapItem"></div>
+            <?php endfor; ?>
+        <?php endif; ?>
     </div>
-    <script>
-        document.getElementById('loading').style.visibility = 'hidden';
+</div>
+<script>
+    document.getElementById('loading').style.visibility = 'hidden';
 
-        window.addEventListener('beforeunload', function (e) {
-            document.getElementById('loading').style.visibility = 'visible';
-        });
-    </script>
-</body>
-</html>
+    window.addEventListener('beforeunload', function (e) {
+        document.getElementById('loading').style.visibility = 'visible';
+    });
+</script>
+<?php require 'templates/main_footer.php'; ?>
\ No newline at end of file
diff --git a/views/templates/icon.php b/views/templates/icon.php
new file mode 100644
index 0000000..85fba48
--- /dev/null
+++ b/views/templates/icon.php
@@ -0,0 +1,4 @@
+<?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
+<svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z" />
+</svg>
\ No newline at end of file
diff --git a/views/templates/main_footer.php b/views/templates/main_footer.php
new file mode 100644
index 0000000..691287b
--- /dev/null
+++ b/views/templates/main_footer.php
@@ -0,0 +1,2 @@
+</body>
+</html>
\ No newline at end of file
diff --git a/views/templates/main_header.php b/views/templates/main_header.php
new file mode 100644
index 0000000..30ccb9f
--- /dev/null
+++ b/views/templates/main_header.php
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>MapGuesser</title>
+    <link href="static/css/mapguesser.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/png" sizes="192x192" href="static/img/favicon/192x192.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="static/img/favicon/96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon/32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon/16x16.png">
+</head>
+<body>
+    <div id="loading">
+        <img src="static/img/loading.svg">
+    </div>
\ No newline at end of file