From 305e1813d0456523c83bdd52063c557241875e6a Mon Sep 17 00:00:00 2001
From: Alexandre <44178713+alexbelgium@users.noreply.github.com>
Date: Sat, 12 Oct 2024 11:29:46 +0200
Subject: [PATCH] UI : Convert checkbox to toggleswitch (#209)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Convert checkbox to toggleswitch

* Keep previous code layout

* Improve layout : gray border, dark toggle

* Avoid changing unneeded things

* Updated layout

* Better transparency

* Use ✓ instead of ON

* Improve alignment and font size
---
 scripts/play.php | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/scripts/play.php b/scripts/play.php
index a40988d..6d83b05 100644
--- a/scripts/play.php
+++ b/scripts/play.php
@@ -538,8 +538,12 @@ if(isset($_GET['species'])){ ?>
       <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "confidence"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="confidence">
          <img src="images/sort_occ.svg" title="Sort by confidence" alt="Sort by confidence">
       </button><br>
-      <input style="margin-top:10px" <?php if(isset($_GET['only_excluded'])){ echo "checked"; }?> type="checkbox" name="only_excluded" onChange="submit()">
-      <label for="onlyverified">Only Show Purge Excluded</label>
+      <label style="cursor: pointer; margin-top: 10px; margin-bottom: 10px;font-weight: normal; display: inline-flex; align-items: center; justify-content: center;">
+        <input type="checkbox" name="only_excluded" <?= isset($_GET['only_excluded']) ? 'checked' : '' ?> onchange="submit()" style="display:none;">
+        <span style="width: 40px; height: 20px; background: <?= isset($_GET['only_excluded']) ? '#555555' : 'rgba(85, 85, 85, 0.3)' ?>; border: 1px solid #777777; border-radius: 20px; display: inline-block; position: relative; margin-right: 8px; transition: background 0.4s, border 0.4s; box-sizing: border-box;">
+        <span style="width: 16px; height: 16px; background: white; border-radius: 50%; position: absolute; top: 1.5px; left: 2px; transition: 0.4s; display: flex; align-items: center; justify-content: center; font-size: 14px; color: black; <?= isset($_GET['only_excluded']) ? 'transform: translateX(20px);' : '' ?>">
+        <?= isset($_GET['only_excluded']) ? '✓' : '' ?>
+      </span></span>Only Show Purge Excluded</label>
    </form>
 </div>
 <?php