Cache-busting ?v= strings for CSS

# Conflicts:
#	templates/about.html
#	templates/add_spot.html
#	templates/alerts.html
#	templates/bands.html
#	templates/base.html
#	templates/conditions.html
#	templates/map.html
#	templates/spots.html
#	templates/status.html

README.md

@@ -35,7 +35,7 @@ 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.                                                                                                                                                |
 | `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.                                                                                                                                |
@@ -48,6 +48,9 @@ The supported parameters are as follows. Generally these match the equivalent pa
 | `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. |
+| `map-center-lat`  | Numeric (decimal)       | (auto)  | `?map-center-lat=51.5`         | Sets the initial latitude of the map centre on the map page. If omitted, the map auto-fits to the loaded spots.                                                       |
+| `map-center-lon`  | Numeric (decimal)       | (auto)  | `?map-center-lon=-0.1`         | Sets the initial longitude of the map centre on the map page. If omitted, the map auto-fits to the loaded spots.                                                      |
+| `map-zoom`        | Numeric (integer)       | (auto)  | `?map-zoom=6`                  | Sets the initial zoom level of the map on the map page. If omitted, the map auto-fits to the loaded spots.                                                            |
 
 More will be added soon to allow customisation of filters and other display properties.
 
@@ -69,6 +72,8 @@ Various approaches exist to writing your own client, but in general:
 
 If you want to run a copy of Spothole with different configuration settings than the main instance, you can download it and run it on your own local machine or server.
 
+You will require Python version 3.8 or later. If you encounter an error about `gdal-config` during the following process, you will also need `libgdal-dev` installed.
+
 To download and set up Spothole on a Debian server, run the following commands. Other operating systems will likely be similar.
 
 ```bash

alertproviders/ng3k.py

@@ -2,7 +2,7 @@ import re
 from datetime import datetime
 
 import pytz
-from rss_parser import RSSParser
+from rss_parser import Parser
 
 from alertproviders.http_alert_provider import HTTPAlertProvider
 from data.alert import Alert
@@ -20,7 +20,7 @@ class NG3K(HTTPAlertProvider):
 
     def _http_response_to_alerts(self, http_response):
         new_alerts = []
-        rss = RSSParser.parse(http_response.content.decode())
+        rss = Parser.parse(http_response.content.decode())
         # Iterate through source data
         for source_alert in rss.channel.items:
             # Deal with "the format"...
@@ -68,9 +68,9 @@ class NG3K(HTTPAlertProvider):
 
             dx_country = parts[1]
             qsl_info = parts[3]
-            bands = extra_parts[1]
-            modes = extra_parts[2] if len(extra_parts) > 3 else ""
-            comment = extra_parts[-1]
+            bands = extra_parts[1] if len(extra_parts) > 1 else ""
+            modes = extra_parts[2] if len(extra_parts) > 2 else ""
+            comment = extra_parts[3] if len(extra_parts) > 3 else ""
 
             # Convert to our alert format
             alert = Alert(source=self.name,

alertproviders/wota.py

@@ -1,7 +1,7 @@
 from datetime import datetime
 
 import pytz
-from rss_parser import RSSParser
+from rss_parser import Parser as RSSParser
 
 from alertproviders.http_alert_provider import HTTPAlertProvider
 from data.alert import Alert

config-example.yml

@@ -121,12 +121,20 @@ spot-providers:
     class: "XOTA"
     name: "39C3 TOTA"
     enabled: false
-    url: "wss://dev.39c3.totawatch.de/api/spot/live"
+    url: "wss://39c3.totawatch.de/api/spot/live"
     # Fixed SIG for all spots from a provider & location CSV are currently only a feature for the "XOTA" provider,
     # the software found at https://github.com/nischu/xOTA/. This is because this is a generic backend for xOTA
     # programmes and so different URLs provide different programmes.
     sig: "TOTA"
     locations-csv: "datafiles/39c3-tota.csv"
+  -
+    class: "XOTA"
+    name: "EH23 TOTA"
+    enabled: true
+    url: "wss://eh23.totawatch.de/api/spot/live"
+    sig: "TOTA"
+    locations-csv: "datafiles/eh23-tota.csv"
+
 
 # Alert providers to use. Same setup as the spot providers list above.
 alert-providers:
@@ -167,6 +175,10 @@ solar-condition-providers:
     class: "HamQSL"
     name: "HamQSL"
     enabled: true
+  -
+    class: "NOAA3dayForecast"
+    name: "NOAA 3-day Forecast"
+    enabled: true
 
 # Port to open the local web server on
 web-server-port: 8080

core/geo_utils.py

@@ -1,3 +1,4 @@
+import json
 import logging
 import re
 from math import floor
@@ -11,8 +12,10 @@ TRANSFORMER_OS_GRID_TO_WGS84 = Transformer.from_crs("EPSG:27700", "EPSG:4326")
 TRANSFORMER_IRISH_GRID_TO_WGS84 = Transformer.from_crs("EPSG:29903", "EPSG:4326")
 TRANSFORMER_CI_UTM_GRID_TO_WGS84 = Transformer.from_crs("+proj=utm +zone=30 +ellps=WGS84", "EPSG:4326")
 
-cq_zone_data = geopandas.GeoDataFrame.from_features(geopandas.read_file("datafiles/cqzones.geojson"))
-itu_zone_data = geopandas.GeoDataFrame.from_features(geopandas.read_file("datafiles/ituzones.geojson"))
+with open("datafiles/cqzones.geojson") as f:
+    cq_zone_data = geopandas.GeoDataFrame.from_features(json.load(f)["features"])
+with open("datafiles/ituzones.geojson") as f:
+    itu_zone_data = geopandas.GeoDataFrame.from_features(json.load(f)["features"])
 for idx in cq_zone_data.index:
     prepare(cq_zone_data.at[idx, 'geometry'])
 for idx in itu_zone_data.index:

data/solar_conditions.py

@@ -5,7 +5,7 @@ from dataclasses import dataclass
 # Each threshold-based table is a list of (min_value, description) pairs in descending order;
 # the first entry whose threshold the value meets or exceeds is used.
 
-BLACKOUT_DESCRIPTIONS = {
+XRAY_CLASS_DESCRIPTIONS = {
     "X": "Wide area HF radio blackout across sunlit side",
     "M": "Occasional loss of HF communications on sunlit side",
     "C": "Low absorption of HF signals on sunlit side",
@@ -71,6 +71,28 @@ ELECTRON_FLUX_DESCRIPTIONS = [
 ]
 
 
+def _xray_blackout_scale(xray):
+    """Return the NOAA Radio Blackout scale number (R0-R5) for the given X-ray flux class string
+    (e.g. "M4.5", "X12")."""
+
+    if not xray or len(xray) < 2:
+        return 0
+    letter = xray[0].upper()
+    try:
+        number = float(xray[1:])
+    except ValueError:
+        return 0
+    if letter == 'M':
+        return 1 if number < 5 else 2
+    if letter == 'X':
+        if number < 10:
+            return 3
+        if number < 20:
+            return 4
+        return 5
+    return 0
+
+
 def _lookup_by_threshold(value, table, default=None):
     """Return the description from a threshold table for the given numeric value.
     The table is a list of (min_value, description) pairs in descending order."""
@@ -108,7 +130,7 @@ class SolarConditions:
     # K-index (3-hour geomagnetic activity)
     k_index: int = None
     # X-ray flux class, e.g. "B2.3", "C1.0"
-    x_ray: str = None
+    xray: str = None
     # Proton flux
     proton_flux: int = None
     # Electron flux
@@ -131,17 +153,27 @@ class SolarConditions:
     hf_conditions: dict = None
     # VHF propagation conditions, keyed by condition name
     vhf_conditions: dict = None
+    # NOAA Kp index 3-day forecast, keyed by UNIX timestamp of the start of each 3-hour UTC period
+    k_index_forecast: dict = None
+    # NOAA Solar Radiation Storm (S1 or greater) probability forecast, keyed by UNIX timestamp of start of day UTC
+    solar_storm_forecast: dict = None
+    # NOAA Radio Blackout (R1-R2) probability forecast, keyed by UNIX timestamp of start of day UTC
+    blackout_forecast_r1r2: dict = None
+    # NOAA Radio Blackout (R3 or greater) probability forecast, keyed by UNIX timestamp of start of day UTC
+    blackout_forecast_r3_or_greater: dict = None
 
     # Derived values (populated by infer_descriptions())
-    # HF radio blackout risk description, derived from x_ray
-    blackout_desc: str = None
+    # HF radio blackout risk description, derived from xray
+    xray_desc: str = None
+    # HF radio blackout scale number (R0-R5), derived from xray
+    radio_blackout_scale: int = None
     # Solar radiation storm level description, derived from proton_flux
     proton_flux_desc: str = None
-    # Solar radiation storm scale number (S0–S5), derived from proton_flux
+    # Solar radiation storm scale number (S0-S5), derived from proton_flux
     solar_storm_scale: int = None
     # Geomagnetic storm level description, derived from k_index
     geomag_storm_desc: str = None
-    # Geomagnetic storm scale number (G0–G5), derived from k_index
+    # Geomagnetic storm scale number (G0-G5), derived from k_index
     geomag_storm_scale: int = None
     # Overall HF band conditions summary, derived from sfi
     band_conditions_desc: str = None
@@ -151,10 +183,9 @@ class SolarConditions:
     def infer_descriptions(self):
         """Populate derived text description fields from the current numeric/raw field values."""
 
-        # blackout_desc: use the X-ray flux class letter (first character of x_ray)
-        if self.x_ray and len(self.x_ray) > 0:
-            self.blackout_desc = BLACKOUT_DESCRIPTIONS.get(self.x_ray[0].upper())
-
+        if self.xray and len(self.xray) > 0:
+            self.xray_desc = XRAY_CLASS_DESCRIPTIONS.get(self.xray[0].upper())
+            self.radio_blackout_scale = _xray_blackout_scale(self.xray)
         self.proton_flux_desc = _lookup_by_threshold(self.proton_flux, PROTON_FLUX_DESCRIPTIONS)
         self.solar_storm_scale = _lookup_by_threshold(self.proton_flux, SOLAR_STORM_SCALES)
         self.geomag_storm_desc = _lookup_by_threshold(self.k_index, GEOMAG_STORM_DESCRIPTIONS)

data/spot.py

@@ -201,8 +201,8 @@ class Spot:
                 self.de_flag = lookup_helper.get_flag_for_dxcc(self.de_dxcc_id)
 
         # Remove NaNs in frequency
-        if freq and freq == float("nan"):
-            freq = None
+        if self.freq and self.freq == float("nan"):
+            self.freq = None
 
         # Band from frequency
         if self.freq and not self.band:
@@ -337,6 +337,16 @@ class Spot:
                 self.dx_grid = lookup_helper.infer_grid_from_callsign_dxcc(self.dx_call)
                 self.dx_location_source = "DXCC"
 
+        # It looks like we can sometimes get a string into lat/lon, so try to parse as float, reject if not valid
+        if isinstance(self.dx_latitude, str) or isinstance(self.dx_longitude, str):
+            try:
+                self.dx_latitude = float(self.dx_latitude)
+                self.dx_longitude = float(self.dx_longitude)
+            except (TypeError, ValueError):
+                logging.warning("Received non-numeric strings in lat/lon (" + str(self.dx_latitude) + ", " + str(self.dx_longitude) + ") for call " + self.dx_call + ", rejecting it")
+                self.dx_latitude = None
+                self.dx_longitude = None
+
         # CQ and ITU zone lookup, preferably from location but failing that, from callsign
         if not self.dx_cq_zone:
             if self.dx_latitude:

datafiles/eh23-tota.csv

@@ -0,0 +1,13 @@
+ref,lat,lon
+T-01,50.3636495,7.5584857
+T-02,50.3636495,7.5584857
+T-03,50.3636495,7.5584857
+T-11,50.3636495,7.5584857
+T-13,50.3636495,7.5584857
+T-14,50.3636495,7.5584857
+T-21,50.3636495,7.5584857
+T-31,50.3636495,7.5584857
+T-33,50.3636495,7.5584857
+T-34,50.3636495,7.5584857
+T-41,50.3636495,7.5584857
+T-51,50.3636495,7.5584857

requirements.txt

@@ -3,16 +3,17 @@ requests-cache~=1.2.1
 pyhamtools~=0.12.0
 telnetlib3~=2.0.8
 pytz~=2025.2
-requests~=2.32.5
+requests~=2.32.4
 aprslib~=0.7.2
 diskcache~=5.6.3
 psutil~=7.1.0
 requests-sse~=0.5.2
-rss-parser~=2.1.1
-pyproj~=3.7.2
-prometheus_client~=0.23.1
+rss-parser~=1.1.1
+pyproj~=3.5.0;python_version<="3.8"
+pyproj~=3.7.2;python_version>"3.8"
+prometheus_client~=0.21.1
 beautifulsoup4~=4.14.2
-websocket-client~=1.9.0
-tornado~=6.5.4
+websocket-client~=1.8.0
+tornado~=6.4.2
 tornado_eventsource~=3.0.0
-geopandas~=1.1.2
+geopandas~=0.13.2

server/handlers/api/alerts.py

@@ -147,7 +147,7 @@ def alert_allowed_by_query(alert, query):
     for k in query.keys():
         match k:
             case "received_since":
-                since = datetime.fromtimestamp(int(query.get(k)), pytz.UTC)
+                since = datetime.fromtimestamp(float(query.get(k)), pytz.UTC)
                 if not alert.received_time or alert.received_time <= since:
                     return False
             case "max_duration":

server/handlers/api/spots.py

@@ -178,7 +178,7 @@ def spot_allowed_by_query(spot, query):
                 if not spot.time or spot.time <= since:
                     return False
             case "received_since":
-                since = datetime.fromtimestamp(int(query.get(k)), pytz.UTC).timestamp()
+                since = datetime.fromtimestamp(float(query.get(k)), pytz.UTC).timestamp()
                 if not spot.received_time or spot.received_time <= since:
                     return False
             case "source":

server/handlers/pagetemplate.py

@@ -11,9 +11,11 @@ from core.prometheus_metrics_handler import page_requests_counter
 class PageTemplateHandler(tornado.web.RequestHandler):
     """Handler for all HTML pages generated from templates"""
 
-    def initialize(self, template_name, web_server_metrics):
+    def initialize(self, template_name, web_server_metrics, has_hamqsl=False, has_noaa_forecast=False):
         self._template_name = template_name
         self._web_server_metrics = web_server_metrics
+        self._has_hamqsl = has_hamqsl
+        self._has_noaa_forecast = has_noaa_forecast
 
     def get(self):
         # Metrics
@@ -24,4 +26,5 @@ class PageTemplateHandler(tornado.web.RequestHandler):
 
         # Load named template, and provide variables used in templates
         self.render(self._template_name + ".html", software_version=SOFTWARE_VERSION, allow_spotting=ALLOW_SPOTTING,
-                    web_ui_options=WEB_UI_OPTIONS, baseurl = BASE_URL, current_path=self.request.path)
+                    web_ui_options=WEB_UI_OPTIONS, baseurl=BASE_URL, current_path=self.request.path,
+                    has_hamqsl=self._has_hamqsl, has_noaa_forecast=self._has_noaa_forecast)

server/webserver.py

@@ -21,7 +21,7 @@ from server.handlers.pagetemplate import PageTemplateHandler
 class WebServer:
     """Provides the public-facing web server."""
 
-    def __init__(self, spots, alerts, solar_conditions, status_data, port):
+    def __init__(self, spots, alerts, solar_conditions, status_data, solar_condition_providers, port):
         """Constructor"""
 
         self._spots = spots
@@ -30,6 +30,7 @@ class WebServer:
         self._sse_spot_queues = []
         self._sse_alert_queues = []
         self._status_data = status_data
+        self._solar_condition_providers = solar_condition_providers
         self._port = port
         self._shutdown_event = asyncio.Event()
         self.web_server_metrics = {
@@ -53,6 +54,12 @@ class WebServer:
     async def _start_inner(self):
         """Start method (async). Sets up the Tornado application."""
 
+        provider_classes = [type(p).__name__ for p in self._solar_condition_providers if p.enabled]
+        has_hamqsl = "HamQSL" in provider_classes
+        has_noaa_forecast = "NOAA3dayForecast" in provider_classes
+        page_opts = {"web_server_metrics": self.web_server_metrics, "has_hamqsl": has_hamqsl,
+                     "has_noaa_forecast": has_noaa_forecast}
+
         app = tornado.web.Application([
             # Routes for API calls
             (r"/api/v1/spots", APISpotsHandler, {"spots": self._spots, "web_server_metrics": self.web_server_metrics}),
@@ -74,20 +81,15 @@ class WebServer:
             (r"/api/v1/lookup/grid", APILookupGridHandler, {"web_server_metrics": self.web_server_metrics}),
             (r"/api/v1/spot", APISpotHandler, {"spots": self._spots, "web_server_metrics": self.web_server_metrics}),
             # Routes for templated pages
-            (r"/", PageTemplateHandler, {"template_name": "spots", "web_server_metrics": self.web_server_metrics}),
-            (r"/map", PageTemplateHandler, {"template_name": "map", "web_server_metrics": self.web_server_metrics}),
-            (r"/bands", PageTemplateHandler, {"template_name": "bands", "web_server_metrics": self.web_server_metrics}),
-            (r"/alerts", PageTemplateHandler,
-             {"template_name": "alerts", "web_server_metrics": self.web_server_metrics}),
-            (r"/add-spot", PageTemplateHandler,
-             {"template_name": "add_spot", "web_server_metrics": self.web_server_metrics}),
-            (r"/conditions", PageTemplateHandler,
-             {"template_name": "conditions", "web_server_metrics": self.web_server_metrics}),
-            (r"/status", PageTemplateHandler,
-             {"template_name": "status", "web_server_metrics": self.web_server_metrics}),
-            (r"/about", PageTemplateHandler, {"template_name": "about", "web_server_metrics": self.web_server_metrics}),
-            (r"/apidocs", PageTemplateHandler,
-             {"template_name": "apidocs", "web_server_metrics": self.web_server_metrics}),
+            (r"/", PageTemplateHandler, {"template_name": "spots", **page_opts}),
+            (r"/map", PageTemplateHandler, {"template_name": "map", **page_opts}),
+            (r"/bands", PageTemplateHandler, {"template_name": "bands", **page_opts}),
+            (r"/alerts", PageTemplateHandler, {"template_name": "alerts", **page_opts}),
+            (r"/add-spot", PageTemplateHandler, {"template_name": "add_spot", **page_opts}),
+            (r"/conditions", PageTemplateHandler, {"template_name": "conditions", **page_opts}),
+            (r"/status", PageTemplateHandler, {"template_name": "status", **page_opts}),
+            (r"/about", PageTemplateHandler, {"template_name": "about", **page_opts}),
+            (r"/apidocs", PageTemplateHandler, {"template_name": "apidocs", **page_opts}),
             # Route for Prometheus metrics
             (r"/metrics", PrometheusMetricsHandler),
             # Default route to serve from "webassets"

solarconditionsproviders/hamqsl.py

@@ -86,7 +86,7 @@ class HamQSL(HTTPSolarConditionsProvider):
             "sfi": int_val("solarflux"),
             "a_index": int_val("aindex"),
             "k_index": int_val("kindex"),
-            "x_ray": text("xray"),
+            "xray": text("xray"),
             "sunspots": int_val("sunspots"),
             "proton_flux": int_val("protonflux"),
             "electron_flux": int_val("electonflux"),
@@ -94,7 +94,13 @@ class HamQSL(HTTPSolarConditionsProvider):
             "aurora_latitude": float_val("latdegree"),
             "solar_wind": float_val("solarwind"),
             "magnetic_field": float_val("magneticfield"),
-            "geomag_field": (lambda v: "Unsettled" if v == "Unsettld" else v)(text("geomagfield").title()),
+            "geomag_field": text("geomagfield").title()
+                            .replace("Vr Quiet", "Very Quiet")
+                            .replace("Unsettld", "Unsettled")
+                            .replace("Min Strm", "Minor Storm")
+                            .replace("Maj Strm", "Major Storm")
+                            .replace("Sev Strm", "Severe Storm")
+                            .replace("Ext Strm", "Extreme Storm"),
             "geomag_noise": text("signalnoise"),
             "hf_conditions": hf_conditions,
             "vhf_conditions": {

solarconditionsproviders/noaa3dayforecast.py

@@ -0,0 +1,177 @@
+import logging
+import re
+from datetime import datetime, timezone
+
+from solarconditionsproviders.http_solar_conditions_provider import HTTPSolarConditionsProvider
+
+POLL_INTERVAL = 10800 # Every 3 hours
+URL = "https://services.swpc.noaa.gov/text/3-day-forecast.txt"
+
+
+class NOAA3dayForecast(HTTPSolarConditionsProvider):
+    """Solar conditions provider using the NOAA 3-day forecast text file. Parses the NOAA forecast and populates
+    corresponding fields in the solar conditions object.."""
+
+    def __init__(self, provider_config):
+        super().__init__(provider_config, URL, POLL_INTERVAL)
+
+    @staticmethod
+    def _parse_percentage_table(lines, section_header, year):
+        """Find and parse a forecast table using percentages, identified by section_header. This is common to the lookup
+        of the solar storm and radio blackout forecast parsing."""
+        start_idx = None
+        for i, line in enumerate(lines):
+            if section_header in line:
+                start_idx = i
+                break
+        if start_idx is None:
+            logging.warning(f"NOAA 3-day forecast: could not find '{section_header}' section")
+            return None
+
+        # Find the date header line — the first line within the next few that contains month+day patterns
+        date_header_idx = None
+        for j in range(start_idx + 1, min(start_idx + 6, len(lines))):
+            if re.search(r'[A-Za-z]{3}\s+\d{2}', lines[j]):
+                date_header_idx = j
+                break
+        if date_header_idx is None:
+            logging.warning(f"NOAA 3-day forecast: could not find date header after '{section_header}'")
+            return None
+
+        date_matches = re.findall(r'([A-Za-z]{3})\s+(\d{2})', lines[date_header_idx])
+        if not date_matches:
+            logging.warning(f"NOAA 3-day forecast: no dates in header: {lines[date_header_idx]}")
+            return None
+
+        column_timestamps = []
+        for month_str, day_str in date_matches:
+            try:
+                dt = datetime.strptime(f"{day_str} {month_str} {year}", "%d %b %Y").replace(tzinfo=timezone.utc)
+                column_timestamps.append(dt.timestamp())
+            except ValueError:
+                logging.warning(f"NOAA 3-day forecast: could not parse date: {month_str} {day_str} {year}")
+                return None
+
+        # Parse data rows: each non-empty line should have a text label and percentage values
+        result = {}
+        for line in lines[date_header_idx + 1:]:
+            line_stripped = line.strip()
+            if not line_stripped:
+                if result:
+                    break
+                continue
+            pct_matches = list(re.finditer(r'\b(\d+)%', line_stripped))
+            if not pct_matches:
+                if result:
+                    break
+                continue
+            # Row label is everything before the first percentage value
+            row_label = line_stripped[:line_stripped.index(pct_matches[0].group())].strip()
+            row_data = {}
+            for j, match in enumerate(pct_matches):
+                if j >= len(column_timestamps):
+                    break
+                row_data[column_timestamps[j]] = int(match.group(1))
+            if row_data:
+                result[row_label] = row_data
+
+        return result if result else None
+
+    def _http_response_to_solar_conditions(self, http_response):
+        if http_response.status_code != 200:
+            logging.warning("NOAA K-index forecast API returned HTTP " + str(http_response.status_code))
+            return None
+
+        lines = http_response.text.splitlines()
+
+        # Find the "NOAA Kp index breakdown" section header
+        start_idx = None
+        for i, line in enumerate(lines):
+            if "NOAA Kp index breakdown" in line:
+                start_idx = i
+                break
+
+        if start_idx is None:
+            logging.warning("NOAA K-index forecast: could not find 'NOAA Kp index breakdown' section")
+            return None
+
+        # Extract the year from the header line, e.g. "NOAA Kp index breakdown Apr 2-Apr 4, 2026"
+        header_line = lines[start_idx]
+        year_match = re.search(r'\b(\d{4})\b', header_line)
+        if not year_match:
+            logging.warning("NOAA K-index forecast: could not extract year from: " + header_line)
+            return None
+        year = int(year_match.group(1))
+
+        # Parse the column date headers on the next line, e.g. "              Apr 02     Apr 03     Apr 04"
+        if start_idx + 1 >= len(lines):
+            logging.warning("NOAA K-index forecast: missing date header line")
+            return None
+
+        date_header_line = lines[start_idx + 2]
+        date_matches = re.findall(r'([A-Za-z]{3})\s+(\d{2})', date_header_line)
+        if not date_matches:
+            logging.warning("NOAA K-index forecast: could not parse date headers from: " + date_header_line)
+            return None
+
+        column_dates = []
+        for month_str, day_str in date_matches:
+            try:
+                column_dates.append(datetime.strptime(f"{day_str} {month_str} {year}", "%d %b %Y").date())
+            except ValueError:
+                logging.warning(f"NOAA K-index forecast: could not parse date: {month_str} {day_str} {year}")
+                return None
+
+        # Parse each data row, e.g. "00-03UT          2.00          3.00          2.00"
+        k_index_forecast = {}
+        for line in lines[start_idx + 3:]:
+            time_match = re.match(r'^(\d{2})-(\d{2})UT\s+(.*)', line.strip())
+            if not time_match:
+                if k_index_forecast:
+                    break
+                continue
+
+            start_hour = int(time_match.group(1))
+            # Split on 2 or more spaces so that e.g. "5.67 (G2)" stays as one token per column
+            raw_values = re.split(r' {2,}', time_match.group(3).strip())
+
+            for i, val in enumerate(raw_values):
+                if i >= len(column_dates):
+                    break
+                # Take only the leading numeric part, discarding any bracketed section
+                try:
+                    kp = float(val.split()[0])
+                except (ValueError, IndexError):
+                    continue
+
+                date = column_dates[i]
+                start_dt = datetime(date.year, date.month, date.day, start_hour, 0, 0, tzinfo=timezone.utc)
+
+                # Key the data dict by start time
+                key = start_dt.timestamp()
+                k_index_forecast[key] = kp
+
+        if not k_index_forecast:
+            logging.warning("NOAA K-index forecast: no data rows parsed")
+            return None
+
+        # Parse Solar Radiation Storm Forecast (single row: "S1 or greater")
+        solar_storm_forecast = None
+        radiation_table = self._parse_percentage_table(lines, "Solar Radiation Storm Forecast", year)
+        if radiation_table:
+            solar_storm_forecast = radiation_table.get("S1 or greater")
+
+        # Parse Radio Blackout Forecast (two rows: "R1-R2" and "R3 or greater")
+        blackout_forecast_r1r2 = None
+        blackout_forecast_r3_or_greater = None
+        blackout_table = self._parse_percentage_table(lines, "Radio Blackout Forecast", year)
+        if blackout_table:
+            blackout_forecast_r1r2 = blackout_table.get("R1-R2")
+            blackout_forecast_r3_or_greater = blackout_table.get("R3 or greater")
+
+        return {
+            "k_index_forecast": k_index_forecast,
+            "solar_storm_forecast": solar_storm_forecast,
+            "blackout_forecast_r1r2": blackout_forecast_r1r2,
+            "blackout_forecast_r3_or_greater": blackout_forecast_r3_or_greater,
+        }

spothole.py

@@ -97,7 +97,8 @@ if __name__ == '__main__':
     lookup_helper.start()
 
     # Set up web server
-    web_server = WebServer(spots=spots, alerts=alerts, solar_conditions=solar_conditions, status_data=status_data, port=WEB_SERVER_PORT)
+    web_server = WebServer(spots=spots, alerts=alerts, solar_conditions=solar_conditions, status_data=status_data,
+                           solar_condition_providers=solar_condition_providers, port=WEB_SERVER_PORT)
 
     # Fetch, set up and start spot providers
     for entry in config["spot-providers"]:

spotproviders/wota.py

@@ -3,7 +3,7 @@ import re
 from datetime import datetime
 
 import pytz
-from rss_parser import RSSParser
+from rss_parser import Parser
 
 from data.sig_ref import SIGRef
 from data.spot import Spot
@@ -23,7 +23,7 @@ class WOTA(HTTPSpotProvider):
 
     def _http_response_to_spots(self, http_response):
         new_spots = []
-        rss = RSSParser.parse(http_response.content.decode())
+        rss = Parser.parse(http_response.content.decode())
         # Iterate through source data
         for source_spot in rss.channel.items:
 

templates/about.html

@@ -67,7 +67,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=1774894144"></script>
+<script src="/js/common.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/add_spot.html

@@ -69,8 +69,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1774894144"></script>
-<script src="/js/add-spot.js?v=1774894144"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/add-spot.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/alerts.html

@@ -33,7 +33,7 @@
     <div id="display-area" class="appearing-panel card mb-3">
         {% 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 id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
                 <div class="col">
                     {% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %}
                 </div>
@@ -56,8 +56,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1774894144"></script>
-<script src="/js/alerts.js?v=1774894144"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/alerts.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/bands.html

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

templates/base.html

@@ -24,7 +24,7 @@
 
     <title>Spothole</title>
 
-    <link rel="stylesheet" href="/css/style.css" type="text/css">
+    <link rel="stylesheet" href="/css/style.css?v=1776849830" type="text/css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <link href="/fa/css/fontawesome.min.css" rel="stylesheet" />
@@ -46,10 +46,9 @@
             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=1774894144"></script>
-    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1774894144"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1774894144"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1774894144"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1776849830"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1776849830"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1776849830"></script>
 
 </head>
 <body>
@@ -71,7 +70,9 @@
                   {% if allow_spotting %}
                     <li class="nav-item ms-4"><a href="/add-spot" class="nav-link" id="nav-link-add-spot"><i class="fa-solid fa-comment"></i> Add&nbsp;Spot</a></li>
                   {% end %}
+                  {% if has_hamqsl or has_noaa_forecast %}
                     <li class="nav-item ms-4"><a href="/conditions" class="nav-link" id="nav-link-conditions"><i class="fa-solid fa-sun"></i> Conditions</a></li>
+                  {% end %}
                     <li class="nav-item ms-4"><a href="/status" class="nav-link" id="nav-link-status"><i class="fa-solid fa-chart-simple"></i> Status</a></li>
                     <li class="nav-item ms-4"><a href="/about" class="nav-link" id="nav-link-about"><i class="fa-solid fa-circle-info"></i> About</a></li>
                     <li class="nav-item ms-4"><a href="/apidocs" class="nav-link" id="nav-link-api"><i class="fa-solid fa-gear"></i> API</a></li>

templates/cards/audio.html

@@ -0,0 +1,11 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title mb-3">Audio</h5>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="pingOnNewSpots" value="pingOnNewSpots" oninput="saveSettings();">
+              <label class="form-check-label" for="pingOnNewSpots">Ping on new spots</label>
+            </div>
+        </div>
+    </div>
+</div>

templates/cards/bands.html

@@ -1,6 +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 id="band-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/basemap.html

@@ -0,0 +1,27 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Map Style</h5>
+        <p class="card-text spothole-card-text">
+            <label for="basemap" class="form-label">Basemap</label>
+            <select id="basemap" class="storeable-select form-select" oninput="displayUpdated();">
+                <option value="OpenStreetMap.Mapnik" selected>OpenStreetMap Mapnik</option>
+                <option value="OpenStreetMap.Mapnik.Dark">OpenStreetMap Mapnik (Dark)</option>
+                <option value="Esri.NatGeoWorldMap">ESRI NatGeo World Map</option>
+                <option value="Esri.WorldTopoMap">ESRI World Topo Map</option>
+                <option value="Esri.WorldShadedRelief">ESRI World Shaded Relief</option>
+                <option value="Esri.WorldImagery">ESRI World Imagery</option>
+                <option value="CartoDB.Voyager">CartoDB Voyager</option>
+                <option value="CartoDB.DarkMatter">CartoDB DarkMatter</option>
+            </select>
+        </p>
+        <p class="card-text spothole-card-text">
+            <label for="basemapOpacity" class="form-label">Opacity</label>
+            <select id="basemapOpacity" class="storeable-select form-select" oninput="displayUpdated();">
+                <option value="1">100%</option>
+                <option value="0.75">75%</option>
+                <option value="0.5">50%</option>
+                <option value="0.25">25%</option>
+            </select>
+        </p>
+    </div>
+</div>

templates/cards/de-continent.html

@@ -1,6 +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 id="de-continent-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/duration-limit-alerts.html

@@ -2,7 +2,7 @@
     <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/>
+            <label for="max-duration" class="form-label">Hide any alerts lasting more than</label>
             <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>

templates/cards/dx-continent.html

@@ -1,6 +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 id="dx-continent-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/map-features.html

@@ -1,11 +1,41 @@
 <div class="card">
     <div class="card-body">
-        <h5 class="card-title">Map Features</h5>
+        <h5 class="card-title mb-3">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 class="form-group">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="showTerminator" oninput="displayUpdated();" checked>
+                <label class="form-check-label" for="showTerminator">Terminator / Greyline</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="showMaidenheadGrid" oninput="displayUpdated();">
+                <label class="form-check-label" for="showMaidenheadGrid">Maidenhead Grid</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="showCQZones" oninput="displayUpdated();">
+                <label class="form-check-label" for="showCQZones">CQ Zones</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="showITUZones" oninput="displayUpdated();">
+                <label class="form-check-label" for="showITUZones">ITU Zones</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="showWABWAIGrid" oninput="displayUpdated();">
+                <label class="form-check-label" for="showWABWAIGrid">WAB/WAI Grid</label>
+            </div>
+        </div>
     </div>
 </div>

templates/cards/modes.html

@@ -1,6 +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 id="mode-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/number-of-alerts.html

@@ -2,7 +2,7 @@
     <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 id="alerts-to-fetch" class="storeable-select form-select ms-2 me-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 %}

templates/cards/sigs.html

@@ -1,6 +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 id="sig-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/sources.html

@@ -1,6 +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 id="source-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/table-columns-alerts.html

@@ -1,35 +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">
+        <div class="row row-cols-2 g-1">
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+                <label class="form-check-label" for="tableShowFreqsModes">Freq &amp; Mode</label>
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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>
     </div>
 </div>

templates/cards/table-columns-spots.html

@@ -1,47 +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">
+        <div class="row row-cols-2 g-1">
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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">
+            </div></div>
+            <div class="col"><div class="form-check">
                 <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>
     </div>
 </div>

templates/conditions.html

@@ -1,16 +1,15 @@
 {% extends "base.html" %}
 {% block content %}
 
+{% if has_hamqsl %}
 <div class="card mt-5">
     <div class="card-header">
         Propagation Conditions
     </div>
     <div class="card-body">
         <div class="row row-cols-1 row-cols-md-2 g-3">
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <h5 class="card-title">HF</h5>
+            <div class="col mt-3 px-3">
+                <h5>HF</h5>
                 <table class="table table-sm mt-2">
                     <thead>
                     <tr>
@@ -43,12 +42,8 @@
                     </tbody>
                 </table>
             </div>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <h5 class="card-title">VHF</h5>
+            <div class="col mt-3 px-3">
+                <h5>VHF</h5>
                 <table class="table table-sm mt-2">
                     <thead>
                     <tr>
@@ -85,8 +80,6 @@
                 </table>
             </div>
         </div>
-            </div>
-        </div>
         <div class="form-text mt-3">Data from <a href="https://hamqsl.com">HamQSL.com</a>.</div>
     </div>
 </div>
@@ -95,7 +88,7 @@
     <div class="card-header">
         Solar Weather
     </div>
-    <div class="card-body">
+    <div class="card-body px-3">
         <div class="row border-bottom align-items-start me-0">
             <div class="col-12 col-md-2 py-2 fw-bold">Solar Flux</div>
             <div id="sw-solar-flux-vals" class="col-12 col-md-3 py-2">
@@ -118,7 +111,9 @@
         </div>
         <div class="row border-bottom align-items-start me-0">
             <div class="col-12 col-md-2 py-2 fw-bold">X-ray Flux</div>
-            <div id="sw-xray-vals" class="col-12 col-md-3 py-2"><strong id="sw-x-ray"></strong></div>
+            <div id="sw-xray-vals" class="col-12 col-md-3 py-2">
+                <span class="me-3"><strong id="sw-xray"></strong></span>
+                <span class="me-3"><strong>R</strong><strong id="sw-radio-blackout-scale"></strong></span></div>
             <div id="sw-xray-desc" class="col-12 col-md-7 py-2"></div>
         </div>
         <div class="row border-bottom align-items-start me-0">
@@ -137,6 +132,46 @@
         <div class="form-text mt-3">Data from <a href="https://hamqsl.com">HamQSL.com</a>.</div>
     </div>
 </div>
+{% end %}
+
+{% if has_noaa_forecast %}
+<div class="card mt-5">
+    <div class="card-header">
+        Forecast
+    </div>
+    <div class="card-body">
+        <div class="row mb-4">
+            <div class="col px-3">
+                <h5>K-index Forecast</h5>
+                <canvas id="forecast-kp-chart" class="mt-3 mb-3"></canvas>
+            </div>
+        </div>
+        <div class="row row-cols-1 row-cols-md-2 g-3">
+            <div class="col mt-3 px-3">
+                <h5>Solar Storm Forecast</h5>
+                <table id="forecast-solar-storm-table" class="table table-sm mt-2">
+                    <thead>
+                    <tr id="forecast-solar-storm-head"></tr>
+                    </thead>
+                    <tbody id="forecast-solar-storm-tbody"></tbody>
+                </table>
+            </div>
+            <div class="col mt-3 px-3">
+                <h5>Radio Blackout Forecast</h5>
+                <table id="forecast-blackout-table" class="table table-sm mt-2">
+                    <thead>
+                    <tr id="forecast-blackout-head"></tr>
+                    </thead>
+                    <tbody id="forecast-blackout-tbody"></tbody>
+                </table>
+            </div>
+        </div>
+        <div class="form-text mt-3">Data from <a href="https://www.swpc.noaa.gov/">NOAA Space Weather Prediction
+            Center</a>.
+        </div>
+    </div>
+</div>
+{% end %}
 
 <div class="card mt-5">
     <div class="card-header">
@@ -145,7 +180,8 @@
     <div class="card-body">
         <div class="mb-3">
             <label for="dxstats-de-continent" class="form-label">Your continent:</label>
-            <select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2" style="width: auto;" oninput="dxStatsContientChanged();">
+            <select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2"
+                    style="width: auto;" oninput="dxStatsContientChanged();">
                 <option value="EU">Europe</option>
                 <option value="NA">North America</option>
                 <option value="SA">South America</option>
@@ -185,12 +221,19 @@
                 </tbody>
             </table>
         </div>
-        <div class="form-text mt-2">This table shows the number of spots in the past hour received in your continent, where the DX continent and band are as shown in the table. Bands with high numbers of spots are likely to be the best ones for making contact with the continent you want right now. Bear in mind that some bands and some continents are inherently much rarer than others.</div>
+        <div class="form-text mt-2">This table shows the number of spots in the past hour received in your continent,
+            where the DX continent and band are as shown in the table. Bands with high numbers of spots are likely to be
+            the best ones for making contact with the continent you want right now. Bear in mind that some bands and
+            some continents are inherently much rarer than others.
+        </div>
     </div>
 </div>
 
-<script src="/js/common.js?v=1774894144"></script>
-<script src="/js/conditions.js?v=1774894144"></script>
-<script>$(document).ready(function() { $("#nav-link-conditions").addClass("active"); }); <!-- highlight active page in nav --></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/conditions.js?v=1776849830"></script>
+<script>$(document).ready(function () {
+    $("#nav-link-conditions").addClass("active");
+}); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/map.html

@@ -47,6 +47,9 @@
                     <div class="col">
                         {% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
                     </div>
+                    <div class="col">
+                        {% module Template("cards/basemap.html", web_ui_options=web_ui_options) %}
+                    </div>
                     <div class="col">
                         {% module Template("cards/map-features.html", web_ui_options=web_ui_options) %}
                     </div>
@@ -65,14 +68,20 @@
 <script src="https://cdn.jsdelivr.net/npm/leaflet-providers@2.0.0/leaflet-providers.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/src/assets/js/leaflet.extra-markers.min.js" type="module"></script>
 <script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
+<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/text-image/dist/text-image.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
+<script src="https://ianrenton.github.io/Leaflet.Maidenhead/src/L.Maidenhead.js"></script>
+<script src="https://ha8tks.github.io/Leaflet.ITUzones/src/L.ITUzones.js"></script>
+<script src="https://ha8tks.github.io/Leaflet.CQzones/src/L.CQzones.js"></script>
+<script src="https://misc.ianrenton.com/Leaflet.WorkedAllBritainIreland/L.WorkedAllBritainIreland.js"></script>
 
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1774894144"></script>
-<script src="/js/spotsbandsandmap.js?v=1774894144"></script>
-<script src="/js/map.js?v=1774894144"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/spotsbandsandmap.js?v=1776849830"></script>
+<script src="/js/map.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/spots.html

@@ -74,6 +74,9 @@
                 <div class="col">
                     {% module Template("cards/table-columns-spots.html", web_ui_options=web_ui_options) %}
                 </div>
+                <div class="col">
+                    {% module Template("cards/audio.html", web_ui_options=web_ui_options) %}
+                </div>
             </div>
         </div>
     </div>
@@ -87,9 +90,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1774894144"></script>
-<script src="/js/spotsbandsandmap.js?v=1774894144"></script>
-<script src="/js/spots.js?v=1774894144"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/spotsbandsandmap.js?v=1776849830"></script>
+<script src="/js/spots.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/status.html

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

templates/widgets/band-color-scheme.html

@@ -1,4 +1,4 @@
-<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
+<label class="form-check-label form-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>

templates/widgets/color-scheme.html

@@ -1,4 +1,4 @@
-<label class="form-check-label" for="color-scheme">UI color scheme</label>
+<label class="form-check-label form-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>

webassets/apidocs/openapi.yml

@@ -294,7 +294,7 @@ paths:
           description: Limit the alerts to only ones that the system found out about at this time or later. Time in UTC seconds since UNIX epoch. If you are using a front-end that tracks the last time it queried the API and requests alerts since then, you want *this* version of the query parameter, not "since", because otherwise it may miss things. The logic is "greater than" rather than "greater than or equal to", so you can submit the time of the last received item back to this call and you will get all the more recent alerts back, without duplicating the previous latest spot.
           required: false
           schema:
-            type: integer
+            type: number
         - name: max_duration
           in: query
           description: Limit the alerts to only ones with a duration of this many seconds or less. Duration is end time minus start time, if end time is set, otherwise the activation is assumed to be short and therefore to always pass this check. This is useful to filter out people who alert POTA activations lasting months or even years, but note it will also include multi-day or multi-week DXpeditions that you might otherwise be interested in. See the dxpeditions_skip_max_duration_check parameter for the workaround.
@@ -1415,7 +1415,7 @@ components:
           type: integer
           description: 3-hour geomagnetic activity index, 0–9
           example: 2
-        x_ray:
+        xray:
           type: string
           description: Current X-ray flux class
           example: "B2.3"
@@ -1507,10 +1507,73 @@ components:
               type: string
               description: Sporadic-E propagation condition on 2m for North America
               example: "Band Closed"
-        blackout_desc:
+        k_index_forecast:
+          type: object
+          description: >
+            NOAA Kp index 3-day forecast. Keys are UNIX timestamps (UTC seconds since epoch) for the
+            start of each 3-hour period. Values are the forecast Kp index (0–9) for that period.
+            Only forecast values are included; observed actuals (shown in parentheses in the source
+            data) are discarded.
+          additionalProperties:
+            type: number
+            minimum: 0
+            maximum: 9
+          example:
+            "1743638400.0": 4.0
+            "1743649200.0": 5.67
+            "1743660000.0": 3.67
+        solar_storm_forecast:
+          type: object
+          description: >
+            NOAA Solar Radiation Storm forecast — probability (%) of S1 or greater events per day.
+            Keys are UNIX timestamps (UTC seconds since epoch) for the start of each forecast day.
+            Values are integer percentages (0–100).
+          additionalProperties:
+            type: integer
+            minimum: 0
+            maximum: 100
+          example:
+            "1743638400.0": 50
+            "1743724800.0": 50
+            "1743811200.0": 25
+        blackout_forecast_r1r2:
+          type: object
+          description: >
+            NOAA Radio Blackout forecast — probability (%) of R1–R2 (Minor–Moderate) blackout events
+            per day. Keys are UNIX timestamps (UTC seconds since epoch) for the start of each
+            forecast day. Values are integer percentages (0–100).
+          additionalProperties:
+            type: integer
+            minimum: 0
+            maximum: 100
+          example:
+            "1743638400.0": 55
+            "1743724800.0": 55
+            "1743811200.0": 55
+        blackout_forecast_r3_or_greater:
+          type: object
+          description: >
+            NOAA Radio Blackout forecast — probability (%) of R3 or greater (Strong–Extreme) blackout
+            events per day. Keys are UNIX timestamps (UTC seconds since epoch) for the start of each
+            forecast day. Values are integer percentages (0–100).
+          additionalProperties:
+            type: integer
+            minimum: 0
+            maximum: 100
+          example:
+            "1743638400.0": 25
+            "1743724800.0": 25
+            "1743811200.0": 25
+        xray_desc:
           type: string
           description: HF radio blackout risk description, derived from the X-ray flux class.
           example: "No significant radio blackout"
+        radio_blackout_scale:
+          type: integer
+          description: HF radio blackout scale number (R0-R5), derived from the X-ray flux class.
+          minimum: 0
+          maximum: 5
+          example: 0
         proton_flux_desc:
           type: string
           description: Solar radiation storm level description, derived from proton flux.

webassets/css/style.css

@@ -100,11 +100,6 @@ div.appearing-panel {
     display: none;
 }
 
-.spothole-card-text {
-    line-height: 2.5em !important;
-}
-
-
 
 /* SPOTS/ALERTS PAGES, MAIN TABLE */
 
@@ -219,10 +214,8 @@ div#map {
 .leaflet-container {
     font-family: var(--bs-body-font-family) !important;
 }
-
-[data-bs-theme=dark] .leaflet-layer,
-[data-bs-theme=dark] .leaflet-control-attribution {
-  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
+.leaflet-control-attribution {
+    background: none;
 }
 
 /* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */

webassets/js/common.js

@@ -2,6 +2,39 @@
 var options = {};
 // Last time we updated the spots/alerts list on display.
 var lastUpdateTime;
+// Normally load user settings from local storage, unless embedded mode is in use
+let useLocalStorage = true;
+
+// Save settings to local storage. Suppressed if "use local storage" is false.
+function saveSettings() {
+    if (useLocalStorage) {
+        // Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
+        // property. For a checkbox, that's the "checked" property.
+        $(".storeable-checkbox").each(function() {
+            localStorage.setItem("#" + $(this)[0].id + ":checked", JSON.stringify($(this)[0].checked));
+        });
+        $(".storeable-select").each(function() {
+            localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
+        });
+        $(".storeable-text").each(function() {
+            localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
+        });
+    }
+}
+
+// Load settings from local storage and set up the filter selectors. Suppressed if "use local storage" is false.
+function loadSettings() {
+    if (useLocalStorage) {
+        // Find all local storage entries and push their data to the corresponding UI element
+        Object.keys(localStorage).forEach(function(key) {
+            if (key.startsWith("#") && key.includes(":")) {
+                // Split the key back into an element ID and a property
+                var split = key.split(":");
+                $(split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
+            }
+        });
+    }
+}
 
 // Load and apply any URL params. This is used for "embedded mode" where another site can embed a version of
 // Spothole and provide its own interface options rather than using the user's saved ones. These may select things
@@ -92,14 +125,14 @@ function allFilterOptionsSelected(parameter) {
 }
 
 
-// Generate a filter card with multiple toggle buttons plus All/None buttons.
+// Generate a filter card with inline checkboxes plus All/None links.
 function generateMultiToggleFilterCard(elementID, filterQuery, options) {
-    // Create a button for each option
+    var $row = $('<div>');
     options.forEach(o => {
-        $(elementID).append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" for="filter-button-${filterQuery}-${o}">${o}</label> `);
+        $row.append(`<div class="form-check form-check-inline"><input type="checkbox" class="form-check-input filter-button-${filterQuery} storeable-checkbox" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" for="filter-button-${filterQuery}-${o}">${o}</label></div>`);
     });
-    // Create All/None buttons
-    $(elementID).append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
+    $(elementID).append($row);
+    $(elementID).append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('${filterQuery}', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('${filterQuery}', false); return false;">None</a></div>`);
 }
 
 // Method called when "All" or "None" is clicked

webassets/js/conditions.js

@@ -1,17 +1,19 @@
 // Cache for the full dxstats API response, so we can reload on the fly if the user changes the value of their continent
 // in the select box
 let dxStatsData = null;
+// Forecast chart
+let kpChart = null;
 
 // Load solar conditions
 function loadSolarConditions() {
-    $.getJSON('/api/v1/solar', function(jsonData) {
+    $.getJSON('/api/v1/solar', function (jsonData) {
 
         // HF
 
-        const hfConditionClass = { 'Good': 'bg-success-subtle', 'Fair': 'bg-warning-subtle', 'Poor': 'bg-danger-subtle' };
+        const hfConditionClass = {'Good': 'bg-success-subtle', 'Fair': 'bg-warning-subtle', 'Poor': 'bg-danger-subtle'};
 
         if (jsonData.hf_conditions) {
-            Object.entries(jsonData.hf_conditions).forEach(function([key, condition]) {
+            Object.entries(jsonData.hf_conditions).forEach(function ([key, condition]) {
                 const cell = $('#hf-conditions-' + key);
                 cell.text(condition);
                 cell.addClass(hfConditionClass[condition]);
@@ -21,7 +23,7 @@ function loadSolarConditions() {
         // VHF
 
         if (jsonData.vhf_conditions) {
-            Object.entries(jsonData.vhf_conditions).forEach(function([key, condition]) {
+            Object.entries(jsonData.vhf_conditions).forEach(function ([key, condition]) {
                 const cell = $('#vhf-conditions-' + key);
                 cell.text(condition);
                 let vhfClass;
@@ -51,15 +53,16 @@ function loadSolarConditions() {
             'geomag_storm_scale': 'sw-geomag-storm-scale',
             'geomag_storm_desc': 'sw-geomag-storm-desc',
             'geomag_noise': 'sw-geomag-noise',
-            'x_ray':                'sw-x-ray',
-            'blackout_desc':        'sw-xray-desc',
+            'xray': 'sw-xray',
+            'radio_blackout_scale': 'sw-radio-blackout-scale',
+            'xray_desc': 'sw-xray-desc',
             'proton_flux': 'sw-proton-flux',
             'solar_storm_scale': 'sw-solar-storm-scale',
             'proton_flux_desc': 'sw-proton-desc',
             'electron_flux': 'sw-electron-flux',
             'electron_flux_desc': 'sw-electron-desc',
         };
-        Object.entries(swFields).forEach(function([field, id]) {
+        Object.entries(swFields).forEach(function ([field, id]) {
             const val = jsonData[field];
             if (val !== null && val !== undefined) {
                 $('#' + id).text(val);
@@ -76,16 +79,16 @@ function loadSolarConditions() {
         const sfi = jsonData.sfi;
         if (sfi !== null && sfi !== undefined) {
             applySwClass('sw-solar-flux-vals', 'sw-solar-flux-desc',
-                sfi > 150 ? 'bg-success-subtle' : sfi > 90 ? 'bg-warning-subtle' : 'bg-danger-subtle');
+                sfi > 120 ? 'bg-success-subtle' : sfi > 90 ? 'bg-warning-subtle' : 'bg-danger-subtle');
         }
 
         const kIndex = jsonData.k_index;
         if (kIndex !== null && kIndex !== undefined) {
             applySwClass('sw-geomag-vals', 'sw-geomag-desc',
-                kIndex < 5 ? 'bg-success-subtle' : kIndex < 7 ? 'bg-warning-subtle' : 'bg-danger-subtle');
+                kIndex < 5 ? 'bg-success-subtle' : kIndex < 6 ? 'bg-warning-subtle' : 'bg-danger-subtle');
         }
 
-        const xRay = jsonData.x_ray;
+        const xRay = jsonData.xray;
         if (xRay) {
             const letter = xRay[0].toUpperCase();
             const xRayClass = (letter === 'X') ? 'bg-danger-subtle'
@@ -105,30 +108,273 @@ function loadSolarConditions() {
             applySwClass('sw-electron-vals', 'sw-electron-desc',
                 electronFlux <= 100 ? 'bg-success-subtle' : electronFlux <= 1000 ? 'bg-warning-subtle' : 'bg-danger-subtle');
         }
+
+        // Forecast
+
+        renderKIndexForecast(jsonData.k_index_forecast);
+        renderSolarStormForecast(jsonData.solar_storm_forecast);
+        renderBlackoutForecast(jsonData.blackout_forecast_r1r2, jsonData.blackout_forecast_r3_or_greater);
     });
 }
 
+// Render the K-index forecast as a Chart.js bar chart, one bar per 3-hour UTC period
+function renderKIndexForecast(data) {
+    if (!data) return;
+
+    const entries = Object.entries(data)
+        .map(([tsStr, kp]) => ({ts: parseFloat(tsStr), kp}))
+        .sort((a, b) => a.ts - b.ts);
+    if (entries.length === 0) return;
+
+    // Use a simple integer index axis: ticks at 0, 1, 2, ..., N (period boundaries) and bars
+    // centred at 0.5, 1.5, ..., N-0.5 (midpoints). This guarantees tick marks fall exactly on
+    // bar edges regardless of how Chart.js rounds large timestamp values.
+    // "axisMin = 0" is the left/top edge of bar 0; "axisMax = N" is the right/bottom edge of bar N-1.
+    const N = entries.length;
+    const periodSecs = 3 * 3600;
+
+    // Inherit colours from Bootstrap CSS variables so that dark mode inherently works. We want bar colours that are not
+    // quite as saturated as the Bootstrap success/warning/danger colours but not as desaturated as the "subtle"
+    // versions, so use tinycolor to apply some transparency.
+    const style = getComputedStyle(document.documentElement);
+    const withAlpha = hex => tinycolor(hex).setAlpha(0.8).toRgbString();
+    const colors = entries.map(e =>
+        e.kp < 4.5 ? withAlpha(style.getPropertyValue('--bs-success').trim())
+            : e.kp < 5.5 ? withAlpha(style.getPropertyValue('--bs-warning').trim())
+                : withAlpha(style.getPropertyValue('--bs-danger').trim())
+    );
+    const textColor = style.getPropertyValue('--bs-body-color').trim() || '#666';
+    const gridColor = style.getPropertyValue('--bs-border-color').trim() || 'rgba(128,128,128,0.3)';
+
+    if (kpChart) {
+        kpChart.destroy();
+    }
+
+    const isMobile = window.innerWidth < 768;
+    const kpAxisTicks = {
+        stepSize: 1,
+        color: textColor,
+        // Include geomagnetic storm levels (Gx) alongside the Kp index
+        callback: v => v > 4 ? `(G${v - 4}) ${v}` : String(v),
+    };
+    const kpAxis = {
+        min: 0,
+        max: 9,
+        title: {display: true, text: 'Kp', color: textColor},
+        ticks: kpAxisTicks,
+        grid: {color: gridColor},
+    };
+    // Linear scale using integer indices. Ticks at 0..N (period boundary indices);
+    // the callback converts each integer index back to a UTC time string.
+    // On mobile the time axis is vertical, so reverse it to keep time running top-to-bottom.
+    const timeAxis = {
+        type: 'linear',
+        min: 0,
+        max: N,
+        offset: false,
+        reverse: isMobile,
+        title: {display: true, text: 'Time (UTC)', color: textColor},
+        ticks: {
+            stepSize: 1,
+            color: textColor,
+            maxRotation: 45,
+            minRotation: 0,
+            callback(value) {
+                if (!Number.isInteger(value) || value < 0 || value > N) return null;
+                const ts = value < N ? entries[value].ts : entries[N - 1].ts + periodSecs;
+                const dt = new Date(ts * 1000);
+                const h = dt.getUTCHours(), m = dt.getUTCMinutes();
+                const timeStr = String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
+                if (h === 0 && m === 0) {
+                    return [timeStr, dt.toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'})];
+                }
+                return timeStr;
+            },
+        },
+        grid: {color: gridColor, offset: false},
+    };
+
+    // Draw a "now" line at the current time position
+    const nowLinePlugin = {
+        id: 'nowLine',
+        afterDraw(chart) {
+            const nowTs = Date.now() / 1000;
+            // Find which bar (if any) the current time falls in and compute a fractional index
+            const firstTs = entries[0].ts;
+            const lastTs = entries[N - 1].ts + periodSecs;
+            if (nowTs < firstTs || nowTs > lastTs) return;
+            const fracIndex = (nowTs - firstTs) / periodSecs;
+
+            const {ctx, chartArea} = chart;
+            const scale = isMobile ? chart.scales.y : chart.scales.x;
+            const pos = scale.getPixelForValue(fracIndex);
+
+            ctx.save();
+            ctx.strokeStyle = textColor;
+            ctx.lineWidth = 2;
+            ctx.setLineDash([5, 4]);
+            ctx.beginPath();
+            if (isMobile) {
+                ctx.moveTo(chartArea.left, pos);
+                ctx.lineTo(chartArea.right, pos);
+            } else {
+                ctx.moveTo(pos, chartArea.top);
+                ctx.lineTo(pos, chartArea.bottom);
+            }
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.fillStyle = textColor;
+            ctx.font = '11px sans-serif';
+            if (isMobile) {
+                ctx.textAlign = 'right';
+                ctx.textBaseline = 'bottom';
+                ctx.fillText('Now', chartArea.right, pos - 3);
+            } else {
+                ctx.textAlign = 'left';
+                ctx.textBaseline = 'top';
+                ctx.fillText('  Now', pos, chartArea.top + 3);
+            }
+            ctx.restore();
+        }
+    };
+
+    // Bars centred at i+0.5 (midpoint between tick i and tick i+1) so each bar spans
+    // exactly from tick i to tick i+1 with barPercentage/categoryPercentage = 1.0.
+    const chartData = isMobile
+        ? entries.map((e, i) => ({x: e.kp, y: i + 0.5}))
+        : entries.map((e, i) => ({x: i + 0.5, y: e.kp}));
+
+    kpChart = new Chart(document.getElementById('forecast-kp-chart'), {
+        type: 'bar',
+        data: {
+            datasets: [{
+                data: chartData,
+                backgroundColor: colors,
+                hoverBackgroundColor: colors,
+                borderWidth: 0,
+                barPercentage: 1.0,
+                categoryPercentage: 1.0,
+            }]
+        },
+        options: {
+            responsive: true,
+            // Swap axes on mobile, and change the aspect ratio
+            aspectRatio: isMobile ? 0.4 : 3,
+            indexAxis: isMobile ? 'y' : 'x',
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    enabled: false
+                }
+            },
+            scales: {
+                x: isMobile ? kpAxis : timeAxis,
+                y: isMobile ? timeAxis : kpAxis,
+            }
+        },
+        plugins: [nowLinePlugin],
+    });
+}
+
+// Render the solar storm forecast table
+function renderSolarStormForecast(data) {
+    if (!data) return;
+
+    const entries = Object.entries(data)
+        .map(([tsStr, pct]) => ({ts: parseFloat(tsStr), pct}))
+        .sort((a, b) => a.ts - b.ts);
+
+    // Header
+    const headRow = $('#forecast-solar-storm-head').empty().append('<th></th>');
+    entries.forEach(({ts}) => {
+        const label = new Date(ts * 1000)
+            .toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'});
+        headRow.append(`<th>${label}</th>`);
+    });
+
+    // Single data row: "S1 or greater" label + one cell per date
+    const tr = $('<tr>').append('<td>S1 or greater</td>');
+    entries.forEach(({pct}) => {
+        const td = $('<td>').text(pct + '%');
+        td.addClass(pct < 50 ? 'bg-success-subtle' : pct < 75 ? 'bg-warning-subtle' : 'bg-danger-subtle');
+        tr.append(td);
+    });
+    $('#forecast-solar-storm-tbody').empty().append(tr);
+}
+
+// Render the radio blackout forecast table
+function renderBlackoutForecast(r1r2Data, r3Data) {
+    if (!r1r2Data && !r3Data) return;
+
+    const tsSet = new Set([
+        ...Object.keys(r1r2Data || {}),
+        ...Object.keys(r3Data || {})
+    ]);
+    const entries = [...tsSet]
+        .map(tsStr => ({
+            ts: parseFloat(tsStr),
+            r1r2: r1r2Data ? r1r2Data[tsStr] : undefined,
+            r3: r3Data ? r3Data[tsStr] : undefined
+        }))
+        .sort((a, b) => a.ts - b.ts);
+
+    // Header
+    const headRow = $('#forecast-blackout-head').empty().append('<th></th>');
+    entries.forEach(({ts}) => {
+        const label = new Date(ts * 1000)
+            .toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'});
+        headRow.append(`<th>${label}</th>`);
+    });
+
+    // Two data rows: R1-R2 and R3+
+    function makeRow(rowLabel, getValue) {
+        const tr = $('<tr>').append(`<td>${rowLabel}</td>`);
+        entries.forEach(entry => {
+            const pct = getValue(entry);
+            const td = $('<td>');
+            if (pct !== undefined) {
+                td.text(pct + '%');
+                td.addClass(pct < 50 ? 'bg-success-subtle' : pct < 75 ? 'bg-warning-subtle' : 'bg-danger-subtle');
+            }
+            tr.append(td);
+        });
+        return tr;
+    }
+
+    $('#forecast-blackout-tbody').empty()
+        .append(makeRow('R1-R2', e => e.r1r2))
+        .append(makeRow('R3 or greater', e => e.r3));
+}
+
 // Render the DX stats table for the currently selected DE continent
 function renderDxStats() {
-    if (!dxStatsData) { return; }
+    if (!dxStatsData) {
+        return;
+    }
     const deContinent = $('#dxstats-de-continent').val();
     const deData = dxStatsData[deContinent];
-    if (!deData) { return; }
+    if (!deData) {
+        return;
+    }
 
     const cells = [];
-    Object.entries(deData).forEach(function([dxContinent, bands]) {
-        Object.entries(bands).forEach(function([band, count]) {
+    Object.entries(deData).forEach(function ([dxContinent, bands]) {
+        Object.entries(bands).forEach(function ([band, count]) {
             const cell = $('#dxstats-' + dxContinent + '-' + band);
             cell.text(count);
-            cells.push({ cell, count });
+            cells.push({cell, count});
         });
     });
 
-    const counts = cells.map(function(c) { return c.count; });
+    const counts = cells.map(function (c) {
+        return c.count;
+    });
     const min = Math.min(...counts);
     const max = Math.max(...counts);
     const range = max - min;
-    cells.forEach(function({ cell, count }) {
+    cells.forEach(function ({cell, count}) {
         const t = range > 0 ? (count - min) / range : 0;
         const cls = t === 0 ? 'bg-danger-subtle' : t < 0.05 ? 'bg-warning-subtle' : 'bg-success-subtle';
         cell.removeClass('bg-danger-subtle bg-warning-subtle bg-success-subtle').addClass(cls);
@@ -143,14 +389,14 @@ function dxStatsContientChanged() {
 
 // Fetch DX stats from the API and render
 function loadDxStats() {
-    $.getJSON('/api/v1/dxstats', function(jsonData) {
+    $.getJSON('/api/v1/dxstats', function (jsonData) {
         dxStatsData = jsonData;
         renderDxStats();
     });
 }
 
 // Startup
-$(document).ready(function() {
+$(document).ready(function () {
     loadSettings();
     loadSolarConditions();
     loadDxStats();

webassets/js/map.js

@@ -1,10 +1,29 @@
 // How often to query the server?
 const REFRESH_INTERVAL_SEC = 60;
 
+// Colours
+const MAIDENHEAD_GRID_COLOR_LIGHT = 'rgba(200, 140, 140, 1.0)';
+const CQ_ZONES_COLOR_LIGHT = 'rgba(140, 200, 140, 1.0)';
+const ITU_ZONES_COLOR_LIGHT = 'rgba(200, 200, 140, 1.0)';
+const WAB_WAI_GRID_COLOR_LIGHT = 'rgba(140, 140, 200, 1.0)';
+const MAIDENHEAD_GRID_COLOR_DARK = 'rgba(120, 60, 60, 1.0)';
+const CQ_ZONES_COLOR_DARK = 'rgba(60, 120, 60, 1.0)';
+const ITU_ZONES_COLOR_DARK = 'rgba(120, 120, 60, 1.0)';
+const WAB_WAI_GRID_COLOR_DARK = 'rgba(60, 60, 120, 1.0)';
+
 // Map layers
+var backgroundTileLayer;
 var markersLayer;
 var geodesicsLayer;
 var terminator;
+var maidenheadGrid;
+var cqZones;
+var ituZones;
+var wabwaiGrid;
+// Tracks the currently-loaded basemap provider string to avoid unnecessary tile reloads
+var loadedBasemap;
+// Tracks whether this is the first display of markers after page load
+var firstLoad = true;
 
 // Load spots and populate the map.
 function loadSpots() {
@@ -13,7 +32,9 @@ function loadSpots() {
         spots = jsonData;
         // Update map
         updateMap();
+        if ($("#showTerminator")[0].checked) {
             terminator.setTime();
+        }
     });
 }
 
@@ -57,6 +78,15 @@ function updateMap() {
             }
         }
     });
+
+    // On first load, zoom to the extent of the markers
+    if (firstLoad) {
+        if (markersLayer.getLayers().length >= 2) {
+            var group = new L.featureGroup(markersLayer.getLayers());
+            map.fitBounds(group.getBounds().pad(0.1));
+        }
+        firstLoad = false;
+    }
 }
 
 // Get an icon for a spot, based on its band, using PSK Reporter colours, its program etc.
@@ -180,10 +210,27 @@ function loadOptions() {
         // 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.
         loadURLParams();
+        loadMapURLParams();
 
         // Load settings from settings storage now all the controls are available
         loadSettings();
 
+        // If no basemap has been explicitly saved and the UI is in dark mode, default to dark Mapnik
+        if (localStorage.getItem("#basemap:value") === null) {
+            if (document.documentElement.getAttribute("data-bs-theme") === "dark") {
+                $("#basemap").val("OpenStreetMap.Mapnik.Dark");
+            }
+        }
+
+        // Apply basemap and overlay settings now that controls have their saved values
+        setBasemap($("#basemap").val());
+        setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
+        enableTerminator($("#showTerminator")[0].checked);
+        enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
+        enableCQZones($("#showCQZones")[0].checked);
+        enableITUZones($("#showITUZones")[0].checked);
+        enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
+
         // Load spots and set up the timer
         loadSpots();
         setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000);
@@ -193,9 +240,150 @@ function loadOptions() {
 // Method called when any display property is changed to reload the map and persist the display settings.
 function displayUpdated() {
     updateMap();
+    setBasemap($("#basemap").val());
+    setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
+    enableTerminator($("#showTerminator")[0].checked);
+    enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
+    enableCQZones($("#showCQZones")[0].checked);
+    enableITUZones($("#showITUZones")[0].checked);
+    enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
     saveSettings();
 }
 
+// Set the basemap
+function setBasemap(basemapname) {
+    // Only change if we have to, to avoid a flash of reloading content
+    if (loadedBasemap !== basemapname) {
+        loadedBasemap = basemapname;
+        if (typeof backgroundTileLayer !== 'undefined') {
+            map.removeLayer(backgroundTileLayer);
+        }
+        // OpenStreetMap.Mapnik.Dark is a synthetic variant that uses Mapnik tiles with a CSS filter applied
+        const providerName = basemapname === "OpenStreetMap.Mapnik.Dark" ? "OpenStreetMap.Mapnik" : basemapname;
+        backgroundTileLayer = L.tileLayer.provider(providerName, {
+            opacity: parseFloat($("#basemapOpacity").val()),
+            edgeBufferTiles: 1
+        });
+        backgroundTileLayer.addTo(map);
+        backgroundTileLayer.bringToBack();
+        if (basemapname === "OpenStreetMap.Mapnik.Dark") {
+            var container = backgroundTileLayer.getContainer();
+            if (container) {
+                container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
+            }
+        }
+
+        // Identify dark basemaps to ensure we use white text for unselected icons
+        // and change the background colour appropriately
+        const basemapIsDark = basemapname === "CartoDB.DarkMatter" || basemapname === "Esri.WorldImagery" || basemapname === "OpenStreetMap.Mapnik.Dark";
+        $("#map").css('background-color', basemapIsDark ? "black" : "white");
+
+        // Change the colour of the grid and zone overlays to match
+        if (basemapIsDark) {
+            maidenheadGrid.options.color = MAIDENHEAD_GRID_COLOR_DARK;
+            cqZones.options.color = CQ_ZONES_COLOR_DARK;
+            ituZones.options.color = ITU_ZONES_COLOR_DARK;
+            wabwaiGrid.options.color = WAB_WAI_GRID_COLOR_DARK;
+        } else {
+            maidenheadGrid.options.color = MAIDENHEAD_GRID_COLOR_LIGHT;
+            cqZones.options.color = CQ_ZONES_COLOR_LIGHT;
+            ituZones.options.color = ITU_ZONES_COLOR_LIGHT;
+            wabwaiGrid.options.color = WAB_WAI_GRID_COLOR_LIGHT;
+        }
+
+        // Force regenerate overlays in the new colours
+        map.removeLayer(maidenheadGrid);
+        map.removeLayer(cqZones);
+        map.removeLayer(ituZones);
+        map.removeLayer(wabwaiGrid);
+        enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
+        enableCQZones($("#showCQZones")[0].checked);
+        enableITUZones($("#showITUZones")[0].checked);
+        enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
+    }
+}
+
+// Set the basemap opacity
+function setBasemapOpacity(opacity) {
+    if (typeof backgroundTileLayer !== 'undefined') {
+        backgroundTileLayer.setOpacity(opacity);
+    }
+}
+
+// Shows/hides the terminator/greyline overlay
+function enableTerminator(show) {
+    if (show) {
+        terminator.setTime();
+        terminator.addTo(map);
+    } else {
+        map.removeLayer(terminator);
+    }
+}
+
+// Shows/hides the Maidenhead grid overlay
+function enableMaidenheadGrid(show) {
+    if (show) {
+        maidenheadGrid.addTo(map);
+        backgroundTileLayer.bringToBack();
+    } else {
+        map.removeLayer(maidenheadGrid);
+    }
+}
+
+// Shows/hides the CQ zone overlay
+function enableCQZones(show) {
+    if (show) {
+        cqZones.addTo(map);
+        backgroundTileLayer.bringToBack();
+    } else {
+        map.removeLayer(cqZones);
+    }
+}
+
+// Shows/hides the ITU zone overlay
+function enableITUZones(show) {
+    if (show) {
+        ituZones.addTo(map);
+        backgroundTileLayer.bringToBack();
+    } else {
+        map.removeLayer(ituZones);
+    }
+}
+
+// Shows/hides the WAB/WAI grid overlay
+function enableWABWAIGrid(show) {
+    if (show) {
+        wabwaiGrid.addTo(map);
+        backgroundTileLayer.bringToBack();
+    } else {
+        map.removeLayer(wabwaiGrid);
+    }
+}
+
+// Load map-specific URL parameters for center position and zoom level.
+// These set Leaflet state directly rather than form controls, so they live here rather than in loadURLParams().
+// If any parameter is applied, firstLoad is set to false so updateMap() does not override the position.
+function loadMapURLParams() {
+    let params = new URLSearchParams(document.location.search);
+    let lat = parseFloat(params.get("map-center-lat"));
+    let lon = parseFloat(params.get("map-center-lon"));
+    let zoom = parseFloat(params.get("map-zoom"));
+
+    let hasLatLon = !isNaN(lat) && !isNaN(lon);
+    let hasZoom = !isNaN(zoom);
+
+    if (hasLatLon || hasZoom) {
+        if (hasLatLon && hasZoom) {
+            map.setView([lat, lon], zoom);
+        } else if (hasLatLon) {
+            map.setView([lat, lon], map.getZoom());
+        } else {
+            map.setZoom(zoom);
+        }
+        firstLoad = false;
+    }
+}
+
 // Set up the map
 function setUpMap() {
     // Create map
@@ -206,12 +394,20 @@ function setUpMap() {
     });
 
     // Add basemap
-    backgroundTileLayer = L.tileLayer.provider("OpenStreetMap.Mapnik", {
-        opacity: 1,
+    loadedBasemap = $("#basemap").val();
+    const initialProviderName = loadedBasemap === "OpenStreetMap.Mapnik.Dark" ? "OpenStreetMap.Mapnik" : loadedBasemap;
+    backgroundTileLayer = L.tileLayer.provider(initialProviderName, {
+        opacity: parseFloat($("#basemapOpacity").val()),
         edgeBufferTiles: 1
     });
     backgroundTileLayer.addTo(map);
     backgroundTileLayer.bringToBack();
+    if (loadedBasemap === "OpenStreetMap.Mapnik.Dark") {
+        var container = backgroundTileLayer.getContainer();
+        if (container) {
+            container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
+        }
+    }
 
     // Add marker layer
     markersLayer = new L.LayerGroup();
@@ -221,14 +417,53 @@ function setUpMap() {
     geodesicsLayer = new L.LayerGroup();
     geodesicsLayer.addTo(map);
 
-    // Add terminator/greyline
+    // Add terminator/greyline (toggleable)
     terminator = L.terminator({
         interactive: false
     });
     terminator.setStyle({fillColor: '#00000050'});
+    if ($("#showTerminator")[0].checked) {
         terminator.addTo(map);
+    }
 
-    // Display a default view.
+    // Add Maidenhead grid (toggleable)
+    maidenheadGrid = L.maidenhead({
+        color : MAIDENHEAD_GRID_COLOR_LIGHT
+    });
+    if ($("#showMaidenheadGrid")[0].checked) {
+        maidenheadGrid.addTo(map);
+        backgroundTileLayer.bringToBack();
+    }
+
+    // Add CQ zone layer (toggleable)
+    cqZones = L.cqzones({
+        color : CQ_ZONES_COLOR_LIGHT
+    });
+    if ($("#showCQZones")[0].checked) {
+        cqZones.addTo(map);
+        backgroundTileLayer.bringToBack();
+    }
+
+    // Add ITU zone layer (toggleable)
+    ituZones = L.ituzones({
+        color : ITU_ZONES_COLOR_LIGHT
+    });
+    if ($("#showITUZones")[0].checked) {
+        ituZones.addTo(map);
+        backgroundTileLayer.bringToBack();
+    }
+
+    // Add WAB/WAI grid layer (toggleable)
+    wabwaiGrid = L.workedAllBritainIreland({
+        color : WAB_WAI_GRID_COLOR_LIGHT
+    });
+    if ($("#showWABWAIGrid")[0].checked) {
+        wabwaiGrid.addTo(map);
+        backgroundTileLayer.bringToBack();
+    }
+
+    // Display a default view. This will only last until the spots are first loaded, at which point the map will zoom
+    // to the extent of ths spots.
     map.setView([30, 0], 3);
 }
 

webassets/js/spots.js

@@ -61,6 +61,11 @@ function startSSEConnection() {
 
         // Add the new spot to table
         addSpotToTopOfTable(newSpot, true);
+
+        // Ping if we need to
+        if ($("#pingOnNewSpots")[0].checked) {
+            new Audio("/audio/ping.mp3").play();
+        }
     };
 
     evtSource.onerror = function(err) {

webassets/js/spotsbandsandmap.js

@@ -6,27 +6,26 @@ var spots = []
 // to localStorage.
 let worked = []
 
-// Dynamically add CSS code for the band toggle buttons to be in the appropriate colour.
+// Dynamically add CSS code for the band checkboxes to show in the appropriate colour.
 // Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
 function addBandToggleColourCSS(band_options) {
     var $style = $('<style>');
     band_options.forEach(o => {
         var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $style.append(`#filter-button-label-band-${domSafeName} { border-color: ${bandToColor(o['name'])}; color: var(--bs-secondary);}`);
-        $style.append(`.btn-check:checked + #filter-button-label-band-${domSafeName} { background-color: ${bandToColor(o['name'])}; color: ${bandToContrastColor(o['name'])};}`);
+        $style.append(`#filter-button-label-band-${domSafeName} { padding-left: 0.3em; border-left: 5px solid ${bandToColor(o['name'])};}`);
     });
     $('html > head').append($style);
 }
 
 // Generate bands filter card. This one is a special case.
 function generateBandsMultiToggleFilterCard(band_options) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-1 mb-1">');
     band_options.forEach(o => {
         var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#band-options").append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-secondary" id="filter-button-label-band-${domSafeName}" for="filter-button-band-${domSafeName}">${o['name']}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-band storeable-checkbox" id="filter-button-band-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked> <label class="form-check-label" id="filter-button-label-band-${domSafeName}" for="filter-button-band-${domSafeName}">${o['name']}</label></div></div>`);
     });
-    // Create All/None/Ham HF buttons
-    $("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="setHamHFBandToggles();">Ham HF</button></span>`);
+    $("#band-options").append($grid);
+    $("#band-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('band', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('band', false); return false;">None</a> &nbsp; <a href="#" onclick="setHamHFBandToggles(); return false;">Ham HF only</a></div>`);
 }
 
 // Set the band toggles so that only the amateur radio HF bands are selected. This includes 160m and 6m because that's
@@ -41,72 +40,58 @@ function setHamHFBandToggles() {
 
 // Generate SIGs filter card. This one is also a special case.
 function generateSIGsMultiToggleFilterCard(sig_options) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
     sig_options.forEach(o => {
         var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-sig-${domSafeName}" for="filter-button-sig-${domSafeName}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-${domSafeName}" for="filter-button-sig-${domSafeName}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label></div></div>`);
     });
-    // Create a bonus "NO_SIG" / "General DX" option
-    $("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label> `);
-    // Create All/None buttons
-    $("#sig-options").append(` <span style="display: inline-block"><button id="filter-button-sig-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('sig', true);">All</button>&nbsp;<button id="filter-button-sig-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('sig', false);">None</button></span>`);
+    // Bonus "NO_SIG" / "General DX" option
+    $grid.append(`<div class="w-100"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label></div></div>`);
+    $("#sig-options").append($grid);
+    $("#sig-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('sig', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('sig', false); return false;">None</a></div>`);
 }
 
 // Generate modes filter card. This one is also a special case.
 function generateModesMultiToggleFilterCard(mode_options) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 g-1 mb-1">');
     mode_options.forEach(o => {
         var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#mode-options").append(`<input type="checkbox" class="btn-check filter-button-mode storeable-checkbox" name="options" id="filter-button-mode-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-mode storeable-checkbox" id="filter-button-mode-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label></div></div>`);
     });
-    // Create All/None buttons
-    $("#mode-options").append(` <span style="display: inline-block"><button id="filter-button-mode-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('mode', true);">All</button>&nbsp;<button id="filter-button-mode-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('mode', false);">None</button></span>`);
-    // Create category buttons
-    $("#mode-options").append(` <button id="filter-button-mode-av" type="button" class="btn btn-outline-secondary" onclick="toggleAnalogVoiceModeToggles();">Analog Voice</button>&nbsp;<button id="filter-button-mode-dv" type="button" class="btn btn-outline-secondary" onclick="toggleDigitalVoiceModeToggles();">Digital Voice</button>&nbsp;<button id="filter-button-mode-digi" type="button" class="btn btn-outline-secondary" onclick="toggleDigiModeToggles();">Digimodes</button></span>`);
+    $("#mode-options").append($grid);
+    $("#mode-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('mode', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('mode', false); return false;">None</a> &nbsp; <a href="#" onclick="setVoiceModeToggles(); return false;">Voice only</a> &nbsp; <a href="#" onclick="setDigiModeToggles(); return false;">Digimodes only</a></div>`);
 }
 
-// Toggle the mode toggles that relate to Analog Voice.
-function toggleAnalogVoiceModeToggles() {
-    toggleToggles("mode", ["PHONE", "SSB", "LSB", "USB", "AM", "FM"]);
-}
-
-// Toggle the mode toggles that relate to Digital Voice.
-function toggleDigitalVoiceModeToggles() {
-    toggleToggles("mode", ["DV", "DMR", "DSTAR", "C4FM", "M17"]);
-}
-
-// Toggle the mode toggles that relate to Digimodes.
-function toggleDigiModeToggles() {
-    toggleToggles("mode", ["DATA", "FT8", "FT4", "RTTY", "SSTV", "JS8", "HELL", "PSK", "OLIVIA", "PKT", "MSK144"]);
-}
-
-// Toggle the a set of toggles of the given type (e.g. "mode") that match the given values (e.g. ["SSB", "AM", "FM"]).
-function toggleToggles(type, values) {
-    let toggle = null;
-    $(".filter-button-" + type).each(function() {
-        console.log($(this));
-        if (values.includes($(this).val().replace("filter-button-" + type, ""))) {
-            if (toggle == null) {
-                toggle = !$(this).prop('checked');
-            }
-            $(this).prop('checked', toggle);
-        }
+// Set the mode toggles that relate to Analog Voice.
+function setVoiceModeToggles() {
+    const modes = ["PHONE", "SSB", "LSB", "USB", "AM", "FM", "DV", "DMR", "DSTAR", "C4FM", "M17"];
+    $(".filter-button-mode").each(function() {
+        $(this).prop('checked', modes.includes($(this).val().replace("filter-button-mode-", "")));
     });
     filtersUpdated();
 }
 
-// Generate Sources filter card. This one is a minor special case as we create the buttons in the normal way, but then
+// Set the mode toggles that relate to Digimodes.
+function setDigiModeToggles() {
+    const modes = ["DATA", "FT8", "FT4", "RTTY", "SSTV", "JS8", "HELL", "PSK", "OLIVIA", "PKT", "MSK144"];
+    $(".filter-button-mode").each(function() {
+        $(this).prop('checked', modes.includes($(this).val().replace("filter-button-mode-", "")));
+    });
+    filtersUpdated();
+}
+
+// Generate Sources filter card. This one is a minor special case as we create the checkboxes in the normal way, but
 // set which ones are enabled by default based on config rather than having them all enabled by default. We also sanitise
 // names here for HTML elements.
 function generateSourcesMultiToggleFilterCard(source_options, sources_enabled_by_default) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
     source_options.forEach(o => {
         var enable = sources_enabled_by_default.includes(o);
         var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#source-options").append(`<input type="checkbox" class="btn-check filter-button-source storeable-checkbox" name="options" id="filter-button-source-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" ${enable ? "checked" : ""}><label class="btn btn-outline-success" for="filter-button-source-${domSafeName}">${o}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-source storeable-checkbox" id="filter-button-source-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" ${enable ? "checked" : ""}><label class="form-check-label" for="filter-button-source-${domSafeName}">${o}</label></div></div>`);
     });
-    // Create All/None buttons
-    $("#source-options").append(` <span style="display: inline-block"><button id="filter-button-source-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('source', true);">All</button>&nbsp;<button id="filter-button-source-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('source', false);">None</button></span>`);
+    $("#source-options").append($grid);
+    $("#source-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('source', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('source', false); return false;">None</a></div>`);
 }
 
 // Method called when any filter is changed to reload the spots and persist the filter settings.

webassets/js/status.js

@@ -13,7 +13,7 @@ function loadStatus() {
         $("#web-server-last-page").text(moment.unix(jsonData["webserver"]["last_page_access"]).utc().fromNow());
 
         $("#cleanup-status").text(jsonData["cleanup"]["status"]);
-        $("#cleanu-last-ran").text(moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow());
+        $("#cleanup-last-ran").text(moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow());
 
         jsonData["spot_providers"].forEach(p => {
             $("#spot-providers-status-container").append(`