YakovlevMaxim/PIbd-21_Yakovlev_M.G_IP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lab3

Browse Source
This commit is contained in:
Максим Яковлев 2023-12-08 10:58:54 +04:00
parent f7f945f7d7
commit 6d73c6c0a7
37 changed files with 5418 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
Lab4/Lab4/.eslintrc.cjs Normal file
View 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
Lab4/Lab4/.gitignore vendored Normal file
View 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?

8
Lab4/Lab4/README.md Normal file
View File

@ -0,0 +1,8 @@
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

14
Lab4/Lab4/index.html Normal file
View File

@ -0,0 +1,14 @@
<html lang="ru" data-bs-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gamepad.ru</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

4344
Lab4/Lab4/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
Lab4/Lab4/package.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "lec4",
"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
Lab4/Lab4/public/vite.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

0
Lab4/Lab4/src/App.css Normal file
View File

24
Lab4/Lab4/src/App.jsx Normal file
View File

@ -0,0 +1,24 @@
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 as="main" fluid>
<Outlet />
</Container>
<Footer />
</>
);
};
App.propTypes = {
routes: PropTypes.array,
};
export default App;

BIN
Lab4/Lab4/src/assets/GoW.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
Lab4/Lab4/src/assets/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
Lab4/Lab4/src/assets/eldenring.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
Lab4/Lab4/src/assets/gameLog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
Lab4/Lab4/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
Lab4/Lab4/src/assets/poe.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
Lab4/Lab4/src/assets/risk-of-rain-returns.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
Lab4/Lab4/src/assets/sekiro.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
Lab4/Lab4/src/assets/terraria.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

25
Lab4/Lab4/src/components/banner/Banner.css Normal file
View File

@ -0,0 +1,25 @@
#banner {
margin: 2px;
display: flex;
align-items: center;
flex-direction: column;
}
#banner img {
border: 1px solid #3c3c3f;
border-radius: 5px;
}
#banner img.banner-show {
width: 100%;
opacity: 1;
transition: opacity 1s, visibility 0s;
}
#banner img.banner-hide {
height: 0;
width: 0;
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 0s 1s;
}

41
Lab4/Lab4/src/components/banner/Banner.jsx Normal file
View File

@ -0,0 +1,41 @@
import { useEffect, useState } from "react";
import banner1 from '../../assets/poe.jpg';
import banner2 from '../../assets/risk-of-rain-returns.jpg';
import banner3 from '../../assets/sekiro.jpg';
import banner4 from '../../assets/eldenring.jpg';
import './Banner.css';
const Banner = () => {
const [currentBanner, setCurrentBanner] = useState(0);
const banners = [banner1, banner2, banner3, banner4];
const getBannerClass = (index) => {
return currentBanner === index ? 'banner-show w-100' : 'banner-hide';
};
useEffect(() => {
const bannerInterval = setInterval(
() => {
console.info('Banner changed');
let current = currentBanner + 1;
if(current === banners.length){
current = 0;
}
setCurrentBanner(current);
},
5000,
);
return () => clearInterval(bannerInterval);
});
return (
<div id="banner">
{
banners.map((banner, index) =>
<img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
}
</div>
);
};
export default Banner;

5
Lab4/Lab4/src/components/footer/Footer.css Normal file
View File

@ -0,0 +1,5 @@
footer {
background-color: #FF2E63;
color:black;
height:32px;
}

13
Lab4/Lab4/src/components/footer/Footer.jsx Normal file
View File

@ -0,0 +1,13 @@
import './Footer.css';
const Footer = () => {
const year = new Date().getFullYear();
return (
<footer className="footer d-flex flex-shrink-0 justify-content-end">
GAMEPAD.RU © {year}
</footer>
);
};
export default Footer;

12
Lab4/Lab4/src/components/navigation/Navigation.css Normal file
View File

@ -0,0 +1,12 @@
.my-navbar {
background-color: #08D9D6 !important;
}
.my-navbar .link a:hover {
text-decoration: underline !important;
}
.my-navbar .logo {
width: 26px;
height: 26px;
}

41
Lab4/Lab4/src/components/navigation/Navigation.jsx Normal file
View File

@ -0,0 +1,41 @@
import PropTypes from 'prop-types';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { Controller } from 'react-bootstrap-icons';
import { Link, useLocation } from 'react-router-dom';
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 ?? '/'}>
<Controller className='bi-controller align-top me-1 logo' />
GAMEPAD.RU
</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;

