From c3ad40be4d162b4d2809224fc954e9dd5c33e509 Mon Sep 17 00:00:00 2001
From: user <user@node5.net>
Date: Sat, 7 Dec 2024 18:44:20 +0100
Subject: title, example links, densify

---
 src/static/main.css        |  5 ++++-
 src/templates/base.html    |  2 +-
 src/templates/options.html | 28 ++++++++++++++++++----------
 3 files changed, 23 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/static/main.css b/src/static/main.css
index b47803f..9ab3da3 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -6,9 +6,12 @@ body {
 
 #LoadingIndicator {
   animation: spin 1.75s linear infinite;
+  height: 0;
+	margin-left: 40%;
+	font-size: 2em;
 }
 
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
-}
\ No newline at end of file
+}
diff --git a/src/templates/base.html b/src/templates/base.html
index 2844f62..7e35eba 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -5,7 +5,7 @@
     <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>
+    <title>POI 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">
diff --git a/src/templates/options.html b/src/templates/options.html
index 40e5471..27ef9a6 100644
--- a/src/templates/options.html
+++ b/src/templates/options.html
@@ -1,36 +1,44 @@
 <h1>POI map</h1>
 <form id="QueryForm" disabled>
-    <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>toilets</code>, or <code>swingerclub</code></div>
+			e.g.
+			<code><a href="/?Category=fast_food&HeatmapIntensity=3&HeatmapRadius=40">fast_food</a></code>,
+			<code><a href="/?HeatmapIntensity=6&HeatmapRadius=100&Category=supermarket">supermarket</a></code>, or
+			<code><a href="/?Category=cinema&HeatmapIntensity=25&HeatmapRadius=40">cinema</a></code>
+		</div>
 
     <br>
 
     <input class="form-control" id="HeatmapIntensity" name="HeatmapIntensity" value="5" type="number"
-           aria-describedby="HeatmapIntensityHelp">
+           aria-describedby="HeatmapIntensityHelp" max=2000>
     <div id="HeatmapIntensityHelp" class="form-text">Change the intensity of the heatmap nodes</div>
 
     <br>
 
     <input class="form-control" id="HeatmapRadius" name="HeatmapRadius" value="100" type="number"
-           aria-describedby="HeatmapRadiusHelp">
+           aria-describedby="HeatmapRadiusHelp" max="110">
     <div id="HeatmapRadiusHelp" class="form-text">Change the radius of the heatmap nodes</div>
 
     <br>
 
     <button type="submit" disabled id="SubmitButton" class="btn btn-primary">Run query</button>
+    <a class="btn btn-secondary" href="/">Clear search</a>
+    <div id="LoadingIndicator" class="text-center">
+        Loading
+    </div>
 </form>
 
-<br><br>
+<hr>
 
-Read more, and find the source code here: <a href="https://git.node5.net/poi_map/about/">POI map - git.node5.net</a>
+<h4>Read more</h4>
+
+<ul>
+	<li><a href="https://git.node5.net/map.node5.net/about/">Source code - git.node5.net</a></li>
+	<li><a href="https://wikipedia.org/wiki/Voronoi_diagram">Voronoi diagram - wikipedia.org</a></li>
+<ul>
 
-<br><br><br>
-<div id="LoadingIndicator" class="text-center">
-    Loading
-</div>
-- 
cgit v1.2.3