[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;
}

/* 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;
}
</style>
</head>

<body>

<div id='body'>

<div class='main' id='main.controls'>
<table>
 <tr>
  <td>
   <input type='button' id='previous' value='&#x21E6;'><input type='button' id='stop' value='&#x25FB;'><input type='button' id='pause' value='&#x25EB;'><input type='button' id='play' value='&#x25B7;'><input type='button' id='next' value='&#x21E8;'>
  </td>
  <td style='whitespace:collapse'>
   <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 colspan=2>
   <span id='status'>Loading...</span>
  </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>

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

</body>
</html>
Commit	Line	Data
	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
	39	/* Get the tabs to float at the bottom */
	40	html, body {
	41	height: 100%;
	42	}
	43	div#body {
	44	min-height: 100%;
	45	}
	46	div.main {
	47	overflow: auto;
	48	padding-bottom: 1.3em;
	49	}
	50	div#footer {
	51	position: relative;
	52	margin-top: -1.3em;
	53	height: 1.3em;
	54	clear: both;
	55	}
	56	</style>
	57	</head>
	58
	59	<body>
	60
	61	<div id='body'>
	62
	63	<div class='main' id='main.controls'>
	64	<table>
	65	<tr>
	66	<td>
	67	<input type='button' id='previous' value='⇦'><input type='button' id='stop' value='◻'><input type='button' id='pause' value='◫'><input type='button' id='play' value='▷'><input type='button' id='next' value='⇨'>
	68	</td>
	69	<td style='whitespace:collapse'>
	70	<input type='button' id='repeat' value='∞'><input type='button' id='random' value='®'><input type='button' id='single' value='§'><input type='button' id='consume' value='©'>
	71	</td>
	72	</tr>
	73	<tr>
	74	<td>
	75	<input type='range' id='setvol' min='0' max='100' value='0'>
	76	</td>
	77	<td>
	78	<input type='range' id='seekcur' min='0' max='100' value='0'>
	79	</td>
	80	</tr>
	81	<tr>
	82	<td colspan=2>
	83	<span id='status'>Loading...</span>
	84	</td>
	85	</tr>
	86	</table>
	87	</div>
	88
	89	<div class='main' id='main.options' style='display: none'>
	90	<table>
	91	<tr>
	92	<td>Host:</td>
	93	<td><input type='text' id='host'></td>
	94	</tr>
	95	<tr>
	96	<td>Port:</td>
	97	<td colspan=2>
	98	<input type='number' id='port' style='width:60px'>
	99
	100	<input type='button' id='connect' value='connect'>
	101	</td>
	102	</tr>
	103	<tr>
	104	<td>Refresh (sec):</td>
	105	<td>
	106	<input type='number' id='refresh' style='width:40px'>
	107
	108	Sync Settings:<input type='checkbox' id='sync' checked>
	109	</td>
	110	</tr>
	111	</table>
	112	</div>
	113
	114	<div class='main' id='main.metadata' style='display: none'>
	115	<span id='metadata.artist'></span> -
	116	<span id='metadata.album'></span> -
	117	<span id='metadata.title'></span><br>
	118	<span id='metadata.date'></span><br><br>
	119	<span id='metadata.file'></span>
	120	</div>
	121
	122	</div>
	123
	124	<div id='footer'>
	125	<table class='tabs'>
	126	<tr>
	127	<td id='tab.controls' class='selected'>Controls</td>
	128	<td id='tab.metadata'>Metadata</td>
	129	<td id='tab.options'>Options</td>
	130	</tr>
	131	</table>
	132	</div>
	133
	134	</body>
	135	</html>