[chrome-ext/music-player-client.git] / main.html

<!-- Written by Mike Frysinger <vapier@gmail.com>.  Released into the public domain.  Suck it. -->
<!doctype html>
<html>

<head>
<title>Media Player Client</title>
<script src='js/tcp-client.js'></script>
<script src='js/mpc.js'></script>
<script src='main.js'></script>
<style>
table {
	margin: 0px;
	padding: 0px;
	border-collapse: collapse;
}
body {
	margin: 0px;
	padding: 0px;
}
td {
	white-space: nowrap;
}
div#status {
	white-space: nowrap;
}

table.tabs td {
	padding-left: 1em;
	border: black solid 1px;
	border-top: 0px;
	font-size: smaller;
	font-family: sans-serif;
	background-color: #d0d0d0;
}
table.tabs td.selected {
	background-color: white;
}

/* Playlist styles */
table#playlist td {
	border-left: black solid 1px;
	padding-right: 0.5em;
}

td#playlist_del {
	padding-left: 0.3em;
	padding-right: 0.2em;
	font-weight: bold;
}

/* Get the tabs to float at the bottom */
html, body {
	height: 100%;
}
div#body {
	min-height: 100%;
}
div.main {
	overflow: auto;
	padding-bottom: 1.3em;
}
div#footer {
	position: relative;
	margin-top: -1.3em;
	height: 1.3em;
	clear: both;
}
table#playlist {
	height: 85px;
	display: block;
};
</style>
</head>

<body>

<div id='body'>

<div class='main' id='main.controls'>
<table>
 <tr style='whitespace:collapse'>
  <td>
   <input type='button' id='previous' value='&#x21E6;' accesskey='a'><input type='button' id='play' value='&#x25B7;' accesskey='s'><input type='button' id='pause' value='&#x25EB;' accesskey='d'><input type='button' id='stop' value='&#x25FB;' accesskey='f'><input type='button' id='next' value='&#x21E8;' accesskey='g'>
  </td>
  <td>
   <input type='button' id='repeat' value='&#x221E;'><input type='button' id='random' value='&reg;'><input type='button' id='single' value='&sect;'><input type='button' id='consume' value='&copy;'>
  </td>
 </tr>
 <tr>
  <td>
   <input type='range' id='setvol' min='0' max='100' value='0'>
  </td>
  <td>
   <input type='range' id='seekcur' min='0' max='100' value='0'>
  </td>
 </tr>
 <tr>
  <td id='status'>
   Loading...
  </td>
  <td id='currtime'></td>
 </tr>
</table>
</div>

<div class='main' id='main.options' style='display: none'>
<table>
 <tr>
  <td>Host:</td>
  <td><input type='text' id='host'></td>
 </tr>
 <tr>
  <td>Port:</td>
  <td colspan=2>
   <input type='number' id='port' style='width:60px'>
   &nbsp;&nbsp;&nbsp;
   <input type='button' id='connect' value='connect'>
  </td>
 </tr>
 <tr>
  <td>Refresh (sec):</td>
  <td>
   <input type='number' id='refresh' style='width:40px'>
   &nbsp;&nbsp;&nbsp;
   Sync Settings:<input type='checkbox' id='sync' checked>
  </td>
 </tr>
</table>
</div>

<div class='main' id='main.metadata' style='display: none'>
<span id='metadata.artist'></span> -
<span id='metadata.album'></span> -
<span id='metadata.title'></span><br>
<span id='metadata.date'></span><br><br>
<span id='metadata.file'></span>
</div>

<div class='main' id='main.playlist' style='display: none'>
<table id='playlist'></table>
</div>

</div>

<div id='footer'>
<table class='tabs'>
 <tr>
  <td id='tab.controls' class='selected'>Controls</td>
  <td id='tab.metadata'>Metadata</td>
  <td id='tab.playlist'>Playlist</td>
  <td id='tab.options'>Options</td>
 </tr>
</table>
</div>

</body>
</html>
Commit	Line	Data
50dafc4c MF	1	<!-- Written by Mike Frysinger <vapier@gmail.com>. Released into the public domain. Suck it. -->
	2	<!doctype html>
	3	<html>
	4
	5	<head>
	6	<title>Media Player Client</title>
	7	<script src='js/tcp-client.js'></script>
	8	<script src='js/mpc.js'></script>
	9	<script src='main.js'></script>
	10	<style>
	11	table {
	12	margin: 0px;
	13	padding: 0px;
	14	border-collapse: collapse;
	15	}
	16	body {
	17	margin: 0px;
	18	padding: 0px;
	19	}
	20	td {
	21	white-space: nowrap;
	22	}
	23	div#status {
	24	white-space: nowrap;
	25	}
	26
	27	table.tabs td {
	28	padding-left: 1em;
	29	border: black solid 1px;
	30	border-top: 0px;
	31	font-size: smaller;
	32	font-family: sans-serif;
	33	background-color: #d0d0d0;
	34	}
	35	table.tabs td.selected {
	36	background-color: white;
	37	}
	38
