first commit

master
Reza_ashrafi 3 years ago
parent 9840552eb0
commit b4bb66879f
  1. 33591
      package-lock.json
  2. 5
      package.json
  3. 42
      src/App.css
  4. 33
      src/App.js
  5. 8
      src/App.test.js
  6. 22
      src/components/Functionalities/Functionalities.css
  7. 148
      src/components/Functionalities/Functionalities.js
  8. 153
      src/components/alert/Alert.js
  9. 172
      src/components/alert/alert.css
  10. 172
      src/components/alert/test.css
  11. 29
      src/components/footer/Footer.js
  12. 3
      src/components/footer/footer.css
  13. 25
      src/components/header/Header.js
  14. 13
      src/components/header/header.css
  15. 17
      src/components/toast/Toast.css
  16. 62
      src/components/toast/Toast.js
  17. BIN
      src/icons/undraw.png
  18. BIN
      src/icons/vuesax-linear-airplane.png
  19. BIN
      src/icons/vuesax-linear-box-tick.png
  20. BIN
      src/icons/vuesax-linear-cake.png
  21. BIN
      src/icons/vuesax-linear-crown.png
  22. BIN
      src/icons/vuesax-linear-group.png
  23. BIN
      src/icons/vuesax-linear-teacher.png
  24. 13
      src/index.css
  25. 16
      src/index.js
  26. BIN
      src/iransans/eot/IRANSansWeb.eot
  27. BIN
      src/iransans/eot/IRANSansWeb_Black.eot
  28. BIN
      src/iransans/eot/IRANSansWeb_Bold.eot
  29. BIN
      src/iransans/eot/IRANSansWeb_Light.eot
  30. BIN
      src/iransans/eot/IRANSansWeb_Medium.eot
  31. BIN
      src/iransans/eot/IRANSansWeb_UltraLight.eot
  32. BIN
      src/iransans/ttf/IRANSansWeb.ttf
  33. BIN
      src/iransans/ttf/IRANSansWeb_Black.ttf
  34. BIN
      src/iransans/ttf/IRANSansWeb_Bold.ttf
  35. BIN
      src/iransans/ttf/IRANSansWeb_Light.ttf
  36. BIN
      src/iransans/ttf/IRANSansWeb_Medium.ttf
  37. BIN
      src/iransans/ttf/IRANSansWeb_UltraLight.ttf
  38. BIN
      src/iransans/woff/IRANSansWeb.woff
  39. BIN
      src/iransans/woff/IRANSansWeb_Black.woff
  40. BIN
      src/iransans/woff/IRANSansWeb_Bold.woff
  41. BIN
      src/iransans/woff/IRANSansWeb_Light.woff
  42. BIN
      src/iransans/woff/IRANSansWeb_Medium.woff
  43. BIN
      src/iransans/woff/IRANSansWeb_UltraLight.woff
  44. BIN
      src/iransans/woff2/IRANSansWeb.woff2
  45. BIN
      src/iransans/woff2/IRANSansWeb_Black.woff2
  46. BIN
      src/iransans/woff2/IRANSansWeb_Bold.woff2
  47. BIN
      src/iransans/woff2/IRANSansWeb_Light.woff2
  48. BIN
      src/iransans/woff2/IRANSansWeb_Medium.woff2
  49. BIN
      src/iransans/woff2/IRANSansWeb_UltraLight.woff2
  50. 1
      src/logo.svg
  51. 5
      src/setupTests.js
  52. 20347
      yarn.lock

