Mirrors/i2pd
2
0
Fork 0
mirror of https://github.com/PurpleI2P/i2pd.git synced 2025-04-29 04:07:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

More webconsole UI refinements

Browse source
This commit is contained in:
dr|z3d 2021-08-11 19:41:54 +00:00
parent b6d478977b
commit 693a78fbe6
3 changed files with 178 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

94
daemon/HTTPServer.cpp
View file

@ -559,12 +559,12 @@ namespace http {
s << "</tr></td>"; s << "</tr></td>";
} }
/* /*
s << "<tr><td>" << "HTTP " << tr("Proxy") << "</td><td class='" << (httpproxy ? "enabled" : "disabled") << "'>" << (httpproxy ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n"; s << "<tr><td>" << "HTTP " << tr("Proxy") << "</td><td class='" << (httpproxy ? "enabled" : "disabled") << "\">" << (httpproxy ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "SOCKS " << tr("Proxy") << "</td><td class='" << (socksproxy ? "enabled" : "disabled") << "'>" << (socksproxy ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n"; s << "<tr><td>" << "SOCKS " << tr("Proxy") << "</td><td class='" << (socksproxy ? "enabled" : "disabled") << "\">" << (socksproxy ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "BOB" << "</td><td class='" << (bob ? "enabled" : "disabled") << "'>" << (bob ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n"; s << "<tr><td>" << "BOB" << "</td><td class='" << (bob ? "enabled" : "disabled") << "\">" << (bob ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "SAM" << "</td><td class='" << (sam ? "enabled" : "disabled") << "'>" << (sam ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n"; s << "<tr><td>" << "SAM" << "</td><td class='" << (sam ? "enabled" : "disabled") << "\">" << (sam ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "I2CP" << "</td><td class='" << (i2cp ? "enabled" : "disabled") << "'>" << (i2cp ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n"; s << "<tr><td>" << "I2CP" << "</td><td class='" << (i2cp ? "enabled" : "disabled") << "\">" << (i2cp ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "I2PControl" << "</td><td class='" << (i2pcontrol ? "enabled" : "disabled") << "'>" << (i2pcontrol ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n"; s << "<tr><td>" << "I2PControl" << "</td><td class='" << (i2pcontrol ? "enabled" : "disabled") << "\">" << (i2pcontrol ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
*/ */
} }
@ -606,7 +606,7 @@ namespace http {
{ {
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n"; s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n";
s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_b64\" />\r\n" s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_b64\" />\r\n"
<< "<label for='slide_b64'>" << tr("Base64 Address") << "</label>\r\n"; << "<label for=\"slide_b64\">" << tr("Base64 Address") << "</label>\r\n";
s << "<div class=\"slidecontent\">\r\n<div id=\"b64\">"; s << "<div class=\"slidecontent\">\r\n<div id=\"b64\">";
s << dest->GetIdentity ()->ToBase64 () << "</div>\r\n</div>\r\n</div>\r\n</td></tr>\r\n"; s << dest->GetIdentity ()->ToBase64 () << "</div>\r\n</div>\r\n</div>\r\n</td></tr>\r\n";
if (dest->IsEncryptedLeaseSet ()) if (dest->IsEncryptedLeaseSet ())
@ -637,7 +637,9 @@ namespace http {
{ {
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n"; s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n";
s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_leasesets\" />\r\n" s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_leasesets\" />\r\n"
<< "<label for='slide_leasesets'>" << tr("LeaseSets") << " [" << dest->GetNumRemoteLeaseSets () << "]</label>\r\n"; << "<label for=\"slide_leasesets\">" << tr("LeaseSets")
<< " <span class=\"hide\">[</span><span class=\"count\">" << dest->GetNumRemoteLeaseSets ()
<< "</span><span class=\"hide\">]</span></label>\r\n";
s << "<div class=\"slidecontent\">\r\n<table>\r\n<thead>\r\n<tr>" s << "<div class=\"slidecontent\">\r\n<table>\r\n<thead>\r\n<tr>"
<< "<th class=\"left\">" << tr("Address") << "</th>" << "<th class=\"left\">" << tr("Address") << "</th>"
<< "<th class=\"thin\">" << tr("Type") << "</th>" << "<th class=\"thin\">" << tr("Type") << "</th>"
@ -657,18 +659,24 @@ namespace http {
{ {
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n"; s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n";
s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_tunnels\" />\r\n" s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_tunnels\" />\r\n"
<< "<label for='slide_tunnels'>" << tr("Tunnels") << "</label>\r\n"; << "<label for=\"slide_tunnels\">" << tr("Tunnels") << "</label>\r\n";
s << "<div class=\"slidecontent\">\r\n<div class=\"list\">\r\n"; s << "<div class=\"slidecontent\">\r\n<div class=\"list\">\r\n";
for (auto & it : pool->GetInboundTunnels ()) { // inbound tunnels for (auto & it : pool->GetInboundTunnels ()) { // inbound tunnels
s << "<div class=\"listitem in\">" s << "<div class=\"listitem in\">"
<< "<span class=\"arrowdown\" data-tooltip=\"" << tr("Inbound") << "\">[" << tr("In") << "] </span>" << "<span class=\"arrowdown\" data-tooltip=\"" << tr("Inbound") << "\">[" << tr("In") << "] </span>"
<< "<span class=\"chain inbound\">"; << "<span class=\"chain inbound\">";
it->Print(s); it->Print(s);
if(it->LatencyIsKnown()) if(it->LatencyIsKnown()) {
s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">" s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">";
<< it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>"; if (it->GetMeanLatency() >= 1000) {
else // placeholder for alignment s << std::fixed << std::setprecision(2);
s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span>";
} else {
s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
}
} else { // placeholder for alignment
s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---</span>"; s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---</span>";
}
ShowTunnelDetails(s, it->GetState (), false, it->GetNumReceivedBytes ()); ShowTunnelDetails(s, it->GetState (), false, it->GetNumReceivedBytes ());
s << "</span></div>\r\n"; s << "</span></div>\r\n";
} }
@ -677,11 +685,17 @@ namespace http {
<< "<span class=\"arrowup\" data-tooltip=\"" << tr("Outbound") << "\">[" << tr("Out") << "] </span>" << "<span class=\"arrowup\" data-tooltip=\"" << tr("Outbound") << "\">[" << tr("Out") << "] </span>"
<< "<span class=\"chain outbound\">"; << "<span class=\"chain outbound\">";
it->Print(s); it->Print(s);
if(it->LatencyIsKnown()) if(it->LatencyIsKnown()) {
s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">" s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">";
<< it->GetMeanLatency() << tr("ms") << "</span>"; if (it->GetMeanLatency() >= 1000) {
else // placeholder for alignment s << std::fixed << std::setprecision(2);
s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span>";
} else {
s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
}
} else { // placeholder for alignment
s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---</span>"; s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---</span>";
}
ShowTunnelDetails(s, it->GetState (), false, it->GetNumSentBytes ()); ShowTunnelDetails(s, it->GetState (), false, it->GetNumSentBytes ());
s << "</span></div>\r\n"; s << "</span></div>\r\n";
} }
@ -701,7 +715,9 @@ namespace http {
<< "</td><td class=\"center thin\">" << it.second->GetNumOutgoingTags () << "</td></tr>\r\n"; << "</td><td class=\"center thin\">" << it.second->GetNumOutgoingTags () << "</td></tr>\r\n";
out_tags += it.second->GetNumOutgoingTags (); out_tags += it.second->GetNumOutgoingTags ();
} }
s << "<tr><th colspan=\"2\">" << tr("Outgoing Session Tags") << " [" << out_tags << "]</th></tr>\r\n" s << "<tr><th colspan=\"2\">" << tr("Outgoing Session Tags")
<< " <span class=\"hide\">[</span><span class=\"count\">" << out_tags
<< "</span><span class=\"hide\">]</span></th></tr>\r\n"
<< "<tr><td class=\"center nopadding\" colspan=\"2\"><table>\r\n" << "<tr><td class=\"center nopadding\" colspan=\"2\"><table>\r\n"
<< "<thead>\r\n<tr><th class=\"left\">" << tr("Destination") << "</th><th class=\"thin\">" << tr("Count") << "<thead>\r\n<tr><th class=\"left\">" << tr("Destination") << "</th><th class=\"thin\">" << tr("Count")
<< "</th></thead>\r\n<tbody class=\"tableitem\">\r\n" << tmp_s.str () << "</tbody></table>\r\n</td></tr>\r\n"; << "</th></thead>\r\n<tbody class=\"tableitem\">\r\n" << tmp_s.str () << "</tbody></table>\r\n</td></tr>\r\n";
@ -710,7 +726,9 @@ namespace http {
auto numECIESx25519Tags = dest->GetNumIncomingECIESx25519Tags (); auto numECIESx25519Tags = dest->GetNumIncomingECIESx25519Tags ();
if (numECIESx25519Tags > 0) { if (numECIESx25519Tags > 0) {
s << "<tr><th colspan=\"2\">ECIESx25519<br>\r\n" << tr("Incoming Tags") << " [" << numECIESx25519Tags << "]</th></tr>\r\n"; s << "<tr><th colspan=\"2\">ECIESx25519<br>\r\n" << tr("Incoming Tags")
<< " <span class=\"hide\">[</span><span class=\"count\">" << numECIESx25519Tags
<< "</span><span class=\"hide\">]</span></th></tr>\r\n";
if (!dest->GetECIESx25519Sessions ().empty ()) if (!dest->GetECIESx25519Sessions ().empty ())
{ {
std::stringstream tmp_s; uint32_t ecies_sessions = 0; std::stringstream tmp_s; uint32_t ecies_sessions = 0;
@ -722,8 +740,9 @@ namespace http {
} }
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n" s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n"
<< "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide-ecies-sessions\" />\r\n" << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide-ecies-sessions\" />\r\n"
<< "<label for='slide-ecies-sessions'>" << tr("Tag Sessions") << "<label for=\"slide-ecies-sessions\">" << tr("Tag Sessions")
<< " [" << ecies_sessions << "]</label>\r\n" << " <span class=\"hide\">[</span><span class=\"count\">" << ecies_sessions
<< "</span><span class=\"hide\">]</span></label>\r\n"
<< "<div class=\"slidecontent\">\r\n<table>\r\n<thead><th class=\"left\">" << tr("Destination") << "</th><th>" << "<div class=\"slidecontent\">\r\n<table>\r\n<thead><th class=\"left\">" << tr("Destination") << "</th><th>"
<< tr("Status") << "</th></thead>\r\n<tbody class=\"tableitem\">\r\n" << tmp_s.str () << "</tbody></table>\r\n</div>\r\n</div>\r\n"; << tr("Status") << "</th></thead>\r\n<tbody class=\"tableitem\">\r\n" << tmp_s.str () << "</tbody></table>\r\n</div>\r\n</div>\r\n";
} else } else
@ -748,7 +767,7 @@ namespace http {
// Print table with streams information // Print table with streams information
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n"; s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n";
s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide-streams\" />\r\n" s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide-streams\" />\r\n"
<< "<label for='slide-streams'>" << tr("Streams") << "</label>\r\n"; << "<label for=\"slide-streams\">" << tr("Streams") << "</label>\r\n";
s << "<div class=\"slidecontent\">\r\n<table>\r\n<thead>\r\n<tr>"; s << "<div class=\"slidecontent\">\r\n<table>\r\n<thead>\r\n<tr>";
s << "<th class=\"streamid\">ID</th>"; s << "<th class=\"streamid\">ID</th>";
s << "<th class=\"streamdest\">Destination</th>"; s << "<th class=\"streamdest\">Destination</th>";
@ -886,17 +905,24 @@ namespace http {
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n"; s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n";
s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_tunnels_client\" />\r\n" s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_tunnels_client\" />\r\n"
<< "<label for='slide_tunnels_client'>" << tr("Client Tunnels") << "</label>\r\n"; // TODO: separate client & exploratory tunnels into sections << "<label for=\"slide_tunnels_client\">" << tr("Client Tunnels") << "</label>\r\n"; // TODO: separate client & exploratory tunnels into sections
s << "<div class=\"slidecontent\">\r\n<div class=\"list\">\r\n"; s << "<div class=\"slidecontent\">\r\n<div class=\"list\">\r\n";
for (auto & it : i2p::tunnel::tunnels.GetInboundTunnels ()) { for (auto & it : i2p::tunnel::tunnels.GetInboundTunnels ()) {
s << "<div class=\"listitem in\">" s << "<div class=\"listitem in\">"
<< "<span class=\"arrowdown\" data-tooltip=\"" << tr("Inbound") << "\">[" << tr("In") << "] </span>" << "<span class=\"arrowdown\" data-tooltip=\"" << tr("Inbound") << "\">[" << tr("In") << "] </span>"
<< "<span class=\"chain inbound\">"; << "<span class=\"chain inbound\">";
it->Print(s); it->Print(s);
if(it->LatencyIsKnown()) if(it->LatencyIsKnown()) {
s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">" << it->GetMeanLatency() << tr("ms") << "</span>"; s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">";
else // placeholder for alignment if (it->GetMeanLatency() >= 1000) {
s << std::fixed << std::setprecision(2);
s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span>";
} else {
s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
}
} else { // placeholder for alignment
s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---</span>"; s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---</span>";
}
ShowTunnelDetails(s, it->GetState (), (it->GetTunnelPool () == ExplPool), it->GetNumReceivedBytes ()); ShowTunnelDetails(s, it->GetState (), (it->GetTunnelPool () == ExplPool), it->GetNumReceivedBytes ());
s << "</span></div>\r\n"; s << "</span></div>\r\n";
} }
@ -1078,15 +1104,17 @@ namespace http {
if (!tmp_s.str ().empty ()) if (!tmp_s.str ().empty ())
{ {
s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_" << boost::algorithm::to_lower_copy(name) s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_" << boost::algorithm::to_lower_copy(name)
<< "\" />\r\n<label for='slide_" << boost::algorithm::to_lower_copy(name) << "'><b>" << name << "\" />\r\n<label for=\"slide_" << boost::algorithm::to_lower_copy(name) << "\">" << name
<< "</b> [" << cnt << "]</label>\r\n<div class=\"slidecontent list\">" << " <span class=\"hide\">[</span><span class=\"count\">" << cnt
<< "</span><span class=\"hide\">]</span></label>\r\n<div class=\"slidecontent list\">"
<< tmp_s.str () << "</div>\r\n</div>\r\n"; << tmp_s.str () << "</div>\r\n</div>\r\n";
} }
if (!tmp_s6.str ().empty ()) if (!tmp_s6.str ().empty ())
{ {
s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_" << boost::algorithm::to_lower_copy(name) << "v6\" />\r\n" s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_" << boost::algorithm::to_lower_copy(name) << "v6\" />\r\n"
<< "<label for='slide_" << boost::algorithm::to_lower_copy(name) << "v6'><b>" << name << "<label for=\"slide_" << boost::algorithm::to_lower_copy(name) << "v6\">" << name
<< "v6</b> [" << cnt6 << "]</label>\r\n<div class=\"slidecontent list\">" << "v6 <span class=\"hide\">[</span><span class=\"count\">" << cnt6
<< "</span><span class=\"hide\">]</span></label>\r\n<div class=\"slidecontent list\">"
<< tmp_s6.str () << "</div>\r\n</div>\r\n"; << tmp_s6.str () << "</div>\r\n</div>\r\n";
} }
} }
@ -1109,7 +1137,8 @@ namespace http {
if (!sessions.empty ()) if (!sessions.empty ())
{ {
s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_ssu\" />\r\n" s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_ssu\" />\r\n"
<< "<label for='slide_ssu'><b>SSU</b> [" << (int) sessions.size() << "]</label>\r\n" << "<label for=\"slide_ssu\">SSU <span class=\"hide\">[</span><span class=\"count\">"
<< (int) sessions.size() << "</span><span class=\"hide\">]</span></label>\r\n"
<< "<div class=\"slidecontent list\">\r\n"; << "<div class=\"slidecontent list\">\r\n";
for (const auto& it: sessions) for (const auto& it: sessions)
{ {
@ -1150,7 +1179,8 @@ namespace http {
if (!sessions6.empty ()) if (!sessions6.empty ())
{ {
s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_ssuv6\" />\r\n" s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_ssuv6\" />\r\n"
<< "<label for='slide_ssuv6'><b>SSUv6</b> ( " << (int) sessions6.size() << " )</label>\r\n" << "<label for=\"slide_ssuv6\">SSUv6 <span class=\"hide\">[</span><span class=\"count\">"
<< (int) sessions6.size() << "</span><span class=\"hide\">]</span></label>\r\n"
<< "<div class=\"slidecontent list\">\r\n"; << "<div class=\"slidecontent list\">\r\n";
for (const auto& it: sessions6) for (const auto& it: sessions6)
{ {

12
libi2pd/Tunnel.cpp
View file

@ -252,10 +252,11 @@ namespace tunnel
void InboundTunnel::Print (std::stringstream& s) const void InboundTunnel::Print (std::stringstream& s) const
{ {
s << "<span class=\"hops\">";
PrintHops (s); PrintHops (s);
s << " <span class=\"arrowright zerohop\">&#8658;</span> "; s << " <span class=\"arrowright zerohop\">&#8658;</span> ";
s << " <span class=\"tunnelid local\" data-tooltip=\""; s << " <span class=\"tunnelid local\" data-tooltip=\"";
s << GetTunnelID () << "\">Local</span>"; s << GetTunnelID () << "\">Local</span></span>";
s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>"; s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>";
} }
@ -277,8 +278,9 @@ namespace tunnel
void ZeroHopsInboundTunnel::Print (std::stringstream& s) const void ZeroHopsInboundTunnel::Print (std::stringstream& s) const
{ {
s << "<span class=\"hops\">";
s << "<span class=\"arrowright zerohop\">&#8658;</span> <span class=\"tunnelid local\" data-tooltip=\"" s << "<span class=\"arrowright zerohop\">&#8658;</span> <span class=\"tunnelid local\" data-tooltip=\""
<< GetTunnelID () << "\">Local</span>"; << GetTunnelID () << "\">Local</span></span>";
s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>"; s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>";
} }
@ -318,9 +320,10 @@ namespace tunnel
void OutboundTunnel::Print (std::stringstream& s) const void OutboundTunnel::Print (std::stringstream& s) const
{ {
s << "<span class=\"hops\">";
s << "<span class=\"tunnelid local\" data-tooltip=\"" << GetTunnelID () << "\">Local</span>"; s << "<span class=\"tunnelid local\" data-tooltip=\"" << GetTunnelID () << "\">Local</span>";
PrintHops (s); PrintHops (s);
s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>"; s << "</span> <span class=\"tunnelid\">" << GetTunnelID () << "</span>";
} }
ZeroHopsOutboundTunnel::ZeroHopsOutboundTunnel (): ZeroHopsOutboundTunnel::ZeroHopsOutboundTunnel ():
@ -354,9 +357,10 @@ namespace tunnel
void ZeroHopsOutboundTunnel::Print (std::stringstream& s) const void ZeroHopsOutboundTunnel::Print (std::stringstream& s) const
{ {
s << "<span class=\"hops\">";
s << "<span class=\"arrowright\">&#8658;</span> "; s << "<span class=\"arrowright\">&#8658;</span> ";
s << "<span class=\"tunnelid local\" data-tooltip=\"" s << "<span class=\"tunnelid local\" data-tooltip=\""
<< GetTunnelID () << "\">" << GetTunnelID () << "\">Local</span>"; << GetTunnelID () << "\">" << GetTunnelID () << "\">Local</span></span>";
s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>"; s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>";
} }

132
webconsole/style.css
View file

@ -32,9 +32,10 @@
/* theme colors */ /* theme colors */
--scrollbar: #414 #101; --scrollbar: #414 #101;
--ink: #dbd; --ink: #dbd;
--ink-darker: #b9b;
--ink-faded: rgba(221,187,221, .5); --ink-faded: rgba(221,187,221, .5);
--notify: #5f5; --notify: #5f5;
--page: #140014; --page: #120012;
--main-boxshadow: 0 0 0 1px #000, 0 0 0 4px #313, 0 0 0 5px #000; --main-boxshadow: 0 0 0 1px #000, 0 0 0 4px #313, 0 0 0 5px #000;
--link: #ae6ba8; --link: #ae6ba8;
--link_hover: #fafafa; --link_hover: #fafafa;
@ -47,7 +48,7 @@
--active_shadow: inset 3px 3px 3px rgba(0,0,0,.6); --active_shadow: inset 3px 3px 3px rgba(0,0,0,.6);
--hr: linear-gradient(to right, #313, #414, #313); --hr: linear-gradient(to right, #313, #414, #313);
--highlight: inset 0 0 0 1px #101; --highlight: inset 0 0 0 1px #101;
--tr: #1a001a; --tr: #180818;
--tr-alt: #202; --tr-alt: #202;
--tr-inner: #240024; --tr-inner: #240024;
--header: linear-gradient(to bottom, #202, #101 50%, #101 50%, #000); --header: linear-gradient(to bottom, #202, #101 50%, #101 50%, #000);
@ -136,6 +137,25 @@ a, .slide label {
font-weight: 600; font-weight: 600;
} }
.slide label {
font-weight: 700;
}
.count {
margin: -1px 0 -1px 3px;
padding: 0 10px;
display: inline-block;
vertical-align: baseline;
border-radius: 2px;
background: var(--ink-darker);
color: var(--page);
text-shadow: none;
}
.count:hover {
background: var(--ink);
}
a { a {
padding: 1px 8px; padding: 1px 8px;
display: inline-block; display: inline-block;
@ -354,6 +374,10 @@ th[colspan="2"], .slide label, #routerservices {
background: var(--th); background: var(--th);
} }
th:not(.sectiontitle)[colspan="2"], .slide label {
font-size: 95%;
}
th.sectiontitle { th.sectiontitle {
padding: 0 0 10px !important; padding: 0 0 10px !important;
font-weight: 700; font-weight: 700;
@ -398,7 +422,7 @@ td:last-child {
} }
.error, .notify { .error, .notify {
padding: 30px 12px; padding: 30px 12px 40px;
font-size: 110%; font-size: 110%;
color: #fff; color: #fff;
box-shadow: var(--highlight), inset 0 0 3px 3px rgba(0,0,0,.6); box-shadow: var(--highlight), inset 0 0 3px 3px rgba(0,0,0,.6);
@ -409,7 +433,7 @@ td:last-child {
display: block; display: block;
width: 100%; width: 100%;
height: 48px; height: 48px;
background: var(--error) no-repeat center top / 40px; background: var(--error) no-repeat center top / 44px;
} }
#success { #success {
@ -463,7 +487,7 @@ td:last-child {
.arrowright, .arrowleft, .arrowleftright, .arrowup, .arrowdown { .arrowright, .arrowleft, .arrowleftright, .arrowup, .arrowdown {
width: 12px; width: 12px;
height: 12px; height: 16px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
font-size: 0 !important; font-size: 0 !important;
@ -482,11 +506,11 @@ td:last-child {
} }
.arrowup { .arrowup {
background: var(--arrow_up) no-repeat center center / 11px; background: var(--arrow_up) no-repeat center center / 12px;
} }
.arrowdown { .arrowdown {
background: var(--arrow_down) no-repeat center center / 11px; background: var(--arrow_down) no-repeat center center / 12px;
} }
.listitem, .tableitem { .listitem, .tableitem {
@ -512,13 +536,14 @@ td:last-child {
} }
.listitem.out .arrowup, .listitem.in .arrowdown { .listitem.out .arrowup, .listitem.in .arrowdown {
margin: 0 4px; margin: 3px 8px 0 16px;
float: left;
} }
/*
#transports .listitem .arrowup, #transports .listitem .arrowdown { #transports .listitem .arrowup, #transports .listitem .arrowdown {
margin: 0 10px; margin: 3px 10px 0 16px;
} }
*/
.tableitem .button { .tableitem .button {
margin: 0 !important; margin: 0 !important;
padding: 1px 4px !important; padding: 1px 4px !important;
@ -674,7 +699,7 @@ table.services {
} }
.tunnel { .tunnel {
margin: 3px 5px 0; margin: 1px 5px 0;
width: 26px; width: 26px;
height: 16px; height: 16px;
float: left; float: left;
@ -718,6 +743,10 @@ span[data-tooltip] {
position: relative; position: relative;
} }
.hops {
text-align: right;
}
.hop, .host { .hop, .host {
padding: 1px 4px; padding: 1px 4px;
display: inline-block; display: inline-block;
@ -736,6 +765,10 @@ span[data-tooltip] {
background: #303 var(--planet) no-repeat 4px center / 9px; background: #303 var(--planet) no-repeat 4px center / 9px;
} }
a[href^="https://gwhois"]:hover, a[href^="https://gwhois"]:focus {
background: none !important
}
a:hover .host, a:focus .host, a:active .host { a:hover .host, a:focus .host, a:active .host {
background: #505 var(--exploratory) no-repeat 2px center / 13px; background: #505 var(--exploratory) no-repeat 2px center / 13px;
} }
@ -747,13 +780,13 @@ a:hover .host, a:focus .host, a:active .host {
} }
.latency { .latency {
padding: 2px 5px 2px 18px; padding: 2px 5px 2px 20px;
min-width: 52px; min-width: 40px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
text-align: right; text-align: right;
float: right; float: right;
background: var(--page) var(--time) no-repeat 3px center / 13px; background: var(--page) var(--time) no-repeat 5px center / 13px;
border-radius: 2px; border-radius: 2px;
} }
@ -801,8 +834,7 @@ a[href^="https://gwhois"] {
} }
span[data-tooltip]:hover::after, span[data-tooltip]:active::after, span[data-tooltip]:hover::after, span[data-tooltip]:active::after,
.itag[data-tooltip]:hover::after, .itag[data-tooltip]:active::after, .itag[data-tooltip]:hover::after, .itag[data-tooltip]:active::after {
/*a[href^="https://gwhois"][data-tooltip]:hover::after, a[href^="https://gwhois"][data-tooltip]:active::after*/ {
padding: 3px 6px; padding: 3px 6px;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -888,11 +920,13 @@ input[type=checkbox]:checked + label::after {
} }
.tunnel, .latency { .tunnel, .latency {
margin: 0 4px; margin: 1px 6px 0 4px;
} }
.tunnel { .tunnel, .hops {
margin-left: 8px; margin-top: 2px;
display: inline-block;
vertical-align: middle;
} }
} }
@ -905,7 +939,6 @@ input[type=checkbox]:checked + label::after {
max-width: 200px !important; max-width: 200px !important;
} }
} }
}
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
#main { #main {
@ -924,6 +957,16 @@ input[type=checkbox]:checked + label::after {
max-width: 300px; max-width: 300px;
} }
.arrowup, .arrowdown, .tunnel {
float: none;
}
.latency {
min-width: 0;
background-size: 11px;
background-color: transparent !important;
}
.hop { .hop {
margin: 0 -3px; margin: 0 -3px;
} }
@ -939,6 +982,11 @@ input[type=checkbox]:checked + label::after {
.tunnelid[data-tooltip]:hover::after, .tunnelid[data-tooltip]:active::after { .tunnelid[data-tooltip]:hover::after, .tunnelid[data-tooltip]:active::after {
display: none; display: none;
} }
.hops {
display: inline-block;
min-width: 240px;
}
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
@ -950,6 +998,11 @@ input[type=checkbox]:checked + label::after {
background-size: 16px; background-size: 16px;
} }
.tunnelid:not(.local), .latency, .hops {
margin-top: 1px;
margin-bottom: -1px;
}
.tunnelid:not(.local) { .tunnelid:not(.local) {
margin-left: 12px; margin-left: 12px;
float: right; float: right;
@ -959,11 +1012,10 @@ input[type=checkbox]:checked + label::after {
min-width: 560px; min-width: 560px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
text-align: right;
} }
#transports .chain { #transports .chain {
min-width: 540px; min-width: 580px;
text-align: left; text-align: left;
} }
@ -972,6 +1024,12 @@ input[type=checkbox]:checked + label::after {
text-align: center; text-align: center;
} }
.hops {
min-width: 280px;
display: inline-block;
text-align: right;
}
.recvd, .sent { .recvd, .sent {
min-width: 64px; min-width: 64px;
} }
@ -984,6 +1042,10 @@ input[type=checkbox]:checked + label::after {
min-width: 144px; min-width: 144px;
} }
.host a {
margin-bottom: -1px;
}
.SSU .host { .SSU .host {
min-width: 190px; min-width: 190px;
} }
@ -999,6 +1061,7 @@ input[type=checkbox]:checked + label::after {
} }
.listitem.out .arrowup, .listitem.in .arrowdown { .listitem.out .arrowup, .listitem.in .arrowdown {
margin-top: 2px;
background-size: 14px; background-size: 14px;
} }
@ -1006,8 +1069,18 @@ input[type=checkbox]:checked + label::after {
margin-right: 10px; margin-right: 10px;
} }
.itag, .host {
margin-top: 1px;
}
.itag { .itag {
padding: 2px 5px 2px 20px;
float: right; float: right;
min-width: 100px;
display: inline-block;
border-radius: 2px;
background-color: var(--menu);
background-position: 5px center;
} }
.latency { .latency {
@ -1019,6 +1092,10 @@ input[type=checkbox]:checked + label::after {
.transferred { .transferred {
min-width: 48px; min-width: 48px;
} }
.tunnel {
margin: 2px 0 0 -48px;
}
} }
@media screen and (min-width: 1200px) and (min-height: 600px) { @media screen and (min-width: 1200px) and (min-height: 600px) {
@ -1040,4 +1117,11 @@ input[type=checkbox]:checked + label::after {
padding-top: 3px; padding-top: 3px;
padding-bottom: 1px; padding-bottom: 1px;
} }
} }
/* enable for screenshots */
/*
.hop {
filter: blur(8px);
}
*/