1
0
Fork 0
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

274 lines
10 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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 src="resources/js/libs/utils.js">/**/</script>
<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 class="droppable selected"><span><i class="icon-list"></i>&nbsp;Playlist</span></li>
<li>
<span>
<i class="icon-home"></i>&nbsp;<span>Servers</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-plus-sign"></i></a>
</span>
<ul class="siderbar-server-list">
<!--li>
<span>
<i class="icon-folder-close"></i>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>
</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>&nbsp;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>&nbsp;Details...</a></li>
<li><a href="javascript:void(0);" data-target="permalink"><i class="icon-bookmark"></i>&nbsp;Direct link</a></li>
<li><a href="javascript:void(0);" data-target="download"><i class="icon-download-alt"></i>&nbsp;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="_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>&nbsp;Cancel</button>
<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-ok"></i>&nbsp;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>&nbsp;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>&nbsp;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">×</button-->
<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>&nbsp;Download</button>
<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;Close</button>
</div>
</div>
</div>
</script>
</body>
</html>