153
Lab4/Lab4/src/index.css Normal file
View File

@ -0,0 +1,153 @@
header nav{
background-color: #08D9D6;
color: black;
}
.category{
width:55%;
}
@media (min-width:768px){
.im{
display: none;
}
}
@media (max-width:900px){
.text{
padding-left: 100px;
}
.div{
display:none;
}
.ots {
align-items: center;
align-content: center;
justify-content: center;
}
.img{
width:100%;
}
}
@media (max-width:600px){
.categ{
display:none;
}
.imrow{
width:250px;
}
.destext{
width:200px;
height: 70px;
overflow: auto;
}
.cart{
display: none;
}
}
@media (max-width:1500px){
.category{
width:65%;
}
}
@media (max-width:1250px){
.search{
max-width: 100%;
}
.category{
width: 75%;
}
}
@media (max-width:830px){
.category{
width:100%;
}
}
@media (max-width:1040px){
.images{
display: none;
}
.cata{
gap: 4px;
grid-template-columns: 3fr;
}
.imrow{
width:100%;
}
}
.textmain
header nav a:hover{
text-decoration: underline;
}
html, body {
background-color: #252A34;
height: 100%;
color:white;
}
footer {
background-color: #FF2E63;
color:black;
height:32px;
}
.push {
height: 32px;
}
center {
width: 900px;
margin: 0 auto ;
background-color: #353b47;
}
.main {
background-color: #353b47;
color:white;
max-width:1000px;
margin: 0 auto -32px;
}
.cost-input {
width:80px;
border-radius: 10px;
}
.search-input{
border-radius: 15px;
width: 100%;
}
.select {
border-radius: 10px;
color: white;
border:1px;
}
.disc{
border: 1px solid black;
line-height: 2.5;
max-width:360px;
border-radius: 10px;
}
.textbx {
border-radius: 10px;
border: 1px;
}
input[type="email"]::placeholder {color: grey;}
.check {
border:1px;
}
.sign-form{
padding-top:25%;
width: 200px;
}
.but{
padding-bottom: 200px;
}

72
Lab4/Lab4/src/main.jsx Normal file
View File

@ -0,0 +1,72 @@
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 Page4 from './pages/Page4.jsx';
import Page5 from './pages/Page5.jsx';
import Reg from './pages/Reg.jsx';
import Addgame from './pages/AddGame.jsx';
import PersonalAccount from './pages/PersonalAccount.jsx';
const routes = [
{
index: true,
path: '/',
element: <Page1 />,
title: 'Главная страница',
},
{
path: '/page2',
element: <Page2 />,
title: 'Каталог',
},
{
path: '/page3',
element: <Page3 />,
title: 'Новинки',
},
{
path: '/page4',
element: <Page4 />,
title: 'Корзина',
},
{
path: '/page5',
element: <Page5 />,
title: 'Личный кабинет',
},
{
path: '/reg',
element: <Reg />,
},
{
path: '/addgame',
element: <Addgame />,
},
{
path: '/personalaccount',
element: <PersonalAccount />,
},
];
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>,
);

56
Lab4/Lab4/src/pages/AddGame.jsx Normal file
View File

