fedorenko/Internet_Programming_PIbd-22_Fedorenko_Galina
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Галина Федоренко 2023-12-22 14:23:49 +04:00
commit 4aa525b264
34 changed files with 7100 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

47
README.md Normal file
View File

@ -0,0 +1,47 @@
### Окружение:
- [nodejs 20 LTS latest](https://nodejs.org/en/download/);
- [VSCode](https://code.visualstudio.com/download);
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) плагин для VSCode;
- [CSS Class Intellisense](https://marketplace.visualstudio.com/items?itemName=Tarrow.css-class-intellisense) плагин для автодополнения CSS-классов в HTML;
- для отладки необходимы бразузеры Chrome или Edge.
Настройки плагина CSS Class Intellisense находятся в файле ./vscode/cssconfig.json
### Команды
#### Создание пустого проекта:
```commandline
npm create vite@latest ./ -- --template react
```
#### Установка зависимостей:
```commandline
npm install
```
#### Запуск проекта в режиме разработки (development):
```commandline
npm run dev
```
#### Запуск проекта в продуктовом режиме (production):
```commandline
npm run prod
```
### Полезные ссылки
1. Updating Objects in State - https://react.dev/learn/updating-objects-in-state
2. Sharing State Between Components - https://react.dev/learn/sharing-state-between-components
3. React Hot Toast - https://react-hot-toast.com
4. Axios - https://axios-http.com
5. Axios & Error handling like a boss - https://dev.to/mperon/axios-error-handling-like-a-boss-333d
6. Separation of Concerns in React –How to Use Container and Presentational Components - https://www.freecodecamp.org/news/separation-of-concerns-react-container-and-presentational-components/
7. Separation of concerns in React and React Native - https://dev.to/sathishskdev/separation-of-concerns-in-react-and-react-native-45b7
8. React Bootstrap - https://react-bootstrap.netlify.app
9. React Bootstrap Icons - https://github.com/ismamz/react-bootstrap-icons
10. JSON Server - https://www.npmjs.com/package/json-server

82
data.json Normal file
View File

File diff suppressed because one or more lines are too long

15
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="/book.png" />
<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>

15
jsconfig.json Normal file
View File

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

5
json-server.json Normal file
View File

@ -0,0 +1,5 @@
{
"static": "./node_modules/json-server/public",
"port": 8081,
"watch": "true"
}

5936
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

38
package.json Normal file
View File

@ -0,0 +1,38 @@
{
"name": "lec4",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"rest": "json-server data.json",
"vite": "vite",
"dev": "npm-run-all --parallel rest vite",
"prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.18.0",
"react-hot-toast": "^2.4.1",
"axios": "^1.6.1",
"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.15",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"json-server": "^0.17.4",
"npm-run-all": "^4.1.5",
"vite": "^4.4.5"
}
}

BIN
public/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
public/backgroung_sign.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 878 KiB

BIN
public/book.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 531 B

3
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

BIN
public/mast-marg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

0
src/App.css Normal file
View File

24
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-0 d-flex' fluid>
<Outlet />
</Container>
<Footer />
</>
);
};
App.propTypes = {
routes: PropTypes.array,
};
export default App;

9
src/components/footer/Footer.css Normal file
View File

@ -0,0 +1,9 @@
.footer {
font-family: 'Jost', sans-serif;
position: fixed;
bottom: 0;
width: 100%;
padding: 5px 0;
background-color: #452A21 !important;
z-index: 999;
}

11
src/components/footer/Footer.jsx Normal file
View File

@ -0,0 +1,11 @@
import './Footer.css';
const Footer = () => {
return (
<footer className="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
Федоренко Галина, ПИбд-22
</footer>
);
};
export default Footer;

30
src/components/navigation/Navigation.css Normal file
View File

@ -0,0 +1,30 @@
.nav-link {
font-family: 'Jost', sans-serif;
font-size: 24px;
margin-right: 25px;
color: white !important;
}
.nav-link:hover{
color: #91745f !important;
}
.navbar-brand svg path {
transition: fill .4s;
}
.navbar-brand:hover svg path {
fill: #91745f;
}
.navbar {
background-color: #452A21 !important;
}
@media (max-width: 767px) {
.nav-link {
font-size: 18px;
margin-right: 10px;
margin-left: 10px;
}
}

60
src/components/navigation/Navigation.jsx Normal file
View File

