Belnik/PIbd-21_Belianin_N.N._Internet_Programming
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ready Lab 4 with report

Browse Source
This commit is contained in:
Никита Белянин 2023-11-24 12:31:16 +04:00
parent 7bb8031144
commit dd726f8436
56 changed files with 5753 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Lab4/.eslintrc.cjs Normal file
View File

@ -0,0 +1,24 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'airbnb-base',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
'indent': 'off',
'no-console': 'off',
'arrow-body-style': 'off',
'implicit-arrow-linebreak': 'off',
},
}

24
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?

29
Lab4/README.md Normal file
View File

@ -0,0 +1,29 @@
#### Окружение:
- nodejs 18;
- VSCode;
- ESLint плагин для VSCode;
- для отладки необходимы бразузеры Chrome или Edge.
#### Создание пустого проекта:
```commandline
npm create vite@latest ./ -- --template react
```
#### Установка зависимостей:
```commandline
npm install
```
#### Запуск проекта:
```commandline
npm run dev
```
#### Сборка проекта:
```commandline
npm run build
```

15
Lab4/index.html Normal file
View File

@ -0,0 +1,15 @@
<html lang="ru">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Мой сайт</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
Lab4/jsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"target": "ES2020",
"jsx": "react",
"strictNullChecks": true,
"strictFunctionTypes": true
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}

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

File diff suppressed because it is too large Load Diff

32
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": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.18.0",
"bootstrap": "^5.3.2",
"react-bootstrap": "^2.9.1",
"react-bootstrap-icons": "^1.10.3",
"prop-types": "^15.8.1"
},
"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"
}
}

3
Lab4/public/favicon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 463 B

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

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

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 452 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 655 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 363 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 179 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 248 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 640 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 812 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 767 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

25
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;
}

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

@ -0,0 +1,40 @@
import { useEffect, useState } from 'react';
import banner1 from '../../assets/Image3.png';
import banner2 from '../../assets/Image4.png';
import banner3 from '../../assets/Image5.png';
import './Banner.css';
const Banner = () => {
const [currentBanner, setCurrentBanner] = useState(0);
const banners = [banner1, banner2, banner3];
const getBannerClass = (index) => {
return currentBanner === index ? 'banner-show' : '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;

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

@ -0,0 +1,7 @@
.my-footer {
background-color: #636363;
padding-top: 15px;
padding-bottom: 15px;
height: 64px;
color: #fff;
}

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

@ -0,0 +1,15 @@
import './Footer.css';
const Footer = () => {
const year = new Date().getFullYear();
return (
<footer className="my-footer mt-auto fixed bottom-0 w-100">
<div className="copywriter p-2">
&copy; {year} UlRent Белянин Никита ПИбд-21 | Все права защищены ;)
</div>
</footer>
);
};
export default Footer;

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

@ -0,0 +1,77 @@
.navbar{
background-color: #85DADA !important;
}
.my-navbar {
background-color: #85DADA !important;
}
.my-navbar .link a:hover {
text-decoration: underline !important;
}
.my-navbar .logo {
width: 20px;
height: 20px;
}
.logo{
width: 100px;
height: 80px;
}
.main-navbar{
font-size: 24px;
justify-content: end;
}
.Name{
color: #ffffff;
font-size: 24px;
text-decoration: none;
}
@media (max-width: 600px) {
.logo{
width: 80px;
height: 60px;
}
.Name{
font-size: 22px;
}
}
@media (max-width: 360px){
.Name{
font-size: 20px;
}
.logo{
width: 60px;
height: 50px;
}
}
@media (max-width: 300px){
.logo{
width: 50px;
height: 50px;
}
}
@media (max-width: 270px){
.Name{
font-size: 14px;
}
.logo{
width: 50px;
height: 40px;
}
.copywriter{
font-size: 14px;
}
}

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

@ -0,0 +1,45 @@
import PropTypes from 'prop-types';
import {
Container, Nav, Navbar, NavbarCollapse, NavbarToggle,
} from 'react-bootstrap';
import { Link, useLocation } from 'react-router-dom';
import Logo from '../../assets/Image1.png';
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='navbar navbar-expand-md navbar-dark'>
<Container fluid>
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
<img src={Logo} className="logo me-5" alt="логотип" />
</Navbar.Brand>
<Navbar as={Link} to={indexPageLink?.path ?? '/'}>
<div className="Name"> UlRent </div>
</Navbar>
<NavbarToggle aria-controls='main-navbar' />
<NavbarCollapse className="justify-content-end me-5" id='main-navbar '>
<Nav className='main-navbar' activeKey={location.pathname}>
{
pages.map((page) =>
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
{page.title}
</Nav.Link>)
}
</Nav>
</NavbarCollapse>
</Container>
</Navbar >
</header>
);
};
Navigation.propTypes = {
routes: PropTypes.array,
};
export default Navigation;

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

@ -0,0 +1,27 @@
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
}
.btn-mw {
width: 100%;
}
@media (min-width: 768px) {
.btn-mw {
width: 30%;
}
}
@media (min-width: 1200px) {
.btn-mw {
width: 20%;
}
}

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

@ -0,0 +1,80 @@
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 PageMain from './pages/PageMain.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 PageEdit from './pages/PageEdit.jsx';
import LogIn from './pages/LogIn.jsx';
import SignIn from './pages/SignIn.jsx';
import PageMyBulletin from './pages/PageMyBulletin.jsx';
const routes = [
{
index: true,
path: '/',
element: <PageMain />,
},
{
path: '/page1',
element: <Page1 />,
title: 'Обзор',
},
{
path: '/page2',
element: <Page2 />,
title: 'О нас',
},
{
path: '/page3',
element: <Page3 />,
title: 'Администрация',
},
{
path: '/page4',
element: <Page4 />,
title: 'Контакты',
},
{
path: '/page5',
element: <Page5 />,
},
{
path: '/page-edit',
element: <PageEdit />,
},
{
path: '/logIn',
element: <LogIn />,
},
{
path: '/signIn',
element: <SignIn />,
},
{
path: '/pageMyBulletin',
element: <PageMyBulletin />,
},
];
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>,
);

5
Lab4/src/pages/ErrorPage.css Normal file
View File

@ -0,0 +1,5 @@
.back{
text-align: center;
font-size: 18px;
color: red;
}

20
Lab4/src/pages/ErrorPage.jsx Normal file
View File

@ -0,0 +1,20 @@
import { Alert, Button, Container } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
import './ErrorPage.css';
const ErrorPage = () => {
const navigate = useNavigate();
return (
<Container fluid className="p-2 row justify-content-center mt-5">
<Container className='col-md-6 mt-5'>
<Alert variant="danger text-center">
Страница не найдена
</Alert>
<Button className="back w-100 mt-2" variant="" onClick={() => navigate(-1)}>Назад</Button>
</Container>
</Container>
);
};
export default ErrorPage;

21
Lab4/src/pages/LogIn.css Normal file
View File

@ -0,0 +1,21 @@
.TitleLogin{
text-align: center;
color: white;
font-size: 42px;
}
.btnLog{
color: red;
}
@media (max-width: 550px) {
.imgg1{
display: none;
}
}
@media (max-width: 500px) {
.col-7{
width: 100%;
}
}

60
Lab4/src/pages/LogIn.jsx Normal file
View File

@ -0,0 +1,60 @@
import { Link } from 'react-router-dom';
import { useState } from 'react';
import {
Container, Button, Form, Row,
} from 'react-bootstrap';
import Image12 from '../assets/Image12.png';
import './LogIn.css';
const LogIn = () => {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<Container fluid className='container-fluid wrapper'>
<div className="TitleLogin">
<p>Войти в профиль</p>
</div>
<Row>
<div className='col-7'>
<div className="row justify-content-center">
<Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Group className="mb-2" controlId="lastname">
<Form.Label>Ваш логин </Form.Label>
<Form.Control type="text" placeholder="Электронная почта" name="lastname" required />
<Form.Control.Feedback>Логин заполнен</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Логин не заполнен</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-2" controlId="password">
<Form.Label>Пароль</Form.Label>
<Form.Control type="password" placeholder="от 6 до 16 символов" name="password" required />
</Form.Group>
<div className="d-grid gap-2 pt-5 mx-auto w-100">
<Button className="w-50 btnLog btn btn-light mx-auto" variant="primary" type="submit">
<Link to="/page1" className='textlink'> Войти </Link>
</Button>
</div>
</Form>
</div>
</div>
<div className="col">
<div className="col-md-10 offset">
<img className="imgg1 w-100 h-100" src={Image12} alt="banner" />
</div>
</div>
</Row>
</Container>
);
};
export default LogIn;

