3 files changed, 59 insertions, 0 deletions
diff --git a/src/templates/base.html b/src/templates/base.html
new file mode 100644
index 0000000..2844f62
--- /dev/null
+++ b/src/templates/base.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% block head %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Nearest shop map</title>
+    <link rel="stylesheet" href="leaflet.css"/>
+    <link rel="stylesheet" href="main.css"/>
+    <link rel="stylesheet" href="bootstrap-5.3.3-dist/css/bootstrap.min.css">
+    <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <script src="leaflet.js" defer></script>
+    <script src="leaflet-heat.js" defer></script>
+    <script src="main.js" defer></script>
+    {% endblock %}
+</head>
+<body>
+
+{% block body %}
+{% endblock %}
+
+</body>
+</html>
diff --git a/src/templates/index.html b/src/templates/index.html
new file mode 100644
index 0000000..f97ae53
--- /dev/null
+++ b/src/templates/index.html
@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+
+{% block body %}
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-2">
+            {% include 'options.html' %}
+        </div>
+        <div class="col">
+            <div id="map"></div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+\ No newline at end of file
diff --git a/src/templates/options.html b/src/templates/options.html
new file mode 100644
index 0000000..8f2d43a
--- /dev/null
+++ b/src/templates/options.html
@@ -0,0 +1,21 @@
+<h1>POI map</h1>
+<form>
+    <label for="Category" class="form-label"><h3>Category</h3></label>
+    <input class="form-control" list="CategoriesDataList" id="Category" name="Category" placeholder="Type to search..."
+           aria-describedby="CategoriesHelp" value=""> {# Value set to empty string is important for JS function #}
+    <datalist id="CategoriesDataList">
+
+    </datalist>
+    <div id="CategoriesHelp" class="form-text">Change the category shown on the map<br>
+        e.g. <code>supermarket</code>, <code>toilet</code>, or <code>swingerclub</code></div>
+
+    <br>
+
+    <button type="submit" class="btn btn-primary">Run query</button>
+
+    <br><br>
+
+    Read more, and find the source code here: <a href="https://git.node5.net/poi_map/about/">POI map - git.node5.net</a>
+
+</form>
+