diff --git a/log-in/package.json b/log-in/package.json index 7f3f186..18e5a58 100644 --- a/log-in/package.json +++ b/log-in/package.json @@ -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": { diff --git a/log-in/public/favicon.ico b/log-in/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/log-in/public/favicon.ico and /dev/null differ diff --git a/log-in/public/index.html b/log-in/public/index.html index aa069f2..6252f08 100644 --- a/log-in/public/index.html +++ b/log-in/public/index.html @@ -2,42 +2,11 @@ - - - - - - - React App
- diff --git a/log-in/public/logo192.png b/log-in/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/log-in/public/logo192.png and /dev/null differ diff --git a/log-in/public/logo512.png b/log-in/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/log-in/public/logo512.png and /dev/null differ diff --git a/log-in/public/manifest.json b/log-in/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/log-in/public/manifest.json +++ /dev/null @@ -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" -} diff --git a/log-in/public/robots.txt b/log-in/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/log-in/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/log-in/src/App.css b/log-in/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/log-in/src/App.css +++ /dev/null @@ -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); - } -} diff --git a/log-in/src/App.js b/log-in/src/App.js index 3784575..9d210ce 100644 --- a/log-in/src/App.js +++ b/log-in/src/App.js @@ -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 ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ <> + + + + + + + ); -} +}; export default App; diff --git a/log-in/src/App.test.js b/log-in/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/log-in/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/log-in/src/assets/rectangle.svg b/log-in/src/assets/rectangle.svg new file mode 100644 index 0000000..ef374bc --- /dev/null +++ b/log-in/src/assets/rectangle.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/log-in/src/components/Links.js b/log-in/src/components/Links.js new file mode 100644 index 0000000..9acaa3d --- /dev/null +++ b/log-in/src/components/Links.js @@ -0,0 +1,17 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +const Links = () => { + return ( + <> + + + + + + + + ); +}; + +export default Links; diff --git a/log-in/src/components/RoutPage.js b/log-in/src/components/RoutPage.js new file mode 100644 index 0000000..de20c60 --- /dev/null +++ b/log-in/src/components/RoutPage.js @@ -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 ( + <> + + + + + + + + + + + + + + + + + + + + ); +}; + +export default RoutPage; diff --git a/log-in/src/components/logIn/Footer/Footer.js b/log-in/src/components/logIn/Footer/Footer.js new file mode 100644 index 0000000..0dde78a --- /dev/null +++ b/log-in/src/components/logIn/Footer/Footer.js @@ -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 ( + + ); +}; + +export default Footer; diff --git a/log-in/src/components/logIn/Footer/Footer.scss b/log-in/src/components/logIn/Footer/Footer.scss new file mode 100644 index 0000000..ec48015 --- /dev/null +++ b/log-in/src/components/logIn/Footer/Footer.scss @@ -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; + } + } +} diff --git a/log-in/src/components/logIn/Header/Header.js b/log-in/src/components/logIn/Header/Header.js new file mode 100644 index 0000000..ace9be8 --- /dev/null +++ b/log-in/src/components/logIn/Header/Header.js @@ -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 ( +
+ + {/* */} + {/* + + */} +
+ ); +}; + +export default Header; diff --git a/log-in/src/components/logIn/Header/Header.scss b/log-in/src/components/logIn/Header/Header.scss new file mode 100644 index 0000000..d5bbda9 --- /dev/null +++ b/log-in/src/components/logIn/Header/Header.scss @@ -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; + // } + // } + +} diff --git a/log-in/src/components/logIn/Header/HeaderSplash4.js b/log-in/src/components/logIn/Header/HeaderSplash4.js new file mode 100644 index 0000000..298c879 --- /dev/null +++ b/log-in/src/components/logIn/Header/HeaderSplash4.js @@ -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 ( +
+
+ ); +}; + +export default HeaderSplash4; diff --git a/log-in/src/components/logIn/Header/HeaderSplash4.scss b/log-in/src/components/logIn/Header/HeaderSplash4.scss new file mode 100644 index 0000000..0f9b864 --- /dev/null +++ b/log-in/src/components/logIn/Header/HeaderSplash4.scss @@ -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; + // } + // } +} diff --git a/log-in/src/components/logIn/LogIn.js b/log-in/src/components/logIn/LogIn.js new file mode 100644 index 0000000..95a15e7 --- /dev/null +++ b/log-in/src/components/logIn/LogIn.js @@ -0,0 +1,11 @@ +import React from 'react' + +const LogIn = () => { + return ( + <> + log in + + ) +} + +export default LogIn diff --git a/log-in/src/components/logIn/Rule.js b/log-in/src/components/logIn/Rule.js new file mode 100644 index 0000000..eb80661 --- /dev/null +++ b/log-in/src/components/logIn/Rule.js @@ -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 ( +
+
+

