w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-06-23 21:25:12 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Global autoformat

Browse Source
This commit is contained in:
Ian Renton
2026-06-19 21:36:11 +01:00
parent edb2641f76
commit 07d0d98f3d
65 changed files with 1250 additions and 844 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
templates/about.html
View File

@@ -3,72 +3,204 @@
<div id="info-container" class="mt-4">
<h2 class="mt-4 mb-4">About Spothole</h2>
<p>Spothole is a utility to aggregate "spots" from amateur radio DX clusters and xOTA spotting sites, and provide an open JSON API as well as a website to browse the data.</p>
<p>While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outdoor activity programmes for amateur radio, Spothole differentiates itself by supporting a larger number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it.</p>
<p>The API is deliberately well-defined with an <a href="/apidocs/openapi.yml">OpenAPI specification</a> and <a href="/apidocs">API documentation</a>. The API delivers spots in a consistent format regardless of the data source, freeing developers from needing to know how each individual data source presents its data.</p>
<p>Spothole itself is also open source, Public Domain licenced code that anyone can take and modify. <a href="https://git.ianrenton.com/ian/metaspot/">The source code is here</a>.</p>
<p>The software was written by <a href="https://ianrenton.com">Ian Renton, MØTRT</a> and other contributors. Full details are available in the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a>.</p>
<p>Spothole is a utility to aggregate "spots" from amateur radio DX clusters and xOTA spotting sites, and provide an
open JSON API as well as a website to browse the data.</p>
<p>While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various
outdoor activity programmes for amateur radio, Spothole differentiates itself by supporting a larger number of
data sources, and by being "API first" rather than just providing a web front-end. This allows other software to
be built on top of it.</p>
<p>The API is deliberately well-defined with an <a href="/apidocs/openapi.yml">OpenAPI specification</a> and <a
href="/apidocs">API documentation</a>. The API delivers spots in a consistent format regardless of the data
source, freeing developers from needing to know how each individual data source presents its data.</p>
<p>Spothole itself is also open source, Public Domain licenced code that anyone can take and modify. <a
href="https://git.ianrenton.com/ian/metaspot/">The source code is here</a>.</p>
<p>The software was written by <a href="https://ianrenton.com">Ian Renton, MØTRT</a> and other contributors. Full
details are available in the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README
file</a>.</p>
<p>This server is running Spothole version {{software_version}}.</p>
<h2 class="mt-4 mb-4">Using Spothole</h2>
<p>There are a number of different ways to use Spothole, depending on what you want to do with it and your level of technical skill:</p>
<ol><li>You can <b>use it on the web</b>, like you are (probably) doing right now. This is how most people use it, to look up spots and alerts, and make interesting QSOs.</li>
<li>If you are using an Android or iOS device, you can <b>"install" it on your device</b>. Spothole is a Progressive Web App, meaning it's not delivered through app stores, but if you open the page on Chrome (Android) or Safari (iOS) there will be an option in the menu to install it. It will then appear in your main app menu.</li>
<li>You can <b>embed the web interface in another website</b> to show its spots in a custom dashboard or the like. The usage is explained in more detail in the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a>.</li>
<li>You can <b>write your own client using the Spothole API</b>, using the main Spothole instance to provide data, and do whatever you like with it. The README contains guidance on how to do this, and the full API docs are linked above. You can also find reference implementations in the form of Spothole's own web-based front end, plus my other two tools built on Spothole: <a href="https://fieldspotter.radio">Field Spotter</a> and the <a href="https://qsomap.m0trt.radio">QSO Map Tool</a>.</li>
<li>If you want to <b>run your own version of Spothole</b> so you can customise the configuration, such as enabling sources that I disable on the main instance, you can do that too. The README contains not only advice on how to set up Spothole but how to get it auto-starting with systemd, using an nginx reverse proxy, and setting up HTTPS support with certbot.</li>
<li>Finally, you can of course download the source code and <b>develop Spothole to meet your needs</b>. Whether you contribute your changes back to the main repository is up to you. As usual, the README file contains some advice on the structure of the repository, and how to get started writing your own spot provider.</li></ol>
<p>There are a number of different ways to use Spothole, depending on what you want to do with it and your level of
technical skill:</p>
<ol>
<li>You can <b>use it on the web</b>, like you are (probably) doing right now. This is how most people use it,
to look up spots and alerts, and make interesting QSOs.
</li>
<li>If you are using an Android or iOS device, you can <b>"install" it on your device</b>. Spothole is a
Progressive Web App, meaning it's not delivered through app stores, but if you open the page on Chrome
(Android) or Safari (iOS) there will be an option in the menu to install it. It will then appear in your
main app menu.
</li>
<li>You can <b>embed the web interface in another website</b> to show its spots in a custom dashboard or the
like. The usage is explained in more detail in the <a
href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a>.
</li>
<li>You can <b>write your own client using the Spothole API</b>, using the main Spothole instance to provide
data, and do whatever you like with it. The README contains guidance on how to do this, and the full API
docs are linked above. You can also find reference implementations in the form of Spothole's own web-based
front end, plus my other two tools built on Spothole: <a href="https://fieldspotter.radio">Field Spotter</a>
and the <a href="https://qsomap.m0trt.radio">QSO Map Tool</a>.
</li>
<li>If you want to <b>run your own version of Spothole</b> so you can customise the configuration, such as
enabling sources that I disable on the main instance, you can do that too. The README contains not only
advice on how to set up Spothole but how to get it auto-starting with systemd, using an nginx reverse proxy,
and setting up HTTPS support with certbot.
</li>
<li>Finally, you can of course download the source code and <b>develop Spothole to meet your needs</b>. Whether
you contribute your changes back to the main repository is up to you. As usual, the README file contains
some advice on the structure of the repository, and how to get started writing your own spot provider.
</li>
</ol>
<h2 id="faq" class="mt-4">FAQ</h2>
<h4 class="mt-4">"Spots"? "DX Clusters"? What does any of this mean?</h4>
<p>This is a tool for amateur ("ham") radio users. Many amateur radio operators like to make contacts with others who are doing something more interesting than sitting in their home "shack", such as people in rarely-seen countries, remote islands, or on mountaintops. Such operators are often "spotted", i.e. when someone speaks to them, they will put the details such as their operating frequency into an online system, to let others know where to find them. A DX Cluster is one type of those systems. Most outdoor radio awards programmes, such as "Parks on the Air" (POTA) have their own websites for posting spots.</p>
<p>Spothole is an "aggregator" for those spots, so it checks lots of different services for data, and brings it all together in one place. So no matter what kinds of interesting spots you are looking for, you can find them here.</p>
<p>As well as spots, it also provides a similar feed of "alerts". This is where amateur radio users who are going to interesting places soon will announce their intentions.</p>
<p>This is a tool for amateur ("ham") radio users. Many amateur radio operators like to make contacts with others
who are doing something more interesting than sitting in their home "shack", such as people in rarely-seen
countries, remote islands, or on mountaintops. Such operators are often "spotted", i.e. when someone speaks to
them, they will put the details such as their operating frequency into an online system, to let others know
where to find them. A DX Cluster is one type of those systems. Most outdoor radio awards programmes, such as
"Parks on the Air" (POTA) have their own websites for posting spots.</p>
<p>Spothole is an "aggregator" for those spots, so it checks lots of different services for data, and brings it all
together in one place. So no matter what kinds of interesting spots you are looking for, you can find them
here.</p>
<p>As well as spots, it also provides a similar feed of "alerts". This is where amateur radio users who are going to
interesting places soon will announce their intentions.</p>
<h4 class="mt-4">What are "DX", "DE" and modes?</h4>
<p>In amateur radio terminology, the "DX" contact is the "interesting" one that is using the frequency shown and looking for callers. They might be on a remote island or just in a local park, but either way it's interesting enough that someone has "spotted" them. The callsign listed under "DE" is the person who entered the spot of the "DX" operator. "Modes" are the type of communication they are using. For example you might see "CW" which is Morse Code, or voice "modes" like SSB or FM, or more exotic "data" modes which are used for computer-to-computer communication.</p>
<p>In amateur radio terminology, the "DX" contact is the "interesting" one that is using the frequency shown and
looking for callers. They might be on a remote island or just in a local park, but either way it's interesting
enough that someone has "spotted" them. The callsign listed under "DE" is the person who entered the spot of the
"DX" operator. "Modes" are the type of communication they are using. For example you might see "CW" which is
Morse Code, or voice "modes" like SSB or FM, or more exotic "data" modes which are used for computer-to-computer
communication.</p>
<h4 class="mt-4">What data sources are supported?</h4>
<p>Spothole can retrieve spots from: <a href="https://www.dxcluster.info/telnet/">Telnet-based DX clusters</a>, the <a href="https://www.reversebeacon.net/">Reverse Beacon Network (RBN)</a>, the <a href="https://www.aprs-is.net/">APRS Internet Service (APRS-IS)</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.cqgma.org/">GMA</a>, <a href="https://wwbota.net/">WWBOTA</a>, <a href="http://www.hema.org.uk/">HEMA</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://ontheair.nz">ZLOTA</a>, <a href="https://www.wota.org.uk/">WOTA</a>, <a href="https://llota.app">LLOTA</a>, <a href="https://wwtota.com">WWTOTA</a>, <a href="https://tilesontheair.com/">Tiles on the Air</a>, the <a href="https://ukpacketradio.network/">UK Packet Repeater Network</a>, and any site based on the <a href="https://github.com/nischu/xOTA">xOTA software by nischu</a>.</p>
<p>Spothole can retrieve alerts from: <a href="https://www.ng3k.com/">NG3K</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://www.wota.org.uk/">WOTA</a> and <a href="https://www.beachesontheair.com/">BOTA</a>.</p>
<p>Spothole can retrieve solar and propagation condition data from <a href="https://www.hamqsl.com">HamQSL</a>, the <a href="https://www.swpc.noaa.gov/">NOAA Space Weather Prediction Center</a>, the <a href="https://giro.uml.edu/">Lowell GIRO Data Center</a> and <a href="https://prop.kc2g.com/">prop.kc2g.com</a> by KC2G.</p>
<p>Spothole can also perform lookups for callsign data on behalf of the user from <a href="https://qrz.com">QRZ.com</a> and <a href="https://hamqth.com">HamQTH</a>.</p>
<p>Note that the server owner has not necessarily enabled all these data sources. In particular it is common to disable RBN, to avoid the server being swamped with FT8 traffic, and to disable APRS-IS and UK Packet Net so that the server only displays stations where there is likely to be an operator physically present for a QSO.</p>
<p>Between the various data sources, the following Special Interest Groups (SIGs) are supported: Parks on the Air (POTA), Summits on the Air (SOTA), Worldwide Flora & Fauna (WWFF), Global Mountain Activity (GMA), Worldwide Bunkers on the Air (WWBOTA), HuMPs Excluding Marilyns Award (HEMA), Islands on the Air (IOTA), Mills on the Air (MOTA), the Amateur Radio Lighthouse Socirty (ARLHS), International Lighthouse Lightship Weekend (ILLW), Silos on the Air (SIOTA), World Castles Award (WCA), New Zealand on the Air (ZLOTA), Keith Roget Memorial National Parks Award (KRMNPA), Wainwrights on the Air (WOTA), Beaches on the Air (BOTA), Lagos y Lagunas On the Air (LLOTA), Towers on the Air (WWTOTA), Tiles on the Air, Worked All Britain (WAB), Worked All Ireland (WAI), and Toilets on the Air (TOTA).</p>
<p>As of the time of writing in November 2025, I think Spothole captures essentially all outdoor radio programmes that have a defined reference list, and almost certainly those that have a spotting/alerting API. If you know of one I've missed, please let me know!</p>
<p>Spothole can retrieve spots from: <a href="https://www.dxcluster.info/telnet/">Telnet-based DX clusters</a>, the
<a href="https://www.reversebeacon.net/">Reverse Beacon Network (RBN)</a>, the <a
href="https://www.aprs-is.net/">APRS Internet Service (APRS-IS)</a>, <a href="https://pota.app">POTA</a>,
<a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a
href="https://www.cqgma.org/">GMA</a>, <a href="https://wwbota.net/">WWBOTA</a>, <a
href="http://www.hema.org.uk/">HEMA</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a
href="https://ontheair.nz">ZLOTA</a>, <a href="https://www.wota.org.uk/">WOTA</a>, <a
href="https://llota.app">LLOTA</a>, <a href="https://wwtota.com">WWTOTA</a>, <a
href="https://tilesontheair.com/">Tiles on the Air</a>, the <a href="https://ukpacketradio.network/">UK
Packet Repeater Network</a>, and any site based on the <a href="https://github.com/nischu/xOTA">xOTA
software by nischu</a>.</p>
<p>Spothole can retrieve alerts from: <a href="https://www.ng3k.com/">NG3K</a>, <a href="https://pota.app">POTA</a>,
<a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a
href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://www.wota.org.uk/">WOTA</a> and
<a href="https://www.beachesontheair.com/">BOTA</a>.</p>
<p>Spothole can retrieve solar and propagation condition data from <a href="https://www.hamqsl.com">HamQSL</a>, the
<a href="https://www.swpc.noaa.gov/">NOAA Space Weather Prediction Center</a>, the <a
href="https://giro.uml.edu/">Lowell GIRO Data Center</a> and <a href="https://prop.kc2g.com/">prop.kc2g.com</a>
by KC2G.</p>
<p>Spothole can also perform lookups for callsign data on behalf of the user from <a
href="https://qrz.com">QRZ.com</a> and <a href="https://hamqth.com">HamQTH</a>.</p>
<p>Note that the server owner has not necessarily enabled all these data sources. In particular it is common to
disable RBN, to avoid the server being swamped with FT8 traffic, and to disable APRS-IS and UK Packet Net so
that the server only displays stations where there is likely to be an operator physically present for a QSO.</p>
<p>Between the various data sources, the following Special Interest Groups (SIGs) are supported: Parks on the Air
(POTA), Summits on the Air (SOTA), Worldwide Flora & Fauna (WWFF), Global Mountain Activity (GMA), Worldwide
Bunkers on the Air (WWBOTA), HuMPs Excluding Marilyns Award (HEMA), Islands on the Air (IOTA), Mills on the Air
(MOTA), the Amateur Radio Lighthouse Socirty (ARLHS), International Lighthouse Lightship Weekend (ILLW), Silos
on the Air (SIOTA), World Castles Award (WCA), New Zealand on the Air (ZLOTA), Keith Roget Memorial National
Parks Award (KRMNPA), Wainwrights on the Air (WOTA), Beaches on the Air (BOTA), Lagos y Lagunas On the Air
(LLOTA), Towers on the Air (WWTOTA), Tiles on the Air, Worked All Britain (WAB), Worked All Ireland (WAI), and
Toilets on the Air (TOTA).</p>
<p>As of the time of writing in November 2025, I think Spothole captures essentially all outdoor radio programmes
that have a defined reference list, and almost certainly those that have a spotting/alerting API. If you know of
one I've missed, please let me know!</p>
<h4 class="mt-4">Why can I filter spots by both SIG and Source? Isn't that basically the same thing?</h4>
<p>Mostly, but not quite. While POTA spots generally come from the POTA source and so on, there are a few exceptions:</p>
<ol><li>Sources like GMA and Parks 'n' Peaks provide spots for multiple different programmes (SIGs).</li>
<li>Cluster spots may name SIGs in their comment, in which case the source remains the Cluster, but a SIG is assigned.</li>
<li>Some SIGs, such as Worked all Britain (WAB), don't have their own spotting site and can <em>only</em> be identified through comments on spots retrieved from other sources.</li>
<li>SIGs have well-defined names, whereas the server owner may name the sources as they see fit.</li></ol>
<p>Spothole's web interface exists not just for the end user, but also as a reference implementation for the API, so I have chosen to demonstrate both methods of filtering.</p>
<p>Mostly, but not quite. While POTA spots generally come from the POTA source and so on, there are a few
exceptions:</p>
<ol>
<li>Sources like GMA and Parks 'n' Peaks provide spots for multiple different programmes (SIGs).</li>
<li>Cluster spots may name SIGs in their comment, in which case the source remains the Cluster, but a SIG is
assigned.
</li>
<li>Some SIGs, such as Worked all Britain (WAB), don't have their own spotting site and can <em>only</em> be
identified through comments on spots retrieved from other sources.
</li>
<li>SIGs have well-defined names, whereas the server owner may name the sources as they see fit.</li>
</ol>
<p>Spothole's web interface exists not just for the end user, but also as a reference implementation for the API, so
I have chosen to demonstrate both methods of filtering.</p>
<h4 class="mt-4">How is this better than DXheat, DXsummit, POTA's own website, etc?</h4>
<p>It's probably not? But it's nice to have choice.</p>
<p>I think it's got three key advantages over those sites:</p>
<ol><li>It provides a public, <a href="/apidocs">well-documented API</a> with an <a href="/apidocs/openapi.yml">OpenAPI specification</a>. Other sites don't have official APIs or don't bother documenting them publicly, because they want people to use their web page. I like Spothole's web page, but you don't have to use it&mdash;if you're a programmer, you can build your own software on Spothole's API. Spothole does the hard work of taking all the various data sources and providing a consistent, well-documented data set. You can then do the fun bit of writing your own application.</li>
<li>It grabs data from a lot more sources. I've seen other sites that pull in DX Cluster and POTA spots together, but nothing on the scale of what Spothole supports.</li>
<li>Spothole is open source, so anyone can contribute the code to support a new data source or add new features, and share them with the community.</li></ol>
<ol>
<li>It provides a public, <a href="/apidocs">well-documented API</a> with an <a href="/apidocs/openapi.yml">OpenAPI
specification</a>. Other sites don't have official APIs or don't bother documenting them publicly, because
they want people to use their web page. I like Spothole's web page, but you don't have to use it&mdash;if
you're a programmer, you can build your own software on Spothole's API. Spothole does the hard work of
taking all the various data sources and providing a consistent, well-documented data set. You can then do
the fun bit of writing your own application.
</li>
<li>It grabs data from a lot more sources. I've seen other sites that pull in DX Cluster and POTA spots
together, but nothing on the scale of what Spothole supports.
</li>
<li>Spothole is open source, so anyone can contribute the code to support a new data source or add new features,
and share them with the community.
</li>
</ol>
<h4 class="mt-4">Why does this website ask me if I want to install it?</h4>
<p>Spothole is a Progressive Web App, which means you can install it on an Android or iOS device by opening the site in Chrome or Safari respectively, and clicking "Install" on the pop-up panel. It'll only prompt you once, so if you dismiss the prompt and change your mind, you'll find an Install / Add to Home Screen option on your browser's menu.</p>
<p>Installing Spothole on your phone is completely optional, the website works exactly the same way as the "app" does.</p>
<p>Spothole is a Progressive Web App, which means you can install it on an Android or iOS device by opening the site
in Chrome or Safari respectively, and clicking "Install" on the pop-up panel. It'll only prompt you once, so if
you dismiss the prompt and change your mind, you'll find an Install / Add to Home Screen option on your
browser's menu.</p>
<p>Installing Spothole on your phone is completely optional, the website works exactly the same way as the "app"
does.</p>
<h4 class="mt-4">Why hasn't my spot/alert shown up yet?</h4>
<p>To avoid putting too much load on the various servers that Spothole connects to, the Spothole server only polls them once every two minutes for spots, and once every 30 minutes for alerts. (Some sources, such as DX clusters, RBN, APRS-IS and WWBOTA use a non-polling mechanism, and their updates will therefore arrive more quickly.) Then if you are using the web interface, that has its own rate at which it fetches the data from Spothole. This is instant for the main spots list, with new spots appearing immediately at the top of the list, while the map and bands displays update once a minute, and the alerts display updates once every 5 minutes. So you could be waiting around three minutes to see a newly added spot, or 40 minutes to see a newly added alert.</p>
<p>To avoid putting too much load on the various servers that Spothole connects to, the Spothole server only polls
them once every two minutes for spots, and once every 30 minutes for alerts. (Some sources, such as DX clusters,
RBN, APRS-IS and WWBOTA use a non-polling mechanism, and their updates will therefore arrive more quickly.) Then
if you are using the web interface, that has its own rate at which it fetches the data from Spothole. This is
instant for the main spots list, with new spots appearing immediately at the top of the list, while the map and
bands displays update once a minute, and the alerts display updates once every 5 minutes. So you could be
waiting around three minutes to see a newly added spot, or 40 minutes to see a newly added alert.</p>
<h4 class="mt-4">What licence does Spothole use?</h4>
<p>Spothole's source code is licenced under the Public Domain. You can write a Spothole client, run your own server, modify it however you like, you can claim you wrote it and charge people £1000 for a copy, I don't really mind. (Please don't do the last one. But if you're using my code for something cool, it would be nice to hear from you!)</p>
<p>Spothole's source code is licenced under the Public Domain. You can write a Spothole client, run your own server,
modify it however you like, you can claim you wrote it and charge people £1000 for a copy, I don't really mind.
(Please don't do the last one. But if you're using my code for something cool, it would be nice to hear from
you!)</p>
<h2 class="mt-4">Data Accuracy</h2>
<p>Please note that the data coming out of Spothole is only as good as the data going in. People mis-hear and make typos when spotting callsigns all the time. There are also plenty of cases where Spothole's data, particularly location data, may be inaccurate. For example, there are POTA parks that span multiple US states, countries that span multiple CQ zones, portable operators with no requirement to sign /P, etc. If you are doing something where accuracy is important, such as contesting, you should not rely on Spothole's data to fill in any gaps in your log.</p>
<p>Please note that the data coming out of Spothole is only as good as the data going in. People mis-hear and make
typos when spotting callsigns all the time. There are also plenty of cases where Spothole's data, particularly
location data, may be inaccurate. For example, there are POTA parks that span multiple US states, countries that
span multiple CQ zones, portable operators with no requirement to sign /P, etc. If you are doing something where
accuracy is important, such as contesting, you should not rely on Spothole's data to fill in any gaps in your
log.</p>
<h2 id="privacy" class="mt-4">Privacy</h2>
<p>Spothole collects no data about you on a permanent basis. All spots and alerts are "timed out" and deleted from the system after a set interval, which by default is one hour for spots and one week for alerts.</p>
<p>Settings you select from Spothole's menus are sent to the server, in order to provide the data with the requested filters. They are also stored in your browser's local storage, so that your preferences are remembered between sessions.</p>
<p>The data you provide can optionally include your login credentials for QRZ.com and HamQTH. You can provide these in the "Data" menu of most pages. If you do, Spothole will augment the data it produces with lookups from these services, which can for example provide more accurate markers on the map tab, and operator names when you mouse over a DX callsign. Spothole will still work fine if you don't provide these. The values you enter are sent to Spothole via HTTPS so are protected in transit, though of course you do have to trust Spothole with this sensitive data in order to use this feature.</p>
<p>Spothole collects no data about you on a permanent basis. All spots and alerts are "timed out" and deleted from
the system after a set interval, which by default is one hour for spots and one week for alerts.</p>
<p>Settings you select from Spothole's menus are sent to the server, in order to provide the data with the requested
filters. They are also stored in your browser's local storage, so that your preferences are remembered between
sessions.</p>
<p>The data you provide can optionally include your login credentials for QRZ.com and HamQTH. You can provide these
in the "Data" menu of most pages. If you do, Spothole will augment the data it produces with lookups from these
services, which can for example provide more accurate markers on the map tab, and operator names when you mouse
over a DX callsign. Spothole will still work fine if you don't provide these. The values you enter are sent to
Spothole via HTTPS so are protected in transit, though of course you do have to trust Spothole with this
sensitive data in order to use this feature.</p>
<p>Spothole uses no trackers, no ads, and no cookies.</p>
{% if len(web_ui_options["support-button-html"]) > 0 %}
<p><strong>Caveat: </strong> The owner of this server has chosen to inject their own content into the "spots" page. This is designed for a "donate" or "support this server" button. The functionality of this injected content is the responsibility of the server owner, rather than the Spothole software.</p>
<p><strong>Caveat: </strong> The owner of this server has chosen to inject their own content into the "spots" page.
This is designed for a "donate" or "support this server" button. The functionality of this injected content is
the responsibility of the server owner, rather than the Spothole software.</p>
{% end %}
<p>Spothole is open source, so you can audit <a href="https://git.ianrenton.com/ian/spothole">the code</a> if you like.</p>
<p>Spothole is open source, so you can audit <a href="https://git.ianrenton.com/ian/spothole">the code</a> if you
like.</p>
<h2 class="mt-4">Thanks</h2>
<p>This project would not have been possible without those volunteers who have taken it upon themselves to run DX clusters, xOTA programmes, DXpedition lists, callsign lookup databases, solar conditions and propagation modelling software, and other online tools on which Spothole's data is based. The vast majority of these are not profit-seeking and are made purely for the love of the hobby and to help others in the community. Spothole is standing on the shoulders of giants, who deserve a huge amount of thanks for all the work they put in.</p>
<p>Spothole is also dependent on a number of Python libraries, in particular pyhamtools, and many JavaScript libraries, as well as the Font Awesome icon set and flag icons from the Noto Color Emoji set, and MIT-licenced GeoJSON files for CQ and ITU zones from HA8TKS.</p>
<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>
<p>This project would not have been possible without those volunteers who have taken it upon themselves to run DX
clusters, xOTA programmes, DXpedition lists, callsign lookup databases, solar conditions and propagation
modelling software, and other online tools on which Spothole's data is based. The vast majority of these are not
profit-seeking and are made purely for the love of the hobby and to help others in the community. Spothole is
standing on the shoulders of giants, who deserve a huge amount of thanks for all the work they put in.</p>
<p>Spothole is also dependent on a number of Python libraries, in particular pyhamtools, and many JavaScript
libraries, as well as the Font Awesome icon set and flag icons from the Noto Color Emoji set, and MIT-licenced
GeoJSON files for CQ and ITU zones from HA8TKS.</p>
<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>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
<script>$(document).ready(function () {
$("#nav-link-about").addClass("active");
}); <!-- highlight active page in nav --></script>
{% end %}

23
templates/add_spot.html
View File

@@ -2,10 +2,16 @@
{% block content %}
<div id="add-spot-intro-box" class="permanently-dismissible-box mt-3">
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<i class="fa-solid fa-circle-info"></i> <strong>Adding spots to Spothole</strong><br/>This page is implemented as a proof of concept for adding spots to the Spothole system. Currently, spots added in this way are only visible within Spothole and are not sent "upstream" to DX clusters or xOTA spotting sites. The functionality might be extended to include this in future if there is demand for it. If you'd like this to be added, please give a thumbs-up on <a href="https://git.ianrenton.com/ian/spothole/issues/39" target="_new" class="alert-link">issue #39</a> or get in touch via email.
<button type="button" id="add-spot-intro-box-dismiss" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<i class="fa-solid fa-circle-info"></i> <strong>Adding spots to Spothole</strong><br/>This page is implemented
as a proof of concept for adding spots to the Spothole system. Currently, spots added in this way are only
visible within Spothole and are not sent "upstream" to DX clusters or xOTA spotting sites. The functionality
might be extended to include this in future if there is demand for it. If you'd like this to be added, please
give a thumbs-up on <a href="https://git.ianrenton.com/ian/spothole/issues/39" target="_new" class="alert-link">issue
#39</a> or get in touch via email.
<button type="button" id="add-spot-intro-box-dismiss" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
</div>
<div class="mt-3">
@@ -53,7 +59,8 @@
</div>
<div class="col-auto">
<label for="de-call" class="form-label">Your Call *</label>
<input type="text" class="form-control storeable-text input-narrow" id="de-call" placeholder="N0CALL">
<input type="text" class="form-control storeable-text input-narrow" id="de-call"
placeholder="N0CALL">
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary mt-2em" onclick="addSpot();">Spot</button>
@@ -69,7 +76,9 @@
</div>
<script src="/js/add-spot.js?v=1781901226"></script>
<script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
<script src="/js/add-spot.js?v=1781901371"></script>
<script>$(document).ready(function () {
$("#nav-link-add-spot").addClass("active");
}); <!-- highlight active page in nav --></script>
{% end %}

