Style updates to include layout structure, side navigation, hidden menu, consolidation of formatting, button effects, and color shift

3 files changed, 196 insertions, 102 deletions

diff --git a/spice.css b/spice.css
index 968ba16..90aecd6 100644
--- a/spice.css
+++ b/spice.css
@@ -1,110 +1,160 @@
 body
 {
-  background-color: #999999;
-  color: #000000; margin: 0; padding: 0;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
-  font-size: 12pt;
-  line-height: 1.5em;
+    background-color: #999999;
+    color: #000000; 
+    margin: 0;
+    padding: 0;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
+    font-size: 12pt;
+    line-height: 1.5em;
 }
 
 * { margin: 0; }
 
-#login
+button
 {
-    width: 95%;
-    margin-left: auto;
-    margin-right: auto;
-    border: 1px solid #999999;
+    cursor: pointer;
+    color: #000000;
+    background-color: #999999;
+    border: 1px solid #4a4a4a;
+    min-width: 150px;
+    border-radius: 10px;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#24414e));
-    background: -moz-linear-gradient(top,  #fff,  #24414e);
+    background: -moz-linear-gradient(top, #fff, #24414e);
+    -ms-transform: translate(15%, -8%);
+    transform: translate(15%, -8%);
+    font-size: .90em;
+    font-weight: bolder;
+    padding: 0px 0px 3px 0px;
+    margin-top: 5px;
+}
+button:focus
+{
+    outline: none;
+}
+button:hover
+{
+    background-color: #24414e
+}
+button:active
+{
     background-color: #24414e;
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
+    transform: translate(14.85%, -7%);
 }
-#login span.logo
+
+.SidenavClosed
 {
-    display: inline-block;
-    margin-right: 5px;
-    padding: 2px 10px 2px 20px;
-    border-right: 1px solid #999999;
-    font-size: 20px;
-    font-weight: bolder;
-    text-shadow: #efefef 1px 1px 0px;
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #bbbbbb;
+    box-shadow: 1px 0px #00000040;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+.SidenavOpen
+{
+    height: 100%;
+    width: 200px !important;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #bbbbbb;
+    box-shadow: 1px 0px #00000040;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+#Sidenav label
+{ 
+    color: #000000;
+    margin-left: 3%;
+    text-shadow: 1px 1px 0px rgba(175, 210, 220, 0.8);
+    position: absolute;
+    font-size: .9em;
 }
-#login label { color: #ffffff; text-shadow: 1px 1px 0px rgba(175, 210, 220, 0.8); }
-#login input
+#Sidenav input
 {
-    padding: 5px;
+    padding: 3px;
+    background-color: #fAfAfA;
     border: 1px inset #999999;
     outline: none;
+    float: right;
+    margin-right: 3%;
     -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
+    position: relative;
+    max-width: 110px;
 }
-#login input#host { width: 200px; }
-#login input#port { width: 75px; }
-#login input#password { width: 100px; }
-#login button
+#Sidenav .closebtn
 {
-    padding: 5px 10px 5px 10px;
-    margin-left: 5px;
-    text-shadow: #efefef 1px 1px 0px;
-    border: 1px outset #999999;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 25px;
+    margin-left: 50px;
     cursor: pointer;
-    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
+    color: #000000;
+}
+
+canvas
+{
+    border: 1px solid #000000;
+}
+
+#login
+{
+    background: #bbbbbb;
+    z-index: 1;
+    padding-top: 2px;
+    border-bottom: 2px solid #00000040;
 }
-#login button:hover
+#login p
 {
-    background-color: #666666;
-    color: #ffffff;
+    margin-left: 27%;
+    display: inline;
+    font-size: large;
 }
 
 #spice-area
 {
     height: 100%;
-    width: 95%;
-    padding: 0;
+    width: 100%;
     margin-left: auto;
     margin-right: auto;
-    border: solid #222222 1px;
-    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
 }
 .spice-screen
 {
     min-height: 600px;
     height: 100%;
-    margin: 10px;
+    text-align: center;
     padding: 0;
-    background-color: #333333;
+    background-color: #999999;
 }
-.spice-message {
-    width: 700px;
-    height: 50px;
+.spice-message
+{
+    width: 90%;
+    height: 40%;
     overflow: auto;
-    margin-top: 5px;
     margin-left: auto;
     margin-right: auto;
     padding: 10px;
-    background-color: #efefef;
-    border: solid #c3c3c3 2px;
     font-size: 8pt;
     line-height: 1.1em;
     font-family: 'Andale Mono', monospace;
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
-    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-    /* We default the message box to hidden. */
-    display: none;
+    background-color: #fAfAfA;
+    border: 1px inset #999999;
+    border-radius: 3px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
 }
 .spice-message p {
     margin-bottom: 0em;
@@ -115,4 +165,4 @@ body
 }
 .spice-message-error {
     color: red;
-}
+}
\ No newline at end of file
diff --git a/spice.html b/spice.html
index fc1adf6..59d161c 100644
--- a/spice.html
+++ b/spice.html
@@ -75,7 +75,7 @@
 
                 uri = scheme + host + ":" + port;
 
-                document.getElementById('connectButton').innerHTML = "Stop";
+                document.getElementById('connectButton').innerHTML = "Stop Connection";
                 document.getElementById('connectButton').onclick = disconnect;
 
                 try
@@ -97,7 +97,7 @@
                 if (sc) {
                     sc.stop();
                 }
-                document.getElementById('connectButton').innerHTML = "Start";
+                document.getElementById('connectButton').innerHTML = "Start Connection";
                 document.getElementById('connectButton').onclick = connect;
                 if (window.File && window.FileReader && window.FileList && window.Blob)
                 {
@@ -131,26 +131,6 @@
                     console.log("File API is not supported");
                 }
             }
-
-            function toggle_console()
-            {
-                var checkbox = document.getElementById('show_console');
-                var m = document.getElementById('message-div');
-
-                if (checkbox.checked)
-                {
-                    m.style.display = 'block';
-                }
-                else
-                {
-                    m.style.display = 'none';
-                }
-
-                window.addEventListener('resize', SpiceHtml5.handle_resize);
-                if (sc) {
-                    SpiceHtml5.resize_helper(sc);
-                }
-            }
             /* SPICE port event listeners
             window.addEventListener('spice-port-data', function(event) {
                 // Here we convert data to text, but really we can obtain binary data also
@@ -164,7 +144,6 @@
             */
 
             document.getElementById('connectButton').onclick = connect;
-            document.getElementById('show_console').onchange = toggle_console;
         </script>
 
     </head>
@@ -172,23 +151,55 @@
     <body>
 
         <div id="login">
-            <span class="logo">SPICE</span>
-            <label for="host">Host:</label> <input type='text' id='host' value='localhost'> <!-- localhost -->
-            <label for="port">Port:</label> <input type='text' id='port' value='5959'>
-            <label for="password">Password:</label> <input type='password' id='password' value=''>
-            <label for="show_console">Show console </label><input type="checkbox" id="show_console" value="1">
-            <button id="connectButton">Start</button>
+            <button onclick="open_nav()">&#9776; SPICE</button>
+            <p id="hostname">Host Console</p>
+        </div>
+
+        <div id="Sidenav" class="SidenavClosed" style="width: 0;">
+            <p class="closebtn" onclick="close_nav()">&#10006;</p>
+            <label for="host">Host:</label> <input type='text' id='host' value='localhost'> <!-- localhost --><br>
+            <label for="port">Port:</label> <input type='text' id='port' value='5959'><br>
+            <label for="password">Password:</label> <input type='password' id='password' value=''><br>
+            <button id="connectButton">Start Connection</button><br>
+            <button id="debugLogs">Toggle Debug Logs</button>
+            <div id="message-div" class="spice-message" style="display: none;"></div>
+
+            <div id="debug-div">
+            <!-- If DUMPXXX is turned on, dumped images will go here -->
+            </div>
         </div>
 
         <div id="spice-area">
             <div id="spice-screen" class="spice-screen"></div>
         </div>
 
-        <div id="message-div" class="spice-message"></div>
+        <script>
+            function show_debug_Logs() {
+                var content = document.getElementById('message-div')
+                if (content.style.display === 'block') {
+                    content.style.display = 'none';
+                } else {
+                    content.style.display = 'block';
+                }
+            }
 
-        <div id="debug-div">
-        <!-- If DUMPXXX is turned on, dumped images will go here -->
-        </div>
+            function display_hostname() {
+                var title = new URLSearchParams(window.location.search);
+                name = title.getAll('title');
+                name = name.split('(')[0];
+                document.getElementById('hostname').innerHTML = (name);
+            }
+
+            function open_nav() {
+                document.getElementById('Sidenav').className = 'SidenavOpen';
+            }
 
+            function close_nav() {
+                document.getElementById('Sidenav').className = 'SidenavClosed';
+            }
+
+            document.getElementById('debugLogs').addEventListener('click', function() { show_debug_Logs(); });
+            display_hostname()
+        </script>
     </body>
 </html>
diff --git a/spice_auto.html b/spice_auto.html
index b841499..9e063e9 100644
--- a/spice_auto.html
+++ b/spice_auto.html
@@ -198,18 +198,51 @@
     <body>
 
         <div id="login">
-            <span class="logo">SPICE</span>
+            <button onclick="open_nav()">&#9776; SPICE</button>
+            <p id="hostname">Host Console</p>
+        </div>
+
+        <div id="Sidenav" class="SidenavClosed" style="width: 0;">
+            <p class="closebtn" onclick="close_nav()">&#10006;</p>
+            <button id="debugLogs">Toggle Debug Logs</button>
+            <div id="message-div" class="spice-message" style="display: none;"></div>
+
+            <div id="debug-div">
+            <!-- If DUMPXXX is turned on, dumped images will go here -->
+            </div>
         </div>
 
         <div id="spice-area">
             <div id="spice-screen" class="spice-screen"></div>
         </div>
 
-        <div id="message-div" class="spice-message"></div>
+        <script>
+            function show_debug_Logs() {
+                var content = document.getElementById('message-div')
+                if (content.style.display === 'block') {
+                    content.style.display = 'none';
+                } else {
+                    content.style.display = 'block';
+                }
+            }
 
-        <div id="debug-div">
-        <!-- If DUMPXXX is turned on, dumped images will go here -->
-        </div>
+            function display_hostname() {
+                var title = new URLSearchParams(window.location.search);
+                name = title.getAll('title');
+                name = name.split('(')[0];
+                document.getElementById('hostname').innerHTML = (name);
+            }
+
+            function open_nav() {
+                document.getElementById('Sidenav').className = 'SidenavOpen';
+            }
 
+            function close_nav() {
+                document.getElementById('Sidenav').className = 'SidenavClosed';
+            }
+
+            document.getElementById('debugLogs').addEventListener('click', function() { show_debug_Logs(); });
+            display_hostname()
+        </script>
     </body>
-</html>
+</html>
\ No newline at end of file