step1 to 4 rule step4

master
taha12322 3 years ago
parent dab4bc7048
commit 1d1a7041c8
  1. 6
      log-in/package.json
  2. BIN
      log-in/public/favicon.ico
  3. 31
      log-in/public/index.html
  4. BIN
      log-in/public/logo192.png
  5. BIN
      log-in/public/logo512.png
  6. 25
      log-in/public/manifest.json
  7. 3
      log-in/public/robots.txt
  8. 38
      log-in/src/App.css
  9. 36
      log-in/src/App.js
  10. 8
      log-in/src/App.test.js
  11. 16
      log-in/src/assets/rectangle.svg
  12. 17
      log-in/src/components/Links.js
  13. 35
      log-in/src/components/RoutPage.js
  14. 51
      log-in/src/components/logIn/Footer/Footer.js
  15. 33
      log-in/src/components/logIn/Footer/Footer.scss
  16. 34
      log-in/src/components/logIn/Header/Header.js
  17. 88
      log-in/src/components/logIn/Header/Header.scss
  18. 13
      log-in/src/components/logIn/Header/HeaderSplash4.js
  19. 85
      log-in/src/components/logIn/Header/HeaderSplash4.scss
  20. 11
      log-in/src/components/logIn/LogIn.js
  21. 62
      log-in/src/components/logIn/Rule.js
  22. 15
      log-in/src/components/logIn/Rule.scss
  23. 85
      log-in/src/components/logIn/Rules/Panel1.js
  24. 105
      log-in/src/components/logIn/Rules/Panel2.js
  25. 30
      log-in/src/components/logIn/Splashes/Splash1.js
  26. 29
      log-in/src/components/logIn/Splashes/Splash2.js
  27. 29
      log-in/src/components/logIn/Splashes/Splash3.js
  28. 44
      log-in/src/components/logIn/Splashes/Splash4.js
  29. 32
      log-in/src/components/logIn/Splashes/Splashes.scss
  30. 13
      log-in/src/index.css
  31. 22
      log-in/src/index.js
  32. 5
      log-in/src/index.scss
  33. 1
      log-in/src/logo.svg
  34. 13
      log-in/src/reportWebVitals.js
  35. 5
      log-in/src/setupTests.js
  36. 4088
      log-in/yarn.lock

@ -6,9 +6,15 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "^5.1.0",
"node-sass": "4.14.1",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-iconly": "^2.2.3",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"reactstrap": "^8.10.0",
"web-vitals": "^1.0.1"
},
"scripts": {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

@ -2,42 +2,11 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

@ -1,25 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@ -1,25 +1,21 @@
import logo from './logo.svg';
import './App.css';
import React from "react";
import { BrowserRouter as Router, Switch } from "react-router-dom";
function App() {
//components
import Links from "./components/Links";
import RoutPage from "./components/RoutPage";
const App = () => {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<>
<Router>
<Links />
<Switch>
<RoutPage />
</Switch>
</Router>
</>
);
}
};
export default App;

@ -1,8 +0,0 @@
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="428" height="365" viewBox="0 0 428 365">
<g id="Group_149" data-name="Group 149" transform="translate(31 -95)">
<g id="Group_114" data-name="Group 114" transform="translate(215 107.083)" opacity="0.69">
<path id="Rectangle_71" data-name="Rectangle 71" d="M20,0H171a20,20,0,0,1,20,20V258a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V20A20,20,0,0,1,20,0Z" transform="translate(-9 94.917)" fill="#fff"/>
<rect id="Rectangle_73" data-name="Rectangle 73" width="199" height="168" rx="14" transform="translate(-31 108.917)" fill="#ddfdff"/>
<rect id="Rectangle_74" data-name="Rectangle 74" width="90" height="64" rx="14" transform="translate(78 288.917)" fill="#ddfdff"/>
<rect id="Rectangle_75" data-name="Rectangle 75" width="90" height="64" rx="14" transform="translate(-31 288.917)" fill="#ddfdff"/>
</g>
<g id="Group_113" data-name="Group 113">
<path id="Rectangle_71-2" data-name="Rectangle 71" d="M20,0H310a20,20,0,0,1,20,20V365a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V20A20,20,0,0,1,20,0Z" transform="translate(-21 95)" fill="#fff"/>
<rect id="Rectangle_73-2" data-name="Rectangle 73" width="320" height="238" rx="14" transform="translate(-31 115)" fill="rgba(224,224,224,0.44)"/>
<rect id="Rectangle_74-2" data-name="Rectangle 74" width="160" height="91" rx="14" transform="translate(129 369)" fill="rgba(224,224,224,0.44)"/>
<rect id="Rectangle_75-2" data-name="Rectangle 75" width="128" height="91" rx="14" transform="translate(-31 369)" fill="rgba(224,224,224,0.44)"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -0,0 +1,17 @@
import React from "react";
import { Link } from "react-router-dom";
const Links = () => {
return (
<>
<Link to="/1"></Link>
<Link to="/2"></Link>
<Link to="/3"></Link>
<Link to="/4"></Link>
<Link to="/login"></Link>
<Link to="/rule"></Link>
</>
);
};
export default Links;

@ -0,0 +1,35 @@
import React from "react";
import { Route } from "react-router-dom";
import Splash1 from "./logIn/Splashes/Splash1";
import Splash2 from "./logIn/Splashes/Splash2";
import Splash3 from "./logIn/Splashes/Splash3";
import Splash4 from "./logIn/Splashes/Splash4";
import LogIn from "./logIn/LogIn";
import Rule from "./logIn/Rule";
const RoutPage = () => {
return (
<>
<Route path="/1">
<Splash1 />
</Route>
<Route path="/2">
<Splash2 />
</Route>
<Route path="/3">
<Splash3 />
</Route>
<Route path="/4">
<Splash4 />
</Route>
<Route path="/login">
<LogIn />
</Route>
<Route path="/rule">
<Rule />
</Route>
</>
);
};
export default RoutPage;

@ -0,0 +1,51 @@
import React, { useState, useEffect } from "react";
import { ArrowRight } from "react-iconly";
import { Link } from "react-router-dom";
import "./Footer.scss";
const Footer = () => {
const [active, setActive] = useState(1);
const [numCounter, setNumCounter] = useState(1);
localStorage.setItem("pathNum", numCounter);
const counterHandler = () => {
setNumCounter(numCounter + 1);
};
let I = localStorage.getItem("pathNum")
useEffect(() => {
if (window.location.href === "http://localhost:3001/1") {
setActive(1);
}
if (window.location.href === "http://localhost:3001/2") {
setActive(2);
}
if (window.location.href === "http://localhost:3001/3") {
setActive(3);
}
if (window.location.href === "http://localhost:3001/4") {
setActive(4);
}
});
return (
<footer className="navFooterItem container">
<nav className="navCircles">
<nav className={`circle ${active === 1 ? "active" : ""}`}></nav>
<nav className={`circle ${active === 2 ? "active" : ""}`}></nav>
<nav className={`circle ${active === 3 ? "active" : ""}`}></nav>
<nav className={`circle ${active === 4 ? "active" : ""}`}></nav>
</nav>
<nav onClick={counterHandler}>
<Link to={`/${I}`}>
<button className="btn nextBtn">
<ArrowRight set="curved" />
</button>
</Link>
{/* <button onClick={()=>setCount(count +1)}>counter</button> */}
</nav>
</footer>
);
};
export default Footer;

@ -0,0 +1,33 @@
.navFooterItem {
position: fixed;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
.nextBtn {
padding: 2px 0 0 0;
width: 50px;
height: 50px;
border-radius: 5rem;
background-color: #2e81e8;
color: #fff;
}
.navCircles {
display: flex;
.circle {
background-color: #a2b4cb;
width: 12px;
height: 12px;
border-radius: 1rem;
margin-left: 3px;
}
.active{
background-color: #2e81e8 !important;
width: 30px !important;
}
}
}

@ -0,0 +1,34 @@
import React from "react";
import { Link } from "react-router-dom";
import "./Header.scss";
import rectangle from '../../../assets/rectangle.svg'
const Header = () => {
return (
<header className="fixedBlueNav">
<nav className="navLink">
<a>
<Link to="/login">رد شدن</Link>
</a>
</nav>
{/* <img className='rectanlgleImg' src={rectangle}/> */}
{/* <nav className="rectangleNavWhite">
<nav className='rectangleCenterGray'></nav>
<nav className='NavRectangleGray d-flex'>
<nav className='rectangleGray me-3'></nav>
<nav className='rectangleGray'></nav>
</nav>
</nav>
<nav className='rectangleNavLightBlue'>
<nav className='rectangleCenterBlue'></nav>
<nav className='NavRectangleBlue d-flex'>
<nav className='rectangleBlue me-3'></nav>
<nav className='rectangleBlue'></nav>
</nav>
</nav> */}
</header>
);
};
export default Header;

@ -0,0 +1,88 @@
.fixedBlueNav {
width: 100%;
height: 45vh;
background: rgb(0, 80, 179);
background: linear-gradient(
180deg,
rgba(0, 80, 179, 1) 0%,
#0252b1e7 46%,
rgba(0, 137, 255, 1) 100%
);
.navLink {
display: flex;
justify-content: flex-end;
padding: 2.5rem 1.5rem;
a {
color: #fff;
text-decoration: none;
}
}
.rectanlgleImg{
left: -30px;
width: 17rem;
}
// .rectangleNavWhite {
// left: -30px;
// background-color: #fff;
// border-top-right-radius: 15px;
// width: 290px;
// height: 235px;
// position: relative;
// padding: 1rem;
// z-index: 20;
// .rectangleCenterGray {
// position: relative;
// left: -30px;
// background-color: #e0e0e040;
// border-radius: 14px;
// width: 290px;
// height: 120px;
// margin-bottom: 20px;
// }
// .rectangleGray {
// position: relative;
// background-color: #e0e0e040;
// border-radius: 14px;
// width: 250px;
// height: 80px;
// }
// }
// .rectangleNavLightBlue {
// top: -231px;
// left: 12rem;
// background-color: blue;
// border-top-right-radius: 15px;
// width: 180px;
// height: 231px;
// position: relative;
// padding: 1rem;
// .rectangleCenterBlue {
// position: relative;
// top: 2rem;
// left: -30px;
// background-color: #e0e0e040;
// border-radius: 14px;
// width: 180px;
// height: 120px;
// margin-bottom: 20px;
// }
// .rectangleBlue {
// position: relative;
// background-color: #e0e0e040;
// border-radius: 14px;
// width: 250px;
// height: 80px;
// }
// }
}

@ -0,0 +1,13 @@
import React from "react";
import { Link } from "react-router-dom";
import "./HeaderSplash4.scss";
import rectangle from '../../../assets/rectangle.svg'
const HeaderSplash4 = () => {
return (
<header className="fixedgreenNav">
</header>
);
};
export default HeaderSplash4;

@ -0,0 +1,85 @@
.fixedgreenNav {
width: 100%;
height: 45vh;
background: rgb(2, 255, 103);
background: linear-gradient(
180deg,
rgba(2, 255, 103, 1) 0%,
rgba(120, 255, 111, 1) 46%,
rgba(158, 255, 49, 1) 100%
);
.navLink {
display: flex;
justify-content: flex-end;
padding: 2.5rem 1.5rem;
a {
color: #fff;
text-decoration: none;
}
}
.rectanlgleImg {
left: -30px;
width: 17rem;
}
// .rectangleNavWhite {
// left: -30px;
// background-color: #fff;
// border-top-right-radius: 15px;
// width: 290px;
// height: 235px;
// position: relative;
// padding: 1rem;
// z-index: 20;
// .rectangleCenterGray {
// position: relative;
// left: -30px;
// background-color: #e0e0e040;
// border-radius: 14px;
// width: 290px;
// height: 120px;
// margin-bottom: 20px;
// }
// .rectangleGray {
// position: relative;
// background-color: #e0e0e040;
// border-radius: 14px;
// width: 250px;
// height: 80px;
// }
// }
// .rectangleNavLightBlue {
// top: -231px;
// left: 12rem;
// background-color: blue;
// border-top-right-radius: 15px;
// width: 180px;
// height: 231px;
// position: relative;
// padding: 1rem;
// .rectangleCenterBlue {
// position: relative;
// top: 2rem;
// left: -30px;
// background-color: #e0e0e040;
// border-radius: 14px;
// width: 180px;
// height: 120px;
// margin-bottom: 20px;
// }
// .rectangleBlue {
// position: relative;
// background-color: #e0e0e040;
// border-radius: 14px;
// width: 250px;
// height: 80px;
// }
// }
}

@ -0,0 +1,11 @@
import React from 'react'
const LogIn = () => {
return (
<>
log in
</>
)
}
export default LogIn

@ -0,0 +1,62 @@
import React from "react";
import { ChevronLeft } from "react-iconly";
import "./Rule.scss";
import { Tab, Nav } from "react-bootstrap";
import Panel1 from "./Rules/Panel1";
import Panel2 from "./Rules/Panel2";
import { Link } from "react-router-dom";
const Rule = () => {
return (
<div className="container mainCon ">
<header
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<h4 style={{ fontSize: "18px" }}>شرایط استفاده و حریم خصوصی</h4>
<Link to="/4">
<nav className="navBack">
<ChevronLeft set="curved" />
</nav>
</Link>
</header>
<Tab.Container
defaultActiveKey="first"
style={{ justifyContent: "center" }}
>
<Nav
variant="pills"
style={{ width: "100%", justifyContent: "center", marginTop: "1rem" }}
>
<nav
style={{
border: "#2E81E8 solid 1.5px",
display: "flex",
borderRadius: "5px",
}}
>
<Nav.Item>
<Nav.Link eventKey="first">شرایط استفاده</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">حریم خصوصی</Nav.Link>
</Nav.Item>
</nav>
</Nav>
<Tab.Content>
<Tab.Pane eventKey="first">
<Panel1 />
</Tab.Pane>
<Tab.Pane eventKey="second">
<Panel2 />
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</div>
);
};
export default Rule;

@ -0,0 +1,15 @@
.mainCon {
direction: rtl;
margin-top: 1rem;
}
.navBack {
background-color: #2787ff20;
border-radius: 15px;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
color: #2E81E8;
}

@ -0,0 +1,85 @@
import React from "react";
const Panel1 = () => {
return (
<div className="mt-3">
<h4
style={{
backgroundColor: "#2E81E820",
with: "100%",
color: "#2E81E8",
borderRadius: "5px",
fontSize: "18px",
padding: "5px",
}}
>
نحوه استفاده از محصولات
</h4>
<p style={{ fontSize: "13px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
<h4
style={{
backgroundColor: "#2E81E820",
with: "100%",
color: "#2E81E8",
borderRadius: "5px",
fontSize: "18px",
padding: "5px",
}}
>
نحوه استفاده از محصولات
</h4>
<p style={{ fontSize: "13px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
<h4
style={{
backgroundColor: "#2E81E820",
with: "100%",
color: "#2E81E8",
borderRadius: "5px",
fontSize: "18px",
padding: "5px",
}}
>
نحوه استفاده از محصولات
</h4>
<p style={{ fontSize: "13px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
<h4
style={{
backgroundColor: "#2E81E820",
with: "100%",
color: "#2E81E8",
borderRadius: "5px",
fontSize: "18px",
padding: "5px",
}}
>
نحوه استفاده از محصولات
</h4>
<p style={{ fontSize: "13px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
</div>
);
};
export default Panel1;

@ -0,0 +1,105 @@
import React from "react";
const Panel1 = () => {
return (
<div className='mt-3'>
<h4
style={{
backgroundColor: "#2E81E820",
with: "100%",
color: "#2E81E8",
borderRadius: "5px",
padding: '5px',
fontSize: '18px',
}}
>
نحوه استفاده از محصولات
</h4>
<p style={{fontSize:'13px'}}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
<h4
style={{
backgroundColor: "#2E81E820",
with: "100%",
color: "#2E81E8",
borderRadius: "5px",
fontSize: "18px",
padding: "5px",
}}
>
نحوه استفاده از محصولات
</h4>
<p style={{ fontSize: "13px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
<h4
style={{
backgroundColor: "#2E81E820",
with: "100%",
color: "#2E81E8",
borderRadius: "5px",
fontSize: "18px",
padding: "5px",
}}
>
نحوه استفاده از محصولات
</h4>
<p style={{ fontSize: "13px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
<h4
style={{
backgroundColor: "#2E81E820",
with: "100%",
color: "#2E81E8",
borderRadius: "5px",
fontSize: "18px",
padding: "5px",
}}
>
نحوه استفاده از محصولات
</h4>
<p style={{ fontSize: "13px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
<h4
style={{
backgroundColor: "#2E81E820",
with: "100%",
color: "#2E81E8",
borderRadius: "5px",
fontSize: "18px",
padding: "5px",
}}
>
نحوه استفاده از محصولات
</h4>
<p style={{ fontSize: "13px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
</div>
);
};
export default Panel1;

@ -0,0 +1,30 @@
import React from "react";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import "./Splashes.scss";
const Splash1 = () => {
return (
<>
<Header />
<nav className="container navParagraph">
<h4 style={{ fontSize: "18px", marginBottom: "1rem" }}>
دنیای از فناوری های جدیدپیش روی شماست
<br />
همین حالا امتحان کنید
</h4>
<p style={{ fontSize: "12px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
1
</p>
</nav>
<Footer />
</>
);
};
export default Splash1;

@ -0,0 +1,29 @@
import React from "react";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
const Splash2 = () => {
return (
<>
<Header />
<nav className="container navParagraph">
<h4 style={{ fontSize: "18px", marginBottom: "1rem" }}>
دنیای از فناوری های جدیدپیش روی شماست
<br />
همین حالا امتحان کنید
</h4>
<p style={{ fontSize: "12px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
2
</p>
</nav>
<Footer />
</>
);
};
export default Splash2;

@ -0,0 +1,29 @@
import React from 'react'
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
const Splash3 = () => {
return (
<>
<Header />
<nav className="container navParagraph">
<h4 style={{ fontSize: "18px", marginBottom: "1rem" }}>
دنیای از فناوری های جدیدپیش روی شماست
<br />
همین حالا امتحان کنید
</h4>
<p style={{ fontSize: "12px" }}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
3
</p>
</nav>
<Footer />
</>
)
}
export default Splash3

@ -0,0 +1,44 @@
import React from "react";
import HeaderSplash4 from "../Header/HeaderSplash4";
import { Link } from "react-router-dom";
import "./Splashes.scss";
const splash4 = () => {
return (
<>
<HeaderSplash4 />
<nav className="container navParagraph">
<h4 style={{ fontSize: "18px", marginBottom: "1rem" }}>
ورود یا ثبت نام
</h4>
<p style={{ fontSize: "12px" }}>
کاربر گرامی لطفا یکی از دوگزینه زیر را انتخاب نمائید. در صورتی که عضو
نیستید روی دکمه ثبت نام بزنید
</p>
<Link style={{ color: "#fff", textDecoration: "none" }} to="/login">
<button className="logInBtn">ورود</button>
</Link>
<button className="signInBtn">ثبت نام</button>
<footer style={{ position: "fixed", bottom: "25px" }}>
<p
style={{
fontSize: "13px",
margin: "auto",
textAlign: "center",
width: "64%",
}}
>
ثبت نام شما در سامانه به منزله
<Link to="/rule" className="link">
<span> قبول شرایط و قوانین </span>
</Link>
استفاده میباشد
</p>
</footer>
</nav>
</>
);
};
export default splash4;

@ -0,0 +1,32 @@
.navParagraph{
margin-top: 2rem;
direction: rtl;
}
.logInBtn{
width: 100%;
background-color: #2E81E8 ;
border-radius: 8px;
border: none;
outline: none;
color: #fff;
padding: 0.75rem 1rem ;
margin-bottom: 8px;
}
.signInBtn{
width: 100%;
background-color: #fff;
border-radius: 8px;
border: #2E81E8 solid 1.5px ;
outline: none;
color: #2E81E8;
padding: 0.75rem 1rem ;
margin-bottom: 8px;
}
.link{
font-weight: bold;
text-decoration: none;
color: #000;
}

@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

@ -1,17 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import "./index.scss";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
ReactDOM.render(<App />, document.getElementById("root"));

@ -0,0 +1,5 @@
body {
margin: 0;
padding: 0;
font-family: "IranSans";
}

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

@ -1,13 +0,0 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save