parent
924177ecc2
commit
b5a3316ad7
26 changed files with 977 additions and 186 deletions
|
After Width: | Height: | Size: 830 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 588 B |
|
After Width: | Height: | Size: 572 B |
|
After Width: | Height: | Size: 876 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 357 B |
|
After Width: | Height: | Size: 977 B |
@ -0,0 +1,8 @@ |
|||||||
|
.MuiBreadcrumbs-li{ |
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
font-family: numeralLight; |
||||||
|
color: #6F7074; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Breadcrumbs from "@mui/material/Breadcrumbs"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
export default function BreadCrumbs(props: any) { |
||||||
|
const { links } = props; |
||||||
|
return ( |
||||||
|
<Breadcrumbs aria-label="breadcrumb"> |
||||||
|
{links.map((item: any, i: any) => ( |
||||||
|
<Link to={item.link} key={i}>{item.name}</Link> |
||||||
|
))} |
||||||
|
</Breadcrumbs> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
import React from 'react' |
||||||
|
import StarIcon from '@mui/icons-material/Star'; |
||||||
|
import Rating from '@mui/material/Rating'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default function StyledRating(props : any) { |
||||||
|
const {rate} = props; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Rating |
||||||
|
name="customized-color" |
||||||
|
defaultValue={2} |
||||||
|
precision={0.5} |
||||||
|
icon={<StarIcon style={{ fontSize : 40, color : '#FFED00' }} />} |
||||||
|
emptyIcon={<StarIcon style={{ fontSize : 40, color : '#494949' }} />} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
.lesson { |
||||||
|
header { |
||||||
|
background-color: #414141; |
||||||
|
border: 1px solid #b3b3b3 !important; |
||||||
|
padding: 15px !important; |
||||||
|
h4 { |
||||||
|
color: #9cdf52; |
||||||
|
margin: 0px; |
||||||
|
|
||||||
|
} |
||||||
|
div { |
||||||
|
color: #cccccc; |
||||||
|
} |
||||||
|
img{ |
||||||
|
width: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__files{ |
||||||
|
padding: 30px 15px 20px !important; |
||||||
|
border-left: 1px solid #b3b3b3; |
||||||
|
border-right: 1px solid #b3b3b3; |
||||||
|
border-bottom: 1px solid #b3b3b3; |
||||||
|
& img{ |
||||||
|
width: 40px; |
||||||
|
} |
||||||
|
&--sample{ |
||||||
|
margin-bottom: 15px; |
||||||
|
color: white; |
||||||
|
li{ |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
h5{ |
||||||
|
margin-right: 30px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.lesson { |
||||||
|
header { |
||||||
|
h4 { |
||||||
|
font-size: 21px; |
||||||
|
margin-right: 30px; |
||||||
|
} |
||||||
|
div { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__files{ |
||||||
|
&--sample{ |
||||||
|
li{ |
||||||
|
width : 120px; |
||||||
|
font-size: 19px; |
||||||
|
} |
||||||
|
h5{ |
||||||
|
font-size: 19px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.lesson { |
||||||
|
header { |
||||||
|
h4 { |
||||||
|
font-size: calc(100vw / 75); |
||||||
|
margin-right: 30px; |
||||||
|
} |
||||||
|
div { |
||||||
|
font-size: calc(100vw / 80); |
||||||
|
} |
||||||
|
} |
||||||
|
&__files{ |
||||||
|
&--sample{ |
||||||
|
li{ |
||||||
|
width : 120px; |
||||||
|
font-size: calc(100vw / 75); |
||||||
|
} |
||||||
|
h5{ |
||||||
|
font-size: calc(100vw/ 75); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import whiteDropdown from "../../../assets/icons/white-dropdown.png"; |
||||||
|
import whitePlay from "../../../assets/icons/white-play.png"; |
||||||
|
import document from "../../../assets/icons/document.png"; |
||||||
|
import lock from "../../../assets/icons/lock.png"; |
||||||
|
import './index.scss'; |
||||||
|
|
||||||
|
export default function Lesson(props : any) { |
||||||
|
const {lesson} = props; |
||||||
|
return ( |
||||||
|
<div className="lesson d-flex flex-column"> |
||||||
|
<header className="d-flex justify-content-between align-items-center"> |
||||||
|
<div className="d-flex align-items-center"> |
||||||
|
<img src={whiteDropdown} alt="" /> |
||||||
|
<h4>{lesson.title}</h4> |
||||||
|
</div> |
||||||
|
<div className="d-flex"> |
||||||
|
مدت زمان درس {lesson.duration} |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
{ |
||||||
|
lesson.active && <ul className="lesson__files d-flex flex-column"> |
||||||
|
{ |
||||||
|
lesson.files.map((data:any, i:any) => ( |
||||||
|
<li className="lesson__files--sample d-flex justify-content-between align-items-center"> |
||||||
|
<div className="d-flex align-items-center"> |
||||||
|
{ |
||||||
|
data.type === 'video' && <img src={whitePlay} alt="" /> |
||||||
|
} |
||||||
|
{ |
||||||
|
data.type === 'document' && <img src={document} alt="" /> |
||||||
|
} |
||||||
|
<h5>{data.name}</h5> |
||||||
|
</div> |
||||||
|
<ul className="d-flex"> |
||||||
|
<li>{data.type !== 'document' && data.duration}</li> |
||||||
|
<li> |
||||||
|
{ |
||||||
|
data.view && 'مشاهده' |
||||||
|
} |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
{ |
||||||
|
data.download ? 'دانلود' : <img src={lock} alt="" /> |
||||||
|
} |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
)) |
||||||
|
} |
||||||
|
</ul> |
||||||
|
} |
||||||
|
|
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,288 @@ |
|||||||
|
.course{ |
||||||
|
background: hsla(0, 0%, 31%, 1); |
||||||
|
background: linear-gradient( |
||||||
|
90deg, |
||||||
|
hsla(0, 0%, 31%, 1) 0%, |
||||||
|
hsla(0, 0%, 0%, 1) 100% |
||||||
|
); |
||||||
|
background: -moz-linear-gradient( |
||||||
|
90deg, |
||||||
|
hsla(0, 0%, 31%, 1) 0%, |
||||||
|
hsla(0, 0%, 0%, 1) 100% |
||||||
|
); |
||||||
|
background: -webkit-linear-gradient( |
||||||
|
90deg, |
||||||
|
hsla(0, 0%, 31%, 1) 0%, |
||||||
|
hsla(0, 0%, 0%, 1) 100% |
||||||
|
); |
||||||
|
width: 100%; |
||||||
|
overflow-x: hidden; |
||||||
|
padding-top: 60px; |
||||||
|
min-height: 100vh; |
||||||
|
font-family: numeralLight; |
||||||
|
&-container{ |
||||||
|
margin: 0px auto; |
||||||
|
width: 100%; |
||||||
|
header{ |
||||||
|
padding: 70px 0px 45px; |
||||||
|
border-bottom:3px solid #4a4a4a; |
||||||
|
|
||||||
|
} |
||||||
|
&__info{ |
||||||
|
&--image{ |
||||||
|
margin-left: 20px; |
||||||
|
img{ |
||||||
|
border-top-left-radius: 9px; |
||||||
|
border-top-right-radius: 9px; |
||||||
|
border-bottom-right-radius: 9px; |
||||||
|
border-bottom-left-radius: 24px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--description{ |
||||||
|
padding-top: 5px; |
||||||
|
a{ |
||||||
|
color: #424242; |
||||||
|
} |
||||||
|
li{ |
||||||
|
color: #424242; |
||||||
|
} |
||||||
|
h1{ |
||||||
|
color: white; |
||||||
|
margin-top: 12px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
color: #D3D3D3; |
||||||
|
margin-top: 25px; |
||||||
|
} |
||||||
|
.course-info-items{ |
||||||
|
padding: 10px; |
||||||
|
background-color: #08793d23; |
||||||
|
border-radius: 10px; |
||||||
|
i{ |
||||||
|
color: #4DD35B; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__options{ |
||||||
|
&--rate{ |
||||||
|
border: 2px solid #707070; |
||||||
|
box-shadow: 0px 0px 39px #f7ff01b3; |
||||||
|
border-radius: 15px; |
||||||
|
padding-top: 20px; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
&--button{ |
||||||
|
background-color: #313131; |
||||||
|
border: 1px solid #707070; |
||||||
|
color: white; |
||||||
|
padding: 8px; |
||||||
|
text-align: center; |
||||||
|
margin-top: 15px; |
||||||
|
&:hover{ |
||||||
|
color: white; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__list{ |
||||||
|
margin-bottom: 30px; |
||||||
|
border-radius: 10px; |
||||||
|
|
||||||
|
header{ |
||||||
|
padding: 40px 0px 20px; |
||||||
|
border: 0px; |
||||||
|
h2{ |
||||||
|
color: #4DD35B; |
||||||
|
} |
||||||
|
p{ |
||||||
|
color: #707070; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.course{ |
||||||
|
&-container { |
||||||
|
max-width: 1350px; |
||||||
|
&__info{ |
||||||
|
flex: 4; |
||||||
|
&--image{ |
||||||
|
img{ |
||||||
|
width: 320px; |
||||||
|
height: 420px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--description{ |
||||||
|
a{ |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
li{ |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
h1{ |
||||||
|
font-size: 50px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
.course-info-items{ |
||||||
|
width: 220px; |
||||||
|
margin-top: 20px; |
||||||
|
& img{ |
||||||
|
margin-left: 5px; |
||||||
|
width : 50px; |
||||||
|
} |
||||||
|
i{ |
||||||
|
font-size: 18px; |
||||||
|
font-family: numeralLight; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 14px; |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__options{ |
||||||
|
flex: 2; |
||||||
|
&--rate{ |
||||||
|
width: 315px; |
||||||
|
height: 200px; |
||||||
|
margin-bottom: 30px; |
||||||
|
&__number{ |
||||||
|
div{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
i{ |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
b{ |
||||||
|
font-size: 50px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: 18px; |
||||||
|
transform: translateY(4px); |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
h2{ |
||||||
|
margin-top: 15px; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
&--button{ |
||||||
|
width: 315px; |
||||||
|
height: 66px; |
||||||
|
padding: 0px 30px; |
||||||
|
font-size: 18px; |
||||||
|
border-radius: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__list{ |
||||||
|
header{ |
||||||
|
h2{ |
||||||
|
font-size: 25px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.course{ |
||||||
|
&-container { |
||||||
|
max-width: 1250px; |
||||||
|
padding: 0px 10px; |
||||||
|
&__info{ |
||||||
|
flex: 3; |
||||||
|
&--image{ |
||||||
|
img{ |
||||||
|
width: 250px; |
||||||
|
height: 380px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--description{ |
||||||
|
a{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
li{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
h1{ |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 80);; |
||||||
|
} |
||||||
|
.course-info-items{ |
||||||
|
width: 45%; |
||||||
|
margin-top: 20px; |
||||||
|
& img{ |
||||||
|
margin-left: 10px; |
||||||
|
width : 45px; |
||||||
|
} |
||||||
|
i{ |
||||||
|
font-size: calc(100vw / 95); |
||||||
|
font-family: numeralLight; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__options{ |
||||||
|
flex: 2; |
||||||
|
&--rate{ |
||||||
|
width: 70%; |
||||||
|
height: 160px; |
||||||
|
margin-bottom: 30px; |
||||||
|
&__number{ |
||||||
|
i{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
b{ |
||||||
|
font-size: calc(100vw / 50); |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: 18px; |
||||||
|
transform: translateY(4px); |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
h2{ |
||||||
|
margin-top: 5px; |
||||||
|
font-size: calc(100vw / 80); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
&--button{ |
||||||
|
width: 70%; |
||||||
|
height: 59px; |
||||||
|
padding: 0px 30px; |
||||||
|
font-size: calc(100vw / 75); |
||||||
|
border-radius: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__list{ |
||||||
|
header{ |
||||||
|
h2{ |
||||||
|
font-size: calc(100vw / 65); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue