Split into client and conn-list UIs, split CSS, stub for login handling and auth.
authorMichael Jumper <zhangmaike@users.sourceforge.net>
Thu, 11 Aug 2011 00:59:14 +0000 (17:59 -0700)
committerMichael Jumper <zhangmaike@users.sourceforge.net>
Thu, 11 Aug 2011 00:59:14 +0000 (17:59 -0700)
src/main/webapp/client.xhtml [new file with mode: 0644]
src/main/webapp/index.xhtml
src/main/webapp/styles/client.css [new file with mode: 0644]
src/main/webapp/styles/guacamole.css [deleted file]
src/main/webapp/styles/login.css [new file with mode: 0644]

diff --git a/src/main/webapp/client.xhtml b/src/main/webapp/client.xhtml
new file mode 100644 (file)
index 0000000..97bdb64
--- /dev/null
@@ -0,0 +1,332 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+
+<!--
+    Guacamole - Clientless Remote Desktop
+    Copyright (C) 2010  Michael Jumper
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+    <head>
+        <link rel="icon" type="image/png" href="images/guacamole-logo-64.png"/>
+        <link rel="stylesheet" type="text/css" href="styles/client.css"/>
+        <link rel="stylesheet" type="text/css" href="styles/keyboard.css"/>
+        <title>Guacamole ${project.version}</title>
+    </head>
+
+    <body>
+
+        <!-- Menu -->
+        <div id="menu">
+
+            <!-- Clipboard -->
+            <button id="showClipboard">Show Clipboard</button>
+            <div id="clipboardDiv">
+                <h2>Clipboard</h2>
+                <p>
+                Text copied/cut within Guacamole will appear here. Changes to the text will affect the remote clipboard, and will be pastable within the remote desktop. Use the textbox below as an interface between the client and server clipboards.
+                </p>
+                <textarea rows="10" cols="40" id="clipboard"></textarea>
+            </div>
+
+            <button id="showKeyboard">Show Keyboard</button>
+            <button id="ctrlAltDelete">Ctrl-Alt-Delete</button>
+
+            <!-- Logo and status -->
+            <img id="status-logo" class="logo" src="images/guacamole-logo-24.png" alt="Guacamole" title="Guacamole ${project.version}"/>
+            <span id="state"></span>
+
+            <a href="agpl-3.0-standalone.html"><img id="license" src="images/agpl-logo.png" alt="AGPLv3"/></a>
+        </div>
+
+
+        <!-- Display -->
+        <div id="display" class="guac-display guac-loading">
+            <!-- On-screen keyboard -->
+            <div id="keyboardContainer"></div>
+        </div>
+
+
+        <!-- Error Dialog-->
+        <div id="errorDialog" class="errorDialogOuter">
+            <div class="errorDialogMiddle">
+                <div class="errorDialog">
+                    <p id="errorText"></p>
+                    <div class="buttons"><button id="reconnect">Reconnect</button></div>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- Scripts -->
+        <script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
+        <script type="text/javascript" src="guacamole-common-js/mouse.js"></script>
+        <script type="text/javascript" src="guacamole-common-js/layer.js"></script>
+        <script type="text/javascript" src="guacamole-common-js/tunnel.js"></script>
+        <script type="text/javascript" src="guacamole-common-js/guacamole.js"></script>
+        <script type="text/javascript" src="guacamole-common-js/oskeyboard.js"></script>
+
+        <!-- Init -->
+        <script type="text/javascript"> /* <![CDATA[ */
+
+            var display = document.getElementById("display");
+
+            // Instantiate client
+            var guac = new Guacamole.Client(
+                display,
+                new Guacamole.HTTPTunnel("tunnel")
+            );
+
+            try {
+
+                // Connect client
+                guac.connect(data);
+
+            }
+            catch (e) {
+                // TODO: Handle exception ...
+            }
+
+            var menu = document.getElementById("menu");
+            var logo = document.getElementById("status-logo");
+
+            var errorDialog = document.getElementById("errorDialog");
+            var errorDialogText = document.getElementById("errorText");
+
+            // Position display correctly
+            window.onresize = function() {
+                display.style.top = menu.offsetHeight + "px";
+            };
+
+            window.onresize();
+
+            var state = document.getElementById("state");
+            guac.onstatechange = function(clientState) {
+
+                    switch (clientState) {
+                        case 0:
+                            state.textContent = "Idle."
+                            break;
+                        case 1:
+                            state.textContent = "Connecting...";
+                            break;
+                        case 2:
+                            state.textContent = "Connected, waiting for first update...";
+                            break;
+                        case 3:
+                            display.className = display.className.replace(/guac-loading/, '');
+                            menu.className = "connected";
+                            state.textContent = "Connected.";
+                            break;
+                        case 4:
+                            state.textContent = "Disconnecting...";
+                            break;
+                        case 5:
+                            state.textContent = "Disconnected.";
+                            break;
+                        default:
+                            state.textContent = "Unknown";
+                    }
+            };
+
+            // Cache error image (might not be available when error occurs)
+            var guacErrorImage = new Image();
+            guacErrorImage.src = "images/noguacamole-logo-24.png";
+
+            guac.onname = function(name) {
+                document.title = name;
+            };
+
+            guac.onerror = function(error) {
+
+                guac.disconnect();
+
+                menu.className = "error";
+                display.className += " guac-error";
+
+                logo.src = guacErrorImage.src;
+                errorDialogText.textContent = error;
+                errorDialog.style.visibility = "visible";
+
+                // Show error by desaturating display
+                var layers = guac.getLayers();
+                for (var i=0; i<layers.length; i++) {
+                    layers[i].filter(desaturateFilter);
+                }
+
+                // Filter for desaturation
+                function desaturateFilter(data, width, height) {
+
+                    for (var i=0; i<data.length; i+=4) {
+
+                        // Get RGB values
+                        var r = data[i];
+                        var g = data[i+1];
+                        var b = data[i+2];
+
+                        // Desaturate
+                        var v = Math.max(r, g, b) / 2;
+                        data[i]   = v;
+                        data[i+1] = v;
+                        data[i+2] = v;
+
+                    }
+
+                }
+
+            };
+
+            // Mouse
+            var mouse = new Guacamole.Mouse(display);
+            mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
+                function(mouseState) {
+                    guac.sendMouseState(mouseState);
+                };
+
+            // Keyboard
+            var keyboard = new Guacamole.Keyboard(document);
+
+            function disableKeyboard() {
+                keyboard.onkeydown = null;
+                keyboard.onkeyup = null;
+            }
+
+            function enableKeyboard() {
+                keyboard.onkeydown = 
+                    function (keysym) {
+                        guac.sendKeyEvent(1, keysym);
+                    };
+
+                keyboard.onkeyup = 
+                    function (keysym) {
+                        guac.sendKeyEvent(0, keysym);
+                    };
+            }
+
+            // Enable keyboard by default
+            enableKeyboard();
+
+            // Reconnect button
+            var reconnect = document.getElementById("reconnect");
+            reconnect.onclick = function() {
+                window.location.reload();
+            };
+
+            // Disconnect on close
+            window.onunload = function() {
+                guac.disconnect();
+            }
+
+            // Handle clipboard events
+            var clipboardElement = document.getElementById("clipboard");
+            clipboardElement.onchange = function() {
+
+                var text = clipboardElement.value;
+                guac.setClipboard(text);
+
+            };
+
+            // Ignore keypresses when clipboard is focused
+            clipboardElement.onfocus = function() {
+                disableKeyboard();
+            };
+
+            // Capture keypresses when clipboard is not focused
+            clipboardElement.onblur = function() {
+                enableKeyboard();
+            };
+
+            // Server copy handler
+            guac.onclipboard = function(data) {
+                clipboardElement.value = data;
+            };
+
+
+            // Show/Hide clipboard
+            var clipboardDiv = document.getElementById("clipboardDiv");
+            var showClipboard = document.getElementById("showClipboard");
+            showClipboard.onclick = function() {
+
+                var displayed = clipboardDiv.style.display;
+                if (displayed != "block") {
+                    clipboardDiv.style.display = "block";
+                    showClipboard.innerHTML = "Hide Clipboard";
+                }
+                else {
+                    clipboardDiv.style.display = "none";
+                    showClipboard.innerHTML = "Show Clipboard";
+                    clipboardElement.onchange();
+                }
+
+            };
+
+
+            // Show/Hide keyboard
+            var keyboardContainer = document.getElementById("keyboardContainer");
+            var showKeyboard = document.getElementById("showKeyboard");
+            showKeyboard.onclick = function() {
+
+                var displayed = keyboardContainer.style.display;
+                if (displayed != "block") {
+                    keyboardContainer.style.display = "block";
+                    showKeyboard.textContent = "Hide Keyboard";
+                }
+                else {
+                    keyboardContainer.style.display = "none";
+                    showKeyboard.textContent = "Show Keyboard";
+                }
+
+            };
+
+            // On-screen keyboard
+            var osKeyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty.xml");
+            keyboardContainer.appendChild(osKeyboard);
+
+            osKeyboard.setKeyPressedHandler(
+                    function(keysym) {
+                        guac.sendKeyEvent(1, keysym);
+                    }
+            );
+
+            osKeyboard.setKeyReleasedHandler(
+                    function(keysym) {
+                        guac.sendKeyEvent(0, keysym);
+                    }
+            );
+
+            // Send Ctrl-Alt-Delete
+            var ctrlAltDelete = document.getElementById("ctrlAltDelete");
+
+            ctrlAltDelete.onclick = function() {
+
+                var KEYSYM_CTRL   = 0xFF03;
+                var KEYSYM_ALT    = 0xFFE9;
+                var KEYSYM_DELETE = 0xFFFF;
+
+                guac.sendKeyEvent(1, KEYSYM_CTRL);
+                guac.sendKeyEvent(1, KEYSYM_ALT);
+                guac.sendKeyEvent(1, KEYSYM_DELETE);
+                guac.sendKeyEvent(0, KEYSYM_DELETE);
+                guac.sendKeyEvent(0, KEYSYM_ALT);
+                guac.sendKeyEvent(0, KEYSYM_CTRL);
+            }
+
+            /* ]]> */ </script>
+
+    </body>
+
+</html>
index eaebf3a..dabd762 100644 (file)
@@ -23,9 +23,8 @@
 
     <head>
         <link rel="icon" type="image/png" href="images/guacamole-logo-64.png"/>
-        <link rel="stylesheet" type="text/css" href="styles/guacamole.css"/>
-        <link rel="stylesheet" type="text/css" href="styles/keyboard.css"/>
-        <title>Guacamole</title>
+        <link rel="stylesheet" type="text/css" href="styles/login.css"/>
+        <title>Guacamole ${project.version}</title>
     </head>
 
     <body>
         </div>
 
         <!-- Main UI - hidden until login succeeds -->
-        <div id="main-guacamole-ui" style="display: none">
-
-            <!-- Menu -->
-            <div id="menu">
-
-                <!-- Clipboard -->
-                <button id="showClipboard">Show Clipboard</button>
-                <div id="clipboardDiv">
-                    <h2>Clipboard</h2>
-                    <p>
-                    Text copied/cut within Guacamole will appear here. Changes to the text will affect the remote clipboard, and will be pastable within the remote desktop. Use the textbox below as an interface between the client and server clipboards.
-                    </p>
-                    <textarea rows="10" cols="40" id="clipboard"></textarea>
-                </div>
-
-                <button id="showKeyboard">Show Keyboard</button>
-                <button id="ctrlAltDelete">Ctrl-Alt-Delete</button>
-
-                <!-- Logo and status -->
-                <img id="status-logo" class="logo" src="images/guacamole-logo-24.png" alt="Guacamole" title="Guacamole ${project.version}"/>
-                <span id="state"></span>
-
-                <a href="agpl-3.0-standalone.html"><img id="license" src="images/agpl-logo.png" alt="AGPLv3"/></a>
-            </div>
-
-
-            <!-- Display -->
-            <div id="display" class="guac-display guac-loading">
-                <!-- On-screen keyboard -->
-                <div id="keyboardContainer"></div>
-            </div>
-
-
-            <!-- Error Dialog-->
-            <div id="errorDialog" class="errorDialogOuter">
-                <div class="errorDialogMiddle">
-                    <div class="errorDialog">
-                        <p id="errorText"></p>
-                        <div class="buttons"><button id="reconnect">Reconnect</button></div>
-                    </div>
-                </div>
-            </div>
+        <div id="connection-list-ui" style="display: none">
+            <!-- STUB -->
         </div>
 
 
