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%;
height: 1.3em;
clear: both;
}
+table#playlist {
+ height: 85px;
+ display: block;
+};
</style>
</head>
<div class='main' id='main.controls'>
<table>
- <tr>
+ <tr style='whitespace:collapse'>
<td>
- <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='⇨'>
+ <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'>
</td>
- <td style='whitespace:collapse'>
+ <td>
<input type='button' id='repeat' value='∞'><input type='button' id='random' value='®'><input type='button' id='single' value='§'><input type='button' id='consume' value='©'>
</td>
</tr>
</td>
</tr>
<tr>
- <td colspan=2>
- <span id='status'>Loading...</span>
+ <td id='status'>
+ Loading...
</td>
+ <td id='currtime'></td>
</tr>
</table>
</div>
<table>
<tr>
<td>Host:</td>
- <td><input type='text' id='host' value='192.168.0.2'></td>
+ <td><input type='text' id='host'></td>
</tr>
<tr>
<td>Port:</td>
- <td><input type='number' id='port' value='6600'></td>
- </tr>
- <tr>
<td colspan=2>
+ <input type='number' id='port' style='width:60px'>
+
<input type='button' id='connect' value='connect'>
+ </td>
+ </tr>
+ <tr>
+ <td>Refresh (sec):</td>
+ <td>
+ <input type='number' id='refresh' style='width:40px'>
- Sync Settings:<input type='checkbox' id='sync' checked></td>
+ Sync Settings:<input type='checkbox' id='sync' checked>
+ </td>
</tr>
</table>
</div>
<div class='main' id='main.metadata' style='display: none'>
-<div id='metadata'></div>
+<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>
<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>