@ -0,0 +1,60 @@
import PropTypes from 'prop-types';
import { Container, Nav, Navbar } from 'react-bootstrap';
// import { Cart2 } 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 (
<Navbar expand='md' bg='dark' data-bs-theme='dark'>
<Container>
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
<svg
width={60}
height={60}
viewBox="0 0 60 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="Vector"
d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z"
stroke="white"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
id="Vector_2"
d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z"
stroke="white"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Navbar.Brand>
<Navbar.Toggle aria-controls='responsive-navbar-nav' />
<Navbar.Collapse id='responsive-navbar-nav'>
<Nav className='me-auto' 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>
);
};
Navigation.propTypes = {
routes: PropTypes.array,
};
export default Navigation;

1
src/index.css Normal file
View File

@ -0,0 +1 @@
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200&display=swap');

64
src/main.jsx Normal file
View File

@ -0,0 +1,64 @@
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 PageEdit from './pages/PageEdit.jsx';
const routes = [
{
index: true,
path: '/',
element: <Page1 />,
},
{
path: '/catalog',
element: <Page2 />,
title: 'Каталог',
},
{
path: '/book',
element: <Page3 />,
},
{
path: '/sign_in',
element: <Page3 />,
title: 'Вход',
},
{
path: '/sign_up',
element: <Page4 />,
title: 'Регистрация',
},
{
path: '/admin_page',
element: <Page5 />,
title: 'Админка',
},
{
path: '/page-edit',
element: <PageEdit />,
},
];
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
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;

26
src/pages/Page1.jsx Normal file
View File

@ -0,0 +1,26 @@
// import { Link } from 'react-router-dom';
import './styles/Title.css';
const Page1 = () => {
return (
<div className="background-style">
<div className="container text-center">
<h1 className="display-4">Книжный подвальчик</h1>
<div className="row">
<div className="col-6"></div>
<div className="col-6">
<blockquote className="blockquote text-right">
<p>
Без книг пуста человеческая жизнь. Книга не только наш друг, но и
постоянный вечный спутник.
</p>
<footer className="blockquote-footer">Д. Бедный</footer>
</blockquote>
</div>
</div>
</div>
</div>
);
};
export default Page1;

47
src/pages/Page2.jsx Normal file
View File

@ -0,0 +1,47 @@
// import { Table } from 'react-bootstrap';
// import ulstuLogo from '../assets/logo.png';
import './styles/Catalog.css';
const Page2 = () => {
return (
<main className="container main_pannel">
<div id="my-id-for-text" className="row">
<div className="col-12 col-md-6 col-lg-4 col-xl-3">
<div className="book">
<img src="public\mast-marg.png" alt="Обложка" />
<h3>Мастер и Маргарита, М.А. Булгаков</h3>
<a href="#link" className="btn btn-custom" role="button">Подробнее</a>
<a href="#link" className="btn btn-custom" role="button">В избранное</a>
</div>
</div>
<div className="col-12 col-md-6 col-lg-4 col-xl-3">
<div className="book">
<img src="public\mast-marg.png" alt="Обложка" />
<h3>Мастер и Маргарита, М.А. Булгаков</h3>
<a href="#link" className="btn btn-custom" role="button">Подробнее</a>
<a href="#link" className="btn btn-custom" role="button">В избранное</a>
</div>
</div>
<div className="col-12 col-md-6 col-lg-4 col-xl-3">
<div className="book">
<img src="public\mast-marg.png" alt="Обложка" />
<h3>Мастер и Маргарита, М.А. Булгаков</h3>
<a href="#link" className="btn btn-custom" role="button">Подробнее</a>
<a href="#link" className="btn btn-custom" role="button">В избранное</a>
</div>
</div>
<div className="col-12 col-md-6 col-lg-4 col-xl-3">
<div className="book">
<img src="public\mast-marg.png" alt="Обложка" />
<h3>Мастер и Маргарита, М.А. Булгаков</h3>
<a href="#link" className="btn btn-custom" role="button">Подробнее</a>
<a href="#link" className="btn btn-custom" role="button">В избранное</a>
</div>
</div>
</div>
</main>
);
};
export default Page2;

42
src/pages/Page3.jsx Normal file
View File

