modern-styled bandwidth configuration menu

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

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(SELECTED);
-            buf.append("value=\"").append(lang).append("\" id=\"").append(lang).append("\">" +
+
-                       "<img height=\"48\" width=\"48\" alt=\"\" src=\"/flags.jsp?s=48&amp;c=").append(langs[i][1]).append("\">" +
+            buf.append(" value=\"").append(lang).append("\"");
-                       "<div class=\"ui_lang\">");
+            buf.append(" id=\"").append(lang).append("\"").append(">");
+            //buf.append(" style=\"").append("background-image:url(/flags.jsp?s=48&amp;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();
     }
 

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>
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey1.png">
-<div id="langsettings">
+<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>
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey2.png">
-<table class="configtable"><tr><td>
+<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>
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey3.png">
-<table class="configtable"><tr><td>
+<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>
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey4.png">
-<div id="xhr">
+<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>
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey5.png">
-<table class="configtable">
+<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>
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey6.png">
-<table id="bandwidthconfig" class="configtable">
+<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>
+<img class="wizard progress" src="/themes/console/images/wizard/logogrey7.png">
-<table class="configtable"><tr><td><p>
+<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>
+<h3 id="wizardheading" class="wizard"><%=intl._t("Welcome to I2P!")%></h3>
-<table class="configtable"><tr><td>
+<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">
+<div class="wizardbuttons wizard">
-<table class="configtable"><tr><td class="optionsave">
+<table class="configtable wizard"><tr class="wizard"><td class="optionsave wizard">
 <%
     if (ipg != 1) {
 %>

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;
+     width: 40%;
-     background: linear-gradient(to bottom, #010 0%, #000 80%);
-     width: 120px;
      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-bottom: 1px solid #494;
-     border-top: 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 {

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;
+     background: none;
-     border-top: 1px solid #7778bf !important;
+     /*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-bottom: 1px solid #7778bf !important;
-     border-top: 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;
+     font-size: large;
-     margin: -16px 0 0;
+     height: 3rem;
-     background: #fafaff;
+     width: 15rem;
-     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(248, 248, 255, 0.3) 3px, #fafaff 5px);
+}
+
+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-color: white;
-     background: #fff;
+     border: none;
-     background: linear-gradient(to bottom, #fff, #ddf);
+     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*/