@ -0,0 +1,56 @@
import './index.css';
import {useState} from 'react';
import { Form } from 'react-bootstrap';
const AddGame = () => {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return(
<>
<div className="main d-flex mt-0 row pt-3 ps-3 ">
<div className="mb-0 h4 mx-auto text-center">Настройка поста</div>
<div className="text-center p-3">
<img id="image-preview" src="https://via.placeholder.com/450x250" alt="placeholder" width="50%" accept="image/*" />
</div>
<Form id="items-form" validated={validated} onSubmit={handleSubmit}>
<div className="w-50">
<Form.Label htmlFor="image">Изображение</Form.Label>
<Form.Control id="image" type="file" accept="image/*" className="col-md-4 form-control" name="image" />
</div>
<div className="w-25">
<Form.Label htmlFor="item">Вид товара</Form.Label>
<select id="item" className="form-select" name="selected" required></select>
</div>
<div className="w-25">
<Form.Label htmlFor="genre">Жанр</Form.Label>
<select id="genre" className="form-select" name="selectGen" required></select>
</div>
<div>
<Form.Label>Цена</Form.Label>
<Form.Control id="price" type="number" className="form-control w-25" min="100.00" step="0.50" required />
</div>
<div>
<Form.Label>Описание</Form.Label>
<Form.Control as="textarea" id="description" cols="70" rows={6} className="w-50" name="description" required></Form.Control>
</div>
<div className="text-center py-4">
<a href="/page3.html" className="btn btn-primary">Назад</a>
<button className="btn btn-primary" type="submit">Сохранить</button>
</div>
</Form>
</div>
</>
);
};
export default AddGame;

19
Lab4/Lab4/src/pages/ErrorPage.jsx Normal file
View 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;

66
Lab4/Lab4/src/pages/Page1.jsx Normal file
View File

@ -0,0 +1,66 @@
import poeImage from '../assets/poe.jpg';
import './index.css';
const Page1 = () => {
return (
<>
<main>
<div className="main flex-column mx-auto">
<div className="row mx-auto">
<div className="img pt-4 ps-4 mt-4 col-8">
<img className="img" src={poeImage} width="100%" />
</div>
<div className="pe-3 flex-column div col-4">
<div className="pt-4 ps-2">Популярные новинки:</div>
<div><img className="p-2" src={poeImage} width="100%" /></div>
<div><img className="p-2" src={poeImage} width="100%" /></div>
</div>
</div>
<div className="row mx-auto">
<div className="flex-column pt-3 col-2 categ">
<div className="ps-3 pb-3"><i className="bi bi-dpad"></i>Жанры:</div>
<div className="ps-4 pb-3">Шутеры</div>
<div className="ps-4 pb-3">Экшен</div>
<div className="ps-4 pb-3">Приключения</div>
<div className="ps-4 pb-3">Выживание</div>
<div className="ps-4 pb-3">Стратегии</div>
<div className="ps-4 pb-3">Ролевые</div>
<div className="ps-4 pb-3">Симуляторы</div>
<div className="ps-4 pb-3">Аркады</div>
</div>
<div className="flex-column pb-4 col">
<div className="pt-3 ps-4">
<div className="row">
<div className="col-4 pe-0"> <img src={poeImage} width="100%" /></div>
<div className="col my-auto destext">Path of Exile - это сетевая ролевая игра активного действия в мрачном колдовском мире Рэкласта. Игра полностью бесплатна.</div>
</div>
</div>
<div className="pt-3 ps-4">
<div className="row">
<div className="col-4 pe-0"> <img src={poeImage} width="100%" /></div>
<div className="col my-auto destext">Path of Exile - это сетевая ролевая игра активного действия в мрачном колдовском мире Рэкласта. Игра полностью бесплатна.</div>
</div>
</div>
<div className="pt-3 ps-4">
<div className="row">
<div className="col-4 pe-0"> <img src={poeImage} width="100%" /></div>
<div className="col my-auto destext">Path of Exile - это сетевая ролевая игра активного действия в мрачном колдовском мире Рэкласта. Игра полностью бесплатна.</div>
</div>
</div>
<div className="pt-3 ps-4">
<div className="row">
<div className="col-4 pe-0"> <img src={poeImage} width="100%" /></div>
<div className="col my-auto destext">Path of Exile - это сетевая ролевая игра активного действия в мрачном колдовском мире Рэкласта. Игра полностью бесплатна.</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div className='push'></div>
</>
);
};
export default Page1;

65
Lab4/Lab4/src/pages/Page2.jsx Normal file
View File

@ -0,0 +1,65 @@
import './index.css';
const Page2 = () =>{
return(
<>
<div className="row mx-auto">
<div className="flex-column ps-5 col-md-3">
<div className="pt-5">Цена:</div>
<div className="row">
<div className="pt-1 col"><input className="cost-input border-0" placeholder="От 100" /></div>
<div className="pt-1 col"><input className="cost-input border-0" placeholder=" До 1000" /></div>
</div>
<div className="row pt-3">
<div className="col-lg-6 ps-3">Платформа:</div>
<div className="col-2 ps-0"><i className="bi bi-windows"></i></div>
<div className="col-2 ps-0"><i className="bi bi-xbox"></i></div>
<div className="col-2 ps-0"><i className="bi bi-playstation"></i></div>
</div>
<div className="pt-3 ps-1">Категории:</div>
<div className="form-check pt-3 ps-5">
<input className="form-check-input" type="checkbox" id="check1" />
<label className="form-check-label" htmlFor="check1">Одиночный</label>
</div>
<div className="form-check pt-3 ps-5">
<input className="form-check-input" type="checkbox" id="check2" />
<label className="form-check-label" htmlFor="check2">Мультиплеер</label>
</div>
<div className="form-check pt-3 ps-5">
<input className="form-check-input" type="checkbox" id="check3" />
<label className="form-check-label" htmlFor="check3">Кооператив</label>
</div>
<div className="form-check pt-3 ps-5">
<input className="form-check-input" type="checkbox" id="check4" />
<label className="form-check-label" htmlFor="check4">Скидки</label>
</div>
</div>
<div className="col-6 category pb-4">
<form className="p-4 pb-0">
<input type="search" className="search form-control border-1 border-black search-input" placeholder="Поиск" />
</form>
<div className="p-3">Сбросить</div>
<div>
<div className="row mx-auto gx-1 pt-5">
<div className="col"><img className="mx-auto d-block" src="src/assets/poe.jpg" width="250px" /></div>
<div className="col cart"><img className="mx-auto d-block" src="src/assets/poe.jpg" width="250px" /></div>
<div className="col images "><img className="mx-auto d-block" src="src/assets/poe.jpg" width="250px" /></div>
</div>
<div className="row mx-auto gx-1 pt-3 ">
<div className="col "><img className="mx-auto d-block" src="src/assets/poe.jpg" width="250px" /></div>
<div className="col cart "><img className="mx-auto d-block" src="src/assets/poe.jpg" width="250px" /></div>
<div className="col images "><img className="mx-auto d-block" src="src/assets/poe.jpg" width="250px" /></div>
</div>
<div className="row mx-auto gx-1 pt-3 ">
<div className="col "><img className="mx-auto d-block" src="src/assets/poe.jpg" width="250px" /></div>
<div className="col cart"><img className="mx-auto d-block" src="src/assets/poe.jpg" width="250px" /></div>
<div className="col images "><img className="mx-auto d-block" src="src/assets/poe.jpg" width="250px" /></div>
</div>
</div>
</div>
</div>
</>
);
};
export default Page2;

41
Lab4/Lab4/src/pages/Page3.jsx Normal file
View File

@ -0,0 +1,41 @@
import './index.css';
import Banner from '../components/banner/Banner.jsx';
import { Link } from 'react-router-dom';
const Page3 = () => {
return (
<>
<div className=" main mx-auto">
<div className="flex-column">
<div className="btn-group p-3" role="group">
<Link className="btn btn-success" to="/AddGame">Добавить товар</Link>
</div>
<div className="p-2 h4">Новинки</div>
<div className="px-4">
<Banner />
</div>
<div className="d-flex flex-column p-3">
<table id="items-table" className=" align-top">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</>
);
};
export default Page3;
/*
<div className="row mx-auto gx-4">
<div className="px-4" id="banner">
<img className="banner-hide" src="images/risk-of-rain-returns.jpg" width="100%" alt="banner1" />
<img className="banner-hide" src="images/sekiro.jpg" width="100%" alt="banner1" />
<img className="banner-hide" src="images/eldenring.jpg" width="100%" alt="banner1" />
</div>
</div>
*/

63
Lab4/Lab4/src/pages/Page4.jsx Normal file
View File

