hyperion.ng/assets/webconfig/content/remote.html

<div class="container-fluid">
<h2 class="page-header"><i class="fa fa-wifi fa-fw"></i><span data-i18n="main_menu_remotecontrol_token">Remote Control</span></h2>
	<div class="introd">
		<h4 data-i18n="remote_label_intro">Set an effect/color. You could also select a source manually. The Components control give the opportunity to enable/disable components of Hyprion during runtime. All changes you made here are lost after a restart.</h4>
	<hr />
	</div>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-lg-12">
		<div class="panel panel-primary" >
				<div class="panel-heading" data-i18n="remote_colors_label_coloreffect">Colors/Effects</div>
				<div class="panel-body">
				<span data-i18n="remote_colors_label_color" style="display:inline-block">Color:</span>
				<div id="cp2" class="colorpicker-component"  style="width:auto;display:inline-block;white-space:nowrap;">
					<input type="text" value="#00AABB" class="form-control"  style="display:inline" /><span class="input-group-addon form-control" style="display:inline-block;width:auto;"><i></i></span>
				</div>
				<div data-i18n="remote_effects_label_effects" style="display:inline-block;margin-left:50px;">Effect:</div>
				<select id="effect_select" class="form-control" style="width:auto;display:inline-block"></select>
				<button data-i18n="remote_colors_button_reset" type="button" class="btn btn-warning" id="reset_color" style="margin-left:20px;width:auto;display:inline-block">Reset Color/Effect</button>

				</div>
			</div>
		</div>

		</div>
</div>

<div  class="container-fluid">
	<div class="row">
		<div class="col-lg-8 col-xxl-7">
			<div class="panel panel-primary" >
				<div class="panel-heading" data-i18n="remote_input_label_sourceselection">Source selection</div>
				<div class="panel-body">
					<span data-i18n="remote_help_text">Hyperion uses a priority system to select a source. Everything you set has a priority (Effect/Color/Platform capture/USB capture and network sources). By default, Hyperion select sources depending on priority (lowest number reflects the current active source). Now you have the opportunity to select sources on your own.</span>
					<div id="sstcont"></div>
					<div id="auto_btn"></div>
				</div>
			</div>
		</div>

		<div class="col-lg-4 col-xxl-5">
			<div class="panel panel-primary" >
				<div class="panel-heading" data-i18n="remote_components_label_components">Components control</div>
				<div class="panel-body">
					<div id="componentsbutton"><i style="font-size:120px;padding:20px;text-align:center;display: inline-block;width: 100%;line-height: normal;" class="fa fa-cog fa-spin"></i></div>
				</div>
			</div>
		</div>
	</div>
</div>

<div  class="container-fluid">
	<div class="row">
		<div class="col-lg-6">
			<div class="panel panel-primary" >
				<div class="panel-heading" data-i18n="remote_maptype_label">Mapping types</div>
				<div class="panel-body">
					<div id="mappingsbutton"><i style="font-size:120px;padding:20px;text-align:center;display: inline-block;width: 100%;line-height: normal;" class="fa fa-cog fa-spin"></i></div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="/js/content_remote.js" ></script>