diff --git a/daemon/HTTPServer.cpp b/daemon/HTTPServer.cpp index f3c82b5f..0151733e 100644 --- a/daemon/HTTPServer.cpp +++ b/daemon/HTTPServer.cpp @@ -483,30 +483,41 @@ namespace http { page = params["page"]; std::string token = params["token"]; - s << - "\r\n" - "\r\n" - " \r\n" /* TODO: Find something to parse html/template system. This is horrible. */ - " \r\n" - " \r\n" - " \r\n" - " Purple I2P | " VERSION "\r\n"; + s << "\r\n" + "\r\n" + "\r\n" /* TODO: Find something to parse html/template system. This is horrible. */ + "\r\n" + "\r\n" + "\r\n" + "Purple I2P | " VERSION "\r\n"; GetStyles(s); - s << - "\r\n" - "\r\n" - "
\r\n\r\n" - "\r\n" - "
" - "" << tr("Main page") << " " - // placeholder for graceful shutdown button (requires token) - "Shutdown
\r\n"; + s << "\r\n" + "\r\n" + "
\r\n\r\n" + "\r\n" + << "
" + "" << tr("Main page") << " " + // TODO placeholder for graceful shutdown button (requires token) + "Shutdown"; + // placeholder for toggle transit (requires token) + if (i2p::context.AcceptsTunnels ()) { + s << "No transit"; + } else { + s << "Accept transit"; + } + s << "
\r\n"; if (i2p::context.IsFloodfill ()) s << "" << tr("LeaseSets") << "\r\n"; - s << - "" << tr("Destinations") << "\r\n" + s << "" << tr("Destinations") << "\r\n" // "" << tr("Services") << "\r\n" // "" << tr("Transit") << "\r\n" "\r\n" - "\r\n" - "\r\n" - "\r\n"; + s << "
\r\n" + "
\r\n" + "\r\n" + "\r\n"; } static void ShowError(std::stringstream& s, const std::string& string) diff --git a/webconsole/style.css b/webconsole/style.css index f3750562..f681957b 100644 --- a/webconsole/style.css +++ b/webconsole/style.css @@ -33,6 +33,8 @@ --tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23dbd' d='M63 37.9v20.3c-.2 2.3-2.6 4.5-4.9 4.7l-20.3.1a4.3 4.3 0 01-2.9-1.4L2.3 29.2a4.3 4.3 0 010-6.1L23.1 2.3a4.3 4.3 0 016.1 0l32.5 32.5c.9.8 1.3 1.9 1.3 3.2zm-9.3 5.5a7.3 7.3 0 10-10.3 10.2 7.3 7.3 0 0010.3 0 7.1 7.1 0 000-10.2z'/%3E%3C/svg%3E"); --shutdown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23717' d='M16 1a3 3 0 00-3 3v9.3a3 3 0 002.9 2.9 3 3 0 003-2.8V4a3 3 0 00-3-3zm7.2 3.2a3 3 0 00-2.8 3 3 3 0 001.1 2.2 8.8 8.8 0 013.3 6.9 8.8 8.8 0 01-9.9 8.8 8.8 8.8 0 01-4.5-15.7 3 3 0 001-2.2c0-2.4-2.7-3.8-4.6-2.3a14.6 14.6 0 00-5.5 12.9 14.7 14.7 0 1023.9-13 2.8 2.8 0 00-1.9-.6z'/%3E%3C/svg%3E"); --shutdown_hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23900' d='M16 1a3 3 0 00-3 3v9.3a3 3 0 002.9 2.9 3 3 0 003-2.8V4a3 3 0 00-3-3zm7.2 3.2a3 3 0 00-2.8 3 3 3 0 001.1 2.2 8.8 8.8 0 013.3 6.9 8.8 8.8 0 01-9.9 8.8 8.8 8.8 0 01-4.5-15.7 3 3 0 001-2.2c0-2.4-2.7-3.8-4.6-2.3a14.6 14.6 0 00-5.5 12.9 14.7 14.7 0 1023.9-13 2.8 2.8 0 00-1.9-.6z'/%3E%3C/svg%3E"); + --transit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%235b5' d='M13.4 21.5H23V34h13V21.5h9.6L29.5 2.4z'/%3E%3Cpath fill='%23ae6ba8' d='M49.2 30.2l-3 1.5a.5.5 0 00-.1 0L40 37.7a.5.5 0 000 .2.5.5 0 00-.2.1.5.5 0 000 .1.5.5 0 000 .1l.5 1.5a.5.5 0 00.3.3l1.4.6a.5.5 0 00.5 0l2.9-2.3 4.5-4.6a.5.5 0 00.2-.2l.8-2a.5.5 0 00-.3-.7l-1-.5a.5.5 0 00-.4 0zm7.3 3.2l-2.2.3a.5.5 0 00-.2 0l-7 6-3 3.6a.5.5 0 000 .6l.8 1.3a.5.5 0 00.3.3l1.5.2a.5.5 0 00.4-.1l5.8-5 4-4.7a.5.5 0 000-.3l.2-1.7a.5.5 0 00-.6-.6zm-45.4 5l-9.9.6a.5.5 0 00-.5.5L1 58.2a.5.5 0 00.4.5l26 3.1a.5.5 0 00.2 0l19.3-2.1a.5.5 0 00.3-.1l9.7-9 6.4-8.6a.5.5 0 00-.1-.7l-3.8-2.8a.5.5 0 00-.6 0c-2.4 2.5-4.6 5-7 7.3l-10 8.2-19.7.5 3.3-4.3 14-.8a.5.5 0 00.6-.5l-.1-5.4a.5.5 0 00-.5-.5l-17.5-1-10.5-3.6a.5.5 0 00-.2 0z'/%3E%3C/svg%3E"); + --notransit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%235b5' d='M12.2 36.8h12v14.4h15.6V36.8h12l-19.2-24z'/%3E%3Cpath fill='%23d40000' d='M32 1a31 31 0 100 62 31 31 0 000-62zm0 7.9c4 0 8 1 11.3 2.9a1.9 1.9 0 01.4 3l-29 28.9a1.9 1.9 0 01-3-.5A23 23 0 0132 9zm18.5 10.9a1.9 1.9 0 011.7 1 23.2 23.2 0 01-31.5 31.5 1.9 1.9 0 01-.4-3l29-29a1.9 1.9 0 011.2-.5z'/%3E%3C/svg%3E"); /* theme colors */ --scrollbar: #414 #101; --ink: #dbd; @@ -93,6 +95,9 @@ body { color: var(--ink); background: radial-gradient(circle at center, rgba(48,0,48,.3), rgba(0,0,0,.05)), linear-gradient(to bottom, rgba(0,0,0,.3), rgba(32,0,32,.6), rgba(0,0,0,.3)), var(--page); + background: linear-gradient(to right, rgba(0,0,0,0), rgba(16,0,16,.3), rgba(0,0,0,0)), + linear-gradient(to bottom, rgba(0,0,0,.3), rgba(32,0,32,.6), rgba(0,0,0,.3)); + background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(32,0,32,.3), rgba(0,0,0,.4)); } .wrapper { @@ -111,19 +116,31 @@ body { position: relative; } -#shutdownbutton { +#shutdownbutton, #enabletransit, #disabletransit { position: absolute; top: 0; - right: -10px; + right: -5px; display: inline-block; - width: 40px; + width: 28px; height: 44px; font-size: 0; background: var(--shutdown) no-repeat center center / 24px; + mix-blend-mode: luminosity; +} + +#enabletransit, #disabletransit { + right: 38px; + background: var(--notransit) no-repeat center center / 24px; } #shutdownbutton:hover, #shutdownbutton:focus { background: var(--shutdown_hover) no-repeat center center / 24px; + mix-blend-mode: normal; +} + +#enabletransit:hover, #enabletransit:focus { + background: var(--transit) no-repeat center center / 24px; + mix-blend-mode: normal; } #shutdownbutton:active { @@ -525,8 +542,9 @@ td:last-child { padding: 40px 20px; display: inline-block; width: calc(100% - 24px); - background: radial-gradient(at bottom center, rgba(48,8,48,.3), rgba(0,0,0,0) 70%), - linear-gradient(to top, rgba(160,56,160,.1), rgba(96,16,96,.1)); + background: linear-gradient(to bottom, rgba(96,16,96,.15), rgba(160,56,160,.15)); +/* background: radial-gradient(at bottom center, rgba(48,8,48,.3), rgba(0,0,0,0) 70%), + linear-gradient(to bottom, rgba(32,0,32,.2), rgba(24,0,24,.2));*/ box-shadow: 0 0 0 1px rgba(255,160,255,.3), inset 0 0 0 2px #000, inset 0 0 0 3px #303; box-sizing: border-box; text-shadow: 0 1px 1px #000; @@ -1046,7 +1064,7 @@ input[type=checkbox]:checked + label::after { @media screen and (max-width: 800px) { #main { - width: 400px; + width: 100%; } td { @@ -1065,21 +1083,64 @@ input[type=checkbox]:checked + label::after { float: none; } - .latency { + .hops { + min-width: 190px; + } + + .tunnel { + width: 13px; + } + + .listitem.out .arrowup, .listitem.in .arrowdown, .tunnel, .latency { + margin: 0 1px; min-width: 0; + } + + .listitem.out .arrowup, .listitem.in .arrowdown { + margin: 2px 0 0 1.5%; + } + + .latency { background-size: 11px; background-color: transparent !important; + float: left; + } + + .transferred { + margin-right: 1.5%; + float: right; } .hop { margin: 0 -3px; } + .tunnel.exploratory { + background-size: 12px, 11px !important; + } + + .itag { + margin: 2px 1.5% 0 0; + min-width: 90px; /* force wrap to new line */ + float: right; + text-align: right; + background: none; + } + + .itag::before { + content: ""; + display: inline-block; + vertical-align: middle; + width: 14px; + height: 10px; + background: var(--tag) no-repeat left center / 10px + } +/* @media screen and (-webkit-min-device-pixel-ratio: 1.5) { #main { width: 300px; } - } + }*/ } @media screen and (min-width: 1000px) { @@ -1205,6 +1266,9 @@ input[type=checkbox]:checked + label::after { .tunnel { margin: 2px 0 0 -48px; } + + .note { + padding: 15px 90px !important; } @media screen and (min-width: 1200px) and (min-height: 600px) {