Ilyas/PIbd-21_Valiulov_I.A._IP
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

lab3

Browse Source
This commit is contained in:
IlyasValiulov
2025-03-22 15:50:41 +04:00
parent b10336045e
commit e300caab10
25 changed files with 3191 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.gitignore vendored Normal file
View File

@@ -0,0 +1,12 @@
# Node.js dependencies
node_modules/
# Build output
dist/
build/
out/
# Environment variables
.env
.env.local
.env.*.local

2
README.md
View File

@@ -1,2 +0,0 @@
# 2Course-Internet-Programming
Лабораторные работы по предмету: Интернет-программирование.

8
css/catalog.css
View File

@@ -1,8 +0,0 @@
.film-collection {
justify-content: space-between;
}
.film {
width: 30%;
margin-bottom: 20px;
}

9
css/film.css
View File

@@ -1,9 +0,0 @@
.film {
width: 100%;
}
.film img {
width: 500px;
height: auto;
margin: 20px auto;
}

25
css/help.css
View File

@@ -1,25 +0,0 @@
form {
margin-top: 30px;
display: flex;
flex-direction: column;
gap: 10px;
}
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;
color: #ffff;
background-color: #493c2f;
border-width: 1px;
border-radius: 5px;
}

139
css/style.css
View File

@@ -1,139 +0,0 @@
body {
font-family: Arial, sans-serif;
margin: 0px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #493c2f;
color: #ffffff;
padding: 10px 10px 20px 10px;
}
.navigation {
list-style: none;
padding: 0;
margin: 0 20px;
display: flex;
}
.navigation li {
position: relative;
}
.navigation li a {
padding: 10px 20px;
}
.dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #493c2f;
list-style: none;
padding: 0;
margin: 0;
min-width: 150px;
}
.dropdown li a {
padding: 10px;
text-decoration: none;
display: block;
}
.navigation li:hover .dropdown {
display: block;
}
.logo-name {
display: flex;
align-items: center;
margin-left: 30px;
}
#logo {
width: 100px;
height: auto;
margin-right: 20px;
}
.container {
background-color: #ffffff;
margin: 0 20%;
flex: 1;
}
.film-collection {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-around;
}
@media (max-width: 767px) {
.container {
margin: 0 5%;
}
.film-collection {
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.film-collection > * {
width: 100%;
margin-bottom: 10px;
}
}
.film {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 35%;
}
.film img {
width: 100%;
height: auto;
}
footer {
margin-top: 40px;
padding: 20px;
background-color: #493c2f;
color: #ffffff;
font-size: 12px;
text-align: center;
}
a {
text-decoration: solid;
color: inherit;
}
a:hover {
color:rgb(192, 192, 192);
}
p {
margin: 0;
}
h2 {
margin-top: 50px;
}
h4 {
margin: 5px;
text-align: center;
}
figure {
margin-top: 5px;
}

15
description
View File

@@ -1,15 +0,0 @@
Лабораторная работа №1.
Проектирование и верстка сайта
1. Для сайта в выбранной области (см. вариант задания) придумать не
менее 5 страниц с разным назначением. Представить перечень страниц
с небольшим описанием их назначения.
2. Продумать основной стиль сайта и в свободной форме описать его:
основные цвета, логотипы, стилевые особенности и т. д.
3. Подготовить и сверстать содержимое страниц. В данной работе следует
сделать упор только на содержимом страниц и стилевом оформление
этого содержимого. Структурные элементы сайта будут формироваться
в следующей работе. Не нужно делать меню, подвал, создавать сетку с
блоками и т. д. В данной работе можно использовать линейный порядок
элементов.
Вариант: Онлайн-кинотеатр.

12
eslint.config.mjs Normal file
View File

@@ -0,0 +1,12 @@
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
/** @type {import('eslint').Linter.Config[]} */
export default [
{files: ["**/*.{js,mjs,cjs,ts}"]},
{languageOptions: { globals: globals.browser }},
pluginJs.configs.recommended,
...tseslint.configs.recommended,
];

45
html/about.html
View File

@@ -1,45 +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>
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/about.css" />
</head>
<body>
<header>
<div>
<div class="logo-name">
<img src="../images/4k.jpg" id="logo">
<h1>Онлайн кинотеатр</h1>
</div>
<nav>
<ul class="navigation">
<li><a href="index.html">Главная</a></li>
<li><a href="catalog.html">Фильмы и сериалы</a>
<ul class="dropdown">
<li><a href="catalog.html">Ужастики</a></li>
<li><a href="catalog.html">Аниме</a></li>
</ul>
</li>
<li><a href="about.html">О нас</a></li>
<li><a href="help.html">Помощь</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<h2>Онлайн кинотеатр</h2>
<p class="indent">Мы рады приветствовать вас на данном сайте</p>
<p>Если есть предложения для улучшения работы сайта, пишите на почту <strong><en>ilyasvaliylov@gmail.com</en></strong></p>
</div>
<footer>
<div>
<p>@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу</p>
</div>
</footer>
</body>
</html>

103
html/catalog.html
View File

@@ -1,103 +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>
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/catalog.css" />
</head>
<body>
<header>
<div>
<div class="logo-name">
<img src="../images/4k.jpg" id="logo">
<h1>Онлайн кинотеатр</h1>
</div>
<nav>
<ul class="navigation">
<li><a href="index.html">Главная</a></li>
<li><a href="catalog.html">Фильмы и сериалы</a>
<ul class="dropdown">
<li><a href="catalog.html">Ужастики</a></li>
<li><a href="catalog.html">Аниме</a></li>
</ul>
</li>
<li><a href="about.html">О нас</a></li>
<li><a href="help.html">Помощь</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div>
<h2>Каталог фильмов и сериалов</h2>
</div>
<div class="film-collection">
<div class="film">
<figure>
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
<img src="../images/film.jpg" >
</figure>
</div>
<div class="film">
<figure>
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
<img src="../images/film.jpg" >
</figure>
</div>
<div class="film">
<figure>
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
<img src="../images/film.jpg" >
</figure>
</div>
<div class="film">
<figure>
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
<img src="../images/film.jpg" >
</figure>
</div>
<div class="film">
<figure>
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
<img src="../images/film.jpg" >
</figure>
</div>
<div class="film">
<figure>
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
<img src="../images/film.jpg" >
</figure>
</div>
<div class="film">
<figure>
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
<img src="../images/film.jpg" >
</figure>
</div>
<div class="film">
<figure>
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
<img src="../images/film.jpg" >
</figure>
</div>
<div class="film">
<figure>
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
<img src="../images/film.jpg" >
</figure>
</div>
</div>
</div>
<footer>
<div>
<p>@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу</p>
</div>
</footer>
</body>
</html>

57
html/film.html
View File

@@ -1,57 +0,0 @@
<!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>
<header>
<div>
<div class="logo-name">
<img src="../images/4k.jpg" id="logo">
<h1>Онлайн кинотеатр</h1>
</div>
<nav>
<ul class="navigation">
<li><a href="index.html">Главная</a></li>
<li><a href="catalog.html">Фильмы и сериалы</a>
<ul class="dropdown">
<li><a href="catalog.html">Ужастики</a></li>
<li><a href="catalog.html">Аниме</a></li>
</ul>
</li>
<li><a href="about.html">О нас</a></li>
<li><a href="help.html">Помощь</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="film">
<h2>Ловцы забытых голосов (2011)</h2>
<p>Юная Асуна живет с вечно пропадающей на работе матерью и после школы любит забираться на скалу,
чтобы послушать радио, доставшееся от умершего отца. Однажды в этом своем секретном месте она знакомится
с загадочным юношей Сюном, который говорит, что пришел из далекой страны Агартхи. Эта встреча становится
началом полного приключений путешествия в волшебный мир, где Асуне предстоит столкнуться с потерями и обрести надежду.</p>
<img src="../images/film.jpg">
<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>
</div>
</div>
<footer>
<div>
<p>@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу</p>
</div>
</footer>
</body>
</html>

48
html/help.html
View File

@@ -1,48 +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>
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/help.css" />
</head>
<body>
<header>
<div>
<div class="logo-name">
<img src="../images/4k.jpg" id="logo">
<h1>Онлайн кинотеатр</h1>
</div>
<nav>
<ul class="navigation">
<li><a href="index.html">Главная</a></li>
<li><a href="catalog.html">Фильмы и сериалы</a>
<ul class="dropdown">
<li><a href="catalog.html">Ужастики</a></li>
<li><a href="catalog.html">Аниме</a></li>
</ul>
</li>
<li><a href="about.html">О нас</a></li>
<li><a href="help.html">Помощь</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<h2>Помощь и поддержка</h2>
<p>Задавайте вопросы и мы вам ответим<p>
<form>
<textarea></textarea>
<button>Отправить</button>
</form>
</div>
<footer>
<div>
<p>@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу</p>
</div>
</footer>
</body>
</html>

80
html/index.html
View File

@@ -1,80 +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>
<link rel="stylesheet" href="../css/style.css" />
</head>
<body>
<header>
<div>
<div class="logo-name">
<img src="../images/4k.jpg" id="logo">
<h1>Онлайн кинотеатр</h1>
</div>
<nav>
<ul class="navigation">
<li><a href="catalog.html">Фильмы и сериалы</a>
<ul class="dropdown">
<li><a href="catalog.html">Ужастики</a></li>
<li><a href="catalog.html">Аниме</a></li>
</ul>
</li>
<li><a href="about.html">О нас</a></li>
<li><a href="help.html">Помощь</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div>
<h2>Добро пожаловать в онлайн кинотеатр</h2>
<p>Смотрите фильмы бесплатно и без ограничений.</p>
<h2>Премьеры недели</h2>
</div>
<div class="film-collection">
<div class="film">
<h4>Ловцы забытых голосов</h4>
<figure>
<img src="../images/film.jpg">
<figcaption><a href="film.html" target="_blank">Смотреть</a></figcaption>
</figure>
</div>
<div class="film">
<h4>Ловцы забытых голосов</h4>
<figure>
<img src="../images/film.jpg">
<figcaption><a href="film.html" target="_blank">Смотреть</a></figcaption>
</figure>
</div>
<div class="film">
<h4>Ловцы забытых голосов</h4>
<figure>
<img src="../images/film.jpg">
<figcaption><a href="film.html" target="_blank">Смотреть</a></figcaption>
</figure>
</div>
<div class="film">
<h4>Ловцы забытых голосов</h4>
<figure>
<img src="../images/film.jpg">
<figcaption><a href="film.html" target="_blank">Смотреть</a></figcaption>
</figure>
</div>
</div>
</div>
<footer>
<div>
<p>@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу</p>
</div>
</footer>
</body>
</html>

2649
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

30
package.json Normal file
View File

@@ -0,0 +1,30 @@
{
"name": "2course-internet-programming",
"version": "1.0.0",
"description": "Project of labworks to subject Internet-Programming",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vite",
"build": "vite build",
"lint": "eslint src --fix",
"format": "prettier --write src/**/*.{js,css,html}",
"preview": "vite preview"
},
"author": "IlyasValiulov",
"license": "ISC",
"devDependencies": {
"@eslint/js": "^9.22.0",
"eslint": "^9.22.0",
"eslint-config-prettier": "^10.1.1",
"eslint-plugin-prettier": "^5.2.3",
"globals": "^16.0.0",
"prettier": "^3.5.3",
"sass": "^1.85.1",
"vite": "^6.2.1"
},
"dependencies": {
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.3"
}
}

0
images/4k.jpg → public/images/4k.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

0
images/film.jpg → public/images/film.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 207 KiB

After

Width:  |  Height:  |  Size: 207 KiB

55
src/about.html Normal file
View File

@@ -0,0 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>О нас</title>
<script type="module" src="js/main.js"></script>
</head>
<body>
<header class="container mt-4 mb-4">
<div>
<div class="row mb-2 align-items-center">
<img src="../images/4k.jpg" id="logo" class="col-auto"/>
<h1 class="col display-1">Онлайн кинотеатр</h1>
</div>
<div>
<nav>
<ul class="nav">
<li class="nav-item"><a href="index.html" class="nav-link">Главная</a></li>
<li class="nav-item dropdown">
<a href="catalog.html" class="nav-link dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Фильмы и сериалы</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Ужастики</a></li>
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Аниме</a></li>
</ul>
</li>
<li class="nav-item"><a href="about.html" class="nav-link">О нас</a></li>
<li class="nav-item"><a href="help.html" class="nav-link">Помощь</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container">
<h2 class="mb-3">Онлайн кинотеатр</h2>
<p class="mb-0">Мы рады приветствовать вас на данном сайте</p>
<p>
Если есть предложения для улучшения работы сайта, пишите на почту
<strong><en>ilyasvaliylov@gmail.com</en></strong>
</p>
</div>
<footer class="container mt-auto">
<div class="text-center">
<p>
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4Кйоууу
</p>
</div>
</footer>
</body>
</html>

