4 лаба
This commit is contained in:
parent
2f2b44b180
commit
7dd1dda5d0
20
laba4/laba4React/.eslintrc.cjs
Normal file
20
laba4/laba4React/.eslintrc.cjs
Normal file
@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
24
laba4/laba4React/.gitignore
vendored
Normal file
24
laba4/laba4React/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
13
laba4/laba4React/index.html
Normal file
13
laba4/laba4React/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Apple Store</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
14
laba4/laba4React/jsconfig.json
Normal file
14
laba4/laba4React/jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "react",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"**/node_modules/*"
|
||||
]
|
||||
}
|
||||
4344
laba4/laba4React/package-lock.json
generated
Normal file
4344
laba4/laba4React/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
laba4/laba4React/package.json
Normal file
32
laba4/laba4React/package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "laba4react",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.3.2",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.9.1",
|
||||
"react-bootstrap-icons": "^1.10.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
}
|
||||
1
laba4/laba4React/public/vite.svg
Normal file
1
laba4/laba4React/public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
42
laba4/laba4React/src/App.css
Normal file
42
laba4/laba4React/src/App.css
Normal file
@ -0,0 +1,42 @@
|
||||
/* #root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
} */
|
||||
41
laba4/laba4React/src/App.jsx
Normal file
41
laba4/laba4React/src/App.jsx
Normal file
@ -0,0 +1,41 @@
|
||||
// import { useState } from 'react'
|
||||
// import reactLogo from './assets/react.svg'
|
||||
// import viteLogo from '/vite.svg'
|
||||
// import './App.css'
|
||||
|
||||
// function App() {
|
||||
// // const [count, setCount] = useState(0)
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// <div>Привет</div>
|
||||
// </>
|
||||
// )
|
||||
// }
|
||||
|
||||
// export default App
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container } from 'react-bootstrap';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import './App.css';
|
||||
import Footer from './components/footer/Footer.jsx';
|
||||
import Navigation from './components/navigation/Navigation.jsx';
|
||||
|
||||
const App = ({ routes }) => {
|
||||
return (
|
||||
<>
|
||||
<Navigation routes={routes}></Navigation>
|
||||
<Container className='p-2' as="main" fluid>
|
||||
<Outlet />
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
App.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default App;
|
||||
BIN
laba4/laba4React/src/assets/fon7.jpg
Normal file
BIN
laba4/laba4React/src/assets/fon7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 867 KiB |
1
laba4/laba4React/src/assets/icons8-ос-mac (4).svg
Normal file
1
laba4/laba4React/src/assets/icons8-ос-mac (4).svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="#a8a9ba" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 44.527344 34.75 C 43.449219 37.144531 42.929688 38.214844 41.542969 40.328125 C 39.601563 43.28125 36.863281 46.96875 33.480469 46.992188 C 30.46875 47.019531 29.691406 45.027344 25.601563 45.0625 C 21.515625 45.082031 20.664063 47.03125 17.648438 47 C 14.261719 46.96875 11.671875 43.648438 9.730469 40.699219 C 4.300781 32.429688 3.726563 22.734375 7.082031 17.578125 C 9.457031 13.921875 13.210938 11.773438 16.738281 11.773438 C 20.332031 11.773438 22.589844 13.746094 25.558594 13.746094 C 28.441406 13.746094 30.195313 11.769531 34.351563 11.769531 C 37.492188 11.769531 40.8125 13.480469 43.1875 16.433594 C 35.421875 20.691406 36.683594 31.78125 44.527344 34.75 Z M 31.195313 8.46875 C 32.707031 6.527344 33.855469 3.789063 33.4375 1 C 30.972656 1.167969 28.089844 2.742188 26.40625 4.78125 C 24.878906 6.640625 23.613281 9.398438 24.105469 12.066406 C 26.796875 12.152344 29.582031 10.546875 31.195313 8.46875 Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
BIN
laba4/laba4React/src/assets/iphone_14_pro.png
Normal file
BIN
laba4/laba4React/src/assets/iphone_14_pro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 KiB |
BIN
laba4/laba4React/src/assets/support.jpg
Normal file
BIN
laba4/laba4React/src/assets/support.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 618 KiB |
7
laba4/laba4React/src/components/footer/Footer.css
Normal file
7
laba4/laba4React/src/components/footer/Footer.css
Normal file
@ -0,0 +1,7 @@
|
||||
.my-footer {
|
||||
background-color: #333333;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
11
laba4/laba4React/src/components/footer/Footer.jsx
Normal file
11
laba4/laba4React/src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import './Footer.css';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
kozlovanastya12861@gmail.com
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
42
laba4/laba4React/src/components/navigation/Navigation.css
Normal file
42
laba4/laba4React/src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,42 @@
|
||||
|
||||
/* .containerNavigation {
|
||||
display: flex;
|
||||
margin-left: 140px;
|
||||
margin-right: 140px;
|
||||
justify-content: space-between;
|
||||
} */
|
||||
|
||||
/* .name1 {
|
||||
margin-right: 140px;
|
||||
margin-left: 140px;
|
||||
} */
|
||||
|
||||
/* .container-fluid {
|
||||
margin-right: 140px;
|
||||
margin-left: 140px;
|
||||
} */
|
||||
.my-navbar .navbar .navbar-expand-md .navbar-light .bg-dark {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.my-navbar {
|
||||
background-color: #333333 !important;
|
||||
}
|
||||
.my-navbar .logo {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
43
laba4/laba4React/src/components/navigation/Navigation.jsx
Normal file
43
laba4/laba4React/src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container, Nav, Navbar } from 'react-bootstrap';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import Logo1 from '../../assets/icons8-ос-mac (4).svg';
|
||||
import './Navigation.css';
|
||||
|
||||
const Navigation = ({ routes }) => {
|
||||
const location = useLocation();
|
||||
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||
|
||||
return (
|
||||
<header>
|
||||
<Navbar expand='md' bg='dark' data-bs-theme="dark" className='my-navbar'>
|
||||
<Container fluid>
|
||||
|
||||
|
||||
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
|
||||
<img src={Logo1} className="logo me-5" alt="логотип" />
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls='main-navbar' />
|
||||
<Navbar.Collapse id='main-navbar'>
|
||||
<Nav className='me-auto link' activeKey={location.pathname}>
|
||||
{
|
||||
pages.map((page) =>
|
||||
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
|
||||
{page.title}
|
||||
</Nav.Link>)
|
||||
}
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
|
||||
</Container>
|
||||
</Navbar >
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
554
laba4/laba4React/src/index.css
Normal file
554
laba4/laba4React/src/index.css
Normal file
@ -0,0 +1,554 @@
|
||||
.p-2 {
|
||||
padding: .0rem !important;
|
||||
}
|
||||
|
||||
|
||||
/* page1 */
|
||||
|
||||
.index-page {
|
||||
background-image: url("/src/assets/fon7.jpg");
|
||||
background-size: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
}
|
||||
.title {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.title>p {
|
||||
font-weight: 700;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
Justify-content: flex-end;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
/* page 2 о нас */
|
||||
|
||||
.about-us-section {
|
||||
height: 100vh;
|
||||
background-color: #000000;
|
||||
display: flex;
|
||||
}
|
||||
.containerAboutAs {
|
||||
margin-left: 140px;
|
||||
margin-right: 140px;
|
||||
}
|
||||
.group-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.up-text {
|
||||
margin-top: 90px;
|
||||
}
|
||||
|
||||
.up-text>h1 {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
.down-text {
|
||||
display: flex;
|
||||
margin-top: 75px;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
|
||||
.down-text>h3 {
|
||||
margin-right: 100px;
|
||||
font-size: 35px;
|
||||
min-width: 360px;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.down-text>p {
|
||||
max-width: 630px;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
/* каталог */
|
||||
|
||||
.forDispley {
|
||||
display: block;
|
||||
}
|
||||
.catalog-section {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.title-one>h2 {
|
||||
font-size: 35px;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
/* font-family: Verdana, Geneva, Tahoma, sans-serif; */
|
||||
}
|
||||
.main-margin-for-card {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 50px;
|
||||
display: flex;
|
||||
}
|
||||
.col-md-6 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.col-lg-4 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.col-xxl-3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.card {
|
||||
align-items: center;
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
.img-wight {
|
||||
width: auto;
|
||||
height: 170px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
max-width: 160px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
max-width: 160px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
.what-buy {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.what-buy>h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.what-buy>p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.buttom-admin {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.button-edit {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: none;
|
||||
background-color: #ffffff;
|
||||
background-image: url('icons8-редактировать-64.png');
|
||||
background-size: cover;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
.button-delete {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: none;
|
||||
background-color: #ffffff;
|
||||
background-image: url('icons8-удалить-64.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* войти */
|
||||
.title-sign {
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
font-weight: 500;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.sing-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.border-sin {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 500px;
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
.krug {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.krug>.btn-primary {
|
||||
border-radius: 20px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.string {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.string>.nav-link {
|
||||
color: #0d6efd;
|
||||
font-weight: 700;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.krug2 {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.krug2>.btn-primary {
|
||||
border-radius: 20px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
|
||||
/* поддержка */
|
||||
|
||||
.support-section {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.top-picture {
|
||||
background-image: url("/src/assets/support.jpg");
|
||||
background-size: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 450px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
}
|
||||
.title-support {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.title-support>p {
|
||||
font-weight: 500;
|
||||
font-size: 50px;
|
||||
color:#ffffff;
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
.conteiner-support {
|
||||
margin-top: 40px;
|
||||
max-width: 450px;
|
||||
}
|
||||
.call-as-about {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* страница админа новая */
|
||||
#image-preview {
|
||||
width: 200px;
|
||||
}
|
||||
/* .mainAdmin {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
margin-top: 100px;
|
||||
} */
|
||||
.containerTable {
|
||||
height: 100vh;
|
||||
margin-right: 140px;
|
||||
margin-left: 140px;
|
||||
}
|
||||
|
||||
.needs-validation {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-delete-admin {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
background-color: #ffffff;
|
||||
background-image: url('icons8-удалить-64.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.down-text>h3 {
|
||||
margin-right: 70px;
|
||||
font-size: 30px;
|
||||
min-width: 310px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.down-text>h3 {
|
||||
margin-right: 50px;
|
||||
font-size: 25px;
|
||||
min-width: 280px;
|
||||
}
|
||||
.up-text>h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.down-text {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.down-text>p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.containerAboutAs {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.containerTable {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.title>p {
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
}
|
||||
.navbar-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.what-buy {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
width: 300px;
|
||||
}
|
||||
.what-buy>h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.what-buy>p {
|
||||
font-size: 18px;
|
||||
}
|
||||
form {
|
||||
width: 400px;
|
||||
}
|
||||
.up-text {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.up-text>h1 {
|
||||
font-size: 50px;
|
||||
}
|
||||
.down-text>h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.title-support>p {
|
||||
font-size: 33px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 570px) {
|
||||
.title-support>p {
|
||||
font-size: 30px;
|
||||
}
|
||||
.conteiner-support {
|
||||
max-width: 350px;
|
||||
}
|
||||
.call-as-about {
|
||||
font-size: 20px;
|
||||
}
|
||||
.content {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.navbar-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.what-buy {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 35px;
|
||||
width: 250px;
|
||||
}
|
||||
.what-buy>h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.what-buy>p {
|
||||
font-size: 15px;
|
||||
}
|
||||
form {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.krug2>.btn-primary {
|
||||
width: 130px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.up-text {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.up-text>h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
.down-text>h3 {
|
||||
font-size: 20px;
|
||||
min-width: 50px;
|
||||
}
|
||||
.down-text>p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.krug>.btn-primary {
|
||||
width: 100px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.string {
|
||||
font-size: 14px;
|
||||
}
|
||||
.form-admin {
|
||||
width: 200px;
|
||||
}
|
||||
.title-sign {
|
||||
font-size: 18px;
|
||||
}
|
||||
.title-support>p {
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.conteiner-support {
|
||||
max-width: 260px;
|
||||
}
|
||||
.call-as-about {
|
||||
font-size: 18px;
|
||||
}
|
||||
.content {
|
||||
font-size: 14px;
|
||||
}
|
||||
.what-buy>p {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 325px) {
|
||||
.title>p {
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.what-buy {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 35px;
|
||||
width: 200px;
|
||||
}
|
||||
.what-buy>h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.what-buy>p {
|
||||
font-size: 13px;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
width: 230px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
.card>img {
|
||||
width: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 280px) {
|
||||
.card {
|
||||
width: 140px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card>img {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.what-buy {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.form-admin {
|
||||
width: 150px;
|
||||
}
|
||||
.up-text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.up-text>h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.down-text>h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.down-text>p {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
67
laba4/laba4React/src/main.jsx
Normal file
67
laba4/laba4React/src/main.jsx
Normal file
@ -0,0 +1,67 @@
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
|
||||
import App from './App.jsx';
|
||||
import './index.css';
|
||||
import ErrorPage from './pages/ErrorPage.jsx';
|
||||
import Page1 from './pages/Page1.jsx';
|
||||
import Page2 from './pages/Page2.jsx';
|
||||
import Page3 from './pages/Page3.jsx';
|
||||
import Page4support from './pages/Page4support.jsx';
|
||||
import Page5signin from './pages/Page5signin.jsx';
|
||||
import Page6singup from './pages/Page6singup.jsx';
|
||||
|
||||
import Page0admin from './pages/Page0admin..jsx';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
index: true,
|
||||
path: '/',
|
||||
element: <Page1 />
|
||||
},
|
||||
{
|
||||
path: '/Page0admin',
|
||||
element: <Page0admin />,
|
||||
title: 'Админ',
|
||||
},
|
||||
{
|
||||
path: '/page2',
|
||||
element: <Page2 />,
|
||||
title: 'О нас',
|
||||
},
|
||||
{
|
||||
path: '/page3',
|
||||
element: <Page3 />,
|
||||
title: 'Каталог',
|
||||
},
|
||||
{
|
||||
path: '/Page4support',
|
||||
element: <Page4support />,
|
||||
title: 'Поддержка',
|
||||
},
|
||||
{
|
||||
path: '/Page5signin',
|
||||
element: <Page5signin />,
|
||||
title: 'Войти',
|
||||
},
|
||||
{
|
||||
path: '/Page6singup',
|
||||
element: <Page6singup />,
|
||||
},
|
||||
];
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <App routes={routes} />,
|
||||
children: routes,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
]);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
19
laba4/laba4React/src/pages/ErrorPage.jsx
Normal file
19
laba4/laba4React/src/pages/ErrorPage.jsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Alert, Button, Container } from 'react-bootstrap';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const ErrorPage = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Container fluid className="p-2 row justify-content-center">
|
||||
<Container className='col-md-6'>
|
||||
<Alert variant="danger">
|
||||
Страница не найдена
|
||||
</Alert>
|
||||
<Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
|
||||
</Container>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorPage;
|
||||
31
laba4/laba4React/src/pages/Page0admin..jsx
Normal file
31
laba4/laba4React/src/pages/Page0admin..jsx
Normal file
@ -0,0 +1,31 @@
|
||||
import { Table } from 'react-bootstrap';
|
||||
const Page0admin = () => {
|
||||
return (
|
||||
|
||||
<div className="containerTable">
|
||||
<div className="btn-group" role="group">
|
||||
<button id="items-add" className="btn btn-primary">Добавить Товар</button>
|
||||
</div>
|
||||
|
||||
<Table className="mt-2" striped>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">№</th>
|
||||
<th scope="col" className="w-25">Категория</th>
|
||||
<th scope="col" className="w-25">Oпция</th>
|
||||
<th scope="col" className="w-25">Товар</th>
|
||||
<th scope="col" className="w-25">Цвет</th>
|
||||
<th scope="col" className="w-25">Цена</th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col"></th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page0admin;
|
||||
15
laba4/laba4React/src/pages/Page1.jsx
Normal file
15
laba4/laba4React/src/pages/Page1.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
const Page1= () => {
|
||||
return (
|
||||
<>
|
||||
<section className="index-section">
|
||||
<div className="index-page">
|
||||
<div className="title">
|
||||
<p>APPLE</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page1;
|
||||
28
laba4/laba4React/src/pages/Page2.jsx
Normal file
28
laba4/laba4React/src/pages/Page2.jsx
Normal file
@ -0,0 +1,28 @@
|
||||
|
||||
|
||||
const Page2 = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="about-us-section">
|
||||
<div className="containerAboutAs">
|
||||
<div className="group-text">
|
||||
<div className="up-text">
|
||||
<h1>О нас</h1>
|
||||
</div>
|
||||
<div className="down-text">
|
||||
<h3>Магазины в офлайне и в онлайне</h3>
|
||||
<p>Apple помогает оптимизировать работу крупнейших розничных компаний — от кассовых операций до управления на
|
||||
высшем уровне. Устройства Apple и мощную платформу приложений просто использовать и внедрять. А для
|
||||
мобильных сотрудников они предоставляют эффективные инструменты, которые помогают наладить рабочий процесс в
|
||||
магазине и предложить каждому посетителю качественное обслуживание, чтобы выгодно отличаться от конкурентов.
|
||||
Передовые функции безопасности, экосистема надёжных корпоративных партнёров, технологии машинного обучения и
|
||||
дополненная реальность на устройствах — будущее розничной торговли строится на платформе Apple.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page2;
|
||||
102
laba4/laba4React/src/pages/Page3.jsx
Normal file
102
laba4/laba4React/src/pages/Page3.jsx
Normal file
@ -0,0 +1,102 @@
|
||||
import cardOne from '../assets/iPhone_14_pro.png';
|
||||
|
||||
const Page3= () => {
|
||||
return (
|
||||
<>
|
||||
<section className="catalog-section">
|
||||
|
||||
|
||||
<div className="containerAboutAs">
|
||||
|
||||
<div className="title-one">
|
||||
<h2>Наши продукты</h2>
|
||||
</div>
|
||||
|
||||
<div className="row gx-5">
|
||||
|
||||
<div className="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<img src={cardOne} className="img-wight"/>
|
||||
<h5 className="card-title">iPhone 13 Pro</h5>
|
||||
<p className="card-text">125 999 ₽</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<img src={cardOne} className="img-wight"/>
|
||||
<h5 className="card-title">iPhone 13 Pro</h5>
|
||||
<p className="card-text">125 999 ₽</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<img src={cardOne} className="img-wight"/>
|
||||
<h5 className="card-title">iPhone 13 Pro</h5>
|
||||
<p className="card-text">125 999 ₽</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<img src={cardOne} className="img-wight"/>
|
||||
<h5 className="card-title">iPhone 13 Pro</h5>
|
||||
<p className="card-text">125 999 ₽</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<img src={cardOne} className="img-wight"/>
|
||||
<h5 className="card-title">iPhone 13 Pro</h5>
|
||||
<p className="card-text">125 999 ₽</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<img src={cardOne} className="img-wight"/>
|
||||
<h5 className="card-title">iPhone 13 Pro</h5>
|
||||
<p className="card-text">125 999 ₽</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="forDispley">
|
||||
<div className="what-buy">
|
||||
<h3>Где купить?</h3>
|
||||
<p>Вы можете приобрести товар у реселлера или оператора
|
||||
сотовой связи. Выбирайте любой удобный вариант.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page3;
|
||||
26
laba4/laba4React/src/pages/Page4support.jsx
Normal file
26
laba4/laba4React/src/pages/Page4support.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
const Page4support= () => {
|
||||
return (
|
||||
<>
|
||||
<section className="support-section ">
|
||||
<div className="top-picture">
|
||||
<div className="title-support">
|
||||
<p>Служба поддержки Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="main">
|
||||
<div className="containerAboutAs">
|
||||
<div className="conteiner-support">
|
||||
<h3 className="call-as-about">Расскажите нам о проблеме</h3>
|
||||
<p className="content">
|
||||
Расскажите подробнее, и мы предложим лучшее решение. Напишите нам на электронную почту:
|
||||
applesupport@mail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page4support;
|
||||
31
laba4/laba4React/src/pages/Page5signin.jsx
Normal file
31
laba4/laba4React/src/pages/Page5signin.jsx
Normal file
@ -0,0 +1,31 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
||||
const Page5signin= () => {
|
||||
|
||||
return (
|
||||
<section className="sing-section">
|
||||
<div className="containerAboutAs">
|
||||
<div className="border-sin">
|
||||
<form>
|
||||
<p className="title-sign">Вход</p>
|
||||
<div className="mb-3">
|
||||
<label className="margin-admin">E-mail</label>
|
||||
<input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="margin-admin">Пароль</label>
|
||||
<input type="password" className="form-control" id="exampleInputPassword1"/>
|
||||
</div>
|
||||
<div className="krug">
|
||||
<button type="submit" className="btn btn-primary">Войти</button>
|
||||
</div>
|
||||
<p className="string">У вас еще нет аккаунта? <Link to="/Page6singup">Зарегистрироваться</Link></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page5signin;
|
||||
35
laba4/laba4React/src/pages/Page6singup.jsx
Normal file
35
laba4/laba4React/src/pages/Page6singup.jsx
Normal file
@ -0,0 +1,35 @@
|
||||
const Page6signup= () => {
|
||||
|
||||
return (
|
||||
<section className="sing-section">
|
||||
<div className="containerAboutAs">
|
||||
<div className="border-sin">
|
||||
<form>
|
||||
<p className="title-sign">Регистрация</p>
|
||||
<div className="mb-3">
|
||||
<label className="margin-admin">Логин</label>
|
||||
<input className="form-control"/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="margin-admin">E-mail</label>
|
||||
<input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="margin-admin">Пароль</label>
|
||||
<input type="password" className="form-control" id="exampleInputPassword1"/>
|
||||
</div>
|
||||
|
||||
<div className="krug2">
|
||||
<button type="submit" className="btn btn-primary">Зарегистрироваться</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page6signup;
|
||||
7
laba4/laba4React/vite.config.js
Normal file
7
laba4/laba4React/vite.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
BIN
laba4/отчет 4.docx
Normal file
BIN
laba4/отчет 4.docx
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user