evgen-app/front-nti-hack
1
0
Fork 0
mirror of https://github.com/evgen-app/front-nti-hack.git synced 2024-11-21 14:06:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

all

Browse Source
This commit is contained in:
Firesieht 2022-07-15 13:21:32 +03:00
parent 7d6ae0ff3f
commit f7586588ea
12 changed files with 221 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/WhoIToggle/toggle.module.css
View File

@ -8,9 +8,27 @@
.value{
cursor: pointer;
background-color: aqua;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 5px 12px;
gap: 10px;
width: 135px;
/* Main/fuksia */
border: 2px solid #7D47BF;
border-radius: 12px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.active{
background-color: azure !important;
background: #7D47BF;
}

4
src/pages/index.tsx
View File

@ -37,7 +37,9 @@ const IndexPage: NextPage = () => {
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"></link>
</Head>
<EventComponent events={mockData}></EventComponent>
<div>
</div>
</div>
)
}

14
src/pages/mastermind.tsx Normal file
View File

@ -0,0 +1,14 @@
import { NextPage } from "next";
import Link from "next/link";
import React, {useState} from "react";
import { useDispatch, useSelector } from "react-redux";
import styles from "../styles/mastermind/mastermind.module.css"
const MasterMind: NextPage = () => {
return(
<div></div>
)
}
export default MasterMind

27
src/pages/registration/onBoarding/1.tsx
View File

@ -26,18 +26,21 @@ const OnBoardingPage1: NextPage = () => {
<div className={styles.mainWrapper}>
<div className={styles.h}>Прежде чем что-то <br></br>
<span className={styles.hc}>сделать,</span> <br></br> спроси себя <br></br><span className={styles.hc}>"Зачем?"</span></div>
<div>
<div>Я хочу узнать:</div>
<Input value={initState.whatIwantKnown} class={styles.inp1} placeholder="что хотите узнать?" onChange={(value)=>setWhatIwantKnown(value)}></Input>
</div>
<div>
<div>Я хочу получить:</div>
<Input class={styles.inp1} value={initState.whatIwantGet} placeholder="что хотите получить?" onChange={(value)=>setWhatIwantGet(value)}></Input>
</div>
<div>
<div>Я хочу научится:</div>
<Input class={styles.inp1} value={initState.whatIwantLearn} placeholder="чему вы хотите научится?" onChange={(value)=>setWhatIwantLearn(value)}></Input>
<div className={styles.whoIWrpaper}>
<div>
<div>Я хочу узнать:</div>
<Input value={initState.whatIwantKnown} class={styles.inp1} placeholder="что хотите узнать?" onChange={(value)=>setWhatIwantKnown(value)}></Input>
</div>
<div>
<div>Я хочу получить:</div>
<Input class={styles.inp1} value={initState.whatIwantGet} placeholder="что хотите получить?" onChange={(value)=>setWhatIwantGet(value)}></Input>
</div>
<div>
<div>Я хочу научится:</div>
<Input class={styles.inp1} value={initState.whatIwantLearn} placeholder="чему вы хотите научится?" onChange={(value)=>setWhatIwantLearn(value)}></Input>
</div>
</div>
<div className={styles.linkWrapper} onClick={()=>dispatch(setWhyPage(WhyPageState))}>
<div className={styles.backLink}>
<Link href="/registration/onBoarding" >Назад</Link>
@ -46,6 +49,8 @@ const OnBoardingPage1: NextPage = () => {
<Link href="/registration/onBoarding/2">Вперед</Link>
</div>
</div>
<img src="/images/union.svg" className={styles.union}></img>
</div>
)
}

2
src/pages/registration/onBoarding/2.tsx
View File

@ -79,6 +79,8 @@ const OnBoardingPage2: NextPage = () => {
<Link href="/registration/onBoarding/3" className={styles.nextLink}>Вперед</Link>
</div>
</div>
<img src="/images/union.svg" className={styles.union}></img>
</div>
)
}

2
src/pages/registration/onBoarding/3.tsx
View File

@ -39,6 +39,8 @@ const OnBoardingPage3: NextPage = () => {
</div>
</div>
<img src="/images/union.svg" className={styles.union}></img>
</div>
)

12
src/pages/registration/onBoarding/4.tsx
View File

