Theme Switcher

2024-05-24 21:37:33 +02:00
parent cceab89523
commit 4dc97daf63
8 changed files with 219 additions and 79 deletions
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <?php include_once "../../../base/meta.php" ?>
+
+  <title>Theme Switcher</title>
+
+  <script src="./js/formValidation.js"></script>
+
+  <?php
+  // PHP
+  include_once "../../../base/settings.php";
+  include_once "../../../base/headers.php";
+
+  if (isset($_POST["theme"])) {
+    $theme = $_POST["theme"];
+
+    setcookie("theme", $theme, ["httponly" => true, "secure" => true, "samesite" => "strict"]);
+    Headers::redirect("./");
+  } else if (isset($_COOKIE["theme"])) {
+    $theme = $_COOKIE["theme"];
+  }
+
+  Headers::html();
+  ?>
+
+  <?php if (isset($theme) && $theme === "black") { ?>
+    <link href="./css/black.css" rel="stylesheet" />
+  <?php } ?>
+  <?php if (isset($theme) && $theme === "pink") { ?>
+    <link href="./css/pink.css" rel="stylesheet" />
+  <?php } ?>
+</head>
+
+<body>
+
+  <div class="p-3">
+    <div class="form-check form-switch mb-3">
+      <input class="form-check-input" type="checkbox" role="switch" id="clientSideValidate" <?= ($_COOKIE["validation"] ?? false) === "true" ? "checked" : "" ?>>
+      <label class=" form-check-label" for="clientSideValidate">Use Client Side Validation</label>
+    </div>
+    <form method="post" class="needs-validation" novalidate>
+      <div class="mb-3">
+        <select class="form-select" name="theme" required>
+          <option value="" <?= !isset($theme) ? "selected" : "" ?> disabled>Select a Theme</option>
+          <option value="black" <?= isset($theme) && $theme === "black" ? "selected" : "" ?>>Black</option>
+          <option value="pink" <?= isset($theme) && $theme === "pink" ? "selected" : "" ?>>Pink</option>
+        </select>
+        <div class="invalid-feedback">
+          Please select a valid state.
+        </div>
+      </div>
+      <button type="submit" class="btn btn-primary mb-3 w-100">Set Selected Theme</button>
+    </form>
+    <?php if (isset($error)) { ?>
+      <h2 class="text-danger"><?= $error ?></h2>
+    <?php } ?>
+  </div>
+</body>
+
+</html>