Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
919ed6bc11 |
42
.gitignore
vendored
42
.gitignore
vendored
@@ -1,42 +0,0 @@
|
|||||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# Compiled output
|
|
||||||
/dist
|
|
||||||
/tmp
|
|
||||||
/out-tsc
|
|
||||||
/bazel-out
|
|
||||||
|
|
||||||
# Node
|
|
||||||
/node_modules
|
|
||||||
npm-debug.log
|
|
||||||
yarn-error.log
|
|
||||||
|
|
||||||
# IDEs and editors
|
|
||||||
.idea/
|
|
||||||
.project
|
|
||||||
.classpath
|
|
||||||
.c9/
|
|
||||||
*.launch
|
|
||||||
.settings/
|
|
||||||
*.sublime-workspace
|
|
||||||
|
|
||||||
# Visual Studio Code
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/settings.json
|
|
||||||
!.vscode/tasks.json
|
|
||||||
!.vscode/launch.json
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.history/*
|
|
||||||
|
|
||||||
# Miscellaneous
|
|
||||||
/.angular/cache
|
|
||||||
.sass-cache/
|
|
||||||
/connect.lock
|
|
||||||
/coverage
|
|
||||||
/libpeerconnection.log
|
|
||||||
testem.log
|
|
||||||
/typings
|
|
||||||
|
|
||||||
# System files
|
|
||||||
.DS_Store
|
|
||||||
Thumbs.db
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"tabWidth": 4,
|
|
||||||
"singleQuote": false,
|
|
||||||
"printWidth": 120,
|
|
||||||
"trailingComma": "es5",
|
|
||||||
"useTabs": false
|
|
||||||
}
|
|
||||||
19
README.md
19
README.md
@@ -1,17 +1,2 @@
|
|||||||
Установка зависимостей
|
# 2Course-Internet-Programming
|
||||||
|
Лабораторные работы по предмету: Интернет-программирование.
|
||||||
```
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
Запуск в режиме разработки
|
|
||||||
|
|
||||||
```
|
|
||||||
npm start
|
|
||||||
```
|
|
||||||
|
|
||||||
Запуск для использования в продуктовой среде
|
|
||||||
|
|
||||||
```
|
|
||||||
npm run prod
|
|
||||||
```
|
|
||||||
|
|||||||
3
css/about.css
Normal file
3
css/about.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
.indent {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
31
css/catalog.css
Normal file
31
css/catalog.css
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
.films_list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.films {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
margin: 0 40px;
|
||||||
|
}
|
||||||
6
css/film.css
Normal file
6
css/film.css
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
img {
|
||||||
|
margin-left: 50px;
|
||||||
|
width: 200px; /* Ширина изображения */
|
||||||
|
height: auto; /* Сохраняем пропорции */
|
||||||
|
border-radius: 10px
|
||||||
|
}
|
||||||
24
css/help.css
Normal file
24
css/help.css
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
form {
|
||||||
|
margin: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
min-height: 200px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: antiquewhite;
|
||||||
|
border-width: 1px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
56
css/style.css
Normal file
56
css/style.css
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
padding: 0px, 30px;
|
||||||
|
margin: 0px 0px;
|
||||||
|
background-color: #fdfff5;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 48px;
|
||||||
|
margin: 0px 0px;
|
||||||
|
padding: 30px 15px 0px 15px;
|
||||||
|
background-color: antiquewhite;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 25px;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 50px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation {
|
||||||
|
background-color: antiquewhite;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation li {
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: solid;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color:rgb(104, 104, 104);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
19
db.json
19
db.json
@@ -1,19 +0,0 @@
|
|||||||
{
|
|
||||||
"movies": [
|
|
||||||
{
|
|
||||||
"id": "8fd8",
|
|
||||||
"title": "ittifaqq",
|
|
||||||
"poster": "https://avatars.mds.yandex.net/i?id=17b83f995e81ac7426335d0659a050263d567f34-13135934-images-thumbs&n=13"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "5267",
|
|
||||||
"title": "priora",
|
|
||||||
"poster": "https://ir-3.ozone.ru/s3/multimedia-8/w1200/6738078680.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "2756",
|
|
||||||
"title": "Bibiziyana",
|
|
||||||
"poster": "https://avatars.mds.yandex.net/i?id=eeaf22011f8c07976795a01b40f431b0f42c8f43-5100713-images-thumbs&n=13"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
15
description
Normal file
15
description
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
Лабораторная работа №1.
|
||||||
|
Проектирование и верстка сайта
|
||||||
|
1. Для сайта в выбранной области (см. вариант задания) придумать не
|
||||||
|
менее 5 страниц с разным назначением. Представить перечень страниц
|
||||||
|
с небольшим описанием их назначения.
|
||||||
|
2. Продумать основной стиль сайта и в свободной форме описать его:
|
||||||
|
основные цвета, логотипы, стилевые особенности и т. д.
|
||||||
|
3. Подготовить и сверстать содержимое страниц. В данной работе следует
|
||||||
|
сделать упор только на содержимом страниц и стилевом оформление
|
||||||
|
этого содержимого. Структурные элементы сайта будут формироваться
|
||||||
|
в следующей работе. Не нужно делать меню, подвал, создавать сетку с
|
||||||
|
блоками и т. д. В данной работе можно использовать линейный порядок
|
||||||
|
элементов.
|
||||||
|
|
||||||
|
Вариант: Онлайн-кинотеатр.
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
import js from "@eslint/js";
|
|
||||||
import eslintConfigPrettier from "eslint-config-prettier/flat";
|
|
||||||
import pluginImport from "eslint-plugin-import";
|
|
||||||
import reactPlugin from "eslint-plugin-react";
|
|
||||||
import reactHooks from "eslint-plugin-react-hooks";
|
|
||||||
import reactRefresh from "eslint-plugin-react-refresh";
|
|
||||||
import globals from "globals";
|
|
||||||
import viteConfigObj from "./vite.config.js";
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{ ignores: ["dist", "vite.config.js"] },
|
|
||||||
{
|
|
||||||
files: ["**/*.{js,jsx}"],
|
|
||||||
languageOptions: {
|
|
||||||
globals: globals.browser,
|
|
||||||
},
|
|
||||||
settings: {
|
|
||||||
react: {
|
|
||||||
version: "detect",
|
|
||||||
},
|
|
||||||
"import/resolver": {
|
|
||||||
node: {
|
|
||||||
extensions: [".js", ".jsx", ".ts", ".tsx"],
|
|
||||||
},
|
|
||||||
vite: {
|
|
||||||
viteConfig: viteConfigObj,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
react: reactPlugin,
|
|
||||||
"react-hooks": reactHooks,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
js.configs.recommended,
|
|
||||||
pluginImport.flatConfigs.recommended,
|
|
||||||
reactRefresh.configs.recommended,
|
|
||||||
reactPlugin.configs.flat.recommended,
|
|
||||||
reactPlugin.configs.flat["jsx-runtime"],
|
|
||||||
eslintConfigPrettier,
|
|
||||||
{
|
|
||||||
rules: {
|
|
||||||
...reactHooks.configs.recommended.rules,
|
|
||||||
"no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
|
|
||||||
"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
|
|
||||||
"react/prop-types": ["off"],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
20
html/about.html
Normal file
20
html/about.html
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>О нас</title>
|
||||||
|
<link rel="stylesheet" href="../css/style.css" />
|
||||||
|
<link rel="stylesheet" href="../css/about.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Онлайн кинотеатр</h1>
|
||||||
|
<ul class="navigation">
|
||||||
|
<li><a href="index.html">Главная</a></li>
|
||||||
|
<li><a href="film.html">Фильмы и сериалы</a></li>
|
||||||
|
<li><a href="help.html">Помощь</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="indent">Мы рады приветствовать вас на данном сайте</p>
|
||||||
|
<p>Если есть предложения для улучшения работы сайта, пишите на почту <strong><en>ilyasvaliylov@gmail.com</en></strong></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
63
html/catalog.html
Normal file
63
html/catalog.html
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Каталог фильмов</title>
|
||||||
|
<link rel="stylesheet" href="../css/style.css" />
|
||||||
|
<link rel="stylesheet" href="../css/catalog.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Онлайн кинотеатр</h1>
|
||||||
|
<ul class="navigation">
|
||||||
|
<li><a href="index.html">Главная</a></li>
|
||||||
|
<li><a href="about.html">О нас</a></li>
|
||||||
|
<li><a href="help.html">Помощь</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2>Каталог фильмов и сериалов</h2>
|
||||||
|
<ul class="films_list">
|
||||||
|
<li>
|
||||||
|
<figure>
|
||||||
|
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||||
|
<img src="../images/film.jpg" >
|
||||||
|
</figure>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<figure>
|
||||||
|
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||||
|
<img src="../images/film.jpg" >
|
||||||
|
</figure>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<figure>
|
||||||
|
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||||
|
<img src="../images/film.jpg" >
|
||||||
|
</figure>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<figure>
|
||||||
|
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||||
|
<img src="../images/film.jpg" >
|
||||||
|
</figure>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<figure>
|
||||||
|
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||||
|
<img src="../images/film.jpg" >
|
||||||
|
</figure>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<figure>
|
||||||
|
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||||
|
<img src="../images/film.jpg" >
|
||||||
|
</figure>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<figure>
|
||||||
|
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||||
|
<img src="../images/film.jpg" >
|
||||||
|
</figure>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
html/film.html
Normal file
32
html/film.html
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Book</title>
|
||||||
|
<link rel="stylesheet" href="../css/style.css" />
|
||||||
|
<link rel="stylesheet" href="../css/film.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Онлайн кинотеатр</h1>
|
||||||
|
<ul class="navigation">
|
||||||
|
<li><a href="index.html">Главная</a></li>
|
||||||
|
<li><a href="catalog.html">Фильмы и сериалы</a></li>
|
||||||
|
<li><a href="about.html">О нас</a></li>
|
||||||
|
<li><a href="help.html">Помощь</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2>Ловцы забытых голосов (2011)</h2>
|
||||||
|
<p>Юная Асуна живет с вечно пропадающей на работе матерью и после школы любит забираться на скалу,
|
||||||
|
чтобы послушать радио, доставшееся от умершего отца. Однажды в этом своем секретном месте она знакомится
|
||||||
|
с загадочным юношей Сюном, который говорит, что пришел из далекой страны Агартхи. Эта встреча становится
|
||||||
|
началом полного приключений путешествия в волшебный мир, где Асуне предстоит столкнуться с потерями и обрести надежду.</p>
|
||||||
|
<img src="../images/film.jpg" width="200" class="film-container">
|
||||||
|
<ul class="film-container">
|
||||||
|
<li>Год производства 2011</li><hr>
|
||||||
|
<li>Жанр аниме, мультфильм, драма, приключения</li><hr>
|
||||||
|
<li>Режиссер Макото Синкай</li><hr>
|
||||||
|
<li>Сборы в мире $600 486</li>
|
||||||
|
</ul>
|
||||||
|
<p><a href="https://www.kinopoisk.ru/film/581102/">Смотреть фильм</a></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
html/help.html
Normal file
24
html/help.html
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Помощь</title>
|
||||||
|
<link rel="stylesheet" href="../css/style.css" />
|
||||||
|
<link rel="stylesheet" href="../css/help.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Онлайн кинотеатр</h1>
|
||||||
|
<ul class="navigation">
|
||||||
|
<li><a href="index.html">Главная</a></li>
|
||||||
|
<li><a href="catalog.html">Фильмы и сериалы</a></li>
|
||||||
|
<li><a href="about.html">О нас</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2>Помощь и поддержка</h2>
|
||||||
|
<p>Задавайте вопросы и мы вам ответим<p>
|
||||||
|
<form>
|
||||||
|
<textarea></textarea>
|
||||||
|
<button>Отправить</button>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
html/index.html
Normal file
25
html/index.html
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Онлайн кинотеатр</title>
|
||||||
|
<link rel="stylesheet" href="../css/style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Онлайн кинотеатр</h1>
|
||||||
|
<ul class="navigation">
|
||||||
|
<li><a href="catalog.html">Фильмы и сериалы</a></li>
|
||||||
|
<li><a href="about.html">О нас</a></li>
|
||||||
|
<li><a href="help.html">Помощь</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2>Добро пожаловать в онлайн кинотеатр</h2>
|
||||||
|
<p>Смотрите фильмы бесплатно и без ограничений.</p>
|
||||||
|
<h2>Премьера недели</h2>
|
||||||
|
<h4>Ловцы забытых голосов</h4>
|
||||||
|
<figure>
|
||||||
|
<img src="../images/film.jpg" width="200">
|
||||||
|
<figcaption><a href="film.html" target="_blank">Смотреть</a></figcaption>
|
||||||
|
</figure>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
Before Width: | Height: | Size: 207 KiB After Width: | Height: | Size: 207 KiB |
13
index.html
13
index.html
@@ -1,13 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Онлайн кинотеатр</title>
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/index.jsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
"target": "ES2020",
|
|
||||||
"module": "ESNext",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"baseUrl": "./src/**",
|
|
||||||
"checkJs": true
|
|
||||||
},
|
|
||||||
"exclude": ["node_modules", "**/node_modules/*"]
|
|
||||||
}
|
|
||||||
5363
package-lock.json
generated
5363
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
38
package.json
38
package.json
@@ -1,38 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "int-prog",
|
|
||||||
"private": true,
|
|
||||||
"version": "1.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"start": "vite",
|
|
||||||
"vite": "vite",
|
|
||||||
"build": "vite build",
|
|
||||||
"serve": "http-server -p 3000 ./dist/",
|
|
||||||
"prod": "npm-run-all build serve",
|
|
||||||
"lint": "eslint ."
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"bootstrap": "^5.3.5",
|
|
||||||
"bootstrap-icons": "^1.11.3",
|
|
||||||
"react": "^19.0.0",
|
|
||||||
"react-dom": "^19.0.0",
|
|
||||||
"react-router-dom": "^7.5.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/js": "^9.21.0",
|
|
||||||
"@types/react": "^19.0.10",
|
|
||||||
"@types/react-dom": "^19.0.4",
|
|
||||||
"@vitejs/plugin-react": "^4.3.4",
|
|
||||||
"eslint": "^9.21.0",
|
|
||||||
"eslint-config-prettier": "^10.1.1",
|
|
||||||
"eslint-import-resolver-vite": "^2.1.0",
|
|
||||||
"eslint-plugin-import": "^2.31.0",
|
|
||||||
"eslint-plugin-prettier": "^5.2.5",
|
|
||||||
"eslint-plugin-react": "^7.37.4",
|
|
||||||
"eslint-plugin-react-hooks": "^5.1.0",
|
|
||||||
"eslint-plugin-react-refresh": "^0.4.19",
|
|
||||||
"globals": "^15.15.0",
|
|
||||||
"http-server": "^14.1.1",
|
|
||||||
"vite": "^6.2.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
BIN
report.docx
BIN
report.docx
Binary file not shown.
@@ -1,21 +0,0 @@
|
|||||||
import { Route, Routes } from 'react-router-dom';
|
|
||||||
import About from '../pages/About';
|
|
||||||
import Catalog from '../pages/Catalog';
|
|
||||||
import Film from '../pages/Film';
|
|
||||||
import Home from '../pages/Home';
|
|
||||||
import Movies from '../pages/Movies';
|
|
||||||
|
|
||||||
|
|
||||||
export const App = () => {
|
|
||||||
return (
|
|
||||||
<div className="p-2">
|
|
||||||
<Routes>
|
|
||||||
<Route path="/" element={<Home />} />
|
|
||||||
<Route path="/catalog" element={<Catalog />} />
|
|
||||||
<Route path="/about" element={<About />} />
|
|
||||||
<Route path="/film" element={<Film />} />
|
|
||||||
<Route path="movies" element={<Movies />} />
|
|
||||||
</Routes>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
export default function Footer() {
|
|
||||||
return (
|
|
||||||
<footer className="container mt-auto">
|
|
||||||
<div className="text-center">
|
|
||||||
<p>
|
|
||||||
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу
|
|
||||||
<i className="bi bi-heart ms-2"></i>
|
|
||||||
<i className="bi bi-star-fill ms-1"></i>
|
|
||||||
<i className="bi bi-arrow-right ms-1"></i>
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<i className="bi bi-telegram"> Телеграм</i>
|
|
||||||
<i className="bi bi-discord ms-1"> Дискорд</i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { Link } from 'react-router-dom'
|
|
||||||
export default function Header() {
|
|
||||||
return (
|
|
||||||
<header className="container mt-4 mb-4">
|
|
||||||
<div className="row mb-2 align-items-baseline">
|
|
||||||
<img src="/images/4k.jpg" id="logo" className="col-auto" alt="Лого" style={{ width: '200px', height: 'auto' }} />
|
|
||||||
<h1 className="col display-1">Онлайн кинотеатр</h1>
|
|
||||||
</div>
|
|
||||||
<nav>
|
|
||||||
<ul className="nav">
|
|
||||||
<li className="nav-item dropdown">
|
|
||||||
<Link to="/catalog" className="nav-link dropdown-toggle" data-bs-toggle="dropdown"> Фильмы и сериалы </Link>
|
|
||||||
<ul className="dropdown-menu">
|
|
||||||
<li className="dropdown-item"><Link to="/catalog?genre=horror" className="nav-link">Ужастики</Link></li>
|
|
||||||
<li className="dropdown-item"><Link to="/catalog?genre=anime" className="nav-link">Аниме</Link></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item"><Link to="/" className="nav-link">Главная</Link></li>
|
|
||||||
<li className="nav-item"><Link to="/about" className="nav-link">О нас</Link></li>
|
|
||||||
<li className="nav-item"><Link to="/help" className="nav-link">Помощь</Link></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
|
|
||||||
export default function MovieCard({ movie, onEdit, onDelete }) {
|
|
||||||
return (
|
|
||||||
<div className="card h-100">
|
|
||||||
<img src={movie.poster} className="card-img-top" alt={movie.title} />
|
|
||||||
<div className="card-body">
|
|
||||||
<h5 className="card-title">{movie.title}</h5>
|
|
||||||
</div>
|
|
||||||
<div className="card-footer d-flex justify-content-between">
|
|
||||||
<button className="btn btn-sm btn-primary" onClick={onEdit}>
|
|
||||||
Редактировать
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-sm btn-danger" onClick={onDelete}>
|
|
||||||
Удалить
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
|
|
||||||
export default function MovieForm({ initialData = {}, onSubmit }) {
|
|
||||||
const [title, setTitle] = useState('')
|
|
||||||
const [poster, setPoster] = useState('')
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (initialData) {
|
|
||||||
// @ts-ignore
|
|
||||||
setTitle(initialData.title || '')
|
|
||||||
// @ts-ignore
|
|
||||||
setPoster(initialData.poster || '')
|
|
||||||
}
|
|
||||||
}, [initialData])
|
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
|
||||||
e.preventDefault()
|
|
||||||
onSubmit({
|
|
||||||
...initialData,
|
|
||||||
title,
|
|
||||||
poster,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Название</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
value={title}
|
|
||||||
onChange={e => setTitle(e.target.value)}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<label className="form-label">URL постера</label>
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
className="form-control"
|
|
||||||
value={poster}
|
|
||||||
onChange={e => setPoster(e.target.value)}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" className="btn btn-primary" >
|
|
||||||
{initialData?.
|
|
||||||
// @ts-ignore
|
|
||||||
id ? 'Сохранить' : 'Добавить'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { createRoot } from 'react-dom/client';
|
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
|
||||||
import { App } from "./app/App";
|
|
||||||
|
|
||||||
import 'bootstrap-icons/font/bootstrap-icons.css';
|
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
||||||
|
|
||||||
createRoot(document.getElementById("root")).render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<BrowserRouter>
|
|
||||||
<App />
|
|
||||||
</BrowserRouter>
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import Footer from '../components/Footer'
|
|
||||||
import Header from '../components/Header'
|
|
||||||
|
|
||||||
export default function About() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header />
|
|
||||||
|
|
||||||
<div className="container">
|
|
||||||
<h2 className="mb-3">О нас</h2>
|
|
||||||
<p className="mb-0">
|
|
||||||
Мы рады приветствовать вас на данном сайте.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Если есть предложения для улучшения работы сайта, пишите на почту
|
|
||||||
<a href="mailto:ilyasvaliylov@gmail.com">
|
|
||||||
ilyasvaliylov@gmail.com
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import Footer from '../components/Footer'
|
|
||||||
import Header from '../components/Header'
|
|
||||||
|
|
||||||
export default function Catalog() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header />
|
|
||||||
<div className="container mb-4">
|
|
||||||
<h2>Каталог фильмов и сериалов</h2>
|
|
||||||
<div className="d-md-flex flex-wrap justify-content-between">
|
|
||||||
{Array.from({ length: 9 }).map((_, i) => (
|
|
||||||
<div key={i} className="w-25 me-3 mb-4 text-center">
|
|
||||||
<figure>
|
|
||||||
<figcaption className="mb-2">
|
|
||||||
<a href="/film" className="fs-5 link-dark text-decoration-none">
|
|
||||||
Ловцы забытых голосов (2011)
|
|
||||||
</a>
|
|
||||||
</figcaption>
|
|
||||||
<img src="/images/film.jpg" className="img-fluid" alt="Постер" />
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
import Footer from '../components/Footer'
|
|
||||||
import Header from '../components/Header'
|
|
||||||
|
|
||||||
export default function Film() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header />
|
|
||||||
|
|
||||||
<div className="container">
|
|
||||||
<div className="film">
|
|
||||||
<h2 className="card-title mb-4">Ловцы забытых голосов (2011)</h2>
|
|
||||||
|
|
||||||
<p className="card-text mb-4">
|
|
||||||
Юная Асуна живет с вечно пропадающей на работе матерью и после школы
|
|
||||||
любит забираться на скалу, чтобы послушать радио, доставшееся от
|
|
||||||
умершего отца. Однажды в этом своем секретном месте она знакомится с
|
|
||||||
загадочным юношей Сюном, который говорит, что пришел из далекой страны
|
|
||||||
Агартхи. Эта встреча становится началом полного приключений
|
|
||||||
путешествия в волшебный мир, где Асуне предстоит столкнуться с
|
|
||||||
потерями и обрести надежду.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<img src="/images/film.jpg" className="img-fluid w-25 me-4 mb-4" alt="Постер фильма" />
|
|
||||||
|
|
||||||
<ul className="list-unstyled film-container mb-4">
|
|
||||||
<li><strong>Год производства:</strong> 2011</li>
|
|
||||||
<li><strong>Жанр:</strong> аниме, мультфильм, драма, приключения</li>
|
|
||||||
<li><strong>Режиссер:</strong> Макото Синкай</li>
|
|
||||||
<li><strong>Сборы в мире:</strong> $600 486</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="https://www.kinopoisk.ru/film/581102/" target="_blank" rel="noopener noreferrer">
|
|
||||||
Смотреть фильм на КиноПоиск
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import Footer from '../components/Footer'
|
|
||||||
import Header from '../components/Header'
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header />
|
|
||||||
<div className="container">
|
|
||||||
<h2>Добро пожаловать в онлайн кинотеатр</h2>
|
|
||||||
<p>Смотрите фильмы бесплатно и без ограничений.</p>
|
|
||||||
<h2>Премьеры недели</h2>
|
|
||||||
<div className="d-md-flex flex-wrap justify-content-between">
|
|
||||||
{Array.from({ length: 4 }).map((_, i) => (
|
|
||||||
<div key={i} className="w-25 me-3 mb-4">
|
|
||||||
<h4>Ловцы забытых голосов</h4>
|
|
||||||
<figure>
|
|
||||||
<img src="/images/film.jpg" className="img-fluid" alt="Постер" />
|
|
||||||
<figcaption>
|
|
||||||
<a href="/film" target="_blank" rel="noopener noreferrer">Смотреть</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react'
|
|
||||||
import Footer from '../components/Footer'
|
|
||||||
import Header from '../components/Header'
|
|
||||||
import MovieCard from '../components/MovieCard'
|
|
||||||
import MovieForm from '../components/MovieForm'
|
|
||||||
|
|
||||||
export default function Movies() {
|
|
||||||
const [movies, setMovies] = useState([])
|
|
||||||
const [showForm, setShowForm] = useState(false)
|
|
||||||
const [editingMovie, setEditing] = useState(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetch('http://localhost:3001/movies')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(data => setMovies(data))
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
|
||||||
setEditing(null)
|
|
||||||
setShowForm(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleEdit = (movie) => {
|
|
||||||
setEditing(movie)
|
|
||||||
setShowForm(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDelete = (id) => {
|
|
||||||
fetch(`http://localhost:3001/movies/${id}`, {
|
|
||||||
method: 'DELETE',
|
|
||||||
}).then(() => {
|
|
||||||
setMovies(prev => prev.filter(m => m.id !== id))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = (movieData) => {
|
|
||||||
if (editingMovie) {
|
|
||||||
fetch(`http://localhost:3001/movies/${movieData.id}`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(movieData),
|
|
||||||
}).then(() => {
|
|
||||||
setMovies(prev => prev.map(m => m.id === movieData.id ? movieData : m))
|
|
||||||
setShowForm(false)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
fetch('http://localhost:3001/movies', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(movieData),
|
|
||||||
})
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(newMovie => {
|
|
||||||
setMovies(prev => [...prev, newMovie])
|
|
||||||
setShowForm(false)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header />
|
|
||||||
<div className="container mt-4">
|
|
||||||
<h1 className="mb-4">Мои фильмы</h1>
|
|
||||||
<button className="btn btn-success mb-4" onClick={handleAdd}>
|
|
||||||
Добавить новый фильм
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{showForm && (
|
|
||||||
<MovieForm
|
|
||||||
initialData={editingMovie}
|
|
||||||
onCancel={() => setShowForm(false)}
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="row">
|
|
||||||
{movies.map(movie => (
|
|
||||||
<div key={movie.id} className="col-md-4 mb-4">
|
|
||||||
<MovieCard
|
|
||||||
movie={movie}
|
|
||||||
onEdit={() => handleEdit(movie)}
|
|
||||||
onDelete={() => handleDelete(movie.id)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import react from "@vitejs/plugin-react";
|
|
||||||
import { defineConfig } from "vite";
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user