Merge pull request #115 from billz/theme-support

Support for themes

dist/css/hackernews.css

@@ -0,0 +1,78 @@
+html * {
+    font-family: Verdana, Geneva, sans-serif;
+    font-size: 10pt;
+    color: #828282;
+}
+
+.nav>li>a {
+    font-size: 12pt;
+}
+
+a:focus, a:hover {
+    color: #666;
+}
+
+h4 { 
+    font-size: 18px;
+}
+
+.panel {
+    border-radius: 1px;
+}
+
+.panel-primary {
+    border-color: #ff6600;
+}
+
+.panel-primary>.panel-heading {
+    border-color: #ff6600;
+    background-color: #ff6600;
+    color: #000;
+    font-size: 14pt;
+    font-weight: bold;
+}
+
+.panel-heading {
+    border-top-left-radius: 1px;
+    border-top-right-radius: 1px;
+}
+
+.panel-primary>.panel-heading .fa {
+    color: #fff;
+}
+
+.page-header {
+    font-size: 26pt;
+    margin: 10px 0 20px;
+}
+
+#wrapper,#page-wrapper,.panel-body,.nav>li>a,.navbar-default {
+    background-color: #f6f6ef;
+}
+
+.panel-footer {
+    background-color: #eee;
+}
+
+.btn-primary.btn-outline {
+    color: #c61931;
+    border-color: #c61931;
+}
+
+.btn-primary:hover {
+    background-color: #c61931;
+    border-color: #c61931;
+}
+
+.progress {
+    background-color: #eee;
+}
+
+.progress-bar {
+    color: #eee;
+}
+
+.info-item {
+    width: 140px;
+    float: left;
+}

dist/css/terminal.css

@@ -0,0 +1,182 @@
+html * {
+    font-family: Courier New, Andale Mono, monospace;
+    font-size: 10pt;
+    color: #33ff00;
+}
+
+#page-wrapper {
+    padding: 0 20px;
+    border-left: 1px solid #33ff00;
+}
+
+.nav>li>a {
+    font-size: 10pt;
+}
+
+.nav>li>a:focus, .nav>li>a:hover {
+    background-color: #000;
+}
+
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
+    color: #33ff00;
+    cursor: default;
+    background-color: #000;
+    border: 1px solid #33ff00;
+    border-bottom-color: #33ff00;
+}
+
+.nav-tabs>li>a,.nav-tabs>li>a:hover {
+    border: 1px solid #33ff00;
+}
+
+.nav-tabs {
+    border-bottom: 1px solid #33ff00;
+}
+
+.navbar-default {
+    border-color: #33ff00;
+}
+
+.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
+    color: #33ff00;
+}
+
+.logo {
+    visibility: collapse;
+    width: 0px;
+}
+
+a:focus, a:hover {
+    color: #33ff00;
+}
+
+.panel-primary {
+    border-color: #33ff00;
+}
+
+.panel-primary>.panel-heading {
+    border-color: #33ff00;
+    background-color: #33ff00;
+    color: #000;
+    font-size: 12pt;
+}
+
+.panel-primary>.panel-heading .fa {
+    color: #000;
+}
+
+.panel {
+    margin-bottom: 20px;
+    border: 1px solid #33ff00;
+    border-radius: 0px;
+}
+
+.page-header {
+    font-size: 24pt;
+    margin: 10px 0 20px;
+    border-bottom: 1px solid #33ff00;
+}
+
+#wrapper,#page-wrapper,.panel-body,.nav>li>a,.navbar-default {
+    background-color: #000;
+}
+
+.panel-footer {
+    background-color: #000;
+    border-top: 1px solid #33ff00;
+}
+
+.panel-primary>.panel-heading::before, .navbar-default::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+    z-index: 2;
+    background-size: 100% 2px, 3px 100%;
+    pointer-events: none;
+}
+
+.sidebar ul li a.active,.sidebar ul li a.hover {
+    background-color: #000;
+}
+
+.sidebar ul li {
+    border-bottom: 1px solid #33ff00;
+}
+
+.btn-primary.btn-outline,.btn-warning {
+    color: #33ff00;
+    border-color: #33ff00;
+}
+
+.btn-primary:hover,.btn-primary:focus,.btn-warning:hover,.btn-warning:focus,.btn-primary:active {
+    color: #33ff00;
+    background-color: #000;
+    border-color: #33ff00;
+}
+
+.btn-primary.btn-outline:hover,.btn-success, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover {
+    color: #33ff00;
+}
+
+.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
+    background-color: #000;
+    border-top: 1px solid #000;
+}
+
+.btn-info, .btn-info:hover, .btn-info[disabled], .btn-danger.disabled, .btn-danger.disabled.active, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled], .btn-danger[disabled].active, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger.active, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover, .btn-info:hover {
+    background-color: #000;
+    border-color: #33ff00;
+    color: #33ff00;
+}
+
+.btn {
+    background-color: #000;
+    border-radius: 0px;
+}
+
+.alert {
+    border-radius: 0px;
+}
+
+.alert-success,.alert-warning,.alert-ifo,.alert-dismissable {
+    color: #33ff00;
+    background-color: #000;
+    border-color: #33ff00;
+    border: 1px dashed;
+}
+
+.close {
+    font-size: 18px;
+    font-weight: normal;
+    text-shadow: 0 0px 0 #000;
+    opacity: 1;
+}
+
+.form-control, .form-control:focus {
+    color: #33ff00;
+    background-color: #000;
+    border: 1px solid #33ff00;
+    border-radius: 0px;
+    transition: unset;
+}
+
+.progress {
+    background-color: #000;
+    border-radius: 0px;
+}
+
+.progress-bar {
+    color: #000;
+}
+
+.info-item {
+    width: 140px;
+    float: left;
+}
+
+

