Adding Load page

In this commit: - Adding preload page functionality - increasing page height nd width - changing support link - funny messages after load - We don't remember
HamzaElkotp · Apr 20, 2023 · bd2c559 · bd2c559
1 parent 66823f3
commit bd2c559
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 31 deletions.
diff --git a/Source_Code/assets/javascript/app.js b/Source_Code/assets/javascript/app.js
@@ -1,10 +1,37 @@
-const token = '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';
-const apiKeys = 'https://api.openai.com/v1/chat/completions';
+const loadSpace = document.querySelector('#load');
+const chatSpace = document.querySelector('#chatapp');
+const welcomeBox = document.querySelector('#welcomeBox');
+const welcomingMsg = document.querySelector('#welcommsg');
 
 const submitBTN = document.querySelector('#submitBTN');
 const msgCont = document.querySelector("#msgBox");
 const textInput = document.querySelector("#userMsg");
 
+
+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>😎`]
+
+const token = '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';
+const apiKeys = 'https://api.openai.com/v1/chat/completions';
+
+
+
+
+function preload(){
+    setTimeout(() => {
+        loadSpace.classList.add('trans');
+        chatSpace.classList.remove('trans');
+        welcomingMsg.innerText = welcomeMsgs[Math.floor(Math.random() * welcomeMsgs.length - 1)];
+    }, 800);
+}
+document.body.addEventListener('load', preload());
+
+
+
 const gptMsgTaker = function(resp){
     return resp.choices[0].message.content;
 }
@@ -71,6 +98,7 @@ try{
     submitBTN.addEventListener('click',()=>{
         let input = textInput.value;
         if(input.length == 0) return ;
+        welcomeBox.classList.add('trans')
         textInput.value = '';
         userMsgDom(input);
         apiFetcher(apiKeys, token, 'POST', 'user', input, pushTmsgCont)

diff --git a/Source_Code/assets/style/main.css b/Source_Code/assets/style/main.css
@@ -1,6 +1,9 @@
 :root{
     --gLightbg: #00aa91;
     --whiteBg: #ffffff;
+    --graybg: #eeeeee;
+    --darkfo: #363636;
+    --blackfo: #000000
 }
 *{
     scrollbar-width: thin;
@@ -11,6 +14,30 @@
 *::-webkit-scrollbar-thumb {
     background: var(--gLightbg);
 }
+html{
+    overflow-y: auto;
+}
+body,html{
+    min-height: 400px;
+    background-color: var(--graybg) !important;
+}
+.conatiner{
+    min-width: 420px;
+    padding: 12px 0 0 0;
+    margin-bottom: 0;
+    transition: opacity 0.5s;
+}
+.chat{
+    height: 500px;
+    overflow-y: auto;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
+.innerContainer{
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-bottom: 5px;
+}
 
 .msg {
     width: fit-content;
@@ -71,30 +98,97 @@
 }
 
 
-
-
-body,html{
-    min-height: 400px;
-}
-.conatiner{
-    min-width: 400px;
-    padding: 12px;
-}
-.chat{
-    height: 430px;
-    overflow-y: auto;
-    padding-bottom: 10px;
-    padding-top: 10px;
+.controler{
+    background-color: #fff;
+    padding-top: 2px;
+    padding-bottom: 2px;
 }
-.controler textarea{
+.controler .input{
     resize: vertical;
     white-space: pre-wrap;
-    min-height: 30px !important;
-    overflow: hidden;
-    margin-bottom: 10px;
+    min-height: 24px !important;
     padding-top: 5px;
+    padding-bottom: 5px;
+    line-height: 18px;
+    padding-left: 2px;
+    overflow: hidden;
+    border: none ;
+    outline: none ;
+    box-shadow: none ;
+    background-color: transparent !important;
 }
-textarea::placeholder{
-    color: #595959 !important;
+.controler .input::placeholder{
+    color: #363636 !important;
     font-size: 14px;
-}
+}
+.controler .input:focus, .controler .input:active{
+    border: none ;
+    outline: none ;
+    box-shadow: none ;
+}
+.contbtn{
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 17px;
+}
+.sendBTN{
+    padding-left: 10px;
+    color: var(--gLightbg);
+}
+
+
+.trans{
+    opacity: 0;
+    pointer-events: none;
+}
+.load{
+    background-color: var(--whiteBg);
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.centeredBox{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    pointer-events: none;
+    transition: opacity 0.5s;
+    width: 100%;
+    padding: 0 15px
+}
+.centeredBox img{
+    width: 140px;
+}
+.centeredBox .authorname {
+    font-size: 20px;
+    font-weight: 600;
+    margin-top: 0px;
+    color: var(--darkfo);
+}
+.centeredBox .powered{
+    font-weight: 500;
+    color: var(--blackfo);
+    font-size: 16px;
+}
+.centeredBox .fnames{
+    font-weight: 700;
+    color: var(--gLightbg);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
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.0.2",
+    "version": "1.1.0",
     "icons":{
         "16": "/assets/logo/icon16.png",
         "48": "/assets/logo/icon48.png",

diff --git a/Source_Code/popup.html b/Source_Code/popup.html
@@ -12,14 +12,28 @@
     <script src='/assets/javascript/app.js' defer></script>
 </head>
 <body>
-    <div class="conatiner">
-        <a class="button is-success is-small" href="https://www.buymeacoffee.com/HamzaElkotp/w/17860" target="_blank">Support us</a>
-        <div class="chat msgBox is-relative" id="msgBox">
-
+    <div class="conatiner load" id="load">
+        <div class="centeredBox">
+            <img src="/assets/logo/icon.png" alt="">
+            <p class="authorname"><span class="powered">by</span> <span class="fnames">GPT</span>core Studio</p>
         </div>
-        <div class="controler">
-            <textarea name="userMSG" id="userMsg" class="textarea" placeholder="Write anything here to chat!"></textarea>
-            <button class="button is-primary is-fullwidth" id="submitBTN">Send</button>
+    </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>
+
+        <div class="chat msgBox is-relative innerContainer" id="msgBox">
+            <div class="centeredBox starter" id="welcomeBox">
+                <i class="is-size-1 has-text-primary fa-duotone fa-robot" style="--fa-primary-opacity: 0.8; --fa-secondary-opacity: 0.3;"></i>
+                <p class="is-size-6" id="welcommsg"></p>
+                <p class="is-size-6">Write anything to start</p>
+            </div>
+        </div>
+
+        <div class="controler innerContainer is-flex">
+            <textarea name="userMSG" id="userMsg" class="input" placeholder="Write anything here to chat!"></textarea>
+            <button class="sendBTN contbtn" id="submitBTN"><i class="fa-solid fa-paper-plane-top"></i></button>
         </div>
     </div>
 </body>