use blue theme, optimizations
[iot-control-center.git] / index.html
blob:a/index.html -> blob:b/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>IoT Control Center</title> <title>IoT Control Center</title>
<!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">  
  <link rel="stylesheet" href="bower_components/AdminLTE/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="bower_components/AdminLTE/dist/css/AdminLTE.min.css"> <link rel="stylesheet" href="bower_components/AdminLTE/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="bower_components/AdminLTE/dist/css/skins/_all-skins.min.css"> <link rel="stylesheet" href="assets/css/iotcc.css">
<link rel="stylesheet" href="assets/css/iotcc.css">  
</head> </head>
   
<body class="hold-transition skin-blue sidebar-mini sidebar-collapse"> <body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
<div class="wrapper"> <div class="wrapper">
<header class="main-header"> <header class="main-header">
<!-- Logo --> <a href="#dashboard" class="logo">
<a href="#dashboard" class="logo"> <span class="logo-mini"><b>IoT</b></span>
<!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-lg"><b>IoT</b> Control Center</span>
<span class="logo-mini"><b>IoT</b></span> </a>
<!-- logo for regular state and mobile devices -->  
<span class="logo-lg"><b>IoT</b> Control Center</span> <nav class="navbar navbar-static-top">
</a> <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  <span class="sr-only">Toggle navigation</span>
<!-- Header Navbar: style can be found in header.less --> </a>
<nav class="navbar navbar-static-top"> <div class="navbar-custom-menu">
<!-- Sidebar toggle button--> <ul class="nav navbar-nav">
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> <li>
<span class="sr-only">Toggle navigation</span> <a href="#" data-toggle="control-refresh" title="Refresh devices"><i class="fa fa-refresh"></i></a>
</a> </li>
<!-- Navbar Right Menu --> <li>
<div class="navbar-custom-menu"> <a href="#" data-toggle="control-console" title="Show/hide MQTT console"><i class="fa fa-paper-plane"></i></a>
<ul class="nav navbar-nav"> </li>
<!-- Control Sidebar Toggle Button --> <li>
<li> <a href="#" data-toggle="control-sidebar"><i class="fa fa-gear"></i></a>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gear"></i></a> </li>
</li> </ul>
  </div>
  </nav>
  </header>
  <aside class="main-sidebar">
  <section class="sidebar">
  <ul class="sidebar-menu">
  <li class="active">
  <a href="#" class="navigation" data-section="dashboard">
  <i class="fa fa-dashboard"></i> <span>Dashboard</span>
  </a>
  </li>
  <li>
  <a href="#" class="navigation" data-section="custom-subscriptions">
  <i class="fa fa-list"></i> <span>Custom subscriptions</span>
  </a>
  </li>
  <li>
  <a href="#" class="navigation" data-section="settings">
  <i class="fa fa-gears"></i> <span>Settings</span>
  </a>
  </li>
  <li>
  <a href="#" class="navigation" data-section="log">
  <i class="fa fa-align-justify"></i> <span>Log</span>
  </a>
  </li>
  </ul>
  </section>
  </aside>
   
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
  <section class="content-header" data-section="dashboard">
  <h1>Dashboard</h1>
  <ol class="breadcrumb">
  <li class="active"><i class="fa fa-dashboard"></i> Dashboard</li>
  </ol>
  </section>
   
  <section class="content-header hide" data-section="custom-subscriptions">
  <h1>Custom subscriptions</h1>
  <ol class="breadcrumb">
  <li class="active"><i class="fa fa-list"></i> Custom subscriptions</li>
  </ol>
  </section>
   
  <section class="content-header hide" data-section="settings">
  <h1>Settings</h1>
  <ol class="breadcrumb">
  <li class="active"><i class="fa fa-gears"></i> Settings</li>
  </ol>
  </section>
   
  <section class="content-header hide" data-section="log">
  <h1>Log</h1>
  <ol class="breadcrumb">
  <li class="active"><i class="fa fa-gears"></i> Logs</li>
  </ol>
  </section>
   
  <!-- Dashboard content -->
  <section class="content" data-section="dashboard">
   
  <div class="box box-primary hide" id="mqttConsole">
  <div class="box-header with-border">
  <h3 class="box-title">MQTT Console</h3>
  </div>
  <form role="form">
  <div class="box-body">
  <div class="form-group">
  <label for="mqttConsoleTopic">Topic</label>
  <input type="text" class="form-control" id="mqttConsoleTopic" placeholder="Enter topic">
  </div>
  <div class="form-group">
  <label for="mqttConsoleMessage">Message</label>
  <input type="text" class="form-control" id="mqttConsoleMessage" placeholder="Enter message">
  </div>
  </div>
  <div class="box-footer">
  <button type="submit" class="btn btn-primary" id="mqttConsoleSend">Send</button>
  </div>
  </form>
  </div>
   
  <div class="row dashboard-notification">
  <div class="col-md-12">
  <div class="tab-bar tab-bar--top tab-bar--material pagination hide">
  <label class="tab-bar__item tab-bar--material__item" data-pagination="0" data-order="0">
  <input type="radio" name="tab-bar-material-a" checked="checked">
  <button class="tab-bar__button tab-bar--material__button">
  <i class="tab-bar__icon tab-bar--material__icon ion-drag"></i>
  <div class="tab-bar__label tab-bar--material__label">All</div>
  </button>
  </label>
  </div>
  </div>
  </div>
   
  </section>
   
  <!-- Custom subscriptions content -->
  <section class="content hide" data-section="custom-subscriptions">
   
  <div class="row subscriptions-notification">
  <div class="col-md-9">
  <div class="box box-primary">
  <div class="box-header with-border">
  <h3 class="box-title">Add new subscription</h3>
  </div>
  <form id="customSubscriptions">
  <div class="box-body">
  <div class="form-group">
  <label for="topic">Subscription topic</label>
  <input type="text" class="form-control" id="topic" name="topic" placeholder="Topic" />
  </div>
  <div class="form-group">
  <label for="widget">Widget</label>
  <select class="form-control" name="widget" id="widget">
  <option>-- select widget --</option>
  <option value="toggle" data-action="on">Toggle (on/off toggle)</option>
  <option value="radios" data-action="on">Radios (multiple choice action)</option>
  <option value="data" data-action="off">Data (show sensor data)</option>
  <option value="data-control" data-action="on">Data control (show sensor data/control value/heater)</option>
  <option value="pie" data-action="on">Pie chart</option>
  <option value="doughnut" data-action="on">Doughnut chart</option>
  </select>
  </div>
  <div class="form-group subscriptionWidgetJson">
  <label for="widgetJson">IoTCC Config</label>
  <textarea class="form-control" id="widgetJson" name="widgetJson" placeholder="Widget JSON" rows="10"></textarea>
  <button type="button" class="btn btn-primary beautify">Beautify JSON</button>
  <span class="help-block widgetJson"></span>
  </div>
  <div class="form-group subscriptionAction hide">
  <label for="publishTopic">Widget publish topic</label>
  <input type="text" class="form-control" id="publishTopic" name="publishTopic" placeholder="Widget publish topic" />
  </div>
  <div class="checkbox">
  <label for="active">
  <input type="checkbox" id="active" name="active" /> Activate
  </label>
  </div>
  </div>
  <div class="box-footer">
  <button type="submit" class="btn btn-primary" id="saveSubscription">Save</button>
  </div>
  <input type="hidden" name="index" />
  </form>
  </div>
  </div>
   
  <div class="col-md-3">
  <div class="box box-primary">
  <div class="box-header with-border">
  <h3 class="box-title">Widget Preview</h3>
  </div>
  <div class="box-body widget-preview">
   
  </div>
  <div class="box-body">
  <textarea class="form-control" id="widgetCodePreview" rows="10"></textarea>
  Available icons
  <ul>
  <li>
  <a href="http://ionicons.com/" target="_blank">Ionicons</a>
  </li>
  <li>
  <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome</a>
  </li>
  </ul>
  Available templates
  <ul>
  <li>template-1</li>
  <li>template-2</li>
  <li>template-3</li>
  <li>template-4</li>
  </ul>
  </div>
  </div>
  </div>
  </div>
   
  <div class="row">
  <div class="col-xs-12">
  <div class="box">
  <div class="box-header">
  <h3 class="box-title">Subscriptions</h3>
  </div>
  <div class="box-body table-responsive no-padding">
  <table class="table table-hover">
  <thead>
  <tr>
  <th></th>
  <th>ID</th>
  <th>Topic</th>
  <th>Widget</th>
  <th>Widget JSON</th>
  <th>Publish topic</th>
  <th>Active</th>
  </tr>
  </thead>
  <tbody class="subscriptions-table">
  </tbody>
  </table>
  </div>
  </div>
  </div>
  </div>
   
  </section>
   
  <!-- Settings content -->
  <section class="content hide" data-section="settings">
   
  <div class="row settings-notification1">
  <div class="col-md-12">
  <div class="box box-primary">
  <div class="box-header with-border">
  <h3 class="box-title">MQTT connection data</h3>
  </div>
  <form id="mqttConfig">
  <div class="box-body">
  <div class="form-group">
  <label for="clientId">Client ID</label>
  <input type="text" class="form-control" id="clientId" name="clientId" placeholder="Client ID" />
  </div>
  <div class="form-group">
  <label for="host">Host</label>
  <input type="text" class="form-control" id="host" name="host" placeholder="Host" />
  </div>
  <div class="form-group">
  <label for="port">Port</label>
  <input type="text" class="form-control" id="port" name="port" placeholder="Port" />
  </div>
  <div class="form-group">
  <label for="username">Username</label>
  <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="form-group">
  <label for="password">Password</label>
  <input type="text" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <div class="checkbox">
  <label for="secure">
  <input type="checkbox" id="secure" name="secure" /> Secure
  </label>
  </div>
  <div class="checkbox">
  <label for="debug">
  <input type="checkbox" id="debug" name="debug" /> Debug
  </label>
  </div>
  <div class="checkbox">
  <label for="simulateDevices">
  <input type="checkbox" id="simulateDevices" name="simulateDevices" /> Simulate devices
  </label>
  </div>
  </div>
  <div class="box-footer">
  <button type="submit" class="btn btn-primary" id="saveMqttConfig">Save</button>
  </div>
  </form>
  </div>
  </div>
  </div>
   
  <div class="row settings-notification2">
  <div class="col-md-12">
  <div class="box box-primary">
  <div class="box-header with-border">
  <h3 class="box-title">Options</h3>
  </div>
  <form id="appConfig">
  <div class="box-body">
  <div class="checkbox">
  <label for="pageContainer">
  <input type="checkbox" id="pageContainer" name="pageContainer" /> Add page container
  </label>
  </div>
  <div class="checkbox">
  <label for="templateDebug">
  <input type="checkbox" id="templateDebug" name="templateDebug" /> Template debug
  </label>
  </div>
  </div>
  <div class="box-footer">
  <button type="submit" class="btn btn-primary" id="saveAppConfig">Save</button>
  </div>
  </form>
  </div>
  </div>
  </div>
   
  <div class="row settings-notification3">
  <div class="col-md-12">
  <div class="box box-primary">
  <div class="box-header with-border">
  <h3 class="box-title">Backup/Restore</h3>
  </div>
  <form id="iotCCConfig">
  <div class="box-body">
  <div class="form-group">
  <label for="iotccconfig">IoTCC Config</label>
  <textarea class="form-control" id="iotccconfig" name="iotccconfig" placeholder="IoTCC Config" rows="10"></textarea>
  </div>
  </div>
  <div class="box-footer">
  <button type="submit" class="btn btn-primary" id="saveIoTCCConfig">Save</button>
  </div>
  </form>
  </div>
  </div>
  </div>
   
  </section>
   
  <!-- Log content -->
  <section class="content hide" data-section="log">
   
  <div class="box box-primary">
  <div class="box-header with-border">
  <h3 class="box-title">MQTT Log</h3>
  </div>
  <div class="box-body">
  <pre class="console"></pre>
  </div>
  </div>
   
  </section>
  </div>
   
  <footer class="main-footer">
  <div class="pull-right hidden-xs">
  <b>Version</b> 0.3
  </div>
  <strong>Copyright &copy; 2017 <a href="http://www.razvi.ro">Razvan Stanga</a>.</strong> All rights reserved.
  </footer>
   
  <aside class="control-sidebar control-sidebar-dark">
  <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
  <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-gear"></i></a></li>
