<!DOCTYPE html>
< html >
< head >
< title > DAAPr< / title >
< meta charset = "utf-8" >
< meta http-equiv = "Content-type" content = "text/html; charset=utf-8" >
<!-- meta href="/" -->
< style type = "text/css" >
@import "/resources/css/normalize.css";
@import "/resources/vendors/bootstrap/2.1.1/css/bootstrap.min.css";
@import "/resources/css/datatables.css";
@import "/resources/css/app.css";
@import "/resources/css/player.css";
< / style >
< script data-main = "resources/js/main" src = "resources/vendors/require/require.min.js" > /**/ < / script >
< / head >
< body >
< div class = "ui-layout-north" id = "wrapperPlayer" >
< div class = "daaprControlsWrap" >
< a id = "buttonPrev" class = "disabled" > < / a >
< a id = "buttonPlay" class = "disabled" > < / a >
< a id = "buttonNext" class = "disabled" > < / a >
< div id = "volumeWrapper" >
< a id = "buttonVolDown" class = "disabled" > < / a >
< input type = "range" id = "buttonVolume" minx = "0" max = "1" step = "0.05" value = "0" disabled / >
< a id = "buttonVolUp" class = "disabled" > < / a >
< / div >
< div class = "clearfix" > < / div >
< / div >
< form action = "#" class = "form-search controls" id = "wrapperSearchWidget" >
< div class = "input-prepend" >
< button type = "submit" tabindex = "-1" class = "btn" > < i class = "icon-search" > < / i > < / button >
< input type = "text" tabindex = "1" class = "span3 search-query" >
< / div >
< / form >
< div id = "daaprPlayerViewport" >
< h1 > DAAPr< sup > 3< / sup > < / h1 >
< / div >
< / div >
< div class = "ui-layout-west" >
< div id = "wrapperSideBar" >
< ul >
< li >
< span >
< i class = "icon-home" > < / i > < span > Servers< / span >
< a href = "javascript:void(0);" class = "sidebar-list-action" > < i class = "icon-plus-sign" > < / i > < / a >
< / span >
< ul >
< li >
< span >
< i class = "icon-folder-close" > < / i > < span > Bigthug< / span >
< a href = "javascript:void(0);" class = "sidebar-list-action" > < i class = "icon-minus-sign" > < / i > < / a >
< / span >
< / li >
< li >
< span >
< i class = "icon-folder-close" > < / i > < span > WebDevTest< / span >
< a href = "javascript:void(0);" class = "sidebar-list-action" > < i class = "icon-minus-sign" > < / i > < / a >
< / span >
< / li >
< li >
< span >
< i class = "icon-folder-close" > < / i > < span > ReallyLongNameWithNoBreaks< / span >
< a href = "javascript:void(0);" class = "sidebar-list-action" > < i class = "icon-minus-sign" > < / i > < / a >
< / span >
< / li >
< li >
< span >
< i class = "icon-folder-close" > < / i > < span > Really Long Name Breaks< / span >
< a href = "javascript:void(0);" class = "sidebar-list-action" > < i class = "icon-minus-sign" > < / i > < / a >
< / span >
< / li >
< / ul >
< / li >
< li class = "droppable" > < span > < i class = "icon-list" > < / i > Playlist< / span > < / li >
< / ul >
< / div >
< / div >
< div class = "ui-layout-center" class = "loading" >
< div class = "ui-layout-north row-fluid span12" id = "wrapperBrowser" >
< div class = "third" >
< table cellpadding = "0" cellspacing = "0" border = "0" class = "display" id = "tableGenres" > < / table >
< / div >
< div class = "third" >
< table cellpadding = "0" cellspacing = "0" border = "0" class = "display" id = "tableArtists" > < / table >
< / div >
< div class = "third" >
< table cellpadding = "0" cellspacing = "0" border = "0" class = "display" id = "tableAlbums" > < / table >
< / div >
< / div >
< div class = "ui-layout-center" id = "wrapperList" >
< table cellpadding = "0" cellspacing = "0" border = "0" class = "display" id = "tableList" > < / table >
< / div >
< / div >
< div class = "ui-layout-south row-fluid" id = "wrapperFooter" >
< div id = "wrapperFooterLeft" class = "span4" >
< button class = "btn btn-mini btn-inverse" type = "button" data-toggle = "side-bar" > < i class = "icon-chevron-left icon-white" > < / i > < / button >
< button class = "btn btn-mini btn-inverse" type = "button" data-toggle = "button" > < i class = "icon-random icon-white" > < / i > < / button >
< button class = "btn btn-mini btn-inverse" type = "button" data-toggle = "button" > < i class = "icon-retweet icon-white" > < / i > < / button >
< / div >
< div id = "wrapperFooterCenter" class = "span4" >
< span class = "list-count" > 0< / span > items
< / div >
< div id = "wrapperFooterRight" class = "span4" >
<!-- <div class="btn - group">
< button class = "btn btn-inverse btn-mini" > < i class = "icon-download-alt icon-white" > < / i > Download< / button >
< button class = "btn btn-inverse btn-mini dropdown-toggle" data-toggle = "dropdown" >
< span class = "caret" > < / span >
< / button >
< ul class = "dropdown-menu pull-up" role = "menu" aria-labelledby = "dLabel" >
< li > < a tabindex = "-1" href = "#" > Action< / a > < / li >
< li > < a tabindex = "-1" href = "#" > Another action< / a > < / li >
< li > < a tabindex = "-1" href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a tabindex = "-1" href = "#" > Separated link< / a > < / li >
< / ul >
< / div > -->
< button class = "btn btn-mini btn btn-inverse" type = "button" data-target = "modalAboutDaapr" > < i class = "icon-question-sign icon-white" > < / i > < / button >
< / div >
< / div >
< ul id = "listItemContextMenu" class = "context-menu dropdown-menu" >
< li > < a href = "javascript:void(0);" data-target = "listItemDetails" > < i class = "icon-info-sign" > < / i > Details...< / a > < / li >
< li > < a href = "javascript:void(0);" data-target = "permalink" > < i class = "icon-bookmark" > < / i > Direct link< / a > < / li >
< li > < a href = "javascript:void(0);" data-target = "download" > < i class = "icon-download-alt" > < / i > Download< / a > < / li >
< / ul >
< ul id = "listColumnsContextMenu" class = "context-menu dropdown-menu" >
< li > < a href = "javascript:void(0);" > Title< / a > < / li >
< li > < a href = "javascript:void(0);" > Artist< / a > < / li >
< li > < a href = "javascript:void(0);" > Album< / a > < / li >
< li > < a href = "javascript:void(0);" > Track< / a > < / li >
< li > < a href = "javascript:void(0);" > Disc< / a > < / li >
< li > < a href = "javascript:void(0);" > Year< / a > < / li >
< li > < a href = "javascript:void(0);" > Time< / a > < / li >
< li > < a href = "javascript:void(0);" > Genre< / a > < / li >
< / ul >
< script type = "text/html" id = "_tmplModalNewServer" >
< div id = "listItemDetails" data-closable = "true" >
< div class = "overlay" > < / div >
< div class = "modal" style = "width: auto;margin-left: auto;margin-right: auto;" data-show = "true" tabindex = "-1" role = "dialog" aria-labelledby = "listItemDetailsLabel" aria-hidden = "true" >
< div class = "modal-body" style = "padding: 10px 10px 0 10px;" >
< form >
< fieldset >
< legend > Add Server< / legend >
< label > Address< / label >
< input type = "text" placeholder = "daap://domain.tld" >
< / fieldset >
< / form >
< / div >
< div class = "modal-footer" >
< button class = "btn btn-mini" data-dismiss = "modal" aria-hidden = "true" > < i class = "icon-remove" > < / i > Cancel< / button >
< button class = "btn btn-mini btn-primary" data-dismiss = "modal" aria-hidden = "true" > < i class = "icon-ok" > < / i > Add & Connect< / button >
< / div >
< / div >
< / div >
< / script >
< script type = "text/html" id = "_tmplModalServerLogin" >
< div id = "modalServerLogin" >
< div class = "overlay" > < / div >
< div class = "modal" data-show = "true" tabindex = "-1" role = "dialog" aria-hidden = "true" >
< div class = "modal-body" style = "font-size: 1.2em" >
< form >
< fieldset >
< legend > {{dmap_itemname}} login< / legend >
< p >
< input type = "text" class = "input-large" placeholder = "Login" >
< / p >
< p >
< input type = "password" class = "input-large" placeholder = "Password" >
< / p >
<!-- label class="checkbox">
< input type = "checkbox" > Remember me
< / label-- >
< / fieldset >
< / form >
< / div >
< div class = "modal-footer" >
< button class = "btn btn-mini" data-dismiss = "modal" aria-hidden = "true" > < i class = "icon-remove" > < / i > Cancel< / button >
< button class = "btn btn-mini btn-primary" data-dismiss = "modal" aria-hidden = "true" > < i class = "icon-ok" > < / i > Login< / button >
< / div >
< / div >
< / div >
< / script >
< script type = "text/html" id = "_tmplModalServerLoading" >
< div id = "modalServerLoading" >
< div class = "overlay" > < / div >
< div class = "modal" >
< / div >
< / div >
< / script >
<!-- Underscore Templates -->
< script type = "text/html" id = "_tmplPlayerView" >
< div class = "daaprPlayerTitleIndicator" > {{dmap_itemname}}< / div >
< div class = "daaprPlayerInfoIndicator" > {{daap_songartist}}< / div >
< div class = "daaprProgressWrap" >
< span id = "daaprProgressTimeElapsed" > 0:00< / span >
< progress min = "0" max = "1" value = "0" id = "daaprPlayerProgress" > < / progress >
< span id = "daaprProgressTimeRemain" > -0:00< / span >
< / div >
< / script >
< script type = "text/html" id = "_tmplModalAboutDaapr" >
< div id = "modalAboutDaapr" data-closable = "true" >
< div class = "overlay" > < / div >
< div class = "modal" data-show = "true" tabindex = "-1" role = "dialog" aria-hidden = "true" >
< div class = "modal-header" >
< h3 id = "myModalLabel" > About DAAPr< sup > 3< / sup > < / h3 >
< / div >
< div class = "modal-body" style = "font-size: 1.2em" >
< p >
< b > DAAPr< / b > , in its cubic iteration, is a web client for the
< a href = "http://en.wikipedia.org/wiki/Digital_Audio_Access_Protocol" title = "Digital Audio Access Protocol" > DAAP< / a > media sharing protocol.
It is 100% client side javascript built using < a href = "http://backbonejs.org" title = "Backbone.js" > Backbone.js< / a > ,
< a href = "http://jquery.com" > jQuery< / a > and < a href = "http://twitter.github.com/bootstrap/" title = "Twitter Bootstrap" > Bootstrap< / a > .
< / p >
< p >
< a href = "https://matth.lalonde.me/contact/" > Feedback< / a > is appreciated.
< / p >
< p >
This software is < a href = "http://en.wikipedia.org/wiki/Copyleft" > Copyleft< / a > 2012 < a href = "https://matth.lalonde.me" > Matthieu Lalonde< / a > under < a href = "http://www.gnu.org/copyleft/lesser.html" > LGPL< / a > , no guarantees whatsoever.
< / p >
< / div >
< div class = "modal-footer" >
< button class = "btn btn-mini btn-primary" data-dismiss = "modal" aria-hidden = "true" > < i class = "icon-remove" > < / i > Close< / button >
< / div >
< / div >
< / div >
< / script >
< script type = "text/html" id = "_tmplModalFatal" >
< div id = "modalFatal" >
< div class = "overlay" > < / div >
< div class = "modal" data-show = "true" tabindex = "-1" role = "dialog" aria-hidden = "true" >
< div class = "modal-header alert alert-error" >
< h3 id = "myModalLabel" > A fatal error has occured< / h3 >
< / div >
< div class = "modal-body" style = "font-size: 1.2em" >
< / div >
< div class = "modal-footer" >
< button class = "btn btn-mini btn-primary" data-dismiss = "modal" aria-hidden = "true" > < i class = "icon-refresh" > < / i > Reload< / button >
< / div >
< / div >
< / div >
< / script >
< script type = "text/html" id = "_tmplListItemDetails" >
< div id = "listItemDetails" data-closable = "true" >
< div class = "overlay" > < / div >
< div class = "modal hide fade" data-show = "true" tabindex = "-1" role = "dialog" aria-labelledby = "listItemDetailsLabel" aria-hidden = "true" >
< div class = "modal-header" >
<!-- button type="button" class="close" data - dismiss="modal" aria - hidden="true">× -->
< h4 id = "myModalLabel" > Song Details< / h4 >
< / div >
< div class = "modal-body" >
< table class = "table table-striped table-hover table-condensed" >
< %
_.each(items, function(item) {
print("< tr > \n");
print(" < td > \n");
print(" " + item.title + ":\n");
print(" < / td > \n");
print(" < td > \n");
print(" " + item.data + "\n");
print(" < / td > \n");
print("< / tr > \n");
});
%>
< / table >
< / div >
< div class = "modal-footer" >
< button class = "btn btn-mini" data-target = "download" aria-hidden = "true" data-loading-text = "Downloading..." > < i class = "icon-download-alt" > < / i > Download< / button >
< button class = "btn btn-mini btn-primary" data-dismiss = "modal" aria-hidden = "true" > < i class = "icon-remove" > < / i > Close< / button >
< / div >
< / div >
< / div >
< / script >
< / body >
< / html >
