Logo, icons and headers #7

This commit is contained in:
Ian Renton
2025-10-02 10:49:54 +01:00
parent 3addafb8b9
commit 10f8d9b4ed
12 changed files with 66 additions and 21 deletions

BIN
images/icon.xcf Normal file

Binary file not shown.

BIN
images/logo.xcf Normal file

Binary file not shown.

46
webassets/about.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>(S)pothole</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="icon" type="image/png" href="img/icon-512.png">
<link rel="alternate icon" type="image/png" href="img/icon-192.png">
<link rel="alternate icon" type="image/png" href="img/icon-32.png">
<link rel="alternate icon" type="image/png" href="img/icon-16.png">
<link rel="alternate icon" type="image/x-icon" href="img/favicon.ico">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light justify-content-between border-bottom" style="background-color: white;">
<a class="navbar-brand" href="/">
<img src="/img/logo.png" width="192" height="60" alt="Spothole">
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="/about" class="nav-link">About</a></li>
<li class="nav-item"><a href="/apidocs" class="nav-link">API</a></li>
</ul>
</nav>
<main>
<div id="info-container">
<h3>About (S)pothole</h3>
<p>(S)pothole 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 outfoor activity programmes for amateur radio, (S)pothole 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>(S)pothole 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>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>.</p>
<p><a href="/">&laquo; Back home</a></p>
</div>
</main>
</div>
</body>
</html>

View File

@@ -4,7 +4,15 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>API Documentation</title> <title>API Documentation</title>
</head> </head>
<body> <body> <nav class="navbar navbar-expand-lg navbar-light justify-content-between border-bottom" style="background-color: white;">
<a class="navbar-brand" href="/">
<img src="/img/logo.png" width="192" height="60" alt="Spothole">
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="/about" class="nav-link">About</a></li>
<li class="nav-item"><a href="/apidocs" class="nav-link">API</a></li>
</ul>
</nav>
<redoc spec-url="/apidocs/openapi.yml"></redoc> <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>
</body> </body>

View File

@@ -1,6 +1,5 @@
#info-container{ #info-container{
width: 100%; width: 100%;
display: none;
} }
@media (min-width: 768px) { @media (min-width: 768px) {

BIN
webassets/img/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

BIN
webassets/img/icon-16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 698 B

BIN
webassets/img/icon-192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
webassets/img/icon-32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
webassets/img/icon-512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
webassets/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

View File

@@ -10,6 +10,12 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="icon" type="image/png" href="img/icon-512.png">
<link rel="alternate icon" type="image/png" href="img/icon-192.png">
<link rel="alternate icon" type="image/png" href="img/icon-32.png">
<link rel="alternate icon" type="image/png" href="img/icon-16.png">
<link rel="alternate icon" type="image/x-icon" href="img/favicon.ico">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
@@ -20,32 +26,18 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> <nav class="navbar navbar-expand-lg navbar-light justify-content-between border-bottom" style="background-color: white;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> <a class="navbar-brand" href="/">
<span class="fs-4">(S)pothole</span> <img src="/img/logo.png" width="192" height="60" alt="Spothole">
</a> </a>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"><a href="#" onclick="showInfo()" class="nav-link">About</a></li> <li class="nav-item"><a href="/about" class="nav-link">About</a></li>
<li class="nav-item"><a href="/apidocs" class="nav-link">API</a></li> <li class="nav-item"><a href="/apidocs" class="nav-link">API</a></li>
<li class="nav-item"><a href="#" class="nav-link">Status</a></li>
<li class="nav-item"><a href="#" class="nav-link">Filters</a></li>
</ul> </ul>
</header> </nav>
<main> <main>
<div id="info-container">
<h3>About (S)pothole</h3>
<p>(S)pothole 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 outfoor activity programmes for amateur radio, (S)pothole 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>(S)pothole 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>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>.</p>
<p><a href="#" onclick="hideInfo()">&laquo; Back to the spots table</a></p>
</div>
<div id="table-container"> <div id="table-container">
<p>Latest spots as of XXXX. Updating in XXX seconds...</p> <p>Latest spots as of XXXX. Updating in XXX seconds...</p>
<div id="table-container-inner"></div> <div id="table-container-inner"></div>