controls: add shortcut keys for a bunch of items
[chrome-ext/music-player-client.git] / main.html
... / ...
CommitLineData
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
39table#playlist td {
40 border-left: black solid 1px;
41 padding-right: 0.5em;
42}
43
44/* Get the tabs to float at the bottom */
45html, body {
46 height: 100%;
47}
48div#body {
49 min-height: 100%;
50}
51div.main {
52 overflow: auto;
53 padding-bottom: 1.3em;
54}
55div#footer {
56 position: relative;
57 margin-top: -1.3em;
58 height: 1.3em;
59 clear: both;
60}
61</style>
62</head>
63
64<body>
65
66<div id='body'>
67
68<div class='main' id='main.controls'>
69<table>
70 <tr style='whitespace:collapse'>
71 <td>
72 <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'>
73 </td>
74 <td>
75 <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;'>
76 </td>
77 </tr>
78 <tr>
79 <td>
80 <input type='range' id='setvol' min='0' max='100' value='0'>
81 </td>
82 <td>
83 <input type='range' id='seekcur' min='0' max='100' value='0'>
84 </td>
85 </tr>
86 <tr>
87 <td id='status'>
88 Loading...
89 </td>
90 <td id='currtime'></td>
91 </tr>
92</table>
93</div>
94
95<div class='main' id='main.options' style='display: none'>
96<table>
97 <tr>
98 <td>Host:</td>
99 <td><input type='text' id='host'></td>
100 </tr>
101 <tr>
102 <td>Port:</td>
103 <td colspan=2>
104 <input type='number' id='port' style='width:60px'>
105 &nbsp;&nbsp;&nbsp;
106 <input type='button' id='connect' value='connect'>
107 </td>
108 </tr>
109 <tr>
110 <td>Refresh (sec):</td>
111 <td>
112 <input type='number' id='refresh' style='width:40px'>
113 &nbsp;&nbsp;&nbsp;
114 Sync Settings:<input type='checkbox' id='sync' checked>
115 </td>
116 </tr>
117</table>
118</div>
119
120<div class='main' id='main.metadata' style='display: none'>
121<span id='metadata.artist'></span> -
122<span id='metadata.album'></span> -
123<span id='metadata.title'></span><br>
124<span id='metadata.date'></span><br><br>
125<span id='metadata.file'></span>
126</div>
127
128<div class='main' id='main.playlist' style='display: none'>
129<table id='playlist'></table>
130</div>
131
132</div>
133
134<div id='footer'>
135<table class='tabs'>
136 <tr>
137 <td id='tab.controls' class='selected'>Controls</td>
138 <td id='tab.metadata'>Metadata</td>
139 <td id='tab.playlist'>Playlist</td>
140 <td id='tab.options'>Options</td>
141 </tr>
142</table>
143</div>
144
145</body>
146</html>