htd-lync
Version:
This library is meant to be used to interact with an HTD Lync 12
1,259 lines (991 loc) • 42.5 kB
HTML
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<!-- <link rel="stylesheet" href="css/font-awesome.css"> -->
<link rel="stylesheet" href="css/horizontal.css">
<link rel="stylesheet" href="css/nouislider.css">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', function onDeviceReady() {
//console.log(chrome);
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
cordova.plugins.Keyboard.disableScroll(true);
//gettingInfoFromBeacon();
}, false);
</script>
</head>
<body>
<header>
<div id="redBar" style="display:none">
No Connection
</div>
<div id="click1">
<div class="container">
<div class="topbar">
<div class="music-item-wrapper">
<div class="music-item">
<a href="#" target="_blank"><img id="topShortcut1" src="images/empty.png"></a>
</div>
<div class="music-item">
<a href="#" target="_blank"><img id="topShortcut2" src="images/empty.png"></a>
</div>
<div class="music-item">
<a href="#" target="_blank"><img id="topShortcut3" src="images/empty.png"></a>
</div>
<div class="music-item">
<a href="#" target="_blank"><img id="topShortcut4" src="images/empty.png"></a>
</div>
</div>
<div class="mobile-menu">
<div class="dropdown">
<button id="menu" class="dropbtn"><img src="images/hamburger.png" alt="Mobile Menu">
</button>
<div class="dropdown-content">
<a href="#" id="zoneSettingsAllLink">Zone Settings</a>
<a href="#" id="sourceSettingsAllLink">Source Settings</a>
<a href="#" id="groupSettings">Group Settings</a>
<a href="#" id="presetSettingsLink">Preset Settings</a>
<a href="#" id="shortcutSettingsLink">Shortcut Settings</a>
<a href="#" id="systemSettingsLink">System Settings</a>
<a href="#" id="logoutLink">Disconnect</a>
</div>
</div>
<!-- <img id="connectedCircle" src="images/redCircle.png"> -->
</div>
</div>
<div class="heading separate" id="pageName">
<h2 id="systemStatusText">System Status</h2>
</div>
</div>
</div>
</header>
<div id="click2">
<div class="container-wrapper" id="SystemStatusPage">
<div class="container">
<div class="player-list" id="zoneList">
<ul>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="playlists">
<div class="bottom-wrapper">
<div class="bottom-buttons">
<div class="bottom-button-item"><a href="#" id="zonesLink">Zones</a></div>
<div class="bottom-button-item"><a href="#" id="goToGroupControl">Groups</a></div>
<div class="bottom-button-item"><a href="#" id="goToPresetControl">Presets</a></div>
</div>
<!-- <div class="bottom-buttons-connected red">
</div> -->
</div>
</div>
</div>
</div>
<div class="container-wrapper" id="ZoneSettingsAllPage" style="display:none">
<div class="container">
<div class="player-list" id="zoneSettingsAllList">
<ul>
</ul>
</div>
</div>
</div>
<div class="container-wrapper" id="PresetSettingsPage" style="display:none">
<div class="container">
<div class="player-list" id="presetSettingsList">
<ul>
</ul>
</div>
</div>
</div>
<div class="container-wrapper" id="SourceSettingsAllPage" style="display:none">
<div class="container">
<div class="sourceSettingsText">
Disabling a source on this page hides the source in the app. It does not affect keypads.
</div>
<hr />
<div class="player-list sourceSettings" id="sourceSettingsAllList">
<ul>
</ul>
</div>
</div>
</div>
<div class="container-wrapper" id="groupControlPage" style="display:none">
<div class="container">
<div class="player-list2" id="groupControlList">
<ul>
</ul>
</div>
<div class="playlists-groups">
<div class="button-wrapper">
<div class="buttons">
<div class="button-item group"><a href="#" id="groupVolumeAllDown" onClick="groupAllVolDown();">VOL -</a></div>
<div class="button-item group"><a href="#" id="groupVolumeAllDown" onClick="groupAllSetVolume();">SET VOL<img class="downArrow" src="images/arrowDownSmall.png"></a></div>
<!-- <div id="groupAllSetVolume"><a href="#" onClick="groupAllSetVolume();">SET VOLUME</a></div> -->
<div class="button-item group"><a href="#" id="groupVolumeAllUp" onClick="groupAllVolUp();">VOL +</a></div>
</div>
<div class="buttons">
<div class="button-item group"><a href="#" onClick="groupAllOn();">Group On</a></div>
<div class="button-item group"><a href="#" onClick="groupAllSetSource();">Set SRC<img class="downArrow" src="images/arrowDownSmall.png"></a></div>
<!-- <div id="groupAllSetSource"><a href="#" onClick="groupAllSetSource();">Set Source</a></div> -->
<div class="button-item group"><a href="#" onClick="groupAllOff();">Group Off</a></div>
</div>
</div>
</div>
<div class="playlists" id="footerDiv">
<div class="bottom-wrapper">
<div class="bottom-buttons">
<div class="bottom-button-item"><a href="#" id="zoneLink">Zones</a></div>
<div class="bottom-button-item"><a href="#" id="groupLink">Groups</a></div>
<div class="bottom-button-item"><a href="#" id="goToPresetControl2">Presets</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container-wrapper" id="presetControlPage" style="display:none">
<div class="container">
<div class="player-list" id="presetControlList">
<ul>
</ul>
</div>
<div class="playlists">
<div class="bottom-wrapper">
<div class="bottom-buttons">
<div class="bottom-button-item"><a href="#" id="zoneLink2">Zones</a></div>
<div class="bottom-button-item"><a href="#" id="goToGroupControl2">Groups</a></div>
<div class="bottom-button-item"><a href="#" id="goToPresetControl">Presets</a></div>
</div>
</div>
</div>
</div>
</div>
<div id="MusicPlayerBasic" style="display:none">
<div class="container-wrapper">
<div class="dropies" id="secondary">
<div class="dropdown">
<button class="dropbtn" id="sourceList">CD Player
<i class="fa fa-angle-down" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="button-wrapper">
<div class="buttons">
<div class="button-item" id="partyBtn"><a href="#" onClick="partyMode(1);">Party</a></div>
<a href="#"><img src="images/power-off-norm.png" class="button-item" id="powerBtn"></a>
<div class="button-item" id="dndBtn"><a href="#">DND</a></div>
</div>
</div>
<div class="container">
<!-- <div class="song-name">
<img src="images/power-off-norm.png" id="powerBtn"></img>
</div> -->
<div class="third-li" id="mp3Panel" style="display:none">
<div class="base-level">
<div class="mp3-data">
<h3 id="songName"></h3>
<h3 id="artistName"></h3>
</div>
<div id="playlist1">
<div class="player-btns">
<a href="#" onClick="mp3Stop();"><img id="mp3Stop" src="images/stop.png"></a>
<a href="#" onClick="mp3Back();"><img id="mp3Prev" src="images/rarow.png"></a>
<a href="#" onClick="mp3PlayPause();"><img id="mp3Play" src="images/play.png"></a>
<a href="#" onClick="mp3Next();"><img id="mp3Next" src="images/larow.png"></a>
<!-- <a href="#" onClick="mp3Shuffle();"><img id="mp3ShuffleImg" src="images/kata.png"></a> -->
<a href="#" onClick="mp3Repeat();"><img id="mp3RepeatImg" src="images/row.png"></a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="playlists custom-li" id="bassTrebleControls">
<li>
<div class="base-level">
<p id="bassLevelText" class="z-name">BASS LEVEL</p>
</div>
<div class="volume">
<div id="bassSlider" class="noUi-target noUi-ltr noUi-horizontal">
</div>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="base-level">
<p id="trebleLevelText" class="z-name">TREBLE LEVEL</p>
</div>
<div class="volume">
<div id="trebleSlider" class="noUi-target noUi-ltr noUi-horizontal">
</div>
</div>
<div class="vol-number">
<div class="clearfix"></div>
</li>
<div class="clearfix"></div>
<!-- <div class="clearfix"></div> -->
</ul>
</div>
<div class="playlist2-container">
<div id="playlist2">
</div>
<div class="volume-bar">
<div id="volumeBar"></div>
</div>
</div>
<div class="playlists">
<div class="bottom-wrapper">
<div class="bottom-buttons">
<div class="bottom-button-item"><a href="#" id="zoneLink1">Zones</a></div>
<div class="bottom-button-item"><a href="#" class="groupLink" id="groupLink">Groups</a></div>
<div class="bottom-button-item"><a href="#" id="goToPresetControl3">Presets</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="ShortcutSettingsPage" style="display:none">
<div class="container-wrapper">
<div class="player-list">
<ul>
<li>
<div class="list-box">
<div class="list-grid list-grid-left custom-left-grid enableShortcuts">
<label class="switch">
<input type="checkbox" checked id="shortcutsEnabled">
<span class="slider round"></span>
</label>
<div class="list-title">
<span>Enable Feature</span>
</div>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
<img class="shortcutIcon" id="shortcutIcon1" src="images/empty.png" height="50" width="50">
<div class="list-title">
<span id="shortcutName-1" class="shortcutName">empty</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<img class="edit-box-shortcutIcon" onClick="editShortCut(0);" src="images/settings.png">
</div>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
<img class="shortcutIcon" id="shortcutIcon2" src="images/empty.png" height="50" width="50">
<div class="list-title">
<span id="shortcutName-2" class="shortcutName">empty</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<img class="edit-box-shortcutIcon" onClick="editShortCut(1);" src="images/settings.png">
</div>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
<img class="shortcutIcon" id="shortcutIcon3" src="images/empty.png" height="50" width="50">
<div class="list-title">
<span id="shortcutName-3" class="shortcutName">empty</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<img class="edit-box-shortcutIcon" onClick="editShortCut(2);" src="images/settings.png">
</div>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
<img class="shortcutIcon" id="shortcutIcon4" src="images/empty.png" height="50" width="50">
<div class="list-title">
<span id="shortcutName-4" class="shortcutName">empty</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<img class="edit-box-shortcutIcon" onClick="editShortCut(3);" src="images/settings.png">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="EditShortcutSettingsPage" style="display:none">
<div class="container-wrapper">
<div class="player-list" id="editShortcutDiv">
<ul id="editShortCutUL">
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span id="shortcutName-1" class="shortcutName">Select An Icon</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
</div>
</div>
</div>
</li>
</ul>
<div class="shortcutTable">
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect1" src="images/empty.jpg" height="75" width="75">
<span class="shortcutText">Empty</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect2" src="images/pandora.png" height="75" width="75">
<span class="shortcutText">Pandora</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect3" src="images/quickicons_spotify.jpg" height="75" width="75">
<span class="shortcutText">Spotify</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect4" src="images/quickicons_iheart.jpg" height="75" width="75">
<span class="shortcutText">iHeart</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect5" src="images/sonos_s1.png" height="75" width="75">
<span class="shortcutText">Sonos S1</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect6" src="images/quickicons_tidal.jpg" height="75" width="75">
<span class="shortcutText">Tidal</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect7" src="images/quickicons_itunes.jpg" height="75" width="75">
<span class="shortcutText">Music</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect8" src="images/quickicons_deezer.jpg" height="75" width="75">
<span class="shortcutText">Deezer</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect9" src="images/quickicons_amazon.jpg" height="75" width="75">
<span class="shortcutText">Amazon</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect10" src="images/quickicons_youtube.jpg" height="75" width="75">
<span class="shortcutText">YouTube</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect11" src="images/quickicons_tunein.jpg" height="75" width="75">
<span class="shortcutText">TuneIn</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect12" src="images/quickicons_xm.jpg" height="75" width="75">
<span class="shortcutText">SiriusXM</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect13" src="images/quickicons_phone2zone.jpg" height="75" width="75">
<span class="shortcutText">Phone to Zone</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect14" src="images/ghome_icon.jpg" height="75" width="75">
<span class="shortcutText">Google Home</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect15" src="images/alexa_icon.jpg" height="75" width="75">
<span class="shortcutText">Alexa</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect16" src="images/remote.png" height="75" width="75">
<span class="shortcutText">Apple Remote</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect17" src="images/ytmusic.png" height="75" width="75">
<span class="shortcutText">YouTube Music</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect18" src="images/googlemusic.png" height="75" width="75">
<span class="shortcutText">Google Music</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect19" src="images/slacker.png" height="75" width="75">
<span class="shortcutText">Slacker Radio</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect20" src="images/podcast.png" height="75" width="75">
<span class="shortcutText">Podcast</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect21" src="images/bluesound.png" height="75" width="75">
<span class="shortcutText">Blue Sound</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect22" src="images/heos.png" height="75" width="75">
<span class="shortcutText">Heos</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect23" src="images/mc.png" height="75" width="75">
<span class="shortcutText">mc</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect24" src="images/sonyMusicCenter.png" height="75" width="75">
<span class="shortcutText">Sony Music</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect25" src="images/grace.png" height="75" width="75">
<span class="shortcutText">Grace</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect26" src="images/iControlAV5.jpeg" height="75" width="75">
<span class="shortcutText">iControl AV5</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect27" src="images/onkyoRemote3.png" height="75" width="75">
<span class="shortcutText">Onkyo Remote 3</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect28" src="images/onkyoController.png" height="75" width="75">
<span class="shortcutText">Onkyo Controller</span>
</div>
<!-- <div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect29" src="images/audioCast.png" height="75" width="75">
<span class="shortcutText">AudioCast</span>
</div> -->
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect29" src="images/soundcloud.png" height="75" width="75">
<span class="shortcutText">SoundCloud</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect30" src="images/roon.png" height="75" width="75">
<span class="shortcutText">Roon</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect31" src="images/roonEssentials.png" height="75" width="75">
<span class="shortcutText">Roon Essentials</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect32" src="images/esRemote.png" height="75" width="75">
<span class="shortcutText">ES Remote</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect33" src="images/denon2016Remote.png" height="75" width="75">
<span class="shortcutText">Denon 2016 Remute</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect34" src="images/marantz2016Remote.png" height="75" width="75">
<span class="shortcutText">Marantz 2016 Remote</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect35" src="images/samsungSmartView.jpeg" height="75" width="75">
<span class="shortcutText">Samsung Smart View</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect36" src="images/vizioSmartcast.png" height="75" width="75">
<span class="shortcutText">Vizio Smartcast</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect37" src="images/panasonicTVRemote.png" height="75" width="75">
<span class="shortcutText">Panasonic Remote</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect38" src="images/videoTvSideview.png" height="75" width="75">
<span class="shortcutText">Video & TV Sideview</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect39" src="images/shazam.png" height="75" width="75">
<span class="shortcutText">Shazam</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect40" src="images/jango.png" height="75" width="75">
<span class="shortcutText">jango</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect41" src="images/roku.png" height="75" width="75">
<span class="shortcutText">Roku</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect42" src="images/amazonFire.png" height="75" width="75">
<span class="shortcutText">Amazon Fire</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect43" src="images/appleTV.png" height="75" width="75">
<span class="shortcutText">Apple TV</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect44" src="images/appleTVRemote.png" height="75" width="75">
<span class="shortcutText">Apple Remote</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect45" src="images/sonos_s2.png" height="75" width="75">
<span class="shortcutText">Sonos S2</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect46" src="images/plex.png" height="75" width="75">
<span class="shortcutText">Plex</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect47" src="images/gaana_music.png" height="75" width="75">
<span class="shortcutText">Gaana</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect48" src="images/harmony.png" height="75" width="75">
<span class="shortcutText">Harmony</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect49" src="images/audible.png" height="75" width="75">
<span class="shortcutText">Audible</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect50" src="images/yamaha_av_controller.png" height="75" width="75">
<span class="shortcutText">Yamaha AV</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect51" src="images/radio_net.png" height="75" width="75">
<span class="shortcutText">Radio Net</span>
</div>
<div class="shortcut-wrapper">
<img class="shortcutIconSelect" id="shortCutIconSelect52" src="images/yamaha_musiccast.png" height="75" width="75">
<span class="shortcutText">Yamaha Music Cast</span>
</div>
</div>
<div class="list-box" id="shortcutEmailText">
<div class="list-grid list-grid-left custom-left-grid">
<div class="list-title">
<span>To request additional shortcuts please email <a href="mailto:apps@htd.com">apps@htd.com</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="SystemSettingsPage" style="display:none">
<div class="container-wrapper">
<div class="player-list">
<ul>
<li class="custom-player-list">
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span id="shortcutName-2" class="shortcutName">Gateway ID</span>
</div>
</div>
<!-- <div class="list-grid list-grid-right gateway"> -->
<div class="list-grid list-grid-right">
<div class="both-btn">
<span id="systemUUID"></span>
</div>
</div>
</div>
</li>
<li class="custom-player-list">
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span id="shortcutName-2" class="shortcutName">Gateway IP</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<span id="gatewayID"></span>
</div>
</div>
</div>
</li>
<li class="custom-player-list">
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span id="shortcutName-1" class="shortcutName">Controller</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn" id="controllerName">
</div>
</div>
</div>
</li>
<li class="custom-player-list">
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span class="shortcutName">SystemName</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<div id="systemName">Link12</div>
<img id="editSystemName" src="images/pencil.png">
</div>
</div>
</div>
</li>
<li class="custom-player-list">
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span class="shortcutName">Reset to Factory</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<div class="button-item"><a href="#" onClick="factoryDefault();" id="factoryDefaultBtn">Factory Default</a></div>
</div>
</div>
</div>
</li>
<li class="custom-player-list">
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span class="shortcutName">Clear App Settings</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<div class="button-item"><a href="#" onClick="clearCache();" id="factoryDefaultBtn">Clear Cache</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span id="shortcutName-3" class="shortcutName">Backup - Profile 1</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<div class="button-item"><a href="#" onClick="backupData(1);">Backup 1</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span id="shortcutName-3" class="shortcutName">Backup - Profile 2</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<div class="button-item"><a href="#" onClick="backupData(2);">Backup 2</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span class="shortcutName">Restore - Profile 1</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<div class="button-item"><a href="#" onClick="restoreData(1);">Restore 1</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span class="shortcutName">Restore - Profile 2</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<div class="button-item"><a href="#" onClick="restoreData(2);">Restore 2</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span id="lockSettingsText" class="shortcutName">Lock Status</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<div class="button-item"><a href="#" id="lockSettingsButton" onClick="lockSettings();">Lock</a></div>
</div>
</div>
</div>
</li>
<li id="doorbellSettingsLink">
<div class="list-box">
<div class="list-grid list-grid-left">
<div class="list-title">
<span id="lockSettingsText" class="shortcutName">Doorbell Settings</span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
<div class="button-item"><a href="#" id="doorbellSettings" onClick="goToDoorbellSettings();">Configure</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left">
</div>
<div class="list-grid list-grid-right">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id='GroupSettingPage' style="display:none">
<div class="container">
<div class="player-list">
<ul id="groupSettingsList">
</ul>
</div>
</div>
<div class="popup" id="addZonePopup">
<div class="popup-head">
<h2>Add Zone</h2>
</div>
<div class="popup-content">
<ul id="groupAddZonePopup">
</ul>
</div>
<div class="pop-close">
<button type="submit" id="hideAddBox">X</button>
</div>
</div>
<div class="popup2">
<div class="popup-head">
<h2>Add Source</h2>
</div>
<div class="popup-content">
<ul>
<li>
<div class="popup-list">
<p>CD Player</p>
</div>
<div class="popup-btn">
<div class="round-check">
<input type="checkbox" id="checkbox-2" />
<label for="checkbox-2"></label>
</div>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="popup-list">
<p>Radio</p>
</div>
<div class="popup-btn">
<div class="round-check">
<input type="checkbox" id="checkbox-3" />
<label for="checkbox-3"></label>
</div>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="popup-list">
<p>USB Player</p>
</div>
<div class="popup-btn">
<div class="round-check">
<input type="checkbox" id="checkbox-4" />
<label for="checkbox-4"></label>
</div>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="popup-list">
<p>Home Theater</p>
</div>
<div class="popup-btn">
<div class="round-check">
<input type="checkbox" id="checkbox-5" />
<label for="checkbox-5"></label>
</div>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="popup-list">
<p>Master Bedroom CD </p>
</div>
<div class="popup-btn">
<div class="round-check">
<input type="checkbox" id="checkbox-6" />
<label for="checkbox-6"></label>
</div>
</div>
<div class="clearfix"></div>
</li>
<button type="button" class="add-zone">ADD</button>
</ul>
</div>
<div class="pop-close">
<button type="submit" id="hidebox2">X</button>
</div>
</div>
</div>
<div id="ZoneSettingsPage" style="display:none">
<div id="CD" class="w3-container city">
<div class="container">
<div class="player-list" id="zoneSettingsList2">
<ul>
<li>
<div class="zoneAppName">
<div class="list-text">
<p class="z-name">APP ZONE NAME</p>
<p class="z-catagry" id='zoneSettingsAppName'></p>
</div>
<div class="list-button1">
<a href="#" id="changeZoneAppName"><img src="images/pencil.png"></a>
</div>
</div>
</li>
<li>
<div class="zoneSettingName">
<div class="list-text">
<p class="z-name">KEYPAD ZONE NAME</p>
<p class="z-catagry" id='zoneSettingsName'></p>
</div>
<div class="list-button1">
<a href="#" id="changeZoneName"><img src="images/pencil.png"></a>
</div>
</div>
</li>
<li>
<div class="base-level">
<p id="balanceLevelText" class="z-name">BALANCE</p>
</div>
<div class="volume">
<div id="balanceSlider" class="noUi-target noUi-ltr noUi-horizontal">
</div>
</div>
<div class="vol-number">
<ul style="margin-bottom:0px;">
<li>L</li>
<li>0</li>
<li>R</li>
</ul>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left zoneSettingsList">
<div class="list-title">
<span id="hideSources"><a href="#">Hide Sources on Keypad</a></span>
</div>
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
</div>
<div class="list-cat">
</div>
</div>
</div>
</li>
<div id="sourcesOnKeypad">
</div>
</ul>
</div>
</div>
</div>
<div id="radio " class="w3-container city " style="display:none ">
<img src="images/vol.png ">
</div>
<div id="usb " class="w3-container city " style="display:none ">
<img src="images/vol.png ">
</div>
</div>
<div id="DoorbellSettingsPage" style="display:none">
<div id="CD" class="w3-container city">
<div class="container">
<div class="player-list">
<ul>
<li>
<div class="zoneSettingName" id="ignoreDoorbellDiv">
<div class="list-text">
<p class="z-name">SET DOORBELL SETTINGS ON APP START</p>
<p class="z-catagry">Enable Feature</p>
</div>
<div class="list-button1">
<label class="switch">
<input type="checkbox" id="ignoreDoorbellCheckBox">
<span class="slider round"></span>
</label>
</div>
</div>
</li>
<li>
<div class="list-box">
<div class="list-grid list-grid-left zoneSettingsList">
<!-- <div class="list-title"> -->
<span id="hideSources"><a href="#">Hear Doorbell</a></span>
<!-- </div> -->
</div>
<div class="list-grid list-grid-right">
<div class="both-btn">
</div>
<div class="list-cat">
</div>
</div>
</div>
</li>
<div id="doorbellSettingsList">
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.2.1.min.js "></script>
<script src="js/nouislider.min.js "></script>
<script src="js/socket.io.js "></script>
<script src="js/data.js "></script>
<script src="js/app.js "></script>
<script src="js/gui.js "></script>
<script src="js/shortcuts.js "></script>
<script src="js/systemStatus.js "></script>
<script src="js/musicPlayer.js "></script>
<script src="js/zoneSettings.js "></script>
<script src="js/groupSettings.js "></script>
<script src="js/groupControl.js "></script>
<script src="js/allZoneSettings.js "></script>
<script src="js/allSourceSettings.js "></script>
<script src="js/shortcutSettings.js "></script>
<script src="js/presetSettings.js "></script>
<script src="js/presetControl.js "></script>
<script src="js/systemSettings.js "></script>
<script src="js/socket.js "></script>
<script src="js/backupSocket.js "></script>
<script src="js/socketReceiveNames.js "></script>
<script src="js/socketReceive.js "></script>
<script src="js/commands.js "></script>
<script src="js/commandsNames.js "></script>
<script src="js/plugins.js "></script>
<script src="js/sly.min.js "></script>
<script src="plugins/cordova-plugin-app-launcher/www/Launcher.js"></script>
</html>