[feat](trx-frontend-http): add bandplan strip above spectrum waterfall
Add a bandplan display strip that shows IARU frequency allocations (CW, Phone, Digital, FM, Beacon, Satellite) above the spectrum plot. Includes IARU Region 1/2/3 data for all HF/VHF/UHF bands, a settings submenu for region selection and label toggle, and color-coded segments that pan/zoom with the spectrum view. https://claude.ai/code/session_01AyBktp6b8qFjchyyqwL7dv Signed-off-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -3235,6 +3235,98 @@ button:focus-visible, input:focus-visible, select:focus-visible {
|
||||
cursor: crosshair;
|
||||
touch-action: none;
|
||||
}
|
||||
/* ── Bandplan strip ─────────────────────────────────────────────────────────── */
|
||||
#spectrum-bandplan-strip {
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 80ms ease;
|
||||
z-index: 5;
|
||||
background: var(--bg-secondary, #121828);
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
#spectrum-bandplan-strip.bp-visible {
|
||||
height: 18px;
|
||||
overflow: hidden;
|
||||
border-bottom-color: var(--border-light, rgba(255,255,255,0.06));
|
||||
}
|
||||
.bp-segment {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid var(--bg-secondary, #121828);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
min-width: 0;
|
||||
}
|
||||
.bp-segment-label {
|
||||
font-size: 0.56rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 2px;
|
||||
pointer-events: none;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.bp-segment[data-mode="CW"] { background: rgba(74,144,217,0.55); color: #d0e4ff; }
|
||||
.bp-segment[data-mode="Phone"] { background: rgba(76,175,80,0.50); color: #d0f5d2; }
|
||||
.bp-segment[data-mode="Narrow"] { background: rgba(217,74,122,0.50); color: #ffd0e4; }
|
||||
.bp-segment[data-mode="FM"] { background: rgba(255,152,0,0.50); color: #fff0d0; }
|
||||
.bp-segment[data-mode="All"] { background: rgba(120,120,120,0.40); color: #ddd; }
|
||||
.bp-segment[data-mode="Beacon"] { background: rgba(156,39,176,0.50); color: #f0d0ff; }
|
||||
.bp-segment[data-mode="Satellite"]{ background: rgba(0,188,212,0.50); color: #d0f8ff; }
|
||||
|
||||
.bp-band-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.54rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.65;
|
||||
pointer-events: none;
|
||||
padding-left: 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Legend in settings */
|
||||
.bandplan-legend-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem 1.2rem;
|
||||
}
|
||||
.bandplan-legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text);
|
||||
}
|
||||
.bandplan-legend-swatch {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.bandplan-legend-swatch[data-mode="CW"] { background: rgba(74,144,217,0.75); }
|
||||
.bandplan-legend-swatch[data-mode="Phone"] { background: rgba(76,175,80,0.70); }
|
||||
.bandplan-legend-swatch[data-mode="Narrow"] { background: rgba(217,74,122,0.70); }
|
||||
.bandplan-legend-swatch[data-mode="FM"] { background: rgba(255,152,0,0.70); }
|
||||
.bandplan-legend-swatch[data-mode="All"] { background: rgba(120,120,120,0.55); }
|
||||
.bandplan-legend-swatch[data-mode="Beacon"] { background: rgba(156,39,176,0.70); }
|
||||
.bandplan-legend-swatch[data-mode="Satellite"]{ background: rgba(0,188,212,0.70); }
|
||||
|
||||
#spectrum-bookmark-axis {
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--overview-plot-height));
|
||||
|
||||
Reference in New Issue
Block a user