37
Lab4/src/pages/Page1.css Normal file
View File

@ -0,0 +1,37 @@
body{
background-color: #85DADA;
}
.card-title{
color: black;
text-decoration: none;
}
.textlinkBut{
color: white;
text-decoration: none;
}
.textlinkButMy{
color: white;
text-decoration: none;
}
.card{
width: 18rem;
}
.btn1{
background-color: #0d6efd;
}
.btn2{
color: red;
width: 30rem;
}
@media (max-width: 325px) {
.card{
width: 100%;
}
}

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

@ -0,0 +1,79 @@
import { Link } from 'react-router-dom';
import { Container, Button } from 'react-bootstrap';
import Image9 from '../assets/Image9.jpg';
import Image8 from '../assets/Image8.png';
import Image13 from '../assets/Image13.jpg';
import './Page1.css';
const Page1 = () => {
return (
<>
<Container fluid className='container-fluid flex-shrink-0 p-0'>
<article>
<Button type="button" className="btn1 btn-info me-5 ms-5 mb-5" >
<Link to='/pageMyBulletin' className='textlinkButMy mt-4'> Мои объявление </Link>
</Button>
<div className="container mb-5 wrapper">
<div className="row">
<div className="col pb-4">
<div className="card mx-auto">
<Link to="/page5" className='textlink'>
<img className="card-img-top w-100 h-100" src={Image9} alt="banner" />
</Link>
<div className="card-body">
<h5 className="card-title"> Студия 1 </h5>
<p className="card-text">Центр города ул. Зелёная, д43, кв.77 Красивый вид на площадь города, рядом расположены ТЦ и парк </p>
<Button type="button" className="btn1 btn-primary">
<Link to='/page5' className='textlinkBut mt-4'> 4 249₽ </Link>
</Button>
</div>
</div>
</div>
<div className="col pb-4">
<div className="card mx-auto">
<Link to="/page5" className='textlink'>
<img className="card-img-top w-100 h-100" src={Image8} alt="banner" />
</Link>
<div className="card-body">
<h5 className="card-title">Студия 2</h5>
<p className="card-text">Север города ул. Победы, д. 87 кв.182 Удобная развязка, рядом находится деловой центр и аквапарк </p>
<Button type="button" className="btn1 btn-primary" > 2 799 ₽ </Button>
</div>
</div>
</div>
<div className="col pb-4">
<div className="card mx-auto">
<img className="card-img-top w-100 h-100" src={Image13} alt="banner" />
<div className="card-body">
<h5 className="card-title">Таунхауз</h5>
<p className="card-text">Южная часть города ул. Южная д.87 Возможно проживание двумя семьями, на территории парковка</p>
<Button type="button" className="btn1 btn-primary" > 3 069₽ </Button>
</div>
</div>
</div>
<div className="col pb-4">
<div className="card mx-auto">
<img className="card-img-top w-100 h-100" src={Image13} alt="banner" />
<div className="card-body">
<h5 className="card-title">Пентхауз</h5>
<p className="card-text">Центр города ул. Ёжиков д.23, кв.100 Современная, удобная квартира на крыше дома, с двумя этажами</p>
<Button type="button" className="btn1 btn-primary" > 5 199₽ </Button>
</div>
</div>
</div>
</div>
</div>
<div className="col mx-auto">
<div className="flex-column col-md-8 mx-auto mb-5">
<Button type="button" className="btn2 btn-light w-100" > <Link to="/page3" className='textlink'> Добавить объявление </Link>
</Button>
</div>
</div>
</article>
</Container>
</>
);
};
export default Page1;

27
Lab4/src/pages/Page2.css Normal file
View File

@ -0,0 +1,27 @@
body{
background-color: #85DADA;
}
.card-title{
color: black;
text-decoration: none;
}
.card{
width: 18rem;
}
.btn1{
background-color: #0d6efd;
}
.btn2{
color: red;
width: 30rem;
}
@media (max-width: 325px) {
.card{
width: 100%;
}
}

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

