projects / mpd-lua.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Переделка интерфейса с использованием SVG-иконок, добавлен счетчик времени и кнопки...
[mpd-lua.git] / index.html
diff --git a/index.html b/index.html
index 5df6090a58e2920fa3b10516972aa5f48ae39942..608a4a22e71957bdc693ace894b55b1bd8cbb86f 100644 (file)
--- a/index.html
+++ b/index.html
@@ -3,37 +3,40 @@
 <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>MPD Player</title>
 <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>MPD Player</title>
-       <link rel="stylesheet" href="css/general.css" type="text/css" />
-       <script type="text/javascript" src="ajax/mpd.js"></script>
+       <link rel="stylesheet" href="mpd.css" type="text/css" />
+       <link rel="icon" type="image/svg+xml" href="images/music-player.svg" />
+       <script type="text/javascript" src="mpd.js"></script>
 </head>
 </head>
-<body onload="RefreshPageContent()">
+<body onload="SetSize(); RefreshPageContent()" onresize="SetSize()">
 
 <div id="frame">
 
 <div id="frame">
-
-<div id="playerframe">
-
+<div id="header">
 <div id="nowplaying_heading">
 <table id="heading_tbl">
 <tr>
 <td id="left">Now playing</td>
 <td id="right">
 <div id="nowplaying_heading">
 <table id="heading_tbl">
 <tr>
 <td id="left">Now playing</td>
 <td id="right">
-<span onclick="RefreshPageContent()"><img class="button" align="right" width="20" src="images/update.png"></span>
+<span onclick="RefreshPageContent()"><img class="button" align="right" width="20" src="images/replay.svg"></span>
 </td>
 </tr>
 </table>
 </div>
 
 <div id="nowplaying_content">
 </td>
 </tr>
 </table>
 </div>
 
 <div id="nowplaying_content">
+<div id="nowplaying_counters"> <span id="nowplaying_trackno">--/--</span><span id="nowplaying_tracklen">-:--/-:--</span></div>
+<div id="nowplaying_trackname">---</div>
 </div>
 
 <div id="control_buttons">
 <table>
 <tr>
 </div>
 
 <div id="control_buttons">
 <table>
 <tr>
-<td><span onclick="Command('previous')"><img class="button" src="images/previous.png"></span></td>
-<td><div id="playpausebutton"><span onclick="Command('pause')"><img class="button" src="images/pause.png"></span></div></td>
-<td><span onclick="Command('stop')"><img class="button" src="images/stop.png"></span></td>
-<td><span onclick="Command('next')"><img class="button" src="images/next.png"></span></td>
-<td><span onclick="Command('repeat')"><div id="repeatstate"><img class="button" src="images/repeaton.png"></div></span></td>
+<td><span onclick="Command('previous')"><img class="button" width="30" src="images/back.svg"></span></td>
+<td><span onclick="Command('rewind')"><img class="button" width="30" src="images/rewind.svg"></span></td>
+<td><div id="playpausebutton"><span onclick="Command('pause')"><img class="button" width="30" src="images/pause.svg"></span></div></td>
+<td><div id="stopbutton"><span onclick="Command('stop')"><img class="button" width="30" src="images/stop.svg"></span></div></td>
+<td><span onclick="Command('fastfwd')"><img class="button" width="30" src="images/fast-forward.svg"></span></td>
+<td><span onclick="Command('next')"><img class="button" width="30" src="images/next.svg"></span></td>
+<td><span onclick="Command('repeat')"><div id="repeatstate"><img class="button" width="30" src="images/replay.svg"></div></span></td>
 </tr>
 </table>
 </div>
 </tr>
 </table>
 </div>
@@ -41,45 +44,25 @@
 <div id="control_volume">
 <table>
 <tr>
 <div id="control_volume">
 <table>
 <tr>
-<td><span onclick="Command('vold')"><img class="button" src="images/minus.png"></span></td>
+<td><span onclick="Command('vold')"><img class="button" width="30" src="images/minus.svg"></span></td>
 <td id="volume_content">Volume:</td><td><div id="volume_total"></div></div></td>
 <td id="volume_content">Volume:</td><td><div id="volume_total"></div></div></td>
-<td><span onclick="Command('volu')"><img class="button" src="images/plus.png"></span></td>
+<td><span onclick="Command('volu')"><img class="button" width="30" src="images/plus.svg"></span></td>
 </tr>
 </table>
 </div>
 </tr>
 </table>
 </div>
-</div>
-
-<div id="playlist">
 
 
-<div id="playlist_menu">
-<table>
-<tr>
-<td><span class="button" onclick="EditPlayList()"><img width="20" src="images/songs.png"></span><td>
-<td><span class="button" onclick="LoadPlayList()"><img width="20" src="images/lists.png"></span><td>
-<td><span class="button" onclick="SavePlayList()"><img width="20" src="images/save.png"></span><td>
-<td><span class="button" onclick="return confirm('Clear current playlist, are you sure?') ? PlaylistCommand('clear') : false;" ><img width="20" src="images/removeall.png"></span><td>
-<td><span class="button" onclick="PlaylistItemsCommand('removeselected')"><img width="20" src="images/removeselected.png"></span><td>
-</tr>
-</table>
 </div>
 
 </div>
 
+<div id="main">
+<div id="playlist_menu_top" class="playlist_menu">
+</div>
 <div id="items">
 </div>
 <div id="items">
 </div>
-
-<div id="playlist_menu">
-<table>
-<tr>
-<td><span class="button" onclick="EditPlayList()"><img width="20" src="images/songs.png"></span><td>
-<td><span class="button" onclick="LoadPlayList()"><img width="20" src="images/lists.png"></span><td>
-<td><span class="button" onclick="SavePlayList()"><img width="20" src="images/save.png"></span><td>
-<td><span class="button" onclick="return confirm('Clear current playlist, are you sure?') ? PlaylistCommand('clear') : false;" ><img width="20" src="images/removeall.png"></span><td>
-<td><span class="button" onclick="PlaylistItemsCommand('removeselected')"><img width="20" src="images/removeselected.png"></span><td>
-</tr>
-</table>
+<div id="playlist_menu_bottom" class="playlist_menu">
 </div>
 </div>
-
+<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>
+<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>
 </div>
 
 </div>
 </div>
 
 </div>
-
 </body>
 </body>
Unnamed repository; edit this file 'description' to name the repository.