diff --git a/Source_Code/assets/javascript/app.js b/Source_Code/assets/javascript/app.js index 8b9d69e..4e303dc 100644 --- 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😎`] + +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 index d3f1a5a..52447bc 100644 --- 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; -} \ No newline at end of file +} +.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 index fe3673d..0c3a905 100644 --- 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 index cdb27ad..cfe3d1f 100644 --- a/Source_Code/popup.html +++ b/Source_Code/popup.html @@ -12,14 +12,28 @@ -
- Support us -
- +
+
+ +

by GPTcore Studio

-
- - +
+
+
+ Support us +
+ +
+
+ +

+

Write anything to start

+
+
+ +
+ +