Mobile layout tweaks

Fix placement of support/donate button
2026-03-15 12:24:29 +00:00 · 2026-01-31 22:24:46 +00:00 · 2026-01-31 13:45:49 +00:00 · 2026-01-31 13:43:10 +00:00 · 2026-01-31 09:34:37 +00:00 · 2026-01-31 08:52:28 +00:00
51 changed files with 692 additions and 667 deletions
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ The API is deliberately well-defined with an OpenAPI specification and auto-gene

 Spothole itself is also open source, Public Domain licenced code that anyone can take and modify.

-Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), the APRS Internet Service (APRS-IS), POTA, SOTA, WWFF, GMA, WWBOTA, HEMA, Parks 'n' Peaks, ZLOTA, WOTA, BOTA, LLOTA, the UK Packet Repeater Network, NG3K, and any site based on the xOTA software by nischu.
+Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), the APRS Internet Service (APRS-IS), POTA, SOTA, WWFF, GMA, WWBOTA, HEMA, Parks 'n' Peaks, ZLOTA, WOTA, BOTA, LLOTA, WWTOTA, the UK Packet Repeater Network, NG3K, and any site based on the xOTA software by nischu.

 ![Screenshot](/images/screenshot2.png)

@@ -34,20 +34,20 @@ These are supplied with the URL to the page you want to embed, for example for a

 The supported parameters are as follows. Generally these match the equivalent parameters in the real Spothole API, where a mapping exists.

-| Name           | Allowed Values        | Default | Example                 | Description                                                                                                                                                           |
-|----------------|-----------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `embedded`     | `true`, `false`       | `false` | `?embedded=true`        | Enables embedded mode.                                                                                                                                                |
-| `dark-mode`    | `true`, `false`       | `false` | `?dark-mode=true`       | Enables dark mode.                                                                                                                                                    |
-| `time-zone`    | `UTC`, `local`        | `UTC`   | `?time-zone=local`      | Sets times to be in UTC or local time.                                                                                                                                |
-| `limit`        | 10, 25, 50, 100       | 50      | `?limit=50`             | Sets the number of spots that will be displayed on the main spots page                                                                                                |
-| `limit`        | 25, 50, 100, 200, 500 | 100     | `?limit=100`            | Sets the number of alerts that will be displayed on the alerts page                                                                                                   |
-| `max_age`      | 300, 600, 1800, 3600  | 1800    | `?max_age=1800`         | Sets the maximum age of spots displayed on the map and bands pages, in seconds.                                                                                       |
-| `band`         | Comma-separated list  | (all)   | `?band=20m,40m`         | Sets the list of bands that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.         |
-| `sig`          | Comma-separated list  | (all)   | `?sig=POTA,SOTA,NO_SIG` | Sets the list of SIGs that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.          |
-| `source`       | Comma-separated list  | (all)   | `?source=Cluster`       | Sets the list of sources that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.              |
-| `mode_type`    | Comma-separated list  | (all)   | `?mode_type=PHONE,CW`   | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.    |
-| `dx_continent` | Comma-separated list  | (all)   | `?dx_continent=NA,SA`   | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.        |
-| `de_continent` | Comma-separated list  | (all)   | `?de_continent=EU`      | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
+| Name           | Allowed Values          | Default | Example                 | Description                                                                                                                                                           |
+|----------------|-------------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `embedded`     | `true`, `false`         | `false` | `?embedded=true`        | Enables embedded mode.                                                                                                                                                |
+| `color-scheme` | `light`, `dark`, `auto` | `auto`  | `?color-scheme=dark`    | Forces light or dark mode in preference to the operating system default.                                                                                              |
+| `time-zone`    | `UTC`, `local`          | `UTC`   | `?time-zone=local`      | Sets times to be in UTC or local time.                                                                                                                                |
+| `limit`        | 10, 25, 50, 100         | 50      | `?limit=50`             | Sets the number of spots that will be displayed on the main spots page                                                                                                |
+| `limit`        | 25, 50, 100, 200, 500   | 100     | `?limit=100`            | Sets the number of alerts that will be displayed on the alerts page                                                                                                   |
+| `max_age`      | 300, 600, 1800, 3600    | 1800    | `?max_age=1800`         | Sets the maximum age of spots displayed on the map and bands pages, in seconds.                                                                                       |
+| `band`         | Comma-separated list    | (all)   | `?band=20m,40m`         | Sets the list of bands that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.         |
+| `sig`          | Comma-separated list    | (all)   | `?sig=POTA,SOTA,NO_SIG` | Sets the list of SIGs that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.          |
+| `source`       | Comma-separated list    | (all)   | `?source=Cluster`       | Sets the list of sources that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.              |
+| `mode_type`    | Comma-separated list    | (all)   | `?mode_type=PHONE,CW`   | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.    |
+| `dx_continent` | Comma-separated list    | (all)   | `?dx_continent=NA,SA`   | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.        |
+| `de_continent` | Comma-separated list    | (all)   | `?de_continent=EU`      | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |

 More will be added soon to allow customisation of filters and other display properties.

@@ -83,6 +83,8 @@ cp config-example.yml config.yml

 Then edit `config.yml` in your text editor of choice to set up the software as you like it. Mostly, this will involve enabling or disabling the various providers of spot and alert data.

+By default, all outdoor programme providers are enabled, as is one cluster node and the NG3K DXpedition data. The RBN spot providers are turned off by default due to the volume of traffic from CW/RTTY/FT8 skimmers, and the APRS and Packet spot providers are off by default on the assumption that Spothole users want a spot with a human at the other end of it, but all can be easily re-enabled.
+
 `config.yml` has some entries for QRZ.com username & password, and Clublog API keys. If provided, these allow Spothole to retrieve more information about DX spots, such as the country their callsign corresponds to. The software will work just fine without them, but you may find a few country flags etc. are less accurate or missing.

 Clublog API keys are free, but you'll need to get your own by submitting a helpdesk ticket and explaining what you'll use it for. The admin team are happy with the rate of requests made by my Spothole server, so unless you change the source code of yours to radically increase the rate of querying Clublog, I'm sure they will be fine with your server too.
@@ -102,6 +104,102 @@ The software can take a few seconds to start up, mostly because it is downloadin

 If you see some errors on startup, check your configuration, e.g. in case you have specified a port for the web server that is already in use by something else.

+### Multiple cluster nodes with different settings
+
+Dan, S50U has written in with his Spothole cluster settings. He is using a cluster node which provides RBN spots, and uses different SSIDs on his callsign to get different settings when logged into the same cluster node. For example:
+
+```
+  -
+    class: "DXCluster"
+    name: "S50CLX"
+    enabled: true
+    host: "s50clx.si"
+    port: 41112
+    login_prompt: "login: "
+    login_callsign: "callsign-10"
+```
+
+Telnet to DXSpider and log in with "callsign-10" and execute the following commands:
+
+`CLEAR/SPOTS ALL` (delete all previous filters)<br/>
+`UNSET/ANN` (stop announce messages)<br/>
+`UNSET/WCY` (stop wcy messages)<br/>
+`UNSET/WWV` (stop wwv messages)<br/>
+`SET/DX` (enable human DX spots)
+
+```
+  -
+    class: "DXCluster"
+    name: "RBN CW"
+    enabled: true
+    host: "s50clx.si"
+    port: 41112
+    login_prompt: "login: "
+    login_callsign: "callsign-11"
+    allow_rbn_spots: true
+    enabled-by-default-in-web-ui: false
+```
+
+Telnet to DXSpider and log in with "callsign-11" and execute the following commands:
+
+`CLEAR/SPOTS ALL` (delete all previous filters)<br/>
+`UNSET/ANN` (stop announce messages)<br/>
+`UNSET/WCY` (stop wcy messages)<br/>
+`UNSET/WWV` (stop wwv messages)<br/>
+`UNSET/DX` (stop human DX spots)<br/>
+`SET/SKIMMER CW` (enable CW RBN spots)
+
+```
+  -
+    class: "DXCluster"
+    name: "RBN RTTY"
+    enabled: true
+    host: "s50clx.si"
+    port: 41112
+    login_prompt: "login: "
+    login_callsign: "callsign-12"
+    allow_rbn_spots: true
+    enabled-by-default-in-web-ui: false
+```
+
+Telnet to DXSpider and log in with "callsign-12" and execute the following commands:
+
+`CLEAR/SPOTS ALL` (delete all previous filters)<br/>
+`UNSET/ANN` (stop announce messages)<br/>
+`UNSET/WCY` (stop wcy messages)<br/>
+`UNSET/WWV` (stop wwv messages)<br/>
+`UNSET/DX` (stop human DX spots)<br/>
+`SET/SKIMMER RTTY` (enable RTTY RBN spots)
+
+```
+  -
+    class: "DXCluster"
+    name: "RBN FT4/8"
+    enabled: true
+    host: "s50clx.si"
+    port: 41112
+    login_prompt: "login: "
+    login_callsign: "callsign-13"
+    allow_rbn_spots: true
+    enabled-by-default-in-web-ui: false
+```
+
+Telnet to DXSpider and log in with "callsign-13" and execute the following commands:
+
+`CLEAR/SPOTS ALL` (delete all previous filters)<br/>
+`UNSET/ANN` (stop announce messages)<br/>
+`UNSET/WCY` (stop wcy messages)<br/>
+`UNSET/WWV` (stop wwv messages)<br/>
+`UNSET/DX` (stop human DX spots)<br/>
+`SET/SKIMMER FT` (enable FT RBN spots)
+
+For each callsign-SSID, we also specify our basic information with commands:
+
+`SET/NAME Spothole10`, Spothole11... etc.<br/>
+`SET/QTH Cerkno`<br/>
+`SET/QRA JN66XD`<br/>
+`SET/HOME S50CLX`
+
 ### systemd configuration

 If you want Spothole to run automatically on startup on a Linux distribution that uses `systemd`, follow the instructions here. For distros that don't use `systemd`, or Windows/OSX/etc., you can find generic instructions for your OS online.
