Dark mode and other color enhancements to match
This commit is contained in:
parent
9e7a10bf6e
commit
8b4dfe0c0c
12 changed files with 108 additions and 46 deletions
|
|
@ -20,7 +20,7 @@ if ($_POST) {
|
|||
}
|
||||
}
|
||||
?>
|
||||
<section style="background-color: #eee;">
|
||||
<section>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
|
|||
10
dj.php
10
dj.php
|
|
@ -18,7 +18,7 @@ if (isset($_GET['dj']) && $_GET['dj'] != "") {
|
|||
$title = $dj->get_name();
|
||||
require_once 'includes/header.php';
|
||||
?>
|
||||
<section style="background-color: #eee;">
|
||||
<section>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
@ -43,7 +43,7 @@ require_once 'includes/header.php';
|
|||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="card-body bg-body-secondary text-center">
|
||||
<img src="<?php echo $dj->get_img(); ?>"
|
||||
alt="avatar"
|
||||
class="rounded-circle img-fluid" style="width: 150px;">
|
||||
|
|
@ -72,7 +72,7 @@ require_once 'includes/header.php';
|
|||
if ($dj->get_socials() != []) {
|
||||
?>
|
||||
<div class="card mb-4 mb-lg-0">
|
||||
<div class="card-body p-0">
|
||||
<div class="card-body p-0 " >
|
||||
<ul class="list-group list-group-flush rounded-3">
|
||||
<?php
|
||||
$socials = $dj->get_socials();
|
||||
|
|
@ -87,7 +87,7 @@ require_once 'includes/header.php';
|
|||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="card-body bg-body-secondary">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<p class="mb-0"><?php echo $locale['djName']; ?></p>
|
||||
|
|
@ -108,7 +108,7 @@ require_once 'includes/header.php';
|
|||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="card-body bg-body-secondary">
|
||||
<?php
|
||||
$mixes = $dj->get_dj_mixes();
|
||||
$count = 0;
|
||||
|
|
|
|||
2
djs.php
2
djs.php
|
|
@ -9,7 +9,7 @@ $djs = new DJs($db);
|
|||
$title = $locale['djs'];
|
||||
require_once 'includes/header.php';
|
||||
?>
|
||||
<section style="background-color: #eee;">
|
||||
<section>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ $title = $genre->get_name();
|
|||
|
||||
require_once 'includes/header.php';
|
||||
?>
|
||||
<section style="background-color: #eee;">
|
||||
<section>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
@ -46,7 +46,7 @@ require_once 'includes/header.php';
|
|||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="card-body bg-body-secondary text-center">
|
||||
<img src="<?php echo $genre->get_img(); ?>"
|
||||
alt="avatar"
|
||||
class="rounded-circle img-fluid" style="width: 150px;">
|
||||
|
|
@ -65,7 +65,7 @@ require_once 'includes/header.php';
|
|||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="card-body bg-body-secondary">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<p class="mb-0"><?php echo $locale['mix-count']; ?></p>
|
||||
|
|
@ -81,7 +81,7 @@ require_once 'includes/header.php';
|
|||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="card-body bg-body-secondary">
|
||||
<?php
|
||||
$count = 0;
|
||||
$mixes = $genre->get_mixes();
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ $genres = new Genres($db);
|
|||
$title = $locale['genres'];
|
||||
require_once 'includes/header.php';
|
||||
?>
|
||||
<section style="background-color: #eee;">
|
||||
<section>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
<section style="background-color: #eee;">
|
||||
<section>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<p><?php
|
||||
// copyright
|
||||
echo "© 2008 - ";
|
||||
echo date('Y');
|
||||
echo " " . $locale['allrightsreserved'];
|
||||
?></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
Created using <a href="https://gitea.threefifteen.info/cody/dj_mix_hosting_software">DJ Mix Hosting Software</a>
|
||||
|
|
@ -19,7 +16,5 @@
|
|||
</section>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -24,7 +24,7 @@ function card_output(int $count, mixed $dj, mixed $locale): void
|
|||
}
|
||||
echo '<div class="col-md-3">';
|
||||
echo '<div class="card mb-4">';
|
||||
echo '<div class="card-body">';
|
||||
echo '<div class="card-body bg-body-secondary">';
|
||||
echo '<h5 class="card-title" title="' . $dj['name'] . '">' . $dj['name'] . '</h5>';
|
||||
echo '<p class="card-text">' . $dj['count'] . ' ';
|
||||
if ($dj['count'] == 1) {
|
||||
|
|
@ -98,7 +98,7 @@ function social_line($social, $value): string
|
|||
}
|
||||
|
||||
return "
|
||||
<li class='list-group-item d-flex justify-content-between align-items-center p-3' title='$name'>
|
||||
<li class='list-group-item d-flex justify-content-between bg-body-secondary align-items-center p-3' title='$name'>
|
||||
<i class='fa $icon fa-lg' style='color: $color;' title='$name'></i>
|
||||
<p class='mb-0'><a href='$url' title='$name' >$value</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
<!doctype html >
|
||||
<html lang="<?php echo $lang ?>">
|
||||
<head>
|
||||
<html lang="<?php echo $lang ?>" <?php
|
||||
// dark mode checker
|
||||
if (isset($_SESSION['darkmode']) && $_SESSION['darkmode'] == 'true') {
|
||||
echo 'data-bs-theme="dark"';
|
||||
} ?><head>
|
||||
<?php if (isset($config['seo']['google']) && $config['seo']['google']) {
|
||||
require_once 'includes/google_tag_manager.php';
|
||||
echo get_google_tag_manager_header($config['seo']['gtm']['key']);
|
||||
}?>
|
||||
} ?>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title><?php echo $title . " | " . $config['app']['name']; ?></title>
|
||||
|
|
@ -59,10 +62,10 @@
|
|||
</style>
|
||||
<?php } ?>
|
||||
</head>
|
||||
<body style="background-color: #eee;">
|
||||
<body class="bg-body">
|
||||
<?php
|
||||
if (isset($config['seo']['google']) && $config['seo']['google']) {
|
||||
echo get_google_tag_manager_body($config['seo']['gtm']['key']);
|
||||
echo get_google_tag_manager_body($config['seo']['gtm']['key']);
|
||||
}
|
||||
?>
|
||||
<?php require 'includes/navbar.php'; ?>
|
||||
<?php require_once 'includes/navbar.php'; ?>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
require_once 'includes/globals.php';
|
||||
$title = $locale['home'];
|
||||
require_once 'includes/header.php'; ?>
|
||||
<section style="background-color: #eee;">
|
||||
<section>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
|
|||
8
mix.php
8
mix.php
|
|
@ -21,7 +21,7 @@ if (isset($_GET['mix']) && $_GET['mix'] != "") {
|
|||
|
||||
|
||||
require_once 'includes/header.php'; ?>
|
||||
<section style="background-color: #eee;">
|
||||
<section>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
@ -46,7 +46,7 @@ require_once 'includes/header.php'; ?>
|
|||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="card-body bg-body-secondary text-center">
|
||||
<?php
|
||||
if ($mix->get_img() != "") {
|
||||
echo "<img src='" . $mix->get_img() . "' alt='avatar' class='img-fluid' style='width: 150px;'>";
|
||||
|
|
@ -62,7 +62,7 @@ require_once 'includes/header.php'; ?>
|
|||
</div>
|
||||
</div>
|
||||
<div class="card mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="card-body bg-body-secondary text-center">
|
||||
<?php
|
||||
if ($mix->is_download_only()) {
|
||||
echo "<a href='" . $mix->get_url() . "' class='btn btn-primary'>" . $locale['download'] . "</a>";
|
||||
|
|
@ -85,7 +85,7 @@ require_once 'includes/header.php'; ?>
|
|||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="card-body bg-body-secondary">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<p class="mb-0"><?php echo $locale['mixname'] ?></p>
|
||||
|
|
|
|||
12
settings.php
Normal file
12
settings.php
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?php
|
||||
session_start();
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'darkmode') {
|
||||
$darkmode = $_POST['value'] === 'true' ? 'true' : 'false';
|
||||
$_SESSION['darkmode'] = $darkmode; // Update the session to reflect the new mode
|
||||
|
||||
// Send a JSON response back to JavaScript
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(['darkmode' => $darkmode]);
|
||||
exit;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue