<?php
require 'header.php';
$queues = Queue::getList();
//$autoqueues = Queue::getList(AUTOQUEUES);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="128x128" href="img/ic_MobileHA.png" />
<link rel="icon" sizes="196x196" href="img/ic_MobileHA_hires.png" />
<link rel="apple-touch-icon" sizes="76x76" href="img/ic_MobileHA_ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="img/ic_MobileHA_iphone.png" />
<link rel="apple-touch-icon" sizes="152x152" href="img/ic_MobileHA_ipad-retina.png" />
<link rel="manifest" href="/manifest.json" />
<link rel='stylesheet' href='core/jquery-ui-1.13.3/jquery-ui.min.css' />
<link rel='stylesheet' href='css/minimal.css' media='screen' />
<link rel='stylesheet' href='css/tf201.css' media='screen and (width: 800px) and (orientation: portrait)' />
<link rel='stylesheet' href='css/tf201.css' media='screen and (width: 768px) and (orientation: portrait)' />
<link rel='stylesheet' href='css/mobile640.css' media='screen and (device-aspect-ratio: 40/71) and (orientation: portrait)' />
<link rel='stylesheet' href='css/desktop.css' media='screen and (min-width: 1300px) and (orientation: landscape)' />
<title>Mobile Home Audio</title>
</head>
<body>
<div id='mainbody' class='mainbody'>
<div id='tabs'>
<ul>
<li><a href='#playing'>Playing</a></li>
<li><a href='#control'>Control</a></li>
<li><a href='#history'>History</a></li>
<li><a id='queuetab' href='#jukebox'>Jukebox</a></li>
<li><a href='#search'>Search</a></li>
<li><a href='#lists'>Lists</a></li>
</ul>
<div id='playing'>
<div id='playing_contents' class='playing_contents'>
<div class='playing_art'><img id='playing_img' class='playing_img' src='img/no_art.jpg' /></div>
<div class='playing_details'>
<p class='nomargin'><span class='playing_label'>Title: </span><span id='playing_title'></span></p>
<p class='nomargin'><span class='playing_label'>Artist: </span><span id='playing_artist'></span></p>
<p class='nomargin'><span class='playing_label'>Albums: </span><span id='playing_album'></span></p>
<p class='nomargin'><span class='playing_label'>Year: </span><span id='playing_year'></span></p>
</div>
</div>
<div id='playing_buttons' class='playing_contents'>
<p><input type='button' class='skipsong_btn' id='skipsong_playing_btn' value='Skip Song'></p>
<p><input type='button' id='mute_playing_btn' value='Mute'></p>
</div>
</div>
<div id='control'>
<div class='volume_slider_container'>
<p><input type='button' class='vol_btn' value='Min' id='min_btn'> Volume <input type='button' class='vol_btn' value='Max' id='max_btn'></p>
</div>
<div class='volume_slider'>
<div id='volume_slider'></div>
</div>
<p><input type='button' id='mute_btn' value='Mute'></p>
<p><input type='button' class='skipsong_btn' id='skipsong_btn' value='Skip Song'></p>
<p><input type='button' id='dropsong_btn' value='Drop Song'></p>
<p><input type='button' id='emptyjukebox_btn' value='Empty Jukebox'></p>
<p><input type='button' id='christmas_btn' value='Christmas: Inactive' class='christmas_btn'>
<select id='christmas_freq' class='christmas_freq'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</p>
<hr class='songlist'>
<p>Active Queue:</p>
<div class='category_container'>
<div class='category_sel'>
<select id='queue_sel' class='queue_select'>
<option value='0'>-- All Songs --</option>
</select>
</div>
<div class='category_go'>
<input type='button' id='category_go_btn' class='category_go_btn' value='Go'>
</div>
</div>
<hr class='songlist'>
<p><input type='button' id='surpriseme_btn' value='Surprise Me'></p>
<p><select id='surpriseme_sel' class='surpriseme_sel'>
<option value='0'>-- All Songs --</option>
</select></p>
</div>
<div id='history'>
<div id='history_contents' class='history_contents'></div>
</div>
<div id='jukebox'>
<div id='jukebox_contents' class='queue_contents'></div>
<div id='customq_contents' class='queue_contents'></div>
</div>
<div id='search'>
<div id='search_input' class='search_input'>
<input type='button' name='clearsearch_btn' id='clearsearch_btn' value='Clear' class='clear_search_btn'>
<input id='searchbox' class='searchtext' type='text' placeholder='Search for...'>
</div>
<div id='search_contents' class='search_contents'></div>
</div>
<div id='lists'>
<div id='lists_contents' class='lists_contents'>
<p>Queue Songs To:</p>
<p><select id='queuetarget_sel' class='surpriseme_sel'>
<option value='0'>Jukebox</option>
</select></p>
<p>Create Playlist:</p>
<p>
<input id='newqueue_input' class='searchtext' style='width: 70%;' type='text' placeholder='Playlist Name'>
<input type='button' id='newqueue_btn' class='newqueue_btn' value='Create'>
</p>
<hr class='songlist'>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='core/jquery-3.7.1.min.js'></script>
<script type='text/javascript' src='core/jquery-ui-1.13.3/jquery-ui.min.js'></script>
<script type='text/javascript' src='core/jquery.touchSwipe.min.js'></script>
<script type='text/javascript' src='js/minimal.js'></script>
</body>
</html>
<!-- vim: set ai ts=2 sw=2 et: -->