226 lines
11 KiB
Plaintext
226 lines
11 KiB
Plaintext
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="navbar-inner">
|
|
<div class="container-fluid">
|
|
<a type="button" class="btn btn-navbar" style="margin-left: 7px; margin-top: 10px;" data-toggle="collapse" data-target=".nav-collapse"> <img src="img/icons/arrow_down_16x16.png" /></a>
|
|
<div class="nav pull-right" id="mainmenu">
|
|
<a href="#playlists"><img src="img/icons/list_nested_24x21.png" />
|
|
<div class="nav-collapse menutext nobreak hidden-phone">
|
|
Playlists
|
|
</div></a>
|
|
<a href="#current"><img src="img/icons/list_24x21.png" />
|
|
<div class="nav-collapse nobreak menutext hidden-phone">
|
|
Queue
|
|
</div></a>
|
|
<a href="#search"><img src="img/icons/magnifying_glass_24x24.png" />
|
|
<div class="nav-collapse nobreak menutext hidden-phone">
|
|
Search
|
|
</div></a>
|
|
</div>
|
|
|
|
<div id="controlbt" class="nav">
|
|
<span id="back"><a href="#" onclick="return backbt();"> <img src="img/icons/arrow_left_alt1_24x24.png" /></a></span>
|
|
<span><a href="#" onclick="doPrevious(); return false"><img src="img/icons/first_16x16.png" alt="Previous Track" /></a></span>
|
|
<span id="playpause"><a href="#" onclick="doPlayPause(); return false"><img src="img/icons/pause_18x24.png" alt="Play" id="playbt" /></a></span>
|
|
<span><a href="#" onclick="doNext(); return false"><img src="img/icons/last_16x16.png" alt="Next Track" /></a></span>
|
|
<span><a href="#" onclick="showControls(); return false"><img src="img/icons/cog_24x24.png" alt="More controls" class="breakafter" /></a></span>
|
|
</div>
|
|
|
|
<div id="songinfo" class="nav nav-collapse span5" onclick="expandSonginfo();">
|
|
<div class="span5" id="infoname"></div>
|
|
<br/>
|
|
<div class="span5" id="infoartist"></div>
|
|
<br/>
|
|
</div>
|
|
|
|
</div><!-- /container -->
|
|
<div class="nav-collapse" id="slidercontainer">
|
|
<span id="songelapsed">0:00</span>
|
|
<input id="trackslider" type="range" onmousedown="pauseTimer();" onchange="doSeekPos(this.value);" class="nobreak" />
|
|
<span id="songlength" class="pull-right">0:00</span>
|
|
</div>
|
|
|
|
</div><!-- /.navbar-inner -->
|
|
</div><!-- /.navbar -->
|
|
|
|
<div class="container-fluid">
|
|
<div class="row-fluid">
|
|
|
|
<div class="span11 content" id="playlistspane">
|
|
<div class="row-fluid">
|
|
<div class="span4">
|
|
<!-- <h2>Playlists</h2> -->
|
|
<p>
|
|
<ul id="playlistslist"></ul>
|
|
</p>
|
|
<img src="img/loader.gif" id="playlistsloader" class="loader" />
|
|
</div>
|
|
<div class="span8" id="playlisttablediv">
|
|
<table id="pltable" class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<!-- <th>#</th> -->
|
|
<th>Title</th>
|
|
<th>Artist</th>
|
|
<th>Album</th>
|
|
<th>Length</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="playlisttable"></tbody>
|
|
</table>
|
|
<img src="img/loader.gif" id="playlistloader" class= "loader" />
|
|
</div>
|
|
|
|
</div><!--/row-->
|
|
</div>
|
|
|
|
<div class="span11 content" id="currentpane">
|
|
<h4>Play Queue</h4>
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<!-- <th>#</th> -->
|
|
<th>Title</th>
|
|
<th>Artist</th>
|
|
<th>Album</th>
|
|
<th>Length</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="currenttable"></tbody>
|
|
</table>
|
|
<img src="img/loader.gif" id="currentloader" class= "loader" />
|
|
</div>
|
|
|
|
<div class="span11 content" id="albumspane">
|
|
<div class="row-fluid">
|
|
<div>
|
|
<!-- <h4>Album</h4> -->
|
|
<h3 id="h_albumname"></h3>
|
|
<h5 id="h_albumartist"></h5>
|
|
<p>
|
|
<ul id="albumslist"></ul>
|
|
</p>
|
|
</div>
|
|
</div><!--/row-->
|
|
<table class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Artist</th>
|
|
<th>Album</th>
|
|
<th>Length</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="albumstable"></tbody>
|
|
</table>
|
|
<img src="img/loader.gif" id="albumsloader" class= "loader" />
|
|
</div>
|
|
|
|
<div class="span11 content" id="artistspane">
|
|
<div class="row-fluid">
|
|
<div>
|
|
<!-- <h4>Artist</h4> -->
|
|
<h3 id="h_artistname"></h3>
|
|
<p>
|
|
<ul id="artistslist"></ul>
|
|
</p>
|
|
</div>
|
|
</div><!--/row-->
|
|
<div id="artiststable"></div>
|
|
<img src="img/loader.gif" id="artistsloader" class="loader" />
|
|
</div>
|
|
|
|
<div class="content" id="searchpane">
|
|
<div class="input-append">
|
|
<input id="searchinput" class="span2" onkeypress="return searchPressed(event.keyCode);" id="appendedInputButton" type="text">
|
|
<button class="btn" type="button" onclick="return initSearch(event.value);" >
|
|
Search!
|
|
</button>
|
|
</div>
|
|
|
|
<img src="img/loader.gif" id="allresultloader" class= "loader" />
|
|
|
|
<div id="searchresults">
|
|
<div class="span5" id="searchartists">
|
|
<h4>Artists</h4>
|
|
<table class="table table-bordered table-striped">
|
|
<tbody id="artistresulttable"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="span5" id="searchalbums">
|
|
<h4>Albums</h4>
|
|
<table class="table table-bordered table-striped">
|
|
<tbody id="albumresulttable"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="span10" style="text-align: center" id="expandsearch">
|
|
<a href="#" onclick="toggleSearch(); return false;"><img src="img/icons/arrow_down_16x16.png"></a>
|
|
</div>
|
|
<div class="span11" id="searchtracks">
|
|
<h4>Tracks</h4>
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Artist</th>
|
|
<th>Album</th>
|
|
<th>Length</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="trackresulttable"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- search div -->
|
|
|
|
</div><!--/row fluid-->
|
|
</div><!--/.fluid-container-->
|
|
|
|
<div id="controlsmodal" class="modal hide" role="dialog">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">
|
|
×
|
|
</button><h5 id="modalname"></h5>
|
|
<div id="modalartist"></div>
|
|
<br/>
|
|
<div id="modalalbum"></div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<a href="#" onclick="doRandom(); return false"><img src="img/icons/loop_alt2_16x14.png" alt="" id="randombt" /></a> <a href="#" onclick="doRepeat(); return false"><img src="img/icons/reload_12x14.png" id="repeatbt" alt="" /></a>
|
|
<br/>
|
|
<br/>
|
|
<a href="#" onclick="doMute(); return false;"><img id="mutebt" src="img/icons/volume_16x12.png" alt="" /></a>
|
|
<input id="volumeslider" type="range" max="100" onchange="doVolume(this.value);" class="nobreak" />
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#" class="close" data-dismiss="modal">Close</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="offlinemodal" class="modal hide">
|
|
<div class="modal-header">
|
|
<h3>Connecting</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Trying to reach the server. Please wait...
|
|
<br/>
|
|
<br/>
|
|
<img src="img/loader.gif" class="loader" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loadingmodal" class="modal hide">
|
|
<div class="modal-header">
|
|
<h3>Loading data...</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Getting data from Spotify. This could take a while if you just started Mopidy. Please wait...
|
|
<br/>
|
|
<br/>
|
|
<img src="img/loader.gif" class="loader" />
|
|
</p>
|
|
</div>
|
|
</div> |