13
templates/alerts.html
View File

@@ -65,12 +65,19 @@
</div>
<div id="table-container">
<table id="table" class="table"><thead><tr></tr></thead><tbody></tbody></table>
<table id="table" class="table">
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script src="/js/alerts.js?v=1781901227"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
<script src="/js/alerts.js?v=1781901371"></script>
<script>$(document).ready(function () {
$("#nav-link-alerts").addClass("active");
}); <!-- highlight active page in nav --></script>
{% end %}

14
templates/api_only_home.html
View File

@@ -1,6 +1,6 @@
{% extends "skeleton.html" %}
{% block head_extra %}
<link href="/vendor/css/bootstrap-5.3.8.min.css" rel="stylesheet">
<link href="/vendor/css/bootstrap-5.3.8.min.css" rel="stylesheet">
{% end %}
{% block body %}
<div class="container mt-5">
@@ -11,9 +11,15 @@
</div>
<div class="card">
<div class="card-body">
<p class="card-text">This server is running <strong>Spothole v{{software_version}}</strong>, and is operated by <strong>{{server_owner_callsign}}</strong>.</p>
<p class="card-text">The web UI is not available on this instance because the server is running in API-only mode, intended for use by client software rather than visitors to the website. See the <a href="/apidocs">API documentation</a> for details of how client software can interact with the server.</p>
<p class="card-text">Please see the <a href="https://git.ianrenton.com/ian/spothole#readme">README</a> for details of what Spothole is and how you can run it for yourself.</p>
<p class="card-text">This server is running <strong>Spothole v{{software_version}}</strong>, and is
operated by <strong>{{server_owner_callsign}}</strong>.</p>
<p class="card-text">The web UI is not available on this instance because the server is running in
API-only mode, intended for use by client software rather than visitors to the website. See the
<a href="/apidocs">API documentation</a> for details of how client software can interact with
the server.</p>
<p class="card-text">Please see the <a
href="https://git.ianrenton.com/ian/spothole#readme">README</a> for details of what Spothole
is and how you can run it for yourself.</p>
</div>
</div>
</div>

2
templates/apidocs.html
View File

@@ -1,5 +1,5 @@
{% extends "skeleton.html" %}
{% block body %}
<redoc spec-url="/apidocs/openapi.yml"></redoc>
<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"></script>
{% end %}

16
templates/bands.html
View File

@@ -49,7 +49,8 @@
{% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
</div>
<div class="col">
{% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
{% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options)
%}
</div>
</div>
</div>
@@ -74,10 +75,15 @@
</div>
<script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
let spotProvidersEnabledByDefault = { % raw
json_encode(web_ui_options["spot-providers-enabled-by-default"]) %
}
;
</script>
<script src="/js/spotsbandsandmap.js?v=1781901226"></script>
<script src="/js/bands.js?v=1781901226"></script>
<script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
<script src="/js/spotsbandsandmap.js?v=1781901371"></script>
<script src="/js/bands.js?v=1781901371"></script>
<script>$(document).ready(function () {
$("#nav-link-bands").addClass("active");
}); <!-- highlight active page in nav --></script>
{% end %}

80
templates/base.html
View File

@@ -1,19 +1,19 @@
{% extends "skeleton.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/css/style.css?v=1781901226" type="text/css">
<link href="/vendor/css/bootstrap-5.3.8.min.css" rel="stylesheet">
<link href="/vendor/css/fontawesome-6.7.2.min.css" rel="stylesheet">
<link href="/vendor/css/solid-6.7.2.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css?v=1781901371" type="text/css">
<link href="/vendor/css/bootstrap-5.3.8.min.css" rel="stylesheet">
<link href="/vendor/css/fontawesome-6.7.2.min.css" rel="stylesheet">
<link href="/vendor/css/solid-6.7.2.min.css" rel="stylesheet">
<script src="/vendor/js/jquery-3.7.1.min.js"></script>
<script src="/vendor/js/moment-2.29.4.min.js"></script>
<script src="/vendor/js/bootstrap-5.3.8.bundle.min.js"></script>
<script src="/vendor/js/tinycolor2-1.6.0.min.js"></script>
<script src="/vendor/js/jquery-3.7.1.min.js"></script>
<script src="/vendor/js/moment-2.29.4.min.js"></script>
<script src="/vendor/js/bootstrap-5.3.8.bundle.min.js"></script>
<script src="/vendor/js/tinycolor2-1.6.0.min.js"></script>
<script src="/js/utils.js?v=1781901226"></script>
<script src="/js/ui-ham.js?v=1781901226"></script>
<script src="/js/geo.js?v=1781901226"></script>
<script src="/js/common.js?v=1781901226"></script>
<script src="/js/utils.js?v=1781901371"></script>
<script src="/js/ui-ham.js?v=1781901371"></script>
<script src="/js/geo.js?v=1781901371"></script>
<script src="/js/common.js?v=1781901371"></script>
{% end %}
{% block body %}
<div class="container">
@@ -22,22 +22,33 @@
<a class="navbar-brand" href="/">
<img src="/img/logo.png" class="logo" width="192" height="60" alt="Spothole">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggler-content" aria-controls="navbar-toggler-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbar-toggler-content" aria-controls="navbar-toggler-content"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-toggler-content">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item ms-4"><a href="/" class="nav-link" id="nav-link-spots"><i class="fa-solid fa-tower-cell"></i> Spots</a></li>
<li class="nav-item ms-4"><a href="/map" class="nav-link" id="nav-link-map"><i class="fa-solid fa-map"></i> Map</a></li>
<li class="nav-item ms-4"><a href="/bands" class="nav-link" id="nav-link-bands"><i class="fa-solid fa-ruler-vertical"></i> Bands</a></li>
<li class="nav-item ms-4"><a href="/alerts" class="nav-link" id="nav-link-alerts"><i class="fa-solid fa-clock"></i> Upcoming</a></li>
{% 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 %}
<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>
<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>
<li class="nav-item ms-4"><a href="/" class="nav-link" id="nav-link-spots"><i
class="fa-solid fa-tower-cell"></i> Spots</a></li>
<li class="nav-item ms-4"><a href="/map" class="nav-link" id="nav-link-map"><i
class="fa-solid fa-map"></i> Map</a></li>
<li class="nav-item ms-4"><a href="/bands" class="nav-link" id="nav-link-bands"><i
class="fa-solid fa-ruler-vertical"></i> Bands</a></li>
<li class="nav-item ms-4"><a href="/alerts" class="nav-link" id="nav-link-alerts"><i
class="fa-solid fa-clock"></i> Upcoming</a></li>
{% 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 %}
<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>
<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>
</ul>
</div>
</div>
@@ -45,14 +56,17 @@
<main>
{% block content %}{% end %}
{% block content %}{% end %}
</main>
<div id="footer" class="hideonmobile hideonmap">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com" class="text-body-secondary">Ian, MØTRT</a> and other contributors.</p>
<p class="col-md-4 mb-0 justify-content-center text-body-secondary text-center">Spothole v{{software_version}}</p>
<p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com"
class="text-body-secondary">Ian, MØTRT</a>
and other contributors.</p>
<p class="col-md-4 mb-0 justify-content-center text-body-secondary text-center">Spothole
v{{software_version}}</p>
<ul class="nav col-md-4 justify-content-end">
<li class="nav-item">
<a href="/about#faq" class="nav-link px-3 text-body-secondary">FAQ</a>
@@ -61,16 +75,20 @@
<a href="/about#privacy" class="nav-link px-3 text-body-secondary">Privacy</a>
</li>
<li class="nav-item">
<a href="https://git.ianrenton.com/ian/spothole" class="nav-link px-3 text-body-secondary">Source Code</a>
<a href="https://git.ianrenton.com/ian/spothole" class="nav-link px-3 text-body-secondary">Source
Code</a>
</li>
<li class="nav-item">
<a href="https://git.ianrenton.com/ian/spothole/issues" class="nav-link px-3 text-body-secondary">Issue Tracker</a>
<a href="https://git.ianrenton.com/ian/spothole/issues" class="nav-link px-3 text-body-secondary">Issue
Tracker</a>
</li>
</ul>
</footer>
</div>
</div>
<div id="embeddedModeFooter" class="text-body-secondary pt-2 px-3 pb-1">Powered by <img src="/img/logo.png" class="logo" width="96" height="30" alt="Spothole"></div>
<div id="embeddedModeFooter" class="text-body-secondary pt-2 px-3 pb-1">Powered by <img src="/img/logo.png" class="logo"
width="96" height="30"
alt="Spothole"></div>
{% end %}

5
templates/cards/audio.html
View File

@@ -3,8 +3,9 @@
<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>
<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>

12
templates/cards/duration-limit-alerts.html
View File

@@ -1,9 +1,12 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Duration Limit <i class='fa-solid fa-circle-question' title='Some users create long-duration alerts for the period they will be generally in and around xOTA references, when they are not indending to be on the air most of the time. Use this control to restrict the maximum duration of spots that the software will display, and exclude any with a long duration, to avoid these filling up the list. By default, we allow DXpeditions to be displayed even if they are longer than this limit, because on a DXpedition the operators typically ARE on the air most of the time.'></i></h5>
<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">
<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;">
<select id="max-duration" class="storeable-select form-select" onclick="filtersUpdated();"
style="width: 8em; display: inline-block;">
<option value="10800">3 hours</option>
<option value="43200">12 hours</option>
<option value="86400" selected>24 hours</option>
@@ -13,7 +16,10 @@
</select>
</p>
<p class='card-text spothole-card-text' style='line-height: 1.5em !important;'>
<input class="form-check-input storeable-checkbox" type="checkbox" value="" onclick="filtersUpdated();" id="dxpeditions_skip_max_duration_check" checked><label class="form-check-label ms-2" for="dxpeditions_skip_max_duration_check">Allow DXpeditions that are longer</label>
<input class="form-check-input storeable-checkbox" type="checkbox" value="" onclick="filtersUpdated();"
id="dxpeditions_skip_max_duration_check" checked><label class="form-check-label ms-2"
for="dxpeditions_skip_max_duration_check">Allow
DXpeditions that are longer</label>
</p>
</div>
</div>

17
templates/cards/hamqth.html
View File

@@ -3,21 +3,28 @@
<h5 class="card-title">HamQTH</h5>
<div class="card-text spothole-card-text">
<div class="form-check mb-2">
<input type="checkbox" class="storeable-checkbox form-check-input" id="hamqth-enabled" onchange="saveSettings();">
<input type="checkbox" class="storeable-checkbox form-check-input" id="hamqth-enabled"
onchange="saveSettings();">
<label for="hamqth-enabled" class="form-check-label">Use data from HamQTH</label>
</div>
<div class="mb-2">
<input type="text" class="storeable-text form-control" id="hamqth-username" placeholder="Username (Callsign)" onchange="saveSettings();" autocomplete="username">
<input type="text" class="storeable-text form-control" id="hamqth-username"
placeholder="Username (Callsign)" onchange="saveSettings();" autocomplete="username">
</div>
<div class="mb-2">
<input type="password" class="password-field form-control" id="hamqth-password" placeholder="Password" data-remember-checkbox="hamqth-remember-password" onchange="saveSettings();" autocomplete="current-password">
<input type="password" class="password-field form-control" id="hamqth-password" placeholder="Password"
data-remember-checkbox="hamqth-remember-password" onchange="saveSettings();"
autocomplete="current-password">
</div>
<div class="form-check">
<input type="checkbox" class="storeable-checkbox form-check-input" id="hamqth-remember-password" onchange="saveSettings();">
<input type="checkbox" class="storeable-checkbox form-check-input" id="hamqth-remember-password"
onchange="saveSettings();">
<label for="hamqth-remember-password" class="form-check-label">Remember password</label>
</div>
<div class="mt-3">
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload();">Reload with this data</button>
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload();">Reload with
this data
</button>
</div>
<div class="mt-1">
<small>See <a href="/about#privacy">Privacy</a> for more information.</small>

9
templates/cards/location.html
View File

@@ -1,9 +1,10 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Location</h5>
<div class="form-group spothole-card-text">
<label for="userGrid">Your grid:</label>
<input type="text" class="storeable-text form-control" id="userGrid" placeholder="AA00aa" oninput="userGridUpdated();" style="width: 10em; display: inline-block;">
</div>
<div class="form-group spothole-card-text">
<label for="userGrid">Your grid:</label>
<input type="text" class="storeable-text form-control" id="userGrid" placeholder="AA00aa"
oninput="userGridUpdated();" style="width: 10em; display: inline-block;">
</div>
</div>
</div>

20
templates/cards/map-features.html
View File

@@ -3,37 +3,43 @@
<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>
<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>
<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();">
<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();">
<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();">
<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();">
<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>

10
templates/cards/number-of-alerts.html
View File

@@ -2,10 +2,12 @@
<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 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 %}
<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 %}
</select>
alerts
</p>

