MyFit/www-myfit
4
0
Fork 0
Code Issues Pull Requests Releases Activity

Dark Cover when scrolled down

Browse Source
This commit was merged in pull request #79.
This commit is contained in:
Ebube
2023-10-03 16:19:48 +01:00
parent 508eb82ff4
commit 9372c1483d
6 changed files with 173 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style.css
+1 -1
View File
@@ -1733,7 +1733,7 @@ iframe#youtubevideo {
padding: 20px 100px; padding: 20px 100px;
padding-bottom: 50px; padding-bottom: 50px;
position: relative; position: relative;
z-index: 999999; /* z-index: 999999; */
} }
/* download app dark background */ /* download app dark background */
src/assets/css/style.css
+1 -1
View File
@@ -1758,7 +1758,7 @@ iframe#youtubevideo {
padding: 20px 100px; padding: 20px 100px;
padding-bottom: 50px; padding-bottom: 50px;
position: relative; position: relative;
z-index: 999999; /* z-index: 999999; */
} }
/* download app dark background */ /* download app dark background */
src/component/Footer/Main.js
+37 -50
View File
@@ -1,5 +1,5 @@
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { HashLink } from 'react-router-hash-link'; import { HashLink } from "react-router-hash-link";
import React from "react"; import React from "react";
import line from "../../assets/images/anim_line.png"; import line from "../../assets/images/anim_line.png";
import blueapp from "../../assets/images/appstore_blue.png"; import blueapp from "../../assets/images/appstore_blue.png";
@@ -14,33 +14,11 @@ const Main = ({ footer }) => {
<footer> <footer>
<div className="top_footer" id="contact"> <div className="top_footer" id="contact">
<div className="anim_line dark_bg"> <div className="anim_line dark_bg">
<span> {[...Array(9)].map((_, index) => (
<img src={line} alt="anim_line" /> <span key={index}>
</span> <img src={line} alt="anim_line" />
<span> </span>
<img src={line} alt="anim_line" /> ))}
</span>
<span>
<img src={line} alt="anim_line" />
</span>
<span>
<img src={line} alt="anim_line" />
</span>
<span>
<img src={line} alt="anim_line" />
</span>
<span>
<img src={line} alt="anim_line" />
</span>
<span>
<img src={line} alt="anim_line" />
</span>
<span>
<img src={line} alt="anim_line" />
</span>
<span>
<img src={line} alt="anim_line" />
</span>
</div> </div>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
@@ -55,7 +33,9 @@ const Main = ({ footer }) => {
{/* <Link to="#"> {/* <Link to="#">
{process.env.REACT_APP_SUPPORT_EMAIL} {process.env.REACT_APP_SUPPORT_EMAIL}
</Link> */} </Link> */}
<a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}> <a
href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}
>
{process.env.REACT_APP_SUPPORT_EMAIL} {process.env.REACT_APP_SUPPORT_EMAIL}
</a> </a>
</li> </li>
@@ -73,7 +53,7 @@ const Main = ({ footer }) => {
</a> </a>
</li> </li>
<li> <li>
<a href ={process.env.REACT_APP_TWITTER}> <a href={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i> <i className="icofont-twitter"></i>
</a> </a>
</li> </li>
@@ -87,7 +67,6 @@ const Main = ({ footer }) => {
<li> <li>
{/* <Link to="/">Home</Link> */} {/* <Link to="/">Home</Link> */}
<HashLink to="/#">Home</HashLink> <HashLink to="/#">Home</HashLink>
</li> </li>
<li> <li>
<Link to="/about">About us</Link> <Link to="/about">About us</Link>
@@ -200,7 +179,9 @@ const Main = ({ footer }) => {
{/* <Link to="#"> {/* <Link to="#">
{process.env.REACT_APP_SUPPORT_EMAIL} {process.env.REACT_APP_SUPPORT_EMAIL}
</Link> */} </Link> */}
<a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}> <a
href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}
>
{process.env.REACT_APP_SUPPORT_EMAIL} {process.env.REACT_APP_SUPPORT_EMAIL}
</a> </a>
</li> </li>
@@ -212,15 +193,15 @@ const Main = ({ footer }) => {
</li> </li>
</ul> </ul>
<ul className="social_media"> <ul className="social_media">
<li> <li>
<a href={process.env.REACT_APP_FACEBOOK}> <a href={process.env.REACT_APP_FACEBOOK}>
<i className="icofont-facebook"></i> <i className="icofont-facebook"></i>
</a> </a>
</li> </li>
<li> <li>
<a href ={process.env.REACT_APP_TWITTER}> <a href={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i> <i className="icofont-twitter"></i>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
@@ -329,7 +310,9 @@ const Main = ({ footer }) => {
{/* <Link to="#"> {/* <Link to="#">
{process.env.REACT_APP_SUPPORT_EMAIL} {process.env.REACT_APP_SUPPORT_EMAIL}
</Link> */} </Link> */}
<a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}> <a
href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}
>
{process.env.REACT_APP_SUPPORT_EMAIL} {process.env.REACT_APP_SUPPORT_EMAIL}
</a> </a>
</li> </li>
@@ -347,7 +330,7 @@ const Main = ({ footer }) => {
</a> </a>
</li> </li>
<li> <li>
<a href ={process.env.REACT_APP_TWITTER}> <a href={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i> <i className="icofont-twitter"></i>
</a> </a>
</li> </li>
@@ -388,7 +371,7 @@ const Main = ({ footer }) => {
<Link to="#">Support</Link> <Link to="#">Support</Link>
</li> </li>
<li> <li>
<HashLink to="/#how_it_work">How it works</HashLink> <HashLink to="/#how_it_work">How it works</HashLink>
</li> </li>
<li> <li>
<Link to="/terms">Terms & conditions</Link> <Link to="/terms">Terms & conditions</Link>
@@ -404,7 +387,7 @@ const Main = ({ footer }) => {
<div className="try_out"> <div className="try_out">
<h3>Let’s Try Out</h3> <h3>Let’s Try Out</h3>
<ul className="app_btn"> <ul className="app_btn">
<li> <li>
<a href={process.env.REACT_APP_ANDROID_URL}> <a href={process.env.REACT_APP_ANDROID_URL}>
<img src={blueapp} alt="image" /> <img src={blueapp} alt="image" />
</a> </a>
@@ -460,7 +443,9 @@ const Main = ({ footer }) => {
{/* <Link to="#"> {/* <Link to="#">
{process.env.REACT_APP_SUPPORT_EMAIL} {process.env.REACT_APP_SUPPORT_EMAIL}
</Link> */} </Link> */}
<a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}> <a
href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}
>
{process.env.REACT_APP_SUPPORT_EMAIL} {process.env.REACT_APP_SUPPORT_EMAIL}
</a> </a>
</li> </li>
@@ -478,7 +463,7 @@ const Main = ({ footer }) => {
</a> </a>
</li> </li>
<li> <li>
<a href ={process.env.REACT_APP_TWITTER}> <a href={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i> <i className="icofont-twitter"></i>
</a> </a>
</li> </li>
@@ -519,7 +504,7 @@ const Main = ({ footer }) => {
<Link to="#">Support</Link> <Link to="#">Support</Link>
</li> </li>
<li> <li>
<HashLink to="/#how_it_work">How it works</HashLink> <HashLink to="/#how_it_work">How it works</HashLink>
</li> </li>
<li> <li>
<Link to="/terms">Terms & conditions</Link> <Link to="/terms">Terms & conditions</Link>
@@ -599,7 +584,9 @@ const Main = ({ footer }) => {
{/* <Link to="#"> {/* <Link to="#">
{process.env.REACT_APP_SUPPORT_EMAIL} {process.env.REACT_APP_SUPPORT_EMAIL}
</Link> */} </Link> */}
<a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}> <a
href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}
>
{process.env.REACT_APP_SUPPORT_EMAIL} {process.env.REACT_APP_SUPPORT_EMAIL}
</a> </a>
</li> </li>
@@ -617,7 +604,7 @@ const Main = ({ footer }) => {
</a> </a>
</li> </li>
<li> <li>
<a href ={process.env.REACT_APP_TWITTER}> <a href={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i> <i className="icofont-twitter"></i>
</a> </a>
</li> </li>
@@ -657,7 +644,7 @@ const Main = ({ footer }) => {
<Link to="#">Support</Link> <Link to="#">Support</Link>
</li> </li>
<li> <li>
<HashLink to="/#how_it_work">How it works</HashLink> <HashLink to="/#how_it_work">How it works</HashLink>
</li> </li>
<li> <li>
<Link to="/terms">Terms & conditions</Link> <Link to="/terms">Terms & conditions</Link>
@@ -672,7 +659,7 @@ const Main = ({ footer }) => {
<div className="try_out"> <div className="try_out">
<h3>Let’s Try Out</h3> <h3>Let’s Try Out</h3>
<ul className="app_btn"> <ul className="app_btn">
<li> <li>
<a href={process.env.REACT_APP_ANDROID_URL}> <a href={process.env.REACT_APP_ANDROID_URL}>
<img src={blueapp} alt="image" /> <img src={blueapp} alt="image" />
</a> </a>
src/component/Home/Main.js
+17 -42
View File
@@ -56,33 +56,11 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
<section className="banner_section home-banner"> <section className="banner_section home-banner">
<div className="container"> <div className="container">
<div className="anim_line"> <div className="anim_line">
<span> {[...Array(9)].map((_, index) => (
<img src={anim} alt="anim_line" /> <span key={index}>
</span> <img src={anim} alt="anim_line" />
<span> </span>
<img src={anim} alt="anim_line" /> ))}
</span>
<span>
<img src={anim} alt="anim_line" />
</span>
<span>
<img src={anim} alt="anim_line" />
</span>
<span>
<img src={anim} alt="anim_line" />
</span>
<span>
<img src={anim} alt="anim_line" />
</span>
<span>
<img src={anim} alt="anim_line" />
</span>
<span>
<img src={anim} alt="anim_line" />
</span>
<span>
<img src={anim} alt="anim_line" />
</span>
</div> </div>
<div className="row"> <div className="row">
<div <div
@@ -103,21 +81,20 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
</p> </p>
</div> </div>
<ul className="app_btn"> <ul className="app_btn">
<li> <li>
<a href={process.env.REACT_APP_ANDROID_URL}> <a href={process.env.REACT_APP_ANDROID_URL}>
<img src={blueapp} alt="image" /> <img src={blueapp} alt="image" />
<img className="white_img" src={whiteapp} alt="image" /> <img className="white_img" src={whiteapp} alt="image" />
</a> </a>
</li> </li>
<li> <li>
<a href={process.env.REACT_APP_IOS_URL}> <a href={process.env.REACT_APP_IOS_URL}>
<img src={blue} alt="image" /> <img src={blue} alt="image" />
<img className="white_img" src={white} alt="image" /> <img className="white_img" src={white} alt="image" />
</a> </a>
</li> </li>
</ul> </ul>
{/* <ul className="app_btn"> {/* <ul className="app_btn">
<li> <li>
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"> <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
@@ -132,8 +109,6 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
</Link> </Link>
</li> </li>
</ul> */} </ul> */}
</div> </div>
<div <div
className="col-lg-6 col-md-12" className="col-lg-6 col-md-12"
src/component/HomeMain/Download/Main.js
+87 -71
View File
@@ -1,81 +1,97 @@
import { Link } from 'react-router-dom' import { Link } from "react-router-dom";
import React, {useState} from 'react' import React, { useState } from "react";
import img from '../../../assets/images/anim_line.png' import img from "../../../assets/images/anim_line.png";
import blueapp from '../../../assets/images/appstore_blue.png' import blueapp from "../../../assets/images/appstore_blue.png";
import blue from '../../../assets/images/googleplay_blue.png' import blue from "../../../assets/images/googleplay_blue.png";
import screen from '../../../assets/images/download-screen01.png' import screen from "../../../assets/images/download-screen01.png";
import screen1 from '../../../assets/images/download-screen02.png' import screen1 from "../../../assets/images/download-screen02.png";
const Main = () => { const Main = () => {
const [animate, setanimate] = useState() const [animate, setAnimate] = useState(false);
const [purple, setPurple] = useState(false);
const [purple, setpurple] = useState() // useEffect(() => {
window.addEventListener('scroll', function() { // const handleScroll = () => {
const element = document.getElementsByClassName('free_text'); // const element = document.getElementsByClassName("free_text")[0];
const position = element[0].getBoundingClientRect(); // const position = element.getBoundingClientRect();
if(position.top < window.innerHeight && position.bottom >= 0) {
const elm = document.getElementsByClassName("purple_backdrop");
elm[0].style.opacity = "1";
}else{
const elm = document.getElementsByClassName("purple_backdrop");
elm[0].style.opacity = "0";
} // if (position.top < window.innerHeight && position.bottom >= 0) {
}); // document.getElementsByClassName("purple_backdrop")[0].style.opacity =
// "1";
// } else {
// document.getElementsByClassName("purple_backdrop")[0].style.opacity =
// "0";
// }
// };
// window.addEventListener("scroll", handleScroll);
// return () => {
// window.removeEventListener("scroll", handleScroll);
// };
// }, []);
return ( return (
<> <>
<section className="row_am free_app_section review_freeapp" id="getstarted"> <section
<div className="container"> className={`row_am free_app_section review_freeapp ${
<div className={`free_app_inner aos-init ${animate && "aos-animate"}`} data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> animate && "aos-animate"
<div className="anim_line dark_bg"> }`}
<span><img src={img} alt="anim_line" /></span> id="getstarted"
<span><img src={img} alt="anim_line" /></span> >
<span><img src={img} alt="anim_line" /></span> <div className="container">
<span><img src={img} alt="anim_line" /></span> <div
<span><img src={img} alt="anim_line" /></span> className="free_app_inner"
<span><img src={img} alt="anim_line" /></span> data-aos="fade-in"
<span><img src={img} alt="anim_line" /></span> data-aos-duration="1500"
<span><img src={img} alt="anim_line" /></span> data-aos-delay="100"
<span><img src={img} alt="anim_line" /></span> >
</div> <div className="anim_line dark_bg">
<div className="row"> {[...Array(9)].map((_, index) => (
<div className="col-md-6"> <span key={index}>
<div className="free_text"> <img src={img} alt="anim_line" />
<div className="section_title"> </span>
<h2>Let’s download free from apple and play store</h2> ))}
<p>Instant free download from apple and play store. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
</div>
<ul className="app_btn">
<li>
<a href={process.env.REACT_APP_ANDROID_URL}>
<img src={blueapp} alt="image" />
</a>
</li>
<li>
<a href={process.env.REACT_APP_IOS_URL}>
<img src={blue} alt="image" />
</a>
</li>
</ul>
</div>
</div>
<div className="col-md-6">
<div className="free_img">
<img src={screen} alt="image" />
<img className="mobile_mockup" src={screen1} alt="image" />
</div>
</div>
</div>
</div>
</div> </div>
</section> <div className="row">
<div className="purple_backdrop"></div> <div className="col-md-6">
<div className="free_text">
<div className="section_title">
<h2>Let’s download free from apple and play store</h2>
<p>
Instant free download from apple and play store. All you
need is an iPhone or Android device to enjoy all
personalized metrics for personal use. Welcome to myFit
App.
</p>
</div>
<ul className="app_btn">
<li>
<a href={process.env.REACT_APP_ANDROID_URL}>
<img src={blueapp} alt="image" />
</a>
</li>
<li>
<a href={process.env.REACT_APP_IOS_URL}>
<img src={blue} alt="image" />
</a>
</li>
</ul>
</div>
</div>
<div className="col-md-6">
<div className="free_img">
<img src={screen} alt="image" />
<img className="mobile_mockup" src={screen1} alt="image" />
</div>
</div>
</div>
</div>
</div>
</section>
{/* <div className="purple_backdrop"></div> */}
</> </>
) );
} };
export default Main export default Main;
src/routes/index.js
+30 -26
View File
@@ -17,46 +17,51 @@ import BlogSingle from "../component/Blog/BlogSingle/Main";
import Terms from "../component/Terms/Main"; import Terms from "../component/Terms/Main";
import Privacy from "../component/Privacy/Main"; import Privacy from "../component/Privacy/Main";
/**
* Renders the appropriate component based on the current URL path.
* Manages the state of the navbar and footer components based on the current path.
* @returns {JSX.Element} The rendered components based on the current URL path.
*/
const Routing = () => { const Routing = () => {
const [homepage, sethomepage] = useState(false); const [homepage, setHomepage] = useState(false);
const [footerpage, setFooterpage] = useState(false);
const [footer, setFooter] = useState({ f1: true });
const [navbar, setNavbar] = useState({ n1: true });
const [brdcum, setBrdcum] = useState({ n1: true });
const location = useLocation(); const location = useLocation();
useEffect(() => { useEffect(() => {
if (location.pathname === "/sign-in" || location.pathname === "/sign-up") { if (location.pathname === "/sign-in" || location.pathname === "/sign-up") {
sethomepage(false); setHomepage(false);
} else { } else {
sethomepage(true); setHomepage(true);
} }
}, [location]); }, [location]);
const [footerpage, setfooterpage] = useState(false);
useEffect(() => { useEffect(() => {
if (location.pathname === "/sign-in" || location.pathname === "/sign-up") { if (location.pathname === "/sign-in" || location.pathname === "/sign-up") {
setfooterpage(false); setFooterpage(false);
} else { } else {
setfooterpage(true); setFooterpage(true);
} }
}, [location]); }, [location]);
useEffect(() => { useEffect(() => {
if (localStorage.getItem("navbar") === "darkhome") { const navbarValue = localStorage.getItem("navbar");
setfooter({ f2: true }); if (navbarValue === "darkhome") {
setnavbar({ n3: true }); setFooter({ f2: true });
setbrdcum({ b2: true }); setNavbar({ n3: true });
} else if (localStorage.getItem("navbar") === "home") { setBrdcum({ b2: true });
setfooter({ f1: true }); } else if (navbarValue === "home") {
setnavbar({ n2: true }); setFooter({ f1: true });
setbrdcum({ b1: true }); setNavbar({ n2: true });
setBrdcum({ b1: true });
} else { } else {
setfooter({ f1: true }); setFooter({ f1: true });
setnavbar({ n2: true }); setNavbar({ n2: true });
} }
}, []); }, []);
const [footer, setfooter] = useState({ f1: true });
const [navbar, setnavbar] = useState({ n1: true });
const [brdcum, setbrdcum] = useState({ n1: true });
return ( return (
<> <>
{homepage && <Navbar navbar={navbar} />} {homepage && <Navbar navbar={navbar} />}
@@ -65,19 +70,19 @@ const Routing = () => {
path="/" path="/"
element={ element={
<Home <Home
setfooter={setfooter} setfooter={setFooter}
setnavbar={setnavbar} setnavbar={setNavbar}
setbrdcum={setbrdcum} setbrdcum={setBrdcum}
/> />
} }
/> />
<Route <Route
path="/about" path="/about"
element={<AboutUs setnavbar={setnavbar} brdcum={brdcum} />} element={<AboutUs setnavbar={setNavbar} brdcum={brdcum} />}
/> />
<Route <Route
path="/review" path="/review"
element={<Review setnavbar={setnavbar} brdcum={brdcum} />} element={<Review setnavbar={setNavbar} brdcum={brdcum} />}
/> />
<Route path="/contact" element={<Contact brdcum={brdcum} />} /> <Route path="/contact" element={<Contact brdcum={brdcum} />} />
<Route path="/faq" element={<Faq brdcum={brdcum} />} /> <Route path="/faq" element={<Faq brdcum={brdcum} />} />
@@ -88,7 +93,6 @@ const Routing = () => {
<Route path="/blogdetails/:id" element={<BlogSingle brdcum={brdcum} />} /> <Route path="/blogdetails/:id" element={<BlogSingle brdcum={brdcum} />} />
<Route path="/terms" element={<Terms brdcum={brdcum} />} /> <Route path="/terms" element={<Terms brdcum={brdcum} />} />
<Route path="/privacy" element={<Privacy brdcum={brdcum} />} /> <Route path="/privacy" element={<Privacy brdcum={brdcum} />} />
</Routes> </Routes>
{footerpage && <Footer footer={footer} />} {footerpage && <Footer footer={footer} />}
</> </>