138
src/catalog.html Normal file
View File

@@ -0,0 +1,138 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Каталог фильмов</title>
<script type="module" src="js/main.js"></script>
</head>
<body>
<header class="container mt-4 mb-4">
<div>
<div class="row mb-2 align-items-center">
<img src="../images/4k.jpg" id="logo" class="col-auto"/>
<h1 class="col display-1">Онлайн кинотеатр</h1>
</div>
<div>
<nav>
<ul class="nav">
<li class="nav-item"><a href="index.html" class="nav-link">Главная</a></li>
<li class="nav-item dropdown">
<a href="catalog.html" class="nav-link dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Фильмы и сериалы</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Ужастики</a></li>
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Аниме</a></li>
</ul>
</li>
<li class="nav-item"><a href="about.html" class="nav-link">О нас</a></li>
<li class="nav-item"><a href="help.html" class="nav-link">Помощь</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="mb-3">
<h2>Каталог фильмов и сериалов</h2>
</div>
<div class="d-md-flex flex-wrap justify-content-between">
<div class="w-25 me-3 mb-4">
<figure>
<figcaption class="mb-2 text-center">
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
</figcaption>
<img src="../images/film.jpg" class="img-fluid"/>
</figure>
</div>
<div class="w-25 me-3 mb-4">
<figure>
<figcaption class="mb-2 text-center">
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
</figcaption>
<img src="../images/film.jpg" class="img-fluid"/>
</figure>
</div>
<div class="w-25 me-3 mb-4">
<figure>
<figcaption class="mb-2 text-center">
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
</figcaption>
<img src="../images/film.jpg" class="img-fluid"/>
</figure>
</div>
<div class="w-25 me-3 mb-4">
<figure>
<figcaption class="mb-2 text-center">
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
</figcaption>
<img src="../images/film.jpg" class="img-fluid"/>
</figure>
</div>
<div class="w-25 me-3 mb-4">
<figure>
<figcaption class="mb-2 text-center">
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
</figcaption>
<img src="../images/film.jpg" class="img-fluid"/>
</figure>
</div>
<div class="w-25 me-3 mb-4">
<figure>
<figcaption class="mb-2 text-center">
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
</figcaption>
<img src="../images/film.jpg" class="img-fluid"/>
</figure>
</div>
<div class="w-25 me-3 mb-4">
<figure>
<figcaption class="mb-2 text-center">
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
</figcaption>
<img src="../images/film.jpg" class="img-fluid"/>
</figure>
</div>
<div class="w-25 me-3 mb-4">
<figure>
<figcaption class="mb-2 text-center">
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
</figcaption>
<img src="../images/film.jpg" class="img-fluid"/>
</figure>
</div>
<div class="w-25 me-3 mb-4">
<figure>
<figcaption class="mb-2 text-center">
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
</figcaption>
<img src="../images/film.jpg" class="img-fluid"/>
</figure>
</div>
</div>
</div>
<footer class="container mt-auto">
<div class="text-center">
<p>
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К
йоууу
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

