new privacy features
This commit is contained in:
parent
ddf7817d5c
commit
c90b6c5c39
4 changed files with 1248 additions and 24 deletions
|
|
@ -55,6 +55,7 @@ svg.port-icon { width: 24px; height: 24px; }
|
|||
svg.signal-icon { width: 16px; height: 16px; }
|
||||
.signal-bar { fill: #ddd; transition: fill 0.2s; }
|
||||
.signal-bar.active { fill: var(--network-green); }
|
||||
.signal-icon.offline .signal-bar.active { fill: #9ca3af; }
|
||||
|
||||
.graph-container { width: 100%; height: 220px; background: #fafafa; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; }
|
||||
canvas#trafficGraph { width: 100%; height: 100%; display: block; }
|
||||
|
|
@ -360,6 +361,24 @@ canvas#trafficGraph { width: 100%; height: 100%; display: block; }
|
|||
body { padding: 12px; }
|
||||
.grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.project-board {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.project-board a {
|
||||
color: var(--text-main);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
.project-board a:hover { text-decoration: underline; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -413,6 +432,14 @@ canvas#trafficGraph { width: 100%; height: 100%; display: block; }
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-board">
|
||||
<span aria-hidden="true"><strong>Git</strong></span>
|
||||
<span>
|
||||
Kaya source:
|
||||
<a href="https://git.protogen.engineering/racks/kaya-go" target="_blank" rel="noopener noreferrer">https://git.protogen.engineering/racks/kaya-go</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Tooltip Element -->
|
||||
<div id="tooltipEl" class="tooltip"></div>
|
||||
|
||||
|
|
@ -701,7 +728,10 @@ function buildPeersTable(peers) {
|
|||
// Calculate signal strength (0-4, where 4 is best/lowest cost)
|
||||
const cost = safeNum(p.cost);
|
||||
let signalStrength = 0;
|
||||
if (maxCost !== minCost) {
|
||||
const isDownWithZeroCost = !p.up && cost === 0;
|
||||
if (isDownWithZeroCost) {
|
||||
signalStrength = 4;
|
||||
} else if (maxCost !== minCost) {
|
||||
const normalized = (maxCost - cost) / (maxCost - minCost); // 0 (worst/highest cost) to 1 (best/lowest cost)
|
||||
signalStrength = Math.round(normalized * 4); // 0-4
|
||||
} else {
|
||||
|
|
@ -709,11 +739,12 @@ function buildPeersTable(peers) {
|
|||
}
|
||||
if (signalStrength < 0) signalStrength = 0;
|
||||
if (signalStrength > 4) signalStrength = 4;
|
||||
const signalStateClass = isDownWithZeroCost ? ' offline' : '';
|
||||
|
||||
// Generate cell phone signal icon SVG based on signal strength (0-4)
|
||||
const signalIconHtml =
|
||||
'<div class="signal-icon-wrapper">' +
|
||||
'<svg class="signal-icon" viewBox="0 0 16 16" aria-hidden="true">' +
|
||||
'<svg class="signal-icon' + signalStateClass + '" viewBox="0 0 16 16" aria-hidden="true">' +
|
||||
// Bar 1 (smallest) - shown when signalStrength >= 1
|
||||
'<rect class="signal-bar' + (signalStrength >= 1 ? ' active' : '') + '" x="1" y="11" width="2.5" height="4" rx="0.5" />' +
|
||||
// Bar 2 - shown when signalStrength >= 2
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue