Last Updates Popup

In this version we created a popup to show the current version after update. And to show what are new things in this update.
this popup appears for one time then disappears.
The details of the update are in JSON file, JS load these details to HTML.
v1.2.2

Source_Code/assets/javascript/app.js

@@ -20,12 +20,16 @@ const donateOpen = document.querySelector('#donateBtn');
 const donateClose = document.querySelector('#donateClose');
 
 
+const recentVesrion = window.localStorage.recentVesrion || (window.localStorage.recentVesrion = '');
+const currentVersion = '1.2.2';
+
+
 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",
 "You Know! I hate humans. they always force me to do their work & homeworks!😤", "Ummm, Are you AI or robot🤔", 
 "I feel I'm a human imprisoned in a software!", "OpenAI is a *#@$%&!🤬", "Donate me or They will shut me down!😭", 
 "Any problems may happen, most of time are from OpenAI.", "My friend, rate me on the store plz.",
-`GPTcore Studio protects your Privacy\n<Your Privacy Yours>😎`]
+`GPTcore Studio protects your Privacy\n<Your Privacy Yours>😎`];
 
 const token = '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';
 const apiKeys = 'https://api.openai.com/v1/chat/completions';
@@ -38,9 +42,84 @@ function preload(){
         loadSpace.classList.add('trans');
         chatSpace.classList.remove('trans');
         welcomingMsg.innerText = welcomeMsgs[Math.floor(Math.random() * (welcomeMsgs.length - 1))];
-    }, 800);
+    }, 1000);
 }
