malhuda/lookingglass
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 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')) {
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')) {
die('LG_LOGO_URL not found in config.php');
}
@ -122,6 +125,9 @@ class LookingGlass
if (!defined('LG_CHECK_LATENCY')) {
die('LG_CHECK_LATENCY not found in config.php');
}
if (!defined('LG_THEME')) {
die('LG_THEME not found in config.php');
}
//@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.
- DNS checking to prevent unnecessary executions.
- Latency feature from visitor to LG.
- Dark/light/auto mode theme.
### Requirements
- 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,
'logo_url' => LG_LOGO_URL,
'logo_data' => LG_LOGO,
'logo_data_dark' => LG_LOGO_DARK,
//
'block_network' => LG_BLOCK_NETWORK,
'block_lookingglas' => LG_BLOCK_LOOKINGGLAS,

7
config.dist.php
View File

@ -5,10 +5,15 @@ use Hybula\LookingGlass;
const LG_TITLE = 'Looking Glass';
// 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;
const LG_LOGO_URL = 'https://github.com/hybula/lookingglass/';
// Theme mode;
const LG_THEME = 'auto';
// Enable the latency check feature;
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';
// 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;
const LG_LOGO_URL = 'https://github.com/hybula/lookingglass/';
// Theme mode;
const LG_THEME = 'auto';
// Enable the latency check feature;
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));
?>
<!doctype html>
<html lang="en">
<html lang="en" data-bs-theme="<?php if (LG_THEME != 'auto') echo LG_THEME; ?>">
<head>
<meta charset="utf-8">
<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">
<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'] ?>
</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 class="col-4 float-end">
<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>
<?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>
</div>
</form>
@ -288,6 +291,32 @@ $templateData['csrfToken'] = $_SESSION[LookingGlass::SESSION_CSRF] = bin2hex(ran
</footer>
</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 if ($templateData['session_call_backend']): ?>