<!doctype html> <!--[if IE 8 ]><html lang="en-US" class="ie ie8 lte9 lte8 no-js"><![endif]--> <!--[if IE 9 ]><html lang="en-US" class="ie ie9 lte9 no-js"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html lang="en-US" class="no-js"><!--<![endif]--> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="robots" content="index, follow, noodp, noydir" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="copyright" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>{{title|default("OPNsense") }}</title> <!-- include (theme) style --> <link href="/ui/themes/{{ui_theme|default('opnsense')}}/build/css/main.css" media="screen, projection" rel="stylesheet"> <!-- TODO: move to theme style --> <style> .menu-level-3-item { font-size: 90%; padding-left: 54px !important; } </style> <!-- Favicon --> <link href="/ui/themes/{{ui_theme|default('opnsense')}}/build/images/favicon.png" rel="shortcut icon"> <!-- Stylesheet for fancy select/dropdown --> <link rel="stylesheet" type="text/css" href="/ui/themes/{{ui_theme|default('opnsense')}}/build/css/bootstrap-select.css"> <!-- bootstrap dialog --> <link href="/ui/themes/{{ui_theme|default('opnsense')}}/build/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" /> <!-- Font awesome --> <link rel="stylesheet" href="/ui/css/font-awesome.min.css"> <!-- JQuery --> <script type="text/javascript" src="/ui/js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> // setup default scripting after page loading. $( document ).ready(function() { // hook into jquery ajax requests to ensure csrf handling. $.ajaxSetup({ 'beforeSend': function(xhr) { xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}" ); xhr.setRequestHeader("X-CSRFTokenKey", "{{ csrf_tokenKey }}" ); } }); // hide empty menu items $('#mainmenu > div > .collapse').each(function () { // cleanup empty second level menu containers $(this).find("div.collapse").each(function () { if ($(this).children().length == 0) { $("#mainmenu").find('[href="#' + $(this).attr('id') + '"]').remove(); $(this).remove(); } }); // cleanup empty first level menu items if ($(this).children().length == 0) { $("#mainmenu").find('[href="#' + $(this).attr('id') + '"]').remove(); } }); // hide submenu items $('#mainmenu .list-group-item').click(function(){ if($(this).attr('href').substring(0,1) == '#') { $('#mainmenu .list-group-item').each(function(){ if ($(this).attr('aria-expanded') == 'true' && $(this).data('parent') != '#mainmenu') { $("#"+$(this).attr('href').substring(1,999)).collapse('hide'); } }); } }); initFormHelpUI(); initFormAdvancedUI(); addMultiSelectClearUI(); // hook in live menu search $.ajax("/api/core/menu/search/", { type: 'get', cache: false, dataType: "json", data: {}, success: function (data) { var menusearch_items = []; $.each(data,function(idx, menu_item){ if (menu_item.Url != "") { menusearch_items.push({id:menu_item.Url, name:menu_item.breadcrumb}); } }); $("#menu_search_box").typeahead({ source: menusearch_items, matcher: function (item) { var ar = this.query.trim() if (ar == "") { return false; } ar = ar.toLowerCase().split(/\s+/); if (ar.length == 0) { return false; } var it = this.displayText(item).toLowerCase(); for (var i = 0; i < ar.length; i++) { if (it.indexOf(ar[i]) == -1) { return false; } } return true; }, afterSelect: function(item){ window.location.href = item.id; } }); } }); }); </script> <!-- JQuery Tokenize (http://zellerda.com/projects/tokenize) --> <script type="text/javascript" src="/ui/js/jquery.tokenize.js"></script> <link rel="stylesheet" type="text/css" href="/ui/css/jquery.tokenize.css" /> <!-- Bootgrind (grid system from http://www.jquery-bootgrid.com/ ) --> <link rel="stylesheet" type="text/css" href="/ui/css/jquery.bootgrid.css"/> <script type="text/javascript" src="/ui/js/jquery.bootgrid.js"></script> <!-- Bootstrap type ahead --> <script type="text/javascript" src="/ui/js/bootstrap3-typeahead.min.js"></script> <!-- OPNsense standard toolkit --> <script type="text/javascript" src="/ui/js/opnsense.js"></script> <script type="text/javascript" src="/ui/js/opnsense_ui.js"></script> <script type="text/javascript" src="/ui/js/opnsense_bootgrid_plugin.js"></script> </head> <body> <header class="page-head"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="/"> <img class="brand-logo" src="/ui/themes/{{ui_theme|default('opnsense')}}/build/images/default-logo.png" height="30"/> <img class="brand-icon" src="/ui/themes/{{ui_theme|default('opnsense')}}/build/images/icon-logo.png" height="30"/> </a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" style="width: 250px;" class="form-control" tabindex="1" placeholder="{{ lang._('Search') }}" data-provide="typeahead" id="menu_search_box"> <div class="input-group-btn"> <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </li> <li id="menu_messages"><a href="#">{{session_username}}@{{system_hostname}}.{{system_domain}}</a></li> </ul> </div> </div> </nav> </header> <main class="page-content col-sm-10 col-sm-push-2 "> <!-- menu system --> {{ partial("layout_partials/base_menu_system") }} <div class="row"> <!-- page header --> <header class="page-content-head"> <div class="container-fluid"> <ul class="list-inline"> <li class="__mb"><h1>{{title | default("")}}</h1></li> <li class="btn-group-container" id="service_status_container"> <!-- placeholder for service status buttons --> </li> </ul> </div> </header> <!-- page content --> <section class="page-content-main"> <div class="container-fluid"> <div class="row"> <section class="col-xs-12"> <div id="messageregion"></div> {{ content() }} </section> </div> </div> </section> </div> <!-- page footer --> <footer class="page-foot col-sm-push-2"> <div class="container-fluid"> <a target="_blank" href="https://opnsense.org/" class="redlnk">OPNsense</a> (c) 2014-2016 <a href="https://www.deciso.com" class="tblnk">Deciso B.V.</a> </div> </footer> </main> <!-- bootstrap script --> <script type="text/javascript" src="/ui/js/bootstrap.min.js"></script> <script type="text/javascript" src="/ui/js/bootstrap-select.min.js"></script> <!-- bootstrap dialog --> <script src="/ui/js/bootstrap-dialog.min.js"></script> </body> </html>