Files
cantata/web/webapp/index.html
Craig Drummond 605af484f7 Initial import of *VERY* incomplete, and not fully functional Cantata
webapp. Mainly used to test SQLite backend for storing MPD db.
2015-06-01 22:57:49 +01:00

72 lines
5.6 KiB
HTML

<!doctype html>
<html lang="en" ng-app="cantata">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Cantata</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/app.css"/>
<!-- <link rel="stylesheet" href="css/dark.css"/> -->
<link rel="stylesheet" href="css/light.css"/>
<link rel="shortcut icon" sizes="196x196" href="misc/icon-196x196.png">
</head>
<body>
<div class="nav" ng-controller="NavbarController" watch-resize>
<a class="btn btn-selector btn-nav" href="#/library" ng-class="{'btn-nav-selected': page==='/library'}"><i class="fa fa-music fa-fw"></i><object ng-if="width>500">Library</object></a>
<a class="btn btn-selector btn-nav" href="#/playlists" ng-class="{'btn-nav-selected': page==='/playlists'}"><i class="fa fa-th-list fa-fw"></i><object ng-if="width>500">Playlists</object></a>
<a class="btn btn-selector btn-nav" href="#/streams" ng-class="{'btn-nav-selected': page==='/streams'}"><i class="fa fa-wifi fa-fw"></i><object ng-if="width>500">Streams</object></a>
<a class="btn btn-selector btn-nav" href="#/playqueue" ng-class="{'btn-nav-selected': page==='/playqueue'}"><i class="fa fa-play fa-fw"></i><object ng-if="width>500">Queue</object></a>
<a data-toggle="dropdown" class="dropdown-toggle btn btn-nav btn-menu"><i class="fa fa-bars fa-fw"></i></a>
<ul class="dropdown-menu pull-right">
<li ng-if="page==='/streams'"><a class="menuitem" ng-click="addStream()">Add New Stream</a></li>
<li ng-if="page==='/streams'"><a class="menuitem" ng-click="searchForStreams()">Search For Streams</a></li>
<li ng-if="page==='/playqueue'"><a class="menuitem" ng-click="playQueueRepeat()"><i class="fa fa-fw" ng-class="pqRepeat ? 'fa-check-square-o' : 'fa-square-o'"></i> Repeat</a></li>
<li ng-if="page==='/playqueue'"><a class="menuitem" ng-click="playQueueSingle()"><i class="fa fa-fw" ng-class="pqSingle ? 'fa-check-square-o' : 'fa-square-o'"></i> Single</a></li>
<li ng-if="page==='/playqueue'"><a class="menuitem" ng-click="playQueueRandom()"><i class="fa fa-fw" ng-class="pqRandom ? 'fa-check-square-o' : 'fa-square-o'"></i> Random</a></li>
<li ng-if="page==='/playqueue'"><a class="menuitem" ng-click="playQueueConsume()"><i class="fa fa-fw" ng-class="pqConsume ? 'fa-check-square-o' : 'fa-square-o'"></i> Consume</a></li>
<li ng-if="page==='/playqueue'" class="divider"></li>
<li ng-if="page==='/playqueue'"><a class="menuitem" ng-click="playQueueClear()">Clear</a></li>
<li ng-if="page==='/playqueue'"><a class="menuitem" ng-click="playQueueSave()">Save</a></li>
<li ng-if="page==='/playqueue' || page==='/streams'" class="divider"></li>
<li><a class="menuitem" ng-click="configure()">Settings</a></li>
</ul>
</div>
<div ng-view style="clear:both"></div>
<div class="miniplayer" ng-controller="MiniPlayerController" watch-resize>
<div class="miniplayercontrols">
<i class="fa fa-step-backward fa-fw miniplayer-btn" ng-click="prevTrack()" ng-disabled="{{undefined===pqLength || pqLength<2}}" ng-class="{'disabled': undefined===pqLength || pqLength<2}"></i>
<i class="fa fa-play fa-fw miniplayer-btn miniplayer-btn-play" ng-click="play()" ng-if="state!=='playing'" ng-disabled="{{undefined===pqLength || pqLength<1}}" ng-class="{'disabled': undefined===pqLength || pqLength<1}"></i>
<i class="fa fa-play fa-fw miniplayer-btn miniplayer-btn-pause" ng-click="pause()" ng-if="state==='playing'" ng-disabled="{{undefined===pqLength || pqLength<1}}" ng-class="{'disabled': undefined===pqLength || pqLength<1}"></i>
<i class="fa fa-step-forward fa-fw miniplayer-btn" ng-click="nextTrack()" ng-disabled="{{undefined===pqLength || pqLength<2}}" ng-class="{'disabled': undefined===pqLength || pqLength<2}"></i>
</div>
<img ng-if="width>500" src="misc/album.png"/>
<div class="miniplayer-np">
<div class="miniplayertext ellide">{{currentSongTitle}}</div>
<div class="miniplayersubtext ellide">{{currentSongArtist}}</div>
<div class="progress-bar songprogress" role="progressbar" style="width:70%"></div>
</div>
</div>
<script src="lib/jquery/jquery-2.0.3.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootbox/bootbox.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-resource.min.js"></script>
<script src="lib/angular/angular-sanitize.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="lib/angular-locker/angular-locker.min.js"></script>
<script src="lib/ng-websocket/ng-websocket.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/me-lazyload.js"></script>
</body>
</html>