gluon-web-remote

Web remote Administration for big size of gluon routers
git clone git://archive.git.mtrnord.blog/MTRNord/gluon-web-remote.git
Log | Files | Refs | README

index.tpl (6100B)


      1 {include_php file='indexClass.php'}
      2 {include_php file='libs/login-base/vendor/autoload.php'}
      3 {config_load file='index.conf'}
      4 <!DOCTYPE html>
      5 <html>
      6 
      7   <head>
      8     <title>Material Design for Bootstrap</title>
      9 
     10     <!-- Mobile support -->
     11     <meta name="viewport" content="width=device-width, initial-scale=1">
     12 
     13     <!-- Twitter Bootstrap -->
     14     <link href="css/bootstrap.min.css" rel="stylesheet">
     15 
     16     <!-- Material Design for Bootstrap -->
     17     <link href="css/roboto.min.css" rel="stylesheet">
     18     <link href="css/material-fullpalette.min.css" rel="stylesheet">
     19     <link href="css/ripples.min.css" rel="stylesheet">
     20 
     21     <!-- Dropdown.js -->
     22     <link href="css/jquery.dropdown.css" rel="stylesheet">
     23 
     24 	<!-- ex inline css -->
     25 	<link href="css/index.css" rel="stylesheet">
     26 
     27 
     28   </head>
     29   <body>
     30 
     31     <!--<a href="https://github.com/MTRNord/gluon-web-remote" style="position: absolute; top: 0; left: 0; border: 0; z-index: 10;"><img src="images/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" data-canonical-src="images/forkme_right_darkblue_121621.png"></a>-->
     32 
     33     <div class="header-panel shadow-z-2">
     34       <div class="container-fluid">
     35         <div class="row">
     36           <div class="col-xs-3">
     37             <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseNav" aria-expanded="false" aria-controls="collapseNav" style="position: absolute;bottom: 6px;padding-left: 20px;background-color:#dc0067;">
     38   {#collapseMenu#}
     39 </button>
     40           </div>
     41         </div>
     42       </div>
     43     </div>
     44     <div class="container-fluid main">
     45       <div class="row">
     46         <nav class="col-xs-3 menu collapse" id="collapseNav" style:"z-index:1000 !important;">
     47           <ul>
     48             <li class="active withripple" data-target="#welcome">{#welcomeHead#}</li>
     49             <li class="withripple" data-target="#tests">Tests</li>
     50             <li class="withripple" data-target="#login">{#login#}</li>
     51           </ul>
     52         </nav>
     53         <div class="pages col-xs-9">
     54           <div class="col-xs-10">
     55             <div class="well page active" id="welcome">
     56               <h1 class="header">{#welcomeHead#}</h1>
     57                 
     58                 <h3>{#abilitysHead#}</h3>
     59                 <p>{#abilitys#}</p>
     60             </div>
     61             <div class="well page" id="tests">
     62               <h1 class="header">Tests</h1>
     63 			  <p>
     64 			    <b>Just testing</b> <br/>
     65 			    {php}
     66 					main::openConnection("ls -la", "root", "xxxx", "tarp1", "FFKI");
     67 				{/php}
     68 			  </p>
     69             </div>
     70             <div class="well page" id="login">
     71                 <h1 class="header">{#login#}</h1>
     72                 {php}
     73                     // start login application
     74                     new Application();
     75                 {/php}
     76             </div>
     77           </div>
     78           <div class="col-xs-2">
     79             <button class="btn btn-fab btn-material-grey-200" id="opensource"><i class="mdi-action-open-in-new"></i></button></div>
     80         </div>
     81       </div>
     82     </div>
     83 
     84     <div id="source-modal" class="modal fade" tabindex="-1">
     85       <div class="modal-dialog modal-lg">
     86         <div class="modal-content">
     87           <div class="modal-header">
     88             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
     89             <h4 class="modal-title">Source Code</h4>
     90           </div>
     91           <div class="modal-body">
     92             <pre></pre>
     93           </div>
     94         </div>
     95       </div>
     96     </div>
     97 
     98 
     99     <!-- jQuery -->
    100     <script src="js/jquery-1.10.2.min.js"></script>
    101 
    102 
    103     <!-- Open source code -->
    104     {literal}
    105     <script>
    106       window.page = window.location.hash || "#welcome";
    107 
    108       $(document).ready(function() {
    109         if (window.page != "#welcome") {
    110           $(".menu").find("li[data-target=" + window.page + "]").trigger("click");
    111         }
    112       });
    113 
    114       $(window).on("resize", function() {
    115         $("html, body").height($(window).height());
    116         $(".main, .menu").height($(window).height() - $(".header-panel").outerHeight());
    117         $(".pages").height($(window).height());
    118       }).trigger("resize");
    119 
    120       $(".menu li").click(function() {
    121         // Menu
    122         if (!$(this).data("target")) return;
    123         if ($(this).is(".active")) return;
    124         $(".menu li").not($(this)).removeClass("active");
    125         $(".page").not(page).removeClass("active").hide();
    126         window.page = $(this).data("target");
    127         var page = $(window.page);
    128         window.location.hash = window.page;
    129         $(this).addClass("active");
    130 
    131 
    132         page.show();
    133 
    134         var totop = setInterval(function() {
    135             $(".pages").animate({scrollTop:0}, 0);
    136         }, 1);
    137 
    138         setTimeout(function() {
    139           page.addClass("active");
    140           setTimeout(function() {
    141             clearInterval(totop);
    142           }, 1000);
    143         }, 100);
    144       });
    145 
    146       function cleanSource(html) {
    147         var lines = html.split(/\n/);
    148 
    149         lines.shift();
    150         lines.splice(-1, 1);
    151 
    152         var indentSize = lines[0].length - lines[0].trim().length,
    153             re = new RegExp(" {" + indentSize + "}");
    154 
    155         lines = lines.map(function(line){
    156           if (line.match(re)) {
    157             line = line.substring(indentSize);
    158           }
    159 
    160           return line;
    161         });
    162 
    163         lines = lines.join("\n");
    164 
    165         return lines;
    166       }
    167 
    168       $("#opensource").click(function() {
    169         $.get(window.location.href, function(data){
    170           var html = $(data).find(window.page).html();
    171           html = cleanSource(html);
    172           $("#source-modal pre").text(html);
    173           $("#source-modal").modal();
    174         });
    175       });
    176     </script>
    177     {/literal}
    178     
    179     <!-- Twitter Bootstrap -->
    180     <script src="js/bootstrap.min.js"></script>
    181 
    182     <!-- Material Design for Bootstrap -->
    183     <script src="js/material.min.js"></script>
    184     <script src="js/ripples.min.js"></script>
    185     <script>
    186       $.material.init();
    187     </script>
    188 
    189     <!-- Dropdown.js -->
    190     <script src="js/jquery.dropdown.js"></script>
    191     {literal}
    192     <script>
    193       $("#dropdown-menu select").dropdown();
    194     </script>
    195     {/literal}
    196     
    197   </body>
    198 </html>