Dark mode and settings popup

In this version v1.3.0 - created popup for settings - enabled dark mode NOTE: we have noticed that we forget to create a function to that shows a popup after using to much tokens. will be fixed in the last version of 1.3
HamzaElkotp · Jun 1, 2023 · 06e42de · 06e42de
1 parent c9b9d5b
commit 06e42de
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 18 deletions.
diff --git a/ZChatGPT/assets/javascript/app.js b/ZChatGPT/assets/javascript/app.js
@@ -21,7 +21,7 @@ const donateClose = document.querySelector('#donateClose');
 
 
 const recentVesrion = window.localStorage.recentVesrion || (window.localStorage.recentVesrion = '');
-const currentVersion = '1.2.3.1';
+const currentVersion = '1.3.0';
 
 
 const today = (new Date).toLocaleDateString();
@@ -31,6 +31,15 @@ const dailyUsage = window.localStorage.dailyUsage ? JSON.parse(window.localStora
     "notification": "no"
 }));
 
+const settingsPop = document.querySelector("#settingsPop");
+const settingsOpen = document.querySelector("#settingsBtn");
+const settingsClose = document.querySelector('#settingsClose');
+const modeCheckBox = document.querySelector("#modeCheck");
+const settings = window.localStorage.settings ? JSON.parse(window.localStorage.settings) : JSON.parse(window.localStorage.settings = JSON.stringify({
+    "mode": "light",
+}));
+
+
 
 const welcomeMsgs = ["I am here to assit you.", "Welcome human, Finally I met one🥳.", "Please donate me by clicking 'support us' button.💖", 
 "Noooo, human again! noooo my tokens will end soon😫", "You must be happy for being human getting AI help😏", "You are My Brother in AI",
@@ -55,7 +64,8 @@ function preload(){
 document.body.onload = ()=>{
     preload();
     newUpadate();
-    resetDate()
+    resetDate();
+    setMode();
 };
 
 
@@ -133,8 +143,22 @@ async function newUpadate(){
 (function (){
     chatSettings.addEventListener('click', toggleChatBar);
 
-    donateOpen.addEventListener('click', showDonate);
-    donateClose.addEventListener('click', hideDonate);
+    donateOpen.addEventListener('click', ()=>{
+        showPopUp(donationPop)
+    });
+    donateClose.addEventListener('click', ()=>{
+        hidePopUp(donationPop)
+    });
+
+    settingsOpen.addEventListener('click', ()=>{
+        showPopUp(settingsPop)
+    });
+    settingsClose.addEventListener('click', ()=>{
+        hidePopUp(settingsPop)
+    });
+    modeCheckBox.addEventListener('click', ()=>{
+        saveSettings()
+    })
 
     rangeInputs.forEach((ele)=>{
         ele.addEventListener('input', ()=>{
@@ -144,7 +168,8 @@ async function newUpadate(){
             valueHide(ele);
         })
     })
-}())
+}());
+
 
 
 const composer = function(...funcs) {
@@ -193,11 +218,11 @@ function toggleChatBar(element){
     apiContoleBar.classList.toggle("trans");
 }
 
-function showDonate(){
-    donationPop.classList.remove('trans');
+function showPopUp(e){
+    e.classList.remove('trans');
 }
-function hideDonate(){
-    donationPop.classList.add('trans');
+function hidePopUp(e){
+    e.classList.add('trans');
 }
 
 const isSafari = ()=>{return (!!window.ApplePaySetupFeature || !!window.safari) && agentHas("Safari") && !agentHas("Chrome") && !agentHas("CriOS")};
@@ -234,6 +259,25 @@ const tokensAddNoti = composer(addtokens, donateNotif);
 
 
 
+const setMode = ()=>{
+    if(settings.mode == "light"){
+        document.body.classList.remove("dark")
+    }else{
+        document.body.classList.add("dark");
+    }
+}
+const checkModeChange = ()=>{
+    if(modeCheckBox.checked){
+        settings.mode = "dark";
+        window.localStorage.settings = JSON.stringify(settings)
+    }else{
+        settings.mode = "light";
+        window.localStorage.settings = JSON.stringify(settings)
+    }
+}
+const saveSettings = composer(checkModeChange, setMode)
+
+
 
 const pushTmsgCont = composer(gptMsgTaker, gptMsgDom);
 function apiFetcher(APIurl, key, mthd, msg, fun){

diff --git a/ZChatGPT/assets/javascript/update.json b/ZChatGPT/assets/javascript/update.json
@@ -1,12 +1,12 @@
 {
-    "title": "😔Sorry For What Happened❗",
-    "version": "<span class='is-size-6'>22nd May</span> <span class='is-size-5'>Version</span> 1.2.3.1",
+    "title": "A new update is HERE❗",
+    "version": "<span class='is-size-6'>1st Jun</span> <span class='is-size-5'>Version</span> 1.3.0",
     "note": "Every Month There Is A Major Update",
     "newNote": "See What Is New:👇",
     "features": [
-        "Fix Icons",
-        "Decrease Loading page time"
+        "Settings popup. click settings the above button to see it!",
+        "Now you can use ZChatGPT in Dark mode. by enabling it from settigns Popup"
     ],
     "contact": "For problems and sugessions contact us on <span class='has-text-success'>[email protected]</span>",
-    "buttonMsg": "I forgive you"
+    "buttonMsg": "I'll Use Dark mode Now"
 }
diff --git a/ZChatGPT/assets/style/main.css b/ZChatGPT/assets/style/main.css
@@ -1,8 +1,11 @@
 :root{
     --gLightbg: #00aa91;
     --gLightbgD: #007462;
+    --darkGreen: #101311;
+    --vDarkGreen: #121714;
     --whiteBg: #ffffff;
     --graybg: #eeeeee;
+    --gray50: #d9d9d9;
     --darkfo: #363636;
     --blackfo: #000000;
     --swiftBlack: #363636e2;
@@ -314,6 +317,73 @@ i.donate{
     font-weight: 700 !important;
 }
 
+hr {
+    background-color: var(--gLightbg) !important;
+    margin: 1rem 0 !important;
+    opacity: 0.4 !important;
+}
+
+.btn{
+    margin-left: 12px;
+}
+[role="button"]{
+    cursor: pointer;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 55px;
+    height: 28px;
+}
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}  
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 5px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+}
+input:checked + .slider {
+    background-color: var(--gLightbg);
+}
+input:focus + .slider {
+    box-shadow: 0 0 1px var(--gLightbg);
+}
+input:focus + .slider::before, input:checked + .slider::before{
+    bottom: 5px;
+}
+input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+.slider.round {
+    border-radius: 34px;
+}
+.slider.round:before {
+    border-radius: 50%;
+}
+
 
 
 
@@ -463,6 +533,12 @@ i.donate{
 
 
 
+.is-size-65{
+    font-size: 14px;
+}
+
+
+
 @keyframes half {
     50%{
         transform: translate(-50%, -50%) rotate(290deg);
@@ -510,7 +586,47 @@ i.donate{
 
 
 
-
+body, .load, .controler, .update, .popupbar{
+    transition: 0.5s background-color;
+}
+.load span, .msgBox p, .update p, .has-text-warning-dark, .has-text-danger-dark, .controler textarea::placeholder, .controler textarea {
+    transition: 0.5s color;
+}
+body.dark {
+    background-color: var(--vDarkGreen) !important;
+}
+body.dark .load{
+    background-color: var(--vDarkGreen);
+}
+body.dark .load span{
+    color: var(--gray50) !important;
+}
+body.dark .msgBox p{
+    color: var(--gray50);
+}
+body.dark .controler{
+    background-color: var(--darkfo);
+}
+body.dark .update {
+    background: rgba(79, 79, 79, 0.25);
+    color: var(--graybg);
+}
+body.dark .update p{
+    color: var(--graybg);
+}
+body.dark .popupbar {
+    background-color: var(--darkGreen);
+    color: var(--gray50);
+}
+body.dark .has-text-warning-dark {
+    color: #f7b400 !important;
+}
+body.dark .has-text-danger-dark {
+    color: #f03 !important;
+}
+body.dark .controler textarea::placeholder, body.dark .controler textarea{
+    color: var(--gray50);
+}
 
 
 

diff --git a/ZChatGPT/manifest.json b/ZChatGPT/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "ZChatGPT",
     "description": "A simple extension to allow browser users to use ChatGPT in any tab without the need to open ChatGPT or having an account.",
-    "version": "1.2.3.1",
+    "version": "1.3.0",
     "icons":{
         "16": "/assets/logo/icon16.png",
         "48": "/assets/logo/icon48.png",

diff --git a/ZChatGPT/popup.html b/ZChatGPT/popup.html
@@ -19,8 +19,12 @@
     </div>
 
     <div class="conatiner chatapp trans" id="chatapp">
-        <div class="button is-primary is-small donate" id="donateBtn">Support us <i class="fa-solid fa-circle-dollar-to-slot donate"></i></div>
-
+        <div class="innerContainer is-flex is-justify-content-space-between is-align-items-center">
+            <div class="button is-primary is-small donate" id="donateBtn">Support us <i class="fa-solid fa-circle-dollar-to-slot donate"></i></div>
+            <div class="is-flex">
+                <div class="btn" id="settingsBtn" role="button"><i class="fa-solid fa-gears has-text-primary is-size-4"></i></div>
+            </div>
+        </div>
 
         <div class="chat msgBox is-relative innerContainer" id="msgBox">
             <div class="centeredBox starter" id="welcomeBox">
@@ -118,6 +122,23 @@ <h1 class="heada">How your donation will help?</h1>
         </div>
     </div>
 
+    <div class="full-shadowBg trans" id="settingsPop">
+        <div class="is-relative popup">
+            <div class="popupbar">
+                <i class="fa-solid fa-xmark xmark" id="settingsClose"></i>
+                <p class="title is-5 has-text-centered has-text-grey is-marginless">Settings</p>
+                <div class="is-flex is-justify-content-space-between is-align-items-center">
+                    <label class="has-text-weight-semibold">Dark Mode</label>
+                    <label class="switch" for="modeCheck">
+                        <input type="checkbox" id="modeCheck">
+                        <span class="slider round"></span>
+                    </label>
+                </div>
+                <p class="is-size-65 has-text-centered has-text-grey">All changes will be saved directly</p>
+            </div>
+        </div>
+    </div>
+
     <div class="doNoti succ has-text-centered">
         <p>Please donate to help us pay for OpenAI costs.😊</p>
         <div class="border"></div>