view www/m/ctrl.html @ 38:ea8d61c851c0

added chat server and more work on interface
author tzara <rc-web@kiben.net>
date Wed, 22 Aug 2012 12:51:28 +0000
parents
children 3ba24da53406
line wrap: on
line source
<!DOCTYPE html>
<html>
<head>
  <link href="css/nodescore.css" rel="stylesheet">
  <link href="css/chat.css" rel="stylesheet">
  <link href="css/menu.css" rel="stylesheet">
  
  <script src="js/jquery-1.7.1.min.js"></script>  
  <script src="/socket.io/socket.io.js"></script>
  <script src="js/nodescore-client.js"></script>
  <script src="js/controlseq.js"></script>

</head>

<body onload='document.getElementById("countinnumber").style.visibility="hidden";'>

  <input type="hidden" id="group" value='1'> 


  
  <div class="outermaster"> 
    <h1 style="position:absolute; background:transparent; left:24px; top:14px;">l i v e :</h1>
    <div id="countinnumber"></div>    
    <div id="livez"> 
	<div class="outersquare">      
	  <div>
	    <p class="magicsquare" id="1magicsquare0"></p>
	    <p class="magicsquare" id="1magicsquare1"></p>
	    <p class="magicsquare" id="1magicsquare2"></p>
	    <p class="magicsquare" id="1magicsquare3"></p>
	    <p class="magicsquare" id="1magicsquare4"></p>
	    <p class="magicsquare" id="1magicsquare5"></p>
	  </div>
	  <br><br><br><br>
	  <div>
	    <p class="magicsquare" id="2magicsquare0"></p>
	    <p class="magicsquare" id="2magicsquare1"></p>
	    <p class="magicsquare" id="2magicsquare2"></p>
	    <p class="magicsquare" id="2magicsquare3"></p>
	    <p class="magicsquare" id="2magicsquare4"></p>
	    <p class="magicsquare" id="2magicsquare5"></p>
	  </div>
	  <br><br><br><br>
	  <div>
	    <p class="magicsquare" id="3magicsquare0"></p>
	    <p class="magicsquare" id="3magicsquare1"></p>
	    <p class="magicsquare" id="3magicsquare2"></p>
	    <p class="magicsquare" id="3magicsquare3"></p>
	    <p class="magicsquare" id="3magicsquare4"></p>
	    <p class="magicsquare" id="3magicsquare5"></p>
	  </div>
	  <br><br><br><br>
	  <div>
	    <p class="magicsquare" id="4magicsquare0"></p>
	    <p class="magicsquare" id="4magicsquare1"></p>
	    <p class="magicsquare" id="4magicsquare2"></p>
	    <p class="magicsquare" id="4magicsquare3"></p>
	    <p class="magicsquare" id="4magicsquare4"></p>
	    <p class="magicsquare" id="4magicsquare5"></p>
	  </div>
	</div>
	  <br><br><br><br>      <br><br><br><br>
	  
	  <input type="button" value="START" onclick="startSeq();" />
	  <input type="button" value="STOP" onclick="stopSeq();" />
	  <input type="button" value="RESET" onclick="resetSeq();" />
	  
	  <br><br>


    </div>        </div>    
    
    <div id="comms"> 
      <div id="chat">
	<div id="nickname">
	  <form id="set-nickname" class="wrap">
	    <p>Please type in your nickname and press enter.</p>
	    <input id="nick">
	    <p id="nickname-err">Nickname already in use</p>
	  </form>
	</div>
	<div id="connecting">
	  <div class="wrap">Connecting to socket.io server</div>
	</div>
	<div id="messages">
	  <div id="nicknames"></div>
	  <div id="lines"></div>
	</div>
	<form id="send-message">
	  <input id="message">
	  <button>Send</button>
	</form>
      </div>
    </div>    
      
    <div id="midcomms"></div>
    <div id="preview">
    </div>    
    
    <div class="footdata">
      
      <div class="metrocase" id="metro">
	<div id="metronome0"></div>
	<div id="metronome1"></div>
	<div id="metronome2"></div>
	<div id="metronome3"></div>
      </div>
      
      <div id="current">GROUP: 1</div>    
      <div id="client_latency">Latency: 0ms</div>     
      <div id="datetime"></div>
      <div id="client_chronometer"  style="z-index: 2;">00:00:00.0</div>    
      
    </div>

  </div>

    <ul id="nav"> 
      <li><a href="javascript:void(0)">Menu</a>
	<ul>
	  <li><a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='3'">SELECT PART:</a>
	    <ul>
	      <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='1'; $('div#current').text('GROUP 1').text='1'">GROUP 1</a>
	      <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='2'; $('div#current').text('GROUP 2').text='2'">GROUP 2</a>
	      <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='3'; $('div#current').text('GROUP 3').text='3'">GROUP 3</a>
	      <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='4'; $('div#current').text('GROUP 4').text='4'">GROUP 4</a>
	    </ul>
	  </li> 
	  <li><a href="http://nodescore.kiben.net">help</a></li>
	  <li><a href="http://nodescore.kiben.net:8889/m/controls.html" target="_blank">control panel</a></li>
	</ul>
      </li>
    </ul>

 


</body>
</html>