mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02:00
52e7f04e46
* Introduce Dark Mode * Auto Detect Dark Mode from OS Some OS (iOS or Mac OS e.g.) can give the browser an information if system wide dark mode is set or not. If the OS shares this information, webui is set automatically to the mode. Manual overwrite is still possible by pressing button on the webui. This is valid as long the session in the client is open. * Burger Button Dark Mode Dark Mode for Burger Button (Mobile View)
367 lines
14 KiB
HTML
367 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<script>
|
|
if (/MSIE/.test(navigator.userAgent) || /Trident/.test(navigator.userAgent))
|
|
{
|
|
window.location.pathname = '/content/ie_not_supported.html';
|
|
}
|
|
</script>
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
|
|
<meta name="description" content="Hyperion Web Configuration">
|
|
<meta name="msapplication-TileColor" content="#91989C">
|
|
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
|
|
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
|
|
|
|
<title data-i18n="general_webui_title">Hyperion - Web Configuration</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/lib/jquery.min.js"></script>
|
|
|
|
<!-- SemVer -->
|
|
<script src='js/lib/semver.js'></script>
|
|
|
|
<!-- md Stuff -->
|
|
<script src="js/lib/marked.min.js"></script>
|
|
<script type="text/javascript" src="js/lib/purify.min.js"></script>
|
|
|
|
<!-- Hyperion -->
|
|
<script src="js/hyperion.js"></script>
|
|
<script src="js/ui_utils.js"></script>
|
|
|
|
<!-- Colorpicker -->
|
|
<script src="js/lib/bootstrap-colorpicker.min.js"></script>
|
|
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
|
|
|
|
<!-- BS Notfiy -->
|
|
<script src="js/lib/bootstrap-notify.min.js"></script>
|
|
|
|
<!-- JSONEditor -->
|
|
<script src="js/lib/jsoneditor.js"></script>
|
|
|
|
<!--Language Support -->
|
|
<script src="js/lib/jquery.i18n.js"></script>
|
|
<script src="js/lib/jquery.i18n.messagestore.js"></script>
|
|
<script src="js/lib/jquery.i18n.fallbacks.js"></script>
|
|
<script src="js/lib/jquery.i18n.parser.js"></script>
|
|
<script src="js/lib/jquery.i18n.emitter.js"></script>
|
|
<script src="js/lib/jquery.i18n.language.js"></script>
|
|
|
|
<!-- Bootstrap Core CSS -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- MetisMenu CSS -->
|
|
<link href="css/metisMenu.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link href="css/sb-admin-2.css" rel="stylesheet">
|
|
<link href="css/hyperion.css" rel="stylesheet">
|
|
|
|
<!-- Custom Fonts -->
|
|
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<noscript>
|
|
<div style="color:red;margin: 40px 0;text-align:center">
|
|
<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">
|
|
<h3>Hyperion Web Configuration requires Javascript. Please enable Javascript in your browser for this page in order to use it!</h3>
|
|
</div>
|
|
<style type="text/css"> #loading_overlay, #wrapper{ display: none } </style>
|
|
</noscript>
|
|
|
|
<div id="loading_overlay" class="overlay"></div>
|
|
<div id="wrapper">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle closed" aria-controls="navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar top-bar"></span>
|
|
<span class="icon-bar middle-bar"></span>
|
|
<span class="icon-bar bottom-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="https://www.hyperion-project.org?pk_campaign=WebUI&pk_kwd=mainlogo" target="_blank"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" height="55"></a>
|
|
|
|
</div>
|
|
<!-- /.navbar-header -->
|
|
|
|
<ul class="nav navbar-top-links navbar-right" id="top-navbar">
|
|
<!-- Browser built in capture stream - streamer.js -->
|
|
<li class="dropdown" id="btn_streamer" style="display:none">
|
|
<!-- Hidden helpers -->
|
|
<canvas style="display:none" id="streamcanvas"></canvas>
|
|
<video style="display:none" id="streamvideo" autoplay></video>
|
|
<a>
|
|
<i id="btn_streamer_icon" class="fa fa-video-camera fa-fw"></i>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown" id="btn_darkmode">
|
|
<a>
|
|
<i id="btn_darkmode_icon" class="fa fa-moon-o"></i>
|
|
</a>
|
|
</li>
|
|
<!-- instance switcher -->
|
|
<li class="dropdown" id="btn_hypinstanceswitch" style="display:none">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<i class="fa fa-exchange fa-fw"></i> <i class="fa fa-caret-down"></i>
|
|
</a>
|
|
<ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts">
|
|
</ul>
|
|
</li>
|
|
<!--
|
|
<li class="dropdown" id="btn_instanceswitch" style="display:none">
|
|
<a>
|
|
<i class="fa fa-exchange fa-fw"></i>
|
|
</a>
|
|
</li>
|
|
-->
|
|
<li class="dropdown" id="btn_open_ledsim">
|
|
<a>
|
|
<i class="fa fa-television fa-fw"></i>
|
|
</a>
|
|
</li>
|
|
<!-- /.dropdown -->
|
|
<li class="dropdown">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<i class="fa fa-magic fa-fw"></i> <i class="fa fa-caret-down"></i>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-alerts">
|
|
<li id="btn_wizard_byteorder">
|
|
<a>
|
|
<div>
|
|
<i class="fa fa-magic fa-fw"></i>
|
|
<span data-i18n="wiz_rgb_title"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="divider"></li>
|
|
<li id="btn_wizard_colorcalibration">
|
|
<a>
|
|
<div>
|
|
<i class="fa fa-magic fa-fw"></i>
|
|
<span data-i18n="wiz_cc_title"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- /.dropdown -->
|
|
<li class="dropdown">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<i class="fa fa-wrench fa-fw"></i> <i class="fa fa-caret-down"></i>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-alerts">
|
|
<li id="btn_setlang">
|
|
<a>
|
|
<div>
|
|
<i class="fa fa-globe fa-fw"></i>
|
|
<span data-i18n="InfoDialog_lang_title"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="divider"></li>
|
|
<li id="btn_setaccess">
|
|
<a>
|
|
<div>
|
|
<i class="fa fa-key fa-fw"></i>
|
|
<span data-i18n="InfoDialog_access_title"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="divider"></li>
|
|
<li id="btn_changePassword">
|
|
<a>
|
|
<div>
|
|
<i class="fa fa-key fa-fw"></i>
|
|
<span data-i18n="InfoDialog_changePassword_title"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- /.lock-ui -->
|
|
<li class="dropdown" id="btn_lock_ui" style="display:none">
|
|
<a>
|
|
<i class="fa fa-lock fa-fw"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-top-left -->
|
|
|
|
<div id="main-nav" class="navbar-default sidebar" role="navigation">
|
|
<div class="sidebar-nav navbar-collapse">
|
|
<ul class="nav" id="side-menu">
|
|
<li> <a class="inactive mnava" href="#dashboard"><i class="fa fa-dashboard fa-fw"></i><span data-i18n="main_menu_dashboard_token">Dashboard</span></a> </li>
|
|
<li>
|
|
<a class="inactive"><i class="fa fa-cog fa-fw"></i><span data-i18n="main_menu_configuration_token">Configuration</span><span class="fa arrow"></span></a>
|
|
<ul class="nav nav-second-level">
|
|
<li> <a class="inactive mnava" href="#conf_general"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_general_conf_token">General</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_leds"><i class="fa fa-lightbulb-o fa-fw"></i><span data-i18n="main_menu_leds_conf_token">LED Hardware</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_grabber"><i class="fa fa-camera fa-fw"></i><span data-i18n="main_menu_grabber_conf_token">Capturing Hardware</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_effect"><i class="fa fa-spinner fa-fw"></i><span data-i18n="main_menu_effect_conf_token">Effects</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_colors"><i class="fa fa-photo fa-fw"></i><span data-i18n="main_menu_colors_conf_token">Image Processing</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_network"><i class="fa fa-sitemap fa-fw"></i><span data-i18n="main_menu_network_conf_token">Network</span></a> </li>
|
|
</ul>
|
|
</li>
|
|
<li> <a class="inactive mnava" href="#remote"><i class="fa fa-wifi fa-fw"></i><span data-i18n="main_menu_remotecontrol_token">Remote Control</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#effects_configurator"><i class="fa fa-cogs fa-fw"></i><span data-i18n="main_menu_effectsconfigurator_token">Effects Configurator</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#support"><i class="fa fa-info fa-fw"></i><span data-i18n="main_menu_support_token">Support</span></a> </li>
|
|
<li>
|
|
<a class="inactive"><i class="fa fa-industry fa-fw"></i><span data-i18n="main_menu_system_token">System</span><span class="fa arrow"></span></a>
|
|
<ul class="nav nav-second-level">
|
|
<li> <a class="inactive mnava" href="#conf_webconfig" id="load_webconfig"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_webconfig_token">Webconfiguration</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_logging"><i class="fa fa-reorder fa-fw"></i><span data-i18n="main_menu_logging_token">Log</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#update"><i class="fa fa-download fa-fw"></i><span data-i18n="main_menu_update_token">Update</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#about"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="main_menu_about_token">About</span></a> </li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.sidebar-collapse -->
|
|
</div>
|
|
<!-- /.navbar-static-side -->
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
<div id="page-wrapper" style="padding-top:10px; overflow: hidden;">
|
|
<div id="dashboard_active_instance" style="display:none;padding:0 10px;margin:0">
|
|
<div class="bs-callout bs-callout-success">
|
|
<h4 id="dashboard_active_instance_friendly_name"></h4>
|
|
</div>
|
|
</div>
|
|
<div id="hyperion_global_setting_notify" style="display:none;padding:0 10px;margin:0">
|
|
<div class="bs-callout bs-callout-warning">
|
|
<h4 data-i18n="dashboard_message_global_setting_t"></h4>
|
|
<span data-i18n="dashboard_message_global_setting"></span>
|
|
</div>
|
|
</div>
|
|
<div id="hyperion_disabled_notify" style="display:none;padding:0 10px;margin:0">
|
|
<div class="bs-callout bs-callout-danger">
|
|
<h4 data-i18n="dashboard_alert_message_disabled_t"></h4>
|
|
<span data-i18n="dashboard_alert_message_disabled"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page-content"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /#wrapper -->
|
|
|
|
<div id="container_connection_lost" style="display:none"></div>
|
|
<div id="container_restart" style="display:none"></div>
|
|
|
|
<!-- infoDialog -->
|
|
<div id="modal_dialog" class="modal fade" role="dialog" style="z-index:9999">
|
|
<div class="modal-dialog">
|
|
<center>
|
|
<div class="modal-content">
|
|
<div id="id_body" class="modal-body"></div>
|
|
<div id="id_footer" class="modal-footer" style="text-align:center"></div>
|
|
</div>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- renameDialog -->
|
|
<div id="modal_dialog_rename" class="modal fade" role="dialog" style="z-index:9999">
|
|
<div class="modal-dialog">
|
|
<center>
|
|
<div class="modal-content">
|
|
<div id="id_body_rename" class="modal-body"></div>
|
|
<div id="id_footer_rename" class="modal-footer" style="text-align:center"></div>
|
|
</div>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- wizardDialog -->
|
|
<div id="wizard_modal" class="modal fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div id="wiz_header" class="modal-header"></div>
|
|
<div id="wizp1">
|
|
<div class="modal-body" style="text-align:center">
|
|
<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
|
<div id="wizp1_body" ></div>
|
|
</div>
|
|
<div id="wizp1_footer" class="modal-footer" style="text-align:center"></div>
|
|
</div>
|
|
<div id="wizp2" style="display:none">
|
|
<center>
|
|
<div class="modal-body">
|
|
<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
|
<div id="wizp2_body"></div>
|
|
</div>
|
|
</center>
|
|
<div id="wizp2_footer" class="modal-footer" style="text-align:center"></div>
|
|
</div>
|
|
<div id="wizp3" style="display:none">
|
|
<center>
|
|
<div class="modal-body">
|
|
<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
|
<div id="wizp3_body"></div>
|
|
</div>
|
|
</center>
|
|
<div id="wizp3_footer" class="modal-footer" style="text-align:center"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ledsimDialog -->
|
|
<div id="ledsim_dialog" style="display:none; z-index:9998">
|
|
<div data-role="body" style="padding:0px;">
|
|
<div id="ledsim_text"></div>
|
|
<div id="leds_canvas"></div>
|
|
</div>
|
|
<div data-role="footer" style="text-align:center">
|
|
<button type="button" class="btn btn-success" id="leds_toggle"><i class="fa fa-fw fa-lightbulb-o"></i><span data-i18n="main_ledsim_btn_toggleleds">leds</span></button>
|
|
<button type="button" class="btn btn-danger" id="leds_toggle_num"> <i class="fa fa-fw fa-info"></i><span data-i18n="main_ledsim_btn_togglelednumber">led numbers</span></button>
|
|
<button type="button" class="btn btn-danger" id="leds_toggle_live_video"><i class="fa fa-fw fa-television"></i><span data-i18n="main_ledsim_btn_togglelivevideo">live video</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap Core JavaScript -->
|
|
<script src="js/lib/bootstrap.min.js"></script>
|
|
|
|
<!-- Metis Menu Plugin JavaScript -->
|
|
<script src="js/lib/metisMenu.min.js"></script>
|
|
|
|
<!-- Custom Theme JavaScript -->
|
|
<script src="js/lib/sb-admin-2.js"></script>
|
|
|
|
<script src="js/content_index.js"></script>
|
|
<script src="js/settings.js"></script>
|
|
<script src="js/streamer.js"></script>
|
|
<script src="js/wizard.js"></script>
|
|
|
|
<!--gijgo dialog-->
|
|
<script src="js/lib/draggable.min.js"></script>
|
|
<script src="js/lib/dialog.min.js"></script>
|
|
<script src="js/ledsim.js"></script>
|
|
|
|
<!--Client-side download-->
|
|
<script src='js/lib/download.min.js'></script>
|
|
|
|
<!--JsonAceEditor-->
|
|
<script src='js/lib/jsonaceeditor.min.js'></script>
|
|
<link href="css/jsonaceeditor.min.css" rel="stylesheet" type="text/css">
|
|
|
|
</body>
|
|
</html>
|