@ -29,10 +29,12 @@ const OnBoardingPage4: NextPage = () => {
let dispatch = useDispatch()
return(
<div>
<div>Какой я?</div>
<div>выбери одно из двух</div>
<div>
<div className={styles.mainWrapper}>
<div className={styles.h}>Какой <br></br>
<span className={styles.hc}>
"я?"
</span></div>
<div className={styles.whoIWrpaper}>
<WhoIToggle
active={introvert}
onChange={(value)=>setInrovert(value)}
@ -80,6 +82,8 @@ const OnBoardingPage4: NextPage = () => {
</div>
</div>
<img src="/images/union.svg" className={styles.union}></img>
</div>
)
}

27
src/pages/registration/onBoarding/5.tsx
View File

@ -35,26 +35,37 @@ const OnBoardingPage5: NextPage = () => {
}
return(
<div>
<div>
Как понять, что мне нравится? <br></br>
Выбирать, пробовать и снова Выбирать!
<div className={styles.mainWrapper}>
<div className={styles.h}>
Как понять, <br/>
<span className={styles.hc}>
что мне нравится?
</span><br></br>
<div className={styles.hs}>
Выбирать, пробовать, <br/>
снова Выбирать!
</div>
</div>
<div>
<div className={styles.hss}>
10 вещей, которые я хотел бы сделать, <br></br>
но почему-то до сих пор не сделал:
</div>
<div>
<div className={styles.whoIWrpaper}>
{inputs}
</div>
<div onClick={()=>dispatch(setWhatILikePage({things:list}))}>
<div>
<img src="/images/union.svg" className={styles.union}></img>
<div className={styles.linkWrapper} onClick={()=>dispatch(setWhatILikePage({things:list}))}>
<div className={styles.backLink}>
<Link href="/registration/onBoarding/4">Назад</Link>
</div>
<div className={styles.nextLink}>
<Link href="/registration/onBoarding/lastPage">Вперед</Link>
</div>
</div>
<img src="/images/union.svg" className={styles.union}></img>
</div>
)
}

2
src/pages/registration/onBoarding/index.tsx
View File