74
src/film.html Normal file
View File

@@ -0,0 +1,74 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Film</title>
<script type="module" src="js/main.js"></script>
</head>
<body>
<header class="container mt-4 mb-4">
<div>
<div class="row mb-2 align-items-center">
<img src="../images/4k.jpg" id="logo" class="col-auto"/>
<h1 class="col display-1">Онлайн кинотеатр</h1>
</div>
<div>
<nav>
<ul class="nav">
<li class="nav-item"><a href="index.html" class="nav-link">Главная</a></li>
<li class="nav-item dropdown">
<a href="catalog.html" class="nav-link dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Фильмы и сериалы</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Ужастики</a></li>
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Аниме</a></li>
</ul>
</li>
<li class="nav-item"><a href="about.html" class="nav-link">О нас</a></li>
<li class="nav-item"><a href="help.html" class="nav-link">Помощь</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="film">
<h2 class="card-title mb-4">Ловцы забытых голосов (2011)</h2>
<p class="card-text mb-4">
Юная Асуна живет с вечно пропадающей на работе матерью и после школы
любит забираться на скалу, чтобы послушать радио, доставшееся от
умершего отца. Однажды в этом своем секретном месте она знакомится с
загадочным юношей Сюном, который говорит, что пришел из далекой страны
Агартхи. Эта встреча становится началом полного приключений
путешествия в волшебный мир, где Асуне предстоит столкнуться с
потерями и обрести надежду.
</p>
<img src="../images/film.jpg" class="img-fluid w-25 ms-4 mb-4" />
<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>
</div>
</div>
<footer class="container mt-auto">
<div class="text-center">
<p>
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

93
src/help.html Normal file
View File

