From b8efc3f601ee07d4e45ed5c7f4340704341e9cf4 Mon Sep 17 00:00:00 2001
From: db-2001 <adityabhatnagar2001@gmail.com>
Date: Sun, 21 Apr 2024 13:36:25 -0400
Subject: [PATCH] C9Glax/tranga-website#83

---
 Website/apiConnector.js |  7 +++++
 Website/index.html      |  7 +++++
 Website/interaction.js  |  2 ++
 Website/styles/base.css | 69 ++++++++++++++++++++++++++++++++++++++---
 4 files changed, 80 insertions(+), 5 deletions(-)

diff --git a/Website/apiConnector.js b/Website/apiConnector.js
index be5f878..33a3886 100644
--- a/Website/apiConnector.js
+++ b/Website/apiConnector.js
@@ -237,6 +237,13 @@ Date.prototype.timeNow = function () {
      return ((this.getHours() < 10)?"0":"") + this.getHours() +"_"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +"_"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds();
 }
 
+function UpdateAprilFoolsMode() { 
+	checkBox = document.getElementById("aprilFoolsMode");
+	var uri = `${apiUri}/Settings/AprilFoolsMode?enabled=${checkBox.checked}`;
+	console.log(uri);
+	PostData(uri);
+}
+
 //Komga
 function UpdateKomga(komgaUrl, komgaAuth){
     var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
diff --git a/Website/index.html b/Website/index.html
index 804b644..b7f9c6c 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -96,6 +96,13 @@
                   <span class="title">API Settings</span>
                   <row><label for="settingApiUri">API URI:</label><input placeholder="https://" type="text" id="settingApiUri"></row>
                   <row><label for="userAgent">User Agent:</label><input placeholder="UserAgent" id="userAgent" type="text"></row>
+                  <row>
+                    <label for="aprilFoolsMode">Skip Chapters on April 1st:</label>
+                    <label class="switch-toggle">
+                      <input type="checkbox" onclick="UpdateAprilFoolsMode()" id="aprilFoolsMode">
+                      <span class="slider"></span>
+                    </label>
+                  </row>
                   <row>
                     <border-bar-button class="section" onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
                     <border-bar-button class="section" onclick="DownloadLogs()">Download Logs</border-bar-button>
diff --git a/Website/interaction.js b/Website/interaction.js
index 5133e19..6ca3e58 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -73,6 +73,7 @@ const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
 
 const settingUserAgent = document.querySelector("#userAgent");
 const settingApiUri = document.querySelector("#settingApiUri");
+const settingAprilFoolsMode = document.querySelector("#aprilFoolsMode");
 const settingCSSStyle = document.querySelector('#cssStyle');
 const newMangaPopup = document.querySelector("#newMangaPopup");
 const newMangaConnector = document.querySelector("#newMangaConnector");
@@ -562,6 +563,7 @@ function OpenSettings(){
     //console.log(json);
     settingApiUri.value = apiUri;
     settingUserAgent.value = json.userAgent;
+    settingAprilFoolsMode.checked = json.aprilFoolsMode;
     //console.log(json.styleSheet);
   });
   GetRateLimits().then((json) => {
diff --git a/Website/styles/base.css b/Website/styles/base.css
index ee80fc5..007506b 100644
--- a/Website/styles/base.css
+++ b/Website/styles/base.css
@@ -421,10 +421,10 @@ popup popup-window {
 }
 
 popup#jobStatusView popup-window {
-    left: 20%;
-    top: 20%;
-    height: 60%;
-    width: 60%;
+    left: 10%;
+    top: 10%;
+    height: 80%;
+    width: 80%;
 }
 
 popup-content{
@@ -957,4 +957,63 @@ footer-tag-popup::before{
   font-size: 12pt;
   color: var(--secondary-color);
   cursor: pointer;
-}
\ No newline at end of file
+}
+
+
+ /* The switch - the box around the slider */
+ .switch-toggle {
+    position: relative;
+    width: 40px;
+    height: 20px;
+    margin-left: auto;
+    float: right;
+    margin-right: 2px;
+  }
+  
+  /* Hide default HTML checkbox */
+  .switch-toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  /* The slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 34px;
+  }
+  
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 12px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+  
+  input:checked + .slider {
+    background-color: var(--primary-color);
+  }
+  
+  input:focus + .slider {
+    box-shadow: 0 0 1px var(--primary-color);
+  }
+  
+  input:checked + .slider:before {
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
\ No newline at end of file