@ -6,7 +6,7 @@ import styles from "../../../styles/onBoarding/onBoarding.module.css"
const OnBoardingPage: NextPage = () => {
return(
<div className={styles.mainWrapper}>
<div className={styles.firstwrapper}>
<div className={styles.h}>Сформмируйте <span className={styles.hc}>профиль</span></div>
<div>Это поможет достигнуть цели!</div>
<div className={styles.nextLink}>

52
src/pages/registration/onBoarding/lastPage.tsx
View File

@ -35,29 +35,30 @@ const lastPage: NextPage = () => {
}
return(
<div>
<div>Спасибо что заполнили форму!</div>
<div>
<div className={styles.lastWrapper}>
<div className={styles.h}>Спасибо, что<br/>
<span className={styles.hc}>заполнили форму!</span></div>
<div className={styles.gss}>
Вы прошли главный и один из самых главных шагов к успеху,
этот небольшой самоанализ поможет вам сформировать первые цели.
</div>
<div>
<div>Мы подготовили для тебя пару полезных советов:</div>
<ul>
<div className={styles.gs}>
<div className={styles.gss}>Мы подготовили для тебя пару полезных советов:</div>
<ul className={styles.gss}>
{
BadSkills.map((skill)=><li>{skill}</li>)
}
</ul>
</div>
<div>
<div>Мы рады что ты движешься в нужном направлении и уже определился со многими факторами</div>
<div>{why.whatIwantGet == ""? null:("Ты хочешь получить: " + why.whatIwantGet)}</div>
<div>{why.whatIwantKnown == ""? null:("Ты хочешь узнать: " + why.whatIwantGet)}</div>
<div>{why.whatIwantLearn == ""? null:("Ты хочешь научится: " + why.whatIwantGet)}</div>
<div className={styles.z}>
<div className={styles.gss}>Мы рады что ты движешься в нужном направлении и уже определился со многими факторами</div>
<div className={styles.gss}>{why.whatIwantGet == ""? null:("Ты хочешь получить: " + why.whatIwantGet)}</div>
<div className={styles.gss}>{why.whatIwantKnown == ""? null:("Ты хочешь узнать: " + why.whatIwantKnown)}</div>
<div className={styles.gss}>{why.whatIwantLearn == ""? null:("Ты хочешь научится: " + why.whatIwantLearn)}</div>
</div>
<div>
<div>Ты очень классный, ведь у тебя есть все качества, чтобы достичь твоих целей и исполнить все твои мечты.</div>
<div>{you.individualist == null? null:
<div className={styles.z}>
<div className={styles.gss}>Ты очень классный, ведь у тебя есть все качества, чтобы достичь твоих целей и исполнить все твои мечты.</div>
<div className={styles.gss}>{you.individualist == null? null:
("Ведь ты:" + you.individualist? "индивидуалист":"командный игрок" + ", "
+ you.introvert? "интроверт":"экстроверт" + ", "
+ you.leader? "лидер": "исполнитель" + ", "
@ -65,20 +66,29 @@ const lastPage: NextPage = () => {
+ you.organize? "организованный":"творческий" + ", "
+ you.serious? "серьезный":"легкомысленный" + ", "
)}</div>
<div>Надо держать грань между всеми качествами, нельзя быть во всех ситуациях серьезным, также как и нельзя быть всегда легкомысленным, надо все делать в меру.</div>
<div>
<div>Незабывай про вещи, что ты обещал нам сделать:</div>
<ul>
<div className={styles.gss}>Надо держать грань между всеми качествами, нельзя быть во всех ситуациях серьезным, также как и нельзя быть всегда легкомысленным, надо все делать в меру.</div>
<div className={styles.gs}>
<div className={styles.gss}>Незабывай про вещи, что ты обещал нам сделать:</div>
<ul className={styles.gss}>
{
things.things.length>0? things.things.map((value)=><li>{value}</li>):null
}
</ul>
</div>
</div>
<div>Мы уверены, все твои цели и мечты сбудуться, если следовать четкому плану</div>
<div className={styles.nextLink}>
<Link href="/" className={styles.nextLink}>Далее</Link>
<img src="/images/union.svg" className={styles.union}></img>
<div className={styles.gss}>Мы уверены, все твои цели и мечты сбудуться, если следовать четкому плану</div>
<div className={styles.linkWrapper}>
<div className={styles.backLink}>
<Link href="/registration/onBoarding/5">Вернуться</Link>
</div>
<div className={styles.nextLink}>
<Link href="/">Далее</Link>
</div>
</div>
</div>
)
}

0
src/styles/mastermind/mastermind.module.css Normal file
View File

110
src/styles/onBoarding/onBoarding.module.css
View File

@ -81,19 +81,31 @@
}
.mainWrapper{
margin-top: 50px;
display: flex;
flex-direction: column;
gap:50px;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
z-index: 10;
}
.firstwrapper{
display: flex;
flex-direction: column;
gap:50px;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.union{
width: 80%;
position: absolute;
bottom:100px;
bottom:0px;
right: 0px;
z-index: 1;
@ -109,20 +121,32 @@
flex-direction: row;
align-items: center;
justify-content: center;
gap:50px
gap:50px;
margin-bottom:50px;
}
.powerWrapper{
display: flex;
flex-direction: column;
gap:20px;
gap:5px;
align-items: center;
justify-content: center;
z-index: 100;
}
.whoIWrpaper{
display: flex;
flex-direction: column;
gap:15px;
align-items: center;
justify-content: center;
width: 90%;
z-index: 100;
}
.inpFile{
display: flex;
flex-direction: row;
justify-content: center;
@ -138,4 +162,80 @@
background: #7D47BF;
border-radius: 12px;
}
.hs{
margin-top: 25px;
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 30px;
/* or 125% */
text-align: center;
text-transform: uppercase;
/* Main/white */
color: #FFFFFF;
}
.hss{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 17px;
/* or 106% */
text-align: center;
letter-spacing: 0.03em;
/* Main/white */
color: #FFFFFF;
}
.gss{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 17px;
/* or 106% */
text-align: left;
letter-spacing: 0.03em;
/* Main/white */
z-index: 100;
color: #FFFFFF;
}
.gs{
margin-top: 25px;
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 30px;
/* or 125% */
/* Main/white */
z-index: 100;
color: #FFFFFF;
}
.lastWrapper{
margin-top: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 25px;
gap:15px;
z-index: 100;
}
.z{
z-index: 100;
}