lab4
This commit is contained in:
parent
8a0b89568b
commit
a01cfe98e4
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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
59
.gitignore
vendored
59
.gitignore
vendored
@ -1,45 +1,24 @@
|
|||||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
# Compiled output
|
node_modules
|
||||||
/dist
|
dist
|
||||||
/tmp
|
dist-ssr
|
||||||
/out-tsc
|
*.local
|
||||||
/bazel-out
|
|
||||||
|
|
||||||
# Node
|
# Editor directories and files
|
||||||
/node_modules
|
|
||||||
npm-debug.log
|
|
||||||
yarn-error.log
|
|
||||||
|
|
||||||
# IDEs and editors
|
|
||||||
.idea/
|
|
||||||
.project
|
|
||||||
.classpath
|
|
||||||
.c9/
|
|
||||||
*.launch
|
|
||||||
.settings/
|
|
||||||
*.sublime-workspace
|
|
||||||
|
|
||||||
# Visual Studio Code
|
|
||||||
.vscode/*
|
.vscode/*
|
||||||
!.vscode/settings.json
|
|
||||||
!.vscode/tasks.json
|
|
||||||
!.vscode/launch.json
|
|
||||||
!.vscode/extensions.json
|
!.vscode/extensions.json
|
||||||
.history/*
|
.idea
|
||||||
|
|
||||||
# Miscellaneous
|
|
||||||
/.angular/cache
|
|
||||||
.sass-cache/
|
|
||||||
/connect.lock
|
|
||||||
/coverage
|
|
||||||
/libpeerconnection.log
|
|
||||||
testem.log
|
|
||||||
/typings
|
|
||||||
|
|
||||||
# System files
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
Thumbs.db
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
# Ignore dist
|
*.njsproj
|
||||||
dist/
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
# Отчёт по лабораторной работе №3
|
# Отчёт по лабораторной работе №4
|
||||||
|
|
||||||
Файл отчета: `Отчет лаб3.docx`
|
Файл отчета: `Отчет лаб4.docx`
|
||||||
|
|||||||
178
about_us.html
178
about_us.html
@ -1,178 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>О нас</title>
|
|
||||||
|
|
||||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
|
||||||
<link href="style.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column min-vh-100">
|
|
||||||
<header>
|
|
||||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container-md">
|
|
||||||
<a href="index.html" class="navbar-brand">
|
|
||||||
<i class="bi bi-film"></i>
|
|
||||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
|
||||||
</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="about_us.html" class="nav-link">Справка</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-lg-none">
|
|
||||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-none d-lg-inline">
|
|
||||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<!-- Contact Info -->
|
|
||||||
<section id="contact-info">
|
|
||||||
<div class="container-md py-4">
|
|
||||||
<div class="row gx-5 gy-5">
|
|
||||||
<div class="col-lg-5">
|
|
||||||
<h2 class="text-center mb-5">Контактные данные</h2>
|
|
||||||
<ul class="list-group list-group-flush">
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Страна:</span> Россия
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Адрес:</span> 432029, Ульяновск
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Телефон:</span> +7 (987) 654 32-10
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Факс:</span> +49 221 95491533
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Электронная почта:</span> sigmacinema@gmail.com
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">ИНН:</span> 7743013902
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-7">
|
|
||||||
<h2 class="text-center mb-5">Мы на карте</h2>
|
|
||||||
<iframe
|
|
||||||
src="https://www.google.com/maps/embed/v1/place?q=Ульяновск,+Россия,+432029&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
|
|
||||||
width="100%" height="500" allowfullscreen="" loading="lazy"
|
|
||||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Feedback -->
|
|
||||||
<section id="feedback" class="bg-light">
|
|
||||||
<div class="container-md py-4 mt-5">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2>Остались вопросы?</h2>
|
|
||||||
<p class="lead text-muted">Задайте ваш вопрос нашей службе поддержки - мы постараемся ответить на него в ближайшее время</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row justify-content-center mt-5">
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<form>
|
|
||||||
<label for="email" class="form-label">Ваш адрес электронной почты</label>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
|
|
||||||
<input type="email" class="form-control" id="email" placeholder="myemail@mail.com">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label for="name" class="form-label">Ваше имя</label>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text"><i class="bi bi-person-fill"></i></span>
|
|
||||||
<input type="text" class="form-control" id="name" placeholder="Иванов Иван">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label for="subject" class="form-label">О чем ваш вопрос?</label>
|
|
||||||
<div class="input-group mb-4">
|
|
||||||
<span class="input-group-text"><i class="bi bi-chat-right-dots-fill"></i></span>
|
|
||||||
<select id="subject" class="form-select">
|
|
||||||
<option value="pricing" selected>Оплата подписки</option>
|
|
||||||
<option value="content">Фильмы или сериалы</option>
|
|
||||||
<option value="other">Другое</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<textarea id="query" class="form-control" style="height: 140px" placeholder="Ваш вопрос..."></textarea>
|
|
||||||
|
|
||||||
<div class="text-center mt-4">
|
|
||||||
<button type="submit" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#querry-modal">
|
|
||||||
Отправить
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Querry Modal -->
|
|
||||||
<div class="modal fade" id="querry-modal" tabindex="-1">
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="modal-title">Ваш вопрос отправлен</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus cum nihil. Minus, porro.</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="py-2 bg-dark text-light mt-auto">
|
|
||||||
<div class="container-md py-2">
|
|
||||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
|
||||||
<div>
|
|
||||||
<div class="download-buttons-container justify-content-start">
|
|
||||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.huawei.ru/appgallery/"><img src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.apple.com/app-store/"><img src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
|
||||||
</div>
|
|
||||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
|
||||||
</div>
|
|
||||||
<div class="download-buttons-container">
|
|
||||||
<a href="index.html" class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
|
||||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика конфиденциальности</a>
|
|
||||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О нас</a>
|
|
||||||
<a href="admin_panel.html" class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
226
admin_panel.html
226
admin_panel.html
@ -1,226 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>CRUD администрирование</title>
|
|
||||||
|
|
||||||
<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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
|
||||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
|
||||||
<link href="style.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column min-vh-100">
|
|
||||||
<header>
|
|
||||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container-md">
|
|
||||||
<a href="index.html" class="navbar-brand">
|
|
||||||
<i class="bi bi-film"></i>
|
|
||||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
|
||||||
</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="about_us.html" class="nav-link">Справка</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-lg-none">
|
|
||||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-none d-lg-inline">
|
|
||||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section id="movies">
|
|
||||||
<div class="container-md py-4 mb-4">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2>Страница администратора</h2>
|
|
||||||
<p class="lead text-muted">Выполнение CRUD-операций над фильмами или сериалами</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="btn btn-primary" id="addMovieButton">Добавить запись</button>
|
|
||||||
|
|
||||||
<table id="items-table" class="table table-striped">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">№</th>
|
|
||||||
<th scope="col" class="w-25">Название</th>
|
|
||||||
<th scope="col" class="w-25">Категория</th>
|
|
||||||
<th scope="col" class="w-25">Требуется подписка</th>
|
|
||||||
<th scope="col" class="w-25">Год производства</th>
|
|
||||||
<th scope="col"></th>
|
|
||||||
<th scope="col"></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr id="line-1">
|
|
||||||
<th scope="row">1</th>
|
|
||||||
<td>Американский психопат</td>
|
|
||||||
<td>Фильм</td>
|
|
||||||
<td>+</td>
|
|
||||||
<td>1999</td>
|
|
||||||
<td><a href="#"><i class="fa-solid fa-pencil"></i></a></td>
|
|
||||||
<td><a href="#"><i class="fa-solid fa-trash"></i></a></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr id="line-2">
|
|
||||||
<th scope="row">2</th>
|
|
||||||
<td>Драйв</td>
|
|
||||||
<td>Фильм</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>1999</td>
|
|
||||||
<td><a href="#"><i class="fa-solid fa-pencil"></i></a></td>
|
|
||||||
<td><a href="#"><i class="fa-solid fa-trash"></i></a></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr id="line-3">
|
|
||||||
<th scope="row">3</th>
|
|
||||||
<td>Острые козырьки</td>
|
|
||||||
<td>Сериал</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>1999</td>
|
|
||||||
<td><a href="#"><i class="fa-solid fa-pencil"></i></a></td>
|
|
||||||
<td><a href="#"><i class="fa-solid fa-trash"></i></a></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="py-2 bg-dark text-light mt-auto">
|
|
||||||
<div class="container-md py-2">
|
|
||||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
|
||||||
<div>
|
|
||||||
<div class="download-buttons-container justify-content-start">
|
|
||||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.huawei.ru/appgallery/"><img src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.apple.com/app-store/"><img src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
|
||||||
</div>
|
|
||||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
|
||||||
</div>
|
|
||||||
<div class="download-buttons-container">
|
|
||||||
<a href="index.html" class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
|
||||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика конфиденциальности</a>
|
|
||||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О нас</a>
|
|
||||||
<a href="admin_panel.html" class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- CRUD modal -->
|
|
||||||
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<form id="items-form" class="needs-validation" novalidate>
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h1 class="modal-title fs-5" id="items-update-title"></h1>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="text-center">
|
|
||||||
<img id="image-preview" src="https://via.placeholder.com/200" class="image-preview"
|
|
||||||
alt="placeholder">
|
|
||||||
</div>
|
|
||||||
<input id="items-line-id" type="number" hidden>
|
|
||||||
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="item" class="form-label">Название</label>
|
|
||||||
<input id="title" name="title" class="form-control" type="text" required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="type" class="form-label">Тип</label>
|
|
||||||
<select id="type" class="form-select" required>
|
|
||||||
<option value="Фильм" selected>Фильм</option>
|
|
||||||
<option value="Сериал">Сериал</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-check mb-3">
|
|
||||||
<input type="checkbox" class="form-check-input" id="requiresSubscription">
|
|
||||||
<label for="requiresSubscription" class="form-check-label">Требуется подписка</label>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label" for="image">Постер</label>
|
|
||||||
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label" for="description">Описание</label>
|
|
||||||
<textarea id="description" class="form-control" style="height: 140px"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label" for="releaseDate">Год производства</label>
|
|
||||||
<input id="releaseDate" name="releaseDate" class="form-control" type="number" min="1900" step="1"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="country" class="form-label">Страна</label>
|
|
||||||
<input id="country" name="country" class="form-control" type="text" required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="tagline" class="form-label">Слоган</label>
|
|
||||||
<input id="tagline" name="tagline" class="form-control" type="text" required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="director" class="form-label">Режиссер</label>
|
|
||||||
<input id="director" name="director" class="form-control" type="text" required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="ageRating" class="form-label">Возрастное ограничение</label>
|
|
||||||
<select id="ageRating" class="form-select" required>
|
|
||||||
<option value="0+" selected>0+</option>
|
|
||||||
<option value="6+">6+</option>
|
|
||||||
<option value="12+">12+</option>
|
|
||||||
<option value="16+">16+</option>
|
|
||||||
<option value="18+">18+</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="video" class="form-label">URL видео</label>
|
|
||||||
<input id="video" name="video" class="form-control" type="text" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
|
||||||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="module">
|
|
||||||
import validation from "./js/validation";
|
|
||||||
import { tableModal } from './js/admin_panel.js';
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
validation();
|
|
||||||
tableModal();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
118
index.html
118
index.html
@ -1,120 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<html lang="ru">
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>СигмаТеатр</title>
|
<title>СигмаТеатр</title>
|
||||||
|
|
||||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
|
||||||
<link href="style.css" rel="stylesheet">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100">
|
<body>
|
||||||
<header>
|
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
<div class="container-md">
|
|
||||||
<a href="index.html" class="navbar-brand">
|
|
||||||
<i class="bi bi-film"></i>
|
|
||||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
|
||||||
</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="about_us.html" class="nav-link">Справка</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-lg-none">
|
|
||||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-none d-lg-inline">
|
|
||||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section id="movies">
|
|
||||||
<div class="container-md py-4 mb-4">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2>Самые базированные фильмы</h2>
|
|
||||||
<p class="lead text-muted">Здесь собраны ваши любимые кинофильмы</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row gx-5 gy-5 my-3">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="series" class="bg-light">
|
|
||||||
<div class="container-md py-4">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2>Популярные сериалы</h2>
|
|
||||||
<p class="lead text-muted">Сериалы, главные герои которых - буквально вы</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row gx-5 gy-5 my-3">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="py-2 bg-dark text-light mt-auto">
|
|
||||||
<div class="container-md py-2">
|
|
||||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
|
||||||
<div>
|
|
||||||
<div class="download-buttons-container justify-content-start">
|
|
||||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img
|
|
||||||
src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.huawei.ru/appgallery/"><img
|
|
||||||
src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.apple.com/app-store/"><img
|
|
||||||
src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
|
||||||
</div>
|
|
||||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
|
||||||
</div>
|
|
||||||
<div class="download-buttons-container">
|
|
||||||
<a href="index.html"
|
|
||||||
class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
|
||||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика
|
|
||||||
конфиденциальности</a>
|
|
||||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О
|
|
||||||
нас</a>
|
|
||||||
<a href="admin_panel.html"
|
|
||||||
class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script type="module">
|
|
||||||
import renderMovies from './js/main_page.js';
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
renderMovies();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,145 +0,0 @@
|
|||||||
import {
|
|
||||||
getMovies, createMovie, updateMovie, deleteMovie,
|
|
||||||
} from './rest_api';
|
|
||||||
|
|
||||||
import { hideUpdateModal, showUpdateModal } from './table_modal';
|
|
||||||
|
|
||||||
import {
|
|
||||||
controls, imagePlaceholder, addTableRow,
|
|
||||||
} from './admin_panel_ui';
|
|
||||||
|
|
||||||
export async function showAllMovieEntries() {
|
|
||||||
const tableBody = document.querySelector('tbody');
|
|
||||||
console.log(tableBody);
|
|
||||||
tableBody.innerHTML = '';
|
|
||||||
|
|
||||||
const movies = await getMovies();
|
|
||||||
movies.forEach((movie, index) => {
|
|
||||||
tableBody.appendChild(
|
|
||||||
addTableRow(
|
|
||||||
movie,
|
|
||||||
index,
|
|
||||||
() => showUpdateModal(movie),
|
|
||||||
() => removeMovieObject(movie.id),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function addMovieObject(serializedMovieObject) {
|
|
||||||
const data = await createMovie(serializedMovieObject);
|
|
||||||
console.info("Added");
|
|
||||||
console.info(data);
|
|
||||||
|
|
||||||
showAllMovieEntries();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function editMovieObject(id, serializedMovieObject) {
|
|
||||||
const data = await updateMovie(id, serializedMovieObject);
|
|
||||||
console.info("Updated");
|
|
||||||
console.info(data);
|
|
||||||
|
|
||||||
showAllMovieEntries();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function removeMovieObject(id) {
|
|
||||||
if (!confirm("Do you really want to remove this item?")) {
|
|
||||||
console.info("Canceled");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await deleteMovie(id);
|
|
||||||
console.info("Removed");
|
|
||||||
console.info(data);
|
|
||||||
|
|
||||||
showAllMovieEntries();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function readFile(file) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
reader.onloadend = () => {
|
|
||||||
const fileContent = reader.result;
|
|
||||||
resolve(fileContent);
|
|
||||||
};
|
|
||||||
|
|
||||||
reader.onerror = () => {
|
|
||||||
reject(new Error("oops, something went wrong with the file reader."));
|
|
||||||
};
|
|
||||||
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function updateImagePreview() {
|
|
||||||
const file = controls.image.files[0];
|
|
||||||
const fileContent = await readFile(file);
|
|
||||||
|
|
||||||
controls.imagePreview.src = fileContent;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function tableModal() {
|
|
||||||
showAllMovieEntries();
|
|
||||||
|
|
||||||
controls.image.addEventListener("change", () => updateImagePreview());
|
|
||||||
controls.button.addEventListener("click", () => showUpdateModal(null));
|
|
||||||
|
|
||||||
controls.form.addEventListener("submit", async (event) => {
|
|
||||||
console.info("Form onSubmit");
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
if (!controls.form.checkValidity()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let imageBase64 = "";
|
|
||||||
|
|
||||||
if (controls.imagePreview.src !== imagePlaceholder) {
|
|
||||||
const result = await fetch(controls.imagePreview.src);
|
|
||||||
const blob = await result.blob();
|
|
||||||
|
|
||||||
imageBase64 = await readFile(blob);
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentId = controls.lineId.value;
|
|
||||||
if (!currentId) {
|
|
||||||
await addMovieObject(
|
|
||||||
{
|
|
||||||
title: controls.title.value,
|
|
||||||
type: controls.type.value,
|
|
||||||
requiresSubscription: controls.requiresSubscription.checked,
|
|
||||||
poster: imageBase64,
|
|
||||||
description: controls.description.value,
|
|
||||||
releaseDate: controls.releaseDate.value,
|
|
||||||
country: controls.country.value,
|
|
||||||
tagline: controls.tagline.value,
|
|
||||||
director: controls.director.value,
|
|
||||||
ageRating: controls.ageRating.value,
|
|
||||||
video: controls.video.value,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
await editMovieObject(
|
|
||||||
currentId,
|
|
||||||
{
|
|
||||||
title: controls.title.value,
|
|
||||||
type: controls.type.value,
|
|
||||||
requiresSubscription: controls.requiresSubscription.checked,
|
|
||||||
poster: imageBase64,
|
|
||||||
description: controls.description.value,
|
|
||||||
releaseDate: controls.releaseDate.value,
|
|
||||||
country: controls.country.value,
|
|
||||||
tagline: controls.tagline.value,
|
|
||||||
director: controls.director.value,
|
|
||||||
ageRating: controls.ageRating.value,
|
|
||||||
video: controls.video.value,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
hideUpdateModal();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
export const controls = {
|
|
||||||
button: document.getElementById("addMovieButton"),
|
|
||||||
table: document.querySelector("#items-table tbody"),
|
|
||||||
form: document.getElementById("items-form"),
|
|
||||||
lineId: document.getElementById("items-line-id"),
|
|
||||||
imagePreview: document.getElementById("image-preview"),
|
|
||||||
|
|
||||||
title: document.querySelector('#title'),
|
|
||||||
type: document.querySelector('#type'),
|
|
||||||
requiresSubscription: document.querySelector('#requiresSubscription'),
|
|
||||||
image: document.querySelector('#image'),
|
|
||||||
description: document.querySelector('#description'),
|
|
||||||
releaseDate: document.querySelector('#releaseDate'),
|
|
||||||
country: document.querySelector('#country'),
|
|
||||||
tagline: document.querySelector('#tagline'),
|
|
||||||
director: document.querySelector('#director'),
|
|
||||||
ageRating: document.querySelector('#ageRating'),
|
|
||||||
video: document.querySelector('#video'),
|
|
||||||
};
|
|
||||||
|
|
||||||
export const imagePlaceholder = "https://via.placeholder.com/200";
|
|
||||||
|
|
||||||
export function createTableColumn(value) {
|
|
||||||
const td = document.createElement("td");
|
|
||||||
td.textContent = value;
|
|
||||||
|
|
||||||
return td;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createTableAnchor(icon, callback) {
|
|
||||||
const i = document.createElement("i");
|
|
||||||
i.classList.add("fa-solid", icon);
|
|
||||||
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.href = "#";
|
|
||||||
a.appendChild(i);
|
|
||||||
a.onclick = (event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
callback();
|
|
||||||
};
|
|
||||||
|
|
||||||
const td = document.createElement("td");
|
|
||||||
td.appendChild(a);
|
|
||||||
return td;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addTableRow(movie, index, editCallback, deleteCallback) {
|
|
||||||
const rowNumber = document.createElement("th");
|
|
||||||
rowNumber.scope = "row";
|
|
||||||
rowNumber.textContent = index + 1;
|
|
||||||
|
|
||||||
const row = document.createElement("tr");
|
|
||||||
row.id = `line-${movie.id}`;
|
|
||||||
|
|
||||||
row.appendChild(rowNumber);
|
|
||||||
row.appendChild(createTableColumn(movie.title));
|
|
||||||
row.appendChild(createTableColumn(movie.type));
|
|
||||||
row.appendChild(createTableColumn(movie.requiresSubscription === true ? 'Да' : 'Нет'));
|
|
||||||
row.appendChild(createTableColumn(movie.releaseDate));
|
|
||||||
row.appendChild(createTableAnchor("fa-pencil", editCallback));
|
|
||||||
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
|
|
||||||
|
|
||||||
return row;
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import { getMovies } from './rest_api';
|
|
||||||
|
|
||||||
export async function renderMovies() {
|
|
||||||
const moviesSection = document.querySelector('#movies');
|
|
||||||
const moviesContainer = moviesSection.querySelector('.row');
|
|
||||||
|
|
||||||
const seriesSection = document.querySelector('#series');
|
|
||||||
const seriesContainer = seriesSection.querySelector('.row');
|
|
||||||
|
|
||||||
moviesContainer.innerHTML = '';
|
|
||||||
seriesContainer.innerHTML = '';
|
|
||||||
|
|
||||||
const movies = await getMovies();
|
|
||||||
movies.forEach((movie) => {
|
|
||||||
const movieTemplate = `
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<a href="videoplayer.html?id=${movie.id}" class="text-decoration-none">
|
|
||||||
<img src="${movie.poster}" class="img-fluid film-poster" alt="">
|
|
||||||
<h5 class="text-black mt-3">${movie.title}</h5>
|
|
||||||
<h6 class="text-secondary">${movie.requiresSubscription === true ? 'По подписке' : 'Бесплатно'}</h6>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
if (movie.type === 'Фильм') {
|
|
||||||
moviesContainer.innerHTML += movieTemplate;
|
|
||||||
} else if (movie.type === 'Сериал') {
|
|
||||||
seriesContainer.innerHTML += movieTemplate;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default renderMovies;
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
const uri = "http://localhost:8081";
|
|
||||||
|
|
||||||
export async function getMovies() {
|
|
||||||
const response = await fetch(`${uri}/movies`);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getMovieById(id) {
|
|
||||||
const response = await fetch(`${uri}/movies/${id}`);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createMovie(serializedMovie) {
|
|
||||||
console.log(serializedMovie);
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify(serializedMovie),
|
|
||||||
headers: {
|
|
||||||
"Accept": "application/json",
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const response = await fetch(`${uri}/movies`, options);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateMovie(id, serializedMovie) {
|
|
||||||
const options = {
|
|
||||||
method: "PUT",
|
|
||||||
body: JSON.stringify(serializedMovie),
|
|
||||||
headers: {
|
|
||||||
"Accept": "application/json",
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const response = await fetch(`${uri}/movies/${id}`, options);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteMovie(id) {
|
|
||||||
const options = {
|
|
||||||
method: "DELETE",
|
|
||||||
};
|
|
||||||
|
|
||||||
const response = await fetch(`${uri}/movies/${id}`, options);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
import { Modal } from "bootstrap";
|
|
||||||
import { controls, imagePlaceholder } from "./admin_panel_ui";
|
|
||||||
|
|
||||||
const modal = document.getElementById("items-update");
|
|
||||||
const myModal = modal ? new Modal(modal, {}) : null;
|
|
||||||
|
|
||||||
const modalTitle = document.getElementById("items-update-title");
|
|
||||||
|
|
||||||
function resetValues() {
|
|
||||||
controls.lineId.value = "";
|
|
||||||
controls.imagePreview.src = imagePlaceholder;
|
|
||||||
|
|
||||||
controls.title.value = "";
|
|
||||||
controls.type.value = "";
|
|
||||||
controls.requiresSubscription.checked = false;
|
|
||||||
controls.image.value = "";
|
|
||||||
controls.description.value = "";
|
|
||||||
controls.releaseDate.value = "";
|
|
||||||
controls.country.value = "";
|
|
||||||
controls.tagline.value = "";
|
|
||||||
controls.director.value = "";
|
|
||||||
controls.ageRating.value = "";
|
|
||||||
controls.video.value = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function showUpdateModal(item) {
|
|
||||||
modalTitle.innerHTML = item === null ? "Добавить" : "Изменить";
|
|
||||||
console.info(item);
|
|
||||||
|
|
||||||
if (item) {
|
|
||||||
controls.lineId.value = item.id;
|
|
||||||
controls.imagePreview.src = item.poster ? item.poster : imagePlaceholder;
|
|
||||||
|
|
||||||
controls.title.value = item.title;
|
|
||||||
controls.type.value = item.type;
|
|
||||||
controls.requiresSubscription.checked = item.requiresSubscription;
|
|
||||||
controls.description.value = item.description;
|
|
||||||
controls.releaseDate.value = item.releaseDate;
|
|
||||||
controls.country.value = item.country;
|
|
||||||
controls.tagline.value = item.tagline;
|
|
||||||
controls.director.value = item.director;
|
|
||||||
controls.ageRating.value = item.ageRating;
|
|
||||||
controls.video.value = item.video;
|
|
||||||
} else {
|
|
||||||
resetValues();
|
|
||||||
}
|
|
||||||
|
|
||||||
myModal.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
export function hideUpdateModal() {
|
|
||||||
resetValues();
|
|
||||||
controls.form.classList.remove("was-validated");
|
|
||||||
|
|
||||||
myModal.hide();
|
|
||||||
}
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
function validation() {
|
|
||||||
const forms = document.querySelectorAll("form.needs-validation");
|
|
||||||
|
|
||||||
forms.forEach((form) => {
|
|
||||||
form.addEventListener("submit", (event) => {
|
|
||||||
if (!form.checkValidity()) {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
|
|
||||||
form.classList.add("was-validated");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default validation;
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
import { getMovieById } from './rest_api';
|
|
||||||
|
|
||||||
export async function loadMovieData() {
|
|
||||||
const id = new URLSearchParams(location.search).get('id');
|
|
||||||
|
|
||||||
const movie = await getMovieById(id);
|
|
||||||
|
|
||||||
document.querySelector('iframe').setAttribute('src', movie.video);
|
|
||||||
document.querySelector('#movieTitle').innerHTML = movie.title;
|
|
||||||
document.querySelector('#movieDescription').innerHTML = movie.description;
|
|
||||||
|
|
||||||
const movieInfoTemplate = `
|
|
||||||
<h3>О фильме</h3>
|
|
||||||
<ul class="list-group list-group-flush my-3">
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Год производства:</span> ${movie.releaseDate}
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Страна:</span> ${movie.country}
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Слоган:</span> <span class="text-secondary">«${movie.tagline}»</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Режиссер:</span> ${movie.director}
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Возраст:</span> ${movie.ageRating}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
`;
|
|
||||||
|
|
||||||
document.querySelector('#movieInfoContainer').innerHTML = movieInfoTemplate;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default loadMovieData;
|
|
||||||
@ -3,7 +3,7 @@
|
|||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"moduleResolution": "Node",
|
"moduleResolution": "Node",
|
||||||
"target": "ES2020",
|
"target": "ES2020",
|
||||||
"jsx": "preserve",
|
"jsx": "react",
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"strictFunctionTypes": true
|
"strictFunctionTypes": true
|
||||||
},
|
},
|
||||||
|
|||||||
173
login.html
173
login.html
@ -1,173 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Вход в аккаунт</title>
|
|
||||||
|
|
||||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
|
||||||
<link href="style.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column min-vh-100">
|
|
||||||
<header>
|
|
||||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container-md">
|
|
||||||
<a href="index.html" class="navbar-brand">
|
|
||||||
<i class="bi bi-film"></i>
|
|
||||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
|
||||||
</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="about_us.html" class="nav-link">Справка</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-lg-none">
|
|
||||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-none d-lg-inline">
|
|
||||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<!-- Login -->
|
|
||||||
<section id="login">
|
|
||||||
<div class="container-sm py-4">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2>Вход в аккаунт</h2>
|
|
||||||
<p class="lead text-muted">Войдите в ваш аккаунт чтобы воспользоваться подпиской и иметь возможность отмечать желаемые фильмы</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row justify-content-center mt-5">
|
|
||||||
<div class="col-lg-4">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="d-flex flex-row justify-content-center">
|
|
||||||
<i class="bi bi-person-circle login-icon text-primary"></i>
|
|
||||||
<p class="lead my-auto ms-3 text-primary">Вход</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form action="" class="my-3">
|
|
||||||
<label for="email" class="form-label">Электронная почта</label>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
|
|
||||||
<input type="email" class="form-control" id="email" placeholder="myemail@mail.com">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label for="password" class="form-label">Пароль</label>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
|
|
||||||
<input type="password" class="form-control" id="password">
|
|
||||||
<div class="input-group-text" id="hidePassword">
|
|
||||||
<a href=""><i class="bi bi-eye-fill"></i></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group mt-4 d-flex justify-content-between">
|
|
||||||
<div class="form-check">
|
|
||||||
<input type="checkbox" class="form-check-input" id="formCheck">
|
|
||||||
<label for="formCheck" class="form-check-label text-secondary"><small>Запомнить на этом компьютере</small></label>
|
|
||||||
</div>
|
|
||||||
<div class="forgot">
|
|
||||||
<button class="btn btn-sm text-primary" data-bs-toggle="modal" data-bs-target="#forgot-modal" id="forgotPassword">Забыли пароль?</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center mt-5">
|
|
||||||
<button class="btn btn-primary">Войти</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="py-2 bg-dark text-light mt-auto">
|
|
||||||
<div class="container-md py-2">
|
|
||||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
|
||||||
<div>
|
|
||||||
<div class="download-buttons-container justify-content-start">
|
|
||||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.huawei.ru/appgallery/"><img src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.apple.com/app-store/"><img src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
|
||||||
</div>
|
|
||||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
|
||||||
</div>
|
|
||||||
<div class="download-buttons-container">
|
|
||||||
<a href="index.html" class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
|
||||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика конфиденциальности</a>
|
|
||||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О нас</a>
|
|
||||||
<a href="admin_panel.html" class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- modal itself -->
|
|
||||||
<div class="modal fade" id="forgot-modal" tabindex="-1">
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="modal-title">Восстановление пароля</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>В поле ниже напишите адрес электроннной почты, с которой была совершена регистрация. На этот адрес придёт письмо с дальнейшеми указаниями.</p>
|
|
||||||
<label for="modal-email" class="form-label mt-3">Адрес электронной почты:</label>
|
|
||||||
<input type="text" class="form-control" id="modal-email" placeholder="myemail@mail.com">
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-primary">Отправить</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
document.querySelector('#hidePassword').addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const inputField = document.querySelector('#password');
|
|
||||||
|
|
||||||
if (inputField.getAttribute('type') === 'password') {
|
|
||||||
inputField.setAttribute('type', 'text');
|
|
||||||
} else {
|
|
||||||
inputField.setAttribute('type', 'password');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelector('#forgotPassword').addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
3145
package-lock.json
generated
3145
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
38
package.json
38
package.json
@ -1,26 +1,32 @@
|
|||||||
{
|
{
|
||||||
"name": "int-prog",
|
"name": "lec4",
|
||||||
"version": "1.0.0",
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"vite": "vite",
|
"dev": "vite",
|
||||||
"serve": "http-server -p 3000 ./dist/",
|
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"rest": "json-server --watch data.json -p 8081",
|
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||||
"dev": "npm-run-all --parallel rest vite",
|
"preview": "vite preview"
|
||||||
"prod": "npm-run-all build --parallel serve rest"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "6.4.2",
|
"react": "^18.2.0",
|
||||||
"bootstrap": "^5.3.2"
|
"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": {
|
"devDependencies": {
|
||||||
"vite": "4.4.9",
|
"@types/react": "^18.2.15",
|
||||||
"eslint": "8.50.0",
|
"@types/react-dom": "^18.2.7",
|
||||||
"eslint-config-airbnb-base": "15.0.0",
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
"eslint-plugin-import": "2.28.1",
|
"eslint": "^8.45.0",
|
||||||
"http-server": "14.1.1",
|
"eslint-config-airbnb-base": "^15.0.0",
|
||||||
"json-server": "0.17.4",
|
"eslint-plugin-react": "^7.32.2",
|
||||||
"npm-run-all": "4.1.5"
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.3",
|
||||||
|
"vite": "^4.4.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
160
pricing.html
160
pricing.html
@ -1,160 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Подписка</title>
|
|
||||||
|
|
||||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
|
||||||
<link href="style.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column min-vh-100">
|
|
||||||
<header>
|
|
||||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container-md">
|
|
||||||
<a href="index.html" class="navbar-brand">
|
|
||||||
<i class="bi bi-film"></i>
|
|
||||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
|
||||||
</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="about_us.html" class="nav-link">Справка</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-lg-none">
|
|
||||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-none d-lg-inline">
|
|
||||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<!-- Subscrition Features -->
|
|
||||||
<section id="subscription-features">
|
|
||||||
<div class="container-md py-5 mb-0">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2>Преимущества подписки</h2>
|
|
||||||
<p class="lead text-muted">Всё лучшее - в одной подписке</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row justify-content-between align-items-center my-5 gy-5">
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="d-flex flex-row align-items-center">
|
|
||||||
<img src="assets/pricing/diamond.png" width="50px" height="100%" alt="">
|
|
||||||
<div class="ms-3">
|
|
||||||
<p class="lead">Большая коллекция</p>
|
|
||||||
<p>Известные топовые фильмы и новинки</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="d-flex flex-row align-items-center">
|
|
||||||
<img src="assets/pricing/no-ads.png" width="50px" height="100%" alt="">
|
|
||||||
<div class="ms-3">
|
|
||||||
<p class="lead">Без рекламы</p>
|
|
||||||
<p>Видео не прервётся на самом интересном месте</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pricing -->
|
|
||||||
<section id="pricing" class="bg-light">
|
|
||||||
<div class="container-md py-5">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2>Подписка на кинотеатр</h2>
|
|
||||||
<p class="lead text-muted">Выберите, какой план вам подходит больше всего</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row my-5 justify-content-center align-items-center gy-3">
|
|
||||||
<div class="col-8 col-lg-4 col-xl-3">
|
|
||||||
<div class="card border-1">
|
|
||||||
<div class="card-body text-center py-4">
|
|
||||||
<h4 class="card-title">Большой Шлёппа</h4>
|
|
||||||
<p class="lead card-subtitle">Подписка на неделю</p>
|
|
||||||
<p class="display-5 my-4 text-primary fw-bold">49,99 ₽</p>
|
|
||||||
<p class="card-text mx-5 text-muted d-none d-lg-block">Попробуйте и решите, нравится ли вам наш сервис</p>
|
|
||||||
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Купить</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-9 col-lg-4">
|
|
||||||
<div class="card border-primary border-3 pb-3">
|
|
||||||
<div class="card-header text-center text-primary">Самый популярный</div>
|
|
||||||
<div class="card-body text-center py-5">
|
|
||||||
<h4 class="card-title">Базированный гигачад</h4>
|
|
||||||
<p class="lead card-subtitle">Подписка на месяц</p>
|
|
||||||
<p class="display-4 my-4 text-primary fw-bold">149,99 ₽</p>
|
|
||||||
<p class="card-text mx-5 text-muted d-none d-lg-block">Для тех, кто очень любит смотреть фильмы и сериалы по вечерам</p>
|
|
||||||
<a href="#" class="btn btn-outline-primary btn-lg mt-4">Купить</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-8 col-lg-4 col-xl-3">
|
|
||||||
<div class="card border-1">
|
|
||||||
<div class="card-body text-center py-4">
|
|
||||||
<h4 class="card-title">Райан Гослинг</h4>
|
|
||||||
<p class="lead card-subtitle">Подписка на год</p>
|
|
||||||
<p class="display-5 my-4 text-primary fw-bold">799,99 ₽</p>
|
|
||||||
<p class="card-text mx-5 text-muted d-none d-lg-block">Если вдруг захотите остаться с нами подольше</p>
|
|
||||||
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Купить</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="py-2 bg-dark text-light mt-auto">
|
|
||||||
<div class="container-md py-2">
|
|
||||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
|
||||||
<div>
|
|
||||||
<div class="download-buttons-container justify-content-start">
|
|
||||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.huawei.ru/appgallery/"><img src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.apple.com/app-store/"><img src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
|
||||||
</div>
|
|
||||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
|
||||||
</div>
|
|
||||||
<div class="download-buttons-container">
|
|
||||||
<a href="index.html" class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
|
||||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика конфиденциальности</a>
|
|
||||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О нас</a>
|
|
||||||
<a href="admin_panel.html" class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
9
src/App.css
Normal file
9
src/App.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
body {
|
||||||
|
padding-top: 62px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
border-radius: 16px;
|
||||||
|
max-width: 200px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
26
src/App.jsx
Normal file
26
src/App.jsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Container } from 'react-bootstrap';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import './App.css';
|
||||||
|
import Footer from './components/footer/Footer.jsx';
|
||||||
|
import Navigation from './components/navigation/Navigation.jsx';
|
||||||
|
|
||||||
|
const App = ({ routes }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navigation routes={ routes }></Navigation>
|
||||||
|
|
||||||
|
<Container as="main" fluid className="px-0">
|
||||||
|
<Outlet />
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Footer routes={ routes } />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
App.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
BIN
src/assets/main-page/posters/BetterCallSaul.jpg
Normal file
BIN
src/assets/main-page/posters/BetterCallSaul.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 551 KiB |
|
Before Width: | Height: | Size: 329 KiB After Width: | Height: | Size: 329 KiB |
|
Before Width: | Height: | Size: 970 KiB After Width: | Height: | Size: 970 KiB |
|
Before Width: | Height: | Size: 365 KiB After Width: | Height: | Size: 365 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 299 KiB After Width: | Height: | Size: 299 KiB |
|
Before Width: | Height: | Size: 6.1 MiB After Width: | Height: | Size: 6.1 MiB |
|
Before Width: | Height: | Size: 310 KiB After Width: | Height: | Size: 310 KiB |
|
Before Width: | Height: | Size: 292 KiB After Width: | Height: | Size: 292 KiB |
|
Before Width: | Height: | Size: 343 KiB After Width: | Height: | Size: 343 KiB |
|
Before Width: | Height: | Size: 269 KiB After Width: | Height: | Size: 269 KiB |
|
Before Width: | Height: | Size: 297 KiB After Width: | Height: | Size: 297 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
@ -1,8 +1,4 @@
|
|||||||
body{
|
.flex-box {
|
||||||
padding-top: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-buttons-container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@ -14,13 +10,22 @@ body{
|
|||||||
|
|
||||||
.footer-navigation-button {
|
.footer-navigation-button {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1300px) {
|
@media (max-width: 1300px) {
|
||||||
.download-buttons-container {
|
.flex-box {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#stores {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.download-button {
|
.download-button {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
@ -30,25 +35,8 @@ body{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.film-poster {
|
@media (max-width: 600px) {
|
||||||
border-radius: 20px;
|
#stores {
|
||||||
}
|
flex-direction: column;
|
||||||
|
}
|
||||||
.login-icon {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-preview {
|
|
||||||
border-radius: 20px;
|
|
||||||
max-width: 200px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-dialog {
|
|
||||||
overflow-y: initial !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
65
src/components/footer/Footer.jsx
Normal file
65
src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import { Container } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import './Footer.css';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import appGallery from '../../assets/footer/download-buttons/AppGallery.svg';
|
||||||
|
import appStore from '../../assets/footer/download-buttons/AppStore.svg';
|
||||||
|
import googlePlay from '../../assets/footer/download-buttons/GooglePlay.svg';
|
||||||
|
|
||||||
|
const Footer = ({ routes }) => {
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
|
||||||
|
const pageMain = routes.find((page) => { return page.title === 'СигмаТеатр'; });
|
||||||
|
const pageAboutUs = routes.find((page) => { return page.title === 'О нас'; });
|
||||||
|
const pageAdminPanel = routes.find((page) => { return page.title === 'CRUD администрирование'; });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="py-2 bg-dark text-light mt-auto">
|
||||||
|
<Container fluid="md" className="py-2">
|
||||||
|
<div className="d-flex flex-wrap justify-content-between align-items-center">
|
||||||
|
<div>
|
||||||
|
<div className="flex-box justify-content-start" id="stores">
|
||||||
|
<a href="https://play.google.com/store/games?hl=ru&gl=US">
|
||||||
|
<img src={ googlePlay } className="download-button" alt="" />
|
||||||
|
</a>
|
||||||
|
<a href="https://www.huawei.ru/appgallery/">
|
||||||
|
<img src={ appGallery } className="download-button" alt="" />
|
||||||
|
</a>
|
||||||
|
<a href="https://www.apple.com/app-store/">
|
||||||
|
<img src={ appStore } className="download-button" alt="" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h6 className="text-secondary mt-3">© { year } СигмаТеатр</h6>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-box" id="links">
|
||||||
|
<Link to={ pageMain.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
|
||||||
|
Главная
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link to={ pageMain.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
|
||||||
|
Политика конфиденциальности
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link to={ pageAboutUs.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
|
||||||
|
О нас
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link to={ pageAdminPanel.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
|
||||||
|
Страница администратора
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Footer.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
27
src/components/movies/MovieBookmark.jsx
Normal file
27
src/components/movies/MovieBookmark.jsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { Col } from 'react-bootstrap';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
const MovieBookmark = ({
|
||||||
|
id, imageSrc, title, requiresSubscription, deleteCallback,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Col xs={ 6 } sm={ 4 } lg={ 3 }>
|
||||||
|
<a href={ `/videoplayer?id=${id}` } className="text-decoration-none">
|
||||||
|
<img src={ imageSrc } className="img-fluid film-poster" alt="" />
|
||||||
|
<h5 className="text-black mt-3">{ title }</h5>
|
||||||
|
<h6 className="text-secondary">{ requiresSubscription ? 'По подписке' : 'Бесплатно' }</h6>
|
||||||
|
</a>
|
||||||
|
<button className="btn btn-outline-info" onClick={ () => deleteCallback(id) }>Удалить</button>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
MovieBookmark.propTypes = {
|
||||||
|
id: PropTypes.number,
|
||||||
|
imageSrc: PropTypes.string,
|
||||||
|
title: PropTypes.string,
|
||||||
|
requiresSubscription: PropTypes.bool,
|
||||||
|
deleteCallback: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MovieBookmark;
|
||||||
3
src/components/movies/MovieItem.css
Normal file
3
src/components/movies/MovieItem.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.film-poster {
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
27
src/components/movies/MovieItem.jsx
Normal file
27
src/components/movies/MovieItem.jsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { Col } from 'react-bootstrap';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import './MovieItem.css';
|
||||||
|
|
||||||
|
const MovieItem = ({
|
||||||
|
id, imageSrc, title, requiresSubscription,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Col xs={ 6 } sm={ 4 } lg={ 3 }>
|
||||||
|
<a href={ `/videoplayer?id=${id}` } className="text-decoration-none">
|
||||||
|
<img src={ imageSrc } className="img-fluid film-poster" alt="" />
|
||||||
|
<h5 className="text-black mt-3">{ title }</h5>
|
||||||
|
<h6 className="text-secondary">{ requiresSubscription ? 'По подписке' : 'Бесплатно' }</h6>
|
||||||
|
</a>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
MovieItem.propTypes = {
|
||||||
|
id: PropTypes.number,
|
||||||
|
imageSrc: PropTypes.string,
|
||||||
|
title: PropTypes.string,
|
||||||
|
requiresSubscription: PropTypes.bool,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MovieItem;
|
||||||
4
src/components/navigation/Navigation.css
Normal file
4
src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.my-nav-link {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
63
src/components/navigation/Navigation.jsx
Normal file
63
src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import {
|
||||||
|
Container, Nav, Navbar, Button,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Film } from 'react-bootstrap-icons';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import './Navigation.css';
|
||||||
|
|
||||||
|
const Navigation = ({ routes }) => {
|
||||||
|
const location = useLocation();
|
||||||
|
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||||
|
|
||||||
|
const pageMain = routes.find((page) => { return page.title === 'СигмаТеатр'; });
|
||||||
|
const pageAboutUs = routes.find((page) => { return page.title === 'О нас'; });
|
||||||
|
const pageLogin = routes.find((page) => { return page.title === 'Вход в аккаунт'; });
|
||||||
|
const pageProfile = routes.find((page) => { return page.title === 'Профиль'; });
|
||||||
|
const pagePricing = routes.find((page) => { return page.title === 'Подписка'; });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<Navbar fixed='top' expand='lg' bg='dark' data-bs-theme='dark' className='py-1'>
|
||||||
|
<Container fluid='md'>
|
||||||
|
<Navbar.Brand as={ Link } to={indexPageLink?.path ?? '/'} className='align-items-center'>
|
||||||
|
<Film className='d-inline-block align-middle pb-1' width="25" height="25"/>
|
||||||
|
<span className="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
||||||
|
</Navbar.Brand>
|
||||||
|
<Navbar.Toggle aria-controls='main-navbar' />
|
||||||
|
<Navbar.Collapse id='main-navbar' className='justify-content-end align-items-center'>
|
||||||
|
<Nav className='link' activeKey={ location.pathname }>
|
||||||
|
|
||||||
|
<Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageMain.path } eventKey={ pageMain.path } to={ pageMain.path ?? '/' }>
|
||||||
|
<span>Фильмы и сериалы</span>
|
||||||
|
</Nav.Link>
|
||||||
|
<Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageAboutUs.path } eventKey={ pageAboutUs.path } to={ pageAboutUs.path ?? '/' }>
|
||||||
|
Справка
|
||||||
|
</Nav.Link>
|
||||||
|
<Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageLogin.path } eventKey={ pageLogin.path } to={ pageLogin.path ?? '/' }>
|
||||||
|
Вход в аккаунт
|
||||||
|
</Nav.Link>
|
||||||
|
<Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageProfile.path } eventKey={ pageProfile.path } to={ pageProfile.path ?? '/' }>
|
||||||
|
Профиль
|
||||||
|
</Nav.Link>
|
||||||
|
<Nav.Link className='d-lg-none' as={ Link } key={ pagePricing.path } eventKey={ pagePricing.path } to={ pagePricing.path ?? '/' }>
|
||||||
|
Купить подписку
|
||||||
|
</Nav.Link>
|
||||||
|
<Nav.Link className='d-none d-lg-inline' as={ Link } eventKey={ pagePricing.path } to={ pagePricing.path ?? '/' }>
|
||||||
|
<Button variant='light'>Купить подписку</Button>
|
||||||
|
</Nav.Link>
|
||||||
|
|
||||||
|
</Nav>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
</Container>
|
||||||
|
</Navbar >
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
33
src/components/pricing/PricingPlan.jsx
Normal file
33
src/components/pricing/PricingPlan.jsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import { Col, Card } from 'react-bootstrap';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
const PricingPlan = ({
|
||||||
|
title, subtitle, price, description, isPrimary,
|
||||||
|
}) => {
|
||||||
|
const borderStyling = isPrimary ? 'border-primary border-3 pb-3' : 'border-1';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Col xs={ isPrimary ? 9 : 8 } lg={ 4 } xl={ isPrimary ? 4 : 3 }>
|
||||||
|
<Card className={ borderStyling }>
|
||||||
|
{ isPrimary && <Card.Header className="text-center text-primary">Самый популярный</Card.Header> }
|
||||||
|
<Card.Body className={ `text-center ${isPrimary ? 'py-5' : 'py-4'}` }>
|
||||||
|
<h4 className="card-title">{ title }</h4>
|
||||||
|
<p className="lead card-subtitle">{ subtitle }</p>
|
||||||
|
<p className={ `${isPrimary ? 'display-4' : 'display-5'} my-4 text-primary fw-bold` }>{ price } ₽</p>
|
||||||
|
<p className="card-text mx-5 text-muted d-none d-lg-block">{ description }</p>
|
||||||
|
<a href="#" className={ `btn btn-outline-primary btn-lg ${isPrimary ? 'mt-4' : 'mt-3'}` }>Купить</a>
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
PricingPlan.propTypes = {
|
||||||
|
title: PropTypes.string,
|
||||||
|
subtitle: PropTypes.string,
|
||||||
|
price: PropTypes.string,
|
||||||
|
description: PropTypes.string,
|
||||||
|
isPrimary: PropTypes.bool,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PricingPlan;
|
||||||
24
src/components/pricing/Priveledge.jsx
Normal file
24
src/components/pricing/Priveledge.jsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { Col } from 'react-bootstrap';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
const Priveledge = ({ icon, title, description }) => {
|
||||||
|
return (
|
||||||
|
<Col lg={ 6 }>
|
||||||
|
<div className="d-flex flex-row align-items-center">
|
||||||
|
<img src={ icon } width="50px" height="100%" alt="" />
|
||||||
|
<div className="ms-3">
|
||||||
|
<p className="lead">{ title }</p>
|
||||||
|
<p>{ description }</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Priveledge.propTypes = {
|
||||||
|
icon: PropTypes.string,
|
||||||
|
title: PropTypes.string,
|
||||||
|
description: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Priveledge;
|
||||||
0
src/index.css
Normal file
0
src/index.css
Normal file
69
src/main.jsx
Normal file
69
src/main.jsx
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
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 PageIndex from './pages/PageIndex.jsx';
|
||||||
|
import PagePricing from './pages/PagePricing.jsx';
|
||||||
|
import PageAboutUs from './pages/PageAboutUs.jsx';
|
||||||
|
import PageLogin from './pages/PageLogin.jsx';
|
||||||
|
import PageVideoplayer from './pages/PageVideoplayer.jsx';
|
||||||
|
import PageAdminPanel from './pages/PageAdminPanel.jsx';
|
||||||
|
import PageProfile from './pages/PageProfile.jsx';
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
index: true,
|
||||||
|
path: '/',
|
||||||
|
element: <PageIndex />,
|
||||||
|
title: 'СигмаТеатр',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/pricing',
|
||||||
|
element: <PagePricing />,
|
||||||
|
title: 'Подписка',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about_us',
|
||||||
|
element: <PageAboutUs />,
|
||||||
|
title: 'О нас',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
element: <PageLogin />,
|
||||||
|
title: 'Вход в аккаунт',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/videoplayer',
|
||||||
|
element: <PageVideoplayer />,
|
||||||
|
title: 'Просмотр',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/admin_panel',
|
||||||
|
element: <PageAdminPanel />,
|
||||||
|
title: 'CRUD администрирование',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/profile',
|
||||||
|
element: <PageProfile />,
|
||||||
|
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;
|
||||||
121
src/pages/PageAboutUs.jsx
Normal file
121
src/pages/PageAboutUs.jsx
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
import {
|
||||||
|
Container, Row, Col, Form, InputGroup, Button, Modal,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
|
||||||
|
import { EnvelopeFill, PersonFill, ChatRightDotsFill } from 'react-bootstrap-icons';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const PageAboutUs = () => {
|
||||||
|
const [show, setShow] = useState(false);
|
||||||
|
|
||||||
|
const handleClose = () => setShow(false);
|
||||||
|
const handleShow = () => setShow(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section id="contact-info">
|
||||||
|
<Container fluid="md" className="py-4">
|
||||||
|
<Row className="gx-5 gy-5">
|
||||||
|
<Col lg={ 5 }>
|
||||||
|
<h2 className="text-center mb-5">Контактные данные</h2>
|
||||||
|
<ul className="list-group list-group-flush">
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">Страна:</span> Россия
|
||||||
|
</li>
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">Адрес:</span> 432029, Ульяновск
|
||||||
|
</li>
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">Телефон:</span> +7 (987) 654 32-10
|
||||||
|
</li>
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">Факс:</span> +49 221 95491533
|
||||||
|
</li>
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">Электронная почта:</span> sigmacinema@gmail.com
|
||||||
|
</li>
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">ИНН:</span> 7743013902
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col lg={ 7 }>
|
||||||
|
<h2 className="text-center mb-5">Мы на карте</h2>
|
||||||
|
<iframe
|
||||||
|
src="https://www.google.com/maps/embed/v1/place?q=Ульяновск,+Россия,+432029&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
|
||||||
|
width="100%" height="500" allowFullScreen="" loading="lazy"
|
||||||
|
referrerPolicy="no-referrer-when-downgrade"></iframe>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="feedback" className="bg-light">
|
||||||
|
<Container fluid="md" className="py-4 mt-5">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2>Остались вопросы?</h2>
|
||||||
|
<p className="lead text-muted">Задайте ваш вопрос нашей службе поддержки - мы постараемся ответить на него в ближайшее время</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Row className="justify-content-center mt-5">
|
||||||
|
<Col lg={ 6 }>
|
||||||
|
<Form>
|
||||||
|
<Form.Group>
|
||||||
|
<Form.Label>Ваш адрес электронной почты</Form.Label>
|
||||||
|
<InputGroup className="mb-3">
|
||||||
|
<InputGroup.Text><EnvelopeFill /></InputGroup.Text>
|
||||||
|
<Form.Control type="email" placeholder="myemail@mail.com" />
|
||||||
|
</InputGroup>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group>
|
||||||
|
<Form.Label>Ваше имя</Form.Label>
|
||||||
|
<InputGroup className="mb-3">
|
||||||
|
<InputGroup.Text><PersonFill /></InputGroup.Text>
|
||||||
|
<Form.Control type="text" placeholder="Иванов Иван" />
|
||||||
|
</InputGroup>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group>
|
||||||
|
<Form.Label>О чем ваш вопрос?</Form.Label>
|
||||||
|
<InputGroup className="mb-4">
|
||||||
|
<InputGroup.Text><ChatRightDotsFill /></InputGroup.Text>
|
||||||
|
<Form.Select>
|
||||||
|
<option value="pricing">Оплата подписки</option>
|
||||||
|
<option value="content">Фильмы или сериалы</option>
|
||||||
|
<option value="other">Другое</option>
|
||||||
|
</Form.Select>
|
||||||
|
</InputGroup>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Control as="textarea" rows={ 5 } placeholder="Ваш вопрос..." />
|
||||||
|
|
||||||
|
<div className="text-center mt-4">
|
||||||
|
<Button variant="primary" onClick={ handleShow }>Отправить</Button>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Modal show={ show } onHide={ handleClose }>
|
||||||
|
<Modal.Header closeButton>
|
||||||
|
<Modal.Title>Ваш вопрос отправлен</Modal.Title>
|
||||||
|
</Modal.Header>
|
||||||
|
|
||||||
|
<Modal.Body>На указанный вами адрес электронной почты
|
||||||
|
скоро придет письмо с ответом.</Modal.Body>
|
||||||
|
|
||||||
|
<Modal.Footer>
|
||||||
|
<Button variant="primary" onClick={handleClose}>
|
||||||
|
Закрыть
|
||||||
|
</Button>
|
||||||
|
</Modal.Footer>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageAboutUs;
|
||||||
173
src/pages/PageAdminPanel.jsx
Normal file
173
src/pages/PageAdminPanel.jsx
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
import {
|
||||||
|
Container, Button, Table, Form, Modal,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
|
||||||
|
import {
|
||||||
|
PencilFill, TrashFill,
|
||||||
|
} from 'react-bootstrap-icons';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const PageAdminPanel = () => {
|
||||||
|
const [shouldShowModal, setShowModal] = useState(false);
|
||||||
|
|
||||||
|
const addMovieHandler = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
setShowModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section id="administration">
|
||||||
|
<Container fluid="md" className="py-4 mb-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2>Страница администратора</h2>
|
||||||
|
<p className="lead text-muted">Выполнение CRUD-операций над фильмами или сериалами</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button id="addMovie" className="mb-4" onClick={ addMovieHandler }>Добавить запись</Button>
|
||||||
|
|
||||||
|
<Table id="items-table" striped>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">№</th>
|
||||||
|
<th scope="col" className="w-25">Название</th>
|
||||||
|
<th scope="col" className="w-25">Категория</th>
|
||||||
|
<th scope="col" className="w-25 d-none d-sm-table-cell">Требуется подписка</th>
|
||||||
|
<th scope="col" className="w-25 d-none d-sm-table-cell">Год производства</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr></thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<tr id="line-1">
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>Американский психопат</td>
|
||||||
|
<td>Фильм</td>
|
||||||
|
<td className="d-none d-sm-table-cell">+</td>
|
||||||
|
<td className="d-none d-sm-table-cell">1999</td>
|
||||||
|
<td><a href="#"><PencilFill /></a></td>
|
||||||
|
<td><a href="#"><TrashFill /></a></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr id="line-2">
|
||||||
|
<th scope="row">2</th>
|
||||||
|
<td>Драйв</td>
|
||||||
|
<td>Фильм</td>
|
||||||
|
<td className="d-none d-sm-table-cell">-</td>
|
||||||
|
<td className="d-none d-sm-table-cell">1999</td>
|
||||||
|
<td><a href="#"><PencilFill /></a></td>
|
||||||
|
<td><a href="#"><TrashFill /></a></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr id="line-3">
|
||||||
|
<th scope="row">3</th>
|
||||||
|
<td>Острые козырьки</td>
|
||||||
|
<td>Сериал</td>
|
||||||
|
<td className="d-none d-sm-table-cell">-</td>
|
||||||
|
<td className="d-none d-sm-table-cell">1999</td>
|
||||||
|
<td><a href="#"><PencilFill /></a></td>
|
||||||
|
<td><a href="#"><TrashFill /></a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Modal id="items-update" show={ shouldShowModal } onHide={ () => setShowModal(false) }>
|
||||||
|
<Form id="items-form">
|
||||||
|
<Modal.Header closeButton>
|
||||||
|
<Modal.Title className="fs-5" id="items-update-title"><h1></h1></Modal.Title>
|
||||||
|
</Modal.Header>
|
||||||
|
|
||||||
|
<Modal.Body>
|
||||||
|
<div className="text-center">
|
||||||
|
<img id="image-preview" src="https://via.placeholder.com/200" className="image-preview"
|
||||||
|
alt="placeholder" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Form.Control id="items-line-id" type="number" hidden />
|
||||||
|
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label>Название</Form.Label>
|
||||||
|
<Form.Control type="text" id="title" required />
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-3">
|
||||||
|
<Form.Label>Тип</Form.Label>
|
||||||
|
<Form.Select id="type" required>
|
||||||
|
<option value="Фильм" selected>Фильм</option>
|
||||||
|
<option value="Сериал">Сериал</option>
|
||||||
|
</Form.Select>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-3">
|
||||||
|
<Form.Check type="checkbox" id="requiresSubscription" label="Требуется подписка" />
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label>Постер</Form.Label>
|
||||||
|
<Form.Control type="file" id="image" accept="image/*" />
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label>Описание</Form.Label>
|
||||||
|
<Form.Control id="description" as="textarea" rows={ 4 } />
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label>Год производства</Form.Label>
|
||||||
|
<Form.Control type="number" id="releaseDate" min="1900" step="1" required />
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label>Страна</Form.Label>
|
||||||
|
<Form.Control type="text" id="country" required />
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label>Слоган</Form.Label>
|
||||||
|
<Form.Control type="text" id="tagline" required />
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label>Режиссер</Form.Label>
|
||||||
|
<Form.Control type="text" id="director" required />
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-3">
|
||||||
|
<Form.Label>Возрастное ограничение</Form.Label>
|
||||||
|
<Form.Select id="ageRating" required>
|
||||||
|
<option value="0+" selected>0+</option>
|
||||||
|
<option value="6+">6+</option>
|
||||||
|
<option value="12+">12+</option>
|
||||||
|
<option value="16+">16+</option>
|
||||||
|
<option value="18+">18+</option>
|
||||||
|
</Form.Select>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label>URL видео</Form.Label>
|
||||||
|
<Form.Control type="text" id="video" required />
|
||||||
|
</Form.Group>
|
||||||
|
</Modal.Body>
|
||||||
|
|
||||||
|
<Modal.Footer>
|
||||||
|
<Button variant="secondary" onClick={ () => setShowModal(false) }>
|
||||||
|
Закрыть
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button variant="primary" onClick={ () => setShowModal(false) }>
|
||||||
|
Сохранить
|
||||||
|
</Button>
|
||||||
|
</Modal.Footer>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageAdminPanel;
|
||||||
63
src/pages/PageIndex.jsx
Normal file
63
src/pages/PageIndex.jsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import { Container, Row } from 'react-bootstrap';
|
||||||
|
|
||||||
|
import logoAmericanPsycho from '../assets/main-page/posters/AmericanPsycho.jpg';
|
||||||
|
import logoDrive from '../assets/main-page/posters/Drive.jpg';
|
||||||
|
import logoFightClub from '../assets/main-page/posters/FightClub.png';
|
||||||
|
import logoJoker from '../assets/main-page/posters/Joker.jpg';
|
||||||
|
import logoNoCountryForOldMen from '../assets/main-page/posters/NoCountryForOldMen.jpg';
|
||||||
|
import logoPusher from '../assets/main-page/posters/Pusher.png';
|
||||||
|
import logoScarface from '../assets/main-page/posters/Scarface.png';
|
||||||
|
import logoBladeRunner2049 from '../assets/main-page/posters/BladeRunner2049.jpg';
|
||||||
|
import logoBetterCallSaul from '../assets/main-page/posters/BetterCallSaul.png';
|
||||||
|
import logoPeakyBlinders from '../assets/main-page/posters/PeakyBlinders.png';
|
||||||
|
import logoBreakingBad from '../assets/main-page/posters/BreakingBad.png';
|
||||||
|
import logoSopranos from '../assets/main-page/posters/Sopranos.png';
|
||||||
|
|
||||||
|
import MovieItem from '../components/movies/MovieItem.jsx';
|
||||||
|
|
||||||
|
const PageIndex = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section id="movies">
|
||||||
|
<Container fluid="md" className="py-4 mb-4">
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<h2>Самые базированные фильмы</h2>
|
||||||
|
<p className="lead text-muted">Здесь собраны ваши любимые кинофильмы</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Row className="gx-5 gy-5 my-3">
|
||||||
|
<MovieItem id={ 1 } imageSrc={ logoAmericanPsycho } title="Американский психопат" requiresSubscription={ true } />
|
||||||
|
<MovieItem id={ 2 } imageSrc={ logoDrive } title="Драйв" requiresSubscription={ false } />
|
||||||
|
<MovieItem id={ 3 } imageSrc={ logoFightClub } title="Бойцовский клуб" requiresSubscription={ true } />
|
||||||
|
<MovieItem id={ 4 } imageSrc={ logoJoker } title="Джокер" requiresSubscription={ true } />
|
||||||
|
<MovieItem id={ 5 } imageSrc={ logoNoCountryForOldMen } title="Старикам здесь не место" requiresSubscription={ false } />
|
||||||
|
<MovieItem id={ 6 } imageSrc={ logoPusher } title="Дилер" requiresSubscription={ true } />
|
||||||
|
<MovieItem id={ 7 } imageSrc={ logoScarface } title="Лицо со шрамом" requiresSubscription={ true } />
|
||||||
|
<MovieItem id={ 8 } imageSrc={ logoBladeRunner2049 } title="Бегущий по лезвию - 2049" requiresSubscription={ false } />
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="series" className="bg-light">
|
||||||
|
<Container fluid="md" className="py-4">
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<h2>Популярные сериалы</h2>
|
||||||
|
<p className="lead text-muted">Сериалы, главные герои которых - буквально вы</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Row className="gx-5 gy-5 mt-3 mb-5">
|
||||||
|
<MovieItem id={ 1 } imageSrc={ logoBetterCallSaul } title="Лучше звоните Солу" requiresSubscription={ true } />
|
||||||
|
<MovieItem id={ 1 } imageSrc={ logoPeakyBlinders } title="Острые козырьки" requiresSubscription={ false } />
|
||||||
|
<MovieItem id={ 1 } imageSrc={ logoBreakingBad } title="Во все тяжкие" requiresSubscription={ true } />
|
||||||
|
<MovieItem id={ 1 } imageSrc={ logoSopranos } title="Клан Сопрано" requiresSubscription={ false } />
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageIndex;
|
||||||
106
src/pages/PageLogin.jsx
Normal file
106
src/pages/PageLogin.jsx
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
import {
|
||||||
|
Container, Row, Col, Form, InputGroup, Button, Card, Modal,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
|
||||||
|
import {
|
||||||
|
PersonCircle, EnvelopeFill, LockFill, EyeFill,
|
||||||
|
} from 'react-bootstrap-icons';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const PageLogin = () => {
|
||||||
|
const [shouldShowForgotModal, setShowForgotModal] = useState(false);
|
||||||
|
|
||||||
|
const forgotPasswordHandler = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
setShowForgotModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section id="login">
|
||||||
|
<Container fluid="sm" className="py-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2>Вход в аккаунт</h2>
|
||||||
|
<p className="lead text-muted">Войдите в ваш аккаунт чтобы воспользоваться подпиской и иметь возможность отмечать желаемые фильмы</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Row className="justify-content-center mt-5">
|
||||||
|
<Col lg={ 4 }>
|
||||||
|
<Card>
|
||||||
|
<Card.Body>
|
||||||
|
<div className="d-flex flex-row justify-content-center align-items-center">
|
||||||
|
<PersonCircle className="text-primary" fontSize={ '30px' } />
|
||||||
|
<p className="lead my-auto ms-3 text-primary">Вход</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Form className="my-3">
|
||||||
|
<Form.Group>
|
||||||
|
<Form.Label>Электронная почта</Form.Label>
|
||||||
|
<InputGroup className="mb-3">
|
||||||
|
<InputGroup.Text><EnvelopeFill /></InputGroup.Text>
|
||||||
|
<Form.Control type="email" id="email" placeholder="myemail@mail.com" />
|
||||||
|
</InputGroup>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group>
|
||||||
|
<Form.Label>Пароль</Form.Label>
|
||||||
|
<InputGroup className="mb-3">
|
||||||
|
<InputGroup.Text><LockFill /></InputGroup.Text>
|
||||||
|
<Form.Control type="password" id="password" />
|
||||||
|
<InputGroup.Text><EyeFill /></InputGroup.Text>
|
||||||
|
</InputGroup>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mt-4 d-flex justify-content-between">
|
||||||
|
<div className="form-check me-4">
|
||||||
|
<Form.Check id="rememberMe"/>
|
||||||
|
<Form.Label><small className="text-secondary">Запомнить на этом компьютере</small></Form.Label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="forgot">
|
||||||
|
<a onClick={ forgotPasswordHandler } href='/' id="forgotPassword" className="text-decoration-none">
|
||||||
|
<small>Забыли пароль?</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<div className="text-center mt-5">
|
||||||
|
<Button variant="primary">Войти</Button>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Modal show={ shouldShowForgotModal } onHide={ () => setShowForgotModal(false) }>
|
||||||
|
<Modal.Header closeButton>
|
||||||
|
<Modal.Title>Восстановление пароля</Modal.Title>
|
||||||
|
</Modal.Header>
|
||||||
|
|
||||||
|
<Modal.Body className="mb-3">
|
||||||
|
<p>В поле ниже напишите адрес электроннной почты, с которой была совершена
|
||||||
|
регистрация. На этот адрес придёт письмо с дальнейшеми указаниями.</p>
|
||||||
|
|
||||||
|
<Form.Group>
|
||||||
|
<Form.Label>Адрес электронной почты:</Form.Label>
|
||||||
|
<Form.Control type="email" placeholder="myemail@mail.com" />
|
||||||
|
</Form.Group>
|
||||||
|
</Modal.Body>
|
||||||
|
|
||||||
|
<Modal.Footer>
|
||||||
|
<Button variant="primary" onClick={ () => setShowForgotModal(false) }>
|
||||||
|
Отправить
|
||||||
|
</Button>
|
||||||
|
</Modal.Footer>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageLogin;
|
||||||
51
src/pages/PagePricing.jsx
Normal file
51
src/pages/PagePricing.jsx
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import {
|
||||||
|
Container, Row,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
|
||||||
|
import diamondIcon from '../assets/pricing/diamond.png';
|
||||||
|
import noAdsIcon from '../assets/pricing/no-ads.png';
|
||||||
|
|
||||||
|
import Priveledge from '../components/pricing/Priveledge.jsx';
|
||||||
|
import PricingPlan from '../components/pricing/PricingPlan.jsx';
|
||||||
|
|
||||||
|
const PagePricing = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section id="subscription-features">
|
||||||
|
<Container fluid="md" className="py-5">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2>Преимущества подписки</h2>
|
||||||
|
<p className="lead text-muted">Всё лучшее - в одной подписке</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Row className="justify-content-between align-items-center my-5 gy-5">
|
||||||
|
<Priveledge icon={ diamondIcon } title="Большая коллекция" description="Известные топовые фильмы и новинки" />
|
||||||
|
<Priveledge icon={ noAdsIcon } title="Без рекламы" description="Видео не прервётся на самом интересном месте" />
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="pricing" className="bg-light">
|
||||||
|
<Container fluid="md" className="py-5">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2>Подписка на кинотеатр</h2>
|
||||||
|
<p className="lead text-muted">Выберите, какой план вам подходит больше всего</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Row className="my-5 justify-content-center align-items-center gy-3">
|
||||||
|
<PricingPlan title="Большой Шлёппа" subtitle="Подписка на неделю" price="49,99"
|
||||||
|
description="Попробуйте и решите, нравится ли вам наш сервис" isPrimary={ false } />
|
||||||
|
|
||||||
|
<PricingPlan title="Базированный гигачад" subtitle="Подписка на месяц" price="149,99"
|
||||||
|
description="Для тех, кто очень любит смотреть фильмы и сериалы по вечерам" isPrimary={ true } />
|
||||||
|
|
||||||
|
<PricingPlan title="Райан Гослинг" subtitle="Подписка на год" price="799,99"
|
||||||
|
description="Если вдруг захотите остаться с нами подольше" isPrimary={ false } />
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PagePricing;
|
||||||
52
src/pages/PageProfile.jsx
Normal file
52
src/pages/PageProfile.jsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import { Container, Row } from 'react-bootstrap';
|
||||||
|
import MovieBookmark from '../components/movies/MovieBookmark.jsx';
|
||||||
|
|
||||||
|
import logoAmericanPsycho from '../assets/main-page/posters/AmericanPsycho.jpg';
|
||||||
|
import logoDrive from '../assets/main-page/posters/Drive.jpg';
|
||||||
|
import logoPeakyBlinders from '../assets/main-page/posters/PeakyBlinders.png';
|
||||||
|
|
||||||
|
const PageProfile = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section id="subscriptionStatus">
|
||||||
|
<Container fluid="md" className="py-4 mb-4">
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<h2>Статус подписки</h2>
|
||||||
|
<p className="lead text-muted">Здесь отображается статус текущей подписки</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="display-1 my-5">Статус: <span className="text-success">активна</span></p>
|
||||||
|
<h3 className="fw-normal">Действует до: <span className="fw-bold">20.12.2023</span></h3>
|
||||||
|
<button className="btn btn-outline-danger mt-4">Отменить подписку</button>
|
||||||
|
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="watchLater" className="bg-light">
|
||||||
|
<Container fluid="md" className="py-4 mb-4">
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<h2>Избранное</h2>
|
||||||
|
<p className="lead text-muted">Фильмы и сериары, отмеченные как `посмотреть позже`</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Row className="gx-5 gy-5 my-3">
|
||||||
|
<MovieBookmark id={ 1 } imageSrc={ logoAmericanPsycho } title="Американский психопат" requiresSubscription={ true } />
|
||||||
|
<MovieBookmark id={ 2 } imageSrc={ logoPeakyBlinders } title="Острые козырьки" requiresSubscription={ false } />
|
||||||
|
<MovieBookmark id={ 3 } imageSrc={ logoDrive } title="Драйв" requiresSubscription={ false } />
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="logout">
|
||||||
|
<div className="text-center py-4">
|
||||||
|
<button className="btn btn-lg btn-danger">Выйти из аккаунта</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageProfile;
|
||||||
52
src/pages/PageVideoplayer.jsx
Normal file
52
src/pages/PageVideoplayer.jsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import {
|
||||||
|
Container, Row, Col, Button,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
|
||||||
|
const PageVideoplayer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section id="player">
|
||||||
|
<Container fluid="md" className="py-4 mb-4">
|
||||||
|
<div className="ratio ratio-16x9 my-4">
|
||||||
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/dfeUzm6KF4g?si=U2D-2WNsJzkcxlBX" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
|
||||||
|
</div>
|
||||||
|
<p className="display-4" id="movieTitle">Бойцовский клуб</p>
|
||||||
|
|
||||||
|
<Row className="jgx-5 gy-5 mb-4">
|
||||||
|
<Col lg={ 7 }>
|
||||||
|
<h3>Описание</h3>
|
||||||
|
<p className="my-4" id="movieDescription">
|
||||||
|
Описание.
|
||||||
|
</p>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col lg={ 5 } id="movieInfoContainer">
|
||||||
|
<h3>О фильме</h3>
|
||||||
|
<ul className="list-group list-group-flush my-3">
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">Год производства:</span> 1999
|
||||||
|
</li>
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">Страна:</span> США, Германия
|
||||||
|
</li>
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">Слоган:</span> <span className="text-secondary">«Интриги. Хаос. Мыло»</span>
|
||||||
|
</li>
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">Режиссер:</span> Дэвид Финчер
|
||||||
|
</li>
|
||||||
|
<li className="list-group-item">
|
||||||
|
<span className="fw-bold">Возраст:</span> 18+
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Button>Посмотреть позже</Button>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageVideoplayer;
|
||||||
124
videoplayer.html
124
videoplayer.html
@ -1,124 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Просмотр</title>
|
|
||||||
|
|
||||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
|
||||||
<link href="style.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="d-flex flex-column min-vh-100">
|
|
||||||
<header>
|
|
||||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
|
||||||
<div class="container-md">
|
|
||||||
<a href="index.html" class="navbar-brand">
|
|
||||||
<i class="bi bi-film"></i>
|
|
||||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
|
||||||
</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="about_us.html" class="nav-link">Справка</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item me-3">
|
|
||||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-lg-none">
|
|
||||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item d-none d-lg-inline">
|
|
||||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section id="player">
|
|
||||||
<div class="container-md py-4 mb-4">
|
|
||||||
<div class="ratio ratio-16x9 my-4">
|
|
||||||
<iframe width="560" height="315" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
||||||
</div>
|
|
||||||
<p class="display-4" id="movieTitle">Бойцовский клуб</p>
|
|
||||||
|
|
||||||
<div class="row gx-5 gy-5 mb-4">
|
|
||||||
<div class="col-lg-7">
|
|
||||||
<h3>Описание</h3>
|
|
||||||
<p class="my-4" id="movieDescription">
|
|
||||||
Сотрудник страховой компании страдает хронической бессонницей и отчаянно пытается вырваться из мучительно скучной жизни. Однажды в очередной командировке он встречает некоего Тайлера Дёрдена — харизматического торговца мылом с извращенной философией. Тайлер уверен, что самосовершенствование — удел слабых, а единственное, ради чего стоит жить, — саморазрушение.<br><br> Проходит немного времени, и вот уже новые друзья лупят друг друга почем зря на стоянке перед баром, и очищающий мордобой доставляет им высшее блаженство. Приобщая других мужчин к простым радостям физической жестокости, они основывают тайный Бойцовский клуб, который начинает пользоваться невероятной популярностью.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-5" id="movieInfoContainer">
|
|
||||||
<h3>О фильме</h3>
|
|
||||||
<ul class="list-group list-group-flush my-3">
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Год производства:</span> 1999
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Страна:</span> США, Германия
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Слоган:</span> <span class="text-secondary">«Интриги. Хаос. Мыло»</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Режиссер:</span> Дэвид Финчер
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item">
|
|
||||||
<span class="fw-bold">Возраст:</span> 18+
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="btn btn-primary">Посмотреть позже</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="py-2 bg-dark text-light mt-auto">
|
|
||||||
<div class="container-md py-2">
|
|
||||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
|
||||||
<div>
|
|
||||||
<div class="download-buttons-container justify-content-start">
|
|
||||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.huawei.ru/appgallery/"><img src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
|
||||||
<a href="https://www.apple.com/app-store/"><img src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
|
||||||
</div>
|
|
||||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
|
||||||
</div>
|
|
||||||
<div class="download-buttons-container">
|
|
||||||
<a href="index.html" class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
|
||||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика конфиденциальности</a>
|
|
||||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О нас</a>
|
|
||||||
<a href="admin_panel.html" class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script type="module">
|
|
||||||
import loadMovieData from './js/videoplayer.js';
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
loadMovieData();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,18 +1,13 @@
|
|||||||
import { resolve } from "path";
|
/* eslint-disable import/no-extraneous-dependencies */
|
||||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
import react from '@vitejs/plugin-react';
|
||||||
import { defineConfig } from "vite";
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
build: {
|
build: {
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
|
chunkSizeWarningLimit: 1024,
|
||||||
emptyOutDir: true,
|
emptyOutDir: true,
|
||||||
rollupOptions: {
|
|
||||||
input: {
|
|
||||||
main: resolve(__dirname, "index.html"),
|
|
||||||
page2: resolve(__dirname, "page2.html"),
|
|
||||||
page3: resolve(__dirname, "page3.html"),
|
|
||||||
page4: resolve(__dirname, "page4.html"),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
Бегущий по лезвию - 2049
|
|
||||||
В недалеком будущем мир населен людьми и репликантами, созданными выполнять самую тяжелую работу. Работа офицера полиции Кей — держать репликантов под контролем в условиях нарастающего напряжения. Он случайно становится обладателем секретной информации, которая ставит под угрозу существование всего человечества. Желая найти ключ к разгадке, Кей решает разыскать Рика Декарда — бывшего офицера специального подразделения полиции Лос-Анджелеса, который бесследно исчез много лет назад
|
|
||||||
https://www.youtube.com/embed/tRcZ6yc1IMI?si=jhNRAis5XMW0yeH8
|
|
||||||
Loading…
Reference in New Issue
Block a user