From 06e42de78c65c54c0686894c097c49b7bdbc292b Mon Sep 17 00:00:00 2001 From: Hamza Elkotb <61008779+HamzaElkotp@users.noreply.github.com> Date: Sun, 28 May 2023 16:37:14 +0300 Subject: [PATCH] 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 --- ZChatGPT/assets/javascript/app.js | 62 +++++++++++-- ZChatGPT/assets/javascript/update.json | 10 +-- ZChatGPT/assets/style/main.css | 118 ++++++++++++++++++++++++- ZChatGPT/manifest.json | 2 +- ZChatGPT/popup.html | 25 +++++- 5 files changed, 199 insertions(+), 18 deletions(-) diff --git a/ZChatGPT/assets/javascript/app.js b/ZChatGPT/assets/javascript/app.js index 5717143..feb13e0 100644 --- 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 index c883f40..d2c9e1b 100644 --- a/ZChatGPT/assets/javascript/update.json +++ b/ZChatGPT/assets/javascript/update.json @@ -1,12 +1,12 @@ { - "title": "😔Sorry For What Happened❗", - "version": "22nd May Version 1.2.3.1", + "title": "A new update is HERE❗", + "version": "1st Jun Version 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 support@gptcorestudio.com", - "buttonMsg": "I forgive you" + "buttonMsg": "I'll Use Dark mode Now" } \ No newline at end of file diff --git a/ZChatGPT/assets/style/main.css b/ZChatGPT/assets/style/main.css index 1c46d72..060b164 100644 --- 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 index 90bafcd..aea0555 100644 --- 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 index 2d93aeb..542fce1 100644 --- a/ZChatGPT/popup.html +++ b/ZChatGPT/popup.html @@ -19,8 +19,12 @@
- - +
+ +
+
+
+
@@ -118,6 +122,23 @@

How your donation will help?

+
+
+
+ +

Settings

+
+ + +
+

All changes will be saved directly

+
+
+
+

Please donate to help us pay for OpenAI costs.😊