@ -0,0 +1,49 @@
import { Container } from 'react-bootstrap';
import './Page2.css';
const Page2 = () => {
return (
<>
<Container fluid className='container-fluid wrapper flex-shrink-0 p-0'>
<div className="container">
<div className="textus">
<p> <u> О портале</u></p>
</div>
<div className="textus">
<p>Позвольте нам сэкономить ваше время и деньги</p>
</div>
<div className="textus">
<p>Нужна квартира в Ульяновске? Не хотите перепачивать? Именно на нашем
сайте UlRent мы поможем вам найти необходимое жильё. На нашем портале
аренды недвижимости. Место, в котором можно снять квартиру посуточно
или на долгий срок с максимальной экономией. Почему портал назван
независимым? Потому что мы не связаны ни с одним агенством недвижимости
Ульяновска, И предлагаем только честные цены на квартиры от реальных
собственников. Почему портав назван выгодным и экономным?
Статистика показывает, что клиенты, работащие с посредниками переплатили
бы на 20%-30%
</p>
</div>
<div className="textus">
<p>Для собственников</p>
</div>
<div className="textus">
<p>Если вы являетесь собственником уютной, удобной и комфортной квартиры,
то вы можете разместить своё личное объявление об аренде вашего жилья.
Посуточно или на определённый продолжительный срок - выбор за вами.
Для вас в качестве арендодателя представляется возможность
определять цену и размещать свои контактные данные
</p>
</div>
</div>
</Container>
</>
);
};
export default Page2;

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

@ -0,0 +1,62 @@
import { useState } from 'react';
import { Button, Form } from 'react-bootstrap';
const Page3 = () => {
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="row justify-content-center">
<Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
<div className="text-center mb-5">
<img id="image-preview" src="https://via.placeholder.com/200" alt="placeholder"></img>
</div>
<Form.Group className="mb-2">
<Form.Select name='selected' defaultValue={0}>
<option value=""> Квартира </option>
<option value="1">Студия</option>
<option value="2">Апартаменты</option>
<option value="3">Таунхауз</option>
<option value="4">Пентхауз</option>
</Form.Select>
</Form.Group>
<Form.Group className="mb-2" controlId="lastname">
<Form.Label>Фамилия и имя</Form.Label>
<Form.Control type="text" name="lastname" required />
<Form.Control.Feedback>Данные заполнены</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Данные не заполнены</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-2" controlId="email">
<Form.Label>E-mail</Form.Label>
<Form.Control type="email" name="email" placeholder="name@example.ru" required />
</Form.Group>
<Form.Group className="mb-2" controlId="password">
<Form.Label>Пароль</Form.Label>
<Form.Control type="password" name="password" required />
</Form.Group>
<Form.Group className="mb-2" controlId="price">
<Form.Label>Цена</Form.Label>
<Form.Control type="number" name="price" min="1000.00" step="0.50" required />
</Form.Group>
<Form.Group className="mb-2" controlId="image">
<Form.Label>Изображение</Form.Label>
<Form.Control name="image" type="file" accept="image/*" />
</Form.Group>
<div className="text-center mb-4 mt-4">
<Button className="w-50 btn1 btn-primary" variant="primary" type="submit">Отправить</Button>
</div>
</Form>
</div>
);
};
export default Page3;

32
Lab4/src/pages/Page4.css Normal file
View File

@ -0,0 +1,32 @@
.textus{
color: white;
font-size: 36px
}
.ifram{
height: 600px;
}
@media (max-width: 900px) {
.ifram{
height: 500px;
}
}
@media (max-width: 750px) {
.ifram{
height: 400px;
}
}
@media (max-width: 500px) {
.ifram{
height: 300px;
}
}
@media (max-width: 400px) {
.ifram{
height: auto;
}
}

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

@ -0,0 +1,46 @@
import { Container } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Image9 from '../assets/Image9.jpg';
import './Page4.css';
const Page4 = () => {
return (
<>
<Container fluid className="container-fluid wrapper mt-4">
<div className="container">
<Link to="/page3">
<img className="img223 w-100" src={Image9} alt="banner" />
</Link>
<div className="textus mt-2">
<p> Контактные данные </p>
</div>
<div className="textus">
<p> +7(909)-985-87-54</p>
<p> +7(909)-657-82-94</p>
<p> +7(909)-247-47-11</p>
</div>
<div className="textus">
<p> <i> E-mail </i> </p>
</div>
<div className="textus">
<p> Ulrent@mail.ru</p>
<p> Ulrent73@yandex.</p>
<p> RussianRent@mail.ru</p>
</div>
<div className="div d-flex justify-content-center">
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A0643c92cbdf3809080e5dfb2804b473ea00af31cfabe6fee08676c59d8675f01&amp;source=constructor" className="ifram w-75 mb-4"></iframe>
</div>
</div>
</Container>
</>
);
};
export default Page4;

68
Lab4/src/pages/Page5.css Normal file
View File

@ -0,0 +1,68 @@
.slide1{
color:aqua
}
.Slide {
background-color: white;
}
.textus1{
font-size: 28px;
color: white;
}
@media(max-width: 1200px) {
.textus1{
font-size: 24px;
}
}
@media(max-width: 1100px) {
.textus1{
font-size: 20px;
}
}
@media(max-width: 1000px) {
.textus1{
font-size: 16px;
}
}
@media(max-width: 900px) {
.textus1{
font-size: 14px;
}
}
@media(max-width: 500px) {
.textus1{
font-size: 32px;
}
.card-img-top1{
display: none;
}
}
@media(max-width: 412px) {
.textus1{
font-size: 32px;
}
.card-img-top1{
display: table;
}
}
@media(max-width: 360px) {
.textus1{
font-size: 28px;
}
}
@media(max-width: 270px) {
.textus1{
font-size: 18px;
}
}

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

@ -0,0 +1,63 @@
import { Container } from 'react-bootstrap';
import Carousel from 'react-bootstrap/Carousel';
import Image6 from '../assets/Image6.jpg';
import Image7 from '../assets/Image7.jpg';
import Image9 from '../assets/Image9.jpg';
import './Page5.css';
const Page5 = () => {
return (
<>
<Container fluid></Container>
<article>
<div className="row mb-5 mx-auto">
<div className="col pt-4 ps-4 pe-4">
<img className="card-img-top1" src={Image7} alt="banner" />
</div>
<div className="col ps-4 pe-4">
<div className="textus1 mx-auto">
<p> Цена: 4500 рублей </p>
<p> Описание </p>
<p> Уютная квартира в центре города с красивым видом на Волгу, современный
ремонт, удобная парковка.Квартира оснащена бытовой техникой: стиралка,
телевизор, холодильник, плита. Есть WI-FI роутер 4 спальных места
(двуспальная кровать и два раскладывающихся дивана).
Расчётный час - 12 часов дня.</p>
<p> Адрес: Улица Ёжиков, д.45, кв-7 </p>
<p> Номер телефона: +7(900)-785-84-56 </p>
</div>
</div>
</div>
<div className="row margo mt-5 mb-3 mx-auto">
<Carousel data-bs-theme="dark">
<Carousel.Item>
<img className="d-block w-100" src={Image7} alt="First slide"/>
<Carousel.Caption>
<div className='slide1'> <h5>First slide label</h5> </div>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img className="d-block w-100" src={Image9} alt="Second slide"/>
<Carousel.Caption>
<div className='slide1'> <h5>Second slide label</h5> </div>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img className="d-block w-100" src={Image6} alt="Third slide"/>
<Carousel.Caption>
<div className='slide1'> <h5>Third slide label</h5> </div>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
</article>
</>
);
};
export default Page5;

53
Lab4/src/pages/PageEdit.jsx Normal file
View File

@ -0,0 +1,53 @@
import { useState } from 'react';
import { Button, Form } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const PageEdit = () => {
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="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" className="rounded rounded-circle"
alt="placeholder" />
</div>
<Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Group className="mb-2" controlId="item">
<Form.Label htmlFor="item" className="form-label">Товары</Form.Label>
<Form.Select name='selected' required>
</Form.Select>
</Form.Group>
<Form.Group className="mb-2" controlId="price">
<Form.Label>Цена</Form.Label>
<Form.Control type="number" name="price"
value="0.00" min="1000.00" step="0.50" required />
</Form.Group>
<Form.Group className="mb-2" controlId="count">
<Form.Label>Количество</Form.Label>
<Form.Control type="number" name="count"
value="0" min="1" step="1" required />
</Form.Group>
<Form.Group className="mb-2" controlId="file">
<Form.Label>Изображение</Form.Label>
<Form.Control type="file" name="image" accept="image/*" />
</Form.Group>
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
<Button className="btn-mw me-md-3 mb-md-0 mb-2" as={Link} to="/page4" variant="secondary">Назад</Button>
<Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
</Form.Group>
</Form>
</>
);
};
export default PageEdit;

68
Lab4/src/pages/PageMain.css Normal file
View File

@ -0,0 +1,68 @@
body{
background-color: #85DADA;
}
.btn{
background-color: white;
}
img {
height: auto;
/* max-width: 100%; */
}
.textlink{
color: red;
}
/* .col-8{
width: 200px;
} */
.img22{
height: 600px;
border-radius: 0px 120px;
}
@media(max-width: 600px) {
.img22{
width: 100px;
height:180px;
}
.img22{
width: 160px;
height: 210px;
}
}
@media (max-width: 450px){
.col1{
display: none;
}
.textlink{
font-size: 16px;
}
.col-8{
width: 100%;
}
.img22{
display: table; /*Отмена display: none*/
}
}
@media (max-width: 400px){
.col-8{
width: 100%;
justify-self: center;
}
.textlink{
font-size: 12px;
}
}
@media (max-width: 270px){
.img22{
display: table; /*Отмена display: none*/
}
}

58
Lab4/src/pages/PageMain.jsx Normal file
View File

@ -0,0 +1,58 @@
import { Link } from 'react-router-dom';
import { Container, Row, Button } from 'react-bootstrap';
import Banner from '../components/banner/Banner.jsx';
import Image1 from '../assets/Image2.png';
import './PageMain.css';
const Page1 = () => {
const image = [Image1];
return (
<>
<Container fluid className='container-fluid p-4 wrapper flex-shrink-0 p-0'>
<Row>
<div className="col-8 pe-5 ps-5">
<div className="row">
<div className="col col1">
<Banner />
</div>
<div className="col col1">
<Banner />
<div className="pt-5"> </div>
</div>
<div className="col col1">
<Banner />
</div>
</div>
<div className="flex-column w-100 mx-auto">
<div className="pb-4 pe-4">
<Button type="button" className="btn btn-default btn-lg w-100 pt-3 pb-3">
<Link to="LogIn" className='textlink'>Войти</Link>
</Button>
</div>
<div className="pb-4 pe-4">
<Button type="button" className="btn btn-default btn-lg w-100 pt-3 pb-3">
<Link to="SignIn" className='textlink'>Регистрация</Link>
</Button>
</div>
</div>
</div>
<div className="col">
<div className='ms-3' >
<img className="img22 w-100 h-100" src={image} alt="banner" />
</div >
</div>
</Row>
</Container>
</>
);
};
export default Page1;

5
Lab4/src/pages/PageMyBulletin.css Normal file
View File

@ -0,0 +1,5 @@
.TitleMyBulletin{
color: white;
font-size: 32px;
text-align: center;
}

76
Lab4/src/pages/PageMyBulletin.jsx Normal file
View File

