main page finished
This commit is contained in:
VividTruthKeeper
parent
eb80f530ae
commit
0d24c89feb
|
|
@ -0,0 +1,281 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useRef } from "react";
|
||||
|
||||
// IMPORT IMAGES
|
||||
import cardRemove from "../../icons/card-remove.svg";
|
||||
import arrow from "../../icons/arrow-down.svg";
|
||||
|
||||
const TitleGrid = () => {
|
||||
const handleOpen = (el, target) => {
|
||||
el.current.classList.toggle("active");
|
||||
console.log(target.target);
|
||||
target.target.children[2].classList.toggle("active");
|
||||
};
|
||||
const handlePush = (el) => {
|
||||
el.current.classList.toggle("pushed");
|
||||
};
|
||||
const drop1 = useRef();
|
||||
const drop2 = useRef();
|
||||
const drop3 = useRef();
|
||||
const drop4 = useRef();
|
||||
const drop5 = useRef();
|
||||
const drop6 = useRef();
|
||||
const drop7 = useRef();
|
||||
const drop8 = useRef();
|
||||
|
||||
const push2 = useRef();
|
||||
const push3 = useRef();
|
||||
const push4 = useRef();
|
||||
const push6 = useRef();
|
||||
const push7 = useRef();
|
||||
const push8 = useRef();
|
||||
|
||||
return (
|
||||
<section className="titlegrid">
|
||||
<ul>
|
||||
<li className="titlegrid-wrapper">
|
||||
<div className="title-container">
|
||||
<div
|
||||
className="title-el"
|
||||
onClick={(e) => {
|
||||
handleOpen(drop1, e);
|
||||
handlePush(push2);
|
||||
}}
|
||||
>
|
||||
<div className="title-left">
|
||||
<div className="title-left-img">
|
||||
<img src={cardRemove} alt="card" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-mid">
|
||||
<p>Сохранять данные банковской карты на веб-сайтах</p>
|
||||
</div>
|
||||
<div className="title-right">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-drop" ref={drop1}>
|
||||
<h2>
|
||||
При использовании общедоступных сетей «Wi-Fi», старайтесь не
|
||||
вводить свою личную информацию, а к незнакомым сетям «Wi-Fi»
|
||||
рекомендуется вообще не подключаться, поскольку эти сети могут
|
||||
использоваться для атаки и получения вашей личной информации
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-container">
|
||||
<div
|
||||
className="title-el"
|
||||
ref={push2}
|
||||
onClick={(e) => {
|
||||
handleOpen(drop2, e);
|
||||
handlePush(push3);
|
||||
}}
|
||||
>
|
||||
<div className="title-left">
|
||||
<div className="title-left-img">
|
||||
<img src={cardRemove} alt="card" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-mid">
|
||||
<p>Сохранять данные банковской карты на веб-сайтах</p>
|
||||
</div>
|
||||
<div className="title-right">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-drop" ref={drop2}>
|
||||
<h2>
|
||||
При использовании общедоступных сетей «Wi-Fi», старайтесь не
|
||||
вводить свою личную информацию, а к незнакомым сетям «Wi-Fi»
|
||||
рекомендуется вообще не подключаться, поскольку эти сети могут
|
||||
использоваться для атаки и получения вашей личной информации
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-container">
|
||||
<div
|
||||
className="title-el"
|
||||
ref={push3}
|
||||
onClick={(e) => {
|
||||
handleOpen(drop3, e);
|
||||
handlePush(push4);
|
||||
}}
|
||||
>
|
||||
<div className="title-left">
|
||||
<div className="title-left-img">
|
||||
<img src={cardRemove} alt="card" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-mid">
|
||||
<p>Сохранять данные банковской карты на веб-сайтах</p>
|
||||
</div>
|
||||
<div className="title-right">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-drop" ref={drop3}>
|
||||
<h2>
|
||||
При использовании общедоступных сетей «Wi-Fi», старайтесь не
|
||||
вводить свою личную информацию, а к незнакомым сетям «Wi-Fi»
|
||||
рекомендуется вообще не подключаться, поскольку эти сети могут
|
||||
использоваться для атаки и получения вашей личной информации
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-container">
|
||||
<div
|
||||
className="title-el"
|
||||
ref={push4}
|
||||
onClick={(e) => {
|
||||
handleOpen(drop4, e);
|
||||
}}
|
||||
>
|
||||
<div className="title-left">
|
||||
<div className="title-left-img">
|
||||
<img src={cardRemove} alt="card" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-mid">
|
||||
<p>Сохранять данные банковской карты на веб-сайтах</p>
|
||||
</div>
|
||||
<div className="title-right">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-drop" ref={drop4}>
|
||||
<h2>
|
||||
При использовании общедоступных сетей «Wi-Fi», старайтесь не
|
||||
вводить свою личную информацию, а к незнакомым сетям «Wi-Fi»
|
||||
рекомендуется вообще не подключаться, поскольку эти сети могут
|
||||
использоваться для атаки и получения вашей личной информации
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="titlegrid-wrapper">
|
||||
<div className="title-container">
|
||||
<div
|
||||
className="title-el"
|
||||
onClick={(e) => {
|
||||
handleOpen(drop5, e);
|
||||
handlePush(push6);
|
||||
}}
|
||||
>
|
||||
<div className="title-left">
|
||||
<div className="title-left-img">
|
||||
<img src={cardRemove} alt="card" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-mid">
|
||||
<p>Сохранять данные банковской карты на веб-сайтах</p>
|
||||
</div>
|
||||
<div className="title-right">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-drop" ref={drop5}>
|
||||
<h2>
|
||||
При использовании общедоступных сетей «Wi-Fi», старайтесь не
|
||||
вводить свою личную информацию, а к незнакомым сетям «Wi-Fi»
|
||||
рекомендуется вообще не подключаться, поскольку эти сети могут
|
||||
использоваться для атаки и получения вашей личной информации
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-container">
|
||||
<div
|
||||
className="title-el"
|
||||
ref={push6}
|
||||
onClick={(e) => {
|
||||
handleOpen(drop6, e);
|
||||
handlePush(push7);
|
||||
}}
|
||||
>
|
||||
<div className="title-left">
|
||||
<div className="title-left-img">
|
||||
<img src={cardRemove} alt="card" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-mid">
|
||||
<p>Сохранять данные банковской карты на веб-сайтах</p>
|
||||
</div>
|
||||
<div className="title-right">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-drop" ref={drop6}>
|
||||
<h2>
|
||||
При использовании общедоступных сетей «Wi-Fi», старайтесь не
|
||||
вводить свою личную информацию, а к незнакомым сетям «Wi-Fi»
|
||||
рекомендуется вообще не подключаться, поскольку эти сети могут
|
||||
использоваться для атаки и получения вашей личной информации
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-container">
|
||||
<div
|
||||
className="title-el"
|
||||
ref={push7}
|
||||
onClick={(e) => {
|
||||
handleOpen(drop7, e);
|
||||
handlePush(push8);
|
||||
}}
|
||||
>
|
||||
<div className="title-left">
|
||||
<div className="title-left-img">
|
||||
<img src={cardRemove} alt="card" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-mid">
|
||||
<p>Сохранять данные банковской карты на веб-сайтах</p>
|
||||
</div>
|
||||
<div className="title-right">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-drop" ref={drop7}>
|
||||
<h2>
|
||||
При использовании общедоступных сетей «Wi-Fi», старайтесь не
|
||||
вводить свою личную информацию, а к незнакомым сетям «Wi-Fi»
|
||||
рекомендуется вообще не подключаться, поскольку эти сети могут
|
||||
использоваться для атаки и получения вашей личной информации
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-container">
|
||||
<div
|
||||
className="title-el"
|
||||
ref={push8}
|
||||
onClick={(e) => {
|
||||
handleOpen(drop8, e);
|
||||
}}
|
||||
>
|
||||
<div className="title-left">
|
||||
<div className="title-left-img">
|
||||
<img src={cardRemove} alt="card" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-mid">
|
||||
<p>Сохранять данные банковской карты на веб-сайтах</p>
|
||||
</div>
|
||||
<div className="title-right">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="title-drop" ref={drop8}>
|
||||
<h2>
|
||||
При использовании общедоступных сетей «Wi-Fi», старайтесь не
|
||||
вводить свою личную информацию, а к незнакомым сетям «Wi-Fi»
|
||||
рекомендуется вообще не подключаться, поскольку эти сети могут
|
||||
использоваться для атаки и получения вашей личной информации
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TitleGrid;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="35" height="30" viewBox="0 0 35 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.9511 10.5405H1.22149C0.553744 10.5405 0 9.98917 0 9.32431C0 8.65944 0.553744 8.10809 1.22149 8.10809H19.9511C20.6188 8.10809 21.1726 8.65944 21.1726 9.32431C21.1726 9.98917 20.6188 10.5405 19.9511 10.5405Z" fill="#01815E"/>
|
||||
<path d="M10.9935 23.5135H7.73614C7.06839 23.5135 6.51465 22.9622 6.51465 22.2973C6.51465 21.6324 7.06839 21.0811 7.73614 21.0811H10.9935C11.6612 21.0811 12.215 21.6324 12.215 22.2973C12.215 22.9622 11.6612 23.5135 10.9935 23.5135Z" fill="#01815E"/>
|
||||
<path d="M21.5796 23.5135H15.065C14.3973 23.5135 13.8435 22.9622 13.8435 22.2973C13.8435 21.6324 14.3973 21.0811 15.065 21.0811H21.5796C22.2474 21.0811 22.8011 21.6324 22.8011 22.2973C22.8011 22.9622 22.2474 23.5135 21.5796 23.5135Z" fill="#01815E"/>
|
||||
<path d="M26.5634 30H8.45274C1.97068 30 0 28.0541 0 21.6649V8.33513C0 1.94595 1.97068 0 8.45274 0H19.9511C20.6188 0 21.1726 0.551351 21.1726 1.21622C21.1726 1.88108 20.6188 2.43243 19.9511 2.43243H8.45274C3.33875 2.43243 2.44299 3.30811 2.44299 8.33513V21.6486C2.44299 26.6757 3.33875 27.5514 8.45274 27.5514H26.5472C31.6611 27.5514 32.5569 26.6757 32.5569 21.6486V15.0324C32.5569 14.3676 33.1107 13.8162 33.7784 13.8162C34.4462 13.8162 34.9999 14.3676 34.9999 15.0324V21.6486C35.0162 28.0541 33.0455 30 26.5634 30Z" fill="#01815E"/>
|
||||
<path d="M26.1561 10.0378C25.8467 10.0378 25.5373 9.9243 25.293 9.68106C24.8206 9.21079 24.8206 8.43241 25.293 7.96214L31.6284 1.65403C32.1008 1.18376 32.8825 1.18376 33.3548 1.65403C33.8271 2.1243 33.8271 2.90268 33.3548 3.37295L27.0193 9.68106C26.775 9.9243 26.4656 10.0378 26.1561 10.0378Z" fill="#01815E"/>
|
||||
<path d="M32.4755 10.0378C32.1661 10.0378 31.8566 9.9243 31.6123 9.68106L25.2768 3.37295C24.8045 2.90268 24.8045 2.1243 25.2768 1.65403C25.7492 1.18376 26.5309 1.18376 27.0032 1.65403L33.3387 7.96214C33.811 8.43241 33.811 9.21079 33.3387 9.68106C33.1107 9.9243 32.8012 10.0378 32.4755 10.0378Z" fill="#01815E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.528 16H10.4266C6.96083 16 5.29042 14.6368 5.00161 11.5833C4.97038 11.2639 5.20455 10.9757 5.53239 10.9445C5.84462 10.9133 6.14123 11.1548 6.17246 11.4742C6.39882 13.9202 7.55406 14.8315 10.4344 14.8315H10.5358C13.7127 14.8315 14.8368 13.7098 14.8368 10.5394V5.46056C14.8368 2.29017 13.7127 1.16845 10.5358 1.16845H10.4344C7.53845 1.16845 6.38321 2.09542 6.17246 4.58812C6.13343 4.9075 5.86023 5.14898 5.53239 5.11782C5.20455 5.09445 4.97038 4.80623 4.9938 4.48685C5.25919 1.38656 6.93741 0 10.4266 0H10.528C14.3606 0 15.9998 1.63583 15.9998 5.46056V10.5394C15.9998 14.3642 14.3606 16 10.528 16Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.14147 11.0224C8.02439 11.1392 7.87608 11.1938 7.72777 11.1938C7.57946 11.1938 7.42335 11.1392 7.31407 11.0224C7.08771 10.7965 7.08771 10.4226 7.31407 10.1967L8.92985 8.58421H0.585401C0.265368 8.58421 -2.47955e-05 8.31936 -2.47955e-05 7.99999C-2.47955e-05 7.68061 0.265368 7.41576 0.585401 7.41576H8.92984L7.31407 5.8033C7.08771 5.5774 7.08771 5.20349 7.31407 4.97759C7.54043 4.75169 7.91511 4.75169 8.14147 4.97759L10.7564 7.58713C10.9827 7.81304 10.9827 8.18694 10.7564 8.41284L8.14147 11.0224Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,8 +1,36 @@
|
|||
// IMPORT MODULES
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// IMPORT IMAGES
|
||||
import logout from "../icons/logout.svg";
|
||||
|
||||
// IMPORT PERSONAL COMPONENTS
|
||||
import TitleGrid from "../components/main/TitleGrid";
|
||||
|
||||
const Main = () => {
|
||||
return <h1>Main</h1>;
|
||||
return (
|
||||
<section className="main">
|
||||
<div className="container">
|
||||
<div className="main-inner">
|
||||
<div className="main-head">
|
||||
<div className="main-head__left">
|
||||
<h1>Личный кабинет</h1>
|
||||
</div>
|
||||
<div className="main-head__right">
|
||||
<Link to="/sign-in">
|
||||
<h3>Физическое лицо</h3>
|
||||
<div className="logout">
|
||||
<img src={logout} alt="logout" />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<TitleGrid />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Main;
|
||||
|
|
|
|||
|
|
@ -25,3 +25,7 @@ li {
|
|||
padding: 0 4rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
.main-head {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.main-head__left {
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-head__right {
|
||||
justify-self: right;
|
||||
|
||||
a {
|
||||
font-size: 1.6rem;
|
||||
background: $base-green;
|
||||
border-radius: 1rem;
|
||||
padding: 1.8rem 3rem;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
align-items: center;
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
margin-top: 0.5rem;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.titlegrid {
|
||||
padding-bottom: 24rem;
|
||||
ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
|
||||
li {
|
||||
.title-el {
|
||||
padding: 3.4rem 3rem;
|
||||
border: 0.1rem solid rgba(229, 229, 229, 1);
|
||||
background: #fff;
|
||||
border-radius: 1rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.titlegrid-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.title-drop {
|
||||
position: absolute;
|
||||
top: calc(100% - 3rem);
|
||||
left: 0;
|
||||
|
||||
border-radius: 1rem;
|
||||
background: #f2f2f2;
|
||||
overflow: hidden;
|
||||
max-height: 0rem;
|
||||
transition: 0.4s all ease;
|
||||
|
||||
h2 {
|
||||
color: $text-black;
|
||||
font-size: 1.2rem;
|
||||
font-weight: normal;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
margin: 0 0 2rem 0;
|
||||
padding: 5rem 3rem 2rem 3rem;
|
||||
max-height: 22rem;
|
||||
transition: 0.4s all ease;
|
||||
}
|
||||
}
|
||||
|
||||
.title-el {
|
||||
display: grid;
|
||||
grid-template-columns: 3rem 8fr 0.3fr;
|
||||
gap: 2rem;
|
||||
margin-top: 0;
|
||||
transition: 0.4s all ease;
|
||||
* {
|
||||
align-self: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.pushed {
|
||||
margin-top: 17rem;
|
||||
transition: 0.4s all ease;
|
||||
}
|
||||
}
|
||||
|
||||
.title-mid {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
p {
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.title-right {
|
||||
justify-self: right;
|
||||
img {
|
||||
transform: rotate(0deg);
|
||||
transition: 0.4s all ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
img {
|
||||
transform: rotate(180deg);
|
||||
transition: 0.4s all ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
}
|
||||
|
||||
.lang-dropdown {
|
||||
z-index: 2;
|
||||
z-index: 10;
|
||||
border-radius: 1rem;
|
||||
background: rgb(219, 219, 219);
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -7,3 +7,4 @@
|
|||
@import "./global";
|
||||
@import "./nav";
|
||||
@import "./footer";
|
||||
@import "./main";
|
||||
|
|
|
|||
Loading…
Reference in New Issue