-        <!-- Scripts -->
-        <script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
-        <script type="text/javascript" src="guacamole-common-js/mouse.js"></script>
-        <script type="text/javascript" src="guacamole-common-js/layer.js"></script>
-        <script type="text/javascript" src="guacamole-common-js/tunnel.js"></script>
-        <script type="text/javascript" src="guacamole-common-js/guacamole.js"></script>
-        <script type="text/javascript" src="guacamole-common-js/oskeyboard.js"></script>
-
         <!-- Init -->
         <script type="text/javascript"> /* <![CDATA[ */
 
             var loginUI = document.getElementById("login-ui");
             var display = document.getElementById("display");
 
+            // TODO: Get connection list
+            // On no-auth fail, show login UI 
+
             loginForm.onsubmit = function() {
 
                 var username = document.getElementById("username");
                        "username=" + encodeURIComponent(username.value)
                     + "&password=" + encodeURIComponent(password.value)
 
-                // Instantiate client
-                var guac = new Guacamole.Client(
-                    display,
-                    new Guacamole.HTTPTunnel("tunnel")
-                );
-
                 try {
-
-                    // Connect client
-                    guac.connect(data);
-
+                    // STUB
                 }
                 catch (e) {
 
 
                 }
 
-                // On success, display UI
-                startGuacamole(guac);
+                // On success, hide loginUI, get and show connection list.
                 return false;
 
             }
 
