Tochka
/
legacy
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add header and footer react

This commit is contained in:
Александр Манаенков 2023-05-02 23:03:18 +10:00
parent cbd29f5ba0
commit c7d15b1943
12 changed files with 262 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pairent_frontend/Comparison.html
View File

@ -16,7 +16,7 @@
<section class="logoSection">
<!--Логотип-->
<a href="https://vvsu.ru">
<img src="./img/logo.png" alt="">
<img src="./images/logo.png" alt="">
</a>
<div class="verticalLine"></div>
<!--Название сервиса-->

39
pairent_frontend_react/package-lock.json generated
View File

@ -14,6 +14,7 @@
"axios": "^1.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.11.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
@ -3114,6 +3115,14 @@
}
}
},
"node_modules/@remix-run/router": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.0.tgz",
"integrity": "sha512-N13NRw3T2+6Xi9J//3CGLsK2OqC8NMme3d/YX+nh05K9YHWGcv8DycHJrqGScSP4T75o8IN6nqIMhVFU8ohg8w==",
"engines": {
"node": ">=14"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -14386,6 +14395,36 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.11.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.0.tgz",
"integrity": "sha512-hTm6KKNpj9SDG4syIWRjCU219O0RZY8RUPobCFt9p+PlF7nnkRgMoh2DieTKvw3F3Mw6zg565HGnSv8BuoY5oQ==",
"dependencies": {
"@remix-run/router": "1.6.0"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.11.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.0.tgz",
"integrity": "sha512-Q3mK1c/CYoF++J6ZINz7EZzwlgSOZK/kc7lxIA7PhtWhKju4KfF1WHqlx0kVCIFJAWztuYVpXZeljEbds8z4Og==",
"dependencies": {
"@remix-run/router": "1.6.0",
"react-router": "6.11.0"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

1
pairent_frontend_react/package.json
View File

@ -9,6 +9,7 @@
"axios": "^1.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.11.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},

BIN
pairent_frontend_react/public/images/vvsu_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

10
pairent_frontend_react/public/index.html
View File

@ -2,12 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
<title>Pairent</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<body id="root">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<!-- this to content -->
</div>
</body>
</html>

13
pairent_frontend_react/src/App.js
View File

@ -1,10 +1,17 @@
import React from 'react';
import './App.css';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import './main.css';
function App() {
return (
<div className="App">
</div>
<>
<Header/>
<main>
<div className="horizontalLine"></div>
</main>
<Footer/>
</>
);
}

31
pairent_frontend_react/src/components/Footer/Footer.jsx Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import './styles/Footer.css';
const Footer = function () {
return (
<footer>
<div class="footerHouses">
<svg width="64" height="112" viewBox="0 0 64 112" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 16L31.5 0.5L64 16V112H0V16Z" fill="#D9D9D9"/>
<rect x="45" width="8" height="16" fill="#D9D9D9"/>
<rect x="37" y="27" width="16" height="16" fill="white"/>
<rect x="10" y="27" width="16" height="16" fill="white"/>
<rect x="37" y="79" width="16" height="16" fill="white"/>
<rect x="10" y="79" width="16" height="16" fill="white"/>
<rect x="37" y="53" width="16" height="16" fill="white"/>
<rect x="10" y="53" width="16" height="16" fill="white"/>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" fill="#D9D9D9"/>
<rect x="38" y="38" width="16" height="16" fill="white"/>
<rect x="11" y="38" width="16" height="16" fill="white"/>
<rect x="38" y="12" width="16" height="16" fill="white"/>
<rect x="11" y="12" width="16" height="16" fill="white"/>
</svg>
</div>
<div class="footerBlock"></div>
</footer>
);
}
export default Footer;

12
pairent_frontend_react/src/components/Footer/styles/Footer.css Normal file
View File

@ -0,0 +1,12 @@
/*Домики на футере*/
.footerHouses{
margin: 5% 0 0 5%;
}
/*Футер*/
.footerBlock{
width: 100%;
height: 250px;
margin-top: -0.5%;
background-color: #D9D9D9;
}

59
pairent_frontend_react/src/components/Header/Header.jsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
import './styles/Header.css';
const Header = function () {
return (
<header>
<section className="logoSection">
<a href="https://vvsu.ru">
<img src="/images/vvsu_logo.png"></img>
</a>
<div className="verticalLine"></div>
<h1>Pairent</h1>
<a href="#">
<button className="btnLocation">
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.88889 8.6665V12.9511L4.27722 13.854C4.14528 14.0487 3.85444 14.0487 3.7225 13.854L3.11111 12.9511V8.6665C3.39972 8.719 3.69611 8.75017 4 8.75017C4.30389 8.75017 4.60028 8.719 4.88889 8.6665ZM4 0C6.20917 0 8 1.76289 8 3.93758C8 6.11227 6.20917 7.87515 4 7.87515C1.79083 7.87515 0 6.11227 0 3.93758C0 1.76289 1.79083 0 4 0ZM4 2.07817C5.04167 2.07817 5.88889 2.91217 5.88889 3.93758C5.88889 4.1186 6.03833 4.26571 6.22222 4.26571C6.40611 4.26571 6.55556 4.1186 6.55556 3.93758C6.55556 2.5504 5.40889 1.4219 4 1.4219C3.81611 1.4219 3.66667 1.56902 3.66667 1.75003C3.66667 1.93105 3.81611 2.07817 4 2.07817Z" fill="#222222"></path>
</svg>
Владивосток
</button>
</a>
</section>
<nav>
<div>
<a href="#">
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.447 0.95727C12.7345 -0.502078 10.1877 -0.239583 8.61584 1.38226L8.00023 2.01663L7.38462 1.38226C5.8159 -0.239583 3.26595 -0.502078 1.55348 0.95727C-0.408984 2.63224 -0.512107 5.63843 1.24411 7.45403L7.29087 13.6977C7.68149 14.1008 8.31585 14.1008 8.70647 13.6977L14.7532 7.45403C16.5126 5.63843 16.4094 2.63224 14.447 0.95727Z"></path>
</svg>
Избранное
</a>
</div>
<div>
<a href="#">
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.4 9.33333H11.6C11.8 9.33333 12 9.1 12 8.86667V3.96667C12 3.73333 11.8 3.5 11.6 3.5H10.4C10.2 3.5 10 3.73333 10 3.96667V8.86667C10 9.1 10.2 9.33333 10.4 9.33333ZM13.4 9.33333H14.6C14.8 9.33333 15 9.1 15 8.86667V0.466667C15 0.233333 14.8 0 14.6 0H13.4C13.2 0 13 0.233333 13 0.466667V8.86667C13 9.1 13.2 9.33333 13.4 9.33333ZM4.4 9.33333H5.6C5.8 9.33333 6 9.1 6 8.86667V6.3C6 6.06667 5.8 5.83333 5.6 5.83333H4.4C4.2 5.83333 4 6.06667 4 6.3V8.86667C4 9.1 4.2 9.33333 4.4 9.33333ZM7.4 9.33333H8.6C8.8 9.33333 9 9.1 9 8.86667V1.63333C9 1.4 8.8 1.16667 8.6 1.16667H7.4C7.2 1.16667 7 1.4 7 1.63333V8.86667C7 9.1 7.2 9.33333 7.4 9.33333ZM15.5 11.6667H2V0.583333C2 0.261042 1.77625 0 1.5 0H0.5C0.22375 0 0 0.261042 0 0.583333V12.8333C0 13.4776 0.447812 14 1 14H15.5C15.7763 14 16 13.739 16 13.4167V12.25C16 11.9277 15.7763 11.6667 15.5 11.6667Z"></path>
</svg>
Сравнения
</a>
</div>
<div>
<a href="#">
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5556 5C11.5556 2.2375 8.96944 0 5.77778 0C2.58611 0 0 2.2375 0 5C0 6.07188 0.391667 7.05937 1.05556 7.875C0.683333 8.81875 0.0694444 9.56875 0.0611111 9.57812C0 9.65 -0.0166667 9.75625 0.0194444 9.85C0.0555556 9.94375 0.133333 10 0.222222 10C1.23889 10 2.08056 9.61563 2.68611 9.21875C3.58056 9.70938 4.63889 10 5.77778 10C8.96944 10 11.5556 7.7625 11.5556 5ZM14.9444 11.875C15.6083 11.0625 16 10.0719 16 9C16 6.90938 14.5139 5.11875 12.4083 4.37187C12.4333 4.57812 12.4444 4.7875 12.4444 5C12.4444 8.30937 9.45278 11 5.77778 11C5.47778 11 5.18611 10.975 4.89722 10.9406C5.77222 12.7375 7.82778 14 10.2222 14C11.3611 14 12.4194 13.7125 13.3139 13.2188C13.9194 13.6156 14.7611 14 15.7778 14C15.8667 14 15.9472 13.9406 15.9806 13.85C16.0167 13.7594 16 13.6531 15.9389 13.5781C15.9306 13.5688 15.3167 12.8219 14.9444 11.875Z"></path>
</svg>
Чаты
</a>
</div>
<a href="#">
<button className="userIcon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0C7.16129 0 0 7.16129 0 16C0 24.8387 7.16129 32 16 32C24.8387 32 32 24.8387 32 16C32 7.16129 24.8387 0 16 0ZM16 6.19355C19.1355 6.19355 21.6774 8.73548 21.6774 11.871C21.6774 15.0065 19.1355 17.5484 16 17.5484C12.8645 17.5484 10.3226 15.0065 10.3226 11.871C10.3226 8.73548 12.8645 6.19355 16 6.19355ZM16 28.3871C12.2129 28.3871 8.81936 26.671 6.54839 23.9871C7.76129 21.7032 10.1355 20.129 12.9032 20.129C13.0581 20.129 13.2129 20.1548 13.3613 20.2C14.2 20.471 15.0774 20.6452 16 20.6452C16.9226 20.6452 17.8064 20.471 18.6387 20.2C18.7871 20.1548 18.9419 20.129 19.0968 20.129C21.8645 20.129 24.2387 21.7032 25.4516 23.9871C23.1806 26.671 19.7871 28.3871 16 28.3871Z" fill="#007EFF"></path>
</svg>
</button>
</a>
</nav>
</header>
);
}
export default Header;

77
pairent_frontend_react/src/components/Header/styles/Header.css Normal file
View File

@ -0,0 +1,77 @@
header{
display: flex;
justify-content: space-around;
align-items: center;
margin: 18px 0px 11px 0px;
}
.logoSection{
display: flex;
align-items: center;
}
/*Логотип*/
.logoSection img{
width: 100px;
height: 32px;
}
.verticalLine{
width: 3px;
height: 37px;
margin: 0px 17px 0px 17px;
background-color: #A9A9A9;
}
/*Название сервиса*/
.logoSection h1{
font-weight: 700;
font-size: 32px;
color: #222;
}
/*Кнопка локации*/
.btnLocation{
width: 150px;
height: 28px;
margin-left: 37px;
border-radius: 40px;
background-color: #CCC;
font-size: 15px;
}
/*Навигация*/
nav {
display: flex;
align-items: center;
}
nav div{
margin-right: 55px;
}
nav a, svg{
transition: 0.3s;
fill: #222;
}
nav svg:hover{
fill: #0050A1;
}
nav a:hover{
color: #0050A1;
}
/*Горизонтальная линия под шапкой*/
.horizontalLine{
width: 100%;
height: 1px;
background-color: #CCC;
}
/*Личный кабинет*/
.userIcon{
border-radius: 20px;
background-color: #fff;
}

2
pairent_frontend_react/src/index.js
View File

@ -3,4 +3,4 @@ import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
root.render(<App/>);

26
pairent_frontend_react/src/main.css Normal file
View File

@ -0,0 +1,26 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
color: #000;
}
button{
cursor: pointer;
border: 0;
}
a{
text-decoration: none;
}
main{
margin: 0 5% 0 5%;
}
.horizontalLine{
width: 100%;
height: 1px;
background-color: #CCC;
}