33591
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -6,9 +6,14 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-toastify": "^8.1.0",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.1.10",
"sweetalert2-react-content": "^4.2.0",
"web-vitals": "^1.0.1"
},
"scripts": {

@ -1,38 +1,12 @@
.App {
text-align: center;
body {
background-color: #f5f5f5 !important;
direction: rtl;
}
.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;
button {
outline: none !important;
border: none !important;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
input {
outline: none !important;
}

@ -1,23 +1,22 @@
import logo from './logo.svg';
import './App.css';
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Header from "./components/header/Header";
import Functionalities from "./components/Functionalities/Functionalities";
import Footer from "./components/footer/Footer";
import Alert from "./components/alert/Alert";
import Toast from "./components/toast/Toast";
function 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 className="w-75 m-auto">
{/* header SECTION */}
{/* <Header /> */}
{/* functionality */}
{/* <Functionalities /> */}
{/* footer */}
{/* <Footer /> */}
<Alert />
<Toast />
</div>
);
}

@ -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,22 @@
.box {
cursor: pointer;
transition: all 0.4s;
}
.box:hover {
background-color: #f5f5f5;
transform: translateY(-5px) !important;
}
.title-holder h1 {
margin-left: 13px !important;
}
.image-box {
background-color: #f3f0d7;
width: 20%;
}
.content-holder {
width: 70%;
}

@ -0,0 +1,148 @@
import React from "react";
import "./Functionalities.css";
import airplane from "../../icons/vuesax-linear-airplane.png";
const Functionalities = () => {
return (
<section className="functionality bg-white">
<div className="container">
<div className="row justify-content-around py-5">
{/* box1 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
</div>
{/* text holder */}
<div className="content-holder ">
{/* title */}
<div className="title-holder d-flex align-items-center justify-content-center text-center">
<h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
<button type="button" className="btn btn-success">
جدید
</button>
</div>
{/* paragraph */}
<p className="mt-1">
قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
هدف کارکنان کمک نمیاد.
</p>
</div>
</div>
{/* box2 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
</div>
{/* text holder */}
<div className="content-holder ">
{/* title */}
<div className="title-holder d-flex align-items-center justify-content-center text-center">
<h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
<button type="button" className="btn btn-success">
جدید
</button>
</div>
{/* paragraph */}
<p className="mt-1">
قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
هدف کارکنان کمک نمیاد.
</p>
</div>
</div>
{/* box3 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border mt-4">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
</div>
{/* text holder */}
<div className="content-holder ">
{/* title */}
<div className="title-holder d-flex align-items-center justify-content-center text-center">
<h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
<button type="button" className="btn btn-success">
جدید
</button>
</div>
{/* paragraph */}
<p className="mt-1">
قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
هدف کارکنان کمک نمیاد.
</p>
</div>
</div>
{/* box4 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border mt-4">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
</div>
{/* text holder */}
<div className="content-holder ">
{/* title */}
<div className="title-holder d-flex align-items-center justify-content-center text-center">
<h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
<button type="button" className="btn btn-success">
جدید
</button>
</div>
{/* paragraph */}
<p className="mt-1">
قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
هدف کارکنان کمک نمیاد.
</p>
</div>
</div>
{/* box5 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border mt-4">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
</div>
{/* text holder */}
<div className="content-holder ">
{/* title */}
<div className="title-holder d-flex align-items-center justify-content-center text-center">
<h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
<button type="button" className="btn btn-success">
جدید
</button>
</div>
{/* paragraph */}
<p className="mt-1">
قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
هدف کارکنان کمک نمیاد.
</p>
</div>
</div>
{/* box6 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border mt-4">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
</div>
{/* text holder */}
<div className="content-holder ">
{/* title */}
<div className="title-holder d-flex align-items-center justify-content-center text-center">
<h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
<button type="button" className="btn btn-success">
جدید
</button>
</div>
{/* paragraph */}
<p className="mt-1">
قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
هدف کارکنان کمک نمیاد.
</p>
</div>
</div>
</div>
</div>
</section>
);
};
export default Functionalities;

@ -0,0 +1,153 @@
import React from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import "./alert.css";
import undraw from "../../icons/undraw.png";
const Alert = () => {
// error1
const showAlert = () => {
Swal.fire({
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "متوجه شدم",
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
},
});
};
// error2
const showAlert2 = () => {
Swal.fire({
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "توضیح بیشتر",
showCloseButton: true,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
cancelButton: "cancle-button1",
},
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
// error3
const showAlert3 = () => {
Swal.fire({
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "توضیح بیشتر",
customClass: {
title: "title-error-2",
closeButton: "close-button-2",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
},
showCloseButton: true,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
// error4
const showAlert4 = () => {
Swal.fire({
icon: "success",
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "توضیح بیشتر",
showCloseButton: true,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-4",
closeButton: "close-button-2",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
},
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
// error5
const showAlert5 = () => {
const { value: email } = Swal.fire({
input: "email",
inputPlaceholder: "ایمیل خود را اینجا بنویسید",
imageUrl: "https://unsplash.it/400/200",
imageAlt: "Custom image",
showCloseButton: true,
imageWidth: 400,
imageHeight: 200,
confirmButtonText: "عضو شوید",
html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>",
customClass: {
confirmButton: "confirm-button-5",
input: "input-error-5",
closeButton: "close-button-2",
},
});
if (email) {
Swal.fire(`Entered email: ${email}`);
}
};
// error6
const showAlert6 = () => {
Swal.fire({
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "مشاهده امکانات",
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-6",
confirmButton: "confirm-button-1",
},
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
return (
<div className="mt-5">
<button className="btn btn-danger btn-lg" onClick={showAlert}>
اررور 1
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert2}>
اررور 2
</button>
<button className="btn btn-danger btn-lg eroorr" onClick={showAlert3}>
اررور 3
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert4}>
4 اررور
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert5}>
5 اررور
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert6}>
6 اررور
</button>
<button className="btn btn-danger btn-lg">7 اررور</button>
</div>
);
};
export default Alert;

@ -0,0 +1,172 @@
:root {
--error-color1: #06bace;
--error-color2: #3ee924;
--white: #fff;
--content-color: #646464;
}
/* TODO common styles */
.swal2-container.swal2-center > .swal2-popup {
border: solid 2px #707070;
padding: 10px;
}
/* ? کلاس تمامی تایتل ها */
.swal2-title {
text-align: right;
font-size: 26px;
}
/* ? کلاس متن داخل الرت باکس */
.swal2-html-container {
text-align: justify;
line-height: 1.8;
color: var(--content-color) !important;
font-weight: 600;
}
/* ? کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس */
.swal2-rtl .swal2-close {
border-radius: 10px;
margin-left: 10px;
margin-top: 13px;
transition: all 0.4s;
}
/* ? کلاس کانفرم باتن */
.swal2-styled.swal2-confirm {
transition: all 0.4s;
outline: none !important;
}
/* ? کلاس هاور کانفرم باتن */
.swal2-styled.swal2-confirm:hover {
transform: translateY(-5px) !important;
}
/* ? کلاس کنسل باتن */
.swal2-styled.swal2-cancel {
transition: all 0.4s;
}
/* ? کلاس هاور کنسل باتن */
.swal2-styled.swal2-cancel:hover {
transform: translateY(-5px) !important;
}
/* ? ایکن اررور */
.swal2-icon.swal2-error {
border-color: #e92424;
color: #e92424;
}
/* !error 1 */
/* به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود */
/* TODO باکس اول از سمت راست در فایل پی اس دی */
/* ? تایتل */
.title-error-1 {
color: var(--error-color1) !important;
}
.eroorr:focus {
outline: none !important;
box-shadow: 0px 0px 0px black !important;
border: 0px;
}
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-1 {
background-color: var(--error-color1) !important;
color: var(--white) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-1:hover {
background-color: var(--white) !important;
color: var(--error-color1) !important;
border: solid 4px var(--error-color1) !important;
}
/* ? کانفرم باتن */
.confirm-button-1 {
background-color: var(--white) !important;
border: solid 2px var(--error-color1) !important;
color: var(--error-color1) !important;
}
/* ? هاور کانفرم باتن */
.confirm-button-1:hover {
background-color: var(--error-color1) !important;
color: var(--white) !important;
}
/* !error 2 */
/* ? کنسل باتن */
.cancle-button1 {
background-color: var(--error-color1) !important;
color: var(--white) !important;
border: solid 2px var(--error-color1) !important;
}
/* ? هاور کنسل باتن */
.cancle-button1:hover {
background-color: var(--white) !important;
color: var(--error-color1) !important;
}
/* !error3 */
/* ? تایتل */
.title-error-2 {
color: var(--error-color2) !important;
}
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-2 {
background-color: var(--error-color2) !important;
color: var(--white) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-2:hover {
background-color: var(--white) !important;
color: var(--error-color2) !important;
border: solid 4px var(--error-color2) !important;
}
/* ? کانفرم باتن */
.confirm-button-2 {
background-color: var(--white) !important;
border: solid 2px var(--error-color2) !important;
color: var(--error-color2) !important;
}
/* ? هاور کانفرم باتن */
.confirm-button-2:hover {
background-color: var(--error-color2) !important;
color: var(--white) !important;
}
/* ? کنسل باتن */
.cancle-button2 {
background-color: var(--error-color2) !important;
color: var(--white) !important;
border: solid 2px var(--error-color2) !important;
}
/* ? هاور کنسل باتن */
.cancle-button2:hover {
background-color: var(--white) !important;
color: var(--error-color2) !important;
}
/* !error4 */
/* ? تایتل */
.title-error-4 {
text-align: center !important;
color: var(--error-color2) !important;
}
/* !error5 */
/* ? کانفرم باتن */
.confirm-button-5 {
background-color: var(--error-color2) !important;
margin-top: -81px;
margin-left: -260px;
padding: 12px 15px;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
/* ? اینپوت فیلد */
.input-error-5 {
width: 70% !important;
height: 47px !important ;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
/* !error6 */
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-6 {
color: var(--error-color1) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-6:hover {
background-color: var(--error-color1) !important;
color: var(--white) !important;
border: solid 4px var(--error-color1) !important;
}

@ -0,0 +1,172 @@
:root {
--error-color1: #06bace;
--error-color2: #3ee924;
--white: #fff;
--content-color: #646464;
}
/* TODO common styles */
.swal2-container.swal2-center > .swal2-popup {
border: solid 2px #707070;
padding: 10px;
}
/* ? کلاس تمامی تایتل ها */
.swal2-title {
text-align: right;
font-size: 26px;
}
/* ? کلاس متن داخل الرت باکس */
.swal2-html-container {
text-align: justify;
line-height: 1.8;
color: var(--content-color) !important;
font-weight: 600;
}
/* ? کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس */
.swal2-rtl .swal2-close {
border-radius: 10px;
margin-left: 10px;
margin-top: 13px;
transition: all 0.4s;
}
/* ? کلاس کانفرم باتن */
.swal2-styled.swal2-confirm {
transition: all 0.4s;
outline: none !important;
}
/* ? کلاس هاور کانفرم باتن */
.swal2-styled.swal2-confirm:hover {
transform: translateY(-5px) !important;
}
/* ? کلاس کنسل باتن */
.swal2-styled.swal2-cancel {
transition: all 0.4s;
}
/* ? کلاس هاور کنسل باتن */
.swal2-styled.swal2-cancel:hover {
transform: translateY(-5px) !important;
}
/* ? ایکن اررور */
.swal2-icon.swal2-error {
border-color: #e92424;
color: #e92424;
}
/* !error 1 */
/* به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود */
/* TODO باکس اول از سمت راست در فایل پی اس دی */
/* ? تایتل */
.title-error-1 {
color: var(--error-color1) !important;
}
.eroorr:focus {
outline: none !important;
box-shadow: 0px 0px 0px black !important;
border: 0px;
}
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-1 {
background-color: var(--error-color1) !important;
color: var(--white) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-1:hover {
background-color: var(--white) !important;
color: var(--error-color1) !important;
border: solid 4px var(--error-color1) !important;
}
/* ? کانفرم باتن */
.confirm-button-1 {
background-color: var(--white) !important;
border: solid 2px var(--error-color1) !important;
color: var(--error-color1) !important;
}
/* ? هاور کانفرم باتن */
.confirm-button-1:hover {
background-color: var(--error-color1) !important;
color: var(--white) !important;
}
/* !error 2 */
/* ? کنسل باتن */
.cancle-button1 {
background-color: var(--error-color1) !important;
color: var(--white) !important;
border: solid 2px var(--error-color1) !important;
}
/* ? هاور کنسل باتن */
.cancle-button1:hover {
background-color: var(--white) !important;
color: var(--error-color1) !important;
}
/* !error3 */
/* ? تایتل */
.title-error-2 {
color: var(--error-color2) !important;
}
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-2 {
background-color: var(--error-color2) !important;
color: var(--white) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-2:hover {
background-color: var(--white) !important;
color: var(--error-color2) !important;
border: solid 4px var(--error-color2) !important;
}
/* ? کانفرم باتن */
.confirm-button-2 {
background-color: var(--white) !important;
border: solid 2px var(--error-color2) !important;
color: var(--error-color2) !important;
}
/* ? هاور کانفرم باتن */
.confirm-button-2:hover {
background-color: var(--error-color2) !important;
color: var(--white) !important;
}
/* ? کنسل باتن */
.cancle-button2 {
background-color: var(--error-color2) !important;
color: var(--white) !important;
border: solid 2px var(--error-color2) !important;
}
/* ? هاور کنسل باتن */
.cancle-button2:hover {
background-color: var(--white) !important;
color: var(--error-color2) !important;
}
/* !error4 */
/* ? تایتل */
.title-error-4 {
text-align: center !important;
color: var(--error-color2) !important;
}
/* !error5 */
/* ? کانفرم باتن */
.confirm-button-5 {
background-color: var(--error-color2) !important;
margin-top: -81px;
margin-left: -260px;
padding: 12px 15px;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
/* ? اینپوت فیلد */
.input-error-5 {
width: 70% !important;
height: 47px !important ;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
/* !error6 */
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-6 {
color: var(--error-color1) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-6:hover {
background-color: var(--error-color1) !important;
color: var(--white) !important;
border: solid 4px var(--error-color1) !important;
}

@ -0,0 +1,29 @@
import React from "react";
import "./footer.css";
const Footer = () => {
return (
<footer className="p-2 rounded">
<div className="container">
<div className="row">
<div className="col-8 text-white">
<h4>هزاران درصد تخفیف بیشتر</h4>
<p className="me-4 text-white">
با وارد کردن کد بهار تابستون از تخفیف 10 درصدی ویژه برخوردار شوید
</p>
</div>
<div className="col-4 align-items-end">
<button
type="button"
class="btn btn-outline-info btn-lg text-white text-center"
>
مشاهده امکانات
</button>
</div>
</div>
</div>
</footer>
);
};
export default Footer;

@ -0,0 +1,3 @@
footer {
background-color: #2f6aa1;
}

@ -0,0 +1,25 @@
import React from "react";
import "./header.css";
const Header = () => {
return (
<header className="bg-white mt-5">
<div className="container">
<div className="row justify-content-between align-items-center">
{/* header title */}
<div className="col-6 mt-5 ">
<h4 className="header-title d-inline rounded p-2 border">
امکانات و ویژگی های پلتفرم
</h4>
</div>
{/* header nav menu */}
{/* <div className="col-4 bg-dark">
<p className="text-white text-start">مهدی عندلیب</p>
</div> */}
</div>
</div>
</header>
);
};
export default Header;

@ -0,0 +1,13 @@
/* header */
header {
border-top-right-radius: 7px;
border-top-left-radius: 7px;
}
.header-title {
background-color: #f5f5f5 !important;
cursor: pointer;
transition: all 0.4s;
}
.header-title:hover {
background-color: #fff !important;
}

@ -0,0 +1,17 @@
.Toastify__toast-theme--colored.Toastify__toast--error {
background: #ffeaea;
color: #c70000;
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
background: #c70000;
}
.Toastify__close-button > svg {
color: #000 !important;
}
.Toastify__toast-theme--colored.Toastify__toast--success {
color: #21ae0b !important;
background: #c3ffb9 !important;
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {
background: #21ae0b !important;
}

@ -0,0 +1,62 @@
import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./Toast.css";
const Toast = () => {
const notify = () =>
toast.success("اررور شماره 1", {
position: "top-right",
autoClose: false,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: false,
draggable: true,
progress: undefined,
theme: "colored",
});
const notify2 = () =>
toast.error("اررور شماره 1", {
position: "top-right",
autoClose: false,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: false,
draggable: true,
progress: undefined,
theme: "colored",
});
const notify3 = () =>
toast.error("اررور شماره 1", {
position: "top-right",
theme: "colored",
icon: false,
});
const notify4 = () =>
toast.success("اررور شماره 1", {
position: "top-right",
theme: "colored",
icon: false,
});
return (
<div>
<button onClick={notify} className="btn btn-lg bg-warning">
toast notification 1
</button>
<button onClick={notify2} className="btn btn-lg bg-warning">
toast notification 2
</button>
<button onClick={notify3} className="btn btn-lg bg-warning">
toast notification 3
</button>
<button onClick={notify4} className="btn btn-lg bg-warning">
toast notification 4
</button>
<ToastContainer position="top-right" rtl />
</div>
);
};
export default Toast;

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -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,13 @@
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 "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
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();

Binary file not shown.

Binary file not shown.

@ -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,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';

20347
yarn.lock

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