Server/Code/mainscreen.html: Difference between revisions

From kJams Wiki
Jump to navigation Jump to search
Newer edit →
Created page with '<pre> <html> <head> <title>kJams Server</title> <script src="spry/xpath.js"></script> <script src="spry/SpryData.js"></script> <script src="ui.js"></script> …'
 
mNo edit summary
Line 172: Line 172:
.KJListItem_alt {
.KJListItem_alt {
background-color: #EEEEFF;
background-color: #EEEEFF;
opacity: 0.7;
/*opacity: 0.7; I use this for slide show. Can be deleted or ignored*/
}
}
 
 

Revision as of 10:42, 20 May 2010

<html>
   <head>
	  <title>kJams Server</title>
   
	  <script src="spry/xpath.js"></script>
	  <script src="spry/SpryData.js"></script>
	  <script src="ui.js"></script>
	  <script src="data.js"></script>
	  <script src="main.js"></script>
	  <script src="common.js"></script>
	  
	  <style type="text/css">
		 #main {
			padding: 10px;
			margin-right: 20px;
			margin-left: 20px;
			border-style: solid;
			border-color: #000000;
			border-width: 1px;
			background: url('metal.jpg');
			cursor: default;
		 }
		 
		 #title {
			padding-right: 30px;
			text-align: left;
			font-family: Arial Black;
			font-size: 24pt;
			font-weight: bold;
			margin-bottom: 5px;
		 }
		 
		 #search {
			width: 100%;
			text-align: center;
		 }
		 
		 #searchfield {
			height: 21px;
			width: 144px;
			background: url('search.png');
			border-width: 0px;
			padding-left: 7px;
			padding-right: 7px;
			padding-top: 2px;
		 }
		 
		 #left {
			float: left;
			width: 200px;
			margin: 0px;
			margin-left: 0px;
		 }
		 
		 #status {
			text-align: center;
			color: #333333;
			padding: 0px;
			margin: 0px;
		 }
		 
		 #playlists .KJList {
			overflow: auto;
			height: 240px;
			padding: 0px;
			background-color: #FFFFFF;
			border-style: solid;
			border-color: #999999;
			border-width: 1px;
			padding: 0px;
		 }
		 
		 #playlists .KJList td {
			padding: 0px;
			margin: 0px;
		 }
		 
		 #playlists .KJList table {
			margin: 0px;
			padding: 0px;
		 }
		 
		 #photo {
			padding: 3px;
			width: 190px;
			height: 143px;
			max-height: 150px;
			overflow: hidden;
			margin-top: 5px;
			background-color: #FFFFFF;
			border-style: solid;
			border-color: #999999;
			border-width: 1px;
		 }
		 
		 #songs {
			/*position: relative;
			z-index: 1;*/
			border-style: solid/
			border-color: #999999;
			border-width: 1px;
			margin-left: 220px;
			background-color: #FFFFFF;
			min-height: 400px;
			background-image:url(/media/Images/kjams.jpg);
			background-repeat: no-repeat;
			background-position: center;
			/*filter: alpha (opacity=50);
			-moz-opacity:0.5;
			opacity: 0.5;*/
		 
		 }
		 #songsbackground{
			positon: absolute;
			z-index: 10;
			min-height: 400px;
			background-image:url(kjams.jpg);
			background-repeat: no-repeat;
			background-position: center;
			filter: alpha (opacity=50);/*for those yet to get with the program*/
			-moz-opacity:0.5;
			opacity: 0.5;
		 }
		 
		 #message, #waiting, #msg_dosearch, #msg_error {
			/*position: relative;
			z-index: 11
			top: 0;
			left: 0;*/
			text-align: center;
			font-size: 14pt;
		 }
		 
		 #songs .KJList {
			padding: 0px;
			height: 400px;
			overflow: auto;
			<!background-color: #FFFFFF;>
		 }
		 
		 .KJListColumn {
			padding: 0px;
			margin: 0px;
			background: url('column-bg.jpg');
			cursor: default;
		 }
		 
		 .KJListColumn td {
			border-style: solid;
			border-color: #999999;
			border-width: 0px;
			border-right-width: 1px;
		 }
		 
		 .KJListColumn .primary {
			background: url('column-selected-bg.jpg');
		 }
		 
		 .KJListItem, .KJListItem_alt, .KJListItem_selected, .KJListItem_drag, .KJListItem_target, .KJListItem_alt_target {
			padding: 0px;
			padding-top: 0px;
			padding-bottom: 0px;
			margin: 0px;
			cursor: default;
			border-style: solid;
			border-color: #FFFFFF;
			border-width: 0px;
			border-bottom-width: 1px;
		 }
		 
		 .KJListItem_alt {
			background-color: #EEEEFF;
			/*opacity: 0.7; I use this for slide show. Can be deleted or ignored*/
		 }
		 
		 .KJListItem_selected {
			background-color: #4444FF;
			color: #FFFFFF;
		 }
				  
		 .KJListItem_target, .KJListItem_alt_target {
			border-style: solid;
			border-color: #000000;
			border-width: 0px;
			border-top-width: 1px;
		 }
		 
		 .KJListItem_alt_target {
			background-color: #EEEEFF;
		 }
		 
		 .KJListItem_drag {
			position: absolute;
			border-style: solid;
			border-color: #000000;
			border-width: 1px;
			background-color: #DDDDDD;
			filter:alpha(opacity=40); /* for IE */
			-moz-opacity:0.4;
			opacity: 0.4;   
		 }
		 
		 .KJList input {
			padding: 0px;
			margin: 0px;
			border-style: solid;
			border-color: #000000;
			border-width: 1px;
		 }
		 
		 .KJList input:active {
			background-color: #000000;
			color: #FFFFFF;
		 }
		 
		 #playlists .KJListItem, #playlists .KJListItem_alt, #playlists .KJListItem_selected, #playlists .KJListItem_target, #playlists .KJListItem_alt_target {
			background: url('playlist-icon.gif');
			background-repeat: no-repeat;
			padding: 0px;
			padding-left: 20px;
			border-style: solid;
			border-color: #FFFFFF;
			border-width: 3px;
		 }
		 
		 
		 #playlists .KJListItem_alt {
			background-color: #EEEEFF;
		 }
		 
		 #playlists .KJListItem_selected {
			background-color: #4444FF;
			color: #FFFFFF;
		 }
		 
		 #playlists .KJListItem_target, #playlists .KJListItem_alt_target {
			border-color: #000000;
			background-color: #9999FF;
		 }

		 .clear {
			clear: both;
		 }
	  </style>
   </head>
   
   <body>
	  <div id="main">
		 <table><tr><td id="title"><nobr>{singer}</nobr></td><td id="search"><nobr>Search Library: <input type="search" id="searchfield" name="search" onkeypress=searchKeyPressed(event) onblur="inSearch.off()" onfocus="inSearch.on()" /> <input type="submit" style="" name="dosearch" value="Go" onclick=m_doSearch() /></nobr></td><td id="help"><nobr>[ <a id="helplink" href="">Help</a> ] [ <a id="logoutlink" href="">Logout</a> ]</nobr></td></tr></table>
		 <div>
			<div id="left">
			   <div id="playlists"></div>
			   <div id="photo"><img src="kjams-main.jpg" /></div>
			</div>
			<div id="songs"><p id="msg_error"></p><p id="msg_dosearch">Please enter a search.</p><p id="message">No Playlist Selected.</p><p id="waiting">Please wait, loading playlist...</p></div>
			<div class="clear"> </div>
			<div id="status">Welcome to kJams!</div>
		 </div>
	  </div>
	  
	  <script language="javascript">
		 //Bind key press function
		 document.onkeyup = m_keyPressed;
		 //Prevent browser from seeing the Delete key press
		 document.onkeydown=trapDelete;
	  
		 //Hide message fields
		 document.getElementById("waiting").style.display = 'none';
		 document.getElementById("msg_dosearch").style.display = 'none';
		 document.getElementById("msg_error").style.display = 'none';
		 
		 //Plug in help and logout URLs
		 document.getElementById("helplink").href = url_help;
		 document.getElementById("logoutlink").href = url_login;
		 
		 //Playlists
		 m_populatePlaylists();
	  
		 if (0) {
			//Song list
			var songs = new KJList();
			songs.create(document.getElementById("songs"));
			songs.setColumns(Array("#", "Song Name", "Artist", "Pitch", "Add to", "Add to"), 1);
			
			//Set clipping
			songs.setClipping({'right' : songs.getColumnWidth(5) + songs.getColumnWidth(4) + songs.getColumnWidth(3)});
			
			getSongs(url_songs, populateList, 'playlist=1');
					 
			function populateList(songList) {
			   for(var i = 0; i < songList.length; i++) {
				  songs.addItem(songList[i]['number'], Array(songList[i]['number'], songList[i]['name'], songList[i]['artist'], "<select><option>+6</option><option>+5</option><option>+4</option><option>+3</option><option>+2</option><option>+1</option><option selected>0</option><option>-1</option><option>-2</option><option>-3</option><option>-4</option><option>-5</option></select>", "<input type=\"submit\" value=\"Tonight\" />", "<input type=\"submit\" value=\"Favorites\" />"), null, null, false);
			   }
			   
			   songs.color();
			}
		 }
	  </script>
   </body>
</html>
Retrieved from "https://karaoke.kjams.com/w/index.php?title=Server/Code/mainscreen.html&oldid=5856"