Permanently dismissable blue banner on first load. Closes #31

This commit is contained in:
Ian Renton
2025-10-07 20:04:32 +01:00
parent a83c787ffe
commit ff8cac274a
5 changed files with 43 additions and 15 deletions

View File

@@ -1,29 +1,31 @@
% rebase('webpage_base.tpl') % rebase('webpage_base.tpl')
<div id="info-container" class="mt-4"> <div id="info-container" class="mt-4">
<h2>About Spothole</h2> <h2 class="mt-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>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 large 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>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 large 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 auto-generated <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>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>. If you want to run your own copy of Spothole, or start modifying it for your own purposes, the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a> contains a description of how the software works and how it's laid out, as well as instructions for configuring systemd, nginx and anything else you might need to run your own server.</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>. If you want to run your own copy of Spothole, or start modifying it for your own purposes, the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a> contains a description of how the software works and how it's laid out, as well as instructions for configuring systemd, nginx and anything else you might need to run your own server.</p>
<p>Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), the APRS Internet Service (APRS-IS), POTA, SOTA, WWFF, GMA, WWBOTA, HEMA, and Parks 'n' Peaks.</p> <p>Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), the APRS Internet Service (APRS-IS), POTA, SOTA, WWFF, GMA, WWBOTA, HEMA, and Parks 'n' Peaks.</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 README.</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 README.</p>
<h2 id="faq">FAQ</h2> <h2 id="faq" class="mt-4">FAQ</h2>
<h4>"Spots"? "DX Clusters"? What does any of this mean?</h4> <h4 class="mt-4">"Spots"? "DX Clusters"? What does any of this mean?</h4>
<p>This is a tool for amateur, or "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>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.</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>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>How is this better than DXheat, DXsummit, POTA's own website, etc?</h4> <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. 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 spotted the "DX" operator. "Modes" are the type of communication they are using. 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">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>It's probably not? But it's nice to have choice.</p>
<p>I think it's got two key advantages over those sites:</p> <p>I think it's got two key advantages over those sites:</p>
<ol><li>It provides a public, well-documented API 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> <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 already, and it's easy to add more. Since it's open source, anyone can contribute a new data source and share it with the community.</li></ol> <li>It grabs data from a lot more sources, and it's easy to add more. Since it's open source, anyone can contribute a new data source and share it with the community.</li></ol>
<h4>Why does a website ask me if I want to install it?</h4> <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>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>Installing Spothole on your phone is completely optional, the website works exactly the same way as the "app" does.</p>
<h4>What licence does Spothole use?</h4> <h4 class="mt-4">What licence does Spothole use?</h4>
<p>Spothole 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 id="privacy">Privacy</h2> <h2 id="privacy" class="mt-4">Privacy</h2>
<p>Spothole collects no data about you, and there is no way to enter personally identifying information into the site apart from by spotting and alerting through Spothole or the various services it connects to. All spots and alerts are "timed out" and deleted from the system after a set interval, which by default is one hour for spots and one week for alerts.</p> <p>Spothole collects no data about you, and there is no way to enter personally identifying information into the site apart from by spotting and alerting through Spothole or the various services it connects to. All spots and alerts are "timed out" and deleted from the system after a set interval, which by default is one hour for spots and one week for alerts.</p>
<p>Settings you select from Spothole's menus are sent to the server, in order to provide the data with the requested filters. They are also stored in your browser's local storage, so that your preferences are remembered between sessions.</p> <p>Settings you select from Spothole's menus are sent to the server, in order to provide the data with the requested filters. They are also stored in your browser's local storage, so that your preferences are remembered between sessions.</p>
<p>There are no trackers, no ads, and no cookies.</p> <p>There are no trackers, no ads, and no cookies.</p>

View File

@@ -3,11 +3,18 @@
<!-- todo remove on release --> <!-- todo remove on release -->
<div class="mt-3"> <div class="mt-3">
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <div class="alert alert-warning alert-dismissible fade show" role="alert">
<i class="fa-solid fa-triangle-exclamation"></i> <strong>This is a pre-release version of Spothole!</strong> Many features of the user interface have not been completed yet, the API will almost certainly change, and even the URL is not final. Please do not build anything on the Spothole API yet. You can <a href="https://git.ianrenton.com/ian/spothole/issues" class="alert-link">check the list of outstanding features here</a>. There are contact details on <a href="https://ianrenton.com/" class="alert-link">my website</a> if you need to get in touch. There is no timescale to complete it as it's just a hobby project, but it's open source so feel free to contribute!<br/>QRX QRX DE M0TRT SK :) <i class="fa-solid fa-triangle-exclamation"></i> <strong>This is a pre-release version of Spothole!</strong><br/>Several features of the user interface have not been completed yet, and the API could change between now and the time that the software is released. Please do not build anything on the Spothole API yet. You can <a href="https://git.ianrenton.com/ian/spothole/issues" class="alert-link">check the list of outstanding features here</a>. There are contact details on <a href="https://ianrenton.com/" class="alert-link">my website</a> if you need to get in touch. There is no timescale to complete it as it's just a hobby project, but it's open source so feel free to contribute!<br/>QRX QRX DE M0TRT SK :)
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div> </div>
</div> </div>
<div id="intro-box" class="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>
<div class="mt-3"> <div class="mt-3">
<div class="row"> <div class="row">
<div class="col-auto me-auto pt-3"> <div class="col-auto me-auto pt-3">

View File

@@ -5,6 +5,13 @@
} }
/* INTRO/WARNING BOXES */
#intro-box {
display: none;
}
/* GENERAL PAGE LAYOUT */ /* GENERAL PAGE LAYOUT */
div.container { div.container {

View File

@@ -167,7 +167,7 @@ function loadOptions() {
// Populate the filters panel // Populate the filters panel
$("#settings-container").append(generateFilterCard("DX Continent", "dx_continent", options["continents"])); $("#settings-container").append(generateFilterCard("DX Continent", "dx_continent", options["continents"]));
$("#settings-container").append(generateFilterCard("Sources", "source", options["spot_sources"])); $("#settings-container").append(generateFilterCard("Sources", "source", options["alert_sources"]));
// Load settings from settings storage // Load settings from settings storage
loadSettings(); loadSettings();

View File

@@ -403,6 +403,16 @@ function setUpEventListeners() {
}); });
} }
// Display the intro box, unless the user has already dismissed it once.
function displayIntroBox() {
if (localStorage.getItem("intro-box-dismissed") == null) {
$("#intro-box").show();
}
$("#intro-box-dismiss").click(function() {
localStorage.setItem("intro-box-dismissed", true);
});
}
// Startup // Startup
$(document).ready(function() { $(document).ready(function() {
// Call loadOptions(), this will then trigger loading spots and setting up timers. // Call loadOptions(), this will then trigger loading spots and setting up timers.
@@ -411,4 +421,6 @@ $(document).ready(function() {
setInterval(updateRefreshDisplay, 1000); setInterval(updateRefreshDisplay, 1000);
// Set up event listeners // Set up event listeners
setUpEventListeners(); setUpEventListeners();
// Display intro box
displayIntroBox();
}); });