mirror of
https://github.com/PurpleI2P/i2pd.git
synced 2025-04-29 04:07:49 +02:00
Console: add placeholder icon for toggle transit; optimizations for mobile
This commit is contained in:
dr|z3d
parent
017eccf1b2
commit
add58a4605
2 changed files with 108 additions and 34 deletions
|
|
@ -483,8 +483,7 @@ namespace http {
|
|||
page = params["page"];
|
||||
std::string token = params["token"];
|
||||
|
||||
s <<
|
||||
"<!DOCTYPE html>\r\n"
|
||||
s << "<!DOCTYPE html>\r\n"
|
||||
"<html lang=\"" << langCode << "\">\r\n"
|
||||
"<head>\r\n" /* TODO: Find something to parse html/template system. This is horrible. */
|
||||
"<meta charset=\"UTF-8\">\r\n"
|
||||
|
|
@ -492,20 +491,32 @@ namespace http {
|
|||
"<link rel=\"shortcut icon\" href=\"" << i2pdfavicon << "\">\r\n"
|
||||
"<title>Purple I2P | " VERSION "</title>\r\n";
|
||||
GetStyles(s);
|
||||
s <<
|
||||
"</head>\r\n"
|
||||
s << "</head>\r\n"
|
||||
"<body>\r\n"
|
||||
"<div class=\"wrapper\">\r\n<table id=\"main\">\r\n"
|
||||
"<tr><td class=\"center\" colspan=\"2\"><span class=\"header\">"
|
||||
"<a id=\"home\" href=\"" << webroot << "\">" << tr("Main page") << "</a> "
|
||||
// placeholder for graceful shutdown button (requires token)
|
||||
"<a id=\"shutdownbutton\" href=\"" << webroot << "?cmd=" << HTTP_COMMAND_SHUTDOWN_START << "&token=" << token <<
|
||||
"\" data-tooltip=\"" << tr("Start graceful shutdown") << "\">Shutdown</a></span></td></tr>\r\n"
|
||||
"<tr id=\"nav\"><td id=\"navlinks\" class=\"center\" colspan=\"2\">\r\n";
|
||||
// TODO placeholder for graceful shutdown button (requires token)
|
||||
"<a id=\"shutdownbutton\" href=\"" << webroot << "?cmd="
|
||||
<< HTTP_COMMAND_SHUTDOWN_START << "&token=" << token << "\" data-tooltip=\""
|
||||
<< tr("Start graceful shutdown") << "\">Shutdown</a>";
|
||||
// placeholder for toggle transit (requires token)
|
||||
if (i2p::context.AcceptsTunnels ()) {
|
||||
s << "<a id=\"disabletransit\" href=\"" << webroot << "?cmd="
|
||||
<< HTTP_COMMAND_DISABLE_TRANSIT << "&token=" << token
|
||||
<< "\" data-tooltip=\"" << tr("Decline transit tunnels")
|
||||
<< "\">No transit</a>";
|
||||
} else {
|
||||
s << "<a id=\"enabletransit\" href=\"" << webroot << "?cmd="
|
||||
<< HTTP_COMMAND_ENABLE_TRANSIT << "&token=" << token
|
||||
<< "\" data-tooltip=\"" << tr("Accept transit tunnels")
|
||||
<< "\">Accept transit</a>";
|
||||
}
|
||||
s << "</span></td></tr>\r\n"
|
||||
<< "<tr id=\"nav\"><td id=\"navlinks\" class=\"center\" colspan=\"2\">\r\n";
|
||||
if (i2p::context.IsFloodfill ())
|
||||
s << "<a href=\"" << webroot << "?page=" << HTTP_PAGE_LEASESETS << "\">" << tr("LeaseSets") << "</a>\r\n";
|
||||
s <<
|
||||
"<a title=\"" << tr("Local destinations currently active") << "\" href=\"" << webroot << "?page="
|
||||
s << "<a title=\"" << tr("Local destinations currently active") << "\" href=\"" << webroot << "?page="
|
||||
<< HTTP_PAGE_LOCAL_DESTINATIONS << "\">" << tr("Destinations") << "</a>\r\n"
|
||||
// "<a title=\"" << tr("Local Service Tunnels") << "\" href=\"" << webroot << "?page=" << HTTP_PAGE_I2P_TUNNELS << "\">" << tr("Services") << "</a>\r\n"
|
||||
// "<a title=\"" << tr("Active Transit Tunnels") << "\" href=\"" << webroot << "?page=" << HTTP_PAGE_TRANSIT_TUNNELS << "\">" << tr("Transit") << "</a>\r\n"
|
||||
|
|
@ -523,8 +534,7 @@ namespace http {
|
|||
|
||||
static void ShowPageTail (std::stringstream& s)
|
||||
{
|
||||
s <<
|
||||
"</table>\r\n"
|
||||
s << "</table>\r\n"
|
||||
"</div>\r\n"
|
||||
"</body>\r\n"
|
||||
"</html>\r\n";
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue