yawaflua/SusMarket
1
0
Fork 0
mirror of https://github.com/yawaflua/SusMarket.git synced 2025-12-09 20:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Coding header, fixes & additions

Browse Source 
Coding HTML & CSS Header, edited README file, fixed sass, added icons, fragmentation css, using BEM & other
This commit is contained in:
RailTH
2024-02-02 13:06:51 +11:00
parent a566d13781
commit 85cce21e6b
20 changed files with 1908 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
reactapp/README.md
View File

@@ -1,70 +1 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

1599
reactapp/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
reactapp/package.json
View File

@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"node-sass": "^9.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",

10
reactapp/public/index.html
View File

@@ -2,16 +2,8 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<title>SusMarket</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

18
reactapp/src/App.js
View File

@@ -1,8 +1,18 @@
function App() {
import HomePage from "./components/pages/HomePage";
import PaymentPage from "./components/pages/PaymentPage";
import ProductPage from "./components/pages/ProductPage";
import ProfilePage from "./components/pages/ProfilePage";
import ScamPage from "./components/pages/ScamPage";
import Header from "./components/blocks/Header";
import SearchIcon from "../src/assets/icons/search-form__icon.svg";
export default function App() {
return (
<>
<Header SearchIcon={SearchIcon}/>
<main>
<HomePage />
</main>
</>
);
}
export default App;
}

0
reactapp/src/style.scss → reactapp/src/HomeStyle.scss
View File

0
reactapp/src/PaymentStyle.scss Normal file
View File

0
reactapp/src/ProductStyle.scss Normal file
View File

0
reactapp/src/ProfileStyle.scss Normal file
View File

0
reactapp/src/ScamStyle.scss Normal file
View File

14
reactapp/src/assets/icons/geolocation-form__button-icon.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="48.000000" height="48.000000" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>
Created with Pixso.
</desc>
<defs>
<clipPath id="clip3_51">
<rect id="location_on_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="white" fill-opacity="0"/>
</clipPath>
</defs>
<rect id="location_on_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip3_51)">
<path id="Vector" d="M24 40.05C28.4333 36.0167 31.7084 32.3583 33.825 29.075C35.9417 25.7916 37 22.9 37 20.4C37 16.4736 35.7451 13.2588 33.2354 10.7552C30.7257 8.25171 27.6472 7 24 7C20.3528 7 17.2743 8.25171 14.7646 10.7552C12.2549 13.2588 11 16.4736 11 20.4C11 22.9 12.0834 25.7916 14.25 29.075C16.4166 32.3583 19.6666 36.0167 24 40.05ZM23.9875 43C23.6292 43 23.275 42.9417 22.925 42.825C22.575 42.7084 22.2667 42.5167 22 42.25C20.6 40.9833 19.0834 39.525 17.45 37.875C15.8167 36.225 14.3 34.45 12.9 32.55C11.5 30.65 10.3334 28.6666 9.40002 26.6C8.46667 24.5333 8 22.4667 8 20.4C8 15.4 9.60828 11.4166 12.825 8.44995C16.0416 5.48328 19.7667 4 24 4C28.2333 4 31.9584 5.48328 35.175 8.44995C38.3917 11.4166 40 15.4 40 20.4C40 22.4667 39.5333 24.5333 38.6 26.6C37.6666 28.6666 36.5 30.65 35.1 32.55C33.7 34.45 32.1833 36.225 30.55 37.875C28.9166 39.525 27.4 40.9833 26 42.25C25.7333 42.5167 25.4208 42.7084 25.0625 42.825C24.7042 42.9417 24.3458 43 23.9875 43ZM24.0044 23.5C24.9681 23.5 25.7916 23.1569 26.475 22.4706C27.1583 21.7843 27.5 20.9592 27.5 19.9956C27.5 19.0319 27.1569 18.2084 26.4706 17.525C25.7843 16.8417 24.9592 16.5 23.9956 16.5C23.0319 16.5 22.2084 16.8431 21.525 17.5294C20.8417 18.2157 20.5 19.0408 20.5 20.0044C20.5 20.9681 20.8431 21.7916 21.5294 22.475C22.2157 23.1583 23.0408 23.5 24.0044 23.5Z" fill="#CCC5B9" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

14
reactapp/src/assets/icons/info-a__icon.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="48.000000" height="48.000000" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>
Created with Pixso.
</desc>
<defs>
<clipPath id="clip6_70">
<rect id="info_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="white" fill-opacity="0"/>
</clipPath>
</defs>
<rect id="info_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip6_70)">
<path id="Vector" d="M24.1587 34C24.5863 34 24.9417 33.8562 25.225 33.5687C25.5083 33.2812 25.65 32.925 25.65 32.5L25.65 23.5C25.65 23.075 25.5054 22.7188 25.2163 22.4313C24.927 22.1438 24.5687 22 24.1412 22C23.7137 22 23.3583 22.1438 23.075 22.4313C22.7916 22.7188 22.65 23.075 22.65 23.5L22.65 32.5C22.65 32.925 22.7946 33.2812 23.0837 33.5687C23.3729 33.8562 23.7313 34 24.1587 34ZM23.9991 18.3C24.4663 18.3 24.8583 18.1466 25.175 17.84C25.4917 17.5333 25.65 17.1533 25.65 16.7C25.65 16.2184 25.4919 15.8146 25.1759 15.4888C24.8599 15.163 24.4681 15 24.0009 15C23.5337 15 23.1417 15.163 22.825 15.4888C22.5083 15.8146 22.35 16.2184 22.35 16.7C22.35 17.1533 22.5081 17.5333 22.8241 17.84C23.1403 18.1466 23.5319 18.3 23.9991 18.3ZM24.0133 44C21.2555 44 18.6638 43.475 16.2383 42.425C13.8127 41.375 11.6917 39.9417 9.875 38.125C8.05835 36.3083 6.625 34.186 5.57495 31.7579C4.52502 29.33 4 26.7356 4 23.975C4 21.2144 4.52502 18.62 5.57495 16.192C6.625 13.764 8.05835 11.65 9.875 9.84998C11.6917 8.05005 13.814 6.625 16.2421 5.57495C18.67 4.52502 21.2644 4 24.025 4C26.7856 4 29.38 4.52502 31.808 5.57495C34.236 6.625 36.35 8.05005 38.15 9.84998C39.95 11.65 41.375 13.7667 42.425 16.2C43.475 18.6333 44 21.2289 44 23.9867C44 26.7445 43.475 29.3362 42.425 31.7617C41.375 34.1873 39.95 36.3053 38.15 38.1158C36.35 39.9263 34.2333 41.3596 31.8 42.4158C29.3667 43.4719 26.7711 44 24.0133 44ZM24.025 41C28.7417 41 32.75 39.3417 36.05 36.025C39.35 32.7084 41 28.6917 41 23.975C41 19.2583 39.3531 15.25 36.0594 11.95C32.7656 8.65002 28.7458 7 24 7C19.3 7 15.2916 8.64685 11.975 11.9406C8.65833 15.2344 7 19.2542 7 24C7 28.7 8.65833 32.7084 11.975 36.025C15.2916 39.3417 19.3083 41 24.025 41Z" fill="#CCC5B9" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

14
reactapp/src/assets/icons/profile-a__icon.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="48.000000" height="48.000000" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>
Created with Pixso.
</desc>
<defs>
<clipPath id="clip3_40">
<rect id="person_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="white" fill-opacity="0"/>
</clipPath>
</defs>
<rect id="person_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip3_40)">
<path id="Vector" d="M24 23.95C21.8 23.95 20 23.25 18.6 21.85C17.2 20.45 16.5 18.6499 16.5 16.45C16.5 14.25 17.2 12.45 18.6 11.0499C20 9.6499 21.8 8.94995 24 8.94995C26.2 8.94995 28 9.6499 29.4 11.0499C30.8 12.45 31.5 14.25 31.5 16.45C31.5 18.6499 30.8 20.45 29.4 21.85C28 23.25 26.2 23.95 24 23.95ZM8 37L8 35.2999C8 34.0333 8.31665 32.95 8.94995 32.0499C9.58337 31.1499 10.4 30.4667 11.4 30C13.6333 29 15.775 28.25 17.825 27.75C19.875 27.25 21.9333 27 24 27C26.0667 27 28.1167 27.2583 30.15 27.7749C32.1833 28.2916 34.3153 29.0365 36.546 30.0096C37.5894 30.4805 38.4259 31.1633 39.0555 32.058C39.6852 32.9526 40 34.0333 40 35.2999L40 37C40 37.825 39.7063 38.5312 39.1188 39.1187C38.5312 39.7062 37.825 40 37 40L11 40C10.175 40 9.46875 39.7062 8.88123 39.1187C8.2937 38.5312 8 37.825 8 37ZM11 37L37 37L37 35.2999C37 34.7666 36.8417 34.2583 36.525 33.7749C36.2084 33.2916 35.8167 32.9332 35.35 32.7C33.2167 31.6666 31.2667 30.9583 29.5 30.575C27.7333 30.1917 25.9 30 24 30C22.1 30 20.25 30.1917 18.45 30.575C16.65 30.9583 14.7 31.6666 12.6 32.7C12.1333 32.9332 11.75 33.2916 11.45 33.7749C11.15 34.2583 11 34.7666 11 35.2999L11 37ZM24 20.95C25.3 20.95 26.375 20.5249 27.225 19.6749C28.075 18.825 28.5 17.75 28.5 16.45C28.5 15.1499 28.075 14.075 27.225 13.225C26.375 12.375 25.3 11.95 24 11.95C22.7 11.95 21.625 12.375 20.775 13.225C19.925 14.075 19.5 15.1499 19.5 16.45C19.5 17.75 19.925 18.825 20.775 19.6749C21.625 20.5249 22.7 20.95 24 20.95Z" fill="#CCC5B9" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

11
reactapp/src/assets/icons/search-form__icon.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="33.000000" height="33.000000" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="clip3_8">
<rect id="search_FILL0_wght400_GRAD0_opsz24 1" width="33.000000" height="33.000000" fill="white" fill-opacity="0"/>
</clipPath>
</defs>
<rect id="search_FILL0_wght400_GRAD0_opsz24 1" width="33.000000" height="33.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip3_8)">
<path id="Vector" d="M13.0625 22C10.5646 22 8.45056 21.1349 6.72034 19.4047C4.99011 17.6744 4.125 15.5604 4.125 13.0625C4.125 10.5646 4.99011 8.45056 6.72034 6.72034C8.45056 4.99011 10.5646 4.125 13.0625 4.125C15.5604 4.125 17.6744 4.99011 19.4047 6.72034C21.1349 8.45056 22 10.5646 22 13.0625C22 14.0708 21.8396 15.0219 21.5188 15.9156C21.1979 16.8093 20.7625 17.6 20.2125 18.2875L27.9125 25.9875C28.1646 26.2396 28.2906 26.5604 28.2906 26.95C28.2906 27.3396 28.1646 27.6604 27.9125 27.9125C27.6604 28.1646 27.3396 28.2906 26.95 28.2906C26.5604 28.2906 26.2396 28.1646 25.9875 27.9125L18.2875 20.2125C17.6 20.7625 16.8093 21.1979 15.9156 21.5188C15.0219 21.8396 14.0708 22 13.0625 22ZM13.0625 19.25C14.7812 19.25 16.2422 18.6484 17.4453 17.4453C18.6484 16.2422 19.25 14.7812 19.25 13.0625C19.25 11.3438 18.6484 9.88281 17.4453 8.67969C16.2422 7.47656 14.7812 6.875 13.0625 6.875C11.3438 6.875 9.88281 7.47656 8.67969 8.67969C7.47656 9.88281 6.875 11.3438 6.875 13.0625C6.875 14.7812 7.47656 16.2422 8.67969 17.4453C9.88281 18.6484 11.3438 19.25 13.0625 19.25Z" fill="#CCC5B9" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

80
reactapp/src/components/blocks/Header.jsx
View File

@@ -1,6 +1,82 @@
export default function Header() {
return(
<>
</>
<header className="header">
<h1 className="header__title">SuSMarket</h1>
<button className="catalog-button">Каталог</button>
<form action="search" className="search-form">
<div className="search-form__field">
<input type="search" name="search" id="" className="search-form__input" placeholder="Я ищу..."/>
{/* Код для svg */}
<svg width="33.000000" height="33.000000" viewBox="0 0 33 33" fill="none">
<defs>
<clipPath id="clip3_8">
<rect id="search_FILL0_wght400_GRAD0_opsz24 1" width="33.000000" height="33.000000" fill="white" fill-opacity="0"/>
</clipPath>
</defs>
<rect id="search_FILL0_wght400_GRAD0_opsz24 1" width="33.000000" height="33.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip3_8)">
<path id="Vector" d="M13.0625 22C10.5646 22 8.45056 21.1349 6.72034 19.4047C4.99011 17.6744 4.125 15.5604 4.125 13.0625C4.125 10.5646 4.99011 8.45056 6.72034 6.72034C8.45056 4.99011 10.5646 4.125 13.0625 4.125C15.5604 4.125 17.6744 4.99011 19.4047 6.72034C21.1349 8.45056 22 10.5646 22 13.0625C22 14.0708 21.8396 15.0219 21.5188 15.9156C21.1979 16.8093 20.7625 17.6 20.2125 18.2875L27.9125 25.9875C28.1646 26.2396 28.2906 26.5604 28.2906 26.95C28.2906 27.3396 28.1646 27.6604 27.9125 27.9125C27.6604 28.1646 27.3396 28.2906 26.95 28.2906C26.5604 28.2906 26.2396 28.1646 25.9875 27.9125L18.2875 20.2125C17.6 20.7625 16.8093 21.1979 15.9156 21.5188C15.0219 21.8396 14.0708 22 13.0625 22ZM13.0625 19.25C14.7812 19.25 16.2422 18.6484 17.4453 17.4453C18.6484 16.2422 19.25 14.7812 19.25 13.0625C19.25 11.3438 18.6484 9.88281 17.4453 8.67969C16.2422 7.47656 14.7812 6.875 13.0625 6.875C11.3438 6.875 9.88281 7.47656 8.67969 8.67969C7.47656 9.88281 6.875 11.3438 6.875 13.0625C6.875 14.7812 7.47656 16.2422 8.67969 17.4453C9.88281 18.6484 11.3438 19.25 13.0625 19.25Z" fill="#CCC5B9" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
{/* Код для svg */}
</div>
</form>
<a href="/" className="header__profile-a">
{/* Код для svg */}
<svg width="48.000000" height="48.000000" viewBox="0 0 48 48" fill="none">
<desc>
Created with Pixso.
</desc>
<defs>
<clipPath id="clip3_40">
<rect id="person_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="white" fill-opacity="0"/>
</clipPath>
</defs>
<rect id="person_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip3_40)">
<path id="Vector" d="M24 23.95C21.8 23.95 20 23.25 18.6 21.85C17.2 20.45 16.5 18.6499 16.5 16.45C16.5 14.25 17.2 12.45 18.6 11.0499C20 9.6499 21.8 8.94995 24 8.94995C26.2 8.94995 28 9.6499 29.4 11.0499C30.8 12.45 31.5 14.25 31.5 16.45C31.5 18.6499 30.8 20.45 29.4 21.85C28 23.25 26.2 23.95 24 23.95ZM8 37L8 35.2999C8 34.0333 8.31665 32.95 8.94995 32.0499C9.58337 31.1499 10.4 30.4667 11.4 30C13.6333 29 15.775 28.25 17.825 27.75C19.875 27.25 21.9333 27 24 27C26.0667 27 28.1167 27.2583 30.15 27.7749C32.1833 28.2916 34.3153 29.0365 36.546 30.0096C37.5894 30.4805 38.4259 31.1633 39.0555 32.058C39.6852 32.9526 40 34.0333 40 35.2999L40 37C40 37.825 39.7063 38.5312 39.1188 39.1187C38.5312 39.7062 37.825 40 37 40L11 40C10.175 40 9.46875 39.7062 8.88123 39.1187C8.2937 38.5312 8 37.825 8 37ZM11 37L37 37L37 35.2999C37 34.7666 36.8417 34.2583 36.525 33.7749C36.2084 33.2916 35.8167 32.9332 35.35 32.7C33.2167 31.6666 31.2667 30.9583 29.5 30.575C27.7333 30.1917 25.9 30 24 30C22.1 30 20.25 30.1917 18.45 30.575C16.65 30.9583 14.7 31.6666 12.6 32.7C12.1333 32.9332 11.75 33.2916 11.45 33.7749C11.15 34.2583 11 34.7666 11 35.2999L11 37ZM24 20.95C25.3 20.95 26.375 20.5249 27.225 19.6749C28.075 18.825 28.5 17.75 28.5 16.45C28.5 15.1499 28.075 14.075 27.225 13.225C26.375 12.375 25.3 11.95 24 11.95C22.7 11.95 21.625 12.375 20.775 13.225C19.925 14.075 19.5 15.1499 19.5 16.45C19.5 17.75 19.925 18.825 20.775 19.6749C21.625 20.5249 22.7 20.95 24 20.95Z" fill="#CCC5B9" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
{/* Код для svg */}
</a>
<form className="header__geolocation-form">
<button>
{/* Код для svg */}
<svg width="48.000000" height="48.000000" viewBox="0 0 48 48" fill="none">
<desc>
Created with Pixso.
</desc>
<defs>
<clipPath id="clip3_51">
<rect id="location_on_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="white" fill-opacity="0"/>
</clipPath>
</defs>
<rect id="location_on_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip3_51)">
<path id="Vector" d="M24 40.05C28.4333 36.0167 31.7084 32.3583 33.825 29.075C35.9417 25.7916 37 22.9 37 20.4C37 16.4736 35.7451 13.2588 33.2354 10.7552C30.7257 8.25171 27.6472 7 24 7C20.3528 7 17.2743 8.25171 14.7646 10.7552C12.2549 13.2588 11 16.4736 11 20.4C11 22.9 12.0834 25.7916 14.25 29.075C16.4166 32.3583 19.6666 36.0167 24 40.05ZM23.9875 43C23.6292 43 23.275 42.9417 22.925 42.825C22.575 42.7084 22.2667 42.5167 22 42.25C20.6 40.9833 19.0834 39.525 17.45 37.875C15.8167 36.225 14.3 34.45 12.9 32.55C11.5 30.65 10.3334 28.6666 9.40002 26.6C8.46667 24.5333 8 22.4667 8 20.4C8 15.4 9.60828 11.4166 12.825 8.44995C16.0416 5.48328 19.7667 4 24 4C28.2333 4 31.9584 5.48328 35.175 8.44995C38.3917 11.4166 40 15.4 40 20.4C40 22.4667 39.5333 24.5333 38.6 26.6C37.6666 28.6666 36.5 30.65 35.1 32.55C33.7 34.45 32.1833 36.225 30.55 37.875C28.9166 39.525 27.4 40.9833 26 42.25C25.7333 42.5167 25.4208 42.7084 25.0625 42.825C24.7042 42.9417 24.3458 43 23.9875 43ZM24.0044 23.5C24.9681 23.5 25.7916 23.1569 26.475 22.4706C27.1583 21.7843 27.5 20.9592 27.5 19.9956C27.5 19.0319 27.1569 18.2084 26.4706 17.525C25.7843 16.8417 24.9592 16.5 23.9956 16.5C23.0319 16.5 22.2084 16.8431 21.525 17.5294C20.8417 18.2157 20.5 19.0408 20.5 20.0044C20.5 20.9681 20.8431 21.7916 21.5294 22.475C22.2157 23.1583 23.0408 23.5 24.0044 23.5Z" fill="#CCC5B9" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
{/* Код для svg */}
</button>
</form>
<a href="/" className="header__info-a">
{/* Код для svg */}
<svg width="48.000000" height="48.000000" viewBox="0 0 48 48" fill="none">
<desc>
Created with Pixso.
</desc>
<defs>
<clipPath id="clip6_70">
<rect id="info_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="white" fill-opacity="0"/>
</clipPath>
</defs>
<rect id="info_FILL0_wght400_GRAD0_opsz48 1" width="48.000000" height="48.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip6_70)">
<path id="Vector" d="M24.1587 34C24.5863 34 24.9417 33.8562 25.225 33.5687C25.5083 33.2812 25.65 32.925 25.65 32.5L25.65 23.5C25.65 23.075 25.5054 22.7188 25.2163 22.4313C24.927 22.1438 24.5687 22 24.1412 22C23.7137 22 23.3583 22.1438 23.075 22.4313C22.7916 22.7188 22.65 23.075 22.65 23.5L22.65 32.5C22.65 32.925 22.7946 33.2812 23.0837 33.5687C23.3729 33.8562 23.7313 34 24.1587 34ZM23.9991 18.3C24.4663 18.3 24.8583 18.1466 25.175 17.84C25.4917 17.5333 25.65 17.1533 25.65 16.7C25.65 16.2184 25.4919 15.8146 25.1759 15.4888C24.8599 15.163 24.4681 15 24.0009 15C23.5337 15 23.1417 15.163 22.825 15.4888C22.5083 15.8146 22.35 16.2184 22.35 16.7C22.35 17.1533 22.5081 17.5333 22.8241 17.84C23.1403 18.1466 23.5319 18.3 23.9991 18.3ZM24.0133 44C21.2555 44 18.6638 43.475 16.2383 42.425C13.8127 41.375 11.6917 39.9417 9.875 38.125C8.05835 36.3083 6.625 34.186 5.57495 31.7579C4.52502 29.33 4 26.7356 4 23.975C4 21.2144 4.52502 18.62 5.57495 16.192C6.625 13.764 8.05835 11.65 9.875 9.84998C11.6917 8.05005 13.814 6.625 16.2421 5.57495C18.67 4.52502 21.2644 4 24.025 4C26.7856 4 29.38 4.52502 31.808 5.57495C34.236 6.625 36.35 8.05005 38.15 9.84998C39.95 11.65 41.375 13.7667 42.425 16.2C43.475 18.6333 44 21.2289 44 23.9867C44 26.7445 43.475 29.3362 42.425 31.7617C41.375 34.1873 39.95 36.3053 38.15 38.1158C36.35 39.9263 34.2333 41.3596 31.8 42.4158C29.3667 43.4719 26.7711 44 24.0133 44ZM24.025 41C28.7417 41 32.75 39.3417 36.05 36.025C39.35 32.7084 41 28.6917 41 23.975C41 19.2583 39.3531 15.25 36.0594 11.95C32.7656 8.65002 28.7458 7 24 7C19.3 7 15.2916 8.64685 11.975 11.9406C8.65833 15.2344 7 19.2542 7 24C7 28.7 8.65833 32.7084 11.975 36.025C15.2916 39.3417 19.3083 41 24.025 41Z" fill="#CCC5B9" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
{/* Код для svg */}
</a>
</header>
)
}

4
reactapp/src/components/pages/HomePage.jsx
View File

@@ -1,6 +1,6 @@
export default function HomePage() {
return(
<>
</>
<section>
</section>
)
}

2
reactapp/src/index.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './style.scss';
import './index.scss';
import './reset.css';
import App from './App';

80
reactapp/src/index.scss Normal file
View File

@@ -0,0 +1,80 @@
$background-color: #252422;
$main-color: #CCC5B9;
$accent-color: #EB5E28;
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
body {
background-color: $background-color;
font-family: 'Montserrat', sans-serif;
}
.header {
width: 100%;
height: 80px;
position: fixed;
display: flex !important;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 40px 0px 40px;
background-color: $background-color;
.header__title {
color: white;
font-size: 24px;
font-weight: 600;
line-height: 29px;
letter-spacing: 0%;
text-align: left;
}
.catalog-button {
width: 150px;
height: 50px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px 5px 0px 5px;
border-radius: 10px;
background-color: $main-color;
color: black;
font-size: 24px;
font-weight: 600;
line-height: 29px;
letter-spacing: 0%;
text-align: left;
}
.search-form {
width: 60%;
.search-form__field {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 20px 0px 20px;
box-sizing: border-box;
border: 2px solid $main-color;
border-radius: 10px;
.search-form__input {
width: 100%;
color: white;
font-family: Montserrat;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0%;
text-align: left;
}
.search-form__input::-webkit-input-placeholder {
color: $main-color
}
}
}
}

7
reactapp/src/reset.css
View File

@@ -74,6 +74,13 @@ button:focus, button:active {
outline: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
button::-moz-focus-inner {
padding: 0;
border: 0;