diff --git a/data/index.html b/data/index.html index d00c656..2392bf1 100644 --- a/data/index.html +++ b/data/index.html @@ -109,16 +109,85 @@ background: #ef4444; } + .main-row { + flex: 1; + display: flex; + min-height: 0; + } + .terminal-container { flex: 1; padding: 10px; overflow: hidden; + min-width: 0; } - + #terminal { height: 100%; } - + + /* Right-side comms panel (MeshCore today, more later) */ + .comms-panel { + flex: 0 0 340px; + display: flex; + flex-direction: column; + background: #16213e; + border-left: 1px solid #0f3460; + padding: 10px 12px; + gap: 10px; + min-height: 0; + } + .comms-panel h2 { + margin: 0; + font-size: 1em; + color: #e94560; + display: flex; + align-items: center; + justify-content: space-between; + } + .comms-cfg { + display: flex; + flex-direction: column; + gap: 6px; + font-size: 0.85em; + } + .comms-cfg input { + background: #0f3460; + color: #fff; + border: 1px solid #1a4a7a; + padding: 6px 8px; + border-radius: 4px; + font-size: 0.9em; + width: 100%; + } + .comms-cfg .row { display: flex; gap: 6px; } + .comms-cfg .row input { flex: 1; } + #meshMessages { + flex: 1; + overflow-y: auto; + background: #0f1a30; + border: 1px solid #0f3460; + border-radius: 4px; + padding: 6px 8px; + font-family: Menlo, Monaco, "Courier New", monospace; + font-size: 0.8em; + line-height: 1.4; + min-height: 60px; + } + .mc-msg { margin-bottom: 4px; word-break: break-word; } + .mc-msg .who { color: #60a5fa; } + .mc-msg.tx .who { color: #4ade80; } + .mc-msg .meta { color: #666; font-size: 0.85em; } + .mc-empty { color: #666; } + .comms-send { display: flex; gap: 6px; } + .comms-send input { flex: 1; } + .mesh-dot { + width: 8px; height: 8px; border-radius: 50%; + background: #666; display: inline-block; + } + .mesh-dot.up { background: #4ade80; } + .mesh-dot.down { background: #ef4444; } + .footer { background: #16213e; padding: 8px 20px; @@ -138,6 +207,14 @@ display: none; } } + @media (max-width: 900px) { + .main-row { flex-direction: column; } + .comms-panel { + flex: 0 0 45vh; + border-left: none; + border-top: 1px solid #0f3460; + } + }
@@ -194,10 +271,31 @@