@ -0,0 +1,42 @@
/* import { useState } from 'react';
import { Button, Form } from 'react-bootstrap'; */
import './styles/Sign.css';
import { Link } from 'react-router-dom';
const Page3 = () => {
return (
<div className="background-image">
<div className="sign-in-container">
<h2 className="custom-h">Добро пожаловать!</h2>
<form id="registrationForm" action="index.html">
<div className="row justify-content-center">
<input
type="text"
className="form-control"
id="username"
placeholder="логин"
/>
<input
type="password"
className="form-control"
id="password"
placeholder="пароль"
/>
<button type="submit" className="btn btn-custom" id="submit-btn">
ВОЙТИ
</button>
<p className="custom-text">
Ещё нет аккаунта?{}
<Link to="/sign_up" className="custom-a">
Зарегистрироваться
</Link>
</p>
</div>
</form>
</div>
</div>
);
};
export default Page3;

49
src/pages/Page4.jsx Normal file
View File

@ -0,0 +1,49 @@
/* import { Button, ButtonGroup, Table } from 'react-bootstrap';
import { Link } from 'react-router-dom'; */
import './styles/Sign.css';
import { Link } from 'react-router-dom';
const Page4 = () => {
return (
<div className="background-image">
<div className="sign-up-container">
<h2 className="custom-h">Регистрация</h2>
<form id="registrationForm" action="">
<div className="row justify-content-center">
<input
type="text"
className="form-control"
id="username"
placeholder="логин"
/>
<input
type="text"
className="form-control"
id="email"
placeholder="email"
/>
<input
type="password"
className="form-control"
id="password"
placeholder="пароль"
/>
<button type="submit" className="btn btn-custom" id="submitButton">
ЗАРЕГИСТРИРОВАТЬСЯ
</button>
<p className="custom-text">
Уже есть аккаунт?{}
<Link to="/sign_in" className="custom-a">
Войти
</Link>
</p>
</div>
</form>
</div>
</div>
);
};
export default Page4;

87
src/pages/Page5.jsx Normal file
View File

@ -0,0 +1,87 @@
/* eslint-disable linebreak-style */
import { Table } from 'react-bootstrap';
import './styles/Admin.css';
const Page5 = () => {
return (
<div className="container-fluid p-2 m-2">
<div className="btn-group" role="group">
<button id="items-add" className="btn btn-admin ">
Добавить книгу
</button>
</div>
<div>
<Table hover >
<thead className="thead-dark">
<tr>
<th scope="col">№</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" className="w-15">
Год выпуска
</th>
<th scope="col" className="w-25">
Описание
</th>
<th scope="col" />
<th scope="col" />
</tr>
</thead>
<tbody>
<tr id="line-4">
<th scope="row">1</th>
<td>Мастер и Маргарита</td>
<td>М.А. Булгаков</td>
<td>Роман</td>
<td>1847</td>
<td>12345</td>
<td>
</td>
<td>
</td>
</tr>
<tr id="line-5">
<th scope="row">2</th>
<td>Гарри Поттер и философский камень</td>
<td>Дж. К. Роулинг</td>
<td>Фэнтези</td>
<td>1997</td>
<td>оно есть....</td>
<td>
</td>
<td>
</td>
</tr>
<tr id="line-6">
<th scope="row">3</th>
<td>Грозовой перевал</td>
<td>Э. Бронте</td>
<td>Трагедия</td>
<td>1867</td>
<td>трагедия</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</Table>
</div>
</div>
);
};
export default Page5;

53
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;

48
src/pages/styles/Admin.css Normal file
View File

@ -0,0 +1,48 @@
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/*.table {
--bs-th-bg: #452A21;
--bs-table-border-color: #d6b0a2;
--bs-tb-bg: #d6b0a2;
}
thead {
background-color: #452A21 !important;
}
tbody {
background-color: #d6b0a2 !important;
}
*/
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
}
.btn-admin {
bottom: 5px;
background-color: #452A21 !important;
color: white !important;
}
.btn-admin:hover {
background-color: #866a60 !important;
color: black !important;
}
#image-preview {
width: 200px;
}

88
src/pages/styles/Catalog.css Normal file
View File

