diff --git a/apps/routerconsole/java/src/net/i2p/router/web/HelperBase.java b/apps/routerconsole/java/src/net/i2p/router/web/HelperBase.java
index 8515e4df1b62a98628b9c20997826457473f1078..60a2b28930ef2bc5175382c867ab4628e671f1ad 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/HelperBase.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/HelperBase.java
@@ -15,6 +15,7 @@ public abstract class HelperBase {
public static final String PROP_ADVANCED = "routerconsole.advanced";
/** @since public since 0.9.33, was package private */
public static final String CHECKED = " checked=\"checked\" ";
+ public static final String SELECTED = " selected=\"selected\" ";
/**
* Configure this bean to query a particular router context
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/helpers/ConfigUIHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/helpers/ConfigUIHelper.java
index 5aef38ee57ac10001e407db7ff5cb34faa46b0c5..c0fe0090e45aaac42244efd8ebf53fcdd8c0da53 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/helpers/ConfigUIHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/helpers/ConfigUIHelper.java
@@ -186,19 +186,23 @@ public class ConfigUIHelper extends HelperBase {
current = "en";
}
StringBuilder buf = new StringBuilder(512);
+ //buf.append("<fieldset>\n");
+ buf.append(" <select name=\"lang\" id=\"langsettings\">\n");
for (int i = 0; i < langs.length; i++) {
String lang = langs[i][0];
if (lang.equals("xx") && !isAdvanced())
continue;
// we use "lang" so it is set automagically in CSSHelper
- buf.append("<label for=\"").append(lang).append("\"><div class=\"langselect\"><input type=\"radio\" class=\"optbox\" name=\"lang\" ");
+ buf.append(" <option class=\"optbox\" name=\"lang\" ");
if (lang.equals(current))
- buf.append(CHECKED);
- buf.append("value=\"").append(lang).append("\" id=\"").append(lang).append("\">" +
- "<img height=\"48\" width=\"48\" alt=\"\" src=\"/flags.jsp?s=48&c=").append(langs[i][1]).append("\">" +
- "<div class=\"ui_lang\">");
+ buf.append(SELECTED);
+
+ buf.append(" value=\"").append(lang).append("\"");
+ buf.append(" id=\"").append(lang).append("\"").append(">");
+ //buf.append(" style=\"").append("background-image:url(/flags.jsp?s=48&c=").append(langs[i][1]).append("\">\n");
int under = lang.indexOf('_');
String slang = (under > 0) ? lang.substring(0, under) : lang;
+ //buf.append(" ");
buf.append(langs[i][2]);
String name = langs[i][3];
if (name != null) {
@@ -206,8 +210,10 @@ public class ConfigUIHelper extends HelperBase {
.append(name)
.append(')');
}
- buf.append("</div></div></label>\n");
+ buf.append("</option>\n");
}
+ buf.append(" </select>\n");
+ //buf.append("</fieldset>\n");
return buf.toString();
}
diff --git a/apps/routerconsole/jsp/welcome.jsp b/apps/routerconsole/jsp/welcome.jsp
index fdd00f5edc225f2c83d31738e5024d1140950452..c56751ed029d9f439199c50275bba7dbec62d104 100644
--- a/apps/routerconsole/jsp/welcome.jsp
+++ b/apps/routerconsole/jsp/welcome.jsp
@@ -92,7 +92,7 @@
<%
}
%>
-<h2><%=intl._t("New Install Wizard")%> <%=ipg%>/<%=LAST_PAGE%></h2>
+<!--<h2><%=intl._t("New Install Wizard")%> <%=ipg%>/<%=LAST_PAGE%></h2>-->
<div id="wizard">
<jsp:useBean class="net.i2p.router.web.helpers.WizardHandler" id="formhandler" scope="request" />
<%
@@ -112,28 +112,35 @@
<jsp:setProperty name="uihelper" property="contextId" value="<%=i2pcontextId%>" />
<%-- needed for CSS: --%><div id="config_ui">
<%-- needed for lang setting in css.jsi: --%><input type="hidden" name="consoleNonce" value="<%=net.i2p.router.web.CSSHelper.getNonce()%>" >
-<h3 id="langheading"><%=uihelper._t("Router Console Language")%></h3>
-<div id="langsettings">
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey1.png">
+<h3 id="wizardheading" class="wizard"><%=uihelper._t("Router Console Language")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/undraw_globe.png">
+<div id="wizlangsettings" class="wizard">
<jsp:getProperty name="uihelper" property="langSettings" />
-</div></div>
+</div>
+</div>
<%
} else if (ipg == 2) {
// I2P Philosophy
// license info?
%>
-<h3><%=intl._t("Why I2P?")%></h3>
-<table class="configtable"><tr><td>
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey2.png">
+<h3 id="wizardheading" class="wizard"><%=intl._t("Why I2P?")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/undraw_connected_world.png">
+<div class="wizardtext">
<%=intl._t("I2P is a communication tool for people who value privacy and wish to remain anonymous online.")%>
<%=intl._t("I2P is a peer to peer network where you can browse and create hidden services.")%>
-</td></tr></table>
+</div>
<%
} else if (ipg == 3) {
// Overview of bandwidth test
%>
-<h3><%=intl._t("Bandwidth Test")%></h3>
-<table class="configtable"><tr><td>
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey3.png">
+<h3 id="wizardheading" class="wizard"><%=intl._t("Bandwidth Test")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/undraw_speed_test.png">
+<div class="wizardtext">
<p>
<%=intl._t("I2P will now test your internet connection to identify the optimal speed settings.")%>
<%=intl._t("Bandwidth participation improves the anonymity level of all users on the network and maximizes your download speed.")%>
@@ -145,18 +152,20 @@
<a href="https://www.measurementlab.net/privacy/" target="_blank"><%=intl._t("M-Lab Privacy Policy")%></a>
<br><a href="https://github.com/m-lab/mlab-ns/blob/master/MLAB-NS_PRIVACY_POLICY.md" target="_blank"><%=intl._t("M-Lab Name Server Privacy Policy")%></a>
</p>
-</td></tr></table>
+</div>
<%
} else if (ipg == 4) {
// Bandwidth test in progress (w/ AJAX)
%>
-<h3><%=intl._t("Bandwidth Test in Progress")%></h3>
-<div id="xhr">
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey4.png">
+<h3 id="wizardheading" class="wizard"><%=intl._t("Bandwidth Test in Progress")%></h3>
+<img class="wizardimg" src="themes/console/images/wizard/undraw_in_progress.png">
+<div id="xhr" class="notifcation">
<!-- for non-script -->
<%=intl._t("Javascript is disabled - wait 60 seconds for the bandwidth test to complete and then click Next")%>
</div>
-<div id="xhr2">
+<div id="xhr2" class="notification">
</div>
<%
@@ -170,8 +179,10 @@
if (request.getParameter("skipbw") == null) {
// don't display this if we skipped the test
%>
-<h3><%=intl._t("Bandwidth Test Results")%></h3>
-<table class="configtable">
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey5.png">
+<h3 id="wizardheading" class="wizard bwtest"><%=intl._t("Bandwidth Test Results")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/undraw_startup_life.png">
+<table class="mlabtable">
<tr><td><%=intl._t("Test running?")%></td><td><%=wizhelper.isNDTRunning()%></td></tr>
<tr><td><%=intl._t("Test complete?")%></td><td><%=wizhelper.isNDTComplete()%></td></tr>
<tr><td><%=intl._t("Test server location")%></td><td><%=wizhelper.getServerLocation()%></td></tr>
@@ -191,24 +202,34 @@
<%
} // skipbw
%>
-<h3><%=intl._t("Bandwidth Configuration")%></h3>
-<table id="bandwidthconfig" class="configtable">
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey6.png">
+<h3 id="wizardheading" class="wizard"><%=intl._t("Bandwidth Configuration")%></h3>
+<style>
+.bwtest {
+ display: none;
+}
+</style>
+<img class="wizardimg" src="/themes/console/images/wizard/undraw_metrics.png">
+<table id="bandwidthconfig" class="configtable wizard">
<tr><td class="infohelp" colspan="2">
<%=intl._t("I2P will work best if you configure your rates to match the speed of your internet connection.")%>
</td></tr>
<tr><td><input style="text-align: right; width: 5em;" name="inboundrate" type="text" size="5" maxlength="5" value="<jsp:getProperty name="wizhelper" property="inboundBurstRate" />" >
<%=intl._t("KBps In")%>
</td><td>(<jsp:getProperty name="wizhelper" property="inboundBurstRateBits" />)</td>
-</tr><tr>
+</tr>
+<tr>
<%-- display burst, set standard, handler will fix up --%>
<td><input style="text-align: right; width: 5em;" name="outboundrate" type="text" size="5" maxlength="5" value="<jsp:getProperty name="wizhelper" property="outboundBurstRate" />" >
<%=intl._t("KBps Out")%>
</td><td>(<jsp:getProperty name="wizhelper" property="outboundBurstRateBits" />)</td>
-</tr><tr>
+</tr>
+<tr>
<td><jsp:getProperty name="nethelper" property="sharePercentageBox" /> <%=intl._t("Share")%></td>
<td>(<jsp:getProperty name="wizhelper" property="shareRateBits" />)
</td></tr>
-<tr><td class="infohelp" colspan="2">
+</table>
+<div id="infodiv">
<% int share = Math.round(wizhelper.getShareBandwidth() * 1.024f);
if (share < 12) {
out.print("<b>");
@@ -226,16 +247,23 @@
out.print(intl._t("The higher the share bandwidth the more you improve your anonymity and help the network."));
}
-%></td></tr>
-</table>
+%>
+</div>
<%
} else if (ipg == 6) {
// Browser setup
%>
-<h3><%=intl._t("Browser Setup")%></h3>
-<table class="configtable"><tr><td><p>
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey7.png">
+<h3 id="wizardheading" class="wizard"><%=intl._t("Browser Setup")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/undraw_High_five.png">
+<div class="wizardtext"><p>
<%=intl._t("Your browser needs to be configured to work with I2P.")%>
+<%=intl._t("We currently provide an I2P Browser which configures itself automatically")%>
+<a href="https://geti2p.net/browser" target="_blank"><%=intl._t("that you may retrieve from here.")%></a>
+<%=intl._t("Be aware that this product is currently in beta-testing.")%>
+</p><p>
+<%=intl._t("Alternatively, you can configure your browser of choice to use I2P.")%>
<a href="https://geti2p.net/htproxyports" target="_blank"><%=intl._t("If you want to do this yourself, here are instructions.")%></a>
<%
if (net.i2p.util.SystemVersion.isWindows()) {
@@ -248,31 +276,32 @@
<%
} //isWindows()
%>
-</p></td></tr></table>
+</p></div>
<%
} else if (ipg == LAST_PAGE) {
// Done
%>
-<h3><%=intl._t("Welcome to I2P!")%></h3>
-<table class="configtable"><tr><td>
+<h3 id="wizardheading" class="wizard"><%=intl._t("Welcome to I2P!")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/undraw_metrics.png">
+<div class="wizardtext">
<p>
<%=intl._t("When you start I2P, it may take a few minutes to bootstrap (integrate) your router into the network and find additional peers, so please be patient.")%>
</p><p>
<%=intl._t("When I2P starts up, and during normal operation, I2P's tunnel build readiness indicator in the side panel may indicate that I2P is \"Rejecting Tunnels\"; this is normal behavior.")%>
<%=intl._t("Once green stars are indicated next to your Local Tunnels, there is a wide variety of things you can do with I2P.")%>
</p>
-</td></tr></table>
+</div>
<%
} else {
%>
-<table class="configtable"><tr><td>unknown wizard page</td></tr></table>
+<table class="configtable wizard"><tr><td>unknown wizard page</td></tr></table>
<%
}
%>
-<div class="wizardbuttons">
-<table class="configtable"><tr><td class="optionsave">
+<div class="wizardbuttons wizard">
+<table class="configtable wizard"><tr class="wizard"><td class="optionsave wizard">
<%
if (ipg != 1) {
%>
diff --git a/installer/resources/themes/console/dark/console.css b/installer/resources/themes/console/dark/console.css
index 27b886aa33aec4b7e8dca757d4c1f0bcc29bf69a..737a0bafa88e2b039e01fc2afddb9e73b88824d1 100644
--- a/installer/resources/themes/console/dark/console.css
+++ b/installer/resources/themes/console/dark/console.css
@@ -1245,6 +1245,26 @@ div.widescroll { /* only scroll content, not entire page eg /peers */
/* end topnav */
+.messages {
+ margin: 15px 0;
+ padding: 10px 15px;
+ z-index: 999;
+ border-radius: 2px;
+ border: 1px solid #7778bf;
+ background: #eef;
+ background: linear-gradient(to right, #fafaff, #eef);
+ background-size: auto 100%, 100% 100%;
+ box-shadow: inset 0 0 0 1px #fff;
+ filter: drop-shadow(0 0 1px #ccf);
+ font-weight: bold;
+ line-height: 130%;
+ filter: drop-shadow(0 0 1px #ccf);
+ position: absolute;
+ top: 5%;
+ right: 5%;
+ width: 20%;
+ }
+
div.messages {
padding: 20px 10px 20px 50px;
margin: 10px 0 15px 0;
@@ -1879,6 +1899,12 @@ h1 {
box-shadow: 0 1px 5px #000;
}
+.mlabtable {
+ width: 30%;
+ position: absolute;
+ top: 36%;
+}
+
span.newtab {
text-align: right;
font-size: 8pt;
@@ -2292,6 +2318,7 @@ input[type="submit"], input[type="reset"], select, button {
input[type="submit"], input[type="reset"], button {
padding: 5px 8px !important;
outline: none;
+ font-size: large
}
.statusnotes {
@@ -2991,7 +3018,6 @@ tr#addnew, tr#addnew:hover {
p#helptranslate {
position: relative;
top: 8px;
- margin: 0 -7px;
padding: 15px 10px 15px 50px !important;
text-align: left !important;
border-top: 1px solid #494;
@@ -3021,7 +3047,7 @@ p#helptranslate {
white-space: nowrap;
}
-h3#themeheading, h3#langheading, h3#passwordheading {
+h3#themeheading, h3#passwordheading {
border-radius: 0;
border: 1px solid #494;
padding: 8px 10px;
@@ -3053,15 +3079,15 @@ td#themeselect {
}
.langselect { /* containing box for lang selection */
- background: #000;
- background: linear-gradient(to bottom, #010 0%, #000 80%);
- width: 120px;
+ width: 40%;
float: left;
margin: 4px;
text-align: center;
- border: 1px solid #262;
padding: 8px 4px 0;
border-radius: 2px;
+ border: none;
+ float: left;
+ margin-left: 15%;
}
.langselect:hover {
@@ -3202,6 +3228,58 @@ td#themeselect {
/* end flag as radio icons */
+#wizardheading {
+ border: none;
+ width: 50%;
+ padding: 2%;
+ margin: 2% 24%;
+ top: 2%;
+ font-size: xx-large;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ word-spacing: 0.1em;
+ color: #41465f;
+ position: absolute;
+ background: none !important;
+ box-shadow: none !important;
+ z-index: 999;
+}
+
+#infodiv {
+ position: absolute;
+ right: 12%;
+ width: 16%;
+ top: 36%;
+ background: linear-gradient(to right, #fafaff, #000);
+ background-size: auto 100%, 100% 100%;
+ box-shadow: inset 0 0 0 1px #fff;
+ filter: drop-shadow(0 0 1px #ccf);
+}
+
+#bandwidthconfig {
+ border: 1px solid #7778bf;
+}
+
+#bandwidthconfig.configtable.wizard {
+ width: 35%;
+ top: 36%;
+ left: 31%;
+ position: absolute;
+ background: none;
+ font-size: larger;
+}
+
+.configtable.wizard {
+ width: 20%;
+ bottom: 5rem;
+ right: 10rem;
+ position: absolute;
+ box-shadow: none !important;
+ white-space: normal;
+ background: none;
+ font-size: larger;
+}
+
div.ui_lang { /* lang text label */
text-align: center;
background: #001000;
@@ -3227,12 +3305,26 @@ h3#langheading {
margin-bottom: 0;
}
-div#langsettings {
+select#langsettings {
border: 1px solid #494;
padding: 8px 7px 12px;
margin-top: -1px;
margin-bottom: -12px;
background: #000;
+ font-size: large;
+ height: 3rem;
+ width: 15rem;
+}
+
+div#langsettings {
+ border: 1px solid #7778bf;
+}
+
+div#wizlangsettings.wizard {
+ border: none;
+ position: absolute;
+ left: 15rem;
+ bottom: 10rem;
}
#langsettings hr {
@@ -3240,7 +3332,7 @@ div#langsettings {
}
.formaction#langui {
- margin: 7px -8px -15px;
+ margin: 5px 0 0;
padding: 5px;
border: 1px solid #494;
background: #000;
@@ -3451,6 +3543,75 @@ p#ipconfig, p#ipv4config, p#udpconfig, p#externaltcp {
background: #001000;
}
+#bandwidthconfig table.configtable {
+ border: none;
+ bottom: 5rem;
+ right: 10rem;
+}
+
+.configtable tr:last-child td {
+ border-top: 1px solid #7778bf !important;
+}
+
+.configtable.wizard tr:last-child td {
+ border-top: none;
+}
+
+img.wizard.progress {
+ position: absolute;
+ top: 2%;
+ left: 0%;
+ width: 31%;
+ max-width: 31%;
+ -webkit-filter: invert(1);
+ filter: invert(1);
+ z-index: 500;
+}
+
+.wizard {
+ border: none !important;
+ background: none !important;
+ box-shadow: none !important;
+ border-top: none !important;
+}
+
+#bwconfigheader {
+ background: white;
+}
+
+.wizardtext {
+ width: 25%;
+ position: absolute;
+ top: 36%;
+ left: 5%;
+ font-size: larger;
+}
+
+#wizard {
+ z-index: -1;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ height: 100%;
+ width: 100%;
+ background-color: #000;
+}
+
+.wizardimg {
+ max-width: 100%;
+ max-height: 100vh;
+ margin: auto;
+ -webkit-filter: invert(1);
+ filter: invert(1);
+ z-index: -1;
+ position: absolute;
+ left: 31%;
+}
+
+#bandwidthconfig .configtable tr:last-child td {
+ border: none;
+}
+
table#bandwidthconfig {
margin-bottom: 1px;
}
@@ -3460,6 +3621,48 @@ table#bandwidthconfig td:first-child {
white-space: nowrap;
}
+#bandwidthconfig td:last-child {
+ white-space: normal;
+ background: none;
+ font-size: larger;
+}
+
+#bandwidthconfig.configtable td {
+ white-space: normal;
+ background: none;
+ font-size: larger;
+}
+
+#bandwidthconfig.configtable.wizard td {
+ white-space: normal;
+ background: none;
+ font-size: small;
+}
+
+#xhr.notification {
+ width: 30%;
+ position: absolute;
+ left: 30%;
+ top: 38%;
+ font-size: larger;
+ background: #000;
+ box-shadow: inset 0 0 0 1px #fff;
+ filter: drop-shadow(0 0 1px #ccf);
+}
+
+#xhr2.notification {
+ width: 30%;
+ position: absolute;
+ left: 30%;
+ top: 40%;
+ font-size: larger;
+ background: #000;
+ background: linear-gradient(to right, #fafaff, #000);
+ background-size: auto 100%, 100% 100%;
+ box-shadow: inset 0 0 0 1px #fff;
+ filter: drop-shadow(0 0 1px #ccf);
+}
+
table#bandwidthconfig {
padding: 5px 10px !important;
}
@@ -3695,6 +3898,16 @@ table#tunnelconfig td:first-child {
/* end /configtunnels */
+input.cancel, button.cancel {
+ padding: 5px 7px 5px 22px;
+ /*font-size: large;*/
+}
+
+input.go, button.go, input[value="GO"] {
+ padding: 5px 7px 5px 22px;
+ /*font-size: large;*/
+}
+
/* /configupdate */
#i2pupdates {
@@ -5695,8 +5908,8 @@ textarea#advancedsettings {
padding: 15px 15px 15px 50px !important;
text-align: justify;
line-height: 130% !important;
- border-bottom: 1px solid #494;
- border-top: 1px solid #494;
+ /*border-bottom: 1px solid #494;
+ border-top: 1px solid #494;*/
white-space: normal !important;
font-weight: normal !important;
background-size: 28px 28px !important;
@@ -5728,7 +5941,7 @@ td.optionsave {
padding: 5px !important;
white-space: nowrap;
/* width: 50px;*/
- background: #000;
+ background: none;
}
#floodfillconfig form, #plugininstall form, #plugininstall2 form, #updateplugins form, .configtable form {
diff --git a/installer/resources/themes/console/images/wizard/logogrey1.png b/installer/resources/themes/console/images/wizard/logogrey1.png
new file mode 100644
index 0000000000000000000000000000000000000000..84992adcb80ea3c8707a09bf86e9bc601ab891d8
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/logogrey1.png differ
diff --git a/installer/resources/themes/console/images/wizard/logogrey2.png b/installer/resources/themes/console/images/wizard/logogrey2.png
new file mode 100644
index 0000000000000000000000000000000000000000..97592514b866fa922e31b7e26b72a2eff0656b56
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/logogrey2.png differ
diff --git a/installer/resources/themes/console/images/wizard/logogrey3.png b/installer/resources/themes/console/images/wizard/logogrey3.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee57f61431dd8711cd577459361df40473b7f8d4
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/logogrey3.png differ
diff --git a/installer/resources/themes/console/images/wizard/logogrey4.png b/installer/resources/themes/console/images/wizard/logogrey4.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b8da82d1c9c90c9292bdf9cff2c034ead68ca6b
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/logogrey4.png differ
diff --git a/installer/resources/themes/console/images/wizard/logogrey5.png b/installer/resources/themes/console/images/wizard/logogrey5.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ae0190e0973c271bab05efce563bab3b15cc3ca
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/logogrey5.png differ
diff --git a/installer/resources/themes/console/images/wizard/logogrey6.png b/installer/resources/themes/console/images/wizard/logogrey6.png
new file mode 100644
index 0000000000000000000000000000000000000000..d36f09b30829865208f8c71e0cd834143b94014b
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/logogrey6.png differ
diff --git a/installer/resources/themes/console/images/wizard/logogrey7.png b/installer/resources/themes/console/images/wizard/logogrey7.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a5ba08e81491d7ef7283951b4f5f956a6cd957b
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/logogrey7.png differ
diff --git a/installer/resources/themes/console/images/wizard/undraw_High_five.png b/installer/resources/themes/console/images/wizard/undraw_High_five.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb7598ff5f985273746d15ccd068be825e067b47
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/undraw_High_five.png differ
diff --git a/installer/resources/themes/console/images/wizard/undraw_connected_world.png b/installer/resources/themes/console/images/wizard/undraw_connected_world.png
new file mode 100644
index 0000000000000000000000000000000000000000..431ff7af5bc639fc3420fc8dfe0fe960f8748acf
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/undraw_connected_world.png differ
diff --git a/installer/resources/themes/console/images/wizard/undraw_globe.png b/installer/resources/themes/console/images/wizard/undraw_globe.png
new file mode 100644
index 0000000000000000000000000000000000000000..a17f90e0c145a38ba6708bea34a5146a6a3035db
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/undraw_globe.png differ
diff --git a/installer/resources/themes/console/images/wizard/undraw_in_progress.png b/installer/resources/themes/console/images/wizard/undraw_in_progress.png
new file mode 100644
index 0000000000000000000000000000000000000000..99ff40dbc857574aab9f66488bf36ba8f94bdb99
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/undraw_in_progress.png differ
diff --git a/installer/resources/themes/console/images/wizard/undraw_metrics.png b/installer/resources/themes/console/images/wizard/undraw_metrics.png
new file mode 100644
index 0000000000000000000000000000000000000000..587f93f782ecde995ba9574059415ca4c609edb2
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/undraw_metrics.png differ
diff --git a/installer/resources/themes/console/images/wizard/undraw_speed_test.png b/installer/resources/themes/console/images/wizard/undraw_speed_test.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5f01c65bcda4ddcf8fb2a31bec9de6392e5ffea
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/undraw_speed_test.png differ
diff --git a/installer/resources/themes/console/images/wizard/undraw_startup_life.png b/installer/resources/themes/console/images/wizard/undraw_startup_life.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b9f2ee98ff336b77ffdc980a6bfa365e80532a3
Binary files /dev/null and b/installer/resources/themes/console/images/wizard/undraw_startup_life.png differ
diff --git a/installer/resources/themes/console/light/console.css b/installer/resources/themes/console/light/console.css
index 880af67661a822ebaf4cb772535280491ff0a572..241700c637b037d33f800268988a427cd5b5c1c2 100644
--- a/installer/resources/themes/console/light/console.css
+++ b/installer/resources/themes/console/light/console.css
@@ -1881,7 +1881,13 @@ h3#passwordheading {
filter: none;
}
-h3#langheading, h3#themeheading, h3#pluginmanage, h3#pconfig, h3#webappconfig, h3#advancedclientconfig, h3#i2pclientconfig, #config_stats h3 {
+.mlabtable {
+ width: 30%;
+ position: absolute;
+ top: 36%;
+}
+
+h3#themeheading, h3#pluginmanage, h3#pconfig, h3#webappconfig, h3#advancedclientconfig, h3#i2pclientconfig, #config_stats h3 {
border: 1px solid #7778bf;
border-radius: 0;
box-shadow: inset 0 0 0 1px #fff;
@@ -2152,15 +2158,20 @@ h3#graphdisplay {
.messages {
margin: 15px 0;
padding: 10px 15px;
+ z-index: 999;
border-radius: 2px;
border: 1px solid #7778bf;
background: #eef;
background: linear-gradient(to right, #fafaff, #eef);
background-size: auto 100%, 100% 100%;
- font-weight: bold;
box-shadow: inset 0 0 0 1px #fff;
- line-height: 130%;
filter: drop-shadow(0 0 1px #ccf);
+ font-weight: bold;
+ line-height: 130%;
+ position: absolute;
+ top: 5%;
+ right: 5%;
+ width: 20%;
}
.main#config_update .messages {
@@ -2233,11 +2244,11 @@ table {
td.optionsave {
text-align: right;
padding: 5px !important;
- background: #fafaff;
- border-top: 1px solid #7778bf !important;
+ background: none;
+ /*border-top: 1px solid #7778bf !important;*/
}
-td.optionsave, .formaction, form[action="configpeer"] tr:last-child td, table#addkeyring tr:last-child td {
+.formaction, form[action="configpeer"] tr:last-child td, table#addkeyring tr:last-child td {
background: linear-gradient(to bottom, #fafaff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important;
}
@@ -2249,6 +2260,13 @@ td.optionsave, .formaction, form[action="configpeer"] tr:last-child td, table#ad
.configtable {
box-shadow: none !important;
+ white-space: normal;
+}
+
+#bandwidthconfig table.configtable {
+ border: none;
+ bottom: 5rem;
+ right: 10rem;
}
.configtable td {
@@ -2256,15 +2274,24 @@ td.optionsave, .formaction, form[action="configpeer"] tr:last-child td, table#ad
}
.configtable tr:last-child td {
- border-top: 1px solid #7778bf !important;
+ border-top: 1px solid #7778bf;
+}
+
+.wizard tr:last-child td {
+ border-top: none !important;
+}
+
+#bandwidthconfig .configtable tr:last-child td {
+ border: none;
}
td.infohelp, #help tr:hover td.infohelp, #eventlog tr:hover .infohelp {
background: #fff url(/themes/console/images/info/infohelp.png) 12px center no-repeat;
background: url(/themes/console/images/info/infohelp.png) 12px center no-repeat, linear-gradient(135deg, #fafaff, #f8f8ff);
padding: 15px 15px 15px 50px;
- border-bottom: 1px solid #7778bf !important;
- border-top: 1px solid #7778bf !important;
+ /*border-bottom: 1px solid #7778bf !important;
+ border-top: 1px solid #7778bf !important;*/
+ border: unset;
text-align: justify;
}
@@ -2549,6 +2576,57 @@ td {
margin-left: 3px !important;
}
+#wizardheading {
+ border: none;
+ width: 50%;
+ padding: 2%;
+ margin: 2% 24%;
+ top: 2%;
+ font-size: xx-large;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ word-spacing: 0.1em;
+ color: #41465f;
+ position: absolute;
+ background: none !important;
+ box-shadow: none !important;
+}
+
+#infodiv {
+ position: absolute;
+ right: 12%;
+ width: 16%;
+ top: 36%;
+ background: #eef linear-gradient(to right, #fafaff, #eef);
+ background-size: auto 100%, 100% 100%;
+ box-shadow: inset 0 0 0 1px #fff;
+ filter: drop-shadow(0 0 1px #ccf);
+}
+
+#bandwidthconfig {
+ border: 1px solid #7778bf;
+}
+
+#bandwidthconfig.configtable.wizard {
+ width: 35%;
+ top: 36%;
+ left: 31%;
+ position: absolute;
+ background: none;
+ font-size: larger;
+}
+
+.configtable.wizard {
+ width: 20%;
+ bottom: 5rem;
+ right: 10rem;
+ position: absolute;
+ box-shadow: none !important;
+ white-space: normal;
+ background: none;
+ font-size: larger;
+}
+
#bandwidthconfig td:first-child {
width: 200px;
white-space: nowrap;
@@ -2557,6 +2635,44 @@ td {
#bandwidthconfig td:last-child {
white-space: normal;
+ background: none;
+ font-size: larger;
+}
+
+#bandwidthconfig.configtable td {
+ white-space: normal;
+ background: none;
+ font-size: larger;
+}
+
+#bandwidthconfig.configtable.wizard td {
+ white-space: normal;
+ background: none;
+ font-size: small;
+}
+
+#xhr.notification {
+ width: 30%;
+ position: absolute;
+ left: 30%;
+ top: 38%;
+ font-size: larger;
+ background: #eef;
+ box-shadow: inset 0 0 0 1px #fff;
+ filter: drop-shadow(0 0 1px #ccf);
+}
+
+#xhr2.notification {
+ width: 30%;
+ position: absolute;
+ left: 30%;
+ top: 40%;
+ font-size: larger;
+ background: #eef;
+ background: linear-gradient(to right, #fafaff, #eef);
+ background-size: auto 100%, 100% 100%;
+ box-shadow: inset 0 0 0 1px #fff;
+ filter: drop-shadow(0 0 1px #ccf);
}
/* begin home page */
@@ -3758,6 +3874,7 @@ button:active, input[type="submit"]:active, input[type="reset"]:active {
input.accept, button.accept {
background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
padding: 5px 7px 5px 22px;
+ font-size: large;
}
input.accept:hover, button.accept:hover, input.accept:focus, button.accept:focus {
@@ -3797,6 +3914,7 @@ input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus {
input.add, button.add {
background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
padding: 5px 7px 5px 22px;
+ font-size: large;
}
input.add:hover, button.add:hover,
@@ -3817,6 +3935,7 @@ input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus {
input.cancel, button.cancel {
background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
padding: 5px 7px 5px 22px;
+ font-size: large;
}
input.cancel:hover, button.cancel:hover,
@@ -3873,6 +3992,7 @@ input.check[value$="updates"]:focus, button.check[value$="updates"]:focus {
input.delete, button.delete {
background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
padding: 5px 7px 5px 22px;
+ font-size: large;
}
input.delete:hover, button.delete:hover,
@@ -3893,6 +4013,7 @@ input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus {
input.download, button.download {
background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
padding: 5px 7px 5px 22px;
+ font-size: large;
}
input.download:hover, button.download:hover,
@@ -3936,6 +4057,7 @@ input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus {
input.go, button.go, input[value="GO"] {
background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
padding: 5px 7px 5px 22px;
+ font-size: large;
}
input.go:hover, button.go:hover, input[value="GO"]:hover,
@@ -3966,6 +4088,7 @@ input.back:focus {
input.reload, button.reload {
background: url(/themes/console/images/buttons/restore.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
padding: 5px 7px 5px 22px;
+ font-size: large;
}
input.reload:hover, button.reload:hover,
@@ -4595,13 +4718,20 @@ body.iframed {
/* Theme choice & Language selection in /configui */
-#themeui.formaction, #langui.formaction {
+#themeui.formaction {
border: none;
border-top: 1px solid #7778bf;
background: none;
margin: 5px -5px 0;
}
+#langui.formaction {
+ border: none;
+ border-top: 1px solid #7778bf;
+ background: none;
+ margin: 5px 0 0;
+}
+
#consolepass.formaction {
margin-top: -6px;
margin-bottom: -3px;
@@ -4704,8 +4834,8 @@ body.iframed {
p#helptranslate {
position: relative;
top: 4px;
- padding: 15px 10px 15px 50px !important;
text-align: left !important;
+ padding: 15px 10px 15px 50px !important;
border-top: 1px solid #7778bf;
background: url(/themes/console/images/info/notice.png) left 14px center no-repeat, #fff;
background: url(/themes/console/images/info/notice.png) left 14px center no-repeat, linear-gradient(135deg, #fafaff, #f8f8ff);
@@ -4771,34 +4901,87 @@ div#themesettings {
background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(248, 248, 255, 0.3) 3px, #fafaff 5px);
}
-div#langsettings {
+select#langsettings {
padding: 4px 5px 0;
- border: 1px solid #7778bf;
- margin: -16px 0 0;
- background: #fafaff;
- background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(248, 248, 255, 0.3) 3px, #fafaff 5px);
+ font-size: large;
+ height: 3rem;
+ width: 15rem;
+}
+
+div#langsettings {
+ border: 1px solid #7778bf;
+}
+
+div#wizlangsettings.wizard {
+ position: absolute;
+ left: 15rem;
+ bottom: 10rem;
}
#themesettings hr, #langsettings hr {
display: none;
}
+img.wizard.progress {
+ position: absolute;
+ top: 2%;
+ left: 0%;
+ width: 31%;
+ max-width: 31%;
+ mix-blend-mode: multiply;
+}
+
+.wizard {
+ border: none !important;
+ background: none !important;
+ box-shadow: none !important;
+ border-top: none !important;
+}
+
+#bwconfigheader {
+ background: white;
+}
+
+.wizardtext {
+ width: 25%;
+ position: absolute;
+ top: 36%;
+ left: 5%;
+ font-size: larger;
+}
+
+#wizard {
+ z-index: -1;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ height: 100%;
+ width: 100%;
+ background-color: #f8f9fa;
+}
+
.langselect { /* containing box for lang selection */
- width: 115px;
+ width: 40%;
min-height: 64px;
float: left;
margin: 4px;
text-align: center;
- border: 1px solid #7778bf;
padding: 4px 4px 0;
- border-radius: 2px;
- background: #fff;
- background: linear-gradient(to bottom, #fff, #ddf);
+ background-color: white;
+ border: none;
+ float: left;
+ margin-left: 15%;
transition: transform 0.3s ease 0s;
- box-shadow: inset 0 0 0 1px #fff;
filter: drop-shadow(0 0 1px #ccf);
}
+.wizardimg {
+ max-width: 100%;
+ max-height: 100vh;
+ margin: auto;
+ mix-blend-mode: multiply;
+}
+
.langselect:hover {
border: 1px solid #f60;
background: #fff;
@@ -4964,7 +5147,6 @@ p#helptranslate {
clear: both;
padding: 5px 10px 10px;
text-align: right;
- margin: 0 -5px;
}
/* configui password*/