1 files changed, 42 insertions, 20 deletions
diff --git a/examples/hybridshell/qml/hybridshell/index.html b/examples/hybridshell/qml/hybridshell/index.html
index a76f047..b93daab 100644
--- a/examples/hybridshell/qml/hybridshell/index.html
+++ b/examples/hybridshell/qml/hybridshell/index.html
@@ -1,38 +1,48 @@
+<!DOCTYPE html>
 <html>
     <head>
-        <style>
+        <title>QML/HTML Hybrid Shell</title>
+        <style type="text/css">
+        html, body {
+            margin:0;
+            padding:0;
+            width:100%;
+            height:100%;
+        }
+        #layout {
+            height:100%;
+            width:92%;
+            margin: 0 auto;
+        }
         #output {
-            width:92%; height: 95%; display: block;
+            width:100%;
+            margin-top:1%;
+            height: 94%;
+            display: block;
             border-radius: 5px;
             border-style: solid;
             border-color: #666666;
             background-image: -webkit-linear-gradient(left top,#dddddd, #ffffff)
         }
         #input {
-            width:92%; height: 5%; display: block; background-color: #dddddd;
+            width:100%;
+            height: 3%;
+            margin-top:1%;
+            margin-bottom:1%;
+            display: block;
+            background-color: #dddddd;
             border-radius: 3px;
             border-style: solid;
             border-color: #dddddd;
             background-image: -webkit-linear-gradient(left,#eeeeee, #cccccc)
         }
         </style>
-        <script>
-            document.write('<script src="' + (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/]+)/.exec(location.search)[1]) + '/webchannel.js/createWebChannel"><' + '/script>');
-        </script>
-        <script>
+        <script type="text/javascript" src="qrc:///qwebchannel/webchannel.js"></script>
+        <script type="text/javascript">
         function out(line)
         {
             document.querySelector("#output").value += line + "\r\n";
         }
-        window.onload = function() {
-            out("Starting...");
-            createWebChannel(function(webChannel) {
-                window.navigator.webChannel = webChannel;
-                out("Ready");
-                webChannel.subscribe("stdout", out);
-            });
-        };
-
         function send()
         {
             var input = document.querySelector("#input");
@@ -48,13 +58,25 @@
                 case 13:
                     send();
                     break;
-
             }
         }
+
+        window.onload = function() {
+            out("Starting...");
+
+            var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/]+)/.exec(location.search)[1]);
+            new QWebChannel(baseUrl, function(webChannel) {
+                window.navigator.webChannel = webChannel;
+                out("Ready");
+                webChannel.subscribe("stdout", out);
+            });
+        }
         </script>
     </head>
-    <body marginleft=0 margintop=0 style="width:480px; height: 800px">
-        <textarea readonly id="output" ></textarea>
-        <input type="text" id="input" onkeyup="handleKey(event.keyCode)"></input>
+    <body>
+        <div id="layout">
+            <textarea readonly id="output" ></textarea>
+            <input type="text" id="input" onkeyup="handleKey(event.keyCode)"></input>
+        </div>
     </body>
 </html>