First version with a working chat on the multi-window ivan's template

parent 775c5705
<html>
<head>
<title>SkyliveX 0.1.0</title>
<script type="text/javascript" src="SkyliveX.js"></script>
<script type="text/javascript">
function sendMsg()
{
SkyliveX.chat_message_send(document.forms.messagesend.msginput.value);
document.forms.messagesend.msginput.value="";
}
function msgInputKey(event)
{
if(event.keyCode==13)
{
sendMsg();
}
}
</script>
<style>
body {
background-color: #333333;
color: #000000;
margin: 0 auto;
overflow:hidden;
}
p{margin: 0;}
div.csschat {
padding: 2px;
word-wrap: break-word;
position: absolute;
top: 26px;
bottom: 73px;
left: 15px;
right: 194px;
background-color: #f2f2f2;
line-height: 1;
overflow:auto;
}
div.cssuserlist {
position: absolute;
top: 54px;
bottom: 15px;
right: 18px;
width:138px;
color: #FFFF00;
padding-left:4px;
background-color: #AAAAFF;
line-height: 1;
overflow:auto;
}
textarea.csschatinput {
font: medium -moz-fixed;
font: -webkit-small-control;
padding: 2px;
word-wrap: break-word;
position: absolute;
bottom: 11px;
left: 12px;
right: 286px;
height:42px;
background-color: #FFFFFF;
line-height: 1;
overflow-y: scroll;
overflow-x:hidden;
}
#chat1 {
position: absolute;
left: 0px;
top: 0px;
}
#chat4 {
position: absolute;
top: 51px;
bottom: 90px;
left: 0px;
height:100%;
width: 51px;
}
#chat7 {
position: absolute;
left: 0px;
bottom: -1px;
}
#chat2 {
position: absolute;
top: 0px;
left: 51px;
right: 336px;
width:100%;
height:51px;
}
#chat8 {
position: absolute;
left: 51px;
right: 336px;
bottom: 0px;
height:89px;
width:100%;
}
#chat3 {
position: absolute;
right: 178px;
top: 0px;
}
#chat6 {
position: absolute;
top: 101px;
bottom: 90px;
right: 178px;
height:100%;
width: 158px;
}
#chat9 {
position: absolute;
right: 178px;
bottom: -1px;
}
#ulisttop {
position: absolute;
right: 0px;
}
#ulistmiddle {
right: 0px;
top: 98px;
bottom: 84px;
height:100%;
width: 178px;
position: absolute;
}
#ulistbottom {
position: absolute;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<img src="img/chat1.jpg" id="chat1"></img>
<img src="img/chat4.jpg" id="chat4"></img>
<img src="img/chat7.jpg" id="chat7"></img>
<img src="img/chat2.jpg" id="chat2"></img>
<img src="img/chat8.jpg" id="chat8"></img>
<img src="img/chat3.jpg" id="chat3"></img>
<img src="img/chat6.jpg" id="chat6"></img>
<img src="img/chat9.jpg" id="chat9"></img>
<img src="img/ulist_top.jpg" id="ulisttop"></img>
<img src="img/ulist_mid.jpg" id="ulistmiddle"></img>
<img src="img/ulist_bottom.jpg" id="ulistbottom"></img>
<div id="chatarea" class="csschat">
<p>Welcome to Skylive Chat, you are connected as Administrator!</p>
</div>
<div id="userlist" class="cssuserlist">
<p>ivan_staff</p>
<p>nextime</p>
</div>
<form name="messagesend" onSubmit="return false;" >
<textarea id="chatinput" class="csschatinput" name="msginput" onKeyDown="msgInputKey(event);" >
</textarea>
</form>
</body>
</html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Arial' rel='stylesheet' type='text/css'>
<title>SkyliveX</title>
<script type="text/javascript" src="SkyliveX.js"></script>
<script type="text/javascript">
function sendLogin()
{
SkyliveX.pushLogin(document.forms.loginform.user.value, document.forms.loginform.pass.value);
}
function notifycb(msg)
{
document.getElementById("res").innerHTML=msg;
}
function alertcb(msg)
{
document.getElementById("alert").innerHTML=msg;
}
</script>
<style>
#page {
background-color: #0000FF;
color: #FFFFFF;
text-align: center;
margin: 0 auto;
}
</style>
<style>
body {
font-family: 'Arial', serif;
font-size: 30px;
}
</style>
</head>
<body>
<div id="page">
<b><font size="3">SkyliveX 0.1.0 Login</font></b>
<div id="res"></div>
<div id="alert" style="font-family: 'Arial', serif; font-size: 18px; color: #FF0000; background-color: #000000;">Enter your user and pass.</div>
<font size="2">
<form id="login" name="loginform">
<center>
<table>
<tr><td><div style="font-family: 'Arial', serif; font-size: 14px; color: #FFFFFF;">Username:</div></td><td><input type="text" value="" name="user" placeholder="username" style="width: 150px; padding: 2px; border: 1px solid black"></td></tr>
<tr><td><div style="font-family: 'Arial', serif; font-size: 14px; color: #FFFFFF;">Password:</div></td><td><input type="password" value="" name="pass" placeholder="password" style="width: 150px; padding: 2px; border: 1px solid black"></td></tr>
</table>
</center>
<input type="submit" value="Login" onClick="sendLogin();">
</form>
</font>
</div>
</body>
</html>
<html debug="true">
<head>
<title>SkyliveX 0.1.0</title>
<script type="text/javascript" src="SkyliveX.js"></script>
<style>
body {
background-color: #FFFFFF;
background-image:url('img/mainbg.jpg');
background-repeat:no-repeat;
color: #000000;
margin: 0 auto;
overflow:hidden;
}
#datitele{
position: absolute;
top: 82px;
left: 438px;
height:100px;
width:50px;
color: #BBBBBB;
font-size:16px;
background-color: #000000;
}
#status {
height:35px;
width:350px;
color: #FFFF00;
text-align: left;
font-size:12px;
position: absolute;
top: 359px;
left: 38px;
}
#livearea {
height:240x;
width:320px;
top:73px;
left: 61px;
position: absolute;
}
#telescope {
position: absolute;
top: 23px;
left: 312px;
width: auto;
color: #CCCCCC;
font-size:18px;
background-color: #000000;
}
#numteleselect {
position: absolute;
top: 20px;
left: 407px;
}
</style>
</head>
<body>
<div id="status">
Telescopio chiuso per maltempo
</div>
<div id="datitele">
RA<br>
DEC<br>
CCD Temp.<br>
FWHM<br>
</div>
<div id="livearea">
<img src="http://live1.skylive.name/tele1/live640.jpg"></img>
</div>
<div id="telescope">
Telescope
</div>
<div id="numteleselect">
<select name="numtele" onChange="SkyliveX.change_telescope(this.options[this.selectedIndex].value);">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<script type="text/javascript" >
document.addEventListener('DOMContentLoaded',function(){
SkyliveX.open_window("chatgui.html", false);
setTimeout(function() { SkyliveX.resizeWin(636, 420); }, 500);
});
</script>
</body>
</html>
<html>
<head>
<title>SkyliveX</title>
<script type="text/javascript">
function notifycb(c)
{
document.getElementById("loadstring").innerHTML=c;
}
</script>
<script type="text/javascript" src="SkyliveX.js"></script>
<style>
#loading {
color: #FFFFFF;
text-align: center;
margin: 0 auto;
}
#loading h3 {
background-color: #0000ff;
width:100%;
text-align: center;
padding-bottom:5px;
padding-top: 3px;
}
</style>
</head>
<body>
<div id="loading">
<img src="img/logo.png"></img>
<h3 id="loadstring">Loading2...</h3>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment