leo/lookingglass
1
0
Fork 0
mirror of https://github.com/hybula/lookingglass.git synced 2024-09-21 05:20:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add (auto) Dark mode

Browse source
This commit is contained in:
dqos 2023-11-21 15:12:45 +01:00
parent 2233426808
commit 979b1e081e
No known key found for this signature in database
6 changed files with 52 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
LookingGlass.php
View file

@ -50,6 +50,9 @@ class LookingGlass
if (!defined('LG_LOGO')) { if (!defined('LG_LOGO')) {
die('LG_LOGO not found in config.php'); die('LG_LOGO not found in config.php');
} }
if (!defined('LG_LOGO_DARK')) {
die('LG_LOGO_DARK not found in config.php');
}
if (!defined('LG_LOGO_URL')) { if (!defined('LG_LOGO_URL')) {
die('LG_LOGO_URL not found in config.php'); die('LG_LOGO_URL not found in config.php');
} }
@ -122,6 +125,9 @@ class LookingGlass
if (!defined('LG_CHECK_LATENCY')) { if (!defined('LG_CHECK_LATENCY')) {
die('LG_CHECK_LATENCY not found in config.php'); die('LG_CHECK_LATENCY not found in config.php');
} }
if (!defined('LG_THEME')) {
die('LG_THEME not found in config.php');
}
//@formatter:on //@formatter:on
} }

1
README.md
View file

@ -14,6 +14,7 @@ made user-friendly for everyone to use. It allows you to execute network related
- Easy to customize and to configure. - Easy to customize and to configure.
- DNS checking to prevent unnecessary executions. - DNS checking to prevent unnecessary executions.
- Latency feature from visitor to LG. - Latency feature from visitor to LG.
- Dark/light/auto mode theme.
### Requirements ### Requirements
- Any Linux distribution, this has been tested on RHEL 8 + 9. - Any Linux distribution, this has been tested on RHEL 8 + 9.

1
bootstrap.php
View file

@ -41,6 +41,7 @@ $templateData = [
'custom_head' => LG_CUSTOM_HEAD, 'custom_head' => LG_CUSTOM_HEAD,
'logo_url' => LG_LOGO_URL, 'logo_url' => LG_LOGO_URL,
'logo_data' => LG_LOGO, 'logo_data' => LG_LOGO,
'logo_data_dark' => LG_LOGO_DARK,
// //
'block_network' => LG_BLOCK_NETWORK, 'block_network' => LG_BLOCK_NETWORK,
'block_lookingglas' => LG_BLOCK_LOOKINGGLAS, 'block_lookingglas' => LG_BLOCK_LOOKINGGLAS,

7
config.dist.php
View file

@ -5,10 +5,15 @@ use Hybula\LookingGlass;
const LG_TITLE = 'Looking Glass'; const LG_TITLE = 'Looking Glass';
// Define a logo, this can be HTML too, see the other example for an image; // Define a logo, this can be HTML too, see the other example for an image;
const LG_LOGO = '<h2>Company Looking Glass</h2>'; const LG_LOGO = '<h2 style="color: #000000;">Company Looking Glass</h2>';
const LG_LOGO_DARK = '<h2 style="color: #ffffff;">Company Looking Glass</h2>';
// Define the URL where the logo points to; // Define the URL where the logo points to;
const LG_LOGO_URL = 'https://github.com/hybula/lookingglass/'; const LG_LOGO_URL = 'https://github.com/hybula/lookingglass/';
// Theme mode;
const LG_THEME = 'auto';
// Enable the latency check feature; // Enable the latency check feature;
const LG_CHECK_LATENCY = false; const LG_CHECK_LATENCY = false;

7
docker/php-fpm/src/config.php
View file

@ -5,10 +5,15 @@ use Hybula\LookingGlass;
const LG_TITLE = 'Looking Glass'; const LG_TITLE = 'Looking Glass';
// Define a logo, this can be HTML too, see the other example for an image; // Define a logo, this can be HTML too, see the other example for an image;
const LG_LOGO = '<h2>Company Looking Glass</h2>'; const LG_LOGO = '<h2 style="color: #000000;">Company Looking Glass</h2>';
const LG_LOGO_DARK = '<h2 style="color: #ffffff;">Company Looking Glass</h2>';
// Define the URL where the logo points to; // Define the URL where the logo points to;
const LG_LOGO_URL = 'https://github.com/hybula/lookingglass/'; const LG_LOGO_URL = 'https://github.com/hybula/lookingglass/';
// Theme mode;
const LG_THEME = 'auto';
// Enable the latency check feature; // Enable the latency check feature;
const LG_CHECK_LATENCY = false; const LG_CHECK_LATENCY = false;

35
index.php
View file

@ -96,7 +96,7 @@ if (LG_CHECK_LATENCY) {
$templateData['csrfToken'] = $_SESSION[LookingGlass::SESSION_CSRF] = bin2hex(random_bytes(12)); $templateData['csrfToken'] = $_SESSION[LookingGlass::SESSION_CSRF] = bin2hex(random_bytes(12));
?> ?>
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" data-bs-theme="<?php if (LG_THEME != 'auto') echo LG_THEME; ?>">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport"> <meta content="width=device-width, initial-scale=1" name="viewport">
@ -115,9 +115,12 @@ $templateData['csrfToken'] = $_SESSION[LookingGlass::SESSION_CSRF] = bin2hex(ran
<header class="d-flex align-items-center pb-3 mb-5 border-bottom"> <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<div class="col-8"> <div class="col-8">
<a class="d-flex align-items-center text-dark text-decoration-none" href="<?php echo $templateData['logo_url'] ?>" target="_blank"> <a class="d-flex align-items-center text-primary text-decoration-none color-mode-choice color-mode-light-visible" href="<?php echo $templateData['logo_url'] ?>" target="_blank">
<?php echo $templateData['logo_data'] ?> <?php echo $templateData['logo_data'] ?>
</a> </a>
<a class="d-flex align-items-center text-primary text-decoration-none color-mode-choice color-mode-dark-visible" href="<?php echo $templateData['logo_url'] ?>" target="_blank">
<?php echo $templateData['logo_data_dark'] ?>
</a>
</div> </div>
<div class="col-4 float-end"> <div class="col-4 float-end">
<select class="form-select" onchange="window.location = this.options[this.selectedIndex].value"> <select class="form-select" onchange="window.location = this.options[this.selectedIndex].value">
@ -234,7 +237,7 @@ $templateData['csrfToken'] = $_SESSION[LookingGlass::SESSION_CSRF] = bin2hex(ran
<div class="alert alert-danger mt-3" role="alert"><?php echo $templateData['error_message'] ?></div> <div class="alert alert-danger mt-3" role="alert"><?php echo $templateData['error_message'] ?></div>
<?php endif ?> <?php endif ?>
<div class="card card-body bg-light mt-4" style="display: none;" id="outputCard"> <div class="card card-body bg-dark text-light mt-4" style="display: none;" id="outputCard">
<pre id="outputContent" style="white-space: pre;word-wrap: normal;margin-bottom: 0;padding-bottom: 1rem;"></pre> <pre id="outputContent" style="white-space: pre;word-wrap: normal;margin-bottom: 0;padding-bottom: 1rem;"></pre>
</div> </div>
</form> </form>
@ -288,6 +291,32 @@ $templateData['csrfToken'] = $_SESSION[LookingGlass::SESSION_CSRF] = bin2hex(ran
</footer> </footer>
</div> </div>
<script type="text/javascript">
function setThemeClass() {
const colorMode = document.querySelector("html").getAttribute("data-bs-theme");
const allDivs = document.querySelectorAll('.color-mode-choice')
allDivs.forEach((div) => {
div.classList.add('d-none')
if (div.matches('.color-mode-' + colorMode + '-visible')){
div.classList.remove('d-none')
}
})
};
setThemeClass();
</script>
<?php if (LG_THEME == 'auto'): ?>
<script type="text/javascript">
function updateThemeHelper() {
const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.querySelector("html").setAttribute("data-bs-theme", colorMode);
setThemeClass();
}
updateThemeHelper();
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateThemeHelper);
</script>
<?php endif ?>
<?php echo isset($templateData['custom_footer']) ? $templateData['custom_footer'] : '' ?> <?php echo isset($templateData['custom_footer']) ? $templateData['custom_footer'] : '' ?>
<?php if ($templateData['session_call_backend']): ?> <?php if ($templateData['session_call_backend']): ?>