lab4_code
This commit is contained in:
Илья
parent
7b06ac0698
commit
3a8a3ba990
24
.eslintrc.cjs
Normal file
24
.eslintrc.cjs
Normal 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',
|
||||
},
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": "airbnb-base",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 12,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"quotes": "off",
|
||||
"indent": "off",
|
||||
"no-console": "off",
|
||||
"no-use-before-define": "off",
|
||||
"no-alert": "off",
|
||||
"no-restricted-globals": "off",
|
||||
"quote-props": "off"
|
||||
}
|
||||
}
|
||||
146
.gitignore
vendored
146
.gitignore
vendored
@ -1,146 +1,24 @@
|
||||
# ---> Node
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
# ---> VisualStudioCode
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
30
README.md
30
README.md
@ -1,21 +1,29 @@
|
||||
### Окружение
|
||||
#### Окружение:
|
||||
- nodejs 18;
|
||||
- VSCode;
|
||||
- ESLint плагин для VSCode;
|
||||
- для отладки необходимы бразузеры Chrome или Edge.
|
||||
|
||||
В VSCode необходимо установить плагин (расширение) ESLint:
|
||||
#### Создание пустого проекта:
|
||||
|
||||
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
|
||||
```commandline
|
||||
npm create vite@latest ./ -- --template react
|
||||
```
|
||||
|
||||
ESLint уже настроен (см. конфиг .eslintrc.json), но для справки можно почитать материал по ссылке
|
||||
|
||||
https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code
|
||||
|
||||
### Установка зависимостей
|
||||
#### Установка зависимостей:
|
||||
|
||||
```commandline
|
||||
npm install
|
||||
```
|
||||
|
||||
### Запуск в режиме разработки
|
||||
#### Запуск проекта:
|
||||
|
||||
```commandline
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Запуск продуктовой версии (production)
|
||||
#### Сборка проекта:
|
||||
|
||||
npm run prod
|
||||
```commandline
|
||||
npm run build
|
||||
```
|
||||
202
add-item.html
202
add-item.html
@ -1,202 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Панель администратора</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||
<header class="w-100 position-sticky top-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
||||
<img src="icons/logo.png" alt="logo" class="me-2">
|
||||
Читай-комната
|
||||
</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarNav">
|
||||
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<a class="nav-link" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link" href="./catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<a class="nav-link" href="./contacts.html">Контакты</a>
|
||||
</li>
|
||||
<div class="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" aria-current="page" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
</li>
|
||||
<p class="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li class="nav-item me-lg-3">
|
||||
<a class="nav-link" href="./registration.html">
|
||||
Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pe-lg-0" href="./cart.html">
|
||||
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container-md d-flex flex-column flex-grow-1 my-0">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center">
|
||||
<img src="https://placehold.co/400x600/#DCDCDC/black" id="image-preview" class="mt-5 mb-4" alt="placeholder" width="400" height="600">
|
||||
</div>
|
||||
<form id="items-form" class="needs-validation col-lg-8 col-xl-7 col-xxl-6" novalidate>
|
||||
<div class="mb-4">
|
||||
<label for="item-category" class="form-label">Категория каталога</label>
|
||||
<select id="item-category" class="form-select" name="selected" required>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="item-title">Название книги</label>
|
||||
<input id="item-title" class="form-control" type="text" required>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="item-author">Автор</label>
|
||||
<input id="item-author" class="form-control" type="text" required>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="item-price">Цена</label>
|
||||
<input id="item-price" name="item-price" class="form-control" value="0.00" min="100.00" step="0.50" type="number" required>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="item-count">Количество</label>
|
||||
<input id="item-count" name="item-count" class="form-control" type="number" value="0" min="1" step="1" required>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="item-descrition">Описание книги</label>
|
||||
<textarea class="form-control" id="item-descrition" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="item-annotation">Аннотация</label>
|
||||
<textarea class="form-control" id="item-annotation" rows="3"></textarea>
|
||||
</div>
|
||||
<p class="mb-3">
|
||||
Xарактеристики:
|
||||
</p>
|
||||
<div class="mb-4 border border-1 border-secondary p-2">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="item-id">ID товара</label>
|
||||
<input id="item-id" class="form-control" type="number" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="item-publisher">Издательство</label>
|
||||
<input id="item-publisher" class="form-control" type="text">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="item-series">Серия</label>
|
||||
<input id="item-series" class="form-control" type="text">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="item-publication-year">Год издания</label>
|
||||
<input id="item-publication-year" class="form-control" type="number">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="item-pages-num">Количество страниц</label>
|
||||
<input id="item-pages-num" class="form-control" type="number">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="item-size">Размер</label>
|
||||
<input id="item-size" class="form-control" type="text">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="item-cover-type">Тип обложки</label>
|
||||
<input id="item-cover-type" class="form-control" type="text">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="item-circulation">Тираж</label>
|
||||
<input id="item-circulation" class="form-control" type="number">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="item-weight">Вес, г</label>
|
||||
<input id="item-weight" class="form-control" type="number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="image">Обложка книги</label>
|
||||
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||||
</div>
|
||||
<a href="/admin.html" class="btn btn-secondary">Назад</a>
|
||||
<div class="text-center mb-5">
|
||||
<button type="submit" class="btn btn-primary w-50 rounded-5" id="add-btn">Сохранить</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer flex-shrink-0">
|
||||
<div class="container-md" id="footer-container">
|
||||
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, 2023.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p class="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
import { linesPageForm } from "./js/lines"
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
linesPageForm();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
149
admin.html
149
admin.html
@ -1,149 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Панель администратора</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||
<header class="w-100 position-sticky top-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
||||
<img src="icons/logo.png" alt="logo" class="me-2">
|
||||
Читай-комната
|
||||
</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarNav">
|
||||
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<a class="nav-link" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link" href="./catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<a class="nav-link" href="./contacts.html">Контакты</a>
|
||||
</li>
|
||||
<div class="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" aria-current="page" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
</li>
|
||||
<p class="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li class="nav-item me-lg-3">
|
||||
<a class="nav-link" href="./registration.html">
|
||||
Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pe-lg-0" href="./cart.html">
|
||||
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container-md d-flex flex-column flex-grow-1 my-0">
|
||||
<div class="row gy-3">
|
||||
<div class="col-12 mt-4 px-0">
|
||||
<div class="block d-flex justify-content-center fs-2 fw-bold mb-3 mb-sm-4" id="admin-title">
|
||||
Панель администратора
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 px-0">
|
||||
<div class="block table-responsive">
|
||||
<table id="items-table" class="table table-hover table-bordered align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Название книги</th>
|
||||
<th scope="col">Автор</th>
|
||||
<th scope="col">Цена</th>
|
||||
<th scope="col">Количество</th>
|
||||
<th scope="col">Сумма</th>
|
||||
<th scope="col">Категория каталога</th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-group-divider"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 px-0">
|
||||
<div class="block mb-4">
|
||||
<a class="btn btn-primary" href="add-item.html">Добавить товар</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer flex-shrink-0">
|
||||
<div class="container-md" id="footer-container">
|
||||
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, 2023.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p class="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
import { linesPageForm } from "./js/lines";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
linesPageForm();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
286
cart.html
286
cart.html
@ -1,286 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Корзина</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||
<header class="w-100 position-sticky top-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
||||
<img src="icons/logo.png" alt="logo" class="me-2">
|
||||
Читай-комната
|
||||
</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarNav">
|
||||
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<a class="nav-link" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link" href="./catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<a class="nav-link" href="./contacts.html">Контакты</a>
|
||||
</li>
|
||||
<div class="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
</li>
|
||||
<p class="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li class="nav-item me-lg-3">
|
||||
<a class="nav-link" href="./registration.html">
|
||||
Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active active-icon pe-lg-0" aria-current="page" href="./cart.html">
|
||||
<img src="icons/card.png" class="p-1" alt="card" width="35" height="40" id="cart-icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container-md d-flex flex-column flex-grow-1">
|
||||
<div class="row gy-3 mb-1">
|
||||
<div class="col-12 mb-3 mb-sm-4 mt-0 px-0">
|
||||
<div class="block d-flex justify-content-center lh-1" id="cart-title">
|
||||
Моя корзина
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 px-0">
|
||||
<div class="block d-flex align-items-end lh-1" id="cart-items-num-text">
|
||||
В корзине два товара:
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 d-flex justify-content-end px-0">
|
||||
<div class="block align-self-end">
|
||||
<button class="cart-button-remove d-flex justify-content-end align-items-end lh-1 border-0 bg-white pe-0">
|
||||
<img src="icons/trash.png" class="trash-icon me-sm-2" alt="trash" width="24" height="24">
|
||||
Удалить все
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 border-top border-black pt-3 d-sm-none">
|
||||
<div class="block">
|
||||
<img src="book_covers/cart/1.png" class="cart-book-cover me-3" alt="cart-book-cover-1" width="88" height="138">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 pt-3 border-top border-black d-sm-none">
|
||||
<div class="block ms-4">
|
||||
<p class="cart-book-description-title mb-2">
|
||||
Наследник Каладана
|
||||
</p>
|
||||
<p class="cart-book-description-author mb-2">
|
||||
Брайан Герберт, Кевин Андерсон
|
||||
</p>
|
||||
<p class="cart-price mb-2">
|
||||
929 р.
|
||||
</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<button type="button" class="button-minus border border-end-0 rounded-start bg-white">
|
||||
–
|
||||
</button>
|
||||
<label class="cart-input-label d-flex">
|
||||
<input type="tel" class="cart-input h-100 w-100 border text-center" placeholder="1">
|
||||
</label>
|
||||
<button type="button" class="button-plus border border-start-0 rounded-end bg-white">
|
||||
+
|
||||
</button>
|
||||
<div class="flex-grow-1"></div>
|
||||
<button class="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
|
||||
<img src="icons/trash.png" class="trash-icon" alt="trash" width="24" height="24">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1 border-top border-black pt-3 d-none d-sm-block">
|
||||
<div class="block">
|
||||
<img src="book_covers/cart/1.png" class="cart-book-cover me-3" alt="cart-book-cover-1" width="88" height="138">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 pt-3 border-top border-black d-none d-sm-block">
|
||||
<div class="cart-book-description block d-flex flex-column justify-content-start ms-5 ms-lg-4 ms-xl-0 ps-0 ps-sm-2 ps-md-0 ps-xl-3 ps-xxl-0">
|
||||
<p class="cart-book-description-title mb-2">
|
||||
Наследник Каладана
|
||||
</p>
|
||||
<p class="cart-book-description-author">
|
||||
Брайан Герберт, Кевин Андерсон
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 pt-2 border-top border-black d-none d-sm-block">
|
||||
<div class="block d-flex align-items-start justify-content-end">
|
||||
<button type="button" class="button-minus border border-end-0 rounded-start bg-white">
|
||||
–
|
||||
</button>
|
||||
<label class="cart-input-label">
|
||||
<input type="tel" class="cart-input h-100 w-100 border text-center" placeholder="1">
|
||||
</label>
|
||||
<button type="button" class="button-plus border border-start-0 rounded-end bg-white">
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 pt-3 border-top border-black d-none d-sm-block">
|
||||
<div class="block d-flex flex-column align-items-end h-100">
|
||||
<p class="cart-price">
|
||||
929 р.
|
||||
</p>
|
||||
<div class="flex-grow-1"></div>
|
||||
<button class="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
|
||||
<img src="icons/trash.png" class="trash-icon me-2" alt="trash" width="24" height="24">
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 border-top border-black pt-3 d-sm-none">
|
||||
<div class="block">
|
||||
<img src="book_covers/cart/2.png" class="cart-book-cover me-3" alt="cart-book-cover-2" width="88" height="138">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 pt-3 border-top border-black d-sm-none">
|
||||
<div class="block ms-4">
|
||||
<p class="cart-book-description-title mb-2">
|
||||
Восхождение фениксов
|
||||
</p>
|
||||
<p class="cart-book-description-author mb-2">
|
||||
Тянься Гуйюань
|
||||
</p>
|
||||
<p class="cart-price mb-2">
|
||||
834 р.
|
||||
</p>
|
||||
<div class="d-flex">
|
||||
<button type="button" class="button-minus border border-end-0 rounded-start bg-white">
|
||||
–
|
||||
</button>
|
||||
<label class="cart-input-label d-flex">
|
||||
<input type="tel" class="cart-input h-100 w-100 border text-center" placeholder="1">
|
||||
</label>
|
||||
<button type="button" class="button-plus border border-start-0 rounded-end bg-white">
|
||||
+
|
||||
</button>
|
||||
<div class="flex-grow-1"></div>
|
||||
<button class="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
|
||||
<img src="icons/trash.png" class="trash-icon" alt="trash" width="24" height="24">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1 border-top border-black pt-3 d-none d-sm-block">
|
||||
<div class="block">
|
||||
<img src="book_covers/cart/2.png" class="cart-book-cover me-3" alt="cart-book-cover-2" width="88" height="138">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 pt-3 border-top border-black d-none d-sm-block">
|
||||
<div class="cart-book-description block d-flex flex-column justify-content-start ms-5 ms-lg-4 ms-xl-0 ps-0 ps-sm-2 ps-md-0 ps-xl-3 ps-xxl-0">
|
||||
<p class="cart-book-description-title mb-2">
|
||||
Восхождение фениксов
|
||||
</p>
|
||||
<p class="cart-book-description-author">
|
||||
Тянься Гуйюань
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 pt-2 border-top border-black d-none d-sm-block">
|
||||
<div class="block d-flex align-items-start justify-content-end">
|
||||
<button type="button" class="button-minus border border-end-0 rounded-start bg-white">
|
||||
–
|
||||
</button>
|
||||
<label class="cart-input-label">
|
||||
<input type="tel" class="cart-input h-100 w-100 border text-center" placeholder="1">
|
||||
</label>
|
||||
<button type="button" class="button-plus border border-start-0 rounded-end bg-white">
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 pt-3 border-top border-black d-none d-sm-block">
|
||||
<div class="block d-flex flex-column align-items-end h-100">
|
||||
<p class="cart-price">
|
||||
834 р.
|
||||
</p>
|
||||
<div class="flex-grow-1"></div>
|
||||
<button class="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
|
||||
<img src="icons/trash.png" class="trash-icon me-2" alt="trash" width="24" height="24">
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 pt-3 border-top border-black px-0">
|
||||
<div class="block d-flex justify-content-end align-items-end lh-1" id="cart-final-price">
|
||||
<span class="me-4" id="cart-final-price-text">Итого:</span> <span id="cart-final-price-value">1763 р.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 px-0">
|
||||
<div class="block d-flex justify-content-end">
|
||||
<button class="btn rounded-5" id="cart-btn-checkout">
|
||||
Перейти к оформлению
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer flex-shrink-0 mt-2">
|
||||
<div class="container-md" id="footer-container">
|
||||
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, 2023.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p class="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,148 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Список категорий</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<header class="w-100 position-sticky top-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
||||
<img src="icons/logo.png" alt="logo" class="me-2">
|
||||
Читай-комната
|
||||
</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarNav">
|
||||
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<a class="nav-link" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link active" aria-current="page" href="./catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<a class="nav-link" href="./contacts.html">Контакты</a>
|
||||
</li>
|
||||
<div class="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
</li>
|
||||
<p class="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li class="nav-item me-lg-3">
|
||||
<a class="nav-link" href="./registration.html">
|
||||
Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pe-lg-0" href="./cart.html">
|
||||
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container-md d-flex flex-column justify-content-center flex-grow-1 my-0">
|
||||
<div class="row">
|
||||
<div class="col-12 ps-0 mt-0 bg-white border border-3 border-top-0 border-bottom-0" id="catalog-categories-mobile">
|
||||
<div class="block d-flex flex-column justify-content-center p-2 h-100">
|
||||
<p class="mb-4" id="catalog-categories-mobile-title">
|
||||
Категории
|
||||
</p>
|
||||
<ul class="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-mobile-list">
|
||||
<li> <a href="/">Книги для подростков</a> </li>
|
||||
<li><a href="/">Комиксы</a></li>
|
||||
<li><a href="/">Манга</a></li>
|
||||
<li><a href="/">Эзотерика</a></li>
|
||||
<li><a href="/">Медицина и здоровье</a></li>
|
||||
<li><a href="/">Кулинария</a></li>
|
||||
<li><a href="/">Детские книги</a></li>
|
||||
<li class="active-category-mobile"><a href="./catalog.html">Художественная литература</a></li>
|
||||
<li><a href="/">Дом и хобби</a></li>
|
||||
<li><a href="/">Наука. Техника. IT</a></li>
|
||||
<li><a href="/">Религия и философия</a></li>
|
||||
<li><a href="/">Психология</a></li>
|
||||
<li><a href="/">Искусство</a></li>
|
||||
<li><a href="/">История. Общество</a></li>
|
||||
<li><a href="/">Право</a></li>
|
||||
<li><a href="/">Книги на английском</a></li>
|
||||
<li><a href="/">Новый год</a></li>
|
||||
<li><a href="/">Публицистика</a></li>
|
||||
<li><a href="/">Эксклюзивные товары</a></li>
|
||||
<li><a href="/">Педагогика и воспитание</a></li>
|
||||
<li><a href="/">Литературные премии</a></li>
|
||||
<li><a href="/">Фэнтези</a></li>
|
||||
<li><a href="/">Ужасы. Мистика</a></li>
|
||||
<li><a href="/">Любовный роман</a></li>
|
||||
<li><a href="/">Юмор и сатира</a></li>
|
||||
<li><a href="/">Проза</a></li>
|
||||
<li><a href="/">Боевики и триллеры</a></li>
|
||||
<li><a href="/">Эпос и фольклор</a></li>
|
||||
<li><a href="/">Научная фантастика</a></li>
|
||||
<li><a href="/">Детективы</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer flex-shrink-0">
|
||||
<div class="container-md" id="footer-container">
|
||||
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, 2023.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p class="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
207
catalog.html
207
catalog.html
@ -1,207 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Каталог</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100 h-100">
|
||||
<header class="w-100 position-sticky top-0 z-3">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
||||
<img src="icons/logo.png" alt="logo" class="me-2">
|
||||
Читай-комната
|
||||
</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarNav">
|
||||
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<a class="nav-link" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link active" aria-current="page" href="./catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<a class="nav-link" href="./contacts.html">Контакты</a>
|
||||
</li>
|
||||
<div class="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
</li>
|
||||
<p class="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li class="nav-item me-lg-3">
|
||||
<a class="nav-link" href="./registration.html">
|
||||
Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pe-lg-0" href="./cart.html">
|
||||
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container-md d-flex flex-column justify-content-center flex-grow-1 my-0">
|
||||
<div class="row gy-3 flex-grow-1">
|
||||
<div class="col-2 d-none d-md-block ps-0 mt-0 bg-white border border-3 border-top-0 border-bottom-0" id="catalog-categories">
|
||||
<div class="block d-flex flex-column justify-content-center p-2 h-100">
|
||||
<p class="mb-4" id="catalog-categories-title">
|
||||
Категории
|
||||
</p>
|
||||
<ul class="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-list">
|
||||
<li> <a href="/">Книги для подростков</a> </li>
|
||||
<li><a href="/">Комиксы</a></li>
|
||||
<li><a href="/">Манга</a></li>
|
||||
<li><a href="/">Эзотерика</a></li>
|
||||
<li><a href="/">Медицина и здоровье</a></li>
|
||||
<li><a href="/">Кулинария</a></li>
|
||||
<li><a href="/">Детские книги</a></li>
|
||||
<li class="active-category"><a href="./catalog.html">Художественная литература</a></li>
|
||||
<li><a href="/">Дом и хобби</a></li>
|
||||
<li><a href="/">Наука. Техника. IT</a></li>
|
||||
<li><a href="/">Религия и философия</a></li>
|
||||
<li><a href="/">Психология</a></li>
|
||||
<li><a href="/">Искусство</a></li>
|
||||
<li><a href="/">История. Общество</a></li>
|
||||
<li><a href="/">Право</a></li>
|
||||
<li><a href="/">Книги на английском</a></li>
|
||||
<li><a href="/">Новый год</a></li>
|
||||
<li><a href="/">Публицистика</a></li>
|
||||
<li><a href="/">Эксклюзивные товары</a></li>
|
||||
<li><a href="/">Педагогика и воспитание</a></li>
|
||||
<li><a href="/">Литературные премии</a></li>
|
||||
<li><a href="/">Фэнтези</a></li>
|
||||
<li><a href="/">Ужасы. Мистика</a></li>
|
||||
<li><a href="/">Любовный роман</a></li>
|
||||
<li><a href="/">Юмор и сатира</a></li>
|
||||
<li><a href="/">Проза</a></li>
|
||||
<li><a href="/">Боевики и триллеры</a></li>
|
||||
<li><a href="/">Эпос и фольклор</a></li>
|
||||
<li><a href="/">Научная фантастика</a></li>
|
||||
<li><a href="/">Детективы</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-10 d-flex flex-column bg-white mt-0 pt-2 pt-lg-5">
|
||||
<div class="row gy-3">
|
||||
<div class="col-12 mb-3 mb-lg-5 px-0 d-md-none">
|
||||
<div class="block d-flex lh-1" id="catalog-section-navigation">
|
||||
<a href="./catalog-mobile.html" class="me-2 text-decoration-none">
|
||||
Каталог
|
||||
</a>
|
||||
<span class="text-secondary me-2">></span>
|
||||
<a href="./catalog.html" class="text-decoration-none">
|
||||
Художественная литература
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 mb-lg-5 px-0">
|
||||
<div class="block d-flex justify-content-center lh-1" id="catalog-title">
|
||||
<div>
|
||||
Художественная литература
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 mb-lg-5 gx-0">
|
||||
<div class="block">
|
||||
<select class="form-select border-black" id="catalog-select">
|
||||
<option selected>Сначала популярные</option>
|
||||
<option value="1">Сначала дешевые</option>
|
||||
<option value="2">Сначала дорогие</option>
|
||||
<option value="3">Сначала со скидкой</option>
|
||||
<option value="4">Сначала новые</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row gy-3" id="book-container">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-5 mt-sm-4 mt-lg-5 mb-2 gx-0">
|
||||
<div class="block d-flex">
|
||||
<div class="me-2" id="catalog-page-navigation">
|
||||
<a href="./catalog.html" id="catalog-selected-page">1</a>
|
||||
<a href="/">2</a>
|
||||
<a href="/">3</a>
|
||||
<a href="/">4</a>
|
||||
<a href="/">5</a>
|
||||
<a href="/">6</a>
|
||||
<a href="/">...</a>
|
||||
<a href="/">2310</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer flex-shrink-0">
|
||||
<div class="container-md" id="footer-container">
|
||||
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, 2023.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p class="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="module">
|
||||
import { linesPageForm } from "./js/lines";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
linesPageForm();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
164
contacts.html
164
contacts.html
@ -1,164 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Контакты</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||
<header class="w-100 position-sticky top-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
||||
<img src="icons/logo.png" alt="logo" class="me-2">
|
||||
Читай-комната
|
||||
</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarNav">
|
||||
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<a class="nav-link" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link" href="./catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<a class="nav-link active" aria-current="page" href="./contacts.html">Контакты</a>
|
||||
</li>
|
||||
<div class="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
</li>
|
||||
<p class="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li class="nav-item me-lg-3">
|
||||
<a class="nav-link" href="./registration.html">
|
||||
Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pe-lg-0" href="./cart.html">
|
||||
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container-md d-flex flex-column justify-content-center flex-grow-1">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 px-0 me-lg-5">
|
||||
<div class="block d-flex flex-column align-items-start">
|
||||
<p class="mb-4 mb-sm-5 lh-1" id="contacts-title">
|
||||
Контакты
|
||||
</p>
|
||||
<div class="contacts-item d-flex mb-5">
|
||||
<img src="icons/phone-call.png" class="contacts-icon me-4" alt="phone-call" width="88" height="88">
|
||||
<div class="d-flex flex-column">
|
||||
<p class="contacts-item-main-info mb-3">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
<p class="contacts-item-clarification">
|
||||
Служба клиентской поддержки
|
||||
c 8:00 - 22:00 (Мск)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contacts-item d-flex mb-5">
|
||||
<img src="icons/email.png" class="contacts-icon me-4" alt="email" width="88" height="88">
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<p class="contacts-item-main-info mb-3">
|
||||
readroom@mail.ru
|
||||
</p>
|
||||
<p class="contacts-item-clarification">
|
||||
Электронный адрес компании
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contacts-item d-flex mb-3">
|
||||
<img src="icons/skype.png" class="contacts-icon me-4" alt="skype" width="88" height="88">
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<p class="contacts-item-main-info">
|
||||
Пообщайтесь с сотрудниками по видеосвязи
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/" class="mb-3 mb-sm-4 text-decoration-none" id="skype-link">
|
||||
Перейти в Skype
|
||||
</a>
|
||||
<div class="mb-4 mb-sm-5 mt-2 mb-lg-0">
|
||||
<p class="mb-3" id="contacts-address">
|
||||
Наш адрес:
|
||||
</p>
|
||||
<p id="contacts-address-value">
|
||||
432064, Россия, г. Ульяновск, проспект Врача Сурова, 2А
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col px-0 align-self-center">
|
||||
<div class="block d-flex justify-content-center justify-content-lg-end">
|
||||
<img src="icons/map.png" class="border border-black border-2 img-fluid h-100" alt="map" width="665" height="689">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer flex-shrink-0">
|
||||
<div class="container-md" id="footer-container">
|
||||
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, 2023.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p class="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
852
css/style.css
852
css/style.css
@ -1,852 +0,0 @@
|
||||
body {
|
||||
font-family: Montserrat, Arial;
|
||||
background-color: rgb(238, 236, 236);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 4%;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header nav {
|
||||
background-color: rgb(23, 154, 183);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#logo, .nav-link, #catalog-categories-list li a,
|
||||
#catalog-page-navigation a, #catalog-categories-mobile-list li a,
|
||||
#password-help a, #login-admin a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#logo {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 900 !important;
|
||||
text-decoration: underline;
|
||||
text-decoration-skip-ink: none;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#cart-icon {
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.active-icon #cart-icon {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
#search-bar {
|
||||
min-width: 94px;
|
||||
}
|
||||
|
||||
#search-bar::placeholder {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgb(145, 141, 141);
|
||||
}
|
||||
|
||||
header nav a {
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
header nav a:hover {
|
||||
color: rgb(6, 69, 173) !important;
|
||||
}
|
||||
|
||||
#cart-icon:hover {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.active-icon #cart-icon:hover {
|
||||
border-color: rgb(6, 69, 173);
|
||||
}
|
||||
|
||||
.main-page-section-title {
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.main-page-section-title-text {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.main-page-price {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.main-page-book-title {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-page-author {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: rgb(97, 95, 95);
|
||||
}
|
||||
|
||||
#product-card-order-container {
|
||||
width: 294px;
|
||||
}
|
||||
|
||||
#product-card-book-name {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#product-card-author {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgb(14, 173, 208)
|
||||
}
|
||||
|
||||
#product-card-characteristics {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#product-card-characteristics dt {
|
||||
color: rgb(97, 95, 95);
|
||||
font-weight: 600 !important;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#product-card-characteristics dd {
|
||||
padding-left: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#product-card-text-available {
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
color: rgb(80, 176, 84);
|
||||
}
|
||||
|
||||
#product-card-price {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#product-card-button-add {
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background-color: rgb(23, 154, 183);
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
#product-card-button-add:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.product-card-book-description-h {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.product-card-book-description-text {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#contacts-title {
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.contacts-item {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.contacts-item-main-info {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.contacts-item-clarification {
|
||||
font-size: 16px;
|
||||
color: rgb(145, 141, 141);
|
||||
}
|
||||
|
||||
#skype-link {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
color: rgb(6, 69, 173);
|
||||
}
|
||||
|
||||
#contacts-address {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#contacts-address-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#cart-title {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#cart-items-num-text {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.cart-button-remove {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: rgb(145, 141, 141);
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.cart-button-remove:hover {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.cart-book-description {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cart-book-description-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.cart-book-description-author {
|
||||
font-size: 16px;
|
||||
color: rgb(145, 141, 141);
|
||||
}
|
||||
|
||||
.button-minus, .button-plus {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
width: 32px;
|
||||
height: 34px;
|
||||
color: rgb(145, 141, 141);
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.button-minus:hover, .button-plus:hover {
|
||||
background-color: rgb(114, 187, 5) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cart-input-label {
|
||||
width: 42px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.cart-input {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
border-color: rgb(222, 226, 230) !important;
|
||||
}
|
||||
|
||||
.cart-input::placeholder {
|
||||
color:black;
|
||||
}
|
||||
|
||||
.cart-price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#cart-final-price {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#cart-final-price-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#cart-final-price-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#cart-btn-checkout {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
background-color: rgb(217, 217, 217);
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
#cart-btn-checkout:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
#catalog-categories, #catalog-categories-mobile {
|
||||
border-color: rgb(23, 154, 183) !important;
|
||||
}
|
||||
|
||||
#catalog-categories-title, #catalog-categories-mobile-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#catalog-categories-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#catalog-categories-list, #catalog-categories-mobile-list {
|
||||
font-weight: 500;
|
||||
color:rgb(6, 69, 173) !important;
|
||||
}
|
||||
|
||||
#catalog-categories-list {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.active-category, .active-category-mobile {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-title {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-list {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#catalog-title {
|
||||
font-size: 40px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#catalog-select {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
width: 264px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.catalog-price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.catalog-book-title,
|
||||
.catalog-author {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.catalog-bth-checkout {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
background-color: rgb(217, 217, 217);
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.catalog-bth-checkout:hover {
|
||||
background-color: rgb(114, 187, 5) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#catalog-page-navigation {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#catalog-selected-page {
|
||||
color: rgb(80, 176, 84) !important;
|
||||
}
|
||||
|
||||
#catalog-page-navigation a {
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
#catalog-page-navigation a:hover {
|
||||
color: rgb(0, 0, 238) !important;
|
||||
}
|
||||
|
||||
#catalog-section-navigation {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#login-input-email, #login-input-password,
|
||||
#reg-input-name, #reg-input-email, .reg-input-password {
|
||||
font-size: 16px;
|
||||
min-width: 165px;
|
||||
}
|
||||
|
||||
#login-title, #reg-title {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#login-btn, #reg-btn {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
background-color: rgb(6, 69, 173);
|
||||
transition: opacity 0.25s;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
#login-btn:hover, #reg-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
#password-help, #login-admin {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
color: rgb(145, 141, 141);
|
||||
}
|
||||
|
||||
#add-btn {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: rgb(23, 154, 183);
|
||||
color: white;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
#footer-container {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
#footer-row {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
#footer-copyright {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#footer-phone-number-text {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#footer-social-media-text {
|
||||
font-size: 19px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1200px) {
|
||||
#logo {
|
||||
margin-right: 25px !important;
|
||||
}
|
||||
|
||||
.header-link {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
#header-contacts, #header-search {
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
header nav {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
#catalog-categories-list {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.active-category {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#catalog-categories-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#catalog-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#catalog-categories-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#catalog-categories-list {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.active-category {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#catalog-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#product-card-characteristics {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#product-card-characteristics dt,
|
||||
#product-card-characteristics dd {
|
||||
text-align: left;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.cart-book-cover {
|
||||
width: 66px;
|
||||
height: 104px;
|
||||
}
|
||||
|
||||
.cart-button-remove {
|
||||
font-size: 0 !important;
|
||||
}
|
||||
|
||||
.catalog-book-description, .catalog-btn-checkout-div {
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
#admin-title {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
#login-input-email, #login-input-password,
|
||||
#login-btn, #password-help, #login-admin {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#reg-input-name, #reg-input-email,
|
||||
.reg-input-password, #reg-btn {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#login-title, #reg-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 475px) {
|
||||
#cart-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#cart-items-num-text, #cart-final-price-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.cart-book-description-title, #cart-final-price-value {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cart-book-description-author {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cart-price, #cart-btn-checkout,
|
||||
.cart-input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.button-minus, .button-plus {
|
||||
font-size: 16px;
|
||||
width: 26px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.cart-input-label {
|
||||
width: 34px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-title {
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-list {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#image-preview {
|
||||
width: 300px;
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.main-page-book-title, .main-page-author {
|
||||
font-size: 0 !important;
|
||||
}
|
||||
|
||||
.main-page-book-cover {
|
||||
width: 80px;
|
||||
height: 122px;
|
||||
}
|
||||
|
||||
#footer-copyright {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
#footer-phone-number-text {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
#footer-social-media-text {
|
||||
font-size: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
#catalog-section-navigation {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#login-btn, #password-help, #login-admin,
|
||||
.reg-input-password, #reg-btn {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#reg-input-name, #reg-input-email,
|
||||
#login-input-email, #login-input-password {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#login-title, #reg-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 361px) {
|
||||
#logo {
|
||||
font-size: 0 !important;
|
||||
}
|
||||
|
||||
.contacts-icon {
|
||||
width: 55px !important;
|
||||
height: 55px !important;
|
||||
}
|
||||
|
||||
#contacts-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.contacts-item-main-info, #skype-link,
|
||||
#contacts-address {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.contacts-item-clarification, #contacts-address-value {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#catalog-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#catalog-select {
|
||||
font-size: 11px;
|
||||
width: 164px;
|
||||
height: 28px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#image-preview {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 335px) {
|
||||
#cart-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#cart-items-num-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cart-book-description-title, #cart-final-price-value {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.cart-book-description-author {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
#cart-final-price-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button-minus, .button-plus {
|
||||
font-size: 10px;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.cart-input-label {
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.cart-input, #cart-btn-checkout,
|
||||
.cart-price {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.trash-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.cart-book-cover {
|
||||
width: 44px;
|
||||
height: 69px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
#product-card-price {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
#novelty-icon {
|
||||
width: 74px !important;
|
||||
height: 25px !important;
|
||||
}
|
||||
|
||||
#discont-icon {
|
||||
width: 49px !important;
|
||||
height: 25px !important;
|
||||
}
|
||||
|
||||
.product-card-book-description-h, .product-card-book-description-text,
|
||||
#product-card-button-add, #product-card-text-available {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
#catalog-section-navigation {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-title {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-list {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 282px) {
|
||||
#footer-copyright {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
#footer-phone-number-text {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
#admin-title {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 272px) {
|
||||
#fire-icon {
|
||||
height: 38px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.catalog-book-description, .catalog-btn-checkout-div {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.contacts-icon {
|
||||
width: 44px !important;
|
||||
height: 44px !important;
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
|
||||
#contacts-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.contacts-item-main-info, #skype-link
|
||||
#contacts-address {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#catalog-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#catalog-select {
|
||||
width: 140px;
|
||||
height: 22px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#catalog-select, #contacts-address-value,
|
||||
.contacts-item-clarification {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
#catalog-page-navigation {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#catalog-section-navigation {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-list {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#image-preview {
|
||||
width: 155px;
|
||||
height: 235px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 204px) {
|
||||
#footer-copyright {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
#footer-phone-number-text {
|
||||
font-size: 11px !important;
|
||||
}
|
||||
}
|
||||
503
index.html
503
index.html
@ -1,501 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Главная</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image" href="src/assets/icons/logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Читай-комната</title>
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<header class="w-100 position-sticky top-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
||||
<img src="icons/logo.png" alt="logo" class="me-2">
|
||||
Читай-комната
|
||||
</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarNav">
|
||||
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<a class="nav-link active" aria-current="page" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link" href="./catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<a class="nav-link" href="./contacts.html">Контакты</a>
|
||||
</li>
|
||||
<div class="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
</li>
|
||||
<p class="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li class="nav-item me-lg-3">
|
||||
<a class="nav-link" href="./registration.html">
|
||||
Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pe-lg-0" href="./cart.html">
|
||||
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container-md d-flex flex-column justify-content-center flex-grow-1">
|
||||
<div class="row bg-white pb-1 mb-3 rounded-3 gy-3">
|
||||
<div class="col-12 ms-2 mt-1">
|
||||
<div class="main-page-section-title block d-flex align-items-end">
|
||||
<img src="icons/fire.png" class="me-2" alt="fire" width="25" height="30" id="fire-icon">
|
||||
<p class="main-page-section-title-text lh-1 m-0">
|
||||
Горячие новинки
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/novelties/1.png" class="main-page-book-cover" alt="book-cover-novelties-1" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
932 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Вавилон. Сокрытая история
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Ребекка Ф. Куанг
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="./product_card.html">
|
||||
<img src="book_covers/novelties/2.png" class="main-page-book-cover" alt="book-cover-novelties-2" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
775 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Форсайт
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Сергей Лукьяненко
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/novelties/3.png" class="main-page-book-cover" alt="book-cover-novelties-3" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
642 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Во главе раздора
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Лия Арден
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/novelties/4.png" class="main-page-book-cover" alt="book-cover-novelties-4" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
949 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Путешествие в Элевсин
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Виктор Пелевин
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/novelties/5.png" class="main-page-book-cover" alt="book-cover-novelties-5" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
699 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Восстание клана Чан
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Тянься Гуйюань
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/novelties/6.png" class="main-page-book-cover" alt="book-cover-novelties-6" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
551 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Дебютная постановка. Том 2
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Александра Маринина
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row bg-white pb-1 mb-3 rounded-3 gy-3">
|
||||
<div class="col-12 ms-2 mt-1">
|
||||
<div class="main-page-section-title block d-flex align-items-end">
|
||||
<p class="main-page-section-title-text lh-1 m-0">
|
||||
Книги по акциям
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/promotions/1.png" class="main-page-book-cover" alt="book-cover-promotions-1" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
576 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Шестерка воронов
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Ли Бардуго
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="./product_card.html">
|
||||
<img src="book_covers/promotions/2.png" class="main-page-book-cover" alt="book-cover-promotions-2" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
200 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Портрет Дориана Грея
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Оскар Уальд
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/promotions/3.png" class="main-page-book-cover" alt="book-cover-promotions-3" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
768 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Царство Страха
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Керри Манискалко
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/promotions/4.png" class="main-page-book-cover" alt="book-cover-promotions-4" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
162 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Клуб самоубийц
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Роберт Льюис Стивенсон
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/promotions/5.png" class="main-page-book-cover" alt="book-cover-promotions-5" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
600 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Некромант-одиночка. Новелла. Том 1
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
JJJ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/promotions/6.png" class="main-page-book-cover" alt="book-cover-promotions-6" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
711 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Кристальный пик
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Гор А.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row bg-white pb-1 rounded-3 gy-3">
|
||||
<div class="col-12 ms-2 mt-1">
|
||||
<div class="main-page-section-title block d-flex align-items-end">
|
||||
<p class="main-page-section-title-text lh-1 m-0">
|
||||
Выбор редакции
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/recommendations/1.png" class="main-page-book-cover" alt="book-cover-recommendations-1" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
1001 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Испытание
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Трейси Вульф
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="./product_card.html">
|
||||
<img src="book_covers/recommendations/2.png" class="main-page-book-cover" alt="book-cover-recommendations-2" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
210 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Мастер и Маргарита
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Михаил Булгаков
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/recommendations/3.png" class="main-page-book-cover" alt="book-cover-recommendations-3" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
618 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Песнь Сорокопута
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Фрэнсис Кель
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/recommendations/4.png" class="main-page-book-cover" alt="book-cover-recommendations-4" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
754 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Кодекс Алеры. Кн. 1. Фурии Кальдерона
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Джим Батчер
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/recommendations/5.png" class="main-page-book-cover" alt="book-cover-recommendations-5" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
711 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Небесная река
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Деннис Тейлор
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/recommendations/6.png" class="main-page-book-cover" alt="book-cover-recommendations-6" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
699 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Кузнец магии. Клинок тайн
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Триша Левенселлер
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer flex-shrink-0">
|
||||
<div class="container-md" id="footer-container">
|
||||
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, 2023.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p class="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<body>
|
||||
<div id="root" class="d-flex flex-column min-vh-100 h-100"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,204 +0,0 @@
|
||||
// модуль для работы с REST API сервера
|
||||
|
||||
// адрес сервера
|
||||
const serverUrl = "http://localhost:8081";
|
||||
|
||||
// функция возвращает объект нужной структуры для отправки на сервер
|
||||
function createLineObject(
|
||||
title,
|
||||
author,
|
||||
price,
|
||||
count,
|
||||
descrition,
|
||||
annotation,
|
||||
itemId,
|
||||
publisher,
|
||||
series,
|
||||
publicationYear,
|
||||
pagesNum,
|
||||
size,
|
||||
coverType,
|
||||
circulation,
|
||||
weight,
|
||||
category,
|
||||
image,
|
||||
) {
|
||||
return {
|
||||
title,
|
||||
author,
|
||||
price: parseFloat(price).toFixed(2),
|
||||
count,
|
||||
sum: parseFloat(price * count).toFixed(2),
|
||||
descrition,
|
||||
annotation,
|
||||
itemId,
|
||||
publisher,
|
||||
series,
|
||||
publicationYear,
|
||||
pagesNum,
|
||||
size,
|
||||
coverType,
|
||||
circulation,
|
||||
weight,
|
||||
categoriesId: category,
|
||||
image,
|
||||
};
|
||||
}
|
||||
|
||||
// обращение к серверу для получения всех категорий каталога (get)
|
||||
export async function getAllCategoryTypes() {
|
||||
const response = await fetch(`${serverUrl}/categories`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для получения всех записей (get)
|
||||
export async function getAllLines() {
|
||||
const response = await fetch(`${serverUrl}/lines?_expand=categories`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для получения записи по первичному ключу (id) (get)
|
||||
// id передается в качестве части пути URL get-запроса
|
||||
export async function getLine(id) {
|
||||
const response = await fetch(`${serverUrl}/lines/${id}?_expand=categories`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для создания записи (post)
|
||||
// объект отправляется в теле запроса (body)
|
||||
export async function createLine(
|
||||
title,
|
||||
author,
|
||||
price,
|
||||
count,
|
||||
descrition,
|
||||
annotation,
|
||||
itemId,
|
||||
publisher,
|
||||
series,
|
||||
publicationYear,
|
||||
pagesNum,
|
||||
size,
|
||||
coverType,
|
||||
circulation,
|
||||
weight,
|
||||
category,
|
||||
image,
|
||||
) {
|
||||
const itemObject = createLineObject(
|
||||
title,
|
||||
author,
|
||||
price,
|
||||
count,
|
||||
descrition,
|
||||
annotation,
|
||||
itemId,
|
||||
publisher,
|
||||
series,
|
||||
publicationYear,
|
||||
pagesNum,
|
||||
size,
|
||||
coverType,
|
||||
circulation,
|
||||
weight,
|
||||
category,
|
||||
image,
|
||||
);
|
||||
|
||||
const options = {
|
||||
method: "POST",
|
||||
body: JSON.stringify(itemObject),
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
const response = await fetch(`${serverUrl}/lines`, options);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для обновления записи по id (put)
|
||||
// объект отправляется в теле запроса (body)
|
||||
// id передается в качестве части пути URL get-запроса
|
||||
export async function updateLine(
|
||||
id,
|
||||
title,
|
||||
author,
|
||||
price,
|
||||
count,
|
||||
descrition,
|
||||
annotation,
|
||||
itemId,
|
||||
publisher,
|
||||
series,
|
||||
publicationYear,
|
||||
pagesNum,
|
||||
size,
|
||||
coverType,
|
||||
circulation,
|
||||
weight,
|
||||
category,
|
||||
image,
|
||||
) {
|
||||
const itemObject = createLineObject(
|
||||
title,
|
||||
author,
|
||||
price,
|
||||
count,
|
||||
descrition,
|
||||
annotation,
|
||||
itemId,
|
||||
publisher,
|
||||
series,
|
||||
publicationYear,
|
||||
pagesNum,
|
||||
size,
|
||||
coverType,
|
||||
circulation,
|
||||
weight,
|
||||
category,
|
||||
image,
|
||||
);
|
||||
|
||||
const options = {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(itemObject),
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для удаления записи по id (delete)
|
||||
// id передается в качестве части пути URL get-запроса
|
||||
export async function deleteLine(id) {
|
||||
const options = {
|
||||
method: "DELETE",
|
||||
};
|
||||
|
||||
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
167
js/lines-ui.js
167
js/lines-ui.js
@ -1,167 +0,0 @@
|
||||
// модуль для работы с элементами управления
|
||||
|
||||
// объект для удобного получения элементов
|
||||
// при обращении к атрибуту объекта вызывается
|
||||
// нужная функция для поиска элемента
|
||||
export const cntrls = {
|
||||
table: document.querySelector("#items-table tbody"),
|
||||
form: document.getElementById("items-form"),
|
||||
lineId: document.getElementById("items-line-id"),
|
||||
title: document.getElementById("item-title"),
|
||||
author: document.getElementById("item-author"),
|
||||
price: document.getElementById("item-price"),
|
||||
count: document.getElementById("item-count"),
|
||||
descrition: document.getElementById("item-descrition"),
|
||||
annotation: document.getElementById("item-annotation"),
|
||||
itemId: document.getElementById("item-id"),
|
||||
publisher: document.getElementById("item-publisher"),
|
||||
series: document.getElementById("item-series"),
|
||||
publicationYear: document.getElementById("item-publication-year"),
|
||||
pagesNum: document.getElementById("item-pages-num"),
|
||||
size: document.getElementById("item-size"),
|
||||
coverType: document.getElementById("item-cover-type"),
|
||||
circulation: document.getElementById("item-circulation"),
|
||||
weight: document.getElementById("item-weight"),
|
||||
сategoriesType: document.getElementById("item-category"),
|
||||
image: document.getElementById("image"),
|
||||
imagePreview: document.getElementById("image-preview"),
|
||||
catalogBooks: document.getElementById("book-container"),
|
||||
};
|
||||
|
||||
// Дефолтное превью
|
||||
export const imagePlaceholder = "https://placehold.co/400x600/#DCDCDC/black";
|
||||
|
||||
// функция создает тег option для select
|
||||
// <option value="" selected>name</option>
|
||||
export function createCategoriesOption(name, value = "", isSelected = false) {
|
||||
const option = document.createElement("option");
|
||||
option.value = value || "";
|
||||
option.selected = isSelected;
|
||||
option.text = name;
|
||||
return option;
|
||||
}
|
||||
|
||||
// функция создает ссылку (a) для таблицы
|
||||
// при нажатии вызывается callback
|
||||
// ссылка "оборачивается" тегом td
|
||||
function createTableAnchor(button, callback) {
|
||||
const a = document.createElement("a");
|
||||
a.href = "#";
|
||||
a.appendChild(button);
|
||||
a.onclick = (event) => {
|
||||
// чтобы в URL не добавлялась решетка
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
callback();
|
||||
};
|
||||
|
||||
const td = document.createElement("td");
|
||||
td.appendChild(a);
|
||||
return td;
|
||||
}
|
||||
|
||||
function createCatalogAnchor(image, callback) {
|
||||
const a = document.createElement("a");
|
||||
a.href = "#";
|
||||
a.appendChild(image);
|
||||
a.onclick = (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
callback();
|
||||
};
|
||||
|
||||
return a;
|
||||
}
|
||||
|
||||
// функция создает колонку таблицы с текстом value
|
||||
// <td>value</td>
|
||||
function createTableColumn(value) {
|
||||
const td = document.createElement("td");
|
||||
td.textContent = value;
|
||||
return td;
|
||||
}
|
||||
|
||||
// функция создает строку таблицы
|
||||
export function createTableRow(item, index, editPageCallback, deleteCallback) {
|
||||
const rowNumber = document.createElement("th");
|
||||
rowNumber.scope = "row";
|
||||
rowNumber.textContent = index + 1;
|
||||
|
||||
const row = document.createElement("tr");
|
||||
row.id = `line-${item.id}`;
|
||||
|
||||
row.appendChild(rowNumber);
|
||||
row.appendChild(createTableColumn(item.title));
|
||||
row.appendChild(createTableColumn(item.author));
|
||||
row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
|
||||
row.appendChild(createTableColumn(item.count));
|
||||
row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
|
||||
row.appendChild(createTableColumn(item.categories.name));
|
||||
// редактировать на странице add-item
|
||||
const btnEdit = document.createElement('button');
|
||||
btnEdit.className = 'btn btn-primary w-100';
|
||||
btnEdit.textContent = 'Редактировать';
|
||||
row.appendChild(createTableAnchor(btnEdit, editPageCallback));
|
||||
// удаление
|
||||
const btnDelete = document.createElement('button');
|
||||
btnDelete.className = 'btn btn-primary w-100';
|
||||
btnDelete.textContent = 'Удалить';
|
||||
row.appendChild(createTableAnchor(btnDelete, deleteCallback));
|
||||
return row;
|
||||
}
|
||||
|
||||
export function createCatalogItem(item, callback) {
|
||||
const col = document.createElement("div");
|
||||
col.className = 'col-sm-6 col-md-4 col-lg-3 mt-4';
|
||||
|
||||
const block = document.createElement("div");
|
||||
block.className = 'block d-flex flex-column h-100';
|
||||
|
||||
const imgDiv = document.createElement("div");
|
||||
imgDiv.className = 'd-flex justify-content-center mb-4';
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.src = item.image;
|
||||
img.className = 'catalog-book-cover';
|
||||
img.alt = 'book-cover-catalog-1';
|
||||
img.width = '155';
|
||||
img.height = '245';
|
||||
imgDiv.appendChild(createCatalogAnchor(img, callback));
|
||||
|
||||
const bookDescription = document.createElement("div");
|
||||
bookDescription.className = 'catalog-book-description d-flex flex-column align-items-start';
|
||||
|
||||
const price = document.createElement("p");
|
||||
price.className = 'catalog-price mb-3';
|
||||
const priceValue = parseInt(item.price, 10);
|
||||
price.textContent = `${priceValue} ₽`;
|
||||
const title = document.createElement("p");
|
||||
title.className = 'catalog-book-title mb-3';
|
||||
title.textContent = item.title;
|
||||
const author = document.createElement("p");
|
||||
author.className = 'catalog-author mb-3';
|
||||
author.textContent = item.author;
|
||||
|
||||
bookDescription.appendChild(price);
|
||||
bookDescription.appendChild(title);
|
||||
bookDescription.appendChild(author);
|
||||
|
||||
const flexDiv = document.createElement("div");
|
||||
flexDiv.className = 'flex-grow-1';
|
||||
|
||||
const btnDiv = document.createElement("div");
|
||||
btnDiv.className = 'catalog-btn-checkout-div d-flex justify-content-start';
|
||||
|
||||
const btn = document.createElement("btn");
|
||||
btn.className = 'catalog-bth-checkout btn rounded-5 px-3';
|
||||
btn.textContent = 'В корзину';
|
||||
btnDiv.appendChild(btn);
|
||||
|
||||
block.appendChild(imgDiv);
|
||||
block.appendChild(bookDescription);
|
||||
block.appendChild(flexDiv);
|
||||
block.appendChild(btnDiv);
|
||||
|
||||
col.appendChild(block);
|
||||
return col;
|
||||
}
|
||||
366
js/lines.js
366
js/lines.js
@ -1,366 +0,0 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
// модуль с логикой
|
||||
|
||||
import {
|
||||
createLine, deleteLine, getAllCategoryTypes, getAllLines, getLine, updateLine,
|
||||
} from "./lines-rest-api";
|
||||
import {
|
||||
cntrls, createCategoriesOption, createTableRow, imagePlaceholder, createCatalogItem,
|
||||
} from "./lines-ui";
|
||||
|
||||
async function drawCategoriesSelect() {
|
||||
// вызов метода REST API для получения списка категорий каталога
|
||||
const data = await getAllCategoryTypes();
|
||||
// очистка содержимого select
|
||||
// удаляется все, что находится между тегами <select></select>
|
||||
// но не атрибуты
|
||||
if (cntrls.сategoriesType) {
|
||||
cntrls.сategoriesType.innerHTML = "";
|
||||
// пустое значение
|
||||
cntrls.сategoriesType.appendChild(createCategoriesOption("Выберите значение", "", true));
|
||||
// цикл по результату ответа от сервера
|
||||
data.forEach((category) => {
|
||||
cntrls.сategoriesType.appendChild(createCategoriesOption(category.name, category.id));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function drawLinesTable() {
|
||||
console.info("Try to load data");
|
||||
if (!cntrls.table) {
|
||||
return;
|
||||
}
|
||||
// вызов метода REST API для получения всех записей
|
||||
const data = await getAllLines();
|
||||
// очистка содержимого table
|
||||
// удаляется все, что находится между тегами <table></table>
|
||||
// но не атрибуты
|
||||
cntrls.table.innerHTML = "";
|
||||
// цикл по результату ответа от сервера
|
||||
// используется лямбда-выражение
|
||||
// (item, index) => {} аналогично function(item, index) {}
|
||||
data.forEach((item, index) => {
|
||||
cntrls.table.appendChild(
|
||||
createTableRow(
|
||||
item,
|
||||
index,
|
||||
// функции передаются в качестве параметра
|
||||
// это очень удобно, так как аргументы функций доступны только
|
||||
// в данном месте кода и не передаются в сервисные модули
|
||||
() => location.assign(`add-item.html?id=${item.id}`),
|
||||
() => removeLine(item.id),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function addLine(
|
||||
title,
|
||||
author,
|
||||
price,
|
||||
count,
|
||||
descrition,
|
||||
annotation,
|
||||
itemId,
|
||||
publisher,
|
||||
series,
|
||||
publicationYear,
|
||||
pagesNum,
|
||||
size,
|
||||
coverType,
|
||||
circulation,
|
||||
weight,
|
||||
category,
|
||||
image,
|
||||
) {
|
||||
console.info("Try to add item");
|
||||
// вызов метода REST API для добавления записи
|
||||
const data = await createLine(
|
||||
title,
|
||||
author,
|
||||
price,
|
||||
count,
|
||||
descrition,
|
||||
annotation,
|
||||
itemId,
|
||||
publisher,
|
||||
series,
|
||||
publicationYear,
|
||||
pagesNum,
|
||||
size,
|
||||
coverType,
|
||||
circulation,
|
||||
weight,
|
||||
category,
|
||||
image,
|
||||
);
|
||||
console.info("Added");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
async function editLine(
|
||||
id,
|
||||
title,
|
||||
author,
|
||||
price,
|
||||
count,
|
||||
descrition,
|
||||
annotation,
|
||||
itemId,
|
||||
publisher,
|
||||
series,
|
||||
publicationYear,
|
||||
pagesNum,
|
||||
size,
|
||||
coverType,
|
||||
circulation,
|
||||
weight,
|
||||
category,
|
||||
image,
|
||||
) {
|
||||
console.info("Try to update item");
|
||||
// вызов метода REST API для обновления записи
|
||||
const data = await updateLine(
|
||||
id,
|
||||
title,
|
||||
author,
|
||||
price,
|
||||
count,
|
||||
descrition,
|
||||
annotation,
|
||||
itemId,
|
||||
publisher,
|
||||
series,
|
||||
publicationYear,
|
||||
pagesNum,
|
||||
size,
|
||||
coverType,
|
||||
circulation,
|
||||
weight,
|
||||
category,
|
||||
image,
|
||||
);
|
||||
console.info("Updated");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
async function removeLine(id) {
|
||||
if (!confirm("Вы действительно хотите удалить этот товар?")) {
|
||||
console.info("Отменено");
|
||||
return;
|
||||
}
|
||||
console.info("Попытка удалить элемент");
|
||||
// вызов метода REST API для удаления записи
|
||||
const data = await deleteLine(id);
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
// функция для получения содержимого файла в виде base64 строки
|
||||
// https://ru.wikipedia.org/wiki/Base64
|
||||
async function readFile(file) {
|
||||
const reader = new FileReader();
|
||||
|
||||
// создание Promise-объекта для использования функции
|
||||
// с помощью await (асинхронно) без коллбэков (callback)
|
||||
// https://learn.javascript.ru/promise
|
||||
return new Promise((resolve, reject) => {
|
||||
// 2. "Возвращаем" содержимое когда файл прочитан
|
||||
// через вызов resolve
|
||||
// Если не использовать Promise, то всю работу по взаимодействию
|
||||
// с REST API пришлось бы делать в обработчике (callback) функции
|
||||
// onloadend
|
||||
reader.onloadend = () => {
|
||||
const fileContent = reader.result;
|
||||
// Здесь могла бы быть работа с REST API
|
||||
// Чтение заканчивает выполняться здесь
|
||||
resolve(fileContent);
|
||||
};
|
||||
// 3. Возвращаем ошибку
|
||||
reader.onerror = () => {
|
||||
// Или здесь в случае ошибки
|
||||
reject(new Error("oops, something went wrong with the file reader."));
|
||||
};
|
||||
// Шаг 1. Сначала читаем файл
|
||||
// Чтение начинает выполняться здесь
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
// функция для обновления блока с превью выбранного изображения
|
||||
async function updateImagePreview() {
|
||||
// получение выбранного файла
|
||||
// возможен выбор нескольких файлов, поэтому необходимо получить только первый
|
||||
const file = cntrls.image.files[0];
|
||||
// чтение содержимого файла в виде base64 строки
|
||||
const fileContent = await readFile(file);
|
||||
console.info("base64 ", fileContent);
|
||||
// обновление атрибута src для тега img с id image-preview
|
||||
cntrls.imagePreview.src = fileContent;
|
||||
}
|
||||
|
||||
export async function fillOutCatalog() {
|
||||
console.info("Try to load catalog data");
|
||||
const data = await getAllLines();
|
||||
|
||||
if (cntrls.catalogBooks) {
|
||||
cntrls.catalogBooks.innerHTML = "";
|
||||
|
||||
data.forEach((item) => {
|
||||
cntrls.catalogBooks.appendChild(
|
||||
createCatalogItem(
|
||||
item,
|
||||
() => location.assign(`product_card.html`),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Функция для обработки создания и редактирования элементов таблицы через страницу add-item.html
|
||||
export async function linesPageForm() {
|
||||
console.info("linesPageForm");
|
||||
|
||||
// загрузка и заполнение select со списком товаров
|
||||
drawCategoriesSelect();
|
||||
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
|
||||
// func1 = (id) => {} аналогично function func1(id) {}
|
||||
const goBack = () => location.assign("/admin.html");
|
||||
|
||||
// Вызов функции обновления превью изображения при возникновении
|
||||
// события onchange в тэге input с id image
|
||||
if (cntrls.image) {
|
||||
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||
}
|
||||
|
||||
// получение параметров GET-запроса из URL
|
||||
// параметры перечислены после символа ? (?id=1&color=black&...)
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
|
||||
// получение значения конкретного параметра (id)
|
||||
// указан только при редактировании
|
||||
const currentId = urlParams.get("id");
|
||||
// если id задан
|
||||
if (currentId) {
|
||||
try {
|
||||
// вызов метода REST API для получения записи по первичному ключу(id)
|
||||
const line = await getLine(currentId);
|
||||
// заполнение формы для редактирования
|
||||
cntrls.сategoriesType.value = line.categoriesId;
|
||||
cntrls.title.value = line.title;
|
||||
cntrls.author.value = line.author;
|
||||
cntrls.price.value = line.price;
|
||||
cntrls.count.value = line.count;
|
||||
cntrls.descrition.value = line.descrition;
|
||||
cntrls.annotation.value = line.annotation;
|
||||
cntrls.itemId.value = line.itemId;
|
||||
cntrls.publisher.value = line.publisher;
|
||||
cntrls.series.value = line.series;
|
||||
cntrls.publicationYear.value = line.publicationYear;
|
||||
cntrls.pagesNum.value = line.pagesNum;
|
||||
cntrls.size.value = line.size;
|
||||
cntrls.coverType.value = line.coverType;
|
||||
cntrls.circulation.value = line.circulation;
|
||||
cntrls.weight.value = line.weight;
|
||||
// заполнение превью
|
||||
// Если пользователь выбрал изображение, то оно загружается
|
||||
// в тэг image с id image - preview
|
||||
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
||||
} catch {
|
||||
// в случае ошибки происходит возврат к admin
|
||||
goBack();
|
||||
}
|
||||
}
|
||||
|
||||
// обработчик события отправки формы
|
||||
// возникает при нажатии на кнопку (button) с типом submit
|
||||
// кнопка должна находится внутри тега form
|
||||
if (cntrls.form) {
|
||||
cntrls.form.addEventListener("submit", async (event) => {
|
||||
console.info("Form onSubmit");
|
||||
// отключение стандартного поведения формы при отправке
|
||||
// при отправке страница обновляется и JS перестает работать
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// если форма не прошла валидацию, то ничего делать не нужно
|
||||
if (!cntrls.form.checkValidity()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let imageBase64 = "";
|
||||
// Получение выбранного пользователем изображения в виде base64 строки
|
||||
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
||||
// дефолтное изображение
|
||||
if (cntrls.imagePreview.src !== imagePlaceholder) {
|
||||
// Загрузка содержимого атрибута src тэга img с id image-preview
|
||||
// Здесь выполняется HTTP запрос с типом GET
|
||||
const result = await fetch(cntrls.imagePreview.src);
|
||||
// Получение из HTTP-ответа бинарного содержимого
|
||||
const blob = await result.blob();
|
||||
// Получение base64 строки для файла
|
||||
// Здесь выполняется Promise из функции readFile
|
||||
// Promise позволяет писать линейный код для работы с асинхронными методами
|
||||
// без использования обработчиков (callback) с помощью await
|
||||
imageBase64 = await readFile(blob);
|
||||
}
|
||||
|
||||
// если значение параметра запроса не задано,
|
||||
// то необходимо выполнить добавление записи
|
||||
// иначе обновление записи
|
||||
if (!currentId) {
|
||||
await addLine(
|
||||
cntrls.title.value,
|
||||
cntrls.author.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
cntrls.descrition.value,
|
||||
cntrls.annotation.value,
|
||||
cntrls.itemId.value,
|
||||
cntrls.publisher.value,
|
||||
cntrls.series.value,
|
||||
cntrls.publicationYear.value,
|
||||
cntrls.pagesNum.value,
|
||||
cntrls.size.value,
|
||||
cntrls.coverType.value,
|
||||
cntrls.circulation.value,
|
||||
cntrls.weight.value,
|
||||
cntrls.сategoriesType.value,
|
||||
imageBase64,
|
||||
);
|
||||
} else {
|
||||
await editLine(
|
||||
currentId,
|
||||
cntrls.title.value,
|
||||
cntrls.author.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
cntrls.descrition.value,
|
||||
cntrls.annotation.value,
|
||||
cntrls.itemId.value,
|
||||
cntrls.publisher.value,
|
||||
cntrls.series.value,
|
||||
cntrls.publicationYear.value,
|
||||
cntrls.pagesNum.value,
|
||||
cntrls.size.value,
|
||||
cntrls.coverType.value,
|
||||
cntrls.circulation.value,
|
||||
cntrls.weight.value,
|
||||
cntrls.сategoriesType.value,
|
||||
imageBase64,
|
||||
);
|
||||
}
|
||||
// возврат к странице admin
|
||||
goBack();
|
||||
});
|
||||
}
|
||||
fillOutCatalog();
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
// модуль используется для валидации форма на странице
|
||||
|
||||
function validation() {
|
||||
// поиск всех форм с классом .needs-validation
|
||||
const forms = document.querySelectorAll("form.needs-validation");
|
||||
|
||||
for (let i = 0; i < forms.length; i += 1) {
|
||||
const form = forms[i];
|
||||
// для каждой формы добавляется обработчик события отправки
|
||||
form.addEventListener("submit", (event) => {
|
||||
// если форма не прошла валидацию
|
||||
// то выключить стандартное действие
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
// предотвращает распространение preventDefault
|
||||
// на другие объекты
|
||||
event.stopPropagation();
|
||||
}
|
||||
// добавляет к форме класс was-validated
|
||||
form.classList.add("was-validated");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default validation;
|
||||
@ -3,7 +3,7 @@
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "preserve",
|
||||
"jsx": "react",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true
|
||||
},
|
||||
|
||||
136
login.html
136
login.html
@ -1,136 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Вход на сайт</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||
<header class="w-100 position-sticky top-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
||||
<img src="icons/logo.png" alt="logo" class="me-2">
|
||||
Читай-комната
|
||||
</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarNav">
|
||||
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<a class="nav-link" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link" href="./catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<a class="nav-link" href="./contacts.html">Контакты</a>
|
||||
</li>
|
||||
<div class="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
</li>
|
||||
<p class="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li class="nav-item me-lg-3">
|
||||
<a class="nav-link" href="./registration.html">
|
||||
Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pe-lg-0" href="./cart.html">
|
||||
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container-md d-flex flex-column flex-grow-1 my-0">
|
||||
<div class="row gy-3 justify-content-center">
|
||||
<div class="col-12 mt-4">
|
||||
<div class="block d-flex justify-content-center mb-3 mb-sm-4" id="login-title">
|
||||
Вход на сайт
|
||||
</div>
|
||||
</div>
|
||||
<form class="col-lg-8 col-xl-7 col-xxl-6 m-0 mt-2 mt-sm-3 d-flex flex-column gap-2" action="./login.html" method="get">
|
||||
<div class="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<input type="email" class="form-control w-75 border-black" id="login-input-email" placeholder="Имя пользователя / email" required>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<input type="password" class="form-control w-75 border-black" id="login-input-password" placeholder="Пароль" required>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button class="btn btn-primary w-50 rounded-5" type="submit" id="login-btn">Войти</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="col-12">
|
||||
<div class="block d-flex justify-content-center my-2 my-sm-3" id="password-help">
|
||||
<a href="/"> Забыли пароль? </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="block d-flex justify-content-center mb-2 mb-sm-3" id="login-admin">
|
||||
<a href="./admin.html"> Админ </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer flex-shrink-0">
|
||||
<div class="container-md" id="footer-container">
|
||||
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, 2023.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p class="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
3286
package-lock.json
generated
3286
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
39
package.json
39
package.json
@ -1,27 +1,32 @@
|
||||
{
|
||||
"name": "ip_rodionov",
|
||||
"version": "1.0.0",
|
||||
"name": "ip-rodionov",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"vite": "vite",
|
||||
"serve": "http-server -p 3000 ./dist/",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"rest": "json-server --watch data.json -p 8081",
|
||||
"dev": "npm-run-all --parallel rest vite",
|
||||
"prod": "npm-run-all build --parallel serve rest"
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "5.3.2",
|
||||
"@fortawesome/fontawesome-free": "6.4.2"
|
||||
"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": {
|
||||
"vite": "4.4.9",
|
||||
"eslint": "8.50.0",
|
||||
"eslint-config-airbnb-base": "15.0.0",
|
||||
"eslint-plugin-import": "2.28.1",
|
||||
"http-server": "14.1.1",
|
||||
"json-server": "0.17.4",
|
||||
"npm-run-all": "4.1.5"
|
||||
"@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,224 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Карточка товара</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||
<header class="w-100 position-sticky top-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
||||
<img src="icons/logo.png" alt="logo" class="me-2">
|
||||
Читай-комната
|
||||
</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarNav">
|
||||
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<a class="nav-link" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link" href="./catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<a class="nav-link" href="./contacts.html">Контакты</a>
|
||||
</li>
|
||||
<div class="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
</li>
|
||||
<p class="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li class="nav-item me-lg-3">
|
||||
<a class="nav-link" href="./registration.html">
|
||||
Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pe-lg-0" href="./cart.html">
|
||||
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container-md d-flex flex-column justify-content-center flex-grow-1">
|
||||
<div class="row gy-3">
|
||||
<div class="col-md-6 col-lg-3 mt-0 px-0">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start">
|
||||
<img src="book_covers/product_card/cover13d__w410.png" class="img-fluid" alt="book-cover-product-card" width="270" height="416">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-5 mt-5 mt-md-0 px-0">
|
||||
<div class="block d-flex flex-column align-items-center align-items-md-start ms-md-4">
|
||||
<div class="d-flex align-self-center align-self-md-end align-self-lg-start mb-4">
|
||||
<img src="icons/novelty.png" class="me-5" alt="novelty" width="95" height="32" id="novelty-icon">
|
||||
<img src="icons/discont.png" alt="discont" width="63" height="32" id="discont-icon">
|
||||
</div>
|
||||
<p class="mb-2" id="product-card-book-name">
|
||||
Форсайт
|
||||
</p>
|
||||
<p class="mb-4" id="product-card-author">
|
||||
Сергей Лукьяненко
|
||||
</p>
|
||||
<dl class="row gx-5 gy-2 text-center text-md-start" id="product-card-characteristics">
|
||||
<dt class="col-md-6 mt-0">ID товара</dt>
|
||||
<dd class="col-md-6 mt-0">3001249</dd>
|
||||
|
||||
<dt class="col-md-6">Издательство</dt>
|
||||
<dd class="col-md-6">АСТ</dd>
|
||||
|
||||
<dt class="col-md-6">Серия</dt>
|
||||
<dd class="col-md-6">Книги Сергея Лукьяненко</dd>
|
||||
|
||||
<dt class="col-md-6">Год издания</dt>
|
||||
<dd class="col-md-6">2023</dd>
|
||||
|
||||
<dt class="col-md-6">Количество страниц</dt>
|
||||
<dd class="col-md-6">352</dd>
|
||||
|
||||
<dt class="col-md-6">Размер</dt>
|
||||
<dd class="col-md-6">20.5x13x2</dd>
|
||||
|
||||
<dt class="col-md-6">Тип обложки</dt>
|
||||
<dd class="col-md-6">Твердый переплёт</dd>
|
||||
|
||||
<dt class="col-md-6">Тираж</dt>
|
||||
<dd class="col-md-6">20000</dd>
|
||||
|
||||
<dt class="col-md-6">Вес, г</dt>
|
||||
<dd class="col-md-6">350</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mt-0 px-0 d-none d-lg-block">
|
||||
<div class="block d-flex flex-column align-items-center align-items-lg-end">
|
||||
<div class="border border-secondary-subtle rounded-1 p-3" id="product-card-order-container">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="icons/check.png" class="me-4" alt="check" width="24" height="24">
|
||||
<p id="product-card-text-available">
|
||||
В наличии
|
||||
</p>
|
||||
</div>
|
||||
<p class="mb-3" id="product-card-price">
|
||||
775 ₽
|
||||
</p>
|
||||
<div>
|
||||
<button type="button" class="btn rounded-1 p-3" id="product-card-button-add">
|
||||
Добавить в корзину
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4 mt-md-0 mb-4">
|
||||
<div class="col px-0">
|
||||
<div class="block">
|
||||
<p class="product-card-book-description-h mb-2">
|
||||
О товаре
|
||||
</p>
|
||||
<p class="product-card-book-description-text">
|
||||
Новый долгожданный роман от автора бестселлеров «Ночной дозор» и «Черновик».
|
||||
Увлекательная история о Мире После и мире настоящего, где 5 процентов людей знают о надвигающемся апокалипсисе больше,
|
||||
чем кто-либо может представить.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row gy-3">
|
||||
<div class="col-12 px-0 mb-4 mb-lg-0">
|
||||
<div class="block">
|
||||
<p class="product-card-book-description-h mb-2">
|
||||
Аннотация
|
||||
</p>
|
||||
<p class="product-card-book-description-text">
|
||||
Людям порой снится прошлое. Иногда хорошее, иногда не очень.
|
||||
Но что делать, если тебе начинает сниться будущее? И в нём ничего хорошего нет совсем.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col px-0 d-lg-none">
|
||||
<div class="block d-flex flex-column align-items-center border border-secondary-subtle rounded-1 p-3">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="icons/check.png" class="me-4" alt="check" width="24" height="24">
|
||||
<p id="product-card-text-available">
|
||||
В наличии
|
||||
</p>
|
||||
</div>
|
||||
<p class="mb-3" id="product-card-price">
|
||||
775 ₽
|
||||
</p>
|
||||
<div>
|
||||
<button type="button" class="btn rounded-1 p-3" id="product-card-button-add">
|
||||
Добавить в корзину
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer flex-shrink-0">
|
||||
<div class="container-md" id="footer-container">
|
||||
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, 2023.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p class="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
3
public/favicon.svg
Normal file
3
public/favicon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 463 B |
@ -1,132 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Регистрация</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||
<header class="w-100 position-sticky top-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
||||
<img src="icons/logo.png" alt="logo" class="me-2">
|
||||
Читай-комната
|
||||
</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarNav">
|
||||
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<a class="nav-link" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link" href="./catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<a class="nav-link" href="./contacts.html">Контакты</a>
|
||||
</li>
|
||||
<div class="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
</li>
|
||||
<p class="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li class="nav-item me-lg-3">
|
||||
<a class="nav-link active" aria-current="page" href="./registration.html">
|
||||
Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pe-lg-0" href="./cart.html">
|
||||
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container-md d-flex flex-column flex-grow-1 my-0">
|
||||
<div class="row gy-3 justify-content-center">
|
||||
<div class="col-12 mt-4">
|
||||
<div class="block d-flex justify-content-center mb-3 mb-sm-4" id="reg-title">
|
||||
Регистрация
|
||||
</div>
|
||||
</div>
|
||||
<form class="col-lg-8 col-xl-7 col-xxl-6 m-0 mt-2 mt-sm-3 d-flex flex-column gap-2" action="./registration.html" method="get">
|
||||
<div class="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<input type="text" class="form-control w-75 border-black" id="reg-input-name" placeholder="Имя пользователя" required>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<input type="email" class="form-control w-75 border-black" id="reg-input-email" placeholder="Адрес электронной почты" required>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<input type="password" class="reg-input-password form-control w-75 border-black" placeholder="Пароль" required>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<input type="password" class="reg-input-password form-control w-75 border-black" placeholder="Подтвердите пароль" required>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button class="btn btn-primary w-50 rounded-5" type="submit" id="reg-btn">Создать аккаунт</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer flex-shrink-0">
|
||||
<div class="container-md" id="footer-container">
|
||||
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, 2023.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p class="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
||||
</a>
|
||||
<a class="me-3" href="/">
|
||||
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
0
src/App.css
Normal file
0
src/App.css
Normal file
24
src/App.jsx
Normal file
24
src/App.jsx
Normal 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="d-flex flex-column justify-content-center flex-grow-1" as="main" fluid="md">
|
||||
<Outlet />
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
App.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 524 KiB After Width: | Height: | Size: 524 KiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 283 KiB After Width: | Height: | Size: 283 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 754 KiB After Width: | Height: | Size: 754 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 932 KiB After Width: | Height: | Size: 932 KiB |
|
Before Width: | Height: | Size: 519 KiB After Width: | Height: | Size: 519 KiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 283 KiB After Width: | Height: | Size: 283 KiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 573 KiB After Width: | Height: | Size: 573 KiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 283 KiB After Width: | Height: | Size: 283 KiB |
|
Before Width: | Height: | Size: 534 KiB After Width: | Height: | Size: 534 KiB |
|
Before Width: | Height: | Size: 296 KiB After Width: | Height: | Size: 296 KiB |
|
Before Width: | Height: | Size: 413 KiB After Width: | Height: | Size: 413 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 366 KiB After Width: | Height: | Size: 366 KiB |
|
Before Width: | Height: | Size: 207 KiB After Width: | Height: | Size: 207 KiB |
|
Before Width: | Height: | Size: 426 KiB After Width: | Height: | Size: 426 KiB |
|
Before Width: | Height: | Size: 511 KiB After Width: | Height: | Size: 511 KiB |
|
Before Width: | Height: | Size: 355 KiB After Width: | Height: | Size: 355 KiB |
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 110 KiB |
|
Before Width: | Height: | Size: 504 KiB After Width: | Height: | Size: 504 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 520 B After Width: | Height: | Size: 520 B |
|
Before Width: | Height: | Size: 501 B After Width: | Height: | Size: 501 B |
|
Before Width: | Height: | Size: 484 B After Width: | Height: | Size: 484 B |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 484 B After Width: | Height: | Size: 484 B |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 950 KiB After Width: | Height: | Size: 950 KiB |
BIN
src/assets/icons/nothing.png
Normal file
BIN
src/assets/icons/nothing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 800 KiB |
|
Before Width: | Height: | Size: 709 B After Width: | Height: | Size: 709 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 733 B After Width: | Height: | Size: 733 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1019 B After Width: | Height: | Size: 1019 B |
|
Before Width: | Height: | Size: 714 B After Width: | Height: | Size: 714 B |
18
src/components/cartItem/CartItem.jsx
Normal file
18
src/components/cartItem/CartItem.jsx
Normal file
@ -0,0 +1,18 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import Desktop from './cartItemDesktop/CartItemDesktop.jsx';
|
||||
import Mobile from './cartItemMobile/CartItemMobile.jsx';
|
||||
|
||||
const CartItem = ({ info }) => {
|
||||
return (
|
||||
<>
|
||||
<Desktop info={info} />
|
||||
<Mobile info={info} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
CartItem.propTypes = {
|
||||
info: PropTypes.object,
|
||||
};
|
||||
|
||||
export default CartItem;
|
||||
63
src/components/cartItem/cartItemDesktop/CartItemDesktop.jsx
Normal file
63
src/components/cartItem/cartItemDesktop/CartItemDesktop.jsx
Normal file
@ -0,0 +1,63 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const CartItemDesktop = ({ info }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="col-2 border-top border-black pt-3 d-sm-none">
|
||||
<div className="block">
|
||||
<img
|
||||
src={info.cover}
|
||||
className="cart-book-cover me-3"
|
||||
alt="cart-book-cover"
|
||||
width="88"
|
||||
height="138"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-10 pt-3 border-top border-black d-sm-none">
|
||||
<div className="block ms-4">
|
||||
<p className="cart-book-description-title mb-2">{info.title}</p>
|
||||
<p className="cart-book-description-author mb-2">{info.author}</p>
|
||||
<p className="cart-price mb-2">{info.price}</p>
|
||||
<div className="d-flex align-items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="button-minus border border-end-0 rounded-start bg-white"
|
||||
>
|
||||
–
|
||||
</button>
|
||||
<label className="cart-input-label d-flex">
|
||||
<input
|
||||
type="tel"
|
||||
className="cart-input h-100 w-100 border text-center"
|
||||
placeholder="1"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className="button-plus border border-start-0 rounded-end bg-white"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<div className="flex-grow-1"></div>
|
||||
<button className="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
|
||||
<img
|
||||
src={info.trash}
|
||||
className="trash-icon"
|
||||
alt="trash"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
CartItemDesktop.propTypes = {
|
||||
info: PropTypes.object,
|
||||
};
|
||||
|
||||
export default CartItemDesktop;
|
||||
70
src/components/cartItem/cartItemMobile/CartItemMobile.jsx
Normal file
70
src/components/cartItem/cartItemMobile/CartItemMobile.jsx
Normal file
@ -0,0 +1,70 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const CartItemMobile = ({ info }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="col-1 border-top border-black pt-3 d-none d-sm-block">
|
||||
<div className="block">
|
||||
<img
|
||||
src={info.cover}
|
||||
className="cart-book-cover me-3"
|
||||
alt="cart-book-cover-1"
|
||||
width="88"
|
||||
height="138"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 pt-3 border-top border-black d-none d-sm-block">
|
||||
<div className="cart-book-description block d-flex flex-column justify-content-start ms-5 ms-lg-4 ms-xl-0 ps-0 ps-sm-2 ps-md-0 ps-xl-3 ps-xxl-0">
|
||||
<p className="cart-book-description-title mb-2">{info.title}</p>
|
||||
<p className="cart-book-description-author">{info.author}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-3 pt-2 border-top border-black d-none d-sm-block">
|
||||
<div className="block d-flex align-items-start justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className="button-minus border border-end-0 rounded-start bg-white"
|
||||
>
|
||||
–
|
||||
</button>
|
||||
<label className="cart-input-label">
|
||||
<input
|
||||
type="tel"
|
||||
className="cart-input h-100 w-100 border text-center"
|
||||
placeholder="1"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className="button-plus border border-start-0 rounded-end bg-white"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-2 pt-3 border-top border-black d-none d-sm-block">
|
||||
<div className="block d-flex flex-column align-items-end h-100">
|
||||
<p className="cart-price">{info.price}</p>
|
||||
<div className="flex-grow-1"></div>
|
||||
<button className="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
|
||||
<img
|
||||
src={info.trash}
|
||||
className="trash-icon me-2"
|
||||
alt="trash"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
CartItemMobile.propTypes = {
|
||||
info: PropTypes.object,
|
||||
};
|
||||
|
||||
export default CartItemMobile;
|
||||
39
src/components/catalogBook/CatalogBook.jsx
Normal file
39
src/components/catalogBook/CatalogBook.jsx
Normal file
@ -0,0 +1,39 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const CatalogBook = ({ description }) => {
|
||||
return (
|
||||
<div className="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div className="block d-flex flex-column h-100">
|
||||
<div className="d-flex justify-content-center mb-4">
|
||||
<Link to={description.destination}>
|
||||
<img src={description.cover} className="catalog-book-cover" alt="book-cover-catalog-2" width="155" height="245" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="catalog-book-description d-flex flex-column align-items-start">
|
||||
<p className="catalog-price mb-3">
|
||||
{description.price}
|
||||
</p>
|
||||
<p className="catalog-book-title mb-3">
|
||||
{description.title}
|
||||
</p>
|
||||
<p className="catalog-author mb-3">
|
||||
{description.author}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-grow-1"></div>
|
||||
<div className="catalog-btn-checkout-div d-flex justify-content-start">
|
||||
<button className="catalog-bth-checkout btn rounded-5 px-3">
|
||||
В корзину
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
CatalogBook.propTypes = {
|
||||
description: PropTypes.object,
|
||||
};
|
||||
|
||||
export default CatalogBook;
|
||||
15
src/components/catalogSelect/CatalogSelect.jsx
Normal file
15
src/components/catalogSelect/CatalogSelect.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
import Form from 'react-bootstrap/Form';
|
||||
|
||||
const CatalogSelect = () => {
|
||||
return (
|
||||
<Form.Select aria-label="catalogSelect" className="border-black" id="catalog-select">
|
||||
<option>Сначала популярные</option>
|
||||
<option value="1">Сначала дешевые</option>
|
||||
<option value="2">Сначала дорогие</option>
|
||||
<option value="3">Сначала со скидкой</option>
|
||||
<option value="4">Сначала новые</option>
|
||||
</Form.Select>
|
||||
);
|
||||
};
|
||||
|
||||
export default CatalogSelect;
|
||||
53
src/components/footer/Footer.jsx
Normal file
53
src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import Call from '../../assets/icons/telephone-call.png';
|
||||
import VK from '../../assets/icons/vk.png';
|
||||
import YouTube from '../../assets/icons/youtube.png';
|
||||
import Telegram from '../../assets/icons/telegram.png';
|
||||
import Odnoklassniki from '../../assets/icons/odnoklassniki.png';
|
||||
|
||||
const Footer = () => {
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="footer flex-shrink-0">
|
||||
<div className="container-md" id="footer-container">
|
||||
<div className="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
||||
© И. А. Родионов, {year}.
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="block d-flex align-items-center justify-content-center justify-content-md-end">
|
||||
<img src={Call} className="me-2" alt="telephone-call" width="32" height="32" />
|
||||
<p id="footer-phone-number-text">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
||||
<div className="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
||||
<p className="me-3" id="footer-social-media-text">
|
||||
Мы в соцсетях:
|
||||
</p>
|
||||
<Link to="/" className="me-3">
|
||||
<img src={VK} alt="vk" width="32" height="32" />
|
||||
</Link>
|
||||
<Link to="/" className="me-3">
|
||||
<img src={YouTube} alt="youtube" width="32" height="32" />
|
||||
</Link>
|
||||
<Link to="/" className="me-3">
|
||||
<img src={Telegram} alt="telegram" width="32" height="32" />
|
||||
</Link>
|
||||
<Link to="/">
|
||||
<img src={Odnoklassniki} alt="odnoklassniki" width="32" height="32" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
37
src/components/mainPageRow/MainPageRow.jsx
Normal file
37
src/components/mainPageRow/MainPageRow.jsx
Normal file
@ -0,0 +1,37 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import Book from './mainPageBook/MainPageBook.jsx';
|
||||
|
||||
const MainPageRow = ({ title, books }) => {
|
||||
return (
|
||||
<div className="row bg-white pb-1 rounded-3 gy-3 my-2">
|
||||
<div className="col-12 ms-2 mt-1">
|
||||
<div className="main-page-section-title block d-flex align-items-end">
|
||||
<img src={title.image} className="me-2" alt="fire" width="25" height="30" id="fire-icon" />
|
||||
<p className="main-page-section-title-text lh-1 m-0">
|
||||
{title.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
books.map((book) =>
|
||||
<Book
|
||||
key = {book.id}
|
||||
description = {{
|
||||
cover: book.cover,
|
||||
price: book.price,
|
||||
title: book.title,
|
||||
author: book.author,
|
||||
destination: book.destination,
|
||||
}}
|
||||
/>)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
MainPageRow.propTypes = {
|
||||
title: PropTypes.object,
|
||||
books: PropTypes.array,
|
||||
};
|
||||
|
||||
export default MainPageRow;
|
||||
33
src/components/mainPageRow/mainPageBook/MainPageBook.jsx
Normal file
33
src/components/mainPageRow/mainPageBook/MainPageBook.jsx
Normal file
@ -0,0 +1,33 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const MainPageBook = ({ description }) => {
|
||||
return (
|
||||
<div className="col-6 col-md-4 col-lg-2">
|
||||
<div className="block d-flex flex-column">
|
||||
<div className="d-flex justify-content-center">
|
||||
<Link to={description.destination}>
|
||||
<img src={description.cover} className="main-page-book-cover" alt="book-cover-novelties-1" width="100" height="152" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p className="main-page-price">
|
||||
{description.price}
|
||||
</p>
|
||||
<p className="main-page-book-title">
|
||||
{description.title}
|
||||
</p>
|
||||
<p className="main-page-author">
|
||||
{description.author}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
MainPageBook.propTypes = {
|
||||
description: PropTypes.object,
|
||||
};
|
||||
|
||||
export default MainPageBook;
|
||||
59
src/components/navigation/Navigation.jsx
Normal file
59
src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,59 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container, Navbar } from 'react-bootstrap';
|
||||
import { Link, NavLink } from 'react-router-dom';
|
||||
import Cart from '../../assets/icons/card.png';
|
||||
import Logo from '../../assets/icons/logo.png';
|
||||
|
||||
const Navigation = ({ routes }) => {
|
||||
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||
|
||||
return (
|
||||
<header className = "w-100 position-sticky top-0 z-3">
|
||||
<Navbar expand="lg" bg="white" data-bs-theme="white" className="my-nav">
|
||||
<Container fluid="md">
|
||||
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/' } className="me-lg-5 d-flex align-items-center" id="logo">
|
||||
<img src={Logo} alt="logo" className="me-2" />
|
||||
Читай-комната
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls='main-navbar' />
|
||||
<Navbar.Collapse id='main-navbar'>
|
||||
<ul className="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
||||
<li className="header-link nav-item ms-lg-2 me-lg-3">
|
||||
<NavLink to="/" className="nav-link">Главная</NavLink>
|
||||
</li>
|
||||
<li className="header-link nav-item me-lg-3">
|
||||
<NavLink to="/pageCatalog" className="nav-link">Каталог</NavLink>
|
||||
</li>
|
||||
<li className="header-link nav-item me-lg-5" id="header-contacts">
|
||||
<NavLink to="/pageContacts" className="nav-link">Контакты</NavLink>
|
||||
</li>
|
||||
<div className="flex-grow-1 me-lg-4" id="header-search">
|
||||
<input className="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar" />
|
||||
</div>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/pageLogin" className="nav-link">Вход</NavLink>
|
||||
</li>
|
||||
<p className="d-none d-lg-block">
|
||||
/
|
||||
</p>
|
||||
<li className="nav-item me-lg-3">
|
||||
<NavLink to="/pageRegistration" className="nav-link">Регистрация</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/pageCart" className="nav-link">
|
||||
<img src={Cart} alt="cart" width="30" height="35" id="cart-icon" />
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar >
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
854
src/index.css
Normal file
854
src/index.css
Normal file
@ -0,0 +1,854 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: Montserrat, Arial;
|
||||
background-color: rgb(238, 236, 236);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 4%;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.my-nav {
|
||||
background-color: rgb(23, 154, 183) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#logo, .nav-link, #catalog-categories-list li a,
|
||||
#catalog-page-navigation a, #catalog-categories-mobile-list li a,
|
||||
#password-help a, #login-admin a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#logo {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.my-nav a.active {
|
||||
font-weight: 900 !important;
|
||||
text-decoration: underline !important;
|
||||
text-decoration-skip-ink: none !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#cart-icon {
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.active-icon #cart-icon {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
#search-bar {
|
||||
min-width: 94px;
|
||||
}
|
||||
|
||||
#search-bar::placeholder {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgb(145, 141, 141);
|
||||
}
|
||||
|
||||
.my-nav a {
|
||||
transition: color 0.15s !important;
|
||||
}
|
||||
|
||||
.my-nav a:hover {
|
||||
color: rgb(6, 69, 173) !important;
|
||||
}
|
||||
|
||||
#cart-icon:hover {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.active-icon #cart-icon:hover {
|
||||
border-color: rgb(6, 69, 173);
|
||||
}
|
||||
|
||||
.main-page-section-title {
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.main-page-section-title-text {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.main-page-price {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.main-page-book-title {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-page-author {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: rgb(97, 95, 95);
|
||||
}
|
||||
|
||||
#product-card-order-container {
|
||||
width: 294px;
|
||||
}
|
||||
|
||||
#product-card-book-name {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#product-card-author {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgb(14, 173, 208)
|
||||
}
|
||||
|
||||
#product-card-characteristics {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#product-card-characteristics dt {
|
||||
color: rgb(97, 95, 95);
|
||||
font-weight: 600 !important;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#product-card-characteristics dd {
|
||||
padding-left: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#product-card-text-available {
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
color: rgb(80, 176, 84);
|
||||
}
|
||||
|
||||
#product-card-price {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#product-card-button-add {
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background-color: rgb(23, 154, 183);
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
#product-card-button-add:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.product-card-book-description-h {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.product-card-book-description-text {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#contacts-title {
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.contacts-item {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.contacts-item-main-info {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.contacts-item-clarification {
|
||||
font-size: 16px;
|
||||
color: rgb(145, 141, 141);
|
||||
}
|
||||
|
||||
#skype-link {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
color: rgb(6, 69, 173);
|
||||
}
|
||||
|
||||
#contacts-address {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#contacts-address-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#cart-title {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#cart-items-num-text {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.cart-button-remove {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: rgb(145, 141, 141);
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.cart-button-remove:hover {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.cart-book-description {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cart-book-description-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.cart-book-description-author {
|
||||
font-size: 16px;
|
||||
color: rgb(145, 141, 141);
|
||||
}
|
||||
|
||||
.button-minus, .button-plus {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
width: 32px;
|
||||
height: 34px;
|
||||
color: rgb(145, 141, 141);
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.button-minus:hover, .button-plus:hover {
|
||||
background-color: rgb(114, 187, 5) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cart-input-label {
|
||||
width: 42px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.cart-input {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
border-color: rgb(222, 226, 230) !important;
|
||||
}
|
||||
|
||||
.cart-input::placeholder {
|
||||
color:black;
|
||||
}
|
||||
|
||||
.cart-price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#cart-final-price {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#cart-final-price-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#cart-final-price-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#cart-btn-checkout {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
background-color: rgb(217, 217, 217);
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
#cart-btn-checkout:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
#catalog-categories, #catalog-categories-mobile {
|
||||
border-color: rgb(23, 154, 183) !important;
|
||||
}
|
||||
|
||||
#catalog-categories-title, #catalog-categories-mobile-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#catalog-categories-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#catalog-categories-list, #catalog-categories-mobile-list {
|
||||
font-weight: 500;
|
||||
color:rgb(6, 69, 173) !important;
|
||||
}
|
||||
|
||||
#catalog-categories-list {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.active-category, .active-category-mobile {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-title {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-list {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#catalog-title {
|
||||
font-size: 40px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#catalog-select {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
width: 264px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.catalog-price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.catalog-book-title,
|
||||
.catalog-author {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.catalog-bth-checkout {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
background-color: rgb(217, 217, 217);
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.catalog-bth-checkout:hover {
|
||||
background-color: rgb(114, 187, 5) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#catalog-page-navigation {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#catalog-selected-page {
|
||||
color: rgb(80, 176, 84) !important;
|
||||
}
|
||||
|
||||
#catalog-page-navigation a {
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
#catalog-page-navigation a:hover {
|
||||
color: rgb(0, 0, 238) !important;
|
||||
}
|
||||
|
||||
#catalog-section-navigation {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#login-input-email, #login-input-password,
|
||||
#reg-input-name, #reg-input-email, .reg-input-password {
|
||||
font-size: 16px;
|
||||
min-width: 165px;
|
||||
}
|
||||
|
||||
#login-title, #reg-title {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#login-btn, #reg-btn {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
background-color: rgb(6, 69, 173);
|
||||
transition: opacity 0.25s;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
#login-btn:hover, #reg-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
#password-help, #login-admin {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
color: rgb(145, 141, 141);
|
||||
}
|
||||
|
||||
#add-btn {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: rgb(23, 154, 183);
|
||||
color: white;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
#footer-container {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
#footer-row {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
#footer-copyright {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#footer-phone-number-text {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#footer-social-media-text {
|
||||
font-size: 19px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1200px) {
|
||||
#logo {
|
||||
margin-right: 25px !important;
|
||||
}
|
||||
|
||||
.header-link {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
#header-contacts, #header-search {
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.my-nav {
|
||||
height: 60px !important;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
#catalog-categories-list {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.active-category {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#catalog-categories-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#catalog-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#catalog-categories-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#catalog-categories-list {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.active-category {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#catalog-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#product-card-characteristics {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#product-card-characteristics dt,
|
||||
#product-card-characteristics dd {
|
||||
text-align: left;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.cart-book-cover {
|
||||
width: 66px;
|
||||
height: 104px;
|
||||
}
|
||||
|
||||
.cart-button-remove {
|
||||
font-size: 0 !important;
|
||||
}
|
||||
|
||||
.catalog-book-description, .catalog-btn-checkout-div {
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
#admin-title {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
#login-input-email, #login-input-password,
|
||||
#login-btn, #password-help, #login-admin {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#reg-input-name, #reg-input-email,
|
||||
.reg-input-password, #reg-btn {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#login-title, #reg-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 475px) {
|
||||
#cart-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#cart-items-num-text, #cart-final-price-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.cart-book-description-title, #cart-final-price-value {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cart-book-description-author {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cart-price, #cart-btn-checkout,
|
||||
.cart-input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.button-minus, .button-plus {
|
||||
font-size: 16px;
|
||||
width: 26px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.cart-input-label {
|
||||
width: 34px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-title {
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-list {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#image-preview {
|
||||
width: 300px;
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.main-page-book-title, .main-page-author {
|
||||
font-size: 0 !important;
|
||||
}
|
||||
|
||||
.main-page-book-cover {
|
||||
width: 80px;
|
||||
height: 122px;
|
||||
}
|
||||
|
||||
#footer-copyright {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
#footer-phone-number-text {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
#footer-social-media-text {
|
||||
font-size: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
#catalog-section-navigation {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#login-btn, #password-help, #login-admin,
|
||||
.reg-input-password, #reg-btn {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#reg-input-name, #reg-input-email,
|
||||
#login-input-email, #login-input-password {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#login-title, #reg-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 361px) {
|
||||
#logo {
|
||||
font-size: 0 !important;
|
||||
}
|
||||
|
||||
.contacts-icon {
|
||||
width: 55px !important;
|
||||
height: 55px !important;
|
||||
}
|
||||
|
||||
#contacts-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.contacts-item-main-info, #skype-link,
|
||||
#contacts-address {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.contacts-item-clarification, #contacts-address-value {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#catalog-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#catalog-select {
|
||||
font-size: 11px;
|
||||
width: 164px;
|
||||
height: 28px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#image-preview {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 335px) {
|
||||
#cart-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#cart-items-num-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cart-book-description-title, #cart-final-price-value {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.cart-book-description-author {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
#cart-final-price-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button-minus, .button-plus {
|
||||
font-size: 10px;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.cart-input-label {
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.cart-input, #cart-btn-checkout,
|
||||
.cart-price {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.trash-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.cart-book-cover {
|
||||
width: 44px;
|
||||
height: 69px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
#product-card-price {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
#novelty-icon {
|
||||
width: 74px !important;
|
||||
height: 25px !important;
|
||||
}
|
||||
|
||||
#discont-icon {
|
||||
width: 49px !important;
|
||||
height: 25px !important;
|
||||
}
|
||||
|
||||
.product-card-book-description-h, .product-card-book-description-text,
|
||||
#product-card-button-add, #product-card-text-available {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
#catalog-section-navigation {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-title {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-list {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 282px) {
|
||||
#footer-copyright {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
#footer-phone-number-text {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
#admin-title {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 272px) {
|
||||
#fire-icon {
|
||||
height: 38px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.catalog-book-description, .catalog-btn-checkout-div {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.contacts-icon {
|
||||
width: 44px !important;
|
||||
height: 44px !important;
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
|
||||
#contacts-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.contacts-item-main-info, #skype-link
|
||||
#contacts-address {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#catalog-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#catalog-select {
|
||||
width: 140px;
|
||||
height: 22px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#catalog-select, #contacts-address-value,
|
||||
.contacts-item-clarification {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
#catalog-page-navigation {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#catalog-section-navigation {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
#catalog-categories-mobile-list {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#image-preview {
|
||||
width: 155px;
|
||||
height: 235px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 204px) {
|
||||
#footer-copyright {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
#footer-phone-number-text {
|
||||
font-size: 11px !important;
|
||||
}
|
||||
}
|
||||
86
src/main.jsx
Normal file
86
src/main.jsx
Normal file
@ -0,0 +1,86 @@
|
||||
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 PageProductСard from './pages/PageProductСard.jsx';
|
||||
import PageContacts from './pages/PageContacts.jsx';
|
||||
import PageCatalog from './pages/PageCatalog.jsx';
|
||||
import PageCatalogMobile from './pages/PageCatalogMobile.jsx';
|
||||
import PageCart from './pages/PageCart.jsx';
|
||||
import PageLogin from './pages/PageLogin.jsx';
|
||||
import PageRegistration from './pages/PageRegistration.jsx';
|
||||
import PageAdmin from './pages/PageAdmin.jsx';
|
||||
import PageAddItem from './pages/PageAddItem.jsx';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
index: true,
|
||||
path: '/',
|
||||
element: <PageMain />,
|
||||
title: 'Главная страница',
|
||||
},
|
||||
{
|
||||
path: '/pageProductСard',
|
||||
element: <PageProductСard />,
|
||||
title: 'Карточка товара',
|
||||
},
|
||||
{
|
||||
path: '/pageContacts',
|
||||
element: <PageContacts />,
|
||||
title: 'Контакты',
|
||||
},
|
||||
{
|
||||
path: '/pageCatalog',
|
||||
element: <PageCatalog />,
|
||||
title: 'Каталог',
|
||||
},
|
||||
{
|
||||
path: '/pageCatalogMobile',
|
||||
element: <PageCatalogMobile />,
|
||||
title: 'Каталог',
|
||||
},
|
||||
{
|
||||
path: '/pageCart',
|
||||
element: <PageCart />,
|
||||
title: 'Корзина',
|
||||
},
|
||||
{
|
||||
path: '/pageLogin',
|
||||
element: <PageLogin />,
|
||||
title: 'Вход на сайт',
|
||||
},
|
||||
{
|
||||
path: '/pageRegistration',
|
||||
element: <PageRegistration />,
|
||||
title: 'Регистрация',
|
||||
},
|
||||
{
|
||||
path: '/pageAdmin',
|
||||
element: <PageAdmin />,
|
||||
title: 'Панель администратора',
|
||||
},
|
||||
{
|
||||
path: '/pageAddItem',
|
||||
element: <PageAddItem />,
|
||||
title: 'Панель администратора',
|
||||
},
|
||||
];
|
||||
|
||||
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
19
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;
|
||||
106
src/pages/PageAddItem.jsx
Normal file
106
src/pages/PageAddItem.jsx
Normal file
@ -0,0 +1,106 @@
|
||||
import { useState } from 'react';
|
||||
import { Form, Button } from 'react-bootstrap';
|
||||
|
||||
const PageAddItem = () => {
|
||||
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-lg-8 col-xl-7 col-xxl-6" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-4 mt-5">
|
||||
<Form.Label>Название книги</Form.Label>
|
||||
<Form.Control type="text" name="text" id="item-name" required />
|
||||
<Form.Control.Feedback>Название книги введено</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Название книги не введено</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-4">
|
||||
<Form.Label>Автор</Form.Label>
|
||||
<Form.Control type="text" name="text" id="item-author" required />
|
||||
<Form.Control.Feedback>Имя автора введено</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Имя автора не введено</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-4">
|
||||
<Form.Label>Цена</Form.Label>
|
||||
<Form.Control type="number" name="number" id="price" required />
|
||||
<Form.Control.Feedback>Цена введена</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Цена не введена</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-4">
|
||||
<Form.Label>Описание книги</Form.Label>
|
||||
<Form.Control as="textarea" id="item-descrition" rows="3"/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-4">
|
||||
<Form.Label>Аннотация</Form.Label>
|
||||
<Form.Control as="textarea" id="item-annotation" rows="3"/>
|
||||
</Form.Group>
|
||||
<p className="mb-3">
|
||||
Xарактеристики:
|
||||
</p>
|
||||
<div className="mb-4 border border-1 border-secondary p-2">
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>ID товара</Form.Label>
|
||||
<Form.Control type="number" name="number" id="item-id" required />
|
||||
<Form.Control.Feedback>ID товара введено</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">ID товара не введено</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Издательство</Form.Label>
|
||||
<Form.Control type="text" name="text" id="item-publisher"/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Серия</Form.Label>
|
||||
<Form.Control type="text" name="text" id="item-series"/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Год издания</Form.Label>
|
||||
<Form.Control type="number" name="number" id="item-publication-year"/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Количество страниц</Form.Label>
|
||||
<Form.Control type="number" name="number" id="item-pages-num"/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Размер</Form.Label>
|
||||
<Form.Control type="text" name="text" id="item-size"/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Тип обложки</Form.Label>
|
||||
<Form.Control type="text" name="text" id="item-cover-type"/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Тираж</Form.Label>
|
||||
<Form.Control type="number" name="number" id="item-circulation"/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Вес, г</Form.Label>
|
||||
<Form.Control type="number" name="number" id="item-weight"/>
|
||||
</Form.Group>
|
||||
</div>
|
||||
<Form.Group className="mb-4">
|
||||
<Form.Label>Обложка книги</Form.Label>
|
||||
<Form.Control type="file" id="item-cover"/>
|
||||
</Form.Group>
|
||||
<div className="text-center mb-5">
|
||||
<Button className="w-50 rounded-5" variant="primary" type="submit" id="add-btn">Добавить товар</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
{
|
||||
document.body.classList.add('bg-white')
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageAddItem;
|
||||
67
src/pages/PageAdmin.jsx
Normal file
67
src/pages/PageAdmin.jsx
Normal file
@ -0,0 +1,67 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const PageAdmin = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="row gy-3">
|
||||
<div className="col-12 px-0">
|
||||
<div className="block d-flex justify-content-center fs-2 fw-bold mb-3 mb-sm-4" id="admin-title">
|
||||
Панель администратора
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 px-0">
|
||||
<div className="block table-responsive">
|
||||
<table className="table table-hover table-bordered align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Название книги</th>
|
||||
<th scope="col">Автор</th>
|
||||
<th scope="col">Цена</th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-group-divider">
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Форсайт</td>
|
||||
<td>Сергей Лукьяненко</td>
|
||||
<td>775 ₽</td>
|
||||
<td><Link to="/pageAddItem" className="btn btn-primary w-100">Редактировать</Link></td>
|
||||
<td><Link className="btn btn-primary w-100">Удалить</Link></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Колесо времени. Книга 11. Нож сновидений</td>
|
||||
<td>Роберт Джордан</td>
|
||||
<td>977 ₽</td>
|
||||
<td><Link to="/pageAddItem" className="btn btn-primary w-100">Редактировать</Link></td>
|
||||
<td><Link className="btn btn-primary w-100">Удалить</Link></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Четвертое крыло</td>
|
||||
<td>Яррос Ребекка</td>
|
||||
<td>999 ₽</td>
|
||||
<td><Link to="/pageAddItem" className="btn btn-primary w-100">Редактировать</Link></td>
|
||||
<td><Link className="btn btn-primary w-100">Удалить</Link></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 px-0 mb-2">
|
||||
<div className="block mb-4">
|
||||
<Link to="/pageAddItem" className="btn btn-primary">Добавить товар</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
document.body.classList.add('bg-white')
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageAdmin;
|
||||
82
src/pages/PageCart.jsx
Normal file
82
src/pages/PageCart.jsx
Normal file
@ -0,0 +1,82 @@
|
||||
import Trash from '../assets/icons/trash.png';
|
||||
import Cover1 from '../assets/book_covers/cart/1.png';
|
||||
import Cover2 from '../assets/book_covers/cart/2.png';
|
||||
import Item from '../components/cartItem/CartItem.jsx';
|
||||
|
||||
const PageCart = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="row gy-3 mb-1">
|
||||
<div className="col-12 mb-3 mb-sm-4 mt-0 px-0">
|
||||
<div
|
||||
className="block d-flex justify-content-center lh-1"
|
||||
id="cart-title"
|
||||
>
|
||||
Моя корзина
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-8 px-0">
|
||||
<div
|
||||
className="block d-flex align-items-end lh-1"
|
||||
id="cart-items-num-text"
|
||||
>
|
||||
В корзине два товара:
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-4 d-flex justify-content-end px-0">
|
||||
<div className="block align-self-end">
|
||||
<button className="cart-button-remove d-flex justify-content-end align-items-end lh-1 border-0 bg-white pe-0">
|
||||
<img
|
||||
src={Trash}
|
||||
className="trash-icon me-sm-2"
|
||||
alt="trash"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
Удалить все
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Item
|
||||
info={{
|
||||
title: 'Наследник Каладана',
|
||||
author: 'Брайан Герберт, Кевин Андерсон',
|
||||
price: '929 р.',
|
||||
cover: Cover1,
|
||||
trash: Trash,
|
||||
}}
|
||||
/>
|
||||
<Item
|
||||
info={{
|
||||
title: 'Восхождение фениксов',
|
||||
author: 'Тянься Гуйюань',
|
||||
price: '834 р.',
|
||||
cover: Cover2,
|
||||
trash: Trash,
|
||||
}}
|
||||
/>
|
||||
<div className="col-12 pt-3 border-top border-black px-0">
|
||||
<div
|
||||
className="block d-flex justify-content-end align-items-end lh-1"
|
||||
id="cart-final-price"
|
||||
>
|
||||
<span className="me-4" id="cart-final-price-text">
|
||||
Итого:
|
||||
</span>{' '}
|
||||
<span id="cart-final-price-value">1763 р.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 px-0">
|
||||
<div className="block d-flex justify-content-end">
|
||||
<button className="btn rounded-5" id="cart-btn-checkout">
|
||||
Перейти к оформлению
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{document.body.classList.add('bg-white')}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageCart;
|
||||
187
src/pages/PageCatalog.jsx
Normal file
187
src/pages/PageCatalog.jsx
Normal file
@ -0,0 +1,187 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import Select from '../components/catalogSelect/CatalogSelect.jsx';
|
||||
import Book from '../components/catalogBook/CatalogBook.jsx';
|
||||
import Cover1 from '../assets/book_covers/catalog/1.png';
|
||||
import Cover2 from '../assets/book_covers/catalog/2.png';
|
||||
import Cover3 from '../assets/book_covers/catalog/3.png';
|
||||
import Cover4 from '../assets/book_covers/catalog/4.png';
|
||||
import Cover5 from '../assets/book_covers/catalog/5.png';
|
||||
import Cover6 from '../assets/book_covers/catalog/6.png';
|
||||
import Cover7 from '../assets/book_covers/catalog/7.png';
|
||||
import Cover8 from '../assets/book_covers/catalog/8.png';
|
||||
import Cover9 from '../assets/book_covers/catalog/9.png';
|
||||
|
||||
const PageCatalog = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="row gy-3 flex-grow-1">
|
||||
<div className="col-2 d-none d-md-block ps-0 mt-0 bg-white border border-3" id="catalog-categories">
|
||||
<div className="block d-flex flex-column justify-content-center p-2 h-100">
|
||||
<p className="mb-4" id="catalog-categories-title">
|
||||
Категории
|
||||
</p>
|
||||
<ul className="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-list">
|
||||
<li><Link to="/">Книги для подростков</Link></li>
|
||||
<li><Link to="/">Комиксы</Link></li>
|
||||
<li><Link to="/">Манга</Link></li>
|
||||
<li><Link to="/">Эзотерика</Link></li>
|
||||
<li><Link to="/">Медицина и здоровье</Link></li>
|
||||
<li><Link to="/">Кулинария</Link></li>
|
||||
<li><Link to="/">Детские книги</Link></li>
|
||||
<li className="active-category"><Link to="/pageCatalog">Художественная литература</Link></li>
|
||||
<li><Link to="/">Дом и хобби</Link></li>
|
||||
<li><Link to="/">Наука. Техника. IT</Link></li>
|
||||
<li><Link to="/">Религия и философия</Link></li>
|
||||
<li><Link to="/">Психология</Link></li>
|
||||
<li><Link to="/">Искусство</Link></li>
|
||||
<li><Link to="/">История. Общество</Link></li>
|
||||
<li><Link to="/">Право</Link></li>
|
||||
<li><Link to="/">Книги на английском</Link></li>
|
||||
<li><Link to="/">Новый год</Link></li>
|
||||
<li><Link to="/">Публицистика</Link></li>
|
||||
<li><Link to="/">Эксклюзивные товары</Link></li>
|
||||
<li><Link to="/">Педагогика и воспитание</Link></li>
|
||||
<li><Link to="/">Литературные премии</Link></li>
|
||||
<li><Link to="/">Фэнтези</Link></li>
|
||||
<li><Link to="/">Ужасы. Мистика</Link></li>
|
||||
<li><Link to="/">Любовный роман</Link></li>
|
||||
<li><Link to="/">Юмор и сатира</Link></li>
|
||||
<li><Link to="/">Проза</Link></li>
|
||||
<li><Link to="/">Боевики и триллеры</Link></li>
|
||||
<li><Link to="/">Эпос и фольклор</Link></li>
|
||||
<li><Link to="/">Научная фантастика</Link></li>
|
||||
<li><Link to="/">Детективы</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-10 d-flex flex-column bg-white mt-0 pt-2 pt-lg-5">
|
||||
<div className="row gy-3">
|
||||
<div className="col-12 mb-3 mb-lg-5 px-0 d-md-none">
|
||||
<div className="block d-flex lh-1" id="catalog-section-navigation">
|
||||
<Link to="/pageCatalogMobile" className="me-2 text-decoration-none">
|
||||
Каталог
|
||||
</Link>
|
||||
<span className="text-secondary me-2"> {'>'} </span>
|
||||
<Link to="/pageCatalog" className="text-decoration-none">
|
||||
Художественная литература
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-3 mb-lg-5 px-0">
|
||||
<div className="block d-flex justify-content-center lh-1" id="catalog-title">
|
||||
<div>
|
||||
Художественная литература
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-3 mb-lg-5 gx-0">
|
||||
<div className="block">
|
||||
<Select />
|
||||
</div>
|
||||
</div>
|
||||
<Book
|
||||
description = {{
|
||||
cover: Cover1,
|
||||
price: '593 ₽',
|
||||
title: 'Граф Аверин. Колдун Российской империи',
|
||||
author: 'Виктор Дашкевич',
|
||||
destination: '/',
|
||||
}}
|
||||
/>
|
||||
<Book
|
||||
description = {{
|
||||
cover: Cover2,
|
||||
price: '977 ₽',
|
||||
title: 'Колесо времени. Книга 11. Нож сновидений',
|
||||
author: 'Роберт Джордан',
|
||||
destination: '/',
|
||||
}}
|
||||
/>
|
||||
<Book
|
||||
description = {{
|
||||
cover: Cover3,
|
||||
price: '775 ₽',
|
||||
title: 'Форсайт',
|
||||
author: 'Сергей Лукьяненко',
|
||||
destination: '/pageProductСard',
|
||||
}}
|
||||
/>
|
||||
<Book
|
||||
description = {{
|
||||
cover: Cover4,
|
||||
price: '662 ₽',
|
||||
title: 'Шолох. Долина Колокольчиков',
|
||||
author: 'Антонина Крейн',
|
||||
destination: '/',
|
||||
}}
|
||||
/>
|
||||
<Book
|
||||
description = {{
|
||||
cover: Cover5,
|
||||
price: '594 ₽',
|
||||
title: 'Скрижаль Исет. Грешные души',
|
||||
author: 'Мишина Влада',
|
||||
destination: '/',
|
||||
}}
|
||||
/>
|
||||
<Book
|
||||
description = {{
|
||||
cover: Cover6,
|
||||
price: '2 112 ₽',
|
||||
title: 'Мир игры Pathologic 2. Хроники второй эпидемии',
|
||||
author: '',
|
||||
destination: '/',
|
||||
}}
|
||||
/>
|
||||
<Book
|
||||
description = {{
|
||||
cover: Cover7,
|
||||
price: '1 250 ₽',
|
||||
title: 'Благословение небожителей. Том 5',
|
||||
author: 'Тунсю Мосян',
|
||||
destination: '/',
|
||||
}}
|
||||
/>
|
||||
<Book
|
||||
description = {{
|
||||
cover: Cover8,
|
||||
price: '999 ₽',
|
||||
title: 'Четвертое крыло',
|
||||
author: 'Яррос Ребекка',
|
||||
destination: '/',
|
||||
}}
|
||||
/>
|
||||
<Book
|
||||
description = {{
|
||||
cover: Cover9,
|
||||
price: '519 ₽',
|
||||
title: 'Волкодав',
|
||||
author: 'Семенова М.',
|
||||
destination: '/',
|
||||
}}
|
||||
/>
|
||||
<div className="col-12 mt-5 mt-sm-4 mt-lg-5 mb-2 gx-0">
|
||||
<div className="block d-flex">
|
||||
<div className="me-2" id="catalog-page-navigation">
|
||||
<Link to="/pageCatalog" id="catalog-selected-page">1 </Link>
|
||||
<Link to="/">2 </Link>
|
||||
<Link to="/">3 </Link>
|
||||
<Link to="/">4 </Link>
|
||||
<Link to="/">5 </Link>
|
||||
<Link to="/">6 </Link>
|
||||
<Link to="/"> ....</Link>
|
||||
<Link to="/"> 2310</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
document.body.classList.add('bg-white')
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageCatalog;
|
||||
54
src/pages/PageCatalogMobile.jsx
Normal file
54
src/pages/PageCatalogMobile.jsx
Normal file
@ -0,0 +1,54 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const PageCatalog = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12 ps-0 mt-0 bg-white border border-3 border-top-0 border-bottom-0" id="catalog-categories-mobile">
|
||||
<div className="block d-flex flex-column justify-content-center p-2 h-100">
|
||||
<p className="mb-4" id="catalog-categories-mobile-title">
|
||||
Категории
|
||||
</p>
|
||||
<ul className="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-mobile-list">
|
||||
<li><Link to="/">Книги для подростков</Link></li>
|
||||
<li><Link to="/">Комиксы</Link></li>
|
||||
<li><Link to="/">Манга</Link></li>
|
||||
<li><Link to="/">Эзотерика</Link></li>
|
||||
<li><Link to="/">Медицина и здоровье</Link></li>
|
||||
<li><Link to="/">Кулинария</Link></li>
|
||||
<li><Link to="/">Детские книги</Link></li>
|
||||
<li className="active-category-mobile"><Link to="/pageCatalog">Художественная литература</Link></li>
|
||||
<li><Link to="/">Дом и хобби</Link></li>
|
||||
<li><Link to="/">Наука. Техника. IT</Link></li>
|
||||
<li><Link to="/">Религия и философия</Link></li>
|
||||
<li><Link to="/">Психология</Link></li>
|
||||
<li><Link to="/">Искусство</Link></li>
|
||||
<li><Link to="/">История. Общество</Link></li>
|
||||
<li><Link to="/">Право</Link></li>
|
||||
<li><Link to="/">Книги на английском</Link></li>
|
||||
<li><Link to="/">Новый год</Link></li>
|
||||
<li><Link to="/">Публицистика</Link></li>
|
||||
<li><Link to="/">Эксклюзивные товары</Link></li>
|
||||
<li><Link to="/">Педагогика и воспитание</Link></li>
|
||||
<li><Link to="/">Литературные премии</Link></li>
|
||||
<li><Link to="/">Фэнтези</Link></li>
|
||||
<li><Link to="/">Ужасы. Мистика</Link></li>
|
||||
<li><Link to="/">Любовный роман</Link></li>
|
||||
<li><Link to="/">Юмор и сатира</Link></li>
|
||||
<li><Link to="/">Проза</Link></li>
|
||||
<li><Link to="/">Боевики и триллеры</Link></li>
|
||||
<li><Link to="/">Эпос и фольклор</Link></li>
|
||||
<li><Link to="/">Научная фантастика</Link></li>
|
||||
<li><Link to="/">Детективы</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
document.body.classList.remove('bg-white')
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageCatalog;
|
||||
73
src/pages/PageContacts.jsx
Normal file
73
src/pages/PageContacts.jsx
Normal file
@ -0,0 +1,73 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import Call from '../assets/icons/phone-call.png';
|
||||
import Email from '../assets/icons/email.png';
|
||||
import Skype from '../assets/icons/skype.png';
|
||||
import Map from '../assets/icons/map.png';
|
||||
|
||||
const PageContacts = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-lg-5 px-0 me-lg-5">
|
||||
<div className="block d-flex flex-column align-items-start">
|
||||
<p className="mb-4 mb-sm-5 lh-1" id="contacts-title">
|
||||
Контакты
|
||||
</p>
|
||||
<div className="contacts-item d-flex mb-5">
|
||||
<img src={Call} className="contacts-icon me-4" alt="phone-call" width="88" height="88" />
|
||||
<div className="d-flex flex-column">
|
||||
<p className="contacts-item-main-info mb-3">
|
||||
+7 927 818-61-60
|
||||
</p>
|
||||
<p className="contacts-item-clarification">
|
||||
Служба клиентской поддержки
|
||||
c 8:00 - 22:00 (Мск)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contacts-item d-flex mb-5">
|
||||
<img src={Email} className="contacts-icon me-4" alt="email" width="88" height="88" />
|
||||
<div className="d-flex flex-column justify-content-center">
|
||||
<p className="contacts-item-main-info mb-3">
|
||||
readroom@mail.ru
|
||||
</p>
|
||||
<p className="contacts-item-clarification">
|
||||
Электронный адрес компании
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contacts-item d-flex mb-3">
|
||||
<img src={Skype} className="contacts-icon me-4" alt="skype" width="88" height="88" />
|
||||
<div className="d-flex flex-column justify-content-center">
|
||||
<p className="contacts-item-main-info">
|
||||
Пообщайтесь с сотрудниками по видеосвязи
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link to="/" className="mb-3 mb-sm-4 text-decoration-none" id="skype-link">
|
||||
Перейти в Skype
|
||||
</Link>
|
||||
<div className="mb-4 mb-sm-5 mt-2 mb-lg-0">
|
||||
<p className="mb-3" id="contacts-address">
|
||||
Наш адрес:
|
||||
</p>
|
||||
<p id="contacts-address-value">
|
||||
432064, Россия, г. Ульяновск, проспект Врача Сурова, 2А
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col px-0 align-self-center">
|
||||
<div className="block d-flex justify-content-center justify-content-lg-end">
|
||||
<img src={Map} className="border border-black border-2 img-fluid h-100" alt="map" width="665" height="689" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
document.body.classList.add('bg-white')
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageContacts;
|
||||
59
src/pages/PageLogin.jsx
Normal file
59
src/pages/PageLogin.jsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { useState } from 'react';
|
||||
import { Form, Button } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const PageLogin = () => {
|
||||
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 gy-3 justify-content-center">
|
||||
<div className="col-12 mt-2">
|
||||
<div className="block d-flex justify-content-center mb-3 mb-sm-4" id="login-title">
|
||||
Вход на сайт
|
||||
</div>
|
||||
</div>
|
||||
<Form className="col-lg-8 col-xl-7 col-xxl-6 m-0 mt-2 mt-sm-3 d-flex flex-column gap-2" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||
<Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<Form.Control type="email" name="email" className="w-75 border-black" id="login-input-email" placeholder="Имя пользователя / email" required />
|
||||
<Form.Control.Feedback>Электронная почта заполнена</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Электронная почта не заполнена</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<Form.Control type="password" name="password" className="w-75 border-black" id="login-input-password" placeholder="Пароль" required />
|
||||
<Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<div className="text-center">
|
||||
<Button className="w-50 rounded-5" variant="primary" type="submit" id="login-btn">Отправить</Button>
|
||||
</div>
|
||||
</Form>
|
||||
<div className="col-12">
|
||||
<div className="block d-flex justify-content-center my-2 my-sm-3" id="password-help">
|
||||
<Link to="/">Забыли пароль?</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="block d-flex justify-content-center mb-2 mb-sm-3" id="login-admin">
|
||||
<Link to="/pageAdmin">Админ</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
document.body.classList.add('bg-white')
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageLogin;
|
||||
102
src/pages/PageMain.jsx
Normal file
102
src/pages/PageMain.jsx
Normal file
@ -0,0 +1,102 @@
|
||||
import Row from '../components/mainPageRow/MainPageRow.jsx';
|
||||
import Fire from '../assets/icons/fire.png';
|
||||
import Nothing from '../assets/icons/nothing.png';
|
||||
import Cover1 from '../assets/book_covers/novelties/1.png';
|
||||
import Cover2 from '../assets/book_covers/novelties/2.png';
|
||||
import Cover3 from '../assets/book_covers/novelties/3.png';
|
||||
import Cover4 from '../assets/book_covers/novelties/4.png';
|
||||
import Cover5 from '../assets/book_covers/novelties/5.png';
|
||||
import Cover6 from '../assets/book_covers/novelties/6.png';
|
||||
import Cover7 from '../assets/book_covers/promotions/1.png';
|
||||
import Cover8 from '../assets/book_covers/promotions/2.png';
|
||||
import Cover9 from '../assets/book_covers/promotions/3.png';
|
||||
import Cover10 from '../assets/book_covers/promotions/4.png';
|
||||
import Cover11 from '../assets/book_covers/promotions/5.png';
|
||||
import Cover12 from '../assets/book_covers/promotions/6.png';
|
||||
import Cover13 from '../assets/book_covers/recommendations/1.png';
|
||||
import Cover14 from '../assets/book_covers/recommendations/2.png';
|
||||
import Cover15 from '../assets/book_covers/recommendations/3.png';
|
||||
import Cover16 from '../assets/book_covers/recommendations/4.png';
|
||||
import Cover17 from '../assets/book_covers/recommendations/5.png';
|
||||
import Cover18 from '../assets/book_covers/recommendations/6.png';
|
||||
|
||||
const PageMain = () => {
|
||||
return (
|
||||
<>
|
||||
<Row
|
||||
title = {{ name: 'Горячие новинки', image: Fire }}
|
||||
books = {[
|
||||
{
|
||||
cover: Cover1, price: '932 ₽', title: 'Вавилон. Сокрытая история', author: 'Ребекка Ф. Куанг', destination: '/', id: 1,
|
||||
},
|
||||
{
|
||||
cover: Cover2, price: '775 ₽', title: 'Форсайт', author: 'Сергей Лукьяненко', destination: '/pageProductСard', id: 2,
|
||||
},
|
||||
{
|
||||
cover: Cover3, price: '642 ₽', title: 'Во главе раздора', author: 'Лия Арден', destination: '/', id: 3,
|
||||
},
|
||||
{
|
||||
cover: Cover4, price: '949 ₽', title: 'Путешествие в Элевсин', author: 'Виктор Пелевин', destination: '/', id: 4,
|
||||
},
|
||||
{
|
||||
cover: Cover5, price: '699 ₽', title: 'Восстание клана Чан', author: 'Тянься Гуйюань', destination: '/', id: 5,
|
||||
},
|
||||
{
|
||||
cover: Cover6, price: '551 ₽', title: 'Дебютная постановка. Том 2', author: 'Александра Маринина', destination: '/', id: 6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Row
|
||||
title = {{ name: 'Книги по акциям', image: Nothing }}
|
||||
books = {[
|
||||
{
|
||||
cover: Cover7, price: '576 ₽', title: 'Шестерка воронов', author: 'Ли Бардуго', destination: '/', id: 1,
|
||||
},
|
||||
{
|
||||
cover: Cover8, price: '200 ₽', title: 'Портрет Дориана Грея', author: 'Оскар Уальд', destination: '/', id: 2,
|
||||
},
|
||||
{
|
||||
cover: Cover9, price: '768 ₽', title: 'Царство Страха', author: 'Керри Манискалко', destination: '/', id: 3,
|
||||
},
|
||||
{
|
||||
cover: Cover10, price: '162 ₽', title: 'Клуб самоубийц', author: 'Роберт Льюис Стивенсон', destination: '/', id: 4,
|
||||
},
|
||||
{
|
||||
cover: Cover11, price: '600 ₽', title: 'Некромант-одиночка. Новелла. Том 1', author: 'JJJ', destination: '/', id: 5,
|
||||
},
|
||||
{
|
||||
cover: Cover12, price: '711 ₽', title: 'Кристальный пик', author: 'Гор А.', destination: '/', id: 6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Row
|
||||
title = {{ name: 'Выбор редакции', image: Nothing }}
|
||||
books = {[
|
||||
{
|
||||
cover: Cover13, price: '1001 ₽', title: 'Испытание', author: 'Трейси Вульф', destination: '/', id: 1,
|
||||
},
|
||||
{
|
||||
cover: Cover14, price: '210 ₽', title: 'Мастер и Маргарита', author: 'Михаил Булгаков', destination: '/', id: 2,
|
||||
},
|
||||
{
|
||||
cover: Cover15, price: '618 ₽', title: 'Песнь Сорокопута', author: 'Фрэнсис Кель', destination: '/', id: 3,
|
||||
},
|
||||
{
|
||||
cover: Cover16, price: '754 ₽', title: 'Кодекс Алеры. Кн. 1. Фурии Кальдерона', author: 'Джим Батчер', destination: '/', id: 4,
|
||||
},
|
||||
{
|
||||
cover: Cover17, price: '711 ₽', title: 'Небесная река', author: 'Деннис Тейлор', destination: '/', id: 5,
|
||||
},
|
||||
{
|
||||
cover: Cover18, price: '699 ₽', title: 'Кузнец магии. Клинок тайн', author: 'Триша Левенселлер', destination: '/', id: 6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{
|
||||
document.body.classList.remove('bg-white')
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageMain;
|
||||
134
src/pages/PageProductСard.jsx
Normal file
134
src/pages/PageProductСard.jsx
Normal file
@ -0,0 +1,134 @@
|
||||
import Cover from '../assets/book_covers/product_card/cover13d__w410.png';
|
||||
import Novelty from '../assets/icons/novelty.png';
|
||||
import Discont from '../assets/icons/discont.png';
|
||||
import Check from '../assets/icons/check.png';
|
||||
|
||||
const PageProductСard = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="row gy-3">
|
||||
<div className="col-md-6 col-lg-3 mt-0 px-0">
|
||||
<div className="block d-flex justify-content-center justify-content-md-start">
|
||||
<img src={Cover} className="img-fluid" alt="book-cover-product-card" width="270" height="416" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-5 mt-5 mt-md-0 px-0">
|
||||
<div className="block d-flex flex-column align-items-center align-items-md-start ms-md-4">
|
||||
<div className="d-flex align-self-center align-self-md-end align-self-lg-start mb-4">
|
||||
<img src={Novelty} className="me-5" alt="novelty" width="95" height="32" id="novelty-icon" />
|
||||
<img src={Discont} alt="discont" width="63" height="32" id="discont-icon" />
|
||||
</div>
|
||||
<p className="mb-2" id="product-card-book-name">
|
||||
Форсайт
|
||||
</p>
|
||||
<p className="mb-4" id="product-card-author">
|
||||
Сергей Лукьяненко
|
||||
</p>
|
||||
<dl className="row gx-5 gy-2 text-center text-md-start" id="product-card-characteristics">
|
||||
<dt className="col-md-6 mt-0">ID товара</dt>
|
||||
<dd className="col-md-6 mt-0">3001249</dd>
|
||||
|
||||
<dt className="col-md-6">Издательство</dt>
|
||||
<dd className="col-md-6">АСТ</dd>
|
||||
|
||||
<dt className="col-md-6">Серия</dt>
|
||||
<dd className="col-md-6">Книги Сергея Лукьяненко</dd>
|
||||
|
||||
<dt className="col-md-6">Год издания</dt>
|
||||
<dd className="col-md-6">2023</dd>
|
||||
|
||||
<dt className="col-md-6">Количество страниц</dt>
|
||||
<dd className="col-md-6">352</dd>
|
||||
|
||||
<dt className="col-md-6">Размер</dt>
|
||||
<dd className="col-md-6">20.5x13x2</dd>
|
||||
|
||||
<dt className="col-md-6">Тип обложки</dt>
|
||||
<dd className="col-md-6">Твердый переплёт</dd>
|
||||
|
||||
<dt className="col-md-6">Тираж</dt>
|
||||
<dd className="col-md-6">20000</dd>
|
||||
|
||||
<dt className="col-md-6">Вес, г</dt>
|
||||
<dd className="col-md-6">350</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 mt-0 px-0 d-none d-lg-block">
|
||||
<div className="block d-flex flex-column align-items-center align-items-lg-end">
|
||||
<div className="border border-secondary-subtle rounded-1 p-3" id="product-card-order-container">
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<img src={Check} className="me-4" alt="check" width="24" height="24" />
|
||||
<p id="product-card-text-available">
|
||||
В наличии
|
||||
</p>
|
||||
</div>
|
||||
<p className="mb-3" id="product-card-price">
|
||||
775 ₽
|
||||
</p>
|
||||
<div>
|
||||
<button type="button" className="btn rounded-1 p-3" id="product-card-button-add">
|
||||
Добавить в корзину
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row mt-4 mt-md-0 mb-4">
|
||||
<div className="col px-0">
|
||||
<div className="block">
|
||||
<p className="product-card-book-description-h mb-2">
|
||||
О товаре
|
||||
</p>
|
||||
<p className="product-card-book-description-text">
|
||||
Новый долгожданный роман от автора бестселлеров «Ночной дозор» и «Черновик».
|
||||
Увлекательная история о Мире После и мире настоящего, где
|
||||
5 процентов людей знают о надвигающемся апокалипсисе больше,
|
||||
чем кто-либо может представить.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row gy-3">
|
||||
<div className="col-12 px-0 mb-4 mb-lg-0">
|
||||
<div className="block">
|
||||
<p className="product-card-book-description-h mb-2">
|
||||
Аннотация
|
||||
</p>
|
||||
<p className="product-card-book-description-text">
|
||||
Людям порой снится прошлое. Иногда хорошее, иногда не очень.
|
||||
Но что делать, если тебе начинает сниться будущее?
|
||||
И в нём ничего хорошего нет совсем.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col px-0 d-lg-none">
|
||||
<div className="block d-flex flex-column align-items-center border border-secondary-subtle rounded-1 p-3">
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<img src={Check} className="me-4" alt="check" width="24" height="24" />
|
||||
<p id="product-card-text-available">
|
||||
В наличии
|
||||
</p>
|
||||
</div>
|
||||
<p className="mb-3" id="product-card-price">
|
||||
775 ₽
|
||||
</p>
|
||||
<div>
|
||||
<button type="button" className="btn rounded-1 p-3" id="product-card-button-add">
|
||||
Добавить в корзину
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
document.body.classList.add('bg-white')
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageProductСard;
|
||||
58
src/pages/PageRegistration.jsx
Normal file
58
src/pages/PageRegistration.jsx
Normal file
@ -0,0 +1,58 @@
|
||||
import { useState } from 'react';
|
||||
import { Form, Button } from 'react-bootstrap';
|
||||
|
||||
const PageRegistration = () => {
|
||||
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 gy-3 justify-content-center">
|
||||
<div className="col-12 mt-0">
|
||||
<div className="block d-flex justify-content-center mb-3 mb-sm-4" id="login-title">
|
||||
Регистрация
|
||||
</div>
|
||||
</div>
|
||||
<Form className="col-lg-8 col-xl-7 col-xxl-6 m-0 mt-2 mt-sm-3 d-flex flex-column gap-2" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||
<Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<Form.Control type="text" name="text" className="w-75 border-black" id="reg-input-name" placeholder="Имя пользователя" required />
|
||||
<Form.Control.Feedback>Имя пользователя заполнено</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Имя пользователя не заполнено</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<Form.Control type="email" name="email" className="w-75 border-black" id="reg-input-email" placeholder="Адрес электронной почты" required />
|
||||
<Form.Control.Feedback>Электронная почта заполнена</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Электронная почта не заполнена</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<Form.Control type="password" name="password" className="reg-input-password w-75 border-black" placeholder="Пароль" required />
|
||||
<Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
|
||||
<Form.Control type="password" name="password" className="reg-input-password w-75 border-black" placeholder="Подтвердите пароль" required />
|
||||
<Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<div className="text-center mb-3">
|
||||
<Button className="w-50 rounded-5" variant="primary" type="submit" id="reg-btn">Отправить</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
{
|
||||
document.body.classList.add('bg-white')
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageRegistration;
|
||||
@ -1,24 +1,13 @@
|
||||
import { resolve } from "path";
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { defineConfig } from "vite";
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
build: {
|
||||
sourcemap: true,
|
||||
emptyOutDir: true,
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html"),
|
||||
addItem: resolve(__dirname, "add-item.html"),
|
||||
admin: resolve(__dirname, "admin.html"),
|
||||
cart: resolve(__dirname, "cart.html"),
|
||||
catalogMobile: resolve(__dirname, "catalog-mobile.html"),
|
||||
catalog: resolve(__dirname, "catalog.html"),
|
||||
contacts: resolve(__dirname, "contacts.html"),
|
||||
login: resolve(__dirname, "login.html"),
|
||||
productCard: resolve(__dirname, "product-card.html"),
|
||||
registration: resolve(__dirname, "registration.html"),
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [react()],
|
||||
build: {
|
||||
sourcemap: true,
|
||||
chunkSizeWarningLimit: 1024,
|
||||
emptyOutDir: true,
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user