dist/js/sb-admin-2.js

@@ -1,9 +1,30 @@
 $(function() {
-
+    $('#theme-select').change(function() {
-    $('#side-menu').metisMenu();
+        var theme = themes[$( "#theme-select" ).val() ]; 
-
+        set_theme(theme);
+   });
 });
 
+function set_theme(theme) {
+    $('link[title="main"]').attr('href', theme);
+
+    // persist selected theme in cookie 
+    setCookie('theme',theme,90);
+}
+
+function setCookie(cname, cvalue, exdays) {
+    var d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    var expires = "expires="+ d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+var themes = {
+    "default": "dist/css/custom.css",
+    "hackernews" : "dist/css/hackernews.css",
+    "terminal" : "dist/css/terminal.css",
+}
+
 //Loads the correct sidebar on window load,
 //collapses the sidebar on window resize.
 // Sets the min-height of #page-wrapper to window size
@@ -34,3 +55,4 @@ $(function() {
         element.addClass('active');
     }
 });
+

includes/themes.php

@@ -0,0 +1,47 @@
+<?php
+/**
+*
+*
+*/
+function DisplayThemeConfig(){
+
+  ?>
+  <div class="row">
+  <div class="col-lg-12">
+  <div class="panel panel-primary">
+  <div class="panel-heading"><i class="fa fa-wrench fa-fw"></i> Change Theme</div>
+  <div class="panel-body">
+    <div class="row">
+    <div class="col-md-6">
+    <div class="panel panel-default">
+    <div class="panel-body">
+      <h4>Theme settings</h4>
+
+  <div class="row">
+          <div class="form-group col-md-6">
+            <label for="code">Select a theme</label>  
+              <select class="form-control" id="theme-select">Select a Theme</a>
+                <option value="default" class="theme-link">RaspAP (default)</option>
+                <option value="hackernews" class="theme-link">HackerNews</option>
+                <option value="terminal" class="theme-link">Terminal</option>
+              </select>
+          </div>
+        </div>
+
+    </div><!-- /.panel-body -->
+    </div><!-- /.panel-default -->
+    </div><!-- /.col-md-6 -->
+    </div><!-- /.row -->
+
+    <form action="?page=system_info" method="POST">
+      <input type="button" class="btn btn-outline btn-primary" value="Refresh" onclick="document.location.reload(true)" />
+    </form>
+
+  </div><!-- /.panel-body -->
+  </div><!-- /.panel-primary -->
+  </div><!-- /.col-lg-12 -->
+  </div><!-- /.row -->
+  <?php
+}
+?>
+

index.php

@@ -50,6 +50,7 @@ include_once( 'includes/dhcp.php' );
 include_once( 'includes/hostapd.php' );
 include_once( 'includes/system.php' );
 include_once( 'includes/configure_client.php' );
+include_once( 'includes/themes.php' );
 
 $output = $return = 0;
 $page = $_GET['page'];
@@ -63,6 +64,12 @@ if (empty($_SESSION['csrf_token'])) {
     }
 }
 $csrf_token = $_SESSION['csrf_token'];
+
+if(!isset($_COOKIE['theme'])) {
+    $theme_url = "dist/css/custom.css";
+} else {
+    $theme_url = $_COOKIE['theme'];
+}
 ?>
 
 <!DOCTYPE html>
@@ -95,7 +102,7 @@ $csrf_token = $_SESSION['csrf_token'];
     <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
     <!-- Custom CSS -->
-    <link href="dist/css/custom.css" rel="stylesheet">
+    <link href="<?php echo $theme_url; ?>" title="main" rel="stylesheet">
 
     <link rel="shortcut icon" type="image/png" href="../img/favicon.png">
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -150,6 +157,9 @@ $csrf_token = $_SESSION['csrf_token'];
               <li>
                 <a href="index.php?page=auth_conf"><i class="fa fa-lock fa-fw"></i> Configure Auth</a>
               </li>
+              <li>
+                <a href="index.php?page=theme_conf"><i class="fa fa-wrench fa-fw"></i> Change Theme</a>
+              </li>
               <li>
                  <a href="index.php?page=system_info"><i class="fa fa-cube fa-fw"></i> System</a>
               </li>
@@ -196,6 +206,9 @@ $csrf_token = $_SESSION['csrf_token'];
           case "save_hostapd_conf":
             SaveTORAndVPNConfig();
             break;
+          case "theme_conf":
+            DisplayThemeConfig();
+            break;
           case "system_info":
             DisplaySystem();
             break;