@ -0,0 +1,88 @@
body {
background-color: #91745f;
}
.book {
padding: 15px;
text-align: center;
margin-bottom: 20px;
flex: 0 0 calc(25% - 30px);
}
.book img {
max-width: 60%;
max-height: 340px;
border-radius: 5px;
margin-bottom: 10px;
}
.book h3 {
color: #FFF;
text-align: center;
font-family: Jost;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: normal;
margin-bottom: 10px;
height: 100px;
}
.book button {
width: 80%;
margin-top: 10px;
}
a.btn-custom {
border-radius: 8px;
width: 250px;
height: 50px;
margin-bottom: 20px;
background-color: #452B21;
color: #fff;
text-align: center;
font-family: Jost;
font-size: 25px;
font-style: normal;
font-weight: 400;
line-height: normal;
border: 2px solid #452B21;
}
a.btn-custom:hover {
background-color: #66442B;
border: 2px solid #66442B;
}
.footer {
font-family: 'Jost', sans-serif;
position: fixed;
bottom: 0;
width: 100%;
padding: 5px 0;
background-color: #452A21 !important;
z-index: 999;
}
.about {
margin-top: 20px;
color: white;
font-family: Jost;
text-align:justify;
font-size: 24px;
}
@media (max-width: 767px) {
a.btn-custom {
display: block;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.about {
margin-left: 15px;
margin-right: 15px;
font-size: 20px;
}
}

150
src/pages/styles/Sign.css Normal file
View File

@ -0,0 +1,150 @@
.nav-item svg path {
transition: fill .4s;
}
.nav-item:hover svg path {
fill: #79584c;
}
.background-image {
background-image: url("../../../public/backgroung_sign.png");
background-size: cover;
width: 50%;
height: 100vh;
display: inline-block;
}
.sign-in-container {
background-color: #ffffff;
border-radius: 15px;
padding: 20px;
width: 500px;
height: 400px;
position: relative;
top: 8%;
right: 0;
bottom: 0;
left: 50%;
margin: auto;
}
.sign-up-container {
background-color: #ffffff;
border-radius: 15px;
padding: 20px;
width: 500px;
height: 475px;
position: relative;
top: 1%;
right: 0;
bottom: 0;
left: 50%;
margin: auto;
}
.custom-h {
color: #000;
text-align: center;
font-family: Jost;
font-size: 50px;
font-style: normal;
font-weight: 300;
line-height: normal;
margin-bottom: 20px;
}
.input-box {
border-radius: 8px;
font-size: 17px;
width: 450px;
height: 60px;
margin-bottom: 20px;
}
.form-control {
border-radius: 8px;
font-size: 17px;
width: 450px;
height: 60px;
margin-bottom: 20px;
}
.btn-custom {
border-radius: 8px;
width: 450px;
height: 60px;
background-color: #452B21;
margin-bottom: 20px;
color: #fff;
text-align: center;
font-family: Jost;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;
border: 2px solid #452B21;
}
.btn-custom:hover {
background-color: #66442B;
border: 2px solid #66442B;
}
.custom-text {
color: #8C8C8C;
text-align: center;
font-family: Jost;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.custom-a {
color: #452B21;
font-family: Jost;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.custom-a:hover {
color: #9c614a;
}
.error {
border-color: red !important;
background-color: rgba(255, 222, 222, 0.26) !important;
}
@media (max-width: 767px) {
.sign-in-container {
width: 290px;
height: 375px;
padding: 10px;
left:5%;
}
.sign-up-container {
width: 290px;
height: 425px;
padding: 10px;
top: 5%;
left:5%;
}
.custom-h {
font-size: 28px;
}
.form-control {
width: 80%;
}
.btn-custom {
width: 80%;
font-size: 90%;
}
}

90
src/pages/styles/Title.css Normal file
View File

@ -0,0 +1,90 @@
/*body {
background-image: url("../../../public/background.jpg");
background-size: cover;
background-position: center;
height: 100vh;
}*/
.background-style{
background-image: url("../../../public/background.jpg");
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
.nav-link {
font-family: 'Jost', sans-serif;
font-size: 24px;
margin-right: 25px;
color: white !important;
}
.nav-link:hover{
color: #79584c !important;
}
.nav-item svg path {
transition: fill .4s;
}
.nav-item:hover svg path {
fill: #79584c;
}
.display-4 {
color: #FFF;
font-family: 'Source Serif 4';
font-size: 96px;
font-style: normal;
margin-top: 100px;
}
blockquote {
color: white;
font-family: 'Source Serif 4';
text-align: right;
font-size: 24px;
margin-top: 30px;
}
blockquote footer {
color: white !important;
font-family: 'Source Serif 4';
text-align: right;
font-size: 24px;
}
.footer {
font-family: 'Jost', sans-serif;
position: fixed;
bottom: 0;
width: 100%;
padding: 5px 0;
background-color: #452A21 !important;
z-index: 999;
}
@media (max-width: 767px) {
.nav-link {
font-size: 18px;
margin-right: 10px;
margin-left: 10px;
}
.display-4 {
font-size: 40px;
margin-top: 50px;
}
blockquote {
font-size: 18px !important;
margin-top: 20px;
}
blockquote footer {
font-size: 18px;
}
}

13
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,
},
});