use images as readiness indicators for now

home.css

@@ -280,4 +280,18 @@ li {
 .onboardingContent {
   font-size: .8rem!important;
   text-align: left
+}
+#proxy-check {
+  visibility: hidden;
+}
+.consoleOn:hover #proxy-check {
+  visibility: visible;
+  opacity: 1;
+}
+.proxyReady:hover #proxy-check {
+  visibility: visible;
+  opacity: 1;
+}
+img.readyness {
+  height: 3rem;
 }

home.html

@@ -20,9 +20,15 @@
             <p class="beta">This is a experimental sub-project of I2P. It is currently Beta software.</p>
           </div>
           <div id="readyness">
-            <div id="consoleOn" class="hideIfI2PConsoleOff">The browser detected I2P running in background!</div>
+            <div id="consoleOn" class="hideIfI2PConsoleOff">
+              <img class="readyness" src="http://proxy.i2p/themes/console/images/local_up.png" alt="Proxy is not ready."/>
+              <span id="proxy-check">Proxy is ready.</span>
+            </div>
             <!--<div id="proxyUnready" class="hideIfI2PProxyOn">The proxy is not ready yet.</div>-->
-            <div id="proxyReady" class="hideIfI2PProxyOff">Your proxy is ready!</div>
+            <div id="proxyReady" class="hideIfI2PProxyOff">
+              <img class="readyness" src="http://proxy.i2p/themes/console/images/local_up.png" alt="Proxy is not ready."/>
+              <span id="proxy-check">Proxy is ready.</span>
+            </div>
           </div>
           <div id="onboarding" class="hideIfI2PConsoleOff">
             <h3 id="onboardingTitle">New to I2P? Learn more here.</h3>

home.js

@@ -0,0 +1,8 @@
+function flipVisibility(div) {
+  var x = document.getElementById(div);
+  if (x.style.display === "none") {
+    x.style.display = "block";
+  } else {
+    x.style.display = "none";
+  }
+}