From ca25557377d8aa9ffb5934e688301ed63df6bde3 Mon Sep 17 00:00:00 2001 From: "dhira.negi" Date: Sun, 18 Jun 2023 23:25:23 +0530 Subject: [PATCH] chatbot UI --- src/App.js | 215 +++++++++++++++-------- src/App.scss | 70 ++++---- src/Assets/icons/chatbot/add.svg | 4 + src/Assets/icons/chatbot/delete.svg | 4 + src/Assets/icons/chatbot/logo.png | Bin 0 -> 2540 bytes src/Assets/icons/chatbot/mail.svg | 3 + src/Assets/icons/chatbot/message.svg | 3 + src/Assets/icons/chatbot/send.svg | 4 + src/Assets/icons/chatbot/settings.png | Bin 0 -> 1844 bytes src/Assets/icons/chatbot/warning.svg | 5 + src/Components/ChatBot/ChatBot.js | 142 +++++++++++++++ src/Components/ChatBot/ChatBot.scss | 134 ++++++++++++++ src/Components/Home/Home.js | 65 +++---- src/Components/Landing.js | 210 ++++++++++++++-------- src/Components/Ovations-page/Ovations.js | 38 ++-- 15 files changed, 669 insertions(+), 228 deletions(-) create mode 100644 src/Assets/icons/chatbot/add.svg create mode 100644 src/Assets/icons/chatbot/delete.svg create mode 100644 src/Assets/icons/chatbot/logo.png create mode 100644 src/Assets/icons/chatbot/mail.svg create mode 100644 src/Assets/icons/chatbot/message.svg create mode 100644 src/Assets/icons/chatbot/send.svg create mode 100644 src/Assets/icons/chatbot/settings.png create mode 100644 src/Assets/icons/chatbot/warning.svg create mode 100644 src/Components/ChatBot/ChatBot.js create mode 100644 src/Components/ChatBot/ChatBot.scss diff --git a/src/App.js b/src/App.js index 0a8493d..1bb5cb9 100644 --- a/src/App.js +++ b/src/App.js @@ -3,14 +3,12 @@ import React, { useState, useEffect } from "react"; import { Howl } from "howler"; import ambient from "./Assets/sounds/WinterRestlessness.mp3"; import Landing from "./Components/Landing"; -import rotate from "./Assets/icons/rotate.svg"; -import beep from '../src/Assets/sounds/beep.mp3' -import explosion from '../src/Assets/sounds/explosion.mp3' -import headphone from '../src/Assets/icons/headphone.svg' +import beep from "../src/Assets/sounds/beep.mp3"; +import explosion from "../src/Assets/sounds/explosion.mp3"; +import headphone from "../src/Assets/icons/headphone.svg"; import ReactHowler from "react-howler"; function App() { - const [load, setLoad] = useState("loading"); const [playing, setPlaying] = useState(false); @@ -24,45 +22,51 @@ function App() { ); const [orientation, setOrientation] = useState( - !navigator.maxTouchPoints ? "desktop" : !window.screen.orientation.angle ? "portrait" : "landscape" + !navigator.maxTouchPoints + ? "desktop" + : !window.screen.orientation.angle + ? "portrait" + : "landscape" ); const exx = new Howl({ src: [explosion], - volume: 0.6 + volume: 0.6, }); const bep = new Howl({ src: [beep], - volume: 0.02 - }); + volume: 0.02, + }); function handleEnter() { - document.querySelector('.loading-screen').remove() - setTimeout(() =>{ - document.querySelector(".rotating-mars-container").classList.add("quick-unhide") + document.querySelector(".loading-screen").remove(); + setTimeout(() => { + document + .querySelector(".rotating-mars-container") + .classList.add("quick-unhide"); playSound(); exx.play(); - document.body.style.overflow = 'scroll' - },1000); - setTimeout(() =>{ - document.querySelector(".top-nav").classList.add("unhide") - document.querySelector(".page-number").classList.add("unhide") - document.querySelector(".social-nav").classList.add("unhide") - document.querySelector(".sound-loader").classList.add("unhide") - document.querySelector(".ring0").classList.add("unhide") - document.querySelector(".ring1").classList.add("unhide") - document.querySelector(".ring2").classList.add("unhide") - document.querySelector(".ring3").classList.add("unhide") - },3000); - setTimeout(() =>{ - document.querySelector(".inst-text").classList.add("unhide") - document.body.style.overflow = 'scroll' - },4500); + document.body.style.overflow = "scroll"; + }, 1000); + setTimeout(() => { + document.querySelector(".top-nav").classList.add("unhide"); + document.querySelector(".page-number").classList.add("unhide"); + document.querySelector(".social-nav").classList.add("unhide"); + document.querySelector(".sound-loader").classList.add("unhide"); + document.querySelector(".ring0").classList.add("unhide"); + document.querySelector(".ring1").classList.add("unhide"); + document.querySelector(".ring2").classList.add("unhide"); + document.querySelector(".ring3").classList.add("unhide"); + }, 3000); + setTimeout(() => { + document.querySelector(".inst-text").classList.add("unhide"); + document.body.style.overflow = "scroll"; + }, 4500); } function handlebeep() { - bep.play() + bep.play(); } function handleDetect() { @@ -83,54 +87,101 @@ function App() { window.addEventListener("resize", handleDetect); }; }, []); - + + // For displaying an overlay when the device display is in Potrait mode + // useEffect(() => { + // if((device==="mobile" && orientation==="landscape") || (device==="computer" && orientation==="desktop")){ + // // document.querySelector(".site-container").classList.remove("hide") + // // document.body.style.overflow = 'hidden'; + // document.querySelector(".device-overlay-container").classList.add("move-out") + // } + // else{ + // // document.querySelector(".site-container").classList.add("hide") + // document.querySelector(".device-overlay-container").classList.remove("move-out") + // } + // }, [orientation, device]) // To stop the scrolling until App is completely loaded on client side useEffect(() => { - if(load==="loading" || orientation==="portrait") - {document.body.style.overflow = 'hidden'} + if (load === "loading" || orientation === "portrait") { + document.body.style.overflow = "hidden"; + } // else // { // document.body.style.overflow = 'scroll' // } - }, [load,orientation]) + }, [load, orientation]); // For knowing when the app has been loaded on client side document.onreadystatechange = function () { - if (document.readyState === 'complete') { + if (document.readyState === "complete") { setLoad("loaded"); } - } + }; return ( -
- -
-
-
-
-
+
+
+
+
+
+
+
-
-
- { - load==="loaded" ? - - : +
+ {load === "loaded" ? ( + + ) : (

LOADING

- } - { - load==="loaded" && -
- sound -

- T U R N   O N   S O U N D -    F O R   B E S T   E X P E R I E N C E -

-
- } + )} + {load === "loaded" && ( +
+ sound +

+ T U R N   O N   S O U N D +    F O R   B E S + T   E X P E R I E N C E +

+
+ )} +
+ + +
+
+ + + + + + + +
+ + { + for (let i = 0; i < 7; i++) { + document.querySelector(`#stroke${i}`).classList.add("stroke"); + document + .querySelector(`#stroke${i}`) + .classList.remove("nostroke"); + } + }} + onPause={() => { + for (let i = 0; i < 7; i++) { + document.querySelector(`#stroke${i}`).classList.add("nostroke"); + document.querySelector(`#stroke${i}`).classList.remove("stroke"); + } + }} + />
- +
@@ -141,9 +192,9 @@ function App() {
- { @@ -151,7 +202,7 @@ function App() { document.querySelector(`#stroke${i}`).classList.add("stroke"); document.querySelector(`#stroke${i}`).classList.remove("nostroke"); } - }} + }} onPause={() => { for (let i = 0; i < 7; i++) { document.querySelector(`#stroke${i}`).classList.add("nostroke"); @@ -160,19 +211,39 @@ function App() { }} />
- - {/* For showing overlay when device is mobile and in potrait mode */} - {/*
+ + /* For showing overlay when device is mobile and in potrait mode */ + /*
+ + {/*

Please rotate your device

rotate your device

This website is specifically
designed for Desktop

-
*/} - - -
+
*/ ); } -export default App; \ No newline at end of file +export default App; + +// let aid; +// const [aid, setAid] = useState(); + +// function handleBgSound() { +// if (!amb.playing(aid) && !amb.playing()) { +// const aid1 = amb.play(); +// // console.log("aid",aid) +// // console.log("aid1",aid1) +// setAid(aid1) +// // console.log("aid",aid) +// // console.log("aid1",aid1) +// console.log(aid, "if"); +// } else if (amb.playing(aid)) { +// amb.pause(aid); +// console.log(aid, "Pause(ID)"); +// } else { +// console.log(aid, "else"); +// amb.pause(); +// } +// } diff --git a/src/App.scss b/src/App.scss index 615e381..46dcbc8 100644 --- a/src/App.scss +++ b/src/App.scss @@ -9,7 +9,8 @@ $Dark: #051129; outline: none; } -::-moz-selection { /* Code for Firefox */ +::-moz-selection { + /* Code for Firefox */ color: $Dark; background: $Accent; } @@ -135,7 +136,7 @@ p { width: 200px; font-weight: 600; font-size: 16px; - + background: $Primary; color: $Dark; backdrop-filter: blur(10px); @@ -155,7 +156,6 @@ p { // -webkit-text-fill-color: transparent; // animation: shine 3s linear; // } - } // @keyframes shine{ @@ -170,7 +170,6 @@ p { // } // } - .sbutton { width: 200px; height: 50px; @@ -348,7 +347,7 @@ body::-webkit-scrollbar { &::before { position: absolute; - content: ''; + content: ""; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; opacity: 0; @@ -382,10 +381,8 @@ body::-webkit-scrollbar { } } } - } - .page-number { position: fixed; right: 9.5%; @@ -429,7 +426,7 @@ body::-webkit-scrollbar { border: 1px solid $Primary; box-sizing: border-box; } - + .orb { position: absolute; z-index: 1; @@ -437,7 +434,11 @@ body::-webkit-scrollbar { left: 50%; height: 10px; width: 10px; - background: radial-gradient(55.56% 55.56% at 50% 50%, $Primary 0%, $Dark 100%); + background: radial-gradient( + 55.56% 55.56% at 50% 50%, + $Primary 0%, + $Dark 100% + ); } } @@ -522,7 +523,6 @@ body::-webkit-scrollbar { } } - // sound waves effect .sound-loader { position: fixed; @@ -534,7 +534,8 @@ body::-webkit-scrollbar { z-index: 999; &:hover { - .stroke, .nostroke { + .stroke, + .nostroke { background: $Light; } } @@ -588,8 +589,6 @@ body::-webkit-scrollbar { } } - - @keyframes animatewaves { 50% { height: 20%; @@ -673,23 +672,24 @@ body::-webkit-scrollbar { flex-direction: column; align-items: center; justify-content: center; - + .rotate-img { height: 20vh; padding-top: 10%; padding-bottom: 10%; - -webkit-animation: device-rotation 2s cubic-bezier(.455,.03,.515,.955) 0s infinite; - animation: device-rotation 2s cubic-bezier(.455,.03,.515,.955) 0s infinite; + -webkit-animation: device-rotation 2s + cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite; + animation: device-rotation 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s + infinite; } - - .helper-text{ + + .helper-text { text-align: center; - color:gray; + color: gray; } } } - @keyframes device-rotation { 0% { -webkit-transform: rotate(0); @@ -697,19 +697,19 @@ body::-webkit-scrollbar { opacity: 0; } 50% { - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); - opacity: 1; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 1; } 80% { - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); - opacity: 1; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 1; } 100% { - opacity: 0; - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); + opacity: 0; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } } @@ -732,15 +732,15 @@ body::-webkit-scrollbar { } @media (orientation: portrait) { - .device-overlay-container { + .device-overlay-container { display: block; - } - // .site-container { display: none; } } + // .site-container { display: none; } +} @media (orientation: landscape) { - .device-overlay-container { - display: none; + .device-overlay-container { + display: none; // overflow: scroll; } // .site-container { display: block; } - } \ No newline at end of file +} diff --git a/src/Assets/icons/chatbot/add.svg b/src/Assets/icons/chatbot/add.svg new file mode 100644 index 0000000..9b521a5 --- /dev/null +++ b/src/Assets/icons/chatbot/add.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/Assets/icons/chatbot/delete.svg b/src/Assets/icons/chatbot/delete.svg new file mode 100644 index 0000000..8b2edfa --- /dev/null +++ b/src/Assets/icons/chatbot/delete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/Assets/icons/chatbot/logo.png b/src/Assets/icons/chatbot/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..c1012a2aa27308e0bd3488c7498f10443462dcc6 GIT binary patch literal 2540 zcmb7Fdo1%cVIN$o#_w2Rze%AZE@3Y^%*Ke)g>fq`a zz%p#;HUI_#00s@PIu0A8TUq_&#B#Ku+gX1V9smf4EdX#sBEwm>mP8NsUZN!S4L+QR zuy6bycF1?JU*Zlxul_&i|0{&@^N-*_Nwd%-g+qr!%_>7&Iq)mjk#OIye5ZsTi42Q` za-1YQ+=XQYaX*Ob1pbZt{*80O!X^3Vpq!oD;3&yi5=c6h_YZM(hIS-0*MkVa0=B^N z`~5?U0Wetr0G{zZ=9>$EAQ6By!tXIsApnXA0MtME9{c_#VLstLkU#Xu(3A=Y0AQ{h z01O)drEUPwo_}f3@?Ux*LehGuuTW?Nf?(heh=2}400(S_m;u-VsK97d1grpDN&?9W zhk%elNPv`)k(NOr(P$JBg+j|K%A@5Jnp zAyy702Sxu+tlk4SBrpa$;V?}gg@eIyu+YAuWRgvPirJRY}u=>7#7PD$+9Gp;WeV!Xx6(7ei%hVG`4ChLRnsk(GiY zA?*hofJsS110nmL1jrK7aT<84j4b45z*CMt|5QoSl2!ZS{i+bi!yz{u90$xnU}M#- zFmw7m;SGp9_;4j3CRdZ+IRJv61;>09TS z{`N^`PqLSXUj{x?(Z7LJw1AXdfR`@bcq5MSruR40nXEfiTHZrZp+*uIJ3g81P`Gu$ z);Tux%KK^fw0T5`deGu9)BOdTU#3MixA7G3{xiBOY0^G-t?f9Q{~#nf zhJ%l9E7CZ3EUS24F6c(&Wi{6I%cniKI*$7R!9v>m&cw!#Q;%}oX-yQRVxvMkbahIu zdJy3k1^gw&d0p~M^+bD!7hCjPEUMe+Y$8#4#luBsg2bdqUV_lBs)cLQ#oNz*ns#8h(3kWre%TrxsibgA^d zI$sb1D@nQahw<;+`~nwV5s%6L)%9>UwZG;BX4VXT2C+ERmmNQdQL8J|(>A50d3*_s zwh8dfHrElQX}g&=8wsX}r+f|ctefxp&}UL#XfBUbSG_(yK2GYp7(ykRqz%mv5oQy} zUTd=!`}^8{O4t857q4hIo-t;2G`@LxAug5n(1!?9UC^Ju*0a{811S2eedow!cj>(s z`7Mq1R@Cv_r*)RBjcojC6|D5NaoH_gk0Y38%LkASrN%h77dMLE}8sX z!6Bfe=ktSXW}|$=LjpX<#A$pxN-Jrd2RySRpIjauEd4>2J6Fwptx)g%&^B17BQb1* zy92FP@CW}kN!Gt{+MqaYOzgN{xwZ$O@4sZ!mdt3ytXU!k<>W_P4ybf~Bj14^4VtTe z9yMc!7t%U$Ux;CJvq`^~B=l!(vew?b0|_hKM~oOAaZ2-|yZMQfC~F6u-}YqC93oPU zw1!(V$98?t9D44tDE_%jr5E*ab74Vfl~C@nUV7iIZNw7|v5f&oS?le8oC&A2T7hiz zFU;m9ZYk*(^$b%!I~MwLN!1-_r>1V$T%vbJzJkN(jB5vjSDgH> ziOtn0kI6EUP7Q34k@9reDbie^-#GEyD~aprGEm-E-l&$Y&Yxf~m*e21tU*90VyG*w zyamsJgH+S!RfJHJht2cMV(x@kvx*=;ShYGe%6 z?2@j*z5EeIC;td}(i9Vy8dcJ@t?C^cp&qq}$u$qVdQd;hF3ec7mfBF%N~$o-CPXAC zYUp;R4<39KA~QP`sGvgN9)1|Y>EASI%N3q$AI0dY#92g*W(rh`5+fD(BwdqbqOohC zn07NMl(+S|W1aTKj+lj4WG5PkVx@s8DaXkrQH;unDEEZ9x-aIkw2#2_c$rs1PS1sc zxw9=V+XZh8+vf2vf6&y&d@OVIE)}JU76u)R796lFH}!Ywx-pwz+Rc;V?P?Bq1sjx+ z*z@5g?*}(n>+e^(P+XtoWm%UNYMY|a*Q8d8PNKATpYv$xK5@*XS#Yc;+a=(7)wcUe z39dy(rUUVD8*KN#dH*U=9w^ILWHI zdD4a_t-qdjQ<`;2O4$Y=E+rSphb(=9U>INFa69t^5>?rO+% zk + + diff --git a/src/Assets/icons/chatbot/message.svg b/src/Assets/icons/chatbot/message.svg new file mode 100644 index 0000000..6598761 --- /dev/null +++ b/src/Assets/icons/chatbot/message.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/icons/chatbot/send.svg b/src/Assets/icons/chatbot/send.svg new file mode 100644 index 0000000..d1ae570 --- /dev/null +++ b/src/Assets/icons/chatbot/send.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/Assets/icons/chatbot/settings.png b/src/Assets/icons/chatbot/settings.png new file mode 100644 index 0000000000000000000000000000000000000000..ea1635566998b73ac4bfef4c213f619e08aab2da GIT binary patch literal 1844 zcmb7D3pCVO7{4?BF=obV#!x1YM$uNpj1s44(uf_a9m!bZQJFF1(HMh-QV~5#NIOQ3 zM@f{Uh>$JgS(M6d35QT@9w{lM-DdC9cC_cTXV3obx%d9g_xrx@e)pdH$-CrF0MW^T zx`#bj=Cab-KOoHu?JS^)%x2Ea~XgxJ+_1J#4;Nmbasz?UB``oh1l z!@O@FDzXF6x#Ao8f0^)pf^a@`dI_hI7#4fP?ZRPPWPP6C>H>Yg8)=^%-QDNMC2>>h56wl!-@9y2Vm+v0BT$S$oBvs zczx2~@-MYfp`-`v3WXy8ga84c0u~SgJ}`sK0?+^*td{oxCP2^%C{_dlgT*L-!(x@N zcpQO%$Kmk=RSi{winLdhEe1wJB5@ek*qj6*Bop=3-1XcPvG05tNqjzS|CC1ny;6W|QV zbge~p7SL@z4F6{W6byla0SSD%_FQIotR~9BkiN(+Pu>kwVOlf^Apr)Mo@r=k6{bne zV;xUVZB(nZ^0r_!0feOEu!Kn~l%H6mYQ8rnv zCTqq~RJ%14b5w;>tzDRklulehm&!pAgT=^=h}eFEzuP@3et^v{xaJwUI{rq-Rc}6i zRZu^20h8nt&ye9}vA<>{={Ih@E#C8{Y3dhIZsmiP`ia+EcYldzY}(;sjxixI!73)D zsbf>(0?hdPi*<+UGKMH48PBpQc0t7_q+SE%75RRwiQD}1Tw@bMj#^(fEv(-zrTODg zPGpXK*&jAZqk$`xOC(XcUSqF)+Rj*6Uvx5Q%DKW7kdiX3+fQChTN^C4Vy!y(^I>Yd zn|IEp%-rRBlkcW(Ptj(_o-fy}8=mmU9OEd*l^C_-O`q-^&5b+s!0Ck4RMR7tIFiF2 zKesx(O^?ti;}=%7`g_?r2USrXs|Fb-2b}t#ogU&<#5m$mRad(=rCu}=M`rsKUYFVq zcY0Lma(27ghc7?*+nbpZlgM?QcoQ4cb8p|9RxbL5>^a&@|eFu09UIdY(E)9i`konghBZC|{%*d=~ycAw=w zii&j6+GRu^*V@fDl}N+Z1z&xV{d!OS(~90KN#W(bCoZM>v8gFB7pNJ_nP{eVr}jFE z6=k@Wo%KS}gLD;DuP|Ry=nM}XBb$^Ze?H^~cN-V=;6W_1X>7e*uzbxG;8CvVH zQGUeX%acW!Mf46{9t)W{YJD!lVFA~O)Ox>p;!9Fx4kE|KvIPdB1w;b@L<+Fub^qG#t9kL?f^fM=eS=CihF9Ya;Nx%22qo3&% zC_m~6 N-q3KX+(SeD_%GN2ZQ1|; literal 0 HcmV?d00001 diff --git a/src/Assets/icons/chatbot/warning.svg b/src/Assets/icons/chatbot/warning.svg new file mode 100644 index 0000000..b29de19 --- /dev/null +++ b/src/Assets/icons/chatbot/warning.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/Components/ChatBot/ChatBot.js b/src/Components/ChatBot/ChatBot.js new file mode 100644 index 0000000..1deb13c --- /dev/null +++ b/src/Components/ChatBot/ChatBot.js @@ -0,0 +1,142 @@ +import React, { useState } from "react"; + +import logo from "../../Assets/icons/chatbot/logo.png"; +import settings from "../../Assets/icons/chatbot/settings.png"; +import send from "../../Assets/icons/chatbot/send.svg"; +import add from "../../Assets/icons/chatbot/add.svg"; +import mail from "../../Assets/icons/chatbot/mail.svg"; +import message from "../../Assets/icons/chatbot/message.svg"; +import warning from "../../Assets/icons/chatbot/warning.svg"; +import deleteImg from "../../Assets/icons/chatbot/delete.svg"; + +import "./ChatBot.scss"; + +const ChatBot = () => { + const [chatWindowOpen, setChatWindowOpen] = useState(false); + const [settingsMenuOpen, setSettingsMenuOpen] = useState(false); + + const onChatClick = () => { + console.log("clicked"); + setChatWindowOpen(true); + }; + + const onCloseClick = () => { + setChatWindowOpen(false); + }; + + const sendMessage = (event) => { + if (event.key === "Enter") { + console.log("do validate"); + } + }; + + function textAreaAdjust(el) { + el.style.height = + el.scrollHeight > el.clientHeight ? el.scrollHeight + "px" : "60px"; + } + + const settingsClick = () => { + setSettingsMenuOpen(!settingsMenuOpen); + }; + + return ( + <> + {chatWindowOpen ? ( + <> +
+
+
+ + Marstech +
+ +
+ +
+
What can I do for you ?
+
Tell me about this company
+
+
+
+ + + +
+
+ Powered by + marstech.ai +
+
+
+ {settingsMenuOpen && ( + + )} + + + + ) : ( + + )} + + ); +}; + +export default ChatBot; diff --git a/src/Components/ChatBot/ChatBot.scss b/src/Components/ChatBot/ChatBot.scss new file mode 100644 index 0000000..a36ded6 --- /dev/null +++ b/src/Components/ChatBot/ChatBot.scss @@ -0,0 +1,134 @@ +.chatButton { + box-sizing: border-box; + + position: absolute; + right: 0; + width: 86px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + background: #ffffff; + box-shadow: 0px 0px 28px 3px rgba(0, 0, 0, 0.25); + border-radius: 20px 0px 20px 20px; +} + +.close { + position: absolute; + width: 30px; + height: 30px; + left: 0; + bottom: 0; + border-radius: 20px; + background: #ffffff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); +} + +.chatWindow { + position: absolute; + bottom: 40px; + right: 0; + width: 300px; + height: 450px; + background: #f4f3f9; + border-radius: 20px 20px 0px 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + .header { + background: #f4f3f9; + padding: 10px; + display: flex; + justify-content: space-between; + box-shadow: 0px 4px 41px -18px rgba(0, 0, 0, 0.25); + border-radius: 20px 0 0; + .heading { + display: flex; + column-gap: 10px; + } + } + + .content { + margin: 0 20px; + .leftMessage { + font-size: 14px; + line-height: 21px; + color: #494655; + margin-bottom: 10px; + } + .rightMessage { + background: linear-gradient(266.86deg, #494655 8.27%, #9b95b0 97.84%); + box-shadow: 0px 0px 41px -18px rgba(0, 0, 0, 0.25); + border-radius: 20px 0px 20px 20px; + padding: 10px; + color: #ffffff; + margin-bottom: 10px; + } + } + + .bottom { + padding: 0 20px; + + .inputBox { + position: relative; + img { + position: absolute; + right: 10px; + top: 25%; + } + input { + border: none; + height: 40px; + padding: 10px; + border-radius: 10px; + width: -webkit-fill-available; + box-shadow: 0px 0px 41px -18px rgba(0, 0, 0, 0.25); + } + } + .footer { + padding: 10px; + } + } +} + +.sidebar { + display: flex; + position: absolute; + bottom: 40px; + right: 90px; + width: 210px; + height: 450px; + background: #ffffff; + border-radius: 20px 20px 0px 20px; + + .sd-body { + padding: 15px; + display: flex; + justify-content: space-between; + flex-direction: column; + ul { + padding: 0; + } + } + .sd-body ul li { + list-style: none; + padding: 0; + display: flex; + align-items: center; + } + .sd-body ul li .sd-link { + padding: 10px 5px; + cursor: pointer; + color: #494655; + } + .report { + padding: 10px 5px; + cursor: pointer; + color: #da6635; + } +} + +.active { + opacity: 1; + visibility: visible; +} diff --git a/src/Components/Home/Home.js b/src/Components/Home/Home.js index be8720d..a47ee63 100644 --- a/src/Components/Home/Home.js +++ b/src/Components/Home/Home.js @@ -25,39 +25,40 @@ function Home() {
  • { if (startFlag) { - console.log("in startFlag") + console.log("in startFlag"); const window = e.currentTarget; const scrollLimit = qty >= 1 && qty <= sectionQty; if (scrollLimit) { // document.body.style.overflowY = "hidden"; // Lock scroll - + if (y < window.scrollY && qty < sectionQty) { - console.log("qty before if",qty) - if(qty<2 || qty>3){ - console.log("qty inside if",qty) - document.querySelector(`section.s${subqty}`).style.transform = "translateY(-100vh)"; - document.querySelector(`section.s${subqty + 1}`).style.transform = "translateY(0)"; + console.log("qty before if", qty); + if (qty < 2 || qty > 3) { + console.log("qty inside if", qty); + document.querySelector(`section.s${subqty}`).style.transform = + "translateY(-100vh)"; + document.querySelector(`section.s${subqty + 1}`).style.transform = + "translateY(0)"; } setTimeout(() => { setQty(qty + 1); - if(qty<2 || qty>3){ - setSubQty(subqty + 1) - console.log(subqty) + if (qty < 2 || qty > 3) { + setSubQty(subqty + 1); + console.log(subqty); } - },100); + }, 100); } else if (y > window.scrollY && qty > 1) { - if(qty<=2 || qty>4){ - console.log("qty in elseif",qty) - console.log("subqty in elseif",subqty) - document.querySelector(`section.s${subqty - 1}`).style.transform = "translateY(0)"; - document.querySelector(`section.s${subqty}`).style.transform = "translateY(100vh)"; + if (qty <= 2 || qty > 4) { + console.log("qty in elseif", qty); + console.log("subqty in elseif", subqty); + document.querySelector(`section.s${subqty - 1}`).style.transform = + "translateY(0)"; + document.querySelector(`section.s${subqty}`).style.transform = + "translateY(100vh)"; } setTimeout(() => { setQty(qty - 1); - if(qty<3 || qty>4){ - setSubQty(subqty - 1) - console.log(subqty) + if (qty < 3 || qty > 4) { + setSubQty(subqty - 1); + console.log(subqty); } - },100); + }, 100); } } setTimeout(() => { @@ -78,7 +83,7 @@ function Landing() { }, TIME_OUT); setStartFlag(false); } - window.scroll(0, window.screen.height)// Keep scrollbar in the middle of the viewport + window.scroll(0, window.screen.height); // Keep scrollbar in the middle of the viewport }, [y, qty, subqty, startFlag, sectionQty] ); @@ -89,26 +94,27 @@ function Landing() { window.removeEventListener("scroll", handleNavigation); }; }, [handleNavigation]); - - const handleNav= (q) => { - if(q < subqty){ - console.log(q,"<",qty,"upwards") + + const handleNav = (q) => { + if (q < subqty) { + console.log(q, "<", qty, "upwards"); handlewoh(); document.querySelector(`section.s${q}`).style.transform = "translateY(0)"; - document.querySelector(`section.s${subqty}`).style.transform = "translateY(100vh)"; - setSubQty(q) - } - else if(q > subqty){ - console.log(q,">",qty,"downwards") + document.querySelector(`section.s${subqty}`).style.transform = + "translateY(100vh)"; + setSubQty(q); + } else if (q > subqty) { + console.log(q, ">", qty, "downwards"); handlewoh(); - document.querySelector(`section.s${subqty}`).style.transform = "translateY(-100vh)"; + document.querySelector(`section.s${subqty}`).style.transform = + "translateY(-100vh)"; document.querySelector(`section.s${q}`).style.transform = "translateY(0)"; - setSubQty(q) + setSubQty(q); } - } + }; function handlebeep() { - bep.play() + bep.play(); } function handlewoh() { @@ -118,43 +124,99 @@ function Landing() { return (
      -
      • -
      • -
    • {handleNav(1); setQty(1)}}>Marstech logo
      • -
      • -
      • +
    • + +
      • +
    • + +
      • +
    • +
      { + handleNav(1); + setQty(1); + }} + > + Marstech logo +
      +
      • +
    • + +
      • +
    • + +
      • {/*
      • */}
    -
      -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • - {/*
    • 06
      • -
    • 07
      • */} +
    • 01
      • +
    • 02
      • +
    • 03
      • +
    • 04
      • +
    • 05
      • +
    • 06
      • +
    • 07
      • +
    -
    - -
    - -
    - -
    - -
    - - {/*
    - -
    */} - -
    {/* DO NOT REMOVE THIS SECTION */} -
    {/* DO NOT REMOVE THIS SECTION */} +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    {/* DO NOT REMOVE THIS SECTION */} +
    {/* DO NOT REMOVE THIS SECTION */}
    ); diff --git a/src/Components/Ovations-page/Ovations.js b/src/Components/Ovations-page/Ovations.js index dd7f989..2da49e4 100644 --- a/src/Components/Ovations-page/Ovations.js +++ b/src/Components/Ovations-page/Ovations.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import "../../App.scss"; import "./Ovations.scss"; -import ext from "../../Assets/icons/external.svg" +import ext from "../../Assets/icons/external.svg"; import cre from "../../Assets/images/cre.png"; import gepl from "../../Assets/images/gepl.png"; import alf from "../../Assets/images/alf.png"; @@ -51,7 +51,11 @@ function Ovations() { target="_blank" rel="noreferrer" > - external link + external link

    @@ -79,7 +83,11 @@ function Ovations() { target="_blank" rel="noreferrer" > - external link + external link

    @@ -108,7 +116,11 @@ function Ovations() { target="_blank" rel="noreferrer" > - external link + external link

    @@ -135,7 +147,11 @@ function Ovations() { target="_blank" rel="noreferrer" > - external link + external link

    @@ -154,11 +170,7 @@ function Ovations() {

    NPR - + external link

    @@ -177,11 +189,7 @@ function Ovations() {

    VVB Sports - + external link