Ryan Malloy
613611d37a
PlatformIO/Arduino firmware for WEMOS/LOLIN S2 Mini: - 6-bit GPIO control (GPIOs 1-6) with glitch-free register writes - REST API: /status, /set, /config, /sweep endpoints - Web UI with PCB green theme, slider, presets, pin visualization - NVS persistence of attenuation setting across power cycles - Sweep mode for automated attenuation stepping - mDNS (attenuator.local), OTA updates, watchdog
420 lines
7.8 KiB
CSS
420 lines
7.8 KiB
CSS
/* HMC472A Attenuator Web UI - PCB Green Theme */
|
|
|
|
:root {
|
|
--bg: #131009;
|
|
--bg-elevated: #1a1610;
|
|
--bg-card: #221e17;
|
|
--accent-green: #3aaa62;
|
|
--accent-green-dim: #2d8a4e;
|
|
--accent-green-glow: rgba(58, 170, 98, 0.3);
|
|
--accent-gold: #dbb960;
|
|
--accent-gold-dim: #b39a4d;
|
|
--accent-gold-glow: rgba(219, 185, 96, 0.3);
|
|
--text: #e8e2d6;
|
|
--text-dim: #9a9488;
|
|
--text-muted: #6a645a;
|
|
--border: #3a352c;
|
|
--error: #d64545;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.container {
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
text-align: center;
|
|
padding: 1.5rem 0;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
header h1 {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
color: var(--accent-green);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
header h1 .icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--text-dim);
|
|
font-size: 0.875rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Sections */
|
|
section {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
section h2 {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* dB Display */
|
|
.display-section {
|
|
text-align: center;
|
|
background: var(--bg);
|
|
border-color: var(--accent-green-dim);
|
|
}
|
|
|
|
.db-display {
|
|
font-family: var(--font-mono);
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
color: var(--accent-green);
|
|
text-shadow: 0 0 20px var(--accent-green-glow);
|
|
line-height: 1;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.db-display .db-unit {
|
|
font-size: 1.5rem;
|
|
color: var(--text-dim);
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.step-display {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* Slider */
|
|
.slider-section {
|
|
padding: 1.25rem 1rem;
|
|
}
|
|
|
|
#db-slider {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 8px;
|
|
background: var(--bg);
|
|
border-radius: 4px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#db-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--accent-green);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px var(--accent-green-glow);
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
#db-slider::-webkit-slider-thumb:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
#db-slider::-moz-range-thumb {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--accent-green);
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px var(--accent-green-glow);
|
|
}
|
|
|
|
.slider-labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Preset Buttons */
|
|
.preset-buttons {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.preset-btn {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
padding: 0.75rem 0.5rem;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.preset-btn:hover {
|
|
background: var(--bg-elevated);
|
|
border-color: var(--accent-green-dim);
|
|
}
|
|
|
|
.preset-btn:active,
|
|
.preset-btn.active {
|
|
background: var(--accent-green-dim);
|
|
border-color: var(--accent-green);
|
|
color: var(--bg);
|
|
}
|
|
|
|
/* Pin Visualization */
|
|
.pin-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.pin {
|
|
text-align: center;
|
|
padding: 0.5rem 0.25rem;
|
|
background: var(--bg);
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.pin-indicator {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
margin: 0 auto 0.375rem;
|
|
background: var(--accent-green);
|
|
box-shadow: 0 0 8px var(--accent-green-glow);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.pin.low .pin-indicator {
|
|
background: var(--accent-gold);
|
|
box-shadow: 0 0 8px var(--accent-gold-glow);
|
|
}
|
|
|
|
.pin-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.pin-db {
|
|
font-size: 0.625rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.pin-legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
margin-top: 0.75rem;
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.legend-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.legend-dot.high {
|
|
background: var(--accent-green);
|
|
}
|
|
|
|
.legend-dot.low {
|
|
background: var(--accent-gold);
|
|
}
|
|
|
|
/* Sweep Controls */
|
|
.sweep-controls {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.sweep-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
font-family: var(--font-sans);
|
|
font-size: 0.875rem;
|
|
padding: 0.625rem 0.75rem;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.sweep-btn .icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.sweep-btn:hover {
|
|
background: var(--bg-elevated);
|
|
border-color: var(--accent-green-dim);
|
|
}
|
|
|
|
.sweep-btn.active {
|
|
background: var(--accent-green-dim);
|
|
border-color: var(--accent-green);
|
|
color: var(--bg);
|
|
}
|
|
|
|
.sweep-btn.stop:hover {
|
|
border-color: var(--error);
|
|
}
|
|
|
|
.sweep-config {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sweep-config label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.sweep-config input {
|
|
width: 80px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
padding: 0.375rem 0.5rem;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sweep-config input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-green-dim);
|
|
}
|
|
|
|
.sweep-status {
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
color: var(--accent-gold);
|
|
min-height: 1.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: 1rem 0;
|
|
border-top: 1px solid var(--border);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.status-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.75rem 1.5rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ota-section {
|
|
text-align: center;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.ota-btn {
|
|
font-size: 0.75rem;
|
|
padding: 0.375rem 0.75rem;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.ota-btn:hover {
|
|
color: var(--text);
|
|
border-color: var(--text-dim);
|
|
}
|
|
|
|
.ota-btn.enabled {
|
|
color: var(--accent-green);
|
|
border-color: var(--accent-green-dim);
|
|
}
|
|
|
|
/* Icons */
|
|
.icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 400px) {
|
|
.preset-buttons {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.pin-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.db-display {
|
|
font-size: 2.75rem;
|
|
}
|
|
}
|