9cb957ed	39	/* Playlist styles */
ea38f3ed MF	40	table#playlist td {
	41	border-left: black solid 1px;
	42	padding-right: 0.5em;
	43	}
	44
9cb957ed MF	45	td#playlist_del {
	46	padding-left: 0.3em;
	47	padding-right: 0.2em;
	48	font-weight: bold;
	49	}
	50
50dafc4c MF	51	/* Get the tabs to float at the bottom */
	52	html, body {
	53	height: 100%;
	54	}
	55	div#body {
	56	min-height: 100%;
	57	}
	58	div.main {
	59	overflow: auto;
	60	padding-bottom: 1.3em;
	61	}
	62	div#footer {
	63	position: relative;
	64	margin-top: -1.3em;
	65	height: 1.3em;
	66	clear: both;
	67	}
9cb957ed MF	68	table#playlist {
	69	height: 85px;
	70	display: block;
	71	};
50dafc4c MF	72	</style>
	73	</head>
	74
	75	<body>
	76
	77	<div id='body'>
	78
	79	<div class='main' id='main.controls'>
	80	<table>
00536f50	81	<tr style='whitespace:collapse'>
50dafc4c	82	<td>
ee26ebe4	83	<input type='button' id='previous' value='⇦' accesskey='a'><input type='button' id='play' value='▷' accesskey='s'><input type='button' id='pause' value='◫' accesskey='d'><input type='button' id='stop' value='◻' accesskey='f'><input type='button' id='next' value='⇨' accesskey='g'>
50dafc4c	84	</td>
00536f50	85	<td>
50dafc4c MF	86	<input type='button' id='repeat' value='∞'><input type='button' id='random' value='®'><input type='button' id='single' value='§'><input type='button' id='consume' value='©'>
	87	</td>
	88	</tr>
	89	<tr>
	90	<td>
	91	<input type='range' id='setvol' min='0' max='100' value='0'>
	92	</td>
	93	<td>
	94	<input type='range' id='seekcur' min='0' max='100' value='0'>
	95	</td>
	96	</tr>
	97	<tr>
ea38f3ed MF	98	<td id='status'>
ea38f3ed MF	99	Loading...
50dafc4c	100	</td>
ea38f3ed	101	<td id='currtime'></td>
50dafc4c MF	102	</tr>
	103	</table>
	104	</div>
	105
	106	<div class='main' id='main.options' style='display: none'>
	107	<table>
	108	<tr>
	109	<td>Host:</td>
0c661219	110	<td><input type='text' id='host'></td>
50dafc4c MF	111	</tr>
	112	<tr>
	113	<td>Port:</td>
50dafc4c	114	<td colspan=2>
0c661219 MF	115	<input type='number' id='port' style='width:60px'>
0c661219 MF	116
50dafc4c	117	<input type='button' id='connect' value='connect'>
0c661219 MF	118	</td>
	119	</tr>
	120	<tr>
	121	<td>Refresh (sec):</td>
	122	<td>
	123	<input type='number' id='refresh' style='width:40px'>
50dafc4c	124
0c661219 MF	125	Sync Settings:<input type='checkbox' id='sync' checked>
0c661219 MF	126	</td>
50dafc4c MF	127	</tr>
	128	</table>
	129	</div>
	130
	131	<div class='main' id='main.metadata' style='display: none'>
e9aee305 MF	132	<span id='metadata.artist'></span> -
	133	<span id='metadata.album'></span> -
	134	<span id='metadata.title'></span><br>
	135	<span id='metadata.date'></span><br><br>
	136	<span id='metadata.file'></span>
50dafc4c MF	137	</div>
50dafc4c MF	138
ea38f3ed MF	139	<div class='main' id='main.playlist' style='display: none'>
	140	<table id='playlist'></table>
	141	</div>
	142
50dafc4c MF	143	</div>
	144
	145	<div id='footer'>
	146	<table class='tabs'>
	147	<tr>
	148	<td id='tab.controls' class='selected'>Controls</td>
	149	<td id='tab.metadata'>Metadata</td>
ea38f3ed	150	<td id='tab.playlist'>Playlist</td>
50dafc4c MF	151	<td id='tab.options'>Options</td>
	152	</tr>
	153	</table>
	154	</div>
	155
	156	</body>
	157	</html>