شرایط استفاده و حریم خصوصی

+ + + +
+ + + + + + + + + + + +
+ ); +}; + +export default Rule; diff --git a/log-in/src/components/logIn/Rule.scss b/log-in/src/components/logIn/Rule.scss new file mode 100644 index 0000000..4bec269 --- /dev/null +++ b/log-in/src/components/logIn/Rule.scss @@ -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; +} diff --git a/log-in/src/components/logIn/Rules/Panel1.js b/log-in/src/components/logIn/Rules/Panel1.js new file mode 100644 index 0000000..7d8680d --- /dev/null +++ b/log-in/src/components/logIn/Rules/Panel1.js @@ -0,0 +1,85 @@ +import React from "react"; + +const Panel1 = () => { + return ( +
+

+ نحوه استفاده از محصولات +

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده + از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و + سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای + متنوع با هدف بهبود ابزارهای کاربردی می باشد +

+ +

+ نحوه استفاده از محصولات +

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده + از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و + سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای + متنوع با هدف بهبود ابزارهای کاربردی می باشد +

+ +

+ نحوه استفاده از محصولات +

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده + از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و + سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای + متنوع با هدف بهبود ابزارهای کاربردی می باشد +

+ +

+ نحوه استفاده از محصولات +

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده + از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و + سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای + متنوع با هدف بهبود ابزارهای کاربردی می باشد +

+
+ ); +}; + +export default Panel1; diff --git a/log-in/src/components/logIn/Rules/Panel2.js b/log-in/src/components/logIn/Rules/Panel2.js new file mode 100644 index 0000000..88fc1a2 --- /dev/null +++ b/log-in/src/components/logIn/Rules/Panel2.js @@ -0,0 +1,105 @@ +import React from "react"; + +const Panel1 = () => { + return ( +
+

+ نحوه استفاده از محصولات +

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده + از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و + سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای + متنوع با هدف بهبود ابزارهای کاربردی می باشد +

+ +

+ نحوه استفاده از محصولات +

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده + از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و + سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای + متنوع با هدف بهبود ابزارهای کاربردی می باشد +

+ +

+ نحوه استفاده از محصولات +

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده + از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و + سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای + متنوع با هدف بهبود ابزارهای کاربردی می باشد +

+ +

+ نحوه استفاده از محصولات +

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده + از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و + سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای + متنوع با هدف بهبود ابزارهای کاربردی می باشد +

+ +

+ نحوه استفاده از محصولات +

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده + از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و + سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای + متنوع با هدف بهبود ابزارهای کاربردی می باشد +

+
+ ); +}; + +export default Panel1; diff --git a/log-in/src/components/logIn/Splashes/Splash1.js b/log-in/src/components/logIn/Splashes/Splash1.js new file mode 100644 index 0000000..9779903 --- /dev/null +++ b/log-in/src/components/logIn/Splashes/Splash1.js @@ -0,0 +1,30 @@ +import React from "react"; +import Header from "../Header/Header"; +import Footer from "../Footer/Footer"; +import "./Splashes.scss"; + +const Splash1 = () => { + return ( + <> +
+ +