diff --git a/app/css/all.css b/app/css/all.css new file mode 100644 index 00000000..12a47159 --- /dev/null +++ b/app/css/all.css @@ -0,0 +1,230 @@ +/* +Name: all.css +Author: @billz +Author URI: https://github.com/billz +Description: Classes shared by all themes +License: GNU General Public License v3.0 +*/ + +/* Small devices (portrait phones, up to 576px) */ +@media (max-width: 576px) { + .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; } + .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; } + .row { margin-left: 0rem; margin-right: 0rem; } + .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; } + .form-group.col-md-6 { margin-left: -0.5rem; } + h4.mt-3 { margin-left: 0.5rem; } +} + +.sidebar-brand-text { + text-transform: none; + color: #212529; + font-size: 2.0rem; + font-weight: 500; + font-family: Helvetica, Arial, sans-serif; +} + +.h-underlined { + border-bottom: 1px solid #e3e6f0; + padding-bottom: 0.3rem; +} + +.navbar-logo { + margin-top: 0.5em; + margin-left: 0.5em; +} + +.page-header { + font-size: 26pt; + margin: 20px 0 20px; +} + +.info-item { + text-transform: uppercase; + font-size: 0.7em; + color: #858796; +} + +.info-value { + font-size: 0.7rem; + margin-left: 0.7rem; +} + +.info-item-xs { + font-size: 0.7rem; + margin-left: 0.3rem; +} + +.info-item-wifi { + width: 6rem; + float: left; +} + +.service-status { + border-width: 0; + align-items: center; +} + +.service-status-up { + color: #a1ec38 !important; +} + +.service-status-warn { + color: #f6f044 !important; +} + +.service-status-down { + color: #f80107 !important; + animation: flash 1s linear infinite; +} +@keyframes flash { + 50% { + opacity: 0; + } +} + +.logoutput { + width:100%; + height: 20rem; + border: 1px solid #d1d3e2; + border-radius: .35rem; +} + +.dhcp-static-leases { + margin-top: 1em; + margin-bottom: 1em; +} + +.dhcp-static-lease-row { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.loading-spinner { + background: url("../../app/img/loading-spinner.gif") no-repeat scroll center center transparent; + min-height: 450px; + width: 100%; +} + +@media (min-width: 576px) { + .card-grid { + display: grid; + grid-template-columns: minmax(0, 1fr) 50%; + grid-gap: 1rem; + } +} + +.toggle-off.btn { + padding-left: 1.2rem; + font-size: 0.9rem!important; +} + +.toggle-on.btn { + font-size: 0.9rem!important; +} + +canvas#divDBChartBandwidthhourly { + height: 350px!important; +} + +.chart-container { + height: 150px; + width: 200px; +} + +.dbChart { + display: flex; + height: 80%; +} + +.table { + margin-bottom: 0rem; +} + +.check-hidden { + visibility: hidden; +} + +.check-progress { + color: #999; +} + +.fa-check { + color: #90ee90; +} + +.fa-times { + color: #ff4500; +} + +button.btn.btn-light.js-toggle-password { + border: 1px solid lightgrey; +} + +.signal-icon { + margin-top: 2px; + height: 16px; + width: 16px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: baseline; +} +.signal-icon .signal-bar { + width: 4px; + border-radius: 1px; + opacity: 30%; + background: ; +} + +.signal-icon .signal-bar:nth-child(1) { height: 40%; } +.signal-icon .signal-bar:nth-child(2) { height: 70%; } +.signal-icon .signal-bar:nth-child(3) { height: 100%; } + +.signal-icon.weak .signal-bar:nth-child(1), +.signal-icon.medium .signal-bar:nth-child(1), +.signal-icon.medium .signal-bar:nth-child(2), +.signal-icon.strong .signal-bar:nth-child(1), +.signal-icon.strong .signal-bar:nth-child(2), +.signal-icon.strong .signal-bar:nth-child(3) +{ opacity: 100%; }.signal-icon { + margin-top: 2px; + height: 16px; + width: 16px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: baseline; +} +.signal-icon .signal-bar { + width: 4px; + border-radius: 1px; + opacity: 30%; +} + +.signal-icon .signal-bar:nth-child(1) { height: 40%; } +.signal-icon .signal-bar:nth-child(2) { height: 70%; } +.signal-icon .signal-bar:nth-child(3) { height: 100%; } + +.signal-icon.weak .signal-bar:nth-child(1), +.signal-icon.medium .signal-bar:nth-child(1), +.signal-icon.medium .signal-bar:nth-child(2), +.signal-icon.strong .signal-bar:nth-child(1), +.signal-icon.strong .signal-bar:nth-child(2), +.signal-icon.strong .signal-bar:nth-child(3) +{ opacity: 100%; } + +.gs-edit { + border: 1px dashed #ccc; + background-color: #f1faee; + border-radius: 4px; +} + +figcaption.figure-caption a { + color: #858796; +} + +button > i.fas { + pointer-events: none; +} + diff --git a/app/css/custom.php b/app/css/custom.php index cec2f96b..ff87b3b2 100644 --- a/app/css/custom.php +++ b/app/css/custom.php @@ -12,46 +12,16 @@ Description: Default theme for RaspAP License: GNU General Public License v3.0 */ +@import url('all.css'); + body { color: #212529; } -.h-underlined { - border-bottom: 1px solid #e3e6f0; - padding-bottom: 0.3rem; -} - -.page-header { - margin: 20px 0 20px; -} - -.navbar-logo { - margin-top: 0.5em; - margin-left: 0.5em; -} - -/* Small devices (portrait phones, up to 576px) */ -@media (max-width: 576px) { - .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; } - .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; } - .row { margin-left: 0rem; margin-right: 0rem; } - .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; } - .form-group.col-md-6 { margin-left: -0.5rem; } - h4.mt-3 { margin-left: 0.5rem; } -} - .sidebar { background-color: #f8f9fc; } -.sidebar-brand-text { - text-transform: none; - color: #212529; - font-size: 2.0rem; - font-weight: 500; - font-family: Helvetica, Arial, sans-serif; -} - .sidebar .nav-item.active .nav-link { font-weight: 500; } @@ -122,87 +92,12 @@ i.fa.fa-bars:hover{ color: #6e707e; } -.info-item { - text-transform: uppercase; - font-size: 0.7em; - color: #858796; -} - -.info-value { - font-size: 0.7rem; - margin-left: 0.7rem; -} - -.info-item-xs { - font-size: 0.7rem; - margin-left: 0.3rem; -} - -.info-item-wifi { - width: 6rem; - float: left; -} - -.service-status { - border-width: 0; - align-items: center; -} - -.service-status-up { - color: #a1ec38; -} - -.service-status-warn { - color: #f6f044; -} - -.service-status-down { - color: #f80107; - animation: flash 1s linear infinite; -} -@keyframes flash { - 50% { - opacity: 0; - } -} - -.logoutput { - width:100%; - height: 20rem; - border: 1px solid #d1d3e2; - border-radius: .35rem; -} - pre.unstyled { border-width: 0; background-color: transparent; padding: 0; } -.dhcp-static-leases { - margin-top: 1em; - margin-bottom: 1em; -} - -.dhcp-static-lease-row { - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.loading-spinner { - background: url("../../app/img/loading-spinner.gif") no-repeat scroll center center transparent; - min-height: 150px; - width: 100%; -} - -@media (min-width: 576px) { - .card-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) 50%; - grid-gap: 1rem; - } -} - .sidebar.toggled .nav-item .nav-link span { display: none; } .sidebar .nav-item .nav-link i, @@ -214,46 +109,7 @@ pre.unstyled { color: #000; } -.toggle-off.btn { - padding-left: 1.2rem; - font-size: 0.9rem!important; -} - -.toggle-on.btn { - font-size: 0.9rem!important; -} - -canvas#divDBChartBandwidthhourly { - height: 350px!important; -} - -.chart-container { - height: 150px; - width: 200px; -} - -.table { - margin-bottom: 0rem; -} - -.check-hidden { - visibility: hidden; -} - -.check-updated { - opacity: 0; - color: #90ee90; -} - -.check-progress { - color: #999; -} - -.fa-check { - color: #90ee90; -} - -.fa-times { - color: #ff4500; +.signal-icon .signal-bar { + background: ; } diff --git a/app/css/hackernews.css b/app/css/hackernews.css index 53ec065f..76a55370 100644 --- a/app/css/hackernews.css +++ b/app/css/hackernews.css @@ -6,6 +6,8 @@ Description: A theme inspired by HackerNews for RaspAP License: GNU General Public License v3.0 */ +@import url('all.css'); + html * { font-family: Verdana, Geneva, sans-serif; color: #828282; @@ -33,13 +35,8 @@ h5.card-title { color: #212529; } -.h-underlined { - border-bottom: 1px solid #e3e6f0; - padding-bottom: 0.3rem; -} - .card, .modal-dialog { - border-radius: 1px; + border-radius: 3px; border-color: #ff6600; } @@ -71,14 +68,6 @@ h5.card-title { border-radius: 0px; } -.sidebar-brand-text { - text-transform: none; - color: #212529; - font-size: 2.0rem; - font-weight: 500; - font-family: Verdana, Geneva, sans-serif; -} - .sidebar-light hr.sidebar-divider { padding-top: 0.5rem; } @@ -90,38 +79,19 @@ ul.nav-tabs, .nav-tabs .nav-link { .sidebar .nav-item .nav-link { padding: 0.6rem; + margin-left: 0.6rem; } .sidebar-light .nav-item.active .nav-link { font-weight: 300; } -.page-header { - font-size: 26pt; - margin: 10px 0 20px; -} - -.navbar-logo { - margin-top: 0.5em; - margin-left: 0.5em; -} - #wrapper,#page-wrapper, #wrapper #content-wrapper, .nav>li>a,.nav { background-color: #fff; } -/* Small devices (portrait phones, up to 576px) */ -@media (max-width: 576px) { - .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; } - .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; } - .row { margin-left: 0rem; margin-right: 0rem; } - .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; } - .form-group.col-md-6 { margin-left: -0.5rem; } - h4.mt-3 { margin-left: 0.5rem; } -} - .card-body { background-color: #f6f6ef; } @@ -152,60 +122,8 @@ ul.nav-tabs, .nav-tabs .nav-link { color: #eee; } -.info-item { - text-transform: uppercase; - font-size: 0.7em; - color: #858796; -} - -.info-value { - font-size: 0.7rem; - margin-left: 0.7rem; -} - -.info-item-xs { - font-size: 0.7rem; - margin-left: 0.3rem; - line-height: 1.5em; -} - -.info-item-wifi { - width: 6rem; - float: left; -} - -.logoutput { - width: 100%; - height: 20rem; - border: 1px solid #d1d3e2; - border-radius: .35rem; -} - -.service-status { - border-width: 0; - align-items: center; -} - -.service-status-up { - color: #a1ec38!important; -} - -.service-status-warn { - color: #f6f044!important; -} - -.service-status-down { - color: #f80107!important; - animation: flash 1s linear infinite; -} -@keyframes flash { - 50% { - opacity: 0; - } -} - .fas.fa-circle { - font-size: 0.5rem; + font-size: 0.7rem; } .logoutput { @@ -219,30 +137,6 @@ pre.unstyled { padding: 0; } -.dhcp-static-leases { - margin-top: 1em; - margin-bottom: 1em; -} - -.dhcp-static-lease-row { - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.loading-spinner { - background: url("../../app/img/loading-spinner.gif") no-repeat scroll center center transparent; - min-height: 150px; - width: 100%; -} - -@media (min-width: 576px) { - .card-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) 50%; - grid-gap: 1rem; - } -} - .sidebar.toggled .nav-item .nav-link { text-align: center; padding: .6rem 1rem; @@ -260,45 +154,7 @@ pre.unstyled { color: #000; } -.toggle-off.btn { - padding-left: 0.9rem; - font-size: 0.9rem!important; -} - -.toggle-on.btn { - font-size: 0.9rem!important; -} - -canvas#divDBChartBandwidthhourly { - height: 350px!important; -} - -.chart-container { - height: 150px; - width: 200px; -} -.table { - margin-bottom: 0rem; -} - -.check-hidden { - visibility: hidden; -} - -.check-updated { - opacity: 0; - color: #1cc88a; -} - -.check-progress { - color: #999; -} - -.fa-check { - color: #90ee90; -} - -.fa-times { - color: #ff4500; +.signal-icon .signal-bar { + background: #ff6600; } diff --git a/app/css/lightsout.css b/app/css/lightsout.css index aa42b720..aea5c83d 100644 --- a/app/css/lightsout.css +++ b/app/css/lightsout.css @@ -6,6 +6,8 @@ Description: A dark mode theme for RaspAP License: GNU General Public License v3.0 */ +@import url('all.css'); + html * { font-family: Helvetica,Arial,sans-serif; color: #afafaf; @@ -23,20 +25,9 @@ h5.card-title { font-size: 1.2rem; } -.h-underlined { - border-bottom: 1px solid #e3e6f0; - padding-bottom: 0.3rem; -} - .page-header { - padding: 0 20px; border-left: .01rem solid #d2d2d2; -} - -.navbar-logo { - margin-top: 0.5em; - margin-left: 0.5em; - filter: brightness(70%); + border-bottom: .01rem solid #d2d2d2; } .sidebar-light .nav-item.active .nav-link i { @@ -51,16 +42,6 @@ h5.card-title { background-color: #202020; } -/* Small devices (portait phones, up to 576px) */ -@media (max-width: 576px) { - .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; } - .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; } - .row { margin-left: 0rem; margin-right: 0rem; } - .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; } - .form-group.col-md-6 { margin-left: -0.5rem; } - h4.mt-3 { margin-left: 0.5rem; } -} - .topbar { background-color: #202020; } @@ -95,7 +76,6 @@ h5.card-title { } #content, .navbar, .sidebar, .footer, .sticky-footer { - background-image: url('/app/img/bg.png'); background-attachment: scroll; background-repeat: repeat; background-size: auto; @@ -159,18 +139,8 @@ hr { border-top: .01rem solid #d2d2d2; } -.page-header { - font-size: 24pt; - margin: 10px 0 20px; - border-bottom: .01rem solid #d2d2d2; -} - .sidebar-brand-text { - text-transform: none; - color: #ac1b3d; - font-size: 2.0rem; - font-weight: 500; - font-family: inherit; + color: #2b8080 !important; } .ra-raspap:before { @@ -252,28 +222,6 @@ hr { border-right: 1px solid #404040; } -.info-item { - text-transform: uppercase; - font-size: 0.7em; - color: #858796; -} - -.info-value { - font-size: 0.7rem; - margin-left: 0.7rem; -} - -.info-item-xs { - font-size: 0.7rem; - line-height: 1.5em; - margin-left: 0.5rem; -} - -.info-item-wifi { - width: 6rem; - float: left; -} - .label-warning { background-color: #d2d2d2; } @@ -367,15 +315,25 @@ color: #d2d2d2 !important background-color: #d2d2d2; } -.logoutput { - width: 100%; - height: 300px; - background-color: #202020; - border-color: #404040; +.figure-img { + filter: opacity(0.7); } -tspan, rect { - fill: #d2d2d2; +.ra-wireguard:before { + color: #404040 !important; +} + +.ra-wireguard:hover:before { + color: #d1d3e2 !important; +} + +.sidebar .nav-item.active .nav-link span.ra-wireguard:before { + color: #d2d2d2 !important; +} + +.logoutput { + background-color: #202020; + border-color: #404040; } .text-muted { @@ -383,29 +341,7 @@ tspan, rect { } .fas.fa-circle { - font-size: 0.5rem; -} - -.service-status { - align-items: center; -} - -.service-status-up { - color: #a1ec38 !important; -} - -.service-status-warn { - color: #f6f044 !important; -} - -.service-status-down { - color: #f80107 !important; - animation: flash 1s linear infinite; -} -@keyframes flash { - 50% { - opacity: 0; - } + font-size: 0.7rem; } pre { @@ -413,74 +349,12 @@ pre { border: #202020; } -.dhcp-static-leases { - margin-top: 1em; - margin-bottom: 1em; +button.btn.btn-light.js-toggle-password { + border: 1px solid #343434; } -.dhcp-static-lease-row { - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.loading-spinner { - background: url("../../app/img/loading-spinner.gif") no-repeat scroll center center transparent; - min-height: 150px; - width: 100%; -} - -@media (min-width: 576px) { - .card-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) 50%; - grid-gap: 1rem; - } -} - -.toggle-off.btn { - padding-left: 1.2rem; - font-size: 0.9rem!important; -} - -.toggle-on.btn { - font-size: 0.9rem!important; -} - -canvas#divDBChartBandwidthhourly { - height: 350px!important; -} - -.chart-container { - height: 150px; - width: 200px; -} - -.table { - margin-bottom: 0rem; -} - -.figure, .authors { - filter: brightness(70%) !important; -} - -.check-hidden { - visibility: hidden; -} - -.check-updated { - opacity: 0; - color: #1cc88a; -} - -.check-progress { - color: #999; -} - -.fa-check { - color: #90ee90; -} - -.fa-times { - color: #ff4500; + +.signal-icon .signal-bar { + background: #2b8080; } diff --git a/app/img/authors-8bit-200px.png b/app/img/authors-8bit-200px.png deleted file mode 100644 index 72c6f1b3..00000000 Binary files a/app/img/authors-8bit-200px.png and /dev/null differ diff --git a/app/img/bg.png b/app/img/bg.png deleted file mode 100644 index 0f31eecd..00000000 Binary files a/app/img/bg.png and /dev/null differ diff --git a/app/js/custom.js b/app/js/custom.js index 1412b44f..3bae9432 100644 --- a/app/js/custom.js +++ b/app/js/custom.js @@ -480,18 +480,18 @@ Array.range = (start, end) => Array.from({length: (end - start)}, (v, k) => k + $(document).on("click", ".js-toggle-password", function(e) { var button = $(e.target) var field = $(button.data("target")); + if (field.is(":input")) { e.preventDefault(); if (!button.data("__toggle-with-initial")) { - button.data("__toggle-with-initial", button.text()) + $("i", this).removeClass("fas fa-eye").addClass(button.attr("data-toggle-with")); } if (field.attr("type") === "password") { - button.text(button.data("toggle-with")); field.attr("type", "text"); } else { - button.text(button.data("__toggle-with-initial")); + $("i", this).removeClass("fas fa-eye-slash").addClass("fas fa-eye"); field.attr("type", "password"); } } diff --git a/includes/wifi_functions.php b/includes/wifi_functions.php index 9b2ebf75..990ff07c 100755 --- a/includes/wifi_functions.php +++ b/includes/wifi_functions.php @@ -2,6 +2,9 @@ require_once 'functions.php'; +const MIN_RSSI = -100; +const MAX_RSSI = -55; + function knownWifiStations(&$networks) { // Find currently configured networks @@ -191,7 +194,42 @@ function reinitializeWPA($force) * * @param string $ssid */ -function ssid2utf8($ssid) { +function ssid2utf8($ssid) +{ return evalHexSequence($ssid); } +/* + * Returns a signal strength indicator based on RSSI value + * + * @param string $rssi + */ +function getSignalBars($rssi) +{ + // assign css class based on RSSI value + if ($rssi >= MAX_RSSI) { + $class = 'strong'; + } elseif ($rssi >= -56) { + $class = 'medium'; + } elseif ($rssi >= -67) { + $class = 'weak'; + } elseif ($rssi >= -89) { + $class = ''; + } + + // calculate percent strength + if ($rssi >= -50) { + $pct = 100; + } elseif ($rssi <= MIN_RSSI) { + $pct = 0; + } else { + $pct = 2*($rssi + 100); + } + $elem = '
'.PHP_EOL; + for ($n = 0; $n < 3; $n++ ) { + $elem .= '
'.PHP_EOL; + } + $elem .= '
'.PHP_EOL; + return $elem; +} + diff --git a/templates/dashboard.php b/templates/dashboard.php index 597dc6b5..3b727517 100755 --- a/templates/dashboard.php +++ b/templates/dashboard.php @@ -24,7 +24,9 @@

- +
+ +
diff --git a/templates/wifi_stations/network.php b/templates/wifi_stations/network.php index 1199a5e5..87db2123 100644 --- a/templates/wifi_stations/network.php +++ b/templates/wifi_stations/network.php @@ -4,7 +4,7 @@ -
+
@@ -29,21 +29,14 @@
- = -200) { - echo htmlspecialchars($network['RSSI'], ENT_QUOTES); - echo "dB ("; - if ($network['RSSI'] >= -50) { - echo 100; - } elseif ($network['RSSI'] <= -100) { - echo 0; - } else { - echo 2*($network['RSSI'] + 100); - } - echo "%)"; + = -200) { + echo '
'; + echo getSignalBars($network['RSSI']); + echo '
' .htmlspecialchars($network['RSSI'], ENT_QUOTES) . "dB" . "
"; + echo '
'; } else { echo " not found "; - } + } ?>
@@ -52,18 +45,18 @@ -
-
+
+
-
+
- +