diff --git a/spice.css b/spice.css
index 968ba16ff9b0bbb1c289f25952095032aebd53c2..90aecd69c8449f07c9b1f3fab1eb78d93b24b5e1 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 fc1adf604beb63c09cc194204eb266376b24dcf1..59d161c68f70273470dd6423f1f088fb4a649bd4 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()">☰ SPICE</button>
+ <p id="hostname">Host Console</p>
+ </div>
+
+ <div id="Sidenav" class="SidenavClosed" style="width: 0;">
+ <p class="closebtn" onclick="close_nav()">✖</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 b84149942e109d4c21d5fe7db38d023643f61e1b..9e063e9a4c6481518d86300b30f430a46e7c2350 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()">☰ SPICE</button>
+ <p id="hostname">Host Console</p>
+ </div>
+
+ <div id="Sidenav" class="SidenavClosed" style="width: 0;">
+ <p class="closebtn" onclick="close_nav()">✖</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