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

Dark Cover when scrolled down fixed #79

Merged
ameye merged 1 commits from Dark-Cover-when-scrolled-down into master 2023-10-04 10:52:03 +00:00
Conversation 0 Commits 1 Files Changed 6
+173 -191
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-bottom: 50px;
position: relative;
z-index: 999999;
/* z-index: 999999; */
}
/* download app dark background */
src/assets/css/style.css
+1 -1
View File
@@ -1758,7 +1758,7 @@ iframe#youtubevideo {
padding: 20px 100px;
padding-bottom: 50px;
position: relative;
z-index: 999999;
/* z-index: 999999; */
}
/* download app dark background */
src/component/Footer/Main.js
+37 -50
View File
@@ -1,5 +1,5 @@
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 line from "../../assets/images/anim_line.png";
import blueapp from "../../assets/images/appstore_blue.png";
@@ -14,33 +14,11 @@ const Main = ({ footer }) => {
<footer>
<div className="top_footer" id="contact">
<div className="anim_line dark_bg">
<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>
{[...Array(9)].map((_, index) => (
<span key={index}>
<img src={line} alt="anim_line" />
</span>
))}
</div>
<div className="container">
<div className="row">
@@ -55,7 +33,9 @@ const Main = ({ footer }) => {
{/* <Link to="#">
{process.env.REACT_APP_SUPPORT_EMAIL}
</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}
</a>
</li>
@@ -73,7 +53,7 @@ const Main = ({ footer }) => {
</a>
</li>
<li>
<a href ={process.env.REACT_APP_TWITTER}>
<a href={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i>
</a>
</li>
@@ -87,7 +67,6 @@ const Main = ({ footer }) => {
<li>
{/* <Link to="/">Home</Link> */}
<HashLink to="/#">Home</HashLink>
</li>
<li>
<Link to="/about">About us</Link>
@@ -200,7 +179,9 @@ const Main = ({ footer }) => {
{/* <Link to="#">
{process.env.REACT_APP_SUPPORT_EMAIL}
</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}
</a>
</li>
@@ -212,15 +193,15 @@ const Main = ({ footer }) => {
</li>
</ul>
<ul className="social_media">
<li>
<a href={process.env.REACT_APP_FACEBOOK}>
<i className="icofont-facebook"></i>
</a>
<li>
<a href={process.env.REACT_APP_FACEBOOK}>
<i className="icofont-facebook"></i>
</a>
</li>
<li>
<a href ={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i>
</a>
<a href={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i>
</a>
</li>
</ul>
</div>
@@ -329,7 +310,9 @@ const Main = ({ footer }) => {
{/* <Link to="#">
{process.env.REACT_APP_SUPPORT_EMAIL}
</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}
</a>
</li>
@@ -347,7 +330,7 @@ const Main = ({ footer }) => {
</a>
</li>
<li>
<a href ={process.env.REACT_APP_TWITTER}>
<a href={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i>
</a>
</li>
@@ -388,7 +371,7 @@ const Main = ({ footer }) => {
<Link to="#">Support</Link>
</li>
<li>
<HashLink to="/#how_it_work">How it works</HashLink>
<HashLink to="/#how_it_work">How it works</HashLink>
</li>
<li>
<Link to="/terms">Terms & conditions</Link>
@@ -404,7 +387,7 @@ const Main = ({ footer }) => {
<div className="try_out">
<h3>Let’s Try Out</h3>
<ul className="app_btn">
<li>
<li>
<a href={process.env.REACT_APP_ANDROID_URL}>
<img src={blueapp} alt="image" />
</a>
@@ -460,7 +443,9 @@ const Main = ({ footer }) => {
{/* <Link to="#">
{process.env.REACT_APP_SUPPORT_EMAIL}
</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}
</a>
</li>
@@ -478,7 +463,7 @@ const Main = ({ footer }) => {
</a>
</li>
<li>
<a href ={process.env.REACT_APP_TWITTER}>
<a href={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i>
</a>
</li>
@@ -519,7 +504,7 @@ const Main = ({ footer }) => {
<Link to="#">Support</Link>
</li>
<li>
<HashLink to="/#how_it_work">How it works</HashLink>
<HashLink to="/#how_it_work">How it works</HashLink>
</li>
<li>
<Link to="/terms">Terms & conditions</Link>
@@ -599,7 +584,9 @@ const Main = ({ footer }) => {
{/* <Link to="#">
{process.env.REACT_APP_SUPPORT_EMAIL}
</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}
</a>
</li>
@@ -617,7 +604,7 @@ const Main = ({ footer }) => {
</a>
</li>
<li>
<a href ={process.env.REACT_APP_TWITTER}>
<a href={process.env.REACT_APP_TWITTER}>
<i className="icofont-twitter"></i>
</a>
</li>
@@ -657,7 +644,7 @@ const Main = ({ footer }) => {
<Link to="#">Support</Link>
</li>
<li>
<HashLink to="/#how_it_work">How it works</HashLink>
<HashLink to="/#how_it_work">How it works</HashLink>
</li>
<li>
<Link to="/terms">Terms & conditions</Link>
@@ -672,7 +659,7 @@ const Main = ({ footer }) => {
<div className="try_out">
<h3>Let’s Try Out</h3>
<ul className="app_btn">
<li>
<li>
<a href={process.env.REACT_APP_ANDROID_URL}>
<img src={blueapp} alt="image" />
</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">
<div className="container">
<div className="anim_line">
<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>
{[...Array(9)].map((_, index) => (
<span key={index}>
<img src={anim} alt="anim_line" />
</span>
))}
</div>
<div className="row">
<div
@@ -103,21 +81,20 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
</p>
</div>
<ul className="app_btn">
<li>
<a href={process.env.REACT_APP_ANDROID_URL}>
<img src={blueapp} alt="image" />
<img className="white_img" src={whiteapp} alt="image" />
</a>
</li>
<li>
<a href={process.env.REACT_APP_IOS_URL}>
<img src={blue} alt="image" />
<img className="white_img" src={white} alt="image" />
</a>
</li>
<li>
<a href={process.env.REACT_APP_ANDROID_URL}>
<img src={blueapp} alt="image" />
<img className="white_img" src={whiteapp} alt="image" />
</a>
</li>
<li>
<a href={process.env.REACT_APP_IOS_URL}>
<img src={blue} alt="image" />
<img className="white_img" src={white} alt="image" />
</a>
</li>
</ul>
{/* <ul className="app_btn">
<li>
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
@@ -132,8 +109,6 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
</Link>
</li>
</ul> */}
</div>
<div
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 React, {useState} from 'react'
import img from '../../../assets/images/anim_line.png'
import blueapp from '../../../assets/images/appstore_blue.png'
import blue from '../../../assets/images/googleplay_blue.png'
import screen from '../../../assets/images/download-screen01.png'
import screen1 from '../../../assets/images/download-screen02.png'
import { Link } from "react-router-dom";
import React, { useState } from "react";
import img from "../../../assets/images/anim_line.png";
import blueapp from "../../../assets/images/appstore_blue.png";
import blue from "../../../assets/images/googleplay_blue.png";
import screen from "../../../assets/images/download-screen01.png";
import screen1 from "../../../assets/images/download-screen02.png";
const Main = () => {
const [animate, setanimate] = useState()
const [animate, setAnimate] = useState(false);
const [purple, setPurple] = useState(false);
const [purple, setpurple] = useState()
window.addEventListener('scroll', function() {
const element = document.getElementsByClassName('free_text');
const position = element[0].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";
// useEffect(() => {
// const handleScroll = () => {
// const element = document.getElementsByClassName("free_text")[0];
// const position = element.getBoundingClientRect();
}
});
// 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 (
<>
<section className="row_am free_app_section review_freeapp" id="getstarted">
<div className="container">
<div className={`free_app_inner aos-init ${animate && "aos-animate"}`} data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
<div className="anim_line dark_bg">
<span><img src={img} alt="anim_line" /></span>
<span><img src={img} alt="anim_line" /></span>
<span><img src={img} alt="anim_line" /></span>
<span><img src={img} alt="anim_line" /></span>
<span><img src={img} alt="anim_line" /></span>
<span><img src={img} alt="anim_line" /></span>
<span><img src={img} alt="anim_line" /></span>
<span><img src={img} alt="anim_line" /></span>
<span><img src={img} alt="anim_line" /></span>
</div>
<div className="row">
<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>
<section
className={`row_am free_app_section review_freeapp ${
animate && "aos-animate"
}`}
id="getstarted"
>
<div className="container">
<div
className="free_app_inner"
data-aos="fade-in"
data-aos-duration="1500"
data-aos-delay="100"
>
<div className="anim_line dark_bg">
{[...Array(9)].map((_, index) => (
<span key={index}>
<img src={img} alt="anim_line" />
</span>
))}
</div>
</section>
<div className="purple_backdrop"></div>
<div className="row">
<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 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 [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();
useEffect(() => {
if (location.pathname === "/sign-in" || location.pathname === "/sign-up") {
sethomepage(false);
setHomepage(false);
} else {
sethomepage(true);
setHomepage(true);
}
}, [location]);
const [footerpage, setfooterpage] = useState(false);
useEffect(() => {
if (location.pathname === "/sign-in" || location.pathname === "/sign-up") {
setfooterpage(false);
setFooterpage(false);
} else {
setfooterpage(true);
setFooterpage(true);
}
}, [location]);
useEffect(() => {
if (localStorage.getItem("navbar") === "darkhome") {
setfooter({ f2: true });
setnavbar({ n3: true });
setbrdcum({ b2: true });
} else if (localStorage.getItem("navbar") === "home") {
setfooter({ f1: true });
setnavbar({ n2: true });
setbrdcum({ b1: true });
const navbarValue = localStorage.getItem("navbar");
if (navbarValue === "darkhome") {
setFooter({ f2: true });
setNavbar({ n3: true });
setBrdcum({ b2: true });
} else if (navbarValue === "home") {
setFooter({ f1: true });
setNavbar({ n2: true });
setBrdcum({ b1: true });
} else {
setfooter({ f1: true });
setnavbar({ n2: true });
setFooter({ f1: true });
setNavbar({ n2: true });
}
}, []);
const [footer, setfooter] = useState({ f1: true });
const [navbar, setnavbar] = useState({ n1: true });
const [brdcum, setbrdcum] = useState({ n1: true });
return (
<>
{homepage && <Navbar navbar={navbar} />}
@@ -65,19 +70,19 @@ const Routing = () => {
path="/"
element={
<Home
setfooter={setfooter}
setnavbar={setnavbar}
setbrdcum={setbrdcum}
setfooter={setFooter}
setnavbar={setNavbar}
setbrdcum={setBrdcum}
/>
}
/>
<Route
path="/about"
element={<AboutUs setnavbar={setnavbar} brdcum={brdcum} />}
element={<AboutUs setnavbar={setNavbar} brdcum={brdcum} />}
/>
<Route
path="/review"
element={<Review setnavbar={setnavbar} brdcum={brdcum} />}
element={<Review setnavbar={setNavbar} brdcum={brdcum} />}
/>
<Route path="/contact" element={<Contact 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="/terms" element={<Terms brdcum={brdcum} />} />
<Route path="/privacy" element={<Privacy brdcum={brdcum} />} />
</Routes>
{footerpage && <Footer footer={footer} />}
</>