-            // Shows guacamole interface and initiates connection to guacamole
-            function startGuacamole(guac) {
-
-                loginUI.style.display = "none";
-                document.getElementById("main-guacamole-ui").style.display = "block";
-
-                var menu = document.getElementById("menu");
-                var logo = document.getElementById("status-logo");
-
-                var errorDialog = document.getElementById("errorDialog");
-                var errorDialogText = document.getElementById("errorText");
-
-                // Position display correctly
-                window.onresize = function() {
-                    display.style.top = menu.offsetHeight + "px";
-                };
-
-                window.onresize();
-
-                var state = document.getElementById("state");
-                guac.onstatechange = function(clientState) {
-
-                        switch (clientState) {
-                            case 0:
-                                state.textContent = "Idle."
-                                break;
-                            case 1:
-                                state.textContent = "Connecting...";
-                                break;
-                            case 2:
-                                state.textContent = "Connected, waiting for first update...";
-                                break;
-                            case 3:
-                                display.className = display.className.replace(/guac-loading/, '');
-                                menu.className = "connected";
-                                state.textContent = "Connected.";
-                                break;
-                            case 4:
-                                state.textContent = "Disconnecting...";
-                                break;
-                            case 5:
-                                state.textContent = "Disconnected.";
-                                break;
-                            default:
-                                state.textContent = "Unknown";
-                        }
-                };
-
-                // Cache error image (might not be available when error occurs)
-                var guacErrorImage = new Image();
-                guacErrorImage.src = "images/noguacamole-logo-24.png";
-
-                guac.onname = function(name) {
-                    document.title = name;
-                };
-
-                guac.onerror = function(error) {
-
-                    guac.disconnect();
-
-                    menu.className = "error";
-                    display.className += " guac-error";
-
-                    logo.src = guacErrorImage.src;
-                    errorDialogText.textContent = error;
-                    errorDialog.style.visibility = "visible";
-
-                    // Show error by desaturating display
-                    var layers = guac.getLayers();
-                    for (var i=0; i<layers.length; i++) {
-                        layers[i].filter(desaturateFilter);
-                    }
-
-                    // Filter for desaturation
-                    function desaturateFilter(data, width, height) {
-
-                        for (var i=0; i<data.length; i+=4) {
-
-                            // Get RGB values
-                            var r = data[i];
-                            var g = data[i+1];
-                            var b = data[i+2];
-
-                            // Desaturate
-                            var v = Math.max(r, g, b) / 2;
-                            data[i]   = v;
-                            data[i+1] = v;
-                            data[i+2] = v;
-
-                        }
-
-                    }
-
-                };
-
-                // Mouse
-                var mouse = new Guacamole.Mouse(display);
-                mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
-                    function(mouseState) {
-                        guac.sendMouseState(mouseState);
-                    };
-
-                // Keyboard
-                var keyboard = new Guacamole.Keyboard(document);
-
-                function disableKeyboard() {
-                    keyboard.onkeydown = null;
-                    keyboard.onkeyup = null;
-                }
-
-                function enableKeyboard() {
-                    keyboard.onkeydown = 
-                        function (keysym) {
-                            guac.sendKeyEvent(1, keysym);
-                        };
-
-                    keyboard.onkeyup = 
-                        function (keysym) {
-                            guac.sendKeyEvent(0, keysym);
-                        };
-                }
-
-                // Enable keyboard by default
-                enableKeyboard();
-
-                // Reconnect button
-                var reconnect = document.getElementById("reconnect");
-                reconnect.onclick = function() {
-                    window.location.reload();
-                };
-
-                // Disconnect on close
-                window.onunload = function() {
-                    guac.disconnect();
-                }
-
-                // Handle clipboard events
-                var clipboardElement = document.getElementById("clipboard");
-                clipboardElement.onchange = function() {
-
-                    var text = clipboardElement.value;
-                    guac.setClipboard(text);
-
-                };
-
-                // Ignore keypresses when clipboard is focused
-                clipboardElement.onfocus = function() {
-                    disableKeyboard();
-                };
-
-                // Capture keypresses when clipboard is not focused
-                clipboardElement.onblur = function() {
-                    enableKeyboard();
-                };
-
-                // Server copy handler
-                guac.onclipboard = function(data) {
-                    clipboardElement.value = data;
-                };
-
-
-                // Show/Hide clipboard
-                var clipboardDiv = document.getElementById("clipboardDiv");
-                var showClipboard = document.getElementById("showClipboard");
-                showClipboard.onclick = function() {
-
-                    var displayed = clipboardDiv.style.display;
-                    if (displayed != "block") {
-                        clipboardDiv.style.display = "block";
-                        showClipboard.innerHTML = "Hide Clipboard";
-                    }
-                    else {
-                        clipboardDiv.style.display = "none";
-                        showClipboard.innerHTML = "Show Clipboard";
-                        clipboardElement.onchange();
-                    }
-
-                };
-
-
-                // Show/Hide keyboard
-                var keyboardContainer = document.getElementById("keyboardContainer");
-                var showKeyboard = document.getElementById("showKeyboard");
-                showKeyboard.onclick = function() {
-
-                    var displayed = keyboardContainer.style.display;
-                    if (displayed != "block") {
-                        keyboardContainer.style.display = "block";
-                        showKeyboard.textContent = "Hide Keyboard";
-                    }
-                    else {
-                        keyboardContainer.style.display = "none";
-                        showKeyboard.textContent = "Show Keyboard";
-                    }
-
-                };
-
-                // On-screen keyboard
-                var osKeyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty.xml");
-                keyboardContainer.appendChild(osKeyboard);
-
-                osKeyboard.setKeyPressedHandler(
-                        function(keysym) {
-                            guac.sendKeyEvent(1, keysym);
-                        }
-                );
-
-                osKeyboard.setKeyReleasedHandler(
-                        function(keysym) {
-                            guac.sendKeyEvent(0, keysym);
-                        }
-                );
-
-                // Send Ctrl-Alt-Delete
-                var ctrlAltDelete = document.getElementById("ctrlAltDelete");
-
-                ctrlAltDelete.onclick = function() {
-
-                    var KEYSYM_CTRL   = 0xFF03;
-                    var KEYSYM_ALT    = 0xFFE9;
-                    var KEYSYM_DELETE = 0xFFFF;
-
-                    guac.sendKeyEvent(1, KEYSYM_CTRL);
-                    guac.sendKeyEvent(1, KEYSYM_ALT);
-                    guac.sendKeyEvent(1, KEYSYM_DELETE);
-                    guac.sendKeyEvent(0, KEYSYM_DELETE);
-                    guac.sendKeyEvent(0, KEYSYM_ALT);
-                    guac.sendKeyEvent(0, KEYSYM_CTRL);
-                }
-
-            }
-
             /* ]]> */ </script>
 
     </body>
