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 0000000..c1012a2 Binary files /dev/null and b/src/Assets/icons/chatbot/logo.png differ diff --git a/src/Assets/icons/chatbot/mail.svg b/src/Assets/icons/chatbot/mail.svg new file mode 100644 index 0000000..02e283c --- /dev/null +++ b/src/Assets/icons/chatbot/mail.svg @@ -0,0 +1,3 @@ + + + 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 0000000..ea16355 Binary files /dev/null and b/src/Assets/icons/chatbot/settings.png differ 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