@ -0,0 +1,76 @@
import { Link } from 'react-router-dom';
import { Container, Button } from 'react-bootstrap';
import Image9 from '../assets/Image9.jpg';
import Image8 from '../assets/Image8.png';
import Image13 from '../assets/Image13.jpg';
import './PageMyBulletin.css';
const pageMyBulletin = () => {
return (
<>
<Container fluid className='container-fluid flex-shrink-0 p-0'>
<div className="TitleMyBulletin">
<p>Мои объявления</p>
</div>
<article>
<div className="container mb-5 wrapper">
<div className="row">
<div className="col pb-4">
<div className="card mx-auto">
<Link to="/page3" className='textlink'>
<img className="card-img-top w-100 h-100" src={Image9} alt="banner" />
</Link>
<div className="card-body">
<h5 className="card-title"> Студия 1 </h5>
<p className="card-text">Центр города ул. Зелёная, д43, кв.77 Красивый вид на площадь города, рядом расположены ТЦ и парк атракционов</p>
<Button type="button" className="btn1 btn-primary" > 4 249₽ </Button>
</div>
</div>
</div>
<div className="col pb-4">
<div className="card mx-auto">
<Link to="/page3" className='textlink'>
<img className="card-img-top w-100 h-100" src={Image8} alt="banner" />
</Link>
<div className="card-body">
<h5 className="card-title">Студия 2</h5>
<p className="card-text">Север города ул. Победы, д. 87 кв.182 Удобная развязка, рядом находится деловой центр и аквапарк </p>
<Button type="button" className="btn1 btn-primary" > 2 799 ₽ </Button>
</div>
</div>
</div>
<div className="col pb-4">
<div className="card mx-auto">
<img className="card-img-top w-100 h-100" src={Image13} alt="banner" />
<div className="card-body">
<h5 className="card-title">Таунхауз</h5>
<p className="card-text">Южная часть города ул. Южная д.87 Возможно проживание двумя семьями, на территории располагается парковка</p>
<Button type="button" className="btn1 btn-primary" > 3 069₽ </Button>
</div>
</div>
</div>
<div className="col pb-4">
<div className="card mx-auto">
<img className="card-img-top w-100 h-100" src={Image13} alt="banner" />
<div className="card-body">
<h5 className="card-title">Пентхауз</h5>
<p className="card-text">Центр города ул. Ёжиков д.23, кв.100 Современная, удобная квартира на крыше дома, с двумя этажами</p>
<Button type="button" className="btn1 btn-primary" > 5 199₽ </Button>
</div>
</div>
</div>
</div>
</div>
<div className="col mx-auto">
<div className="flex-column col-md-8 mx-auto mb-5">
<Button type="button" className="btn2 btn-light w-100" > Добавить объявление </Button>
</div>
</div>
</article>
</Container>
</>
);
};
export default pageMyBulletin;

16
Lab4/src/pages/SignIn.css Normal file
View File

@ -0,0 +1,16 @@
.imgSign {
display: block;
height: auto;
width: 100%;
height: auto;
}
@media (max-width: 500px) {
.imgSign{
display: none;
}
.col-7{
width: 100%;
}
}

70
Lab4/src/pages/SignIn.jsx Normal file
View File

@ -0,0 +1,70 @@
import { Link } from 'react-router-dom';
import { useState } from 'react';
import {
Container, Button, Form, Row,
} from 'react-bootstrap';
import Image5 from '../assets/Image5.png';
import './SignIn.css';
const SignIn = () => {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<Container fluid className='container-fluid wrapper mb-5'>
<div className="TitleLogin mb-4">
<p> Регистрация </p>
</div>
<Row>
<div className='col-7'>
<div className="row justify-content-center">
<Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Group className="mb-2" controlId="group1">
<Form.Label> Как пользователям к вам обращаться </Form.Label>
<Form.Control type="text" placeholder="Ваше имя" name="lastname" required />
<Form.Control.Feedback>Данные заполнены</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Данные не заполнены</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-2" controlId="group2">
<Form.Label>Ваш логин </Form.Label>
<Form.Control type="text" placeholder="Электронная почта" name="login" required />
<Form.Control.Feedback>Логин заполнен</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Логин не заполнен</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-2" controlId="group3">
<Form.Label>Только мобильный телефон </Form.Label>
<Form.Control type="text" placeholder="Номер телефона" name="numberphone" required />
</Form.Group>
<Form.Group className="mb-2" controlId="password">
<Form.Label>Пароль</Form.Label>
<Form.Control type="password" placeholder="от 6 до 16 символов" name="password" required />
</Form.Group>
<div className="d-grid gap-2 pt-5 mx-auto w-100">
<Button className="w-50 btnLog btn btn-light mx-auto" variant="primary" type="submit">
<Link to="/page1" className='textlink'> Войти </Link>
</Button>
</div>
</Form>
</div>
</div>
<div className="col">
<div className="col-md-10 offset">
<img className="imgSign" src={Image5} alt="banner" />
</div>
</div>
</Row>
</Container>
);
};
export default SignIn;

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

@ -0,0 +1,13 @@
/* eslint-disable import/no-extraneous-dependencies */
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
sourcemap: true,
chunkSizeWarningLimit: 1024,
emptyOutDir: true,
},
});