frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2023-10-10 13:37:24 +02:00
Code Issues Releases Wiki Activity

Merge pull request #115 from billz/theme-support

Browse Source 
Support for themes
This commit is contained in:
Bill Zimmerman 2017-10-08 18:19:11 +02:00 committed by GitHub
commit b6fe00b880
5 changed files with 346 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
dist/css/hackernews.css vendored Normal file
View File

@ -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;
}

182
dist/css/terminal.css vendored Normal file
View File

@ -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;
}

28
dist/js/sb-admin-2.js vendored
View File

@ -1,9 +1,30 @@
$(function() {
$('#side-menu').metisMenu();
$('#theme-select').change(function() {
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');
}
});

47
includes/themes.php Normal file
View File

@ -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
}
?>

15
index.php
View File

@ -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;