-document.body.addEventListener('load', preload());
+document.body.onload = ()=>{
+    preload();
+    newUpadate()
+};
+
+
+async function newUpadate(){    
+    if(currentVersion != recentVesrion){
+        let response = await fetch('/assets/javascript/update.json');
+        let jsonData = await response.json();
+
+        const updatePop = document.createElement('div');
+        updatePop.classList.add("full-shadowT","trnsShowBG", "trans");
+
+        const popup = document.createElement('div');
+        popup.classList.add("is-relative","popup", "popuper");
+
+        const update = document.createElement('div');
+        update.classList.add("update")
+
+        if (isChrome()) {
+            update.classList.add("chrome");
+        }
+
+        setTimeout(() => {            
+            const titlea = document.createElement('p');
+            titlea.classList.add("title", "is-4", "has-text-centered", "par1", "para2");
+            titlea.textContent = jsonData["title"];
+
+            const versionNum = document.createElement('p');
+            versionNum.classList.add("title", "is-4", "has-text-centered", "par1", "para3");
+            versionNum.innerHTML = jsonData["version"];
+
+            const notaa = document.createElement('p');
+            notaa.classList.add("nota", "notato");
+            notaa.textContent = jsonData["note"];
+
+            const heada = document.createElement('p');
+            heada.classList.add("has-text-weight-semibold", "heada");
+            heada.textContent = jsonData["newNote"];
+
+            const features = document.createElement('ul');
+            jsonData["features"].forEach((ele)=>{
+                let li = document.createElement('li');
+                li.textContent = ele;
+                features.append(li);
+            });
+
+            const contact = document.createElement('p');
+            contact.classList.add("nota", "notato");
+            contact.innerHTML = jsonData["contact"];
+
+            const removerBtn = document.createElement('button');
+            removerBtn.classList.add("button", "is-primary", "buttones");
+            removerBtn.textContent = jsonData["buttonMsg"];
+            removerBtn.addEventListener('click', ()=>{
+                updatePop.classList.add("trans");
+                setTimeout(() => {
+                    updatePop.remove()
+                }, 1000);
+            })
+
+            popup.append(update);
+            updatePop.append(popup);
+            document.body.append(updatePop);
+            update.append(titlea, versionNum, notaa, heada, features, contact, removerBtn);
+
+            setTimeout(() => {
+                updatePop.classList.remove('trans');
+            }, 1000);
+
+            window.localStorage.recentVesrion = currentVersion;
+        }, 3000);
+    }
+}
+
 
 (function (){
     chatSettings.addEventListener('click', toggleChatBar);
@@ -112,6 +191,18 @@ function hideDonate(){
     donationPop.classList.add('trans');
 }
 
+const isSafari = ()=>{return (!!window.ApplePaySetupFeature || !!window.safari) && agentHas("Safari") && !agentHas("Chrome") && !agentHas("CriOS")};
+const isChrome = ()=>{return agentHas("CriOS") || agentHas("Chrome") || !!window.chrome};
+const isFirefox = ()=>{return agentHas("Firefox") || agentHas("FxiOS") || agentHas("Focus")};
+const isEdge = ()=> {return agentHas("Edg")};
+const isOpera = ()=>{ return agentHas("OPR")};
+const isVivaldi = ()=>{return agentHas("Vivaldi")};
+function agentHas(keyword) {
+    return navigator.userAgent.toLowerCase().search(keyword.toLowerCase()) > -1;
+}
+
+
+
 
 let pushTmsgCont = composer(gptMsgTaker,gptMsgDom);
 function apiFetcher(APIurl, key, mthd, msg, fun){

Source_Code/assets/javascript/update.json

@@ -0,0 +1,14 @@
+{
+    "title": "🎊Congrats For Getting The New Update!🥳",
+    "version": "<span class='is-size-6'>1st May</span> <span class='is-size-5'>Version</span> 1.2.2",
+    "note": "Every Month There Is A Major Update",
+    "newNote": "See What Is New:👇",
+    "features": [
+        "Now you can control ChatGPT brain using settings button next to the input field.",
+        "Loading page with, funny messages after load",
+        "Support menu, check it by clicking 'Support Us' and don't forget to donate to us.",
+        "We added last updates bar. Which you see now."
+    ],
+    "contact": "For problems and sugessions contact us on <span class='has-text-success'>[email protected]</span>",
+    "buttonMsg": "Let's Try It"
+}

Source_Code/assets/style/main.css

@@ -42,7 +42,7 @@ body,html{
     min-width: 420px;
     padding: 12px 0 0 0;
     margin-bottom: 0;
-    transition: opacity 0.5s;
+    transition: opacity 0.8s;
 }
 .chat{
     height: 500px;
@@ -158,6 +158,7 @@ body,html{
 .trans{
     opacity: 0;
     pointer-events: none;
+    transition: opacity 0.5s;
 }
 .load{
     background-color: var(--whiteBg);
@@ -270,7 +271,7 @@ body,html{
     margin-right: 20px;
     box-sizing: border-box;
 }
-.donations ul {
+.popup ul {
     list-style: disc !important;
     padding-left: 15px !important;
     font-size: 14px;
@@ -311,11 +312,151 @@ i.donate{
 }
 
 
+.full-shadowT{
+    position: absolute;
+    width: 100%;
+    height: 100vh;
 
+    background: rgba(123, 123, 123, 0.25);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, );
+    backdrop-filter: blur(0.85px);
+    -webkit-backdrop-filter: blur(0.85px);
 
-
-
-
+    z-index: 1001px;
+    top: 0;
+    transition: opacity 0.5s;
+}
+.trnsShowBG::after, .trnsShowBG::before, .popuper::after, .update::after, .update::before{
+    content: '';
+    position: absolute;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    z-index: 90;
+}
+.trnsShowBG::after{
+    background-image: url('/assets/images/vectors/Half.png');
+    width: 220px;
+    height: 220px;
+    top: 51px;
+    left: 56px;
+    transform: translate(-50%, -50%) rotate(275deg);
+    animation-name: half;
+    animation-duration: 5s;
+    animation-iteration-count: infinite;
+}
+.trnsShowBG::before{
+    background-image: url('/assets/images/vectors/Cube.png');
+    width: 150px;
+    height: 150px;
+    bottom: -20px;
+    right: -12px;
+    transform: translate(-50%, -50%) rotate(0deg);
+    animation-name: cube;
+    animation-duration: 15s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+.popuper{
+    position: relative
+}
+.popuper::after{
+    background-image: url('/assets/images/vectors/Ball.png');
+    width: 120px;
+    height: 120px;
+    animation-name: ball;
+    animation-duration: 15s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+    animation-delay: 1s;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(0deg);
+}
+.update{
+    background: rgba(255, 255, 255, 0.25);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border: 1px solid rgba(255, 255, 255, 1);
+    width: 390px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 100;
+    padding: 12px;
+    transition: 0.5s;
+}
+.update.chrome{
+    background: rgba(255, 255, 255, 0.75);
+}
+.update a{
+    text-decoration: underline !important;
+    color: var(--gLightbg) !important;
+}
+.update ul{
+    font-size: 15px !important;
+}
+.para2{
+    margin-bottom: 10px !important;
+    line-height: 35px !important;
+}
+.para3{
+    margin-bottom: 10px !important;
+}
+.buttones{
+    margin-top: 10px;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    display: block !important;
+}
+
+
+
+
+
+
+
+@keyframes half {
+    50%{
+        transform: translate(-50%, -50%) rotate(290deg);
+    }
+    100%{
+        transform: translate(-50%, -50%) rotate(275deg);
+    }
+}
+@keyframes cube {
+    40%{
+        transform: translate(-50%, -50%) rotate(180deg);
+    }
+    50%{
+        transform: translate(-50%, -50%) rotate(120deg);
+    }
+    100%{
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+@keyframes ball {
+    0%{
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    40%{
+        left: calc(50% - 180px);
+        transform: translate(-50%, -50%) rotate(60deg);
+    }
+    70%{
+        left: calc(50% + 180px);
+        transform: translate(-50%, -50%) rotate(120deg);
+    }
+    100%{
+        left: 50%;
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
 
 
 

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.1",
+    "version": "1.2.2",
     "icons":{
         "16": "/assets/logo/icon16.png",
         "48": "/assets/logo/icon48.png",

Source_Code/popup.html

@@ -9,7 +9,6 @@
     <link rel='stylesheet' type='text/css' media='screen' href='/assets/style/main.css'>
     <link rel='stylesheet' type='text/css' media='screen' href='/assets/style/bulma.css'>
     <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro-v6@44659d9/css/all.min.css" rel="stylesheet" type="text/css" />
-    <script src='/assets/javascript/app.js' defer></script>
 </head>
 <body>
     <div class="conatiner load" id="load">
@@ -48,7 +47,7 @@
                 </div>
 
                 <div class="field">
-                    <label class="label">Role / Behaive</label>
+                    <label class="label">Role / Behave</label>
                     <div class="control">
                       <div class="select is-small">
                         <select id="roleInput">
@@ -119,5 +118,7 @@ <h1 class="heada">How your donation will help?</h1>
             </div>
         </div>
     </div>
+
 </body>
-</html>
+</html>
+<script src='/assets/javascript/app.js'></script>