Modifed UI. Move HTML from ui.js to vnc.html.

include/black.css

@@ -1,124 +1,9 @@
-body {
-  margin: 0px;
-  font-size: 13px;
-  color: #111;
-  font-family: "Helvetica";
+.noVNC-control-bar {
+	  background-position:50% 100%;
 }
 
-#VNC_controls {
-  background: #111;
-  line-height: 1em;
-  color: #FFF;
-  overflow: hidden;
-  padding: 4px 24px;
-}
-
-#VNC_controls ul {
-  list-style:none;
-  list-style-position: outside;
-  margin: 0px;
-  padding: 0px;
-}
-#VNC_controls li {
-  margin-right: 15px;
-  padding: 2px 0px;
-  float: left;
-}
-#VNC_controls li input[type=text],
-#VNC_controls li input[type=password] {
-  border: 2px solid #333;
-}
-
-#VNC_host {
-    width: 100px;
-}
-#VNC_port {
-    width: 50px;
-}
-#VNC_password {
-    width: 80px;
-}
-#VNC_encrypt {
-}
-#VNC_connect_button {
-    width: 100px;
-}
-
-#VNC_status_bar td {
-    padding: 0px;
-    margin: 0px;
-}
-#VNC_status_bar div {
-    font-size: 12px;
-    font-weight: bold;
-    text-align: center;
-    margin: 0px;
-    padding: 1em;
-}
-.VNC_status_button {
-    font-size: 10px;
-    margin: 0px;
-    padding: 0px;
-}
-#VNC_status {
-    text-align: center;
-}
-#VNC_settings_menu {
-    display: none;
-    position: absolute;
-    width: 13em;
-    border: 1px solid #888;
-    color: #111;
-    font-weight: normal;
-    background-color: #f0f2f6;
-    padding: 5px; margin: 3px;
-    z-index: 100; opacity: 1;
-    text-align: left; white-space: normal;
-}
-#VNC_settings_menu ul {
-    list-style: none;
-    margin: 0px;
-    padding: 0px;
-}
-
-.VNC_buttons_right {
-    text-align: right;
-}
-.VNC_buttons_left {
-    text-align: left;
-}
-.VNC_status_normal {
-  background: #111;
-  color: #fff;
-}
-.VNC_status_error {
-  background: #111;
-  color: #f44;
-}
-.VNC_status_warn {
-  background: #111;
-  color: #ff4;
-}
-
-#VNC_screen {
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
-  background: #111;
-  padding: 20px;
-  margin: 0 auto;
-  color: #FFF;
-  margin-top: 20px;
-  text-align: center;
-
-  /* This causes the width of the outer div(#screen) honor the size of the inner (#vnc) div */
-  display: table; 
-  table-layout: auto;
-}
-#VNC_canvas {
-  background: #111;
-  margin: 0 auto;
-}
-#VNC_clipboard {
-  display: none;
-}
+.triangle-right {
+		border:2px solid #fff;
+		background:#000;
+		color:#fff;
+}

include/input.js

@@ -1852,7 +1852,7 @@ unicodeTable = {
     0x28e0 : 0x10028e0,
     0x28e1 : 0x10028e1,
     0x28e2 : 0x10028e2,
-    0x28e3 : 0x10028e3,
+    0x28e3 : 0x10028e3, 
     0x28e4 : 0x10028e4,
     0x28e5 : 0x10028e5,
     0x28e6 : 0x10028e6,
@@ -1881,4 +1881,4 @@ unicodeTable = {
     0x28fd : 0x10028fd,
     0x28fe : 0x10028fe,
     0x28ff : 0x10028ff
-};
+};

include/rfb.js

@@ -842,9 +842,9 @@ normal_msg = function() {
             //Util.Debug("red after: " + red);
             green = parseInt(ws.rQshift16() / 256, 10);
             blue = parseInt(ws.rQshift16() / 256, 10);
-            Util.Debug("*** colourMap: " + display.get_colourMap());
             display.set_colourMap([red, green, blue], first_colour + c);
         }