</ul> </ul>
</div> <div class="tab-content">
</nav> <div class="tab-pane" id="control-sidebar-home-tab">
</header> </div>
<!-- Left side column. contains the logo and sidebar -->  
<aside class="main-sidebar"> <div class="tab-pane" id="control-sidebar-settings-tab">
<!-- sidebar: style can be found in sidebar.less --> <form method="post">
<section class="sidebar"> <h3 class="control-sidebar-heading">General Settings</h3>
<!-- /.search form -->  
<!-- sidebar menu: : style can be found in sidebar.less --> <div class="form-group">
<ul class="sidebar-menu"> <label class="control-sidebar-subheading">
<!--li class="header">Options</li--> Debug templates
<li class="active"> <input type="checkbox" class="pull-right" name="debugTemplates" />
<a href="#" class="navigation" data-section="dashboard"> </label>
<i class="fa fa-dashboard"></i> <span>Dashboard</span>  
</a> <p>
</li> Allow the user to show his name in blog posts
<li> </p>
<a href="#" class="navigation" data-section="settings"> </div>
<i class="fa fa-gears"></i> <span>Settings</span> </form>
</a> </div>
</li>  
<li>  
<a href="#" class="navigation" data-section="log">  
<i class="fa fa-align-justify"></i> <span>Log</span>  
</a>  
</li>  
</ul>  
</section>  
<!-- /.sidebar -->  
</aside>  
   
