Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-25 07:10:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: UI improvements and Space category

Browse Source 
- Add new "Space" category with Satellite and ISS SSTV modes
- Rename "Scanner" to "Listening Post"
- SSTV now uses global SDR device selector
- Meshtastic map markers more visible (stronger glow, larger size)
- CSS layout fixes using flex instead of fixed heights

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-29 22:25:31 +00:00
parent 05d96b6077
commit d28d371caf
6 changed files with 63 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
static/css/index.css
View File

@@ -1769,8 +1769,7 @@ header h1 .tagline {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-size: 11px;
background: var(--bg-primary); background: var(--bg-primary);
min-height: 400px; min-height: 0; /* Allow shrinking in flex context */
max-height: 600px;
} }
.output-content::-webkit-scrollbar { .output-content::-webkit-scrollbar {
@@ -2516,9 +2515,8 @@ header h1 .tagline {
/* Satellite Dashboard Embed */ /* Satellite Dashboard Embed */
.satellite-dashboard-embed { .satellite-dashboard-embed {
width: 100%; width: 100%;
height: calc(100vh - 200px); flex: 1;
min-height: 700px; min-height: 400px;
max-height: 900px;
background: var(--bg-primary); background: var(--bg-primary);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@@ -3322,8 +3320,8 @@ header h1 .tagline {
background: var(--bg-secondary); background: var(--bg-secondary);
margin: 0 15px 10px 15px; margin: 0 15px 10px 15px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
height: calc(100vh - 200px); flex: 1;
min-height: 400px; min-height: 0; /* Allow shrinking in flex context */
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
@@ -3799,8 +3797,8 @@ header h1 .tagline {
@media (max-width: 1200px) { @media (max-width: 1200px) {
.wifi-layout-container { .wifi-layout-container {
height: auto; flex: 1;
max-height: calc(100vh - 200px); min-height: 0;
} }
.wifi-main-content { .wifi-main-content {
@@ -3836,8 +3834,8 @@ header h1 .tagline {
background: var(--bg-secondary); background: var(--bg-secondary);
margin: 0 15px 10px 15px; margin: 0 15px 10px 15px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
height: calc(100vh - 200px); flex: 1;
min-height: 400px; min-height: 0; /* Allow shrinking in flex context */
} }
.bt-visuals-column { .bt-visuals-column {
@@ -4518,8 +4516,8 @@ header h1 .tagline {
@media (max-width: 1200px) { @media (max-width: 1200px) {
.bt-layout-container { .bt-layout-container {
flex-direction: column; flex-direction: column;
height: auto; flex: 1;
max-height: calc(100vh - 200px); min-height: 0;
} }
.bt-layout-container .wifi-visuals { .bt-layout-container .wifi-visuals {

39
static/css/modes/meshtastic.css
View File

@@ -420,6 +420,12 @@
background: var(--bg-primary); background: var(--bg-primary);
} }
/* Override Leaflet's default div-icon styling for mesh markers */
.mesh-marker-wrapper.leaflet-div-icon {
background: transparent;
border: none;
}
.mesh-map .leaflet-popup-content-wrapper { .mesh-map .leaflet-popup-content-wrapper {
background: var(--bg-card); background: var(--bg-card);
color: var(--text-primary); color: var(--text-primary);
@@ -437,37 +443,42 @@
margin: 10px 12px; margin: 10px 12px;
} }
/* Custom node marker */ /* Custom node marker - high visibility on dark maps */
.mesh-node-marker { .mesh-node-marker {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 28px; width: 32px;
height: 28px; height: 32px;
background: var(--accent-cyan); background: #00ffff; /* Bright cyan for maximum visibility */
border: 2px solid #fff; border: 3px solid #ffffff;
border-radius: 50%; border-radius: 50%;
box-shadow: box-shadow:
0 2px 6px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.6),
0 0 12px 4px rgba(0, 212, 255, 0.5); /* Cyan glow */ 0 0 20px 8px rgba(0, 255, 255, 0.7), /* Strong outer glow */
inset 0 0 8px rgba(255, 255, 255, 0.3); /* Inner highlight */
color: #000; color: #000;
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 10px; font-size: 11px;
font-weight: bold; font-weight: bold;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
} }
.mesh-node-marker.local { .mesh-node-marker.local {
background: var(--accent-green); background: #00ff88; /* Bright green for local node */
box-shadow: box-shadow:
0 2px 6px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.6),
0 0 12px 4px rgba(34, 197, 94, 0.5); /* Green glow */ 0 0 20px 8px rgba(0, 255, 136, 0.7), /* Strong green glow */
inset 0 0 8px rgba(255, 255, 255, 0.3);
} }
.mesh-node-marker.stale { .mesh-node-marker.stale {
background: var(--text-dim); background: #888888;
opacity: 0.7; border-color: #aaaaaa;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* No glow for stale */ opacity: 0.8;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.4),
0 0 8px 2px rgba(136, 136, 136, 0.3); /* Subtle glow for stale */
} }
/* ============================================ /* ============================================

6
static/js/modes/meshtastic.js
View File

@@ -625,9 +625,9 @@ const Meshtastic = (function() {
const icon = L.divIcon({ const icon = L.divIcon({
className: 'mesh-marker-wrapper', className: 'mesh-marker-wrapper',
html: `<div class="${markerClass}">${shortName.slice(0, 2).toUpperCase()}</div>`, html: `<div class="${markerClass}">${shortName.slice(0, 2).toUpperCase()}</div>`,
iconSize: [28, 28], iconSize: [32, 32],
iconAnchor: [14, 14], iconAnchor: [16, 16],
popupAnchor: [0, -14] popupAnchor: [0, -16]
}); });
// Build telemetry section // Build telemetry section

3
static/js/modes/sstv.js
View File

@@ -350,7 +350,8 @@ const SSTV = (function() {
*/ */
async function start() { async function start() {
const freqInput = document.getElementById('sstvFrequency'); const freqInput = document.getElementById('sstvFrequency');
const deviceSelect = document.getElementById('sstvDevice'); // Use the global SDR device selector
const deviceSelect = document.getElementById('deviceSelect');
const frequency = parseFloat(freqInput?.value || ISS_FREQ); const frequency = parseFloat(freqInput?.value || ISS_FREQ);
const device = parseInt(deviceSelect?.value || '0', 10); const device = parseInt(deviceSelect?.value || '0', 10);

33
templates/index.html
View File

@@ -135,7 +135,7 @@
<!-- SDR / Radio Frequency --> <!-- SDR / Radio Frequency -->
<div class="mode-category"> <div class="mode-category">
<h3 class="mode-category-title"><span class="mode-category-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg></span> SDR / Radio</h3> <h3 class="mode-category-title"><span class="mode-category-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg></span> SDR / RF</h3>
<div class="mode-grid mode-grid-compact"> <div class="mode-grid mode-grid-compact">
<button class="mode-card mode-card-sm" onclick="selectMode('pager')"> <button class="mode-card mode-card-sm" onclick="selectMode('pager')">
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/><line x1="8" y1="10" x2="16" y2="10"/><line x1="8" y1="14" x2="12" y2="14"/></svg></span> <span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/><line x1="8" y1="10" x2="16" y2="10"/><line x1="8" y1="14" x2="12" y2="14"/></svg></span>
@@ -145,6 +145,10 @@
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49"/></svg></span> <span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49"/></svg></span>
<span class="mode-name">433MHz</span> <span class="mode-name">433MHz</span>
</button> </button>
<button class="mode-card mode-card-sm" onclick="selectMode('rtlamr')">
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span>
<span class="mode-name">Meters</span>
</button>
<a href="/adsb/dashboard" class="mode-card mode-card-sm" style="text-decoration: none;"> <a href="/adsb/dashboard" class="mode-card mode-card-sm" style="text-decoration: none;">
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z"/></svg></span> <span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z"/></svg></span>
<span class="mode-name">Aircraft</span> <span class="mode-name">Aircraft</span>
@@ -157,17 +161,9 @@
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg></span> <span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg></span>
<span class="mode-name">APRS</span> <span class="mode-name">APRS</span>
</button> </button>
<button class="mode-card mode-card-sm" onclick="selectMode('rtlamr')">
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v4m0 12v4M2 12h4m12 0h4"/></svg></span>
<span class="mode-name">Meters</span>
</button>
<button class="mode-card mode-card-sm" onclick="selectMode('satellite')">
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 7L9 3 5 7l4 4"/><path d="m17 11 4 4-4 4-4-4"/><path d="m8 12 4 4 6-6-4-4-6 6"/></svg></span>
<span class="mode-name">Satellite</span>
</button>
<button class="mode-card mode-card-sm" onclick="selectMode('listening')"> <button class="mode-card mode-card-sm" onclick="selectMode('listening')">
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg></span> <span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg></span>
<span class="mode-name">Scanner</span> <span class="mode-name">Listening Post</span>
</button> </button>
<button class="mode-card mode-card-sm" onclick="selectMode('spystations')"> <button class="mode-card mode-card-sm" onclick="selectMode('spystations')">
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><circle cx="12" cy="12" r="2"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/></svg></span> <span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><circle cx="12" cy="12" r="2"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/></svg></span>
@@ -205,6 +201,21 @@
</button> </button>
</div> </div>
</div> </div>
<!-- Space -->
<div class="mode-category">
<h3 class="mode-category-title"><span class="mode-category-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg></span> Space</h3>
<div class="mode-grid mode-grid-compact">
<button class="mode-card mode-card-sm" onclick="selectMode('satellite')">
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 7L9 3 5 7l4 4"/><path d="m17 11 4 4-4 4-4-4"/><path d="m8 12 4 4 6-6-4-4-6 6"/><path d="m16 8 3-3"/><path d="M9 21a6 6 0 0 0-6-6"/></svg></span>
<span class="mode-name">Satellite</span>
</button>
<button class="mode-card mode-card-sm" onclick="selectMode('sstv')">
<span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M3 9h2"/><path d="M19 9h2"/><path d="M3 15h2"/><path d="M19 15h2"/></svg></span>
<span class="mode-name">ISS SSTV</span>
</button>
</div>
</div>
</div> </div>
</div> </div>
@@ -2604,7 +2615,7 @@
// Show RTL-SDR device section for modes that use it // Show RTL-SDR device section for modes that use it
const rtlDeviceSection = document.getElementById('rtlDeviceSection'); const rtlDeviceSection = document.getElementById('rtlDeviceSection');
if (rtlDeviceSection) rtlDeviceSection.style.display = (mode === 'pager' || mode === 'sensor' || mode === 'rtlamr' || mode === 'listening' || mode === 'aprs') ? 'block' : 'none'; if (rtlDeviceSection) rtlDeviceSection.style.display = (mode === 'pager' || mode === 'sensor' || mode === 'rtlamr' || mode === 'listening' || mode === 'aprs' || mode === 'sstv') ? 'block' : 'none';
// Toggle mode-specific tool status displays // Toggle mode-specific tool status displays
const toolStatusPager = document.getElementById('toolStatusPager'); const toolStatusPager = document.getElementById('toolStatusPager');

6
templates/partials/modes/sstv.html
View File

@@ -14,12 +14,6 @@
<label>Frequency (MHz)</label> <label>Frequency (MHz)</label>
<input type="number" id="sstvFrequency" value="145.800" step="0.001" min="100" max="500"> <input type="number" id="sstvFrequency" value="145.800" step="0.001" min="100" max="500">
</div> </div>
<div class="form-group">
<label>SDR Device</label>
<select id="sstvDevice">
<option value="0">Device 0</option>
</select>
</div>
</div> </div>
<div class="section"> <div class="section">