comunicationLeap/index.html
index.htmlRaw
1<html>
2<head>
3<title>ABB Room selector</title>
4<style>
5 html, body { /* sense marges ni padding */
6 margin: 0;
7 padding: 0;
8 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
9 font-size: 14px;
10 height: 100%;
11 width: 100%;
12 overflow: hidden;
13
14 background: #a8caba;
15 background: -moz-linear-gradient(-45deg, #a8caba 0%, #5d4157 100%);
16 background: -webkit-linear-gradient(-45deg, #a8caba 0%,#5d4157 100%);
17 background: linear-gradient(135deg, #a8caba 0%,#5d4157 100%);
18 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8caba', endColorstr='#5d4157',GradientType=1 );
19 }
20
21 #chat{
22
23 }
24 #nickWrap{
25 display: none;
26 }
27 #contentWrap{
28 }
29 #chatWrap{
30 float:left;
31 border:1px #000 solid;
32 border-radius: 5px;
33 }
34
35 .loginbox{
36 background: -moz-linear-gradient(top, rgba(96,118,132,0.1) 0%, rgba(96,118,132,0.42) 100%);
37 background: -webkit-linear-gradient(top, rgba(96,118,132,0.1) 0%,rgba(96,118,132,0.42) 100%);
38 background: linear-gradient(to bottom, rgba(96,118,132,0.1) 0%,rgba(96,118,132,0.42) 100%);
39 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a607684', endColorstr='#6b607684',GradientType=0 );
40
41
42 /*position: absolute;*/
43 max-width: 200px;
44 margin-top: 10%;
45 margin-left: auto;
46 margin-right: auto;
47 padding: 10px;
48 /*border-radius: 5px;*/
49
50 animation-name: loginboxanimation;
51 animation-duration: 0.7s;
52 animation-iteration-count: 1;
53 }
54 @keyframes toppannelanimation {
55 0% {margin-top:-100%;}
56 100% {margin-top:0%;}
57 }
58 .loginbox input[type=text] {
59 width: 100px;
60 background: rgba(255,255,255,0.6);
61 border: 0px;
62 /*border-radius: 3px;*/
63 margin-top: 10px;
64 margin-left: auto;
65 margin-right: auto;
66 }
67
68 .loginbox input[type=text]:focus {
69 /*border-color:#333;*/
70 background: rgba(255,255,255,1);
71 }
72
73 .loginbox input[type=submit] {
74 padding:5px 15px;
75 background: #1D6BAA;
76 color: #ffffff;
77 border:0 none;
78 cursor:pointer;
79 -webkit-border-radius: 5px;
80 border-radius: 5px;
81 margin-top: 10px;
82 margin-left: auto;
83 margin-right: auto;
84 }
85
86 .chat{
87 background: rgba(240,240,240,0.4);
88 height:500px;
89 padding: 10px;
90 border-radius: 5px;
91 }
92 .users2{
93 /*margin-left: 60%;*/
94 padding: 10px;
95 max-width: 150px;
96 border-radius: 5px;
97 background: rgba(240,240,240,0.4);
98 display: none; /*block;*/
99 }
100 .userStations{
101 /*margin-left: 60%;*/
102 padding: 10px;
103 max-width: 150px;
104 border-radius: 5px;
105 background: rgba(240,240,240,0.4);
106 display: none; /*block;*/
107 }
108 .usersUnity{
109 /*margin-left: 60%;*/
110 padding: 10px;
111 max-width: 150px;
112 border-radius: 5px;
113 background: rgba(240,240,240,0.4);
114 display: block;
115 }
116 .RSrooms{
117 /*margin-left: 60%;*/
118 padding: 10px;
119 max-width: 150px;
120 border-radius: 5px;
121 background: rgba(240,240,240,0.4);
122 display: none; /*block;*/
123 }
124 .nom{
125 background: #ffffff;
126 color: #000000;
127 width: 100px;
128 height: 25px;
129 margin: 5px;
130 display: block;
131 border-radius: 5px;
132 text-align: center;
133 font-weight: bold;
134 }
135
136 .logobox{
137 width: 90%;
138 height: 115px;
139 margin-left: auto;
140 margin-right: auto;
141 display:block;
142 background: rgba(240,240,240,0.2);
143
144 animation-name: toppannelanimation;
145 animation-duration: 0.7s;
146 animation-iteration-count: 1;
147 }
148 .globalbox{
149 width: 90%;
150 margin-left: auto;
151 margin-right: auto;
152 }
153 .rightpannels{
154 background: rgba(240,240,240,0.1);
155 /*height:500px;*/
156 width: 40%;
157 padding: 10px;
158 border-radius: 5px;
159 display: inline-block;
160 margin-top: 0px;
161 position: absolute;
162 }
163 .systeminfo{
164 background: rgba(240,240,240,0.4);
165 /*height:500px;*/
166 width: 40%;
167 padding: 10px;
168 border-radius: 5px;
169 top: 0px;
170 display: inline-block;
171 position: relative;
172 }
173 .Room{
174 padding: 10px;
175 width: 30%;
176 max-width: 150px;
177 border-radius: 5px;
178 background: rgba(240,240,240,0.4);
179 border: 2px solid #5E5E5E;
180 }
181 .Robotstudio_User{
182 background: #D3E5D3;
183 color: #000000;
184 width: 100px;
185 height: 25px;
186 margin: 5px;
187 display: block;
188 border-radius: 5px;
189 text-align: center;
190 font-weight: bold;
191 }
192 .Unity_User{
193 background: #CED4E5;
194 color: #000000;
195 width: 100px;
196 height: 25px;
197 margin: 5px;
198 display: block;
199 border-radius: 5px;
200 text-align: center;
201 font-weight: bold;
202 }
203</style>
204</head>
205<body onload='OnLoadHTML()'>
206 <div id="nickWrap" class='loginbox'>
207 <img src="http://s18.postimg.org/d0ldvx4rd/abblogo.png" style="width:90%; margin-left:5%;"/>
208 <p>Enter a username:</p>
209 <p id="nickError"></p>
210 <form id="setNick">
211 <input type="text" size ="35" id="nickname"></input>
212 <input type ="submit"></input>
213 </form>
214 </div>
215
216 <div id="contentWrap">
217 <!--<div id="chatWrap">
218 <div id="chat" class="chat"></div>
219 <form id="send-message">
220 <input size="35" id="message"></input>
221 <input type="submit"></input>
222 </form>
223 </div>-->
224 <div class="logobox">
225 <img src="http://s18.postimg.org/d0ldvx4rd/abblogo.png" style="height:100%;"/>
226 </div>
227 <div class="globalbox">
228 <div id='systeminfo' class='systeminfo'></div>
229 <div class="rightpannels">
230 <div id="users2" class='users2'></div>
231 <div id="usersStations" class="userStations"></div>
232 <div id="usersUnity" class="usersUnity"></div>
233 <div id="RSrooms" class="RSrooms"></div>
234 </div>
235 </div>
236 </div>
237
238 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
239 <script src="/socket.io/socket.io.js"></script>
240 <script src="functions.js"></script>
241</body>
242</html> '