From 8b4dfe0c0c6841566b42246285f315c3654f8698 Mon Sep 17 00:00:00 2001
From: Cody Cook <threefifteen@codycook.us>
Date: Mon, 13 May 2024 19:38:06 -0700
Subject: [PATCH] Dark mode and other color enhancements to match

---
 contact.php          |  2 +-
 dj.php               | 10 +++---
 djs.php              |  2 +-
 genre.php            |  8 ++---
 genres.php           |  2 +-
 includes/footer.php  |  7 +---
 includes/globals.php |  4 +--
 includes/header.php  | 15 ++++----
 includes/navbar.php  | 82 ++++++++++++++++++++++++++++++++++++--------
 index.php            |  2 +-
 mix.php              |  8 ++---
 settings.php         | 12 +++++++
 12 files changed, 108 insertions(+), 46 deletions(-)
 create mode 100644 settings.php

diff --git a/contact.php b/contact.php
index 78896e9..cb07d74 100644
--- a/contact.php
+++ b/contact.php
@@ -20,7 +20,7 @@ if ($_POST) {
     }
 }
 ?>
-    <section style="background-color: #eee;">
+    <section>
         <div class="container py-5">
             <div class="row">
                 <div class="col">
diff --git a/dj.php b/dj.php
index afea639..e7a94d6 100644
--- a/dj.php
+++ b/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;
diff --git a/djs.php b/djs.php
index 200e717..8014c2f 100644
--- a/djs.php
+++ b/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">
diff --git a/genre.php b/genre.php
index 6db7f47..0535235 100644
--- a/genre.php
+++ b/genre.php
@@ -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();
diff --git a/genres.php b/genres.php
index 8b59d3b..0b16d9a 100644
--- a/genres.php
+++ b/genres.php
@@ -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">
diff --git a/includes/footer.php b/includes/footer.php
index 8120569..42e2cb1 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -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 "&copy; 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>
\ No newline at end of file
diff --git a/includes/globals.php b/includes/globals.php
index 19e6b06..6d7f4de 100644
--- a/includes/globals.php
+++ b/includes/globals.php
@@ -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>
diff --git a/includes/header.php b/includes/header.php
index 3b8613a..f6f24da 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -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'; ?>
\ No newline at end of file
+<?php require_once 'includes/navbar.php'; ?>
\ No newline at end of file
diff --git a/includes/navbar.php b/includes/navbar.php
index bfd94de..2487ce5 100644
--- a/includes/navbar.php
+++ b/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>
diff --git a/index.php b/index.php
index 994f0c0..3815177 100644
--- a/index.php
+++ b/index.php
@@ -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">
diff --git a/mix.php b/mix.php
index 3b0fbbe..15f4f03 100644
--- a/mix.php
+++ b/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>
diff --git a/settings.php b/settings.php
new file mode 100644
index 0000000..c4db7a4
--- /dev/null
+++ b/settings.php
@@ -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;
+}