@ -0,0 +1,63 @@
import './index.css';
import {useState} from 'react';
import { Form } from 'react-bootstrap';
const Page4 = () => {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if(form.checkValidity() === false){
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return(
<>
<div className="d-flex main justify-content-center">
<Form className="pe-4 pb-4" validated={validated} onSubmit={handleSubmit}>
<div className="h4 p-4">Оформление заказа</div>
<div className="row">
<div className="ps-4 ms-3 col-3"><img src="src/assets/poe.jpg" width="200px" /></div>
<div className="col my-auto text"></div>
</div>
<hr className="ms-4" />
<div className="h5 ps-4 pt-3">Способ оплаты</div>
<div className="ps-4">
<select className="form-select select">
<option value="1">Банковская карта</option>
<option value="2">QIWI Кошелёк</option>
</select>
</div>
<div className="h5 ps-4 py-3">Итого:-------</div>
<hr className="ms-4" />
<div className="h5 ps-4">Скидка постоянным покупателям</div>
<div className="ps-4"><p className="disc px-4 py-2" >2000р-------------------------------------7%<br />
1500р-------------------------------------6%<br />
1100р-------------------------------------5%<br />
950р--------------------------------------4%<br />
800р--------------------------------------3%<br />
500р--------------------------------------2%<br />
300р--------------------------------------1%</p>
</div>
<hr className="ms-4" />
<div className="h5 ps-4">E-mail</div>
<div className="ps-4 py-2"><input type="email" className="form-control" placeholder="name@example.com" required /></div>
<div className="ps-4 py-2"><input type="email" className="form-control" placeholder="repeat name@example.com" required /></div>
<div className="ps-4 py-2 from-check">
<Form.Control type="checkbox" className="form-check-input check" id="access" required />
<Form.Label className="from-check-label" htmlFor="access">Я ознакомлен с описанием товара и региональными ограничениями, и даю согласие на обработку данных.</Form.Label>
</div>
<hr className="ms-4" />
<div className="ps-4 pt-2"><button className=" btn w-100 btn-lg btn-primary" type="submit">Далее</button></div>
</Form>
</div>
</>
);
};
export default Page4;

43
Lab4/Lab4/src/pages/Page5.jsx Normal file
View File

@ -0,0 +1,43 @@
import './index.css';
import {Link} from 'react-router-dom';
import {useState} from 'react';
import { Form } from 'react-bootstrap';
const Page5 = () => {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if(form.checkValidity() === false){
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return(
<>
<div className="main d-flex mt-0 row justify-content-center">
<Form className="col-md-6 sign-form " action="/personalaccount" validated={validated} onSubmit={handleSubmit}>
<div className="mb-0 h4">Войти</div>
<div className="pb-2"><Link to="/reg"><small>Зарегистрироваться</small></Link></div>
<div className="pb-3">
<Form.Label className="form-label" htmlFor="email">Почта</Form.Label>
<input id="email" name="email" className="form-control border-0" placeholder="name@example.com" type="email" required />
</div>
<div className="pb-3">
<Form.Label className="form-label" htmlFor="password">Пароль</Form.Label>
<Form.Control id="password" name="password" className="form-control border-0" type="password" required />
</div>
<div className="but text-center">
<button className="btn btn-primary w-50" type="submit">Далее</button>
</div>
</Form>
</div>
</>
);
};
export default Page5;

26
Lab4/Lab4/src/pages/PersonalAccount.jsx Normal file
View File

@ -0,0 +1,26 @@
import './index.css';
const PersonalAccount = () => {
return(
<>
<div className="flex-column main justify-content-center pb-4">
<div className="p-3 h4">Мой профиль</div>
<div className="p-3"><img src="src/assets/avatar.png" width="130px" /></div>
<div className="p-3 h4">Мои покупки</div>
<div className="row gx-3 mx-auto">
<div className="col p-2"><img className="mx-auto d-block" src="src/assets/poe.jpg" width="270px" /></div>
<div className="col p-2"><img className="mx-auto d-block" src="src/assets/poe.jpg" width="270px" /></div>
<div className="col p-2"><img className="mx-auto d-block" src="src/assets/poe.jpg" width="270px" /></div>
</div>
<div className="p-3 gx-3 h4">Список желаемого</div>
<div className="row mx-auto">
<div className="col p-2"><img className="mx-auto d-block" src="src/assets/poe.jpg" width="270px" /></div>
<div className="col p-2"><img className="mx-auto d-block" src="src/assets/poe.jpg" width="270px" /></div>
<div className="col p-2"><img className="mx-auto d-block" src="src/assets/poe.jpg" width="270px" /></div>
</div>
</div>
<div className="push"></div>
</>)
}
export default PersonalAccount;

50
Lab4/Lab4/src/pages/Reg.jsx Normal file
View File

@ -0,0 +1,50 @@
import './index.css';
import {useState} from 'react';
import {Link} from 'react-router-dom';
import { Form } from 'react-bootstrap';
const Reg = () => {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if(form.checkValidity() === false){
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return(
<>
<div className="main d-flex mt-0 row justify-content-center">
<Form className="col-md-6 sign-form" action="./personal_account.html" validated={validated} onSubmit={handleSubmit}>
<div className="mb-0 h4">Зарегистрироваться</div>
<div className="pb-2"><Link to="/Page5"><small>Уже зарегестрированны?</small></Link></div>
<div className="pb-3">
<Form.Label className="form-label" htmlFor="email">Почта</Form.Label>
<Form.Control id="email" name="" className="form-control border-0" placeholder="name@example.com" type="email" required />
</div>
<div className="pb-3">
<Form.Label className="form-label" htmlFor="password">Пароль</Form.Label>
<Form.Control id="password" name="" className="form-control border-0" type="password" required />
</div>
<div className="pb-3">
<Form.Label className="form-label" htmlFor="password1">Повторите пароль</Form.Label>
<Form.Control id="password1" name="" className="form-control border-0" type="password" required />
</div>
<div className="but text-center">
<button className="btn btn-primary w-50" type="submit">Далее</button>
</div>
</Form>
</div>
</>
);
};
export default Reg;

153
Lab4/Lab4/src/pages/index.css Normal file
View File

@ -0,0 +1,153 @@
header nav{
background-color: #08D9D6;
color: black;
}
.category{
width:55%;
}
@media (min-width:768px){
.im{
display: none;
}
}
@media (max-width:900px){
.text{
padding-left: 100px;
}
.div{
display:none;
}
.ots {
align-items: center;
align-content: center;
justify-content: center;
}
.img{
width:100%;
}
}
@media (max-width:600px){
.categ{
display:none;
}
.imrow{
width:250px;
}
.destext{
width:200px;
height: 70px;
overflow: auto;
}
.cart{
display: none;
}
}
@media (max-width:1500px){
.category{
width:65%;
}
}
@media (max-width:1250px){
.search{
max-width: 100%;
}
.category{
width: 75%;
}
}
@media (max-width:830px){
.category{
width:100%;
}
}
@media (max-width:1040px){
.images{
display: none;
}
.cata{
gap: 4px;
grid-template-columns: 3fr;
}
.imrow{
width:100%;
}
}
.textmain
header nav a:hover{
text-decoration: underline;
}
html, body {
background-color: #252A34;
height: 100%;
color:white;
}
footer {
background-color: #FF2E63;
color:black;
height:32px;
}
.push {
height: 32px;
}
center {
width: 900px;
margin: 0 auto ;
background-color: #353b47;
}
.main {
background-color: #353b47;
color:white;
max-width:1000px;
margin: 0 auto -32px;
}
.cost-input {
width:80px;
border-radius: 10px;
}
.search-input{
border-radius: 15px;
width: 100%;
}
.select {
border-radius: 10px;
color: white;
border:1px;
}
.disc{
border: 1px solid black;
line-height: 2.5;
max-width:360px;
border-radius: 10px;
}
.textbx {
border-radius: 10px;
border: 1px;
}
input[type="email"]::placeholder {color: grey;}
.check {
border:1px;
}
.sign-form{
padding-top:25%;
width: 200px;
}
.but{
padding-bottom: 200px;
}

7
Lab4/Lab4/vite.config.js Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})