playlist: fix display, and let people delete items
[chrome-ext/music-player-client.git] / main.html
CommitLineData
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>
11table {
12 margin: 0px;
13 padding: 0px;
14 border-collapse: collapse;
15}
16body {
17 margin: 0px;
18 padding: 0px;
19}
20td {
21 white-space: nowrap;
22}
23div#status {
24 white-space: nowrap;
25}
26
27table.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}
35table.tabs td.selected {
36 background-color: white;
37}
38
9cb957ed 39/* Playlist styles */
ea38f3ed
MF
40table#playlist td {
41 border-left: black solid 1px;
42 padding-right: 0.5em;
43}
44
9cb957ed
MF
45td#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 */
52html, body {
53 height: 100%;
54}
55div#body {
56 min-height: 100%;
57}
58div.main {
59 overflow: auto;
60 padding-bottom: 1.3em;
61}
62div#footer {
63 position: relative;
64 margin-top: -1.3em;
65 height: 1.3em;
66 clear: both;
67}
9cb957ed
MF
68table#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='&#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'>
50dafc4c 84 </td>
00536f50 85 <td>
50dafc4c
MF
86 <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;'>
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'>
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'>
116 &nbsp;&nbsp;&nbsp;
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 &nbsp;&nbsp;&nbsp;
0c661219
MF
125 Sync Settings:<input type='checkbox' id='sync' checked>
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>
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>