<!-- Content Wrapper. Contains page content -->  
<div class="content-wrapper">  
<section class="content-header" data-section="dashboard">  
<h1>Dashboard</h1>  
<ol class="breadcrumb">  
<li class="active"><i class="fa fa-dashboard"></i> Dashboard</li>  
</ol>  
<div class="">  
<div class="tab-bar tab-bar--top tab-bar--material pagination">  
<label class="tab-bar__item tab-bar--material__item" data-pagination="0">  
<input type="radio" name="tab-bar-material-a" checked="checked">  
<button class="tab-bar__button tab-bar--material__button">  
<i class="tab-bar__icon tab-bar--material__icon ion-drag"></i>  
<div class="tab-bar__label tab-bar--material__label">All</div>  
</button>  
</label>  
</div>  
</div> </div>
</section> </aside>
  <div class="control-sidebar-bg"></div>
<section class="content-header hide" data-section="settings">  
<h1>Settings</h1>  
<ol class="breadcrumb">  
<li class="active"><i class="fa fa-gears"></i> Settings</li>  
</ol>  
</section>  
   
<section class="content-header hide" data-section="log">  
<h1>Log</h1>  
<ol class="breadcrumb">  
<li class="active"><i class="fa fa-gears"></i> Logs</li>  
</ol>  
</section>  
   