--- a/config-example.yml
+++ b/config-example.yml
@@ -53,6 +53,10 @@ spot-providers:
    class: "LLOTA"
    name: "LLOTA"
    enabled: true
+  -
+    class: "WWTOTA"
+    name: "WWTOTA"
+    enabled: true
  -
    class: "APRSIS"
    name: "APRS-IS"
@@ -184,4 +188,15 @@ web-ui-options:
  max-spot-age: [5, 10, 30, 60]
  max-spot-age-default: 30
  alert-count: [25, 50, 100, 200, 500]
-  alert-count-default: 100
+  alert-count-default: 100
+  # Default UI colour scheme. Supported values are "light", "dark" and "auto" (i.e. use the browser/OS colour scheme).
+  # Users can still override this in the UI to their own preference.
+  color-scheme-default: "auto"
+  # Default band colour scheme. Supported values are the full names of any band colour scheme shown in the UI.
+  # Users can still override this in the UI to their own preference.
+  band-color-scheme-default: "PSK Reporter (Adjusted)"
+  # Custom HTML insert. This can be any arbitrary HTML. It will be inserted next to the start/stop buttons on the spots
+  # (home) page, although being arbitrary HTML you can also use a div with absolute, relative, float placement etc. This
+  # is designed for a "donate/support the server" type button, though you are free to do whatever you want with it.
+  # As the server owner you are responsible for the safe usage of this option!
+  support-button-html: ""
--- a/core/config.py
+++ b/core/config.py
@@ -24,3 +24,7 @@ WEB_UI_OPTIONS = config["web-ui-options"]
 # but for consistency we provide this to the front-end in web-ui-options because it has no impact outside of the web UI.
 WEB_UI_OPTIONS["spot-providers-enabled-by-default"] = [p["name"] for p in config["spot-providers"] if p["enabled"] and (
            "enabled-by-default-in-web-ui" not in p or p["enabled-by-default-in-web-ui"] == True)]
+# If spotting to this server is enabled, "API" is another valid spot source even though it does not come from
+# one of our proviers. We set that to also be enabled by default.
+if ALLOW_SPOTTING:
+    WEB_UI_OPTIONS["spot-providers-enabled-by-default"].append("API")
--- a/core/constants.py
+++ b/core/constants.py
@@ -4,7 +4,7 @@ from data.sig import SIG

 # General software
 SOFTWARE_NAME = "Spothole by M0TRT"
-SOFTWARE_VERSION = "1.2"
+SOFTWARE_VERSION = "1.3-pre"

 # HTTP headers used for spot providers that use HTTP
 HTTP_HEADERS = {"User-Agent": SOFTWARE_NAME + ", v" + SOFTWARE_VERSION + " (operated by " + SERVER_OWNER_CALLSIGN + ")"}
--- a/core/lookup_helper.py
+++ b/core/lookup_helper.py
@@ -140,12 +140,14 @@ class LookupHelper:
    # database live if possible.
    def download_clublog_ctyxml(self):
        try:
-            logging.info("Downloading Clublog cty.xml...")
+            logging.info("Downloading Clublog cty.xml.gz...")
            response = self.CLUBLOG_CTY_XML_CACHE.get("https://cdn.clublog.org/cty.php?api=" + self.CLUBLOG_API_KEY,
                                                      headers=HTTP_HEADERS)
+            logging.info("Caching Clublog cty.xml.gz...")
            open(self.CLUBLOG_XML_DOWNLOAD_LOCATION + ".gz", 'wb').write(response.content)
            with gzip.open(self.CLUBLOG_XML_DOWNLOAD_LOCATION + ".gz", "rb") as uncompressed:
                file_content = uncompressed.read()
+            logging.info("Caching Clublog cty.xml...")
            with open(self.CLUBLOG_XML_DOWNLOAD_LOCATION, "wb") as f:
                f.write(file_content)
                f.flush()
--- a/core/sig_utils.py
+++ b/core/sig_utils.py
@@ -135,6 +135,10 @@ def populate_sig_ref_info(sig_ref):
                        sig_ref.latitude = ll[0]
                        sig_ref.longitude = ll[1]
                        break
+        elif sig.upper() == "WWTOTA":
+            if not sig_ref.name:
+                sig_ref.name = sig_ref.id
+            sig_ref.url = "https://wwtota.com/seznam/karta_rozhledny.php?ref=" + sig_ref.name
        elif sig.upper() == "WAB" or sig.upper() == "WAI":
            ll = wab_wai_square_to_lat_lon(ref_id)
            if ll:
--- a/server/handlers/api/options.py
+++ b/server/handlers/api/options.py
@@ -34,13 +34,11 @@ class APIOptionsHandler(tornado.web.RequestHandler):
                       map(lambda p: p["name"], filter(lambda p: p["enabled"], self.status_data["alert_providers"]))),
                   "continents": CONTINENTS,
                   "max_spot_age": MAX_SPOT_AGE,
-                   "spot_allowed": ALLOW_SPOTTING,
-                   "web-ui-options": WEB_UI_OPTIONS}
+                   "spot_allowed": ALLOW_SPOTTING}
        # If spotting to this server is enabled, "API" is another valid spot source even though it does not come from
        # one of our proviers.
        if ALLOW_SPOTTING:
            options["spot_sources"].append("API")
-            options["web-ui-options"]["spot-providers-enabled-by-default"].append("API")

        self.write(json.dumps(options, default=serialize_everything))
        self.set_status(200)
--- a/server/handlers/pagetemplate.py
+++ b/server/handlers/pagetemplate.py
@@ -3,7 +3,7 @@ from datetime import datetime
 import pytz
 import tornado

-from core.config import ALLOW_SPOTTING
+from core.config import ALLOW_SPOTTING, WEB_UI_OPTIONS
 from core.constants import SOFTWARE_VERSION
 from core.prometheus_metrics_handler import page_requests_counter

@@ -22,5 +22,6 @@ class PageTemplateHandler(tornado.web.RequestHandler):
        page_requests_counter.inc()

        # Load named template, and provide variables used in templates
-        self.render(self.template_name + ".html", software_version=SOFTWARE_VERSION, allow_spotting=ALLOW_SPOTTING)
+        self.render(self.template_name + ".html", software_version=SOFTWARE_VERSION, allow_spotting=ALLOW_SPOTTING,
+                    web_ui_options=WEB_UI_OPTIONS)

--- a/spotproviders/wwtota.py
+++ b/spotproviders/wwtota.py
@@ -0,0 +1,41 @@
+from datetime import datetime
+
+import json
+import pytz
+
+from data.sig_ref import SIGRef
+from data.spot import Spot
+from spotproviders.http_spot_provider import HTTPSpotProvider
+
+
+# Spot provider for Towers on the Air
+class WWTOTA(HTTPSpotProvider):
+    POLL_INTERVAL_SEC = 120
+    SPOTS_URL = "https://wwtota.com/api/cluster_live.php"
+
+    def __init__(self, provider_config):
+        super().__init__(provider_config, self.SPOTS_URL, self.POLL_INTERVAL_SEC)
+
+    def http_response_to_spots(self, http_response):
+        new_spots = []
+        response_fixed = http_response.text.replace("\\/", "/")
+        response_json = json.loads(response_fixed)
+
+        # Iterate through source data
+        for source_spot in response_json["spots"]:
+            # Convert to our spot format
+            likely_freq = float(source_spot["freq"]) * 1000
+            if likely_freq < 1000000:
+                likely_freq = likely_freq * 1000
+            spot = Spot(source=self.name,
+                        dx_call=source_spot["call"].upper(),
+                        freq=likely_freq,
+                        comment=source_spot["comment"],
+                        sig="WWTOTA",
+                        sig_refs=[SIGRef(id=source_spot["ref"], sig="WWTOTA")],
+                        time=datetime.strptime(response_json["updated"][:10] + source_spot["time"], "%Y-%m-%d%H:%M").timestamp())
+
+            # Add to our list. Don't worry about de-duping, removing old spots etc. at this point; other code will do
+            # that for us.
+            new_spots.append(spot)
+        return new_spots
--- a/templates/about.html
+++ b/templates/about.html
@@ -25,7 +25,7 @@
    <h4 class="mt-4">What are "DX", "DE" and modes?</h4>
    <p>In amateur radio terminology, the "DX" contact is the "interesting" one that is using the frequency shown and looking for callers. They might be on a remote island or just in a local park, but either way it's interesting enough that someone has "spotted" them. The callsign listed under "DE" is the person who entered the spot of the "DX" operator. "Modes" are the type of communication they are using. For example you might see "CW" which is Morse Code, or voice "modes" like SSB or FM, or more exotic "data" modes which are used for computer-to-computer communication.</p>
    <h4 class="mt-4">What data sources are supported?</h4>
