Переделка интерфейса с использованием SVG-иконок, добавлен счетчик времени и кнопки...
[mpd-lua.git] / index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
3 <head>
4         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5         <title>MPD Player</title>
6         <link rel="stylesheet" href="mpd.css" type="text/css" />
7         <link rel="icon" type="image/svg+xml" href="images/music-player.svg" />
8         <script type="text/javascript" src="mpd.js"></script>
9 </head>
10 <body onload="SetSize(); RefreshPageContent()" onresize="SetSize()">
11
12 <div id="frame">
13 <div id="header">
14 <div id="nowplaying_heading">
15 <table id="heading_tbl">
16 <tr>
17 <td id="left">Now playing</td>
18 <td id="right">
19 <span onclick="RefreshPageContent()"><img class="button" align="right" width="20" src="images/replay.svg"></span>
20 </td>
21 </tr>
22 </table>
23 </div>
24
25 <div id="nowplaying_content">
26 <div id="nowplaying_counters"> <span id="nowplaying_trackno">--/--</span><span id="nowplaying_tracklen">-:--/-:--</span></div>
27 <div id="nowplaying_trackname">---</div>
28 </div>
29
30 <div id="control_buttons">
31 <table>
32 <tr>
33 <td><span onclick="Command('previous')"><img class="button" width="30" src="images/back.svg"></span></td>
34 <td><span onclick="Command('rewind')"><img class="button" width="30" src="images/rewind.svg"></span></td>
35 <td><div id="playpausebutton"><span onclick="Command('pause')"><img class="button" width="30" src="images/pause.svg"></span></div></td>
36 <td><div id="stopbutton"><span onclick="Command('stop')"><img class="button" width="30" src="images/stop.svg"></span></div></td>
37 <td><span onclick="Command('fastfwd')"><img class="button" width="30" src="images/fast-forward.svg"></span></td>
38 <td><span onclick="Command('next')"><img class="button" width="30" src="images/next.svg"></span></td>
39 <td><span onclick="Command('repeat')"><div id="repeatstate"><img class="button" width="30" src="images/replay.svg"></div></span></td>
40 </tr>
41 </table>
42 </div>
43
44 <div id="control_volume">
45 <table>
46 <tr>
47 <td><span onclick="Command('vold')"><img class="button" width="30" src="images/minus.svg"></span></td>
48 <td id="volume_content">Volume:</td><td><div id="volume_total"></div></div></td>
49 <td><span onclick="Command('volu')"><img class="button" width="30" src="images/plus.svg"></span></td>
50 </tr>
51 </table>
52 </div>
53
54 </div>
55
56 <div id="main">
57 <div id="playlist_menu_top" class="playlist_menu">
58 </div>
59 <div id="items">
60 </div>
61 <div id="playlist_menu_bottom" class="playlist_menu">
62 </div>
63 <div id="credits">Code (C) <a href="https://rvb-glas.livejournal.com/">Roman Bazalevsky</a>, 2017 licensed by <a href="http://www.wtfpl.net/">WTFPL</a></div>
64 <div id="credits">Icons made by <a href="https://www.flaticon.com/authors/chanut-is-industries" title="Chanut is Industries">Chanut is Industries</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
65 </div>
66
67 </div>
68 </body>