<!-- Dashboard content -->  
<section class="content" data-section="dashboard">  
   
</section>  
   
<!-- Settings content -->  
<section class="content hide" data-section="settings">  
   
</section>  
<!-- /.content -->  
   
<!-- Log content -->  
<section class="content hide" data-section="log">  
<pre class="console"></pre>  
</section>  
<!-- /.content -->  
   
</div>  
<!-- /.content-wrapper -->  
   
<footer class="main-footer">  
<div class="pull-right hidden-xs">  
<b>Version</b> 0.1  
</div>  
<strong>Copyright &copy; 2017 <a href="http://www.razvi.ro">Razvan Stanga</a>.</strong> All rights reserved.  
</footer>  
   
<!-- Control Sidebar -->  
<aside class="control-sidebar control-sidebar-dark">  
<!-- Create the tabs -->  
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">  
<li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>  
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gear"></i></a></li>  
</ul>  
<!-- Tab panes -->  
<div class="tab-content">  
<!-- Home tab content -->  
<div class="tab-pane" id="control-sidebar-home-tab">  
   
</div>  
<!-- /.tab-pane -->  
   
<!-- Settings tab content -->  
<div class="tab-pane" id="control-sidebar-settings-tab">  
<form method="post">  
<h3 class="control-sidebar-heading">General Settings</h3>  
   
