Fix sizing of page due to touch menu.
[guacamole.git] / src / main / webapp / client.xhtml
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE html>
3
4 <!--
5     Guacamole - Clientless Remote Desktop
6     Copyright (C) 2010  Michael Jumper
7
8     This program is free software: you can redistribute it and/or modify
9     it under the terms of the GNU Affero General Public License as published by
10     the Free Software Foundation, either version 3 of the License, or
11     (at your option) any later version.
12
13     This program is distributed in the hope that it will be useful,
14     but WITHOUT ANY WARRANTY; without even the implied warranty of
15     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
16     GNU Affero General Public License for more details.
17
18     You should have received a copy of the GNU Affero General Public License
19     along with this program.  If not, see <http://www.gnu.org/licenses/>.
20 -->
21
22 <html xmlns="http://www.w3.org/1999/xhtml">
23
24     <head>
25         <link rel="icon" type="image/png" href="images/guacamole-logo-64.png"/>
26         <link rel="stylesheet" type="text/css" href="styles/client.css"/>
27         <link rel="stylesheet" type="text/css" href="styles/keyboard.css"/>
28         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
29         <meta name="apple-mobile-web-app-capable" content="yes"/>
30         <title>Guacamole ${project.version}</title>
31     </head>
32
33     <body>
34
35         <!-- Menu -->
36         <div id="menu">
37
38             <!-- Clipboard -->
39             <button id="showClipboard">Show Clipboard</button>
40             <div id="clipboardDiv">
41                 <h2>Clipboard</h2>
42                 <p>
43                 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.
44                 </p>
45                 <textarea rows="10" cols="40" id="clipboard"></textarea>
46             </div>
47
48             <button id="showKeyboard">Show Keyboard</button>
49             <button id="ctrlAltDelete">Ctrl-Alt-Delete</button>
50             <button id="logout">Logout</button>
51
52             <!-- Logo and status -->
53             <img id="status-logo" class="logo" src="images/guacamole-logo-24.png" alt="Guacamole" title="Guacamole ${project.version}"/>
54
55         </div>
56
57         <!-- Touch-specific menu -->
58         <div id="touchMenu"><img id="touchShowClipboard" src="images/menu-icons/tango/edit-paste.png"/><img id="touchShowKeyboard" src="images/menu-icons/tango/input-keyboard.png"/><img id="touchLogout" src="images/menu-icons/tango/system-log-out.png"/></div>
59
60         <!-- Keyboard event target for platforms with native OSKs -->
61         <textarea id="eventTarget"></textarea>
62
63         <!-- Display -->
64         <div id="display">
65             
66             <!-- Menu trigger -->
67             <div id="menuControl"></div>
68
69         </div>
70
71         <!-- On-screen keyboard -->
72         <div id="keyboardContainer"></div>
73
74         <!-- Dimensional clone of viewport -->
75         <div id="viewportClone"/>
76
77         <!-- Dialogs -->
78         <div class="dialogOuter">
79             <div class="dialogMiddle">
80
81                 <!-- Status Dialog -->
82                 <div id="statusDialog" class="dialog">
83                     <p id="statusText"></p>
84                     <div class="buttons"><button id="reconnect">Reconnect</button></div>
85                 </div>
86
87             </div>
88         </div>
89
90         <!-- guacamole-common-js scripts -->
91         <script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
92         <script type="text/javascript" src="guacamole-common-js/mouse.js"></script>
93         <script type="text/javascript" src="guacamole-common-js/layer.js"></script>
94         <script type="text/javascript" src="guacamole-common-js/tunnel.js"></script>
95         <script type="text/javascript" src="guacamole-common-js/guacamole.js"></script>
96         <script type="text/javascript" src="guacamole-common-js/oskeyboard.js"></script>
97
98         <!-- guacamole-default-webapp scripts -->
99         <script type="text/javascript" src="scripts/interface.js"></script>
100
101         <!-- Init -->
102         <script type="text/javascript"> /* <![CDATA[ */
103
104             // Start connect after control returns from onload (allow browser
105             // to consider the page loaded).
106             window.onload = function() {
107                 window.setTimeout(function() {
108
109                     var tunnel;
110
111                     // If WebSocket available, try to use it.
112                     if (window.WebSocket)
113                         tunnel = new Guacamole.ChainedTunnel(
114                             new Guacamole.WebSocketTunnel("websocket-tunnel"),
115                             new Guacamole.HTTPTunnel("tunnel")
116                         );
117
118                     // If no WebSocket, then use HTTP.
119                     else
120                         tunnel = new Guacamole.HTTPTunnel("tunnel")
121
122                     // Instantiate client
123                     var guac = new Guacamole.Client(tunnel);
124
125                     // Add client to UI
126                     guac.getDisplay().className = "software-cursor";
127                     GuacamoleUI.display.appendChild(guac.getDisplay());
128
129                     // Tie UI to client
130                     GuacamoleUI.attach(guac);
131
132                     try {
133
134                         // Get entire query string, and pass to connect().
135                         // Normally, only the "id" parameter is required, but
136                         // all parameters should be preserved and passed on for
137                         // the sake of authentication.
138
139                         var connect_string = window.location.search.substring(1);
140                         guac.connect(connect_string);
141
142                     }
143                     catch (e) {
144                         GuacamoleUI.showError(e.message);
145                     }
146
147                 }, 0);
148             };
149
150         /* ]]> */ </script>
151
152     </body>
153
154 </html>