diff --git a/src/main/webapp/styles/client.css b/src/main/webapp/styles/client.css
new file mode 100644 (file)
index 0000000..28a6290
--- /dev/null
@@ -0,0 +1,175 @@
+
+/*
+ *  Guacamole - Clientless Remote Desktop
+ *  Copyright (C) 2010  Michael Jumper
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+body {
+    background: black;
+    font-family: sans-serif;
+    padding: 0;
+    margin: 0;
+}
+
+div.errorDialogOuter {
+    display: table;
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+
+    visibility: hidden;
+}
+
+div.errorDialogMiddle {
+    width: 100%;
+    text-align: center;
+    display: table-cell;
+    vertical-align: middle;
+}
+
+div.errorDialog {
+
+    opacity: 0.75;
+    background: #D22;
+    border: 1px solid #F44;
+    padding: 1em;
+
+    max-width: 75%;
+    text-align: left;
+
+    display: inline-block;
+}
+
+div.errorDialog h1 {
+    margin: 0;
+    margin-bottom: 0.25em;
+    text-align: center;
+}
+
+div.errorDialog div.buttons {
+    margin: 0;
+    margin-top: 0.5em;
+    text-align: center;
+}
+
+div.errorDialog p {
+    margin: 0;
+}
+
+
+#menu {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1em;
+    font-size: 0.8em;
+    background: #FEA;
+    border: 1px solid black;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+#menu.connected {
+    opacity: 0.5;
+}
+
+#menu.connected:hover {
+    opacity: 1;
+}
+
+#menu.error {
+    background: #D44;
+}
+
+.error #state {
+    font-weight: bold;
+}
+
+img {
+    border: none;
+}
+
+img#license {
+    float: right;
+    margin: 2px;
+}
+
+div#display {
+    position: relative;
+    width: 640px;
+    height: 480px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#menu img {
+    vertical-align: middle;
+}
+
+#menu button {
+    vertical-align: middle;
+}
+
+#menu span {
+    vertical-align: middle;
+}
+
+div#clipboardDiv {
+    display: none;
+    position: absolute;
+    background: #FA5;
+    padding: 1em;
+
+    border: 1px solid black;
+    -khtml-border-radius: 0.5em;
+    -webkit-border-radius: 0.5em;
+    -moz-border-radius: 0.5em;
+    border-radius: 0.5em;
+
+    width: 50em;
+}
+
+div#clipboardDiv h2 {
+    margin: 0;
+    font-size: 1em;
+}
+
+div#clipboardDiv textarea {
+    width: 100%;
+}
+
+.guac-display.guac-loading {
+    border: 1px dotted gray;
+    background-image: url('../images/spinner.gif');
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.guac-display.guac-error {
+    border: 1px dotted red;
+    background-image: url('../images/noimage.png');
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.guac-hide-cursor {
+    cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default;
+}
+
diff --git a/src/main/webapp/styles/guacamole.css b/src/main/webapp/styles/guacamole.css
deleted file mode 100644 (file)
index fd61496..0000000
+++ /dev/null
@@ -1,279 +0,0 @@
-
-/*
- *  Guacamole - Clientless Remote Desktop
- *  Copyright (C) 2010  Michael Jumper
- *
- *  This program is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU Affero General Public License as published by
- *  the Free Software Foundation, either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU Affero General Public License for more details.
- *
- *  You should have received a copy of the GNU Affero General Public License
- *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-body {
-    background: black;
-    font-family: sans-serif;
-    padding: 0;
-    margin: 0;
-}
-
-div#login-ui {
-    background: #BCA;
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    left: 0;
-    top: 0;
-    display: table;
-}
-
-p#login-error {
-    text-align: center;
-    background: #FDD;
-    color: red;
-    margin: 0.2em;
-}
-
-div#login-logo {
-    position: relative;
-    bottom: 0;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-div#login-dialog-middle {
-    width: 100%;
-    display: table-cell;
-    vertical-align: middle;
-    text-align: center;
-}
-
-div#login-dialog {
-
-    max-width: 75%;
-    text-align: left;
-
-    display: inline-block;
-}
-
-div#login-dialog h1 {
-    margin-top: 0;
-    margin-bottom: 0em;
-    text-align: center;
-}
-
-div#login-dialog #buttons {
-    padding-top: 0.5em;
-    text-align: right;
-}
-
-div#login-dialog #buttons input {
-    background: #9A8;
-    border: 1px solid #676;
-    color: black; 
-    padding: 0.25em;
-    padding-right: 1em;
-    padding-left: 1em;
-}
-
-div#login-dialog #buttons input:hover {
-    background: #CDB;
-    border: 1px solid #9A8;
-}
-
-div#login-dialog #buttons input:active {
-    padding-top: 0.35em;
-    padding-left: 1.1em;
-
-    padding-bottom: 0.15em;
-    padding-right: 0.9em;
-}
-
-div#login-dialog #login-fields {
-    
-    background: #CDB;
-    vertical-align: middle;
-
-    padding: 1em;
-    border: 1px solid #676;
-
-}
-
-div#login-dialog #login-fields input {
-    border: 1px solid #676;
-}
-
-div#login-dialog #login-fields img.logo {
-    float: left;
-}
-
-div#login-ui #version-dialog {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    text-align: right;
-
-    font-style: italic;
-    font-size: 0.75em;
-    color: black;
-    opacity: 0.5;
-
-    padding: 0.25em;
-}
-
-div.errorDialogOuter {
-    display: table;
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    left: 0;
-    top: 0;
-
-    visibility: hidden;
-}
-
-div.errorDialogMiddle {
-    width: 100%;
-    text-align: center;
-    display: table-cell;
-    vertical-align: middle;
-}
-
-div.errorDialog {
-
-    opacity: 0.75;
-    background: #D22;
-    border: 1px solid #F44;
-    padding: 1em;
-
-    max-width: 75%;
-    text-align: left;
-
-    display: inline-block;
-}
-
-div.errorDialog h1 {
-    margin: 0;
-    margin-bottom: 0.25em;
-    text-align: center;
-}
-
-div.errorDialog div.buttons {
-    margin: 0;
-    margin-top: 0.5em;
-    text-align: center;
-}
-
-div.errorDialog p {
-    margin: 0;
-}
-
-
-#menu {
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 1em;
-    font-size: 0.8em;
-    background: #FEA;
-    border: 1px solid black;
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    z-index: 1;
-}
-
-#menu.connected {
-    opacity: 0.5;
-}
-
-#menu.connected:hover {
-    opacity: 1;
-}
-
-#menu.error {
-    background: #D44;
-}
-
-.error #state {
-    font-weight: bold;
-}
-
-img {
-    border: none;
-}
-
-img#license {
-    float: right;
-    margin: 2px;
-}
-
-div#display {
-    position: relative;
-    width: 640px;
-    height: 480px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-#menu img {
-    vertical-align: middle;
-}
-
-#menu button {
-    vertical-align: middle;
-}
-
-#menu span {
-    vertical-align: middle;
-}
-
-div#clipboardDiv {
-    display: none;
-    position: absolute;
-    background: #FA5;
-    padding: 1em;
-
-    border: 1px solid black;
-    -khtml-border-radius: 0.5em;
-    -webkit-border-radius: 0.5em;
-    -moz-border-radius: 0.5em;
-    border-radius: 0.5em;
-
-    width: 50em;
-}
-
-div#clipboardDiv h2 {
-    margin: 0;
-    font-size: 1em;
-}
-
-div#clipboardDiv textarea {
-    width: 100%;
-}
-
-.guac-display.guac-loading {
-    border: 1px dotted gray;
-    background-image: url('../images/spinner.gif');
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.guac-display.guac-error {
-    border: 1px dotted red;
-    background-image: url('../images/noimage.png');
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.guac-hide-cursor {
-    cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default;
-}
-
diff --git a/src/main/webapp/styles/login.css b/src/main/webapp/styles/login.css
new file mode 100644 (file)
index 0000000..87798ae
--- /dev/null
@@ -0,0 +1,138 @@
+
+/*
+ *  Guacamole - Clientless Remote Desktop
+ *  Copyright (C) 2010  Michael Jumper
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+body {
+    background: black;
+    font-family: sans-serif;
+    padding: 0;
+    margin: 0;
+}
+
+div#login-ui {
+    background: #BCA;
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: table;
+}
+
+p#login-error {
+    text-align: center;
+    background: #FDD;
+    color: red;
+    margin: 0.2em;
+}
+
+div#login-logo {
+    position: relative;
+    bottom: 0;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+div#login-dialog-middle {
+    width: 100%;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+}
+
+div#login-dialog {
+
+    max-width: 75%;
+    text-align: left;
+
+    display: inline-block;
+}
+
+div#login-dialog h1 {
+    margin-top: 0;
+    margin-bottom: 0em;
+    text-align: center;
+}
+
+div#login-dialog #buttons {
+    padding-top: 0.5em;
+    text-align: right;
+}
+
+div#login-dialog #buttons input {
+    background: #9A8;
+    border: 1px solid #676;
+    color: black; 
+    padding: 0.25em;
+    padding-right: 1em;
+    padding-left: 1em;
+}
+
+div#login-dialog #buttons input:hover {
+    background: #CDB;
+    border: 1px solid #9A8;
+}
+
+div#login-dialog #buttons input:active {
+    padding-top: 0.35em;
+    padding-left: 1.1em;
+
+    padding-bottom: 0.15em;
+    padding-right: 0.9em;
+}
+
+div#login-dialog #login-fields {
+    
+    background: #CDB;
+    vertical-align: middle;
+
+    padding: 1em;
+    border: 1px solid #676;
+
+}
+
+div#login-dialog #login-fields input {
+    border: 1px solid #676;
+}
+
+div#login-dialog #login-fields img.logo {
+    float: left;
+}
+
+div#login-ui #version-dialog {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    text-align: right;
+
+    font-style: italic;
+    font-size: 0.75em;
+    color: black;
+    opacity: 0.5;
+
+    padding: 0.25em;
+}
+
+img {
+    border: none;
+}
+
+img#license {
+    float: right;
+    margin: 2px;
+}