fix(index.html): UI adjustments

index.html

@@ -63,25 +63,48 @@
 
                     document.body.innerHTML
                         = "<div style='"
-                            + "position: absolute;top: 50%;left: 50%;"
-                            + "text-align: center;"
-                            + "transform: translate(-50%, -50%)'>"
-                            + "The application failed to load."
-                            + "<a id='showMore' style='"
-                            + "text-decoration: underline;"
-                            + "cursor: pointer'>more</a>"
-                            + "<div id='moreInfo' style='"
-                            + "display: none'>" + fileRef + "</div>"
-                            + "<br/> "
-                            + "The page should reload shortly... "
-                            + "<a href='" + href + "'"
-                            + " style='text-decoration: underline'>reload</a>"
-                            + "</div>";
-                    document.getElementById("showMore")
-                        .addEventListener('click', function () {
-                           document
-                               .getElementById("moreInfo")
-                               .setAttribute("style", "display: block;");
+                        + "position: absolute;top: 50%;left: 50%;"
+                        + "text-align: center;"
+                        + "font-size: medium;"
+                        + "font-weight: 400;"
+                        + "transform: translate(-50%, -50%)'>"
+                        + "Uh oh! We couldn't fully download everything we needed :(" // jshint ignore:line
+                        + "<br/> "
+                        + "We will try again shortly. In the mean time, check for problems with your Internet connection!" // jshint ignore:line
+                        + "<br/><br/> "
+                        + "<div id='moreInfo' style='"
+                        + "display: none;'>" + "Missing " + fileRef
+                        + "<br/><br/></div>"
+                        + "<a id='showMore' style='"
+                        + "text-decoration: underline;"
+                        + "font-size:small;"
+                        + "cursor: pointer'>show more</a>"
+                        + "&nbsp;&nbsp;&nbsp;"
+                        + "<a href='" + href + "' style='"
+                        + "text-decoration: underline;"
+                        + "font-size:small;"
+                        + "'>reload now</a>"
+                        + "</div>";
+
+                    var showMoreElem = document.getElementById("showMore");
+                    showMoreElem.addEventListener('click', function () {
+                            var moreInfoElem
+                                    = document.getElementById("moreInfo");
+
+                            if (showMoreElem.innerHTML === "show more") {
+                                moreInfoElem.setAttribute(
+                                    "style",
+                                    "display: block;"
+                                    + "color:#FF991F;"
+                                    + "font-size:small;"
+                                    + "user-select:text;");
+                                showMoreElem.innerHTML = "show less";
+                            }
+                            else {
+                                moreInfoElem.setAttribute(
+                                    "style", "display: none;");
+                                showMoreElem.innerHTML = "show more";
+                            }
                         });
 
                     window.setTimeout(