2013-11-04 17:18:38 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2013-11-09 02:02:49 +00:00
< meta name = "description" content = "ympd - fast and lightweight MPD webclient" >
< meta name = "author" content = "andy@ndyk.de" >
2013-11-04 17:18:38 +00:00
< title > ympd< / title >
<!-- Bootstrap core CSS -->
< link href = "css/bootstrap.css" rel = "stylesheet" >
<!-- Custom styles for this template -->
2013-11-04 23:17:28 +00:00
< link href = "css/slider.css" rel = "stylesheet" >
2013-11-07 09:09:40 +00:00
< link href = "css/mpd.css" rel = "stylesheet" >
2013-12-03 20:48:49 +00:00
< link href = "assets/favicon.ico" rel = "shortcut icon" type = "image/vnd.microsoft.icon" >
2013-11-04 17:18:38 +00:00
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- [if lt IE 9]>
2013-11-05 13:59:12 +00:00
< script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" > < / script >
< script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" > < / script >
<![endif]-->
< / head >
< body >
2013-11-04 17:18:38 +00:00
2013-11-05 13:59:12 +00:00
< div class = "navbar navbar-inverse navbar-fixed-top" role = "navigation" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse" >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
2013-12-03 20:48:49 +00:00
< a class = "navbar-brand" href = "/" > < span class = "glyphicon glyphicon-play-circle" > < / span > ympd< / a >
2013-11-05 13:59:12 +00:00
< / div >
< div class = "collapse navbar-collapse" >
2013-11-04 17:18:38 +00:00
2013-11-07 09:09:40 +00:00
< ul id = "nav_links" class = "nav navbar-nav" >
2013-11-07 16:40:22 +00:00
< li id = "playlist" > < a href = "#/" > Playlist< / a > < / li >
< li id = "browse" > < a href = "#/browse/" > Browse database< / a > < / li >
2013-11-09 02:02:49 +00:00
< li > < a href = "#" data-toggle = "modal" data-target = "#about" > About< / a > < / li >
2013-11-05 13:59:12 +00:00
< / ul >
< div class = "btn-toolbar navbar-btn navbar-right" role = "toolbar" >
< div class = "btn-group" >
2013-11-08 11:58:18 +00:00
< button type = "button" class = "btn btn-default" onclick = "socket.send('MPD_API_SET_NEXT');" >
< span class = "glyphicon glyphicon-backward" > < / span >
2013-11-05 13:59:12 +00:00
< / button >
2013-11-08 11:58:18 +00:00
< button type = "button" class = "btn btn-default" onclick = "socket.send('MPD_API_SET_PAUSE');" >
2013-11-05 13:59:12 +00:00
< span id = "play-icon" class = "glyphicon glyphicon-pause" > < / span >
< / button >
2013-11-08 11:58:18 +00:00
< button type = "button" class = "btn btn-default" onclick = "socket.send('MPD_API_SET_PREV');" >
2013-11-05 13:59:12 +00:00
< span class = "glyphicon glyphicon-forward" > < / span >
2013-11-04 17:18:38 +00:00
< / button >
< / div >
2013-11-05 13:59:12 +00:00
< div class = "btn-group" >
2013-11-07 09:09:40 +00:00
< div class = "btn btn-toolbar btn-default" >
2013-11-05 13:59:12 +00:00
< span id = "volume-icon" class = "glyphicon glyphicon-volume-up" > < / span >
< input type = "text" class = "span2" value = "0" data-slider-min = "0" data-slider-max = "100" data-slider-step = "5" id = "volumeslider" data-slider-tooltip = "hide" >
2013-11-07 09:09:40 +00:00
< / div >
2013-11-05 13:59:12 +00:00
< / div >
< / div >
< / div > <!-- /.nav - collapse -->
2013-11-04 17:18:38 +00:00
< / div >
2013-11-05 13:59:12 +00:00
< / div >
2013-11-04 17:18:38 +00:00
2013-11-05 13:59:12 +00:00
< div class = "container starter-template" >
< div class = "row" >
2013-11-04 17:18:38 +00:00
2013-11-13 14:30:54 +00:00
< div class = "col-md-10 col-xs-12" >
2013-11-05 13:59:12 +00:00
< div id = "alert" class = "alert hide" > < / div >
2013-11-07 09:09:40 +00:00
2013-11-05 13:59:12 +00:00
< div class = "panel panel-primary" >
2013-11-04 17:18:38 +00:00
<!-- Default panel contents -->
2013-11-07 09:09:40 +00:00
< div id = "panel-heading" class = "panel-heading" > Playlist< / div >
2013-11-05 13:59:12 +00:00
< div class = "panel-body" >
2013-11-09 02:02:49 +00:00
< h1 >
< span id = "track-icon" class = "glyphicon glyphicon-play" > < / span >
< span id = "currenttrack" > < / span >
< / h1 >
< h4 >
< span id = "album" class = "text" > < / span >
< span id = "artist" class = "text pull-right" > < / span >
< / h4 >
2013-11-07 09:09:40 +00:00
< p id = "counter" class = "text pull-right" > < / p >
2013-11-05 13:59:12 +00:00
< div class = "progress progress-striped active" >
< div id = "progressbar" class = "progress-bar navbar-left" role = "progressbar" aria-valuenow = "45" aria-valuemin = "0" aria-valuemax = "100" >
< / div >
< / div >
2013-11-09 02:02:49 +00:00
< / div > <!-- /.panel - body -->
2013-11-04 17:18:38 +00:00
2013-11-13 14:30:54 +00:00
< ol id = "breadcrump" class = "breadcrumb" >
< / ol >
2013-11-04 17:18:38 +00:00
<!-- Table -->
2013-11-07 09:09:40 +00:00
< table id = "salamisandwich" class = "table table-hover" >
2013-11-04 17:18:38 +00:00
< thead >
< tr >
< th > #< / th >
2013-11-04 23:17:28 +00:00
< th > Title< / th >
< th > Duration< / th >
2013-11-04 17:18:38 +00:00
< / tr >
< / thead >
< tbody >
< / tbody >
< / table >
2013-11-09 02:02:49 +00:00
< / div > <!-- /.panel -->
< / div > <!-- /.col - md - 10 -->
2013-11-05 13:59:12 +00:00
2013-11-13 14:30:54 +00:00
< div class = "col-md-2 col-xs-12" >
< div data-spy = "affix" data-offset-bottom = "10" >
2013-11-05 13:59:12 +00:00
< div class = "btn-group-vertical btn-block btn-group-lg" data-toggle = "buttons" >
2013-11-07 09:09:40 +00:00
< button id = "btnrandom" type = "button" class = "btn btn-default" >
2013-11-05 13:59:12 +00:00
< span class = "glyphicon glyphicon-random" > < / span > Random
< / button >
2013-11-07 09:09:40 +00:00
< button id = "btnconsume" type = "button" class = "btn btn-default" >
2013-11-05 13:59:12 +00:00
< span class = "glyphicon glyphicon-fire" > < / span > Consume
< / button >
2013-11-07 09:09:40 +00:00
< button id = "btnsingle" type = "button" class = "btn btn-default" >
2013-11-05 13:59:12 +00:00
< span class = "glyphicon glyphicon-star" > < / span > Single
< / button >
2013-11-07 09:09:40 +00:00
< button id = "btnrepeat" type = "button" class = "btn btn-default" >
2013-11-05 13:59:12 +00:00
< span class = "glyphicon glyphicon-repeat" > < / span > Repeat
< / button >
< / div >
< button type = "button" class = "btn btn-block btn-default btn-lg dropdown-toggle" data-toggle = "dropdown" >
< span class = "glyphicon glyphicon-wrench" > < / span > Options < span class = "caret" > < / span >
< / button >
< ul class = "dropdown-menu" >
2013-11-07 16:40:22 +00:00
< li > < a href = "#/" onclick = "updateDB();" > < span class = "glyphicon glyphicon-refresh" > < / span > Update Database< / a > < / li >
< li > < a href = "#/" onclick = "socket.send('MPD_API_RM_ALL');" > < span class = "glyphicon glyphicon-trash" > < / span > Clear queue< / a > < / li >
2013-11-05 13:59:12 +00:00
< / ul >
< / div >
< / div > <!-- /.col - md - 2 -->
< / div > <!-- /.row -->
< / div > <!-- /.container -->
2013-11-09 02:02:49 +00:00
<!-- Modal -->
< div class = "modal fade" id = "about" tabindex = "-1" role = "dialog" aria-labelledby = "aboutLabel" aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × < / button >
< h2 class = "modal-title" id = "aboutLabel" > About< / h2 >
< / div >
< div class = "modal-body" >
2013-12-03 20:48:49 +00:00
< h4 > < span class = "glyphicon glyphicon-play-circle" > < / span > ympd < small > MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS< / small > < / h4 >
2013-11-09 02:02:49 +00:00
< br / >
2013-12-03 20:48:49 +00:00
< span class = "glyphicon glyphicon-play-circle" > < / span > 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.
< h5 > < span class = "glyphicon glyphicon-play-circle" > < / span > ympd uses following excellent software:< / h5 >
2013-11-09 02:02:49 +00:00
< h6 > < a href = "http://libwebsockets.org" > libWebSockets< / a > < small > LGPL2.1 + static link exception< / small > < / h6 >
< h6 > < a href = "http://www.musicpd.org/libs/libmpdclient/" > libMPDClient< / a > < small > BSD License< / small > < / h6 >
< br / >
< h5 > ympd was developed by:< / h5 >
< blockquote >
< address >
< strong > Andrew Karpow< / strong > < br >
2013-12-03 20:48:49 +00:00
< a href = "mailto:andy@ympd.org" > andy@ympd.org< / a > < br / >
< a href = "http://www.ympd.org" > www.ympd.org< / a > < br / >
XMPP: < a href = "xmpp:andy@jabber.ccc.de?subscribe" > andy_@jabber.ccc.de< / a >
2013-11-09 02:02:49 +00:00
< / address >
< / blockquote >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-default" data-dismiss = "modal" > Close< / button >
< / div >
< / div > <!-- /.modal - content -->
< / div > <!-- /.modal - dialog -->
< / div > <!-- /.modal -->
2013-11-05 13:59:12 +00:00
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
< script src = "js/jquery-1.10.2.min.js" > < / script >
< script src = "js/bootstrap.min.js" > < / script >
< script src = "js/bootstrap-slider.js" > < / script >
2013-11-07 12:47:31 +00:00
< script src = "js/sammy.js" > < / script >
2013-11-05 13:59:12 +00:00
< script src = "js/mpd.js" > < / script >
< / body >
< / html >