-    <p>Spothole can retrieve spots from: <a href="https://www.dxcluster.info/telnet/">Telnet-based DX clusters</a>, the <a href="https://www.reversebeacon.net/">Reverse Beacon Network (RBN)</a>, the <a href="https://www.aprs-is.net/">APRS Internet Service (APRS-IS)</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.cqgma.org/">GMA</a>, <a href="https://wwbota.net/">WWBOTA</a>, <a href="http://www.hema.org.uk/">HEMA</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://ontheair.nz">ZLOTA</a>, <a href="https://www.wota.org.uk/">WOTA</a>, <a href="https://llota.app">LLOTA</a>, the <a href="https://ukpacketradio.network/">UK Packet Repeater Network</a>, and any site based on the <a href="https://github.com/nischu/xOTA">xOTA software by nischu</a>.</p>
+    <p>Spothole can retrieve spots from: <a href="https://www.dxcluster.info/telnet/">Telnet-based DX clusters</a>, the <a href="https://www.reversebeacon.net/">Reverse Beacon Network (RBN)</a>, the <a href="https://www.aprs-is.net/">APRS Internet Service (APRS-IS)</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.cqgma.org/">GMA</a>, <a href="https://wwbota.net/">WWBOTA</a>, <a href="http://www.hema.org.uk/">HEMA</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://ontheair.nz">ZLOTA</a>, <a href="https://www.wota.org.uk/">WOTA</a>, <a href="https://llota.app">LLOTA</a>, <a href="https://wwtota.com">WWTOTA</a>, the <a href="https://ukpacketradio.network/">UK Packet Repeater Network</a>, and any site based on the <a href="https://github.com/nischu/xOTA">xOTA software by nischu</a>.</p>
    <p>Spothole can retrieve alerts from: <a href="https://www.ng3k.com/">NG3K</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://www.wota.org.uk/">WOTA</a> and <a href="https://www.beachesontheair.com/">BOTA</a>.</p>
    <p>Note that the server owner has not necessarily enabled all these data sources. In particular it is common to disable RBN, to avoid the server being swamped with FT8 traffic, and to disable APRS-IS and UK Packet Net so that the server only displays stations where there is likely to be an operator physically present for a QSO.</p>
    <p>Between the various data sources, the following Special Interest Groups (SIGs) are supported: Parks on the Air (POTA), Summits on the Air (SOTA), Worldwide Flora & Fauna (WWFF), Global Mountain Activity (GMA), Worldwide Bunkers on the Air (WWBOTA), HuMPs Excluding Marilyns Award (HEMA), Islands on the Air (IOTA), Mills on the Air (MOTA), the Amateur Radio Lighthouse Socirty (ARLHS), International Lighthouse Lightship Weekend (ILLW), Silos on the Air (SIOTA), World Castles Award (WCA), New Zealand on the Air (ZLOTA), Keith Roget Memorial National Parks Award (KRMNPA), Wainwrights on the Air (WOTA), Beaches on the Air (BOTA), Lagos y Lagunas On the Air (LLOTA), Towers on the Air (WWTOTA), Worked All Britain (WAB), Worked All Ireland (WAI), and Toilets on the Air (TOTA).</p>
@@ -56,6 +56,9 @@
    <p>Spothole collects no data about you, and there is no way to enter personally identifying information into the site apart from by spotting and alerting through Spothole or the various services it connects to. All spots and alerts are "timed out" and deleted from the system after a set interval, which by default is one hour for spots and one week for alerts.</p>
    <p>Settings you select from Spothole's menus are sent to the server, in order to provide the data with the requested filters. They are also stored in your browser's local storage, so that your preferences are remembered between sessions.</p>
    <p>There are no trackers, no ads, and no cookies.</p>
+    {% if len(web_ui_options["support-button-html"]) > 0 %}
+        <p><strong>Caveat: </strong> The owner of this server has chosen to inject their own content into the "spots" page. This is designed for a "donate" or "support this server" button. The functionality of this injected content is the responsibility of the server owner, rather than the Spothole software.</p>
+    {% end %}
    <p>Spothole is open source, so you can audit <a href="https://git.ianrenton.com/ian/spothole">the code</a> if you like.</p>
    <h2 class="mt-4">Thanks</h2>
    <p>This project would not have been possible without those volunteers who have taken it upon themselves to run DX clusters, xOTA programmes, DXpedition lists, callsign lookup databases, and other online tools on which Spothole's data is based.</p>
@@ -63,7 +66,7 @@
    <p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
 </div>

-<script src="/js/common.js?v=6"></script>
+<script src="/js/common.js?v=8"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/add_spot.html
+++ b/templates/add_spot.html
@@ -69,8 +69,8 @@

 </div>

-<script src="/js/common.js?v=6"></script>
-<script src="/js/add-spot.js?v=6"></script>
+<script src="/js/common.js?v=8"></script>
+<script src="/js/add-spot.js?v=8"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/alerts.html
+++ b/templates/alerts.html
@@ -2,161 +2,49 @@
 {% block content %}

 <div class="mt-3">
-    <div id="settingsButtonRow" class="row">
+    <div id="settingsButtonRow" class="row mb-3">
        <div class="col-auto me-auto pt-3">
-            <p id="timing-container">Loading...</p>
+            {% module Template("widgets/refresh-timer.html", web_ui_options=web_ui_options) %}
        </div>
        <div class="col-auto">