<div class="form-group">  
<label class="control-sidebar-subheading">  
Report panel usage  
<input type="checkbox" class="pull-right" checked>  
</label>  
   
<p>  
Some information about this general settings option  
</p>  
</div>  
<!-- /.form-group -->  
   
<div class="form-group">  
<label class="control-sidebar-subheading">  
Allow mail redirect  
<input type="checkbox" class="pull-right" checked>  
</label>  
   
<p>  
Other sets of options are available  
</p>  
</div>  
<!-- /.form-group -->  
   
<div class="form-group">  
<label class="control-sidebar-subheading">  
Expose author name in posts  
<input type="checkbox" class="pull-right" checked>  
</label>  
   
<p>  
Allow the user to show his name in blog posts  
</p>  
</div>  
<!-- /.form-group -->  
   
<h3 class="control-sidebar-heading">Chat Settings</h3>  
   
<div class="form-group">  
<label class="control-sidebar-subheading">  
Show me as online  
<input type="checkbox" class="pull-right" checked>  
</label>  
</div>  
<!-- /.form-group -->  
   
<div class="form-group">  
<label class="control-sidebar-subheading">  
Turn off notifications  
<input type="checkbox" class="pull-right">  
</label>  
</div>  
<!-- /.form-group -->  
   
<div class="form-group">  
<label class="control-sidebar-subheading">  
Delete chat history  
<a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>  
</label>  
</div>  
<!-- /.form-group -->  
</form>  
</div>  
<!-- /.tab-pane -->  
</div>  
</aside>  
<!-- /.control-sidebar -->  
<!-- Add the sidebar's background. This div must be placed  
immediately after the control sidebar -->  
<div class="control-sidebar-bg"></div>  
   
</div> </div>
<!-- ./wrapper -->  
   
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="bower_components/jquery-serialize-object/dist/jquery.serialize-object.min.js"></script>
<!-- AdminLTE App --> <!-- AdminLTE App -->
<script type="text/javascript"> <script type="text/javascript">
var AdminLTEOptions = { var AdminLTEOptions = {
sidebarExpandOnHover: true //sidebarExpandOnHover: true
}; };
</script> </script>
<script type="text/javascript" src="bower_components/AdminLTE/dist/js/app.min.js"></script> <script type="text/javascript" src="bower_components/AdminLTE/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes --> <!-- AdminLTE for demo purposes -->
<script type="text/javascript" src="bower_components/AdminLTE/dist/js/demo.js"></script> <script type="text/javascript" src="bower_components/AdminLTE/dist/js/demo.js"></script>
   
<script type="text/javascript" src="assets/js/mqtt.min.js"></script> <script type="text/javascript" src="assets/js/mqtt.min.js"></script>
<script type="text/javascript" src="config.js"></script>  
<script type="text/javascript" src="assets/js/iotcc.js"></script> <script type="text/javascript" src="assets/js/iotcc.js"></script>
  <script type="text/javascript" src="assets/js/simulateDevices.js"></script>
   
  <!-- widgets -->
  <script src="bower_components/chart.js/dist/Chart.min.js"></script>
  <script src="bower_components/justgage-toorshia/justgage.js"></script>
  <script src="bower_components/raphael/raphael-min.js"></script>
   
</body> </body>
</html> </html>
   
comments