Separate colours and icons out of the Spothole API and re-implement them in the client; provide new colour schemes. #88

This commit is contained in:
Ian Renton
2025-12-30 19:08:27 +00:00
parent 5bf45dba46
commit 06d582ae2d
30 changed files with 717 additions and 343 deletions

View File

@@ -63,7 +63,11 @@
<p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
</div>
<script src="/js/common.js?v=3"></script>
<script src="/js/ham-utils/utils.js?v=5"></script>
<script src="/js/ham-utils/storage.js?v=5"></script>
<script src="/js/ham-utils/ui.js?v=5"></script>
<script src="/js/ham-utils/geo.js?v=5"></script>
<script src="/js/common.js?v=5"></script>
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

View File

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

View File

@@ -168,8 +168,12 @@
</div>
<script src="/js/common.js?v=3"></script>
<script src="/js/alerts.js?v=3"></script>
<script src="/js/ham-utils/utils.js?v=5"></script>
<script src="/js/ham-utils/storage.js?v=5"></script>
<script src="/js/ham-utils/ui.js?v=5"></script>
<script src="/js/ham-utils/geo.js?v=5"></script>
<script src="/js/common.js?v=5"></script>
<script src="/js/alerts.js?v=5"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

View File

@@ -117,6 +117,11 @@
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
<label class="form-check-label" for="darkMode">Dark mode</label>
</div>
<p class="card-text spothole-card-text">
Band color scheme<br/>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
</select>
</p>
</div>
</div>
</div>
@@ -129,9 +134,13 @@
</div>
<script src="/js/common.js?v=3"></script>
<script src="/js/spotsbandsandmap.js?v=3"></script>
<script src="/js/bands.js?v=3"></script>
<script src="/js/ham-utils/utils.js?v=5"></script>
<script src="/js/ham-utils/storage.js?v=5"></script>
<script src="/js/ham-utils/ui.js?v=5"></script>
<script src="/js/ham-utils/geo.js?v=5"></script>
<script src="/js/common.js?v=5"></script>
<script src="/js/spotsbandsandmap.js?v=5"></script>
<script src="/js/bands.js?v=5"></script>
<script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

View File

@@ -44,6 +44,7 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
</head>
<body>

View File

@@ -129,6 +129,11 @@
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
<label class="form-check-label" for="darkMode">Dark mode</label>
</div>
<p class="card-text spothole-card-text">
Band color scheme<br/>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
</select>
</p>
</div>
</div>
</div>
@@ -147,9 +152,13 @@
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
<script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
<script src="/js/common.js?v=3"></script>
<script src="/js/spotsbandsandmap.js?v=3"></script>
<script src="/js/map.js?v=3"></script>
<script src="/js/ham-utils/utils.js?v=5"></script>
<script src="/js/ham-utils/storage.js?v=5"></script>
<script src="/js/ham-utils/ui.js?v=5"></script>
<script src="/js/ham-utils/geo.js?v=5"></script>
<script src="/js/common.js?v=5"></script>
<script src="/js/spotsbandsandmap.js?v=5"></script>
<script src="/js/map.js?v=5"></script>
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

View File

@@ -154,12 +154,17 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Theme</h5>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
<label class="form-check-label" for="darkMode">Dark mode</label>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
<label class="form-check-label" for="darkMode">Dark mode</label>
</div>
</div>
<p class="card-text spothole-card-text">
Band color scheme<br/>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
</select>
</p>
</div>
</div>
</div>
@@ -218,9 +223,13 @@
</div>
<script src="/js/common.js?v=3"></script>
<script src="/js/spotsbandsandmap.js?v=3"></script>
<script src="/js/spots.js?v=4"></script>
<script src="/js/ham-utils/utils.js?v=5"></script>
<script src="/js/ham-utils/storage.js?v=5"></script>
<script src="/js/ham-utils/ui.js?v=5"></script>
<script src="/js/ham-utils/geo.js?v=5"></script>
<script src="/js/common.js?v=5"></script>
<script src="/js/spotsbandsandmap.js?v=5"></script>
<script src="/js/spots.js?v=5"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

View File

@@ -3,8 +3,12 @@
<div id="status-container" class="row row-cols-1 row-cols-md-4 g-4 mt-4"></div>
<script src="/js/common.js?v=3"></script>
<script src="/js/status.js?v=3"></script>
<script src="/js/ham-utils/utils.js?v=5"></script>
<script src="/js/ham-utils/storage.js?v=5"></script>
<script src="/js/ham-utils/ui.js?v=5"></script>
<script src="/js/ham-utils/geo.js?v=5"></script>
<script src="/js/common.js?v=5"></script>
<script src="/js/status.js?v=5"></script>
<script>$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}