-            <p class="d-inline-flex gap-1">
-                <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</button>
-                <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i> Display</button>
-            </p>
+            <div class="d-inline-flex gap-1">
+                {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
+            </div>
        </div>
    </div>

    <div id="filters-area" class="appearing-panel card mb-3">
-        <div class="card-header text-white bg-primary">
-            <div class="row">
-                <div class="col-auto me-auto">
-                    Filters
-                </div>
-                <div class="col-auto d-inline-flex">
-                    <button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
-                </div>
-            </div>
-
-        </div>
+        {% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
        <div class="card-body">
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">DX Continent</h5>
-                            <p id="dx-continent-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/dx-continent.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Sources</h5>
-                            <p id="source-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Duration Limit <i class='fa-solid fa-circle-question' title='Some users create long-duration alerts for the period they will be generally in and around xOTA references, when they are not indending to be on the air most of the time. Use this control to restrict the maximum duration of spots that the software will display, and exclude any with a long duration, to avoid these filling up the list. By default, we allow DXpeditions to be displayed even if they are longer than this limit, because on a DXpedition the operators typically ARE on the air most of the time.'></i></h5>
-                            <p class="card-text spothole-card-text">
-                                Hide any alerts lasting more than:<br/>
-                                <select id="max-duration" class="storeable-select form-select" onclick="filtersUpdated();" style="width: 8em; display: inline-block;">
-                                    <option value="10800">3 hours</option>
-                                    <option value="43200">12 hours</option>
-                                    <option value="86400" selected>24 hours</option>
-                                    <option value="604800">1 week</option>
-                                    <option value="2419200">4 weeks</option>
-                                    <option value="9999999999">No limit</option>
-                                </select>
-                            </p>
-                            <p class='card-text spothole-card-text' style='line-height: 1.5em !important;'>
-                                <input class="form-check-input storeable-checkbox" type="checkbox" value="" onclick="filtersUpdated();" id="dxpeditions_skip_max_duration_check" checked><label class="form-check-label ms-2" for="dxpeditions_skip_max_duration_check">Allow DXpeditions that are longer</label>
-                            </p>
-                        </div>
-                    </div>
+                    {% module Template("cards/duration-limit-alerts.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
        </div>
    </div>

    <div id="display-area" class="appearing-panel card mb-3">
-        <div class="card-header text-white bg-primary">
-            <div class="row">
-                <div class="col-auto me-auto">
-                    Display
-                </div>
-                <div class="col-auto d-inline-flex">
-                    <button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
-                </div>
-            </div>
-
-        </div>
+        {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
        <div class="card-body">
            <div id="display-container" class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Time Zone</h5>
-                            <p class="card-text spothole-card-text"> Use
-                                <select id="timeZone" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="timeZoneUpdated();" style="width: 8em; display: inline-block;">
-                                    <option value="UTC" selected>UTC</option>
-                                    <option value="local">Local time</option>
-                                </select>
-                            </p>
-                        </div>
-                    </div>
+                    {% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Number of Alerts</h5>
-                            <p class="card-text spothole-card-text">Show up to
-                                <select id="alerts-to-fetch" class="storeable-select form-select ms-2" oninput="filtersUpdated();"  style="width: 5em;display: inline-block;">
-                                </select>
-                                alerts
-                            </p>
-                        </div>
-                    </div>
+                    {% module Template("cards/number-of-alerts.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Theme</h5>
-                                <div class="form-group">
-                                    <div class="form-check form-check-inline">
-                                        <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
-                                        <label class="form-check-label" for="darkMode">Dark mode</label>
-                                    </div>
-                                </div>
-                        </div>
-                    </div>
+                    {% module Template("cards/color-scheme.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Table Data</h5>
-                            <div class="form-group">
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowStartTime" value="tableShowStartTime" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowStartTime">Start Time</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowEndTime" value="tableShowEndTime" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowEndTime">End Time</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowDX">DX</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreqsModes" value="tableShowFreqsModes" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowFreqsModes">Frequencies & Modes</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowComment">Comment</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowSource" value="tableShowSource" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowSource">Source</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowRef">Ref.</label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    {% module Template("cards/table-columns-alerts.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
        </div>
@@ -168,8 +56,8 @@

 </div>

-<script src="/js/common.js?v=6"></script>
-<script src="/js/alerts.js?v=6"></script>
+<script src="/js/common.js?v=8"></script>
+<script src="/js/alerts.js?v=8"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/bands.html
+++ b/templates/bands.html
@@ -2,129 +2,54 @@
 {% block content %}

 <div class="mt-3">
-    <div id="settingsButtonRow" class="row">
+    <div id="settingsButtonRow" class="row mb-3">
        <div class="col-auto me-auto pt-3">
-            <p id="timing-container">Loading...</p>
+            {% module Template("widgets/refresh-timer.html", web_ui_options=web_ui_options) %}
        </div>
        <div class="col-auto">
-            <p class="d-inline-flex gap-1">
-                <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</button>
-                <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i> Display</button>
-            </p>
+            <div class="d-inline-flex gap-1">
+                {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
+            </div>
        </div>
    </div>

    <div id="filters-area" class="appearing-panel card mb-3">
-        <div class="card-header text-white bg-primary">
-            <div class="row">
-                <div class="col-auto me-auto">
-                    Filters
-                </div>
-                <div class="col-auto d-inline-flex">
-                    <button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
-                </div>
-            </div>
-
-        </div>
+        {% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
        <div class="card-body">
            <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Bands</h5>
-                            <p id="band-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/bands.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">SIGs</h5>
-                            <p id="sig-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/sigs.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Sources</h5>
-                            <p id="source-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">DX Continent</h5>
-                            <p id="dx-continent-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/dx-continent.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">DE Continent</h5>
-                            <p id="de-continent-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/de-continent.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Modes</h5>
-                            <p id="mode-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/modes.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
        </div>
    </div>

    <div id="display-area" class="appearing-panel card mb-3">
-        <div class="card-header text-white bg-primary">
-            <div class="row">
-                <div class="col-auto me-auto">
-                    Display
-                </div>
-                <div class="col-auto d-inline-flex">
-                    <button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
-                </div>
-            </div>
-
-        </div>
+        {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
        <div class="card-body">
            <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Spot Age</h5>
-                            <p class="card-text spothole-card-text">Last
-                                <select id="max-spot-age" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
-                                </select>
-                                minutes
-                            </p>
-                        </div>
-                    </div>
+                    {% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Theme</h5>
-                                <div class="form-group">
-                                    <div class="form-check form-check-inline">
-                                        <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
-                                        <label class="form-check-label" for="darkMode">Dark mode</label>
-                                    </div>
-                                    <p class="card-text spothole-card-text">
-                                        Band color scheme<br/>
-                                        <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
-                                        </select>
-                                    </p>
-                                </div>
-                        </div>
-                    </div>
+                    {% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
        </div>
@@ -134,9 +59,12 @@

 </div>

-<script src="/js/common.js?v=6"></script>
-<script src="/js/spotsbandsandmap.js?v=6"></script>
-<script src="/js/bands.js?v=6"></script>
+<script>
+    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
+</script>
+<script src="/js/common.js?v=8"></script>
+<script src="/js/spotsbandsandmap.js?v=8"></script>
+<script src="/js/bands.js?v=8"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/base.html
+++ b/templates/base.html
@@ -46,10 +46,10 @@
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>

-    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=6"></script>
-    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=6"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=6"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=6"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=8"></script>
+    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=8"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=8"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=8"></script>

 </head>
 <body>
--- a/templates/cards/bands.html
+++ b/templates/cards/bands.html
@@ -0,0 +1,6 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Bands</h5>
+        <p id="band-options" class="card-text spothole-card-text"></p>
+    </div>
+</div>
--- a/templates/cards/color-scheme-and-band-color-scheme.html
+++ b/templates/cards/color-scheme-and-band-color-scheme.html
@@ -0,0 +1,11 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Theme</h5>
+        <p class="card-text spothole-card-text">
+            {% module Template("widgets/color-scheme.html", web_ui_options=web_ui_options) %}
+        </p>
+        <p class="card-text spothole-card-text">
+            {% module Template("widgets/band-color-scheme.html", web_ui_options=web_ui_options) %}
+        </p>
+    </div>
+</div>
--- a/templates/cards/color-scheme.html
+++ b/templates/cards/color-scheme.html
@@ -0,0 +1,8 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Theme</h5>
+        <p class="card-text spothole-card-text">
+            {% module Template("widgets/color-scheme.html", web_ui_options=web_ui_options) %}
+        </p>
+    </div>
+</div>
--- a/templates/cards/de-continent.html
+++ b/templates/cards/de-continent.html
@@ -0,0 +1,6 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">DE Continent</h5>
+        <p id="de-continent-options" class="card-text spothole-card-text"></p>
+    </div>
+</div>
--- a/templates/cards/duration-limit-alerts.html
+++ b/templates/cards/duration-limit-alerts.html
@@ -0,0 +1,19 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Duration Limit <i class='fa-solid fa-circle-question' title='Some users create long-duration alerts for the period they will be generally in and around xOTA references, when they are not indending to be on the air most of the time. Use this control to restrict the maximum duration of spots that the software will display, and exclude any with a long duration, to avoid these filling up the list. By default, we allow DXpeditions to be displayed even if they are longer than this limit, because on a DXpedition the operators typically ARE on the air most of the time.'></i></h5>
+        <p class="card-text spothole-card-text">
+            Hide any alerts lasting more than:<br/>
+            <select id="max-duration" class="storeable-select form-select" onclick="filtersUpdated();" style="width: 8em; display: inline-block;">
+                <option value="10800">3 hours</option>
+                <option value="43200">12 hours</option>
+                <option value="86400" selected>24 hours</option>
+                <option value="604800">1 week</option>
+                <option value="2419200">4 weeks</option>
+                <option value="9999999999">No limit</option>
+            </select>
+        </p>
+        <p class='card-text spothole-card-text' style='line-height: 1.5em !important;'>
+            <input class="form-check-input storeable-checkbox" type="checkbox" value="" onclick="filtersUpdated();" id="dxpeditions_skip_max_duration_check" checked><label class="form-check-label ms-2" for="dxpeditions_skip_max_duration_check">Allow DXpeditions that are longer</label>
+        </p>
+    </div>
+</div>
--- a/templates/cards/dx-continent.html
+++ b/templates/cards/dx-continent.html
@@ -0,0 +1,6 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">DX Continent</h5>
+        <p id="dx-continent-options" class="card-text spothole-card-text"></p>
+    </div>
+</div>
--- a/templates/cards/location.html
+++ b/templates/cards/location.html
@@ -0,0 +1,9 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Location</h5>
+            <div class="form-group spothole-card-text">
+                <label for="userGrid">Your grid:</label>
+                <input type="text" class="storeable-text form-control" id="userGrid" placeholder="AA00aa" oninput="userGridUpdated();" style="width: 10em; display: inline-block;">
+            </div>
+    </div>
+</div>
--- a/templates/cards/map-features.html
+++ b/templates/cards/map-features.html
@@ -0,0 +1,11 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Map Features</h5>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="mapShowGeodesics" value="mapShowGeodesics" oninput="displayUpdated();">
+              <label class="form-check-label" for="mapShowGeodesics">Geodesic Lines</label>
+            </div>
+        </div>
+    </div>
+</div>
--- a/templates/cards/modes.html
+++ b/templates/cards/modes.html
@@ -0,0 +1,6 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Modes</h5>
+        <p id="mode-options" class="card-text spothole-card-text"></p>
+    </div>
+</div>
--- a/templates/cards/number-of-alerts.html
+++ b/templates/cards/number-of-alerts.html
@@ -0,0 +1,13 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Number of Alerts</h5>
+        <p class="card-text spothole-card-text">Show up to
+            <select id="alerts-to-fetch" class="storeable-select form-select ms-2" oninput="filtersUpdated();"  style="width: 5em;display: inline-block;">
+            {% for c in web_ui_options["alert-count"] %}
+                <option value="{{c}}" {% if web_ui_options["alert-count-default"] == c %}selected{% end %}>{{c}}</option>
+            {% end %}
+            </select>
+            alerts
+        </p>
+    </div>
+</div>
--- a/templates/cards/number-of-spots.html
+++ b/templates/cards/number-of-spots.html
@@ -0,0 +1,13 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Number of Spots</h5>
+        <p class="card-text spothole-card-text">Show up to
+            <select id="spots-to-fetch" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
+            {% for c in web_ui_options["spot-count"] %}
+                <option value="{{c}}" {% if web_ui_options["spot-count-default"] == c %}selected{% end %}>{{c}}</option>
+            {% end %}
+            </select>
+            spots
+        </p>
+    </div>
+</div>
--- a/templates/cards/sigs.html
+++ b/templates/cards/sigs.html
@@ -0,0 +1,6 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">SIGs</h5>
+        <p id="sig-options" class="card-text spothole-card-text"></p>
+    </div>
+</div>
--- a/templates/cards/sources.html
+++ b/templates/cards/sources.html
@@ -0,0 +1,6 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Sources</h5>
+        <p id="source-options" class="card-text spothole-card-text"></p>
+    </div>
+</div>
--- a/templates/cards/spot-age.html
+++ b/templates/cards/spot-age.html
@@ -0,0 +1,13 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Spot Age</h5>
+        <p class="card-text spothole-card-text">Last
+            <select id="max-spot-age" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
+                {% for a in web_ui_options["max-spot-age"] %}
+                    <option value="{{a*60}}" {% if web_ui_options["max-spot-age-default"] == a*60 %}selected{% end %}>{{a}}</option>
+                {% end %}
+            </select>
+            minutes
+        </p>
+    </div>
+</div>
--- a/templates/cards/table-columns-alerts.html
+++ b/templates/cards/table-columns-alerts.html
@@ -0,0 +1,35 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Table Columns</h5>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowStartTime" value="tableShowStartTime" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowStartTime">Start Time</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowEndTime" value="tableShowEndTime" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowEndTime">End Time</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowDX">DX</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreqsModes" value="tableShowFreqsModes" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowFreqsModes">Frequencies & Modes</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowComment">Comment</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowSource" value="tableShowSource" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowSource">Source</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowRef">Ref.</label>
+            </div>
+        </div>
+    </div>
+</div>
--- a/templates/cards/table-columns-spots.html
+++ b/templates/cards/table-columns-spots.html
@@ -0,0 +1,47 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Table Columns</h5>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowTime" value="tableShowTime" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowTime">Time</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowDX">DX</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreq" value="tableShowFreq" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowFreq">Frequency</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowMode" value="tableShowMode" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowMode">Mode</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowComment">Comment</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();">
+              <label class="form-check-label" for="tableShowBearing">Bearing</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowType" value="tableShowType" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowType">Type</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowRef">Ref.</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDE" value="tableShowDE" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowDE">DE</label>
+            </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowWorkedCheckbox" value="tableShowWorkedCheckbox" oninput="columnsUpdated();" checked>
+              <label class="form-check-label" for="tableShowWorkedCheckbox">Worked?</label>
+            </div>
+        </div>
+    </div>
+</div>
--- a/templates/cards/time-zone.html
+++ b/templates/cards/time-zone.html
@@ -0,0 +1,11 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Time Zone</h5>
+        <p class="card-text spothole-card-text"> Use
+            <select id="timeZone" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="timeZoneUpdated();" style="width: 8em; display: inline-block;">
+                <option value="UTC" selected>UTC</option>
+                <option value="local">Local time</option>
+            </select>
+        </p>
+    </div>
+</div>
--- a/templates/cards/worked-calls.html
+++ b/templates/cards/worked-calls.html
@@ -0,0 +1,6 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Worked Calls</h5>
+        <button type="button" class="btn btn-primary" onClick="clearWorked();">Clear worked calls</button>
+    </div>
+</div>
--- a/templates/map.html
+++ b/templates/map.html
@@ -3,140 +3,55 @@

 <div id="map">
    <div id="settingsButtonRowMap" class="mt-3 px-3" style="z-index: 1002; position: relative;">
-        <div class="row">
+        <div class="row mb-3">
            <div class="col-auto me-auto pt-3"></div>
            <div class="col-auto">
-                <p class="d-inline-flex gap-1">
-                    <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</button>
-                    <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i> Display</button>
-                </p>
+                <div class="d-inline-flex gap-1">
+                    {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
+                </div>
            </div>
        </div>

        <div id="filters-area" class="appearing-panel card mb-3">
-            <div class="card-header text-white bg-primary">
-                <div class="row">
-                    <div class="col-auto me-auto">
-                        Filters
-                    </div>
-                    <div class="col-auto d-inline-flex">
-                        <button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
-                    </div>
-                </div>
-
-            </div>
+        {% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
            <div class="card-body">
                <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
                    <div class="col">
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">Bands</h5>
-                                <p id="band-options" class="card-text spothole-card-text"></p>
-                            </div>
-                        </div>
+                        {% module Template("cards/bands.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">SIGs</h5>
-                                <p id="sig-options" class="card-text spothole-card-text"></p>
-                            </div>
-                        </div>
+                        {% module Template("cards/sigs.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">Sources</h5>
-                                <p id="source-options" class="card-text spothole-card-text"></p>
-                            </div>
-                        </div>
+                        {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
                    </div>
                </div>
                <div class="row row-cols-1 row-cols-md-3 g-4">
                    <div class="col">
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">DX Continent</h5>
-                                <p id="dx-continent-options" class="card-text spothole-card-text"></p>
-                            </div>
-                        </div>
+                        {% module Template("cards/dx-continent.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">DE Continent</h5>
-                                <p id="de-continent-options" class="card-text spothole-card-text"></p>
-                            </div>
-                        </div>
+                        {% module Template("cards/de-continent.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">Modes</h5>
-                                <p id="mode-options" class="card-text spothole-card-text"></p>
-                            </div>
-                        </div>
+                        {% module Template("cards/modes.html", web_ui_options=web_ui_options) %}
                    </div>
                </div>
            </div>
        </div>

        <div id="display-area" class="appearing-panel card mb-3">
-            <div class="card-header text-white bg-primary">
-                <div class="row">
-                    <div class="col-auto me-auto">
-                        Display
-                    </div>
-                    <div class="col-auto d-inline-flex">
-                        <button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
-                    </div>
-                </div>
-
-            </div>
+            {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
            <div class="card-body">
                <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
                    <div class="col">
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">Spot Age</h5>
-                                <p class="card-text spothole-card-text">Last
-                                    <select id="max-spot-age" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
-                                    </select>
-                                    minutes
-                                </p>
-                            </div>
-                        </div>
+                        {% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">Map Features</h5>
-                                <div class="form-group">
-                                    <div class="form-check form-check-inline">
-                                      <input class="form-check-input storeable-checkbox" type="checkbox" id="mapShowGeodesics" value="mapShowGeodesics" oninput="displayUpdated();">
-                                      <label class="form-check-label" for="mapShowGeodesics">Geodesic Lines</label>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                        {% module Template("cards/map-features.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">Theme</h5>
-                                    <div class="form-group">
-                                        <div class="form-check form-check-inline">
-                                            <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
-                                            <label class="form-check-label" for="darkMode">Dark mode</label>
-                                        </div>
-                                        <p class="card-text spothole-card-text">
-                                            Band color scheme<br/>
-                                            <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
-                                            </select>
-                                        </p>
-                                    </div>
-                            </div>
-                        </div>
+                        {% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
                    </div>
                </div>
            </div>
@@ -152,9 +67,12 @@
 <script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
 <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>

-<script src="/js/common.js?v=6"></script>
-<script src="/js/spotsbandsandmap.js?v=6"></script>
-<script src="/js/map.js?v=6"></script>
+<script>
+    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
+</script>
+<script src="/js/common.js?v=8"></script>
+<script src="/js/spotsbandsandmap.js?v=8"></script>
+<script src="/js/map.js?v=8"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/spots.html
+++ b/templates/spots.html
@@ -9,209 +9,70 @@
 </div>

 <div class="mt-3">
-    <div id="settingsButtonRow" class="row">
-        <div class="col-lg-6 me-auto pt-3 hideonmobile">
-            <p id="timing-container">Loading...</p>
+    <div id="settingsButtonRow" class="row mb-3">
+        <div class="col-md-4 mb-3 mb-md-0">
+            <div class="d-inline-flex gap-3">
+                {% module Template("widgets/run-pause.html", web_ui_options=web_ui_options) %}
+                <div class="d-inline-flex">{% raw web_ui_options["support-button-html"] %}</div>
+            </div>
        </div>
-        <div class="col-lg-6 text-end">
-            <p class="d-inline-flex gap-1">
-                <span class="btn-group" role="group">
-                  <input type="radio" class="btn-check" name="runPause" id="runButton" autocomplete="off" checked>
-                    <label class="btn btn-outline-primary" for="runButton"><i class="fa-solid fa-play"></i><span class="hideonmobile"> Run</span></label>
-
-                  <input type="radio" class="btn-check" name="runPause" id="pauseButton" autocomplete="off">
-                    <label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i><span class="hideonmobile"> Pause</span></label>
-                </span>
-                <span style="position: relative;">
-                    <i id="searchicon" class="fa-solid fa-magnifying-glass"></i>
-                    <input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search">
-                </span>
-                <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i><span class="hideonmobile"> Filters</span></button>
-                <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i><span class="hideonmobile"> Display</span></button>
-            </p>
+        <div class="col-md-8 text-end">
+            <div class="d-inline-flex gap-3">
+                {% module Template("widgets/search.html", web_ui_options=web_ui_options) %}
+                {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
+            </div>
        </div>
    </div>

    <div id="filters-area" class="appearing-panel card mb-3">
-        <div class="card-header text-white bg-primary">
-            <div class="row">
-                <div class="col-auto me-auto">
-                    Filters
-                </div>
-                <div class="col-auto d-inline-flex">
-                    <button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
-                </div>
-            </div>
-
-        </div>
+        {% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
        <div class="card-body">
            <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Bands</h5>
-                            <p id="band-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/bands.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">SIGs</h5>
-                            <p id="sig-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/sigs.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Sources</h5>
-                            <p id="source-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">DX Continent</h5>
-                            <p id="dx-continent-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/dx-continent.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">DE Continent</h5>
-                            <p id="de-continent-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/de-continent.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Modes</h5>
-                            <p id="mode-options" class="card-text spothole-card-text"></p>
-                        </div>
-                    </div>
+                    {% module Template("cards/modes.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
        </div>
    </div>

    <div id="display-area" class="appearing-panel card mb-3">
-        <div class="card-header text-white bg-primary">
-            <div class="row">
-                <div class="col-auto me-auto">
-                    Display
-                </div>
-                <div class="col-auto d-inline-flex">
-                    <button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
-                </div>
-            </div>
-
-        </div>
+        {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
        <div class="card-body">
            <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Time Zone</h5>
-                            <p class="card-text spothole-card-text"> Use
-                                <select id="timeZone" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="timeZoneUpdated();" style="width: 8em; display: inline-block;">
-                                    <option value="UTC" selected>UTC</option>
-                                    <option value="local">Local time</option>
-                                </select>
-                            </p>
-                        </div>
-                    </div>
+                    {% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Number of Spots</h5>
-                            <p class="card-text spothole-card-text">Show up to
-                                <select id="spots-to-fetch" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
-                                </select>
-                                spots
-                            </p>
-                        </div>
-                    </div>
+                    {% module Template("cards/number-of-spots.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Location</h5>
-                                <div class="form-group spothole-card-text">
-                                    <label for="userGrid">Your grid:</label>
-                                    <input type="text" class="storeable-text form-control" id="userGrid" placeholder="AA00aa" oninput="userGridUpdated();" style="width: 10em; display: inline-block;">
-                                </div>
-                        </div>
-                    </div>
+                    {% module Template("cards/location.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Theme</h5>
-                            <div class="form-group">
-                                <div class="form-check form-check-inline">
-                                    <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
-                                    <label class="form-check-label" for="darkMode">Dark mode</label>
-                                </div>
-                            </div>
-                            <p class="card-text spothole-card-text">
-                                Band color scheme<br/>
-                                <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
-                                </select>
-                            </p>
-                        </div>
-                    </div>
+                    {% module Template("cards/worked-calls.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">Table Columns</h5>
-                            <div class="form-group">
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowTime" value="tableShowTime" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowTime">Time</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowDX">DX</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreq" value="tableShowFreq" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowFreq">Frequency</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowMode" value="tableShowMode" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowMode">Mode</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowComment">Comment</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();">
-                                  <label class="form-check-label" for="tableShowBearing">Bearing</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowType" value="tableShowType" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowType">Type</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowRef">Ref.</label>
-                                </div>
-                                <div class="form-check form-check-inline">
-                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDE" value="tableShowDE" oninput="columnsUpdated();" checked>
-                                  <label class="form-check-label" for="tableShowDE">DE</label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    {% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
+                </div>
+                <div class="col">
+                    {% module Template("cards/table-columns-spots.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
        </div>
@@ -223,9 +84,12 @@

 </div>

-<script src="/js/common.js?v=6"></script>
-<script src="/js/spotsbandsandmap.js?v=6"></script>
-<script src="/js/spots.js?v=6"></script>
+<script>
+    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
+</script>
+<script src="/js/common.js?v=8"></script>
+<script src="/js/spotsbandsandmap.js?v=8"></script>
+<script src="/js/spots.js?v=8"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/status.html
+++ b/templates/status.html
@@ -3,8 +3,8 @@

 <div id="status-container" class="row row-cols-1 row-cols-md-4 g-4 mt-4"></div>

-<script src="/js/common.js?v=6"></script>
-<script src="/js/status.js?v=6"></script>
+<script src="/js/common.js?v=8"></script>
+<script src="/js/status.js?v=8"></script>
 <script>$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/widgets/band-color-scheme.html
+++ b/templates/widgets/band-color-scheme.html
@@ -0,0 +1,13 @@
+<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
+<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
+    <option value="PSK Reporter" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter" %}selected{% end %}>PSK Reporter</option>
+    <option value="PSK Reporter (Adjusted)" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter (Adjusted)" %}selected{% end %}>PSK Reporter (Adjusted)</option>
+    <option value="RBN" {% if web_ui_options["band-color-scheme-default"] == "RBN" %}selected{% end %}>RBN</option>
+    <option value="Ham Rainbow" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow" %}selected{% end %}>Ham Rainbow</option>
+    <option value="Ham Rainbow (Reverse)" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow (Reverse)" %}selected{% end %}>Ham Rainbow (Reverse)</option>
+    <option value="Kate Morley" {% if web_ui_options["band-color-scheme-default"] == "Kate Morley" %}selected{% end %}>Kate Morley</option>
+    <option value="ColorBrewer" {% if web_ui_options["band-color-scheme-default"] == "ColorBrewer" %}selected{% end %}>ColorBrewer</option>
+    <option value="IWantHue" {% if web_ui_options["band-color-scheme-default"] == "IWantHue" %}selected{% end %}>IWantHue</option>
+    <option value="IWantHue (Color Blind)" {% if web_ui_options["band-color-scheme-default"] == "IWantHue (Color Blind)" %}selected{% end %}>IWantHue (Color Blind)</option>
+    <option value="Mokole" {% if web_ui_options["band-color-scheme-default"] == "Mokole" %}selected{% end %}>Mokole</option>
+</select>
--- a/templates/widgets/color-scheme.html
+++ b/templates/widgets/color-scheme.html
@@ -0,0 +1,6 @@
+<label class="form-check-label" for="color-scheme">UI color scheme</label>
+<select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
+    <option value="auto" {% if web_ui_options["color-scheme-default"] == "auto" %}selected{% end %}>Automatic</option>
+    <option value="light" {% if web_ui_options["color-scheme-default"] == "light" %}selected{% end %}>Light</option>
+    <option value="dark" {% if web_ui_options["color-scheme-default"] == "dark" %}selected{% end %}>Dark</option>
+</select>
--- a/templates/widgets/display-area-header.html
+++ b/templates/widgets/display-area-header.html
@@ -0,0 +1,10 @@
+<div class="card-header text-white bg-primary">
+    <div class="row">
+        <div class="col-auto me-auto">
+            Display
+        </div>
+        <div class="col-auto d-inline-flex">
+            <button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
+        </div>
+    </div>
+</div>
--- a/templates/widgets/filters-area-header.html
+++ b/templates/widgets/filters-area-header.html
@@ -0,0 +1,10 @@
+<div class="card-header text-white bg-primary">
+    <div class="row">
+        <div class="col-auto me-auto">
+            Filters
+        </div>
+        <div class="col-auto d-inline-flex">
+            <button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
+        </div>
+    </div>
+</div>
--- a/templates/widgets/filters-display-buttons.html
+++ b/templates/widgets/filters-display-buttons.html
@@ -0,0 +1,4 @@
+<div class="d-inline-flex gap-1">
+    <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i>&nbsp;Filters</button>
+    <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i>&nbsp;Display</button>
+</div>
--- a/templates/widgets/refresh-timer.html
+++ b/templates/widgets/refresh-timer.html
@@ -0,0 +1 @@
+<div id="timing-container">Loading...</div>
--- a/templates/widgets/run-pause.html
+++ b/templates/widgets/run-pause.html
@@ -0,0 +1,7 @@
+<span class="btn-group" role="group">
+  <input type="radio" class="btn-check" name="runPause" id="runButton" autocomplete="off" checked>
+    <label class="btn btn-outline-primary" for="runButton"><i class="fa-solid fa-play"></i>&nbsp;Run</label>
+
+  <input type="radio" class="btn-check" name="runPause" id="pauseButton" autocomplete="off">
+    <label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i>&nbsp;Pause</label>
+</span>
--- a/templates/widgets/search.html
+++ b/templates/widgets/search.html
@@ -0,0 +1,4 @@
+<span style="position: relative;">
+    <i id="searchicon" class="fa-solid fa-magnifying-glass"></i>
+    <input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search">
+</span>
--- a/webassets/apidocs/openapi.yml
+++ b/webassets/apidocs/openapi.yml
@@ -483,7 +483,7 @@ paths:
      tags:
        - General
      summary: Get enumeration options
-      description: Retrieves the list of options for various enumerated types, which can be found in the spots and also provided back to the API as query parameters. While these enumerated options are defined in this spec anyway, providing them in an API call allows us to define extra parameters, like the colours associated with bands, and also allows clients to set up their filters and features without having to have internal knowledge about, for example, what bands the server knows about. The call also returns a variety of other parameters that may be of use to a web UI, including the contents of the "web-ui-options" config section, which provides guidance for web UI implementations such as the built-in one on sensible configuration options such as the number of spots/alerts to retrieve, or the maximum age of spots to retrieve.
+      description: Retrieves the list of options for various enumerated types, which can be found in the spots and also provided back to the API as query parameters. While these enumerated options are defined in this spec anyway, providing them in an API call allows us to define extra parameters, like the colours associated with bands, and also allows clients to set up their filters and features without having to have internal knowledge about, for example, what bands the server knows about. The call also returns a variety of other parameters that may be of use to a web UI or other client.
      operationId: options
      responses:
        '200':
@@ -535,46 +535,6 @@ paths:
                    type: boolean
                    description: Whether the POST /spot call, to add spots to the server directly via its API, is permitted on this server.
                    example: true
-                  web-ui-options:
-                    type: object
-                    properties:
-                      spot-count:
-                        type: array
-                        description: An array of suggested "spot counts" that the web UI can retrieve from the API
-                        items:
-                          type: integer
-                          example: 50
-                      spot-count-default:
-                        type: integer
-                        example: 50
-                        description: The suggested default "spot count" that the web UI should retrieve from the API
-                      max-spot-age:
-                        type: array
-                        description: An array of suggested "maximum spot ages" that the web UI can retrieve from the API
-                        items:
-                          type: integer
-                          example: 30
-                      max-spot-age-default:
-                        type: integer
-                        example: 30
-                        description: The suggested default "maximum spot age" that the web UI should retrieve from the API
-                      spot-providers-enabled-by-default:
-                        type: array
-                        description: A list of the spot providers that should be enabled in the web UI on first load, if the user hasn't already got a localStorage setting that sets their preference. This is to allow some high-volume providers like RBN to be enabled in Spothole's back-end and displayable in the web UI if the user wants, but by default the experience will not include them.
-                        items:
-                          type: string
-                          example: "POTA"
-                      alert-count:
-                        type: array
-                        description: An array of suggested "alert counts" that the web UI can retrieve from the API
-                        items:
-                          type: integer
-                          example: 100
-                      alert-count-default:
-                        type: integer
-                        example: 100
-                        description: The suggested default "alert count" that the web UI should retrieve from the API
-

  /lookup/call:
    get:
--- a/webassets/css/style.css
+++ b/webassets/css/style.css
@@ -82,14 +82,12 @@ div.container {

 input#search {
    max-width: 12em;
-    margin-left: 1rem;
-    margin-right: 1rem;
    padding-left: 2em;
 }

 i#searchicon {
    position: absolute;
-    left: 1rem;
+    left: 0rem;
    top: 2px;
    padding: 10px;
    pointer-events: none;
--- a/webassets/js/alerts.js
+++ b/webassets/js/alerts.js
@@ -285,13 +285,6 @@ function loadOptions() {
        generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
        generateMultiToggleFilterCard("#source-options", "source", options["alert_sources"]);

-        // Populate the Display panel
-        options["web-ui-options"]["alert-count"].forEach(sc => $("#alerts-to-fetch").append($('<option>', {
-            value: sc,
-            text: sc
-        })));
-        $("#alerts-to-fetch").val(options["web-ui-options"]["alert-count-default"]);
-
        // Load URL params. These may select things from the various filter & display options, so the function needs
        // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
        // loading settings, so this needs to be called before that.
@@ -299,6 +292,7 @@ function loadOptions() {

        // Load filters from settings storage
        loadSettings();
+        setColorScheme($("#color-scheme option:selected").val());

        // Load alerts and set up the timer
        loadAlerts();
@@ -312,12 +306,6 @@ function filtersUpdated() {
    saveSettings();
 }

-// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
-function toggleDarkMode() {
-    enableDarkMode($("#darkMode")[0].checked);
-    saveSettings();
-}
-
 // React to toggling/closing panels
 function toggleFiltersPanel() {
    // If we are going to display the filters panel, hide the display panel
--- a/webassets/js/bands.js
+++ b/webassets/js/bands.js
@@ -145,7 +145,8 @@ function updateBands() {

        // Now each spot is tagged with how far down the div it should go, add them to the DOM.
        spotList.forEach(s => {
-            bandSpotsDiv.append(`<div class="band-spot" style="top: ${s['pxDownBandLabel']}px; border-top: 1px solid ${bandToColor(s['band'])}; border-left: 5px solid ${bandToColor(s['band'])}; border-bottom: 1px solid ${bandToColor(s['band'])}; border-right: 1px solid ${bandToColor(s['band'])};"><span class="band-spot-call">${s.dx_call}${s.dx_ssid != null ? "-" + s.dx_ssid : ""}</span><span class="band-spot-info">${s.dx_call}${s.dx_ssid != null ? "-" + s.dx_ssid : ""} ${(s.freq/1000000).toFixed(3)} ${s.mode}</span></div>`);
+            let worked = alreadyWorked(s["dx_call"], s["band"], s["mode"]);
+            bandSpotsDiv.append(`<div class="band-spot" style="top: ${s['pxDownBandLabel']}px; border-top: 1px solid ${bandToColor(s['band'])}; border-left: 5px solid ${bandToColor(s['band'])}; border-bottom: 1px solid ${bandToColor(s['band'])}; border-right: 1px solid ${bandToColor(s['band'])}; text-decoration: ${worked ? 'line-through' : 'none'};"><span class="band-spot-call">${s.dx_call}${s.dx_ssid != null ? "-" + s.dx_ssid : ""}</span><span class="band-spot-info">${s.dx_call}${s.dx_ssid != null ? "-" + s.dx_ssid : ""} ${(s.freq/1000000).toFixed(3)} ${s.mode}</span></div>`);
        });

        // Work out how tall the canvas should be. Normally this is matching the normal band column height, but if some
@@ -228,19 +229,9 @@ function loadOptions() {
        // Store options
        options = jsonData;

-        // Populate the Display panel
-        options["web-ui-options"]["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', {
-            value: sc * 60,
-            text: sc
-        })));
-        $("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60);
-        getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
-            value: sc,
-            text: sc
-        })));
-
        // First pass loading settings, so we can load the band colour scheme before the filters that need to use it
        loadSettings();
+        setColorScheme($("#color-scheme option:selected").val());
        setBandColorScheme($("#band-color-scheme option:selected").val());

        // Add CSS for band toggle buttons
@@ -252,7 +243,7 @@ function loadOptions() {
        generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
        generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
        generateModesMultiToggleFilterCard(options["modes"]);
-        generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]);
+        generateSourcesMultiToggleFilterCard(options["spot_sources"], spotProvidersEnabledByDefault);

        // Load URL params. These may select things from the various filter & display options, so the function needs
        // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
--- a/webassets/js/common.js
+++ b/webassets/js/common.js
@@ -20,8 +20,8 @@ function loadURLParams() {
    }

    // Handle other params
-    updateCheckboxFromParam(params, "dark-mode", "darkMode");
-    updateSelectFromParam(params, "time-zone", "timeZone"); // Only on Spots and Alerts pages
+    updateSelectFromParam(params, "color-scheme", "color-scheme");
+    updateSelectFromParam(params, "time-zone", "time-zone"); // Only on Spots and Alerts pages
    updateSelectFromParam(params, "limit", "spots-to-fetch"); // Only on Spots page
    updateSelectFromParam(params, "limit", "alerts-to-fetch"); // Only on Alerts page
    updateSelectFromParam(params, "max_age", "max-spot-age"); // Only on Map & Bands pages
@@ -38,10 +38,6 @@ function updateCheckboxFromParam(params, paramName, checkboxID) {
    let v = params.get(paramName);
    if (v != null) {
        $("#" + checkboxID).prop("checked", (v === "true") ? true : false);
-        // Extra check if this is the "dark mode" toggle
-        if (checkboxID == "darkMode") {
-            enableDarkMode((v === "true") ? true : false);
-        }
    }
 }

@@ -50,6 +46,10 @@ function updateSelectFromParam(params, paramName, selectID) {
    let v = params.get(paramName);
    if (v != null) {
        $("#" + selectID).prop("value", v);
+        // Extra check if this is the "color scheme" select
+        if (selectID == "color-scheme") {
+            setColorScheme(v);
+        }
    }
 }

@@ -142,30 +142,49 @@ function columnsUpdated() {
    saveSettings();
 }

-// Function to set dark mode on or off
-function enableDarkMode(dark) {
-    $("html").attr("data-bs-theme", dark ? "dark" : "light");
-    const metaThemeColor = document.querySelector("meta[name=theme-color]");
-    metaThemeColor.setAttribute("content", dark ? "black" : "white");
-    const metaAppleStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
-    metaAppleStatusBarStyle.setAttribute("content", dark ? "black-translucent" : "white-translucent");
+// Function to set the colour scheme based on the state of the UI select box
+function setColorSchemeFromUI() {
+    let theme = $("#color-scheme option:selected").val();
+    if (theme != "") {
+        setColorScheme(theme);
+        saveSettings();
+    }
 }

-// Startup function to determine whether to use light or dark mode
-function usePreferredTheme() {
-    // First, work out if we have ever explicitly saved the value of our toggle
-    let val = localStorage.getItem("#darkMode:checked");
-    if (val != null) {
-        enableDarkMode(JSON.parse(val));
-    } else {
-        // Never set it before, so use the system default theme and set the toggle up to match
-        let dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        enableDarkMode(dark);
-        $("#darkMode").prop('checked', dark);
+// Function to set the color scheme. Supported values: "dark", "light", "auto"
+function setColorScheme(mode) {
+    let effectiveModeDark = mode == "dark";
+    if (mode == "auto") {
+        effectiveModeDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    }
+    $("html").attr("data-bs-theme", effectiveModeDark ? "dark" : "light");
+    const metaThemeColor = document.querySelector("meta[name=theme-color]");
+    metaThemeColor.setAttribute("content", effectiveModeDark ? "black" : "white");
+    const metaAppleStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
+    metaAppleStatusBarStyle.setAttribute("content", effectiveModeDark ? "black-translucent" : "white-translucent");
+}
+
+// Startup function to determine whether to use light or dark mode, or leave as auto
+function usePreferredTheme() {
+    // Work out if we have ever explicitly saved the value of our select box. If so, we set our colour scheme now based
+    // on that. If not, we let the select stay with nothing selected, so that the server sets it to whatever the
+    // server's default is when the options call is retrieved.
+    let val = localStorage.getItem("#color-scheme:value");
+    if (val != null) {
+        setColorScheme(JSON.parse(val));
+    }
+}
+
+// Sets up a listener on the OS light-dark theme change. If the Spothole user theme is set to Auto, the UI will be
+// updated, otherwise if the Spothole user theme is forced to light or dark, that preference will remain.
+function listenForOSThemeChange() {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        setColorScheme($("#color-scheme option:selected").val());
+    });
 }

 // Startup
 $(document).ready(function() {
    usePreferredTheme();
+    listenForOSThemeChange();
 });
--- a/webassets/js/map.js
+++ b/webassets/js/map.js
@@ -160,19 +160,9 @@ function loadOptions() {
        // Store options
        options = jsonData;

-        // Populate the Display panel
-        options["web-ui-options"]["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', {
-            value: sc * 60,
-            text: sc
-        })));
-        $("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60);
-        getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
-            value: sc,
-            text: sc
-        })));
-
        // First pass loading settings, so we can load the band colour scheme before the filters that need to use it
        loadSettings();
+        setColorScheme($("#color-scheme option:selected").val());
        setBandColorScheme($("#band-color-scheme option:selected").val());

        // Add CSS for band toggle buttons
@@ -184,7 +174,7 @@ function loadOptions() {
        generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
        generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
        generateModesMultiToggleFilterCard(options["modes"]);
-        generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]);
+        generateSourcesMultiToggleFilterCard(options["spot_sources"], spotProvidersEnabledByDefault);

        // Load URL params. These may select things from the various filter & display options, so the function needs
        // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
--- a/webassets/js/spots.js
+++ b/webassets/js/spots.js
@@ -13,9 +13,6 @@ function loadSpots() {

    // Make the new query
    $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
-        // Store last updated time
-        lastUpdateTime = moment.utc();
-        updateTimingDisplayRunPause();
        // Store data
        spots = jsonData;
        // Update table
@@ -37,9 +34,6 @@ function startSSEConnection() {
    evtSource = new EventSource('/api/v1/spots/stream' + buildQueryString());

    evtSource.onmessage = function(event) {
-        // Store last updated time
-        lastUpdateTime = moment.utc();
-        updateTimingDisplayRunPause();
        // Get the new spot
        newSpot = JSON.parse(event.data);
        // Awful fudge to ensure new incoming spots at the top of the list don't have timestamps that make them look
@@ -78,12 +72,6 @@ function startSSEConnection() {
    };
 }

-// Update the special timing display for the live spots page, which varies depending on run/pause selection.
-function updateTimingDisplayRunPause() {
-    let run = $('#runButton:checked').val();
-    $("#timing-container").html((run ? "Connected to server. Last update at " : "Paused at ") + lastUpdateTime.format('HH:mm') + " UTC.");
-}
-
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString() {
    var str =  "?";
@@ -117,6 +105,7 @@ function updateTable() {
    var showType = $("#tableShowType")[0].checked;
    var showRef = $("#tableShowRef")[0].checked;
    var showDE = $("#tableShowDE")[0].checked;
+    var showWorkedCheckbox = $("#tableShowWorkedCheckbox")[0].checked;

    // Populate table with headers
    let table = $("#table");
@@ -148,12 +137,18 @@ function updateTable() {
    if (showDE) {
        table.find('thead tr').append(`<th class='hideonmobile'>DE</th>`);
    }
+    if (showWorkedCheckbox) {
+        table.find('thead tr').append(`<th class='hideonmobile'></th>`);
+    }

    table.find('tbody').empty();
    if (spots.length == 0) {
        table.find('tbody').append('<tr class="table-danger"><td colspan="100" style="text-align:center;">No spots match your filters.</td></tr>');
    }

+    // We are regenerating the entire table not just adding a new row, so reset the row counter
+    rowCount = 0;
+
    let spotsNewestFirst = spots.toReversed();
    spotsNewestFirst.forEach(s => addSpotToTopOfTable(s, false));
 }
@@ -186,6 +181,7 @@ function createNewTableRowsForSpot(s, highlightNew) {
    var showType = $("#tableShowType")[0].checked;
    var showRef = $("#tableShowRef")[0].checked;
    var showDE = $("#tableShowDE")[0].checked;
+    var showWorkedCheckbox = $("#tableShowWorkedCheckbox")[0].checked;

    // Create row
    let $tr = $('<tr>');
@@ -197,8 +193,9 @@ function createNewTableRowsForSpot(s, highlightNew) {
        $tr.addClass("table-active");
    }

-    // Show faded out if QRT
-    if (s["qrt"] == true) {
+    // Show faded out if QRT or already worked
+    let alreadyWorkedThis = alreadyWorked(s["dx_call"], s["band"], s["mode"]);
+    if (s["qrt"] == true || alreadyWorkedThis) {
        $tr.addClass("table-faded");
    }

@@ -320,6 +317,9 @@ function createNewTableRowsForSpot(s, highlightNew) {
    // Format band name
    var bandFullName = s['band'] ? s['band'] + " band": "Unknown band";

+    // Format "worked" checkbox
+    var workedCheckbox = `<input type="checkbox" ${alreadyWorkedThis ? "checked" : ""} onClick="setWorkedState('${s['dx_call']}', '${s['band']}', '${s['mode']}', ${alreadyWorkedThis ? "false" : "true"});" title="Check this box to record that you have worked this callsign on their current band and mode.">`;
+
    // Populate the row
    if (showTime) {
        $tr.append(`<td class='nowrap'>${time_formatted}</td>`);
@@ -348,6 +348,9 @@ function createNewTableRowsForSpot(s, highlightNew) {
    if (showDE) {
        $tr.append(`<td class='nowrap hideonmobile'><span class='flag-wrapper' title='${de_country}'>${de_flag}</span>${de_call}</td>`);
    }
+    if (showWorkedCheckbox) {
+        $tr.append(`<td class='nowrap hideonmobile'>${workedCheckbox}</td>`);
+    }

    // Second row for mobile view only, containing type, ref & comment
    $tr2 = $("<tr class='hidenotonmobile'>");
@@ -356,7 +359,7 @@ function createNewTableRowsForSpot(s, highlightNew) {
    if (rowCount % 2 == 1) {
        $tr2.addClass("table-active");
    }
-    if (s["qrt"] == true) {
+    if (s["qrt"] == true || alreadyWorkedThis) {
        $tr2.addClass("table-faded");
    }
    if (highlightNew) {
@@ -379,6 +382,9 @@ function createNewTableRowsForSpot(s, highlightNew) {
    if (showDE) {
        $td2floatright.append(` de ${de_call} &nbsp;`);
    }
+    if (showWorkedCheckbox) {
+        $td2floatright.append(` ${workedCheckbox} &nbsp;`);
+    }
    $td2.append($td2floatright);
    $td2.append(`</div><div style="clear: both;"></div>`);
    if (showComment) {
@@ -398,19 +404,9 @@ function loadOptions() {
        // Store options
        options = jsonData;

-        // Populate the Display panel
-        options["web-ui-options"]["spot-count"].forEach(sc => $("#spots-to-fetch").append($('<option>', {
-            value: sc,
-            text: sc
-        })));
-        $("#spots-to-fetch").val(options["web-ui-options"]["spot-count-default"]);
-        getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
-            value: sc,
-            text: sc
-        })));
-
        // First pass loading settings, so we can load the band colour scheme before the filters that need to use it
        loadSettings();
+        setColorScheme($("#color-scheme option:selected").val());
        setBandColorScheme($("#band-color-scheme option:selected").val());

        // Add CSS for band toggle buttons
@@ -422,7 +418,7 @@ function loadOptions() {
        generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
        generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
        generateModesMultiToggleFilterCard(options["modes"]);
-        generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]);
+        generateSourcesMultiToggleFilterCard(options["spot_sources"], spotProvidersEnabledByDefault);

        // Load URL params. These may select things from the various filter & display options, so the function needs
        // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
@@ -503,6 +499,27 @@ function displayIntroBox() {
    });
 }

+// Mark a callsign-band-mode combination as worked (or unmark it). Persist this to localStorage.
+function setWorkedState(callsign, band, mode, nowWorked) {
+    let combo = callsign + "-" + band + "-" + mode;
+    if (nowWorked && !worked.includes(combo)) {
+        worked.push(combo);
+        updateTable();
+        localStorage.setItem("worked", JSON.stringify(worked));
+    } else if (!nowWorked && worked.includes(combo)) {
+        worked.splice(worked.indexOf(combo), 1);
+        updateTable();
+        localStorage.setItem("worked", JSON.stringify(worked));
+    }
+}
+
+// Clear the list of worked calls
+function clearWorked() {
+    worked = [];
+    updateTable();
+    localStorage.setItem("worked", JSON.stringify(worked));
+}
+
 // Startup
 $(document).ready(function() {
    // Call loadOptions(), this will then trigger loading spots and setting up timers.
@@ -515,13 +532,11 @@ $(document).ready(function() {
        // Need to start the SSE connection but also do a full re-query to catch up anything that we missed, so we
        // might as well just call loadSpots again which will trigger it all
        loadSpots();
-        updateTimingDisplayRunPause();
    });
    $("#pauseButton").change(function() {
        // If we are pausing and have an open SSE connection, stop it
        if (evtSource != null) {
            evtSource.close();
        }
-        updateTimingDisplayRunPause();
    });
 });
--- a/webassets/js/spotsbandsandmap.js
+++ b/webassets/js/spotsbandsandmap.js
@@ -1,5 +1,10 @@
 // Storage for the spot data that the server gives us.
 var spots = []
+// List of people the user has worked. Each entry has the format callsign-band-mode. These can be added to the list by
+// ticking the checkbox on a row of the table, and cleared from the Display menu. Where a row would be added to the
+// table and the callsign-band-mode is in this list, it is shown struck through as already worked. This is persisted
+// to localStorage.
+let worked = []

 // Dynamically add CSS code for the band toggle buttons to be in the appropriate colour.
 // Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
@@ -110,12 +115,6 @@ function filtersUpdated() {
    saveSettings();
 }

-// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
-function toggleDarkMode() {
-    enableDarkMode($("#darkMode")[0].checked);
-    saveSettings();
-}
-
 // Function to update the band colour scheme in spots, bands and map pages
 function setBandColorSchemeFromUI() {
    setBandColorScheme($("#band-color-scheme option:selected").val());
@@ -124,10 +123,24 @@ function setBandColorSchemeFromUI() {
    window.location.reload();
 }

+// Query if a callsign-band-mode combination as has already been worked
+function alreadyWorked(callsign, band, mode) {
+    return worked.includes(callsign + "-" + band + "-" + mode);
+}
+
 // Reload spots on becoming visible. This forces a refresh when used as a PWA and the user switches back to the PWA
 // after some time has passed with it in the background.
 addEventListener("visibilitychange", (event) => {
    if (!document.hidden) {
        loadSpots();
    }
+});
+
+// Startup
+$(document).ready(function() {
+    // Load worked list
+    var tmpWorked = JSON.parse(localStorage.getItem("worked"));
+    if (tmpWorked) {
+        worked = tmpWorked;
+    }
 });
Author	SHA1	Message	Date
Ian Renton	9241a26a47	Mobile layout tweaks	2026-01-31 22:24:46 +00:00
Ian Renton	3be63a8dd6	Fix placement of support/donate button	2026-01-31 13:45:49 +00:00
Ian Renton	1e3cec1599	Fix placement of support/donate button	2026-01-31 13:43:10 +00:00
Ian Renton	7b409bcb67	Add ability to tag callsigns as worked. Closes #41	2026-01-31 09:34:37 +00:00
Ian Renton	47b4ddb5c8	Reduce duplication in HTML pages with includes. Closes #103	2026-01-31 08:52:28 +00:00
Ian Renton	94094974d0	Allow server owner to inject HTML into the spots page for a "support/donate" type link. #100	2026-01-31 08:18:48 +00:00
Ian Renton	5230fa535f	Set up web UI using web_ui_options embedded directly into HTML, to avoid more complex JS load order faff #102	2026-01-30 22:24:12 +00:00
Ian Renton	2be1c5b3d3	Make default colour schemes for the web UI configurable on the server side #102	2026-01-30 21:31:13 +00:00
Ian Renton	221fade44b	Merge remote-tracking branch 'origin/main'	2026-01-30 17:13:10 +00:00
Ian Renton	721d345332	Allow users to return to "Automatic" colour scheme. #102	2026-01-30 17:12:57 +00:00
ian	bf2f5956fc	Update README.md	2026-01-23 17:12:47 +00:00
ian	7f4556a340	Update README.md	2026-01-23 17:11:11 +00:00
ian	33de618808	Update README.md	2026-01-23 17:10:24 +00:00
Ian Renton	edb8dd5e0e	Fix a visual bug where buttons could become two lines high on narrrow screens	2026-01-22 20:26:31 +00:00
Ian Renton	b62ef6a9a0	WWTOTA cluster support #97	2026-01-22 19:27:36 +00:00
Ian Renton	7952ad22eb	Merge branch 'main' into 97-wwtota	2026-01-22 19:00:59 +00:00
Ian Renton	bb75b4ec2f	Skeleton support for WWTOTA #97	2026-01-18 12:12:51 +00:00
				`@@ -0,0 +1 @@`
				`<div id="timing-container">Loading...</div>`