background-color: white;
}
+table#playlist td {
+ border-left: black solid 1px;
+ padding-right: 0.5em;
+}
+
/* Get the tabs to float at the bottom */
html, body {
height: 100%;
</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>