cody/dj_mix_hosting_software
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dark mode and other color enhancements to match

Browse source
This commit is contained in:
Cody Cook 2024-05-13 19:38:06 -07:00
commit 8b4dfe0c0c
12 changed files with 108 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

82
includes/navbar.php
View file

@ -12,7 +12,7 @@ if (isset($_GET['lang']) && array_key_exists($_GET['lang'], $languages)) {
$current_lang = $_SESSION['lang'] ?? $config['app']['locale'];
?>
<header class="navbar navbar-expand-md navbar-dark bg-dark sticky-top shadow">
<header class="navbar navbar-expand-md bg-body sticky-top shadow">
<div class="container-fluid">
<a class="navbar-brand pe-3" href="/"><?php echo htmlspecialchars($config['app']['name']); ?></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle"
@ -34,7 +34,8 @@ $current_lang = $_SESSION['lang'] ?? $config['app']['locale'];
if (basename($_SERVER['SCRIPT_NAME']) == 'genres.php') {
echo current_list();
} ?>" href="/genres.php"><?php echo $locale['genres']; ?></a>
</li> <li class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link<?php
if (basename($_SERVER['SCRIPT_NAME']) == 'djs.php') {
echo current_list();
@ -42,8 +43,18 @@ $current_lang = $_SESSION['lang'] ?? $config['app']['locale'];
</li>
</ul>
<?php
if (isset($_SESSION['darkmode']) && $_SESSION['darkmode'] == 'true') {
echo '<button class="btn btn-outline-dark" id="darkModeToggle" onclick="toggleDarkMode()">🌙</button>';
} else {
echo '<button class="btn btn-outline-light" id="darkModeToggle" onclick="toggleDarkMode()">🌞</button>';
}
?>
<div class="dropdown">
<select class="form-select" id="languageSelect" onchange="location = this.value;">
<label for="languageSelect" style="display: none">Language Selector</label>
<select class="form-select" id="languageSelect"
onchange="location = this.value;">
<?php
$currentUrl = strtok($_SERVER["REQUEST_URI"], '?');
$queryParams = $_GET;
@ -59,19 +70,60 @@ $current_lang = $_SESSION['lang'] ?? $config['app']['locale'];
</div>
<?php
if (isset($_SESSION['user'])) {
echo '<a class="nav-link" href="/profile.php">' . $locale['userProfile'] . '</a>';
} else {
echo '<a class="nav-link" href="/login.php">' . $locale['login'] . '</a>';
}
?>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="<?php echo $locale['search']; ?>"
aria-label="<?php echo $locale['search']; ?>">
<button class="btn btn-outline-success" type="submit"><?php echo $locale['search']; ?></button>
</form>
<?php
if (isset($_SESSION['user'])) {
echo '<a class="nav-link" href="/profile.php">' . $locale['userProfile'] . '</a>';
} else {
echo '<a class="nav-link" href="/login.php">' . $locale['login'] . '</a>';
}
?>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="<?php echo $locale['search']; ?>"
aria-label="<?php echo $locale['search']; ?>">
<button class="btn btn-outline-success" type="submit"><?php echo $locale['search']; ?></button>
</form>
</div>
</div>
</div>
<script>
document.getElementById('darkModeToggle').addEventListener('click', function() {
var html = document.documentElement;
// Check the current theme
if (html.getAttribute('data-bs-theme') === 'dark') {
html.removeAttribute('data-bs-theme'); // Switch to light mode
this.innerHTML = '🌞'; // Update the button to reflect light mode
updateDarkModeOnServer('false');
} else {
html.setAttribute('data-bs-theme', 'dark'); // Switch to dark mode
this.innerHTML = '🌙'; // Update the button to reflect dark mode
updateDarkModeOnServer('true');
}
});
function updateDarkModeOnServer(value) {
// Create a new AJAX request
var xhr = new XMLHttpRequest();
xhr.open('POST', 'settings.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Define what happens on successful data submission
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
console.log('Dark mode setting updated on server');
}
};
// Define what happens in case of an error
xhr.onerror = function() {
console.error('An error occurred during the request.');
};
// Set the action and send the request
xhr.send('action=darkmode&value=' + value);
}
</script>
</header>