+        Util.Debug("*** colourMap: " + display.get_colourMap());
         Util.Info("Registered " + num_colours + " colourMap entries");
         //Util.Debug("colourMap: " + display.get_colourMap());
         break;

include/ui.js

@@ -13,132 +13,26 @@
 var UI = {
 
 settingsOpen : false,
+ConnSettingsOpen : true,
+clipboardOpen: false,
 
 // Render default UI and initialize settings menu
-load: function(target) {
+load: function() {
     var html = '', i, sheet, sheets, llevels;
 
-    /* Populate the 'target' DOM element with default UI */
-    if (!target) {
-        target = $D('vnc');
-    } else if (typeof target === 'string') {
-        target = $D(target);
-    }
-
-    if ((!document.createElement('canvas').getContext) &&
-        window.ActiveXObject) {
-        // Suggest Chrome frame for Internet Explorer users
-        html += '<center><div style="text-align: left; width: 400px">';
-        html += '  You are using a version of Internet Explorer ';
-        html += '  that does not have HTML5 Canvas support. ';
-        html += '  To use noVNC you must use a browser with HTML5 ';
-        html += '  Canvas support or install ';
-        html += '  <a href="http://google.com/chromeframe" target="cframe">';
-        html += '  Google Chrome Frame.</a>';
-        html += '</div></center>';
-        target.innerHTML = html;
-        return;
-    }
-
-    html += '<div id="VNC_controls">';
-    html += '  <ul>';
-    html += '    <li>Host: <input id="VNC_host"></li>';
-    html += '    <li>Port: <input id="VNC_port"></li>';
-    html += '    <li>Password: <input id="VNC_password"';
-    html += '        type="password"></li>';
-    html += '    <li><input id="VNC_connect_button" type="button"';
-    html += '        value="Loading" disabled></li>';
-    html += '  </ul>';
-    html += '</div>';
-    html += '<div id="VNC_screen">';
-    html += '  <div id="VNC_status_bar" class="VNC_status_bar" style="margin-top: 0px;">';
-    html += '    <table border=0 width=100%><tr>';
-    html += '      <td><div id="VNC_status">Loading</div></td>';
-
-    // Mouse button selectors for touch devices
-    html += '      <td width=1%><div class="VNC_buttons_right">';
-    html += '        <nobr><span id="VNC_mouse_buttons" style="display: none;">';
-    html += '          <input type="button" class="VNC_status_button"';
-    html += '            id="VNC_mouse_button1" value="L" onclick="UI.setMouseButton(1);"';
-    html += '            ><input type="button" class="VNC_status_button"';
-    html += '            id="VNC_mouse_button2" value="M" onclick="UI.setMouseButton(2);"';
-    html += '            ><input type="button" class="VNC_status_button"';
-    html += '            id="VNC_mouse_button4" value="R" onclick="UI.setMouseButton(4);">';
-	html += '        <input type="button" id="showKeyboard" onclick="showkeyboard()" value="Keyboard" />';
-    html += '        </span></nobr></div></td>';
-
-    // Settings drop-down menu
-    html += '      <td width=1%><div class="VNC_buttons_right">';
-    html += '        <input type=button class="VNC_status_button" value="Settings"';
-    html += '          id="menuButton"';
-    html += '          onclick="UI.clickSettingsMenu();">';
-    html += '        <span id="VNC_settings_menu"';
-    html += '          onmouseover="UI.displayBlur();"';
-    html += '          onmouseout="UI.displayFocus();">';
-    html += '          <ul>';
-    html += '            <li><input id="VNC_encrypt"';
-    html += '                type="checkbox"> Encrypt</li>';
-    html += '            <li><input id="VNC_true_color"';
-    html += '                type="checkbox" checked> True Color</li>';
-    html += '            <li><input id="VNC_cursor"';
-    html += '                type="checkbox"> Local Cursor</li>';
-    html += '            <li><input id="VNC_shared"';
-    html += '                type="checkbox"> Shared Mode</li>';
-    html += '            <li><input id="VNC_connectTimeout"';
-    html += '                type="input"> Connect Timeout (s)</li>';
-    html += '            <hr>';
-
-    // Stylesheet selection dropdown
-    html += '            <li><select id="VNC_stylesheet" name="vncStyle">';
-    html += '              <option value="default">default</option>';
+    // Stylesheet selection dropdown	
     sheet = WebUtil.selectStylesheet();
     sheets = WebUtil.getStylesheets();
     for (i = 0; i < sheets.length; i += 1) {
-        html += '<option value="' + sheets[i].title + '">' + sheets[i].title + '</option>';
+		addOption($D('noVNC_stylesheet'),sheets[i].title, sheets[i].title);
     }
-    html += '              </select> Style</li>';
 
     // Logging selection dropdown
-    html += '            <li><select id="VNC_logging" name="vncLogging">';
     llevels = ['error', 'warn', 'info', 'debug'];
     for (i = 0; i < llevels.length; i += 1) {
-        html += '<option value="' + llevels[i] + '">' + llevels[i] + '</option>';
+		addOption($D('noVNC_logging'),llevels[i], llevels[i]);
     }
-    html += '              </select> Logging</li>';
-
-    html += '            <hr>';
-    html += '            <li><input type="button" id="VNC_apply" value="Apply"';
-    html += '                onclick="UI.settingsApply()"></li>';
-    html += '          </ul>';
-    html += '        </span></div></td>';
-
-    // CtrlAltDel Button
-    html += '      <td width=1%><div class="VNC_buttons_right">';
-    html += '        <input type=button class="VNC_status_button" value="CtrlAltDel"';
-    html += '          id="sendCtrlAltDelButton"';
-    html += '          onclick="UI.sendCtrlAltDel();"></div></td>';
-
-    html += '    </tr></table>';
-    html += '  </div>';
-    html += '  <canvas id="VNC_canvas" width="640px" height="20px">';
-    html += '      Canvas not supported.';
-    html += '  </canvas>';
-	html += '<input id="keyboardinput" style="border:none;" type="text" onKeyDown="onKeyDown(event);"/>';
-    html += '</div>';
-    html += '<br><br>';
-    html += '<div id="VNC_clipboard">';
-    html += '  VNC Clipboard:';
-    html += '  <input id="VNC_clipboard_clear_button"';
-    html += '      type="button" value="Clear"';
-    html += '      onclick="UI.clipClear();">';
-    html += '  <br>';
-    html += '  <textarea id="VNC_clipboard_text" cols=80 rows=5';
-    html += '    onfocus="UI.displayBlur();"';
-    html += '    onblur="UI.displayFocus();"';
-    html += '    onchange="UI.clipSend();"></textarea>';
-    html += '</div>';
-    target.innerHTML = html;
-
+	
     // Settings with immediate effects
     UI.initSetting('logging', 'warn');
     WebUtil.init_logging(UI.getSetting('logging'));
@@ -148,38 +42,46 @@ load: function(target) {
     WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
 
     /* Populate the controls if defaults are provided in the URL */
-    UI.initSetting('host', '');
+    UI.initSetting('host', ''); 
     UI.initSetting('port', '');
     UI.initSetting('password', '');
     UI.initSetting('encrypt', false);
     UI.initSetting('true_color', true);
     UI.initSetting('cursor', false);
-    UI.initSetting('shared', true);
+    UI.initSetting('shared', true); 
     UI.initSetting('connectTimeout', 2);
 
-    UI.rfb = RFB({'target': $D('VNC_canvas'),
+    UI.rfb = RFB({'target': $D('noVNC_canvas'),
                   'onUpdateState': UI.updateState,
                   'onClipboard': UI.clipReceive});
-
+ 
     // Unfocus clipboard when over the VNC area
-    $D('VNC_screen').onmousemove = function () {
-            var keyboard = UI.rfb.get_keyboard();
-            if ((! keyboard) || (! keyboard.get_focused())) {
-                $D('VNC_clipboard_text').blur();
-            }
-        };
-
+    //$D('VNC_screen').onmousemove = function () {
+    //         var keyboard = UI.rfb.get_keyboard();
+    //        if ((! keyboard) || (! keyboard.get_focused())) {
+    //            $D('VNC_clipboard_text').blur();
+    //         }
+    //    };
+		
     // Show mouse selector buttons on touch screen devices
     if ('ontouchstart' in document.documentElement) {
-        $D('VNC_mouse_buttons').style.display = "inline";
+        $D('noVNC_mobile_buttons').style.display = "inline";
         UI.setMouseButton();
+		window.scrollTo(0, 1); 
     }
 
+	//iOS Safari does not support CSS position:fixed. This detects iOS devices and enables javascript workaround.  
+	if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {	
+		alert("here");
+	setOnscroll();
+		setResize();
+	}
+
 },
 
 // Read form control compatible setting from cookie
 getSetting: function(name) {
-    var val, ctrl = $D('VNC_' + name);
+    var val, ctrl = $D('noVNC_' + name);
     val = WebUtil.readCookie(name);
     if (ctrl.type === 'checkbox') {
         if (val.toLowerCase() in {'0':1, 'no':1, 'false':1}) {
@@ -194,16 +96,23 @@ getSetting: function(name) {
 // Update cookie and form control setting. If value is not set, then
 // updates from control to current cookie setting.
 updateSetting: function(name, value) {
-    var i, ctrl = $D('VNC_' + name);
+
+    var i, ctrl = $D('noVNC_' + name);
     // Save the cookie for this session
     if (typeof value !== 'undefined') {
         WebUtil.createCookie(name, value);
     }
-
+	if(name === 'host')
+	{
+		
+		
+	}
     // Update the settings control
     value = UI.getSetting(name);
+
     if (ctrl.type === 'checkbox') {
         ctrl.checked = value;
+		
     } else if (typeof ctrl.options !== 'undefined') {
         for (i = 0; i < ctrl.options.length; i += 1) {
             if (ctrl.options[i].value === value) {
@@ -212,13 +121,18 @@ updateSetting: function(name, value) {
             }
         }
     } else {
+		/*Weird IE9 error leads to 'null' appearring in textboxes instead of ''.*/
+		if(value === null)
+		{
+			value = "";
+		}
         ctrl.value = value;
     }
 },
 
 // Save control setting to cookie
 saveSetting: function(name) {
-    var val, ctrl = $D('VNC_' + name);
+    var val, ctrl = $D('noVNC_' + name);
     if (ctrl.type === 'checkbox') {
         val = ctrl.checked;
     } else if (typeof ctrl.options !== 'undefined') {
@@ -261,7 +175,7 @@ clickSettingsMenu: function() {
             UI.updateSetting('cursor');
         } else {
             UI.updateSetting('cursor', false);
-            $D('VNC_cursor').disabled = true;
+            $D('noVNC_cursor').disabled = true;
         }
         UI.updateSetting('shared');
         UI.updateSetting('connectTimeout');
@@ -274,29 +188,37 @@ clickSettingsMenu: function() {
 
 // Open menu
 openSettingsMenu: function() {
-    $D('VNC_settings_menu').style.display = "block";
+	if(UI.clipboardOpen == true)
+	{	
+		UI.showClipboard(); 
+	} 
+	//Close connection settings if open
+	if(UI.ConnSettingsOpen == true) {
+		connectPanelbutton();
+	}
+	$D('noVNC_Settings').style.display = "block";
     UI.settingsOpen = true;
 },
 
 // Close menu (without applying settings)
 closeSettingsMenu: function() {
-    $D('VNC_settings_menu').style.display = "none";
+    $D('noVNC_Settings').style.display = "none";
     UI.settingsOpen = false;
 },
 
 // Disable/enable controls depending on connection state
 settingsDisabled: function(disabled, rfb) {
     //Util.Debug(">> settingsDisabled");
-    $D('VNC_encrypt').disabled = disabled;
-    $D('VNC_true_color').disabled = disabled;
+    $D('noVNC_encrypt').disabled = disabled;
+    $D('noVNC_true_color').disabled = disabled;
     if (rfb && rfb.get_display() && rfb.get_display().get_cursor_uri()) {
-        $D('VNC_cursor').disabled = disabled;
+        $D('noVNC_cursor').disabled = disabled;
     } else {
         UI.updateSetting('cursor', false);
-        $D('VNC_cursor').disabled = true;
+        $D('noVNC_cursor').disabled = true;
     }
-    $D('VNC_shared').disabled = disabled;
-    $D('VNC_connectTimeout').disabled = disabled;
+    $D('noVNC_shared').disabled = disabled;
+    $D('noVNC_connectTimeout').disabled = disabled;
     //Util.Debug("<< settingsDisabled");
 },
 
@@ -316,14 +238,13 @@ settingsApply: function() {
     // Settings with immediate (non-connected related) effect
     WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
     WebUtil.init_logging(UI.getSetting('logging'));
-
     //Util.Debug("<< settingsApply");
 },
 
 
 
 setPassword: function() {
-    UI.rfb.sendPassword($D('VNC_password').value);
+    UI.rfb.sendPassword($D('noVNC_password').value);
     return false;
 },
 
@@ -348,7 +269,7 @@ setMouseButton: function(num) {
     }
 
     for (b = 0; b < blist.length; b++) {
-        button = $D('VNC_mouse_button' + blist[b]);
+        button = $D('noVNC_mouse_button' + blist[b]);
         if (blist[b] === num) {
             button.style.backgroundColor = "black";
             button.style.color = "lightgray";
@@ -357,14 +278,13 @@ setMouseButton: function(num) {
             button.style.color = "";
         }
     }
-
 },
 
 updateState: function(rfb, state, oldstate, msg) {
     var s, sb, c, cad, klass;
-    s = $D('VNC_status');
-    sb = $D('VNC_status_bar');
-    c = $D('VNC_connect_button');
+    s = $D('noVNC_status');
+    sb = $D('noVNC_status_bar');
+    c = $D('noVNC_connect_button');
     cad = $D('sendCtrlAltDelButton');
     switch (state) {
         case 'failed':
@@ -372,7 +292,7 @@ updateState: function(rfb, state, oldstate, msg) {
             c.disabled = true;
             cad.disabled = true;
             UI.settingsDisabled(true, rfb);
-            klass = "VNC_status_error";
+            klass = "noVNC_status_error";
             break;
         case 'normal':
             c.value = "Disconnect";
@@ -380,9 +300,10 @@ updateState: function(rfb, state, oldstate, msg) {
             c.disabled = false;
             cad.disabled = false;
             UI.settingsDisabled(true, rfb);
-            klass = "VNC_status_normal";
+            klass = "noVNC_status_normal";
             break;
         case 'disconnected':
+				$D('noVNC_defaultScreen').style.display = "block";
         case 'loaded':
             c.value = "Connect";
             c.onclick = UI.connect;
@@ -390,7 +311,7 @@ updateState: function(rfb, state, oldstate, msg) {
             c.disabled = false;
             cad.disabled = true;
             UI.settingsDisabled(false, rfb);
-            klass = "VNC_status_normal";
+            klass = "noVNC_status_normal";
             break;
         case 'password':
             c.value = "Send Password";
@@ -399,13 +320,13 @@ updateState: function(rfb, state, oldstate, msg) {
             c.disabled = false;
             cad.disabled = true;
             UI.settingsDisabled(true, rfb);
-            klass = "VNC_status_warn";
+            klass = "noVNC_status_warn";
             break;
         default:
             c.disabled = true;
             cad.disabled = true;
             UI.settingsDisabled(true, rfb);
-            klass = "VNC_status_warn";
+            klass = "noVNC_status_warn";
             break;
     }
 
@@ -419,7 +340,7 @@ updateState: function(rfb, state, oldstate, msg) {
 
 clipReceive: function(rfb, text) {
     Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "...");
-    $D('VNC_clipboard_text').value = text;
+    $D('noVNC_clipboard_text').value = text;
     Util.Debug("<< UI.clipReceive");
 },
 
@@ -428,10 +349,10 @@ connect: function() {
     var host, port, password;
 
     UI.closeSettingsMenu();
-
-    host = $D('VNC_host').value;
-    port = $D('VNC_port').value;
-    password = $D('VNC_password').value;
+	connectPanelbutton();
+    host = $D('noVNC_host').value;
+    port = $D('noVNC_port').value;
+    password = $D('noVNC_password').value;
     if ((!host) || (!port)) {
         throw("Must set host and port");
     }
@@ -443,12 +364,16 @@ connect: function() {
     UI.rfb.set_connectTimeout(UI.getSetting('connectTimeout'));
 
     UI.rfb.connect(host, port, password);
+	//Close dialog.
+	setTimeout("setBarPosition()",100);
+	$D('noVNC_defaultScreen').style.display = "none";
 },
 
 disconnect: function() {
     UI.closeSettingsMenu();
-
     UI.rfb.disconnect();
+	$D('noVNC_defaultScreen').style.display = "block";
+	UI.openSettingsMenu();
 },
 
 displayBlur: function() {
@@ -462,41 +387,70 @@ displayFocus: function() {
 },
 
 clipClear: function() {
-    $D('VNC_clipboard_text').value = "";
+    $D('noVNC_clipboard_text').value = "";
     UI.rfb.clipboardPasteFrom("");
 },
 
 clipSend: function() {
-    var text = $D('VNC_clipboard_text').value;
+    var text = $D('noVNC_clipboard_text').value;
     Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "...");
     UI.rfb.clipboardPasteFrom(text);
     Util.Debug("<< UI.clipSend");
+},
+
+showClipboard: function() {
+	//Close settings if open
+	if(UI.settingsOpen == true) {
+		UI.closeSettingsMenu();
+	}
+	//Close connection settings if open
+	if(UI.ConnSettingsOpen == true) {
+		connectPanelbutton();
+	}
+	//Toggle Connection Panel
+	if(UI.clipboardOpen == true)
+	{	$D('noVNC_clipboard').style.display = "none";
+		UI.clipboardOpen = false;
+	} else {
+		$D('noVNC_clipboard').style.display = "block";
+		UI.clipboardOpen = true;
+	}
 }
 
 };
 
-/*
-  Functions for use of mobile devices native keyboards
-  Added by Chris Gordon
-  http://www.chrisgordon.com.au
-  Date: 23/08/2011
-*/
+function connectPanelbutton() {
+	//Close connection settings if open
+	if(UI.settingsOpen == true) {
+		UI.closeSettingsMenu();
+	}
+	if(UI.clipboardOpen == true)
+	{	
+		UI.showClipboard(); 
+	} 
+	
+	//Toggle Connection Panel
+	if(UI.ConnSettingsOpen == true)
+	{	
+		$D('noVNC_controls').style.display = "none";
+		UI.ConnSettingsOpen = false;
+	} else {
+		$D('noVNC_controls').style.display = "block";
+		UI.ConnSettingsOpen = true;
+	}
+}
 
 function showkeyboard(){
-//Get Current Scroll Position of Browser
+//Get Current Scroll Position
 var scrollx = (document.all)?document.body.scrollLeft:window.pageXOffset;   
 var scrolly = (document.all)?document.body.scrollTop:window.pageYOffset; 
 
-//Stop browser zooming on textbox when focus is set.
-zoomDisable();
-
-//Focus on hidden textbox to bring up native keyboard.
-document.getElementById('keyboardinput').focus();
 
-//Set scroll position of browser to the same position it was prior to focus.
-scroll(scrollx,scrolly);
-
-//Renable user zooming.
+//Stop browser zooming on textbox.
+zoomDisable();
+		$D('keyboardinput').focus();
+		scroll(scrollx,scrolly);
+//Renable user zoom.
 zoomEnable();
 } 
 
@@ -527,3 +481,35 @@ function changeViewportMeta(newattributes) {
               metatags[cnt].setAttribute("content", newattributes);
     }
 }
+
+//iOS < Version 5 does not support position fixed. Javascript workaround:
+function setOnscroll() {
+	window.onscroll = function() {
+		setBarPosition();
+	};
+}
+
+function setResize() {
+	window.onResize = function() {
+		setBarPosition();
+	};
+}
+
+function setBarPosition() {
+  $D('VNC_mobile_bar').style.top = (window.pageYOffset) + 'px';
+  $D('VNC_mobile_buttons').style.left = (window.pageXOffset) + 'px';
+   
+  $D('VNC_mobile_buttons_right').style.right = 0 + 'px'; 
+  
+   var vncwidth = $('#VNC_screen').width();
+   $D('VNC_mobile_bar').style.width = vncwidth + 'px';
+}
+
+//Helper to add options to dropdown.
+function addOption(selectbox,text,value )
+{
+	var optn = document.createElement("OPTION");
+	optn.text = text;
+	optn.value = value;
+	selectbox.options.add(optn);
+}

vnc.html

@@ -1,33 +1,140 @@
-<!DOCTYPE html>
-<html>
-    <!-- 
+<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
+<html>    
+<head>
+
+   <!-- 
     noVNC example: simple example using default UI
     Copyright (C) 2011 Joel Martin
     Licensed under LGPL-3 (see LICENSE.txt)
     -->
-    <head>
-        <title>noVNC</title>
-		<meta name="viewport" content="user-scalable=1" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1">
-        <link rel="stylesheet" href="include/plain.css">
-        <link rel="alternate stylesheet" href="include/black.css" TITLE="Black">
+	
+	<meta charset="utf-8">
+
+	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
+		   Remove this if you use the .htaccess -->
+	
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    
+	<title>noVNC</title>
+	
+	<meta name="viewport" content="user-scalable=1" />
+	<meta http-equiv="X-UA-Compatible" content="chrome=1" />
+    
+	<!-- Stylesheets -->
+	<link rel="stylesheet" href="include/base.css" />
+    <link rel="alternate stylesheet" href="include/black.css" TITLE="Black" />
 		
-        <!--
+	<!-- Google web fonts -->
+	<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Nova+Square|Orbitron:400,500,700,900|Nova+Round|Nova+Mono|Nova+Slim|Nova+Oval|Nova+Flat|Nova+Cut' rel='stylesheet' type='text/css'>       
+   
+		<!--
         <script type='text/javascript'  
             src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
         -->
-        <script src="include/vnc.js"></script>
-        <script src="include/ui.js"></script>
-    </head>
+		
+	<script src="include/vnc.js"></script>
+	<script src="include/ui.js"></script>
+			
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<!--
+	<meta name="viewport" content="width=device-width,height=device-height" />
+	-->
+	 
+	<!-- App Start Icon  -->
+	<link rel="apple-touch-startup-image" href="images/screen_640x435.png" /> 
 
-    <body onKeyDown="onKeyDown(event);">		
-        <div id='vnc'>Loading</div>
+	<!-- For iOS devices set the icon to use if user bookmarks app on their homescreen -->
+	<link rel="apple-touch-icon" href="images/mobileicon.png">
+	<link rel="apple-touch-icon-precomposed" href="images/mobileicon.png" /> 
+	
+</head> 
 
-        <script>
-        window.onload = function () {
-            UI.load('vnc');
-        };
-        </script>
+<body>
+ 	<div class="noVNC-control-bar">
+			<!--noVNC Mobile Device only Buttons-->
+			<div id="noVNC_mobile_buttons"> 
+				<nobr>
+					<span class="noVNC_mouse_buttons">
+						<input type="button" class="noVNC_status_button" id="noVNC_mouse_button1" value="L" onclick="UI.setMouseButton(1);">
+						<input type="button" class="noVNC_status_button" id="noVNC_mouse_button2" value="M" onclick="UI.setMouseButton(2);">
+						<input type="button" class="noVNC_status_button" id="noVNC_mouse_button4" value="R" onclick="UI.setMouseButton(4);">
+						<input type="button" class="noVNC_status_button" value="CtrlAltDel" id="sendCtrlAltDelButton" onclick="UI.sendCtrlAltDel();">
+						<input type="button" id="showKeyboard" onclick="showkeyboard()" value="Keyboard" class="noVNC_status_button"/>
+					</span>
+				</nobr>
+			</div>
+			
+			<!--noVNC Buttons-->
+			<div class="noVNC_mobile_buttons_right">
+					<input type="button" id="clipboardbutton" onclick="UI.showClipboard();" value="Clipboard" />
+					<input type="button" class="VNC_status_button" value="Settings" id="menuButton" onclick="UI.clickSettingsMenu();">
+					<input type="button" id="connectPanelbutton" class="VNC_status_button" onclick="connectPanelbutton()" value="Connection" />
+			</div>
+			
+			<!-- Clipboard Panel -->
+			<div id="noVNC_clipboard" class="triangle-right top">
+				<textarea id="noVNC_clipboard_text" cols=88 rows=5 onfocus="UI.displayBlur();" onblur="UI.displayFocus();" onchange="UI.clipSend();">
+				</textarea>
+				<br />
+				<input id="noVNC_clipboard_clear_button" type="button" value="Clear" onclick="UI.clipClear();">
+			</div>
+		
+			<!-- Settings Panel -->
+			<div id="noVNC_Settings" class="triangle-right top">
+				  <span id="noVNC_settings_menu" onmouseover="UI.displayBlur();" onmouseout="UI.displayFocus();">
+						<ul>
+							<li><input id="noVNC_encrypt" type="checkbox"> Encrypt</li>
+							<li><input id="noVNC_true_color" type="checkbox" checked> True Color</li>
+							<li><input id="noVNC_cursor" type="checkbox"> Local Cursor</li>
+							<li><input id="noVNC_shared" type="checkbox"> Shared Mode</li>
+							<li><input id="noVNC_connectTimeout" type="input"> Connect Timeout (s)</li>
+							<hr>
+							<!-- Stylesheet selection dropdown -->
+							<li><label><strong>Style: </strong>
+								<select id="noVNC_stylesheet" name="vncStyle">
+									<option value="default">default</option>
+								</select></label>
+							</li>
 
-    </body>
+							<!-- Logging selection dropdown -->
+							<li><label><strong>Logging: </strong>
+								<select id="noVNC_logging" name="vncLogging">
+								</select></label>
+							</li>
+							<hr>
+							<li><input type="button" id="noVNC_apply" value="Apply" onclick="UI.settingsApply()"></li>
+						</ul>
+				</span>
+		 </div>
+			
+		<!-- Connection Panel -->
+		<div id="noVNC_controls" class="triangle-right top">
+			  <ul>
+					<li><label><strong>Host: </strong><input id="noVNC_host" /></label></li>
+					<li><label><strong>Port: </strong><input id="noVNC_port" /></label></li>
+					<li><label><strong>Password: </strong><input id="noVNC_password" type="password" /></label></li>
+					<li><input id="noVNC_connect_button" type="button" value="Loading" disabled></li>
+			 </ul>
+		</div>
+		
+	</div>
+	
+	<div id="noVNC_screen">
+		<div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
+			<div id="noVNC_status">Loading</div>
+		</div>
+		
+		<!-- HTML5 Canvas -->
+		<h1 id="noVNC_defaultScreen"><span>no</span><br />VNC</h1>
+		<canvas id="noVNC_canvas" width="640px" height="20px">
+			 Canvas not supported.
+		</canvas>
+		
+		<input id="keyboardinput" style="display:none;" type="text" onKeyDown="onKeyDown(event);"/>
+	</div>
+  
+	 <script>
+			window.onload = UI.load;
+	 </script>
+ </body>
 </html>