10
templates/cards/number-of-spots.html
View File

@@ -2,10 +2,12 @@
<div class="card-body">
<h5 class="card-title">Number of Spots</h5>
<p class="card-text spothole-card-text">Show up to
<select id="spots-to-fetch" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
{% for c in web_ui_options["spot-count"] %}
<option value="{{c}}" {% if web_ui_options["spot-count-default"] == c %}selected{% end %}>{{c}}</option>
{% end %}
<select id="spots-to-fetch" class="storeable-select form-select ms-2 me-2 d-inline-block"
oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
{% for c in web_ui_options["spot-count"] %}
<option value="{{c}}" {% if web_ui_options[
"spot-count-default"] == c %}selected{% end %}>{{c}}</option>
{% end %}
</select>
spots
</p>

17
templates/cards/qrz.html
View File

@@ -3,21 +3,28 @@
<h5 class="card-title">QRZ.com</h5>
<div class="card-text spothole-card-text">
<div class="form-check mb-2">
<input type="checkbox" class="storeable-checkbox form-check-input" id="qrz-enabled" onchange="saveSettings();">
<input type="checkbox" class="storeable-checkbox form-check-input" id="qrz-enabled"
onchange="saveSettings();">
<label for="qrz-enabled" class="form-check-label">Use data from QRZ.com</label>
</div>
<div class="mb-2">
<input type="text" class="storeable-text form-control" id="qrz-username" placeholder="Username (Callsign)" onchange="saveSettings();" autocomplete="username">
<input type="text" class="storeable-text form-control" id="qrz-username"
placeholder="Username (Callsign)" onchange="saveSettings();" autocomplete="username">
</div>
<div class="mb-2">
<input type="password" class="password-field form-control" id="qrz-password" placeholder="Password" data-remember-checkbox="qrz-remember-password" onchange="saveSettings();" autocomplete="current-password">
<input type="password" class="password-field form-control" id="qrz-password" placeholder="Password"
data-remember-checkbox="qrz-remember-password" onchange="saveSettings();"
autocomplete="current-password">
</div>
<div class="form-check">
<input type="checkbox" class="storeable-checkbox form-check-input" id="qrz-remember-password" onchange="saveSettings();">
<input type="checkbox" class="storeable-checkbox form-check-input" id="qrz-remember-password"
onchange="saveSettings();">
<label for="qrz-remember-password" class="form-check-label">Remember password</label>
</div>
<div class="mt-3">
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload();">Reload with this data</button>
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload();">Reload with
this data
</button>
</div>
<div class="mt-1">
<small>See <a href="/about#privacy">Privacy</a> for more information.</small>

