Donation buttons

In this version these new things happened: -we added a popup contains buttons for every donation way + some notes in the popup. - we added all functionalities to close and open button. - their CSS codes and icons.
HamzaElkotp · Apr 24, 2023 · c681ee5 · c681ee5
1 parent 00a0f45
commit c681ee5
Show file tree

Hide file tree

Showing 5 changed files with 228 additions and 13 deletions.
diff --git a/Source_Code/assets/javascript/app.js b/Source_Code/assets/javascript/app.js
@@ -12,7 +12,13 @@ const textInput = document.querySelector("#userMsg");
 
 const modelInput = document.querySelector('#modelInput');
 const roleInput = document.querySelector('#roleInput');
-const rangeInputs = Array.from(document.querySelectorAll('[type="range"]'))
+const rangeInputs = Array.from(document.querySelectorAll('[type="range"]'));
+
+
+const donationPop = document.querySelector('#donationPop');
+const donateOpen = document.querySelector('#donateBtn');
+const donateClose = document.querySelector('#donateClose');
+
 
 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",
@@ -39,6 +45,9 @@ document.body.addEventListener('load', preload());
 (function (){
     chatSettings.addEventListener('click', toggleChatBar);
 
+    donateOpen.addEventListener('click', showDonate);
+    donateClose.addEventListener('click', hideDonate);
+
     rangeInputs.forEach((ele)=>{
         ele.addEventListener('input', ()=>{
             valueChange(ele);
@@ -84,18 +93,24 @@ const userMsgDom = function(msg){
 
 function valueChange(element){
     let theNext = element.parentElement.parentElement.querySelector('.zvalue');
-    theNext.classList.remove("trans")
+    theNext.classList.remove("trans");
     theNext.textContent = element.value;
 }
 function valueHide(element){
     let theNext = element.parentElement.parentElement.querySelector('.zvalue');
-    theNext.classList.add("trans")
+    theNext.classList.add("trans");
 }
 
 function toggleChatBar(element){
-    apiContoleBar.classList.toggle("trans")
+    apiContoleBar.classList.toggle("trans");
 }
 
+function showDonate(){
+    donationPop.classList.remove('trans');
+}
+function hideDonate(){
+    donationPop.classList.add('trans');
+}
 
 
 let pushTmsgCont = composer(gptMsgTaker,gptMsgDom);

diff --git a/Source_Code/assets/style/bulma.css b/Source_Code/assets/style/bulma.css
diff --git a/Source_Code/assets/style/main.css b/Source_Code/assets/style/main.css
@@ -3,7 +3,24 @@
     --whiteBg: #ffffff;
     --graybg: #eeeeee;
     --darkfo: #363636;
-    --blackfo: #000000
+    --blackfo: #000000;
+    --swiftBlack: #363636e2;
+    --tSwiftBlack: #36363666;
+
+    --yellow: #ffdd00;
+    --yellowD: #f3d200;
+    --yellowT: #fbd900f4;
+    --yellowF: #e8c900;
+
+    --red: #ff424d;
+    --redD: #ff2933;
+    --redT: #ff424bd5;
+    --redF: #ff1521;
+
+    --blue: #1073eb;
+    --blueD: #0f59d6;
+    --blueT: #114ccc;
+    --blueF: #114ccc;
 }
 *{
     scrollbar-width: thin;
@@ -185,11 +202,8 @@ body,html{
     padding-right: 15px;
     color: var(--gLightbg);
 }
-.user-control{
-    position: relative;
-}
 .apiControls {
-    background-color: #363636e2;
+    background-color: var(--swiftBlack);
     width: 200px;
     height: fit-content;
     position: absolute;
@@ -230,5 +244,91 @@ body,html{
 .zvalue.trans {
     opacity: 0.4;
 }
+.full-shadowBg{
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    background-color: var(--tSwiftBlack);
+    z-index: 1001px;
+    top: 0;
+    transition: 0.25s;
+}
+.popup {
+    width: 100%;
+    height: 100vh;
+}
+.donations {
+    width: calc(100% - 40px);
+    padding: 15px;
+    background-color: var(--whiteBg);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px 1px var(--gLightbg);
+    margin-right: 20px;
+    box-sizing: border-box;
+}
+.donations ul {
+    list-style: disc !important;
+    padding-left: 15px !important;
+    font-size: 14px;
+}
+.donations .heada {
+    font-size: 18px;
+    font-weight: 600;
+}
+.nota {
+    font-size: 14px;
+    font-weight: 700;
+    margin-top: 5px;
+}
+.dWays {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.dWays .button {
+    margin-top: 7px;
+}
+.dWays i {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+.xmark{
+    position: absolute;
+    right: 8px;
+    font-size: 20px;
+    top: 8px;
+    cursor: pointer;
+}
+i.donate{
+    padding-left: 8px;
+}
+.donate{
+    font-size: 13px !important;
+    font-weight: 700 !important;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
diff --git a/Source_Code/manifest.json b/Source_Code/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.0",
+    "version": "1.2.1",
     "icons":{
         "16": "/assets/logo/icon16.png",
         "48": "/assets/logo/icon48.png",

diff --git a/Source_Code/popup.html b/Source_Code/popup.html
@@ -18,9 +18,10 @@
             <p class="authorname"><span class="powered">by</span> <span class="fnames">GPT</span>core Studio</p>
         </div>
     </div>
+
     <div class="conatiner chatapp trans" id="chatapp">
         <div class="innerContainer">
-            <a class="button is-success is-small" href="https://www.buymeacoffee.com/HamzaElkotp/w/17860" target="_blank">Support us</a>
+            <div class="button is-primary is-small donate" target="_blank" id="donateBtn">Support us <i class="fa-duotone fa-circle-dollar-to-slot donate"></i></div>
         </div>
 
         <div class="chat msgBox is-relative innerContainer" id="msgBox">
@@ -31,8 +32,8 @@
             </div>
         </div>
 
-        <section class="user-control">
-            <form class="apiControls trans" id="apiControls">
+        <section class="user-control is-relative">
+            <form class="apiControls trans">
 
                 <div class="field">
                     <label class="label">AI Model</label>
@@ -95,5 +96,28 @@
             </div>
         </section>
     </div>
+
+    <div class="full-shadowBg trans" id="donationPop">
+        <div class="is-relative popup">
+            <div class="donations">
+                <i class="fa-solid fa-xmark xmark" id="donateClose"></i>
+                <p class="par1 has-text-centered">🎊Donations help this extension continue for free.🥳</p>
+                <p class="nota">This extension <span class="has-text-danger-dark">depends</span> on donations because we don't provide <span class="has-text-warning-dark">paid</span> sevices or <span class="has-text-warning-dark">selling</span> users data.</p>
+                <div class="dWays">
+                    <h1 class="heada">Support on:</h1>
+                    <a href="https://www.buymeacoffee.com/HamzaElkotp/w/17860" target="_blank" class="button is-bcoffee is-fullwidth">Buy Me a Coffee <i class="fa-duotone fa-cup-togo"></i></a>
+                    <a href="https://www.patreon.com/HamzaElkotb" target="_blank" class="button is-patreon is-fullwidth"><i class="fa-brands fa-patreon"></i> Patreon</a>
+                    <a href="https://www.paypal.com/paypalme/dtcHamza" target="_blank" class="button is-paypal is-fullwidth"><i class="fa-brands fa-paypal"></i> PayPal</a>
+                </div>
+                <h1 class="heada">How your donation will help?</h1>
+                <ul>
+                    <li>Paying for OpenAI API expenses.</li>
+                    <li>Adding new expensive AI services for free such as GPT4 and dall-e.</li>
+                    <li>Increasing privacy and security.</li>
+                    <li>Developing new free extensions.</li>
+                </ul>
+            </div>
+        </div>
+    </div>
 </body>
 </html>