@@ -0,0 +1,93 @@
<!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="npcss/help.css" /> -->
<script type="module" src="js/main.js"></script>
</head>
<body>
<header class="container mt-4 mb-4">
<div>
<div class="row mb-2 align-items-center">
<img src="../images/4k.jpg" id="logo" class="col-auto"/>
<h1 class="col display-1">Онлайн кинотеатр</h1>
</div>
<div>
<nav>
<ul class="nav">
<li class="nav-item"><a href="index.html" class="nav-link">Главная</a></li>
<li class="nav-item dropdown">
<a href="catalog.html" class="nav-link dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Фильмы и сериалы</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Ужастики</a></li>
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Аниме</a></li>
</ul>
</li>
<li class="nav-item"><a href="about.html" class="nav-link">О нас</a></li>
<li class="nav-item"><a href="help.html" class="nav-link">Помощь</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container">
<h2>Добавить фильм</h2>
<p></p>
<form id="movieForm">
<div class="mb-3">
<label for="movieTitle" class="form-label">Название фильма</label>
<input type="text" class="form-control" id="movieTitle" placeholder="Введите название фильма" required>
</div>
<div class="mb-3">
<label for="movieImage" class="form-label">Загрузите изображение</label>
<input type="file" class="form-control" id="movieImage" accept="image/*" required>
</div>
<button type="submit" class="btn btn-primary">Добавить фильм</button>
</form>
<div id="movieContainer" class="row mt-5"></div>
</div>
<footer class="container mt-auto">
<div class="text-center">
<p>
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4Кйоууу
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('movieForm').addEventListener('submit', function (event) {
event.preventDefault();
const title = document.getElementById('movieTitle').value;
const imageFile = document.getElementById('movieImage').files[0];
const card = document.createElement('div');
card.className = 'col-md-4';
const cardInner = `
<div class="card">
<img src="${URL.createObjectURL(imageFile)}" class="card-img-top" alt="${title}">
<div class="card-body">
<h5 class="card-title">${title}</h5>
</div>
</div>
`;
card.innerHTML = cardInner;
document.getElementById('movieContainer').appendChild(card);
document.getElementById('movieForm').reset();
});
</script>
</body>
</html>

104
src/index.html Normal file
View File

@@ -0,0 +1,104 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Онлайн кинотеатр</title>
<script type="module" src="js/main.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<header class="container mt-4 mb-4">
<div>
<div class="row mb-2 align-items-center">
<img src="../images/4k.jpg" id="logo" class="col-auto"/>
<h1 class="col display-1">Онлайн кинотеатр</h1>
</div>
<div>
<nav>
<ul class="nav">
<li class="nav-item dropdown">
<a href="catalog.html" class="nav-link dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Фильмы и сериалы</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Ужастики</a></li>
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Аниме</a></li>
</ul>
</li>
<li class="nav-item"><a href="about.html" class="nav-link">О нас</a></li>
<li class="nav-item"><a href="help.html" class="nav-link">Помощь</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container">
<div>
<h2>Добро пожаловать в онлайн кинотеатр</h2>
<p>Смотрите фильмы бесплатно и без ограничений.</p>
<h2>Премьеры недели</h2>
</div>
<div class="d-md-flex flex-wrap justify-content-between">
<div class="w-25 me-3">
<h4>Ловцы забытых голосов</h4>
<figure>
<img src="../images/film.jpg" class="img-fluid"/>
<figcaption>
<a href="film.html" target="_blank">Смотреть</a>
</figcaption>
</figure>
</div>
<div class="w-25 me-3">
<h4>Ловцы забытых голосов</h4>
<figure>
<img src="../images/film.jpg" class="img-fluid"/>
<figcaption>
<a href="film.html" target="_blank">Смотреть</a>
</figcaption>
</figure>
</div>
<div class="w-25 me-3">
<h4>Ловцы забытых голосов</h4>
<figure>
<img src="../images/film.jpg" class="img-fluid"/>
<figcaption>
<a href="film.html" target="_blank">Смотреть</a>
</figcaption>
</figure>
</div>
<div class="w-25 me-auto">
<h4>Ловцы забытых голосов</h4>
<figure>
<img src="../images/film.jpg" class="img-fluid"/>
<figcaption>
<a href="film.html" target="_blank">Смотреть</a>
</figcaption>
</figure>
</div>
</div>
</div>
<footer class="container mt-auto">
<div class="text-center">
<p>
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу
<i class="bi bi-heart"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-arrow-right"></i>
</p>
<div>
<i class="bi bi-telegram">Телеграмм</i>
<i class="bi bi-discord ms-1">Дискорд</i>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

1
src/js/main.js Normal file
View File

@@ -0,0 +1 @@
import '../scss/styles.scss'

7
src/scss/styles.scss Normal file
View File

@@ -0,0 +1,7 @@
@import "../../node_modules/bootstrap/scss/bootstrap";
#logo {
width: 150px;
height: 50px;
}

16
vite.config.js Normal file
View File

@@ -0,0 +1,16 @@
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
build: {
rollupOptions: {
input: {
main: path.resolve(__dirname, 'index.html'),
}
}
},
server: {
port: 3000,
hot: true,
},
});