6
templates/cards/spot-age.html
View File

@@ -2,9 +2,11 @@
<div class="card-body">
<h5 class="card-title">Spot Age</h5>
<p class="card-text spothole-card-text">Last
<select id="max-spot-age" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
<select id="max-spot-age" class="storeable-select form-select ms-2 me-2 d-inline-block"
oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
{% for a in web_ui_options["max-spot-age"] %}
<option value="{{a*60}}" {% if web_ui_options["max-spot-age-default"] == a*60 %}selected{% end %}>{{a}}</option>
<option value="{{a*60}}" {% if web_ui_options[
"max-spot-age-default"] == a*60 %}selected{% end %}>{{a}}</option>
{% end %}
</select>
minutes

77
templates/cards/table-columns-alerts.html
View File

@@ -2,34 +2,55 @@
<div class="card-body">
<h5 class="card-title">Table Columns</h5>
<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>
<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>
<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>
<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">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>
<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>
<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 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>
<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>
<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>
<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">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>
<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>
<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>

110
templates/cards/table-columns-spots.html
View File

@@ -2,46 +2,76 @@
<div class="card-body">
<h5 class="card-title">Table Columns</h5>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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 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>
<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 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>
<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>
<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>
<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>
<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>
<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>
<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>
<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 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>
<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>

3
templates/cards/time-zone.html
View File

@@ -2,7 +2,8 @@
<div class="card-body">
<h5 class="card-title">Time Zone</h5>
<p class="card-text spothole-card-text"> Use
<select id="timeZone" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="timeZoneUpdated();" style="width: 8em; display: inline-block;">
<select id="timeZone" class="storeable-select form-select ms-2 me-2 d-inline-block"
oninput="timeZoneUpdated();" style="width: 8em; display: inline-block;">
<option value="UTC" selected>UTC</option>
<option value="local">Local time</option>
</select>

2
templates/conditions.html
View File

@@ -284,7 +284,7 @@
</div>
<script src="/vendor/js/chart-4.4.9.umd.min.js"></script>
<script src="/js/conditions.js?v=1781901226"></script>
<script src="/js/conditions.js?v=1781901371"></script>
<script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script>

18
templates/map.html
View File

@@ -13,7 +13,7 @@
</div>
<div id="filters-area" class="appearing-panel card mb-3">
{% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
{% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
<div class="col">
@@ -54,7 +54,8 @@
{% module Template("cards/map-features.html", web_ui_options=web_ui_options) %}
</div>
<div class="col">
{% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
{% module Template("cards/color-scheme-and-band-color-scheme.html",
web_ui_options=web_ui_options) %}
</div>
</div>
</div>
@@ -92,10 +93,15 @@
<script src="/vendor/js/leaflet-workedallbritainireland.js"></script>
<script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
let spotProvidersEnabledByDefault = { % raw
json_encode(web_ui_options["spot-providers-enabled-by-default"]) %
}
;
</script>
<script src="/js/spotsbandsandmap.js?v=1781901227"></script>
<script src="/js/map.js?v=1781901227"></script>
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
<script src="/js/spotsbandsandmap.js?v=1781901371"></script>
<script src="/js/map.js?v=1781901371"></script>
<script>$(document).ready(function () {
$("#nav-link-map").addClass("active");
}); <!-- highlight active page in nav --></script>
{% end %}

6
templates/skeleton.html
View File

@@ -11,8 +11,10 @@
<meta property="og:title" content="Spothole"/>
<meta property="twitter:title" content="Spothole"/>
<meta name="description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
<meta property="og:description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
<meta name="description"
content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
<meta property="og:description"
content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
<link rel="canonical" href="https://spothole.app/"/>
<meta property="og:url" content="https://spothole.app/"/>
<meta property="og:image" content="https://spothole.app/img/banner.png"/>

37
templates/spots.html
View File

@@ -2,10 +2,16 @@
{% block content %}
<div id="intro-box" class="permanently-dismissible-box mt-3">
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<i class="fa-solid fa-circle-info"></i> <strong>What is Spothole?</strong><br/>Spothole is an aggregator of amateur radio spots from DX clusters and outdoor activity programmes. It's free for anyone to use and includes an API that developers can build other applications on. For more information, check out the <a href="/about" class="alert-link">"About" page</a>. If that sounds like nonsense to you, you can visit <a href="/about#faq" class="alert-link">the FAQ section</a> to learn more.
<button type="button" id="intro-box-dismiss" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<i class="fa-solid fa-circle-info"></i> <strong>What is Spothole?</strong><br/>Spothole is an aggregator of
amateur radio spots from DX clusters and outdoor activity programmes. It's free for anyone to use and includes
an API that developers can build other applications on. For more information, check out the <a href="/about"
class="alert-link">"About"
page</a>. If that sounds like nonsense to you, you can visit <a href="/about#faq" class="alert-link">the FAQ
section</a> to learn more.
<button type="button" id="intro-box-dismiss" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
</div>
<div class="mt-3">
@@ -63,7 +69,8 @@
{% module Template("cards/number-of-spots.html", web_ui_options=web_ui_options) %}
</div>
<div class="col">
{% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
{% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options)
%}
</div>
<div class="col">
{% module Template("cards/table-columns-spots.html", web_ui_options=web_ui_options) %}
@@ -96,16 +103,26 @@
</div>
<div id="table-container">
<table id="table" class="table"><thead><tr></tr></thead><tbody></tbody></table>
<table id="table" class="table">
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
let spotProvidersEnabledByDefault = { % raw
json_encode(web_ui_options["spot-providers-enabled-by-default"]) %
}
;
</script>
<script src="/js/spotsbandsandmap.js?v=1781901226"></script>
<script src="/js/spots.js?v=1781901226"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
<script src="/js/spotsbandsandmap.js?v=1781901371"></script>
<script src="/js/spots.js?v=1781901371"></script>
<script>$(document).ready(function () {
$("#nav-link-spots").addClass("active");
}); <!-- highlight active page in nav --></script>
{% end %}

6
templates/status.html
View File

@@ -59,9 +59,11 @@
</div>
</div>
<script src="/js/status.js?v=1781901226"></script>
<script src="/js/status.js?v=1781901371"></script>
<script>
$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
$(document).ready(function () {
$("#nav-link-status").addClass("active");
}); <!-- highlight active page in nav -->
</script>
{% end %}

33
templates/widgets/band-color-scheme.html
View File

@@ -1,13 +1,24 @@
<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>
<option value="RBN" {% if web_ui_options["band-color-scheme-default"] == "RBN" %}selected{% end %}>RBN</option>
<option value="Ham Rainbow" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow" %}selected{% end %}>Ham Rainbow</option>
<option value="Ham Rainbow (Reverse)" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow (Reverse)" %}selected{% end %}>Ham Rainbow (Reverse)</option>
<option value="Kate Morley" {% if web_ui_options["band-color-scheme-default"] == "Kate Morley" %}selected{% end %}>Kate Morley</option>
<option value="ColorBrewer" {% if web_ui_options["band-color-scheme-default"] == "ColorBrewer" %}selected{% end %}>ColorBrewer</option>
<option value="IWantHue" {% if web_ui_options["band-color-scheme-default"] == "IWantHue" %}selected{% end %}>IWantHue</option>
<option value="IWantHue (Color Blind)" {% if web_ui_options["band-color-scheme-default"] == "IWantHue (Color Blind)" %}selected{% end %}>IWantHue (Color Blind)</option>
<option value="Mokole" {% if web_ui_options["band-color-scheme-default"] == "Mokole" %}selected{% end %}>Mokole</option>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();"
style="display: inline-block;">
<option value="PSK Reporter" {% if web_ui_options[
"band-color-scheme-default"] == "PSK Reporter" %}selected{% end %}>PSK Reporter</option>
<option value="PSK Reporter (Adjusted)" {% if web_ui_options[
"band-color-scheme-default"] == "PSK Reporter (Adjusted)" %}selected{% end %}>PSK Reporter (Adjusted)</option>
<option value="RBN" {% if web_ui_options[
"band-color-scheme-default"] == "RBN" %}selected{% end %}>RBN</option>
<option value="Ham Rainbow" {% if web_ui_options[
"band-color-scheme-default"] == "Ham Rainbow" %}selected{% end %}>Ham Rainbow</option>
<option value="Ham Rainbow (Reverse)" {% if web_ui_options[
"band-color-scheme-default"] == "Ham Rainbow (Reverse)" %}selected{% end %}>Ham Rainbow (Reverse)</option>
<option value="Kate Morley" {% if web_ui_options[
"band-color-scheme-default"] == "Kate Morley" %}selected{% end %}>Kate Morley</option>
<option value="ColorBrewer" {% if web_ui_options[
"band-color-scheme-default"] == "ColorBrewer" %}selected{% end %}>ColorBrewer</option>
<option value="IWantHue" {% if web_ui_options[
"band-color-scheme-default"] == "IWantHue" %}selected{% end %}>IWantHue</option>
<option value="IWantHue (Color Blind)" {% if web_ui_options[
"band-color-scheme-default"] == "IWantHue (Color Blind)" %}selected{% end %}>IWantHue (Color Blind)</option>
<option value="Mokole" {% if web_ui_options[
"band-color-scheme-default"] == "Mokole" %}selected{% end %}>Mokole</option>
</select>

12
templates/widgets/color-scheme.html
View File

@@ -1,6 +1,10 @@
<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>
<option value="dark" {% if web_ui_options["color-scheme-default"] == "dark" %}selected{% end %}>Dark</option>
<select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();"
style="display: inline-block;">
<option value="auto" {% if web_ui_options[
"color-scheme-default"] == "auto" %}selected{% end %}>Automatic</option>
<option value="light" {% if web_ui_options[
"color-scheme-default"] == "light" %}selected{% end %}>Light</option>
<option value="dark" {% if web_ui_options[
"color-scheme-default"] == "dark" %}selected{% end %}>Dark</option>
</select>

3
templates/widgets/data-area-header.html
View File

@@ -4,7 +4,8 @@
Data
</div>
<div class="col-auto d-inline-flex">
<button id="close-data-button" type="button" class="btn-close btn-close" aria-label="Close" onclick="closeDataPanel();"></button>
<button id="close-data-button" type="button" class="btn-close btn-close" aria-label="Close"
onclick="closeDataPanel();"></button>
</div>
</div>
</div>

3
templates/widgets/display-area-header.html
View File

@@ -4,7 +4,8 @@
Display
</div>
<div class="col-auto d-inline-flex">
<button id="close-display-button" type="button" class="btn-close btn-close" aria-label="Close" onclick="closeDisplayPanel();"></button>
<button id="close-display-button" type="button" class="btn-close btn-close" aria-label="Close"
onclick="closeDisplayPanel();"></button>
</div>
</div>
</div>

3
templates/widgets/filters-area-header.html
View File

@@ -4,7 +4,8 @@
Filters
</div>
<div class="col-auto d-inline-flex">
<button id="close-filters-button" type="button" class="btn-close btn-close" aria-label="Close" onclick="closeFiltersPanel();"></button>
<button id="close-filters-button" type="button" class="btn-close btn-close" aria-label="Close"
onclick="closeFiltersPanel();"></button>
</div>
</div>
</div>

12
templates/widgets/filters-display-data-buttons.html
View File

@@ -1,5 +1,11 @@
<div class="d-inline-flex gap-1">
<button id="filters-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i><span class="hideonmobile">&nbsp;Filters</span></button>
<button id="display-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i><span class="hideonmobile">&nbsp;Display</span></button>
<button id="data-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleDataPanel();"><i class="fa-solid fa-database"></i><span class="hideonmobile">&nbsp;Your data</span></button>
<button id="filters-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button"
onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i><span
class="hideonmobile">&nbsp;Filters</span></button>
<button id="display-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button"
onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i><span
class="hideonmobile">&nbsp;Display</span></button>
<button id="data-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button"
onclick="toggleDataPanel();"><i class="fa-solid fa-database"></i><span
class="hideonmobile">&nbsp;Your data</span></button>
</div>