1010 < title > ympd</ title >
1111
1212 <!-- Bootstrap core CSS -->
13- < link href ="css/bootstrap.css " rel ="stylesheet ">
13+ < link href ="css/bootstrap.min.css " rel ="stylesheet ">
14+ < link href ="css/bootstrap-theme.min.css " rel ="stylesheet ">
1415
1516 <!-- Custom styles for this template -->
16- < link href ="css/mpd.css " rel ="stylesheet ">
17+ < link href ="css/mpd.min. css " rel ="stylesheet ">
1718 < link href ="assets/favicon.ico " rel ="shortcut icon " type ="image/vnd.microsoft.icon ">
1819
1920 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
3738 < div class ="collapse navbar-collapse ">
3839
3940 < ul id ="nav_links " class ="nav navbar-nav ">
40- < li id ="playlist "> < a href ="#/ "> Playlist</ a > </ li >
41- < li id ="browse "> < a href ="#/browse/ "> Browse database</ a > </ li >
42- < li > < a href ="# " data-toggle ="modal " data-target ="#about " onclick ="getVersion(); "> About</ a > </ li >
41+ < li id ="queue "> < a href ="#/ "> Queue</ a > </ li >
42+ < li id ="browse "> < a href ="#/browse/0/ "> Browse database</ a > </ li >
4343 < li > < a href ="# " data-toggle ="modal " data-target ="#settings " onclick ="getHost(); "> Settings</ a > </ li >
4444 </ ul >
4545
6565 </ div >
6666 </ div >
6767 </ div >
68+ < form id ="search " class ="navbar-form navbar-right " role ="search ">
69+ < div class ="form-group ">
70+ < input type ="text " class ="form-control " placeholder ="Search ">
71+ </ div >
72+ </ form >
6873 </ div > <!--/.nav-collapse -->
6974 </ div >
7075 </ div >
7782
7883 < div class ="panel panel-primary ">
7984 <!-- Default panel contents -->
80- < div id ="panel-heading " class ="panel-heading "> Playlist </ div >
85+ < div class ="panel-heading "> < b id ="panel-heading "> Queue </ b > </ div >
8186 < div class ="panel-body ">
8287 < h1 >
8388 < span id ="track-icon " class ="glyphicon glyphicon-play "> </ span >
@@ -111,6 +116,10 @@ <h4>
111116 </ tbody >
112117 </ table >
113118 </ div > <!-- /.panel -->
119+ < ul class ="pager ">
120+ < li id ="prev " class ="page-btn hide "> < a href =""> Previous</ a > </ li >
121+ < li id ="next " class ="page-btn "> < a href =""> Next</ a > </ li >
122+ </ ul >
114123 </ div > <!-- /.col-md-10 -->
115124
116125 < div class ="col-md-2 col-xs-12 " >
@@ -150,42 +159,21 @@ <h4>
150159 </ div > <!-- /.container -->
151160
152161 <!-- Modal -->
153- < div class ="modal fade " id ="about " tabindex ="-1 " role ="dialog " aria-labelledby ="aboutLabel " aria-hidden ="true ">
162+ < div class ="modal fade " id ="settings " tabindex ="-1 " role ="dialog " aria-labelledby ="settingsLabel " aria-hidden ="true ">
154163 < div class ="modal-dialog ">
155164 < div class ="modal-content ">
156165 < div class ="modal-header ">
157166 < button type ="button " class ="close " data-dismiss ="modal " aria-hidden ="true "> ×</ button >
158- < h2 class ="modal-title " id ="aboutLabel " > About </ h2 >
167+ < h2 class ="modal-title " id ="settingsLabel " > < span class =" glyphicon glyphicon-wrench " > </ span > Settings </ h2 >
159168 </ div >
160169 < div class ="modal-body ">
161170 < h4 > < a href ="http://www.ympd.org "> < span class ="glyphicon glyphicon-play-circle "> </ span > ympd</ a > < small > MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</ small > </ h4 >
162171 < p >
163172 ympd is a lightweight MPD (Music Player Daemon) web client that runs without a dedicated werbserver or interpreters like PHP, NodeJS or Ruby. It's tuned for minimal resource usage and requires only very litte dependencies.</ p >
164- < p class ="text-muted ">
165- ympd < span id ="ympd_version "> </ span > < br />
166- libmpdclient < span id ="mpd_version "> </ span > < br />
167- </ p >
168173 < h5 > ympd uses following excellent software:</ h5 >
169- < h6 > < a href ="http://libwebsockets.org " > libWebSockets </ a > < small > LGPL2.1 + static link exception </ small > </ h6 >
174+ < h6 > < a href ="http://cesanta.com/docs.html " > Mongoose </ a > < small > GPLv2 </ small > </ h6 >
170175 < h6 > < a href ="http://www.musicpd.org/libs/libmpdclient/ "> libMPDClient</ a > < small > BSD License</ small > </ h6 >
171- < br />
172- </ div >
173- < div class ="modal-footer ">
174- < button type ="button " class ="btn btn-default " data-dismiss ="modal "> Close</ button >
175- </ div >
176- </ div > <!-- /.modal-content -->
177- </ div > <!-- /.modal-dialog -->
178- </ div > <!-- /.modal -->
179-
180- <!-- Modal -->
181- < div class ="modal fade " id ="settings " tabindex ="-1 " role ="dialog " aria-labelledby ="settingsLabel " aria-hidden ="true ">
182- < div class ="modal-dialog ">
183- < div class ="modal-content ">
184- < div class ="modal-header ">
185- < button type ="button " class ="close " data-dismiss ="modal " aria-hidden ="true "> ×</ button >
186- < h2 class ="modal-title " id ="settingsLabel "> < span class ="glyphicon glyphicon-wrench "> </ span > Settings</ h2 >
187- </ div >
188- < div class ="modal-body ">
176+ < hr />
189177 < form role ="form ">
190178 < div class ="row ">
191179 < div class ="form-group col-md-9 ">
@@ -197,16 +185,51 @@ <h2 class="modal-title" id="settingsLabel"><span class="glyphicon glyphicon-wren
197185 < input type ="text " class ="form-control " id ="mpdport " />
198186 </ div >
199187 </ div >
188+ < div class ="row ">
189+ < div class ="form-group col-md-6 ">
190+ < label class ="control-label " for ="mpd_pw "> MPD Password</ label >
191+ < input type ="password " class ="form-control " id ="mpd_pw " placeholder ="Password "/>
192+ </ div >
193+ < div class ="form-group col-md-6 ">
194+ < label class ="control-label " for ="mpd_pw_con "> MPD Password (Confirmation)</ label >
195+ < input type ="password " class ="form-control " id ="mpd_pw_con " placeholder ="Password confirmation "
196+ data-placement ="right " data-toggle ="popover " data-content ="Password does not match! "
197+ data-trigger ="manual " />
198+ </ div >
199+ < div class ="form-group col-md-12 ">
200+ < div id ="mpd_password_set " class ="hide alert alert-info ">
201+ < button type ="button " class ="close " aria-hidden ="true "> ×</ button >
202+ MPD Password is set
203+ </ div >
204+ </ div >
205+
206+ </ div >
200207 </ form >
201208 </ div >
202209 < div class ="modal-footer ">
203210 < button type ="button " class ="btn btn-default " data-dismiss ="modal "> Cancel</ button >
204- < button type ="button " class ="btn btn-default " data-dismiss =" modal " onclick ="setHost (); "> Save</ button >
211+ < button type ="button " class ="btn btn-default " onclick ="confirmSettings (); "> Save</ button >
205212 </ div >
206213 </ div > <!-- /.modal-content -->
207214 </ div > <!-- /.modal-dialog -->
208215 </ div > <!-- /.modal -->
209216
217+ < div class ="modal fade bs-example-modal-sm " id ="wait " tabindex ="-1 " role ="dialog " data-backdrop ="static " data-keyboard ="false " aria-hidden ="true ">
218+ < div class ="modal-dialog ">
219+ < div class ="modal-content ">
220+ < div class ="modal-header ">
221+ < h1 > Searching...</ h1 >
222+ </ div >
223+ < div class ="modal-body ">
224+ < div class ="progress progress-striped active ">
225+ < div class ="progress-bar " role ="progressbar " aria-valuenow ="45 " aria-valuemin ="0 " aria-valuemax ="100 " style ="width: 100% ">
226+ < span class ="sr-only "> Please Wait</ span >
227+ </ div >
228+ </ div >
229+ </ div >
230+ </ div >
231+ </ div >
232+ </ div >
210233
211234
212235 <!-- Bootstrap core JavaScript
0 commit comments