lab3
This commit is contained in:
20
.eslintrc.js
Normal file
20
.eslintrc.js
Normal file
@@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
},
|
||||
rules: {
|
||||
'prettier/prettier': 'error',
|
||||
'no-unused-vars': 'warn',
|
||||
'no-console': 'warn',
|
||||
},
|
||||
};
|
||||
26
.gitignore
vendored
Normal file
26
.gitignore
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Dependencies
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
8
.prettierrc
Normal file
8
.prettierrc
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"semi": true,
|
||||
"tabWidth": 2,
|
||||
"printWidth": 100,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"bracketSpacing": true
|
||||
}
|
||||
212
about.html
212
about.html
@@ -3,100 +3,134 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Page Title</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>О фильме - Online Cinema Theater</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<div class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
<span>Online Cinema Theater</span>
|
||||
<!-- Навигационная панель -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-custom fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo" width="50" height="50" class="me-2">
|
||||
<span>Online Cinema Theater</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Рецензии</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
Что глянуть?
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="films.html">Фильмы</a></li>
|
||||
<li><a class="dropdown-item" href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navbar">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
<li class="dropdown">
|
||||
<span>Что глянуть? ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="movie-details">
|
||||
<div class="movie-poster">
|
||||
<img src="resources/movies/gruz.jpeg" alt="Movie Poster">
|
||||
</div>
|
||||
<div class="movie-info">
|
||||
<h1>Груз 200</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<th class="header-th">Продолжительность</th>
|
||||
<td>1 час 50 минут</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="header-th">Год выпуска</th>
|
||||
<td>2007</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="header-th">Страна</th>
|
||||
<td>Россия</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="header-th">Режиссер</th>
|
||||
<td>Алексей Балабанов</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="header-th">Жанр</th>
|
||||
<td>триллер, драма, криминал</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<p>Описание:</p>
|
||||
<p>
|
||||
Груз 200 - это история о двух братьях, которые вместе с другими людьми отправляются в грузовике на
|
||||
поиски золота в Африке.
|
||||
Однако путь к цели оказывается опасным и сложным, и братья сталкиваются с различными препятствиями, в
|
||||
том числе с коррупцией и жестокостью.
|
||||
</p>
|
||||
<iframe width="560" height="315"
|
||||
src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=iaZ0q33EJFBzeIZ_?autoplay=1"
|
||||
title="YouTube video player" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div class="contact-info">
|
||||
<h3>Контактная информация</h3>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
<!-- Основной контент -->
|
||||
<main class="container py-5 mt-5">
|
||||
<section class="movie-details">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card bg-dark">
|
||||
<img src="resources/movies/gruz.jpeg" class="card-img-top" alt="Movie Poster">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card bg-dark">
|
||||
<div class="card-body">
|
||||
<h1 class="card-title text-white mb-4">Груз 200</h1>
|
||||
<table class="table table-dark table-hover">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Продолжительность</th>
|
||||
<td class="text-light">1 час 50 минут</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Год выпуска</th>
|
||||
<td class="text-light">2007</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Страна</th>
|
||||
<td class="text-light">Россия</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Режиссер</th>
|
||||
<td class="text-light">Алексей Балабанов</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Жанр</th>
|
||||
<td class="text-light">триллер, драма, криминал</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h5 class="text-white mt-4">Описание:</h5>
|
||||
<p class="text-light">
|
||||
Груз 200 - это история о двух братьях, которые вместе с другими людьми отправляются в грузовике на
|
||||
поиски золота в Африке. Однако путь к цели оказывается опасным и сложным, и братья сталкиваются
|
||||
с различными препятствиями, в том числе с коррупцией и жестокостью.
|
||||
</p>
|
||||
<div class="ratio ratio-16x9 mt-4">
|
||||
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=iaZ0q33EJFBzeIZ_?autoplay=1"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Футер -->
|
||||
<footer class="bg-dark-custom text-light py-4">
|
||||
<div class="container">
|
||||
<div class="row gy-4">
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Контактная информация</h5>
|
||||
<p class="mb-1">Телефон: +7 (123) 456-78-90</p>
|
||||
<p class="mb-1">Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Мы в соцсетях</h5>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#" class="text-light"><i class="bi bi-telegram fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-whatsapp fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-vk fs-4"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Время работы</h5>
|
||||
<p class="mb-1">Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col text-center">
|
||||
<p class="mb-0">© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<h3>Мы в соцсетях</h3>
|
||||
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
|
||||
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
|
||||
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
|
||||
</div>
|
||||
<div class="working-hours">
|
||||
<h3>Время работы</h3>
|
||||
<p>Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
140
add-movie.html
Normal file
140
add-movie.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Добавить фильм - Online Cinema Theater</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Навигационная панель -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-custom fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo" width="50" height="50" class="me-2">
|
||||
<span>Online Cinema Theater</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Рецензии</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
Что глянуть?
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="films.html">Фильмы</a></li>
|
||||
<li><a class="dropdown-item" href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<main class="container py-5 mt-5">
|
||||
<section class="mb-5">
|
||||
<h2 class="text-orange mb-4"><i class="bi bi-plus-circle"></i> Добавить новый фильм</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<form id="addMovieForm" class="bg-dark p-4 rounded">
|
||||
<div class="mb-3">
|
||||
<label for="movieTitle" class="form-label text-light">
|
||||
<i class="bi bi-film"></i> Название фильма
|
||||
</label>
|
||||
<input type="text" class="form-control" id="movieTitle" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="movieDirector" class="form-label text-light">
|
||||
<i class="bi bi-person-video3"></i> Режиссер
|
||||
</label>
|
||||
<input type="text" class="form-control" id="movieDirector" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="movieGenre" class="form-label text-light">
|
||||
<i class="bi bi-tags"></i> Жанр
|
||||
</label>
|
||||
<select class="form-select" id="movieGenre" multiple required>
|
||||
<option value="action">Боевик</option>
|
||||
<option value="comedy">Комедия</option>
|
||||
<option value="drama">Драма</option>
|
||||
<option value="thriller">Триллер</option>
|
||||
<option value="horror">Ужасы</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="movieYear" class="form-label text-light">
|
||||
<i class="bi bi-calendar3"></i> Год выпуска
|
||||
</label>
|
||||
<input type="number" class="form-control" id="movieYear" min="1900" max="2024" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="movieDescription" class="form-label text-light">
|
||||
<i class="bi bi-text-paragraph"></i> Описание
|
||||
</label>
|
||||
<textarea class="form-control" id="movieDescription" rows="3" required></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="moviePoster" class="form-label text-light">
|
||||
<i class="bi bi-image"></i> Постер фильма
|
||||
</label>
|
||||
<input type="file" class="form-control" id="moviePoster" accept="image/*" required>
|
||||
</div>
|
||||
<div class="preview-container mb-3 d-none">
|
||||
<img id="posterPreview" src="" alt="Preview" class="img-fluid rounded">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-orange w-100">
|
||||
<i class="bi bi-plus-circle-fill"></i> Добавить фильм
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Футер -->
|
||||
<footer class="footer-custom py-4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<h5 class="text-white mb-3">Контактная информация</h5>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<h5 class="text-white mb-3">Мы в соцсетях</h5>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#" class="text-light"><i class="bi bi-telegram fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-whatsapp fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-vk fs-4"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<h5 class="text-white mb-3">Время работы</h5>
|
||||
<p>Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
215
catalog.html
215
catalog.html
@@ -3,79 +3,156 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Page Title</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Каталог - Online Cinema Theater</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<div class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
<span>Online Cinema Theater</span>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navbar">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
<li class="dropdown">
|
||||
<span>Что глянуть? ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="movie-catalog">
|
||||
<h2>Каталог фильмов</h2>
|
||||
<div class="genre-filter">
|
||||
<label for="genre-select">Выберите жанр:</label>
|
||||
<select id="genre-select">
|
||||
<option value="all">Все жанры</option>
|
||||
<option value="action">Боевик</option>
|
||||
<option value="comedy">Комедия</option>
|
||||
<option value="drama">Драма</option>
|
||||
<option value="crime">Криминал</option>
|
||||
<option value="thriller">Триллер</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="movie-list">
|
||||
<div class="movie-card">
|
||||
<img src="resources/movies/gruz.jpeg" alt="Movie Poster">
|
||||
<h3>Груз 200</h3>
|
||||
<p>Режиссер: Алексей Балабанов</p>
|
||||
<p>Жанр: триллер драма криминал</p>
|
||||
<p>Год выпуска: 2007</p>
|
||||
<a href="about.html" class="watch-now-btn">Смотреть сейчас</a>
|
||||
<!-- Навигационная панель -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-custom fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo" width="50" height="50" class="me-2">
|
||||
<span>Online Cinema Theater</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Рецензии</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
Что глянуть?
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="films.html">Фильмы</a></li>
|
||||
<li><a class="dropdown-item" href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div class="contact-info">
|
||||
<h3>Контактная информация</h3>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</nav>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<main class="container py-5 mt-5">
|
||||
<section class="movie-catalog">
|
||||
<h2 class="text-orange mb-4">Каталог фильмов</h2>
|
||||
|
||||
<!-- Фильтры -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label for="genre-select" class="form-label"><i class="bi bi-funnel me-2"></i>Выберите жанр:</label>
|
||||
<select class="form-select" id="genre-select">
|
||||
<option value="all">Все жанры</option>
|
||||
<option value="action">Боевик</option>
|
||||
<option value="comedy">Комедия</option>
|
||||
<option value="drama">Драма</option>
|
||||
<option value="crime">Криминал</option>
|
||||
<option value="thriller">Триллер</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label for="year-select" class="form-label">Год выпуска:</label>
|
||||
<select class="form-select" id="year-select">
|
||||
<option value="all">Все годы</option>
|
||||
<option value="2024">2024</option>
|
||||
<option value="2023">2023</option>
|
||||
<option value="2022">2022</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label for="sort-select" class="form-label">Сортировка:</label>
|
||||
<select class="form-select" id="sort-select">
|
||||
<option value="rating">По рейтингу</option>
|
||||
<option value="date">По дате</option>
|
||||
<option value="name">По названию</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Список фильмов -->
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
|
||||
<div class="col">
|
||||
<div class="card movie-card h-100 bg-dark">
|
||||
<img src="resources/movies/gruz.jpeg" class="card-img-top" alt="Movie Poster">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Груз 200</h5>
|
||||
<p class="card-text text-white">Режиссер: Алексей Балабанов</p>
|
||||
<p class="card-text text-light">Жанр: триллер, драма, криминал</p>
|
||||
<p class="card-text text-light">Год выпуска: 2007</p>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0">
|
||||
<a href="about.html" class="btn btn-orange w-100">Смотреть сейчас</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Здесь можно добавить больше карточек фильмов -->
|
||||
</div>
|
||||
|
||||
<!-- Пагинация -->
|
||||
<nav class="mt-4">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1"><i class="bi bi-chevron-left"></i> Предыдущая</a>
|
||||
</li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">Следующая <i class="bi bi-chevron-right"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Футер -->
|
||||
<footer class="bg-dark-custom text-light py-4">
|
||||
<div class="container">
|
||||
<div class="row gy-4">
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Контактная информация</h5>
|
||||
<p class="mb-1">Телефон: +7 (123) 456-78-90</p>
|
||||
<p class="mb-1">Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Мы в соцсетях</h5>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#" class="text-light"><i class="bi bi-telegram fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-whatsapp fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-vk fs-4"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Время работы</h5>
|
||||
<p class="mb-1">Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col text-center">
|
||||
<p class="mb-0">© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<h3>Мы в соцсетях</h3>
|
||||
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
|
||||
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
|
||||
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
|
||||
</div>
|
||||
<div class="working-hours">
|
||||
<h3>Время работы</h3>
|
||||
<p>Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
181
films.html
181
films.html
@@ -4,81 +4,122 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Page Title</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Фильмы - Online Cinema Theater</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<div class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
<span>Online Cinema Theater</span>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navbar">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
<li class="dropdown">
|
||||
<span>Что глянуть? ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="featured-movies">
|
||||
<h2>Основные фильмы</h2>
|
||||
<div class="movie-list">
|
||||
<div class="movie-card">
|
||||
<img src="resources/movies/gruz.jpeg" alt="Movie Poster">
|
||||
<h3>Груз 200</h3>
|
||||
<p>Режиссер: Алексей Балабанов</p>
|
||||
<p>Жанр: триллер, драма, криминал</p>
|
||||
<p>Год выпуска: 2007</p>
|
||||
<a href="about.html" class="watch-now-btn">Смотреть сейчас</a>
|
||||
<!-- Навигационная панель -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-custom fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo" width="50" height="50" class="me-2">
|
||||
<span>Online Cinema Theater</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Рецензии</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown">
|
||||
Что глянуть?
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item active" href="films.html">Фильмы</a></li>
|
||||
<li><a class="dropdown-item" href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="upcoming-movies">
|
||||
<h2>Предстоящие фильмы</h2>
|
||||
<div class="movie-list">
|
||||
<div class="movie-card">
|
||||
<img src="resources/movies/gruz.jpeg" alt="Movie Poster">
|
||||
<h3>Груз 200</h3>
|
||||
<p>Режиссер: Алексей Балабанов</p>
|
||||
<p>Жанр: триллер, драма, криминал</p>
|
||||
<p>Год выпуска: 2025</p>
|
||||
<a href="about.html" class="watch-now-btn">Смотреть сейчас</a>
|
||||
</nav>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<main class="container py-5 mt-5">
|
||||
<!-- Секция основных фильмов -->
|
||||
<section class="mb-5">
|
||||
<h2 class="text-orange mb-4">Основные фильмы</h2>
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
|
||||
<div class="col">
|
||||
<div class="card movie-card h-100 bg-dark">
|
||||
<img src="resources/movies/gruz.jpeg" class="card-img-top" alt="Movie Poster">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white"><i class="bi bi-film text-orange me-2"></i>Груз 200</h5>
|
||||
<p class="card-text text-white"><i class="bi bi-person-video3 me-2"></i>Режиссер: Алексей Балабанов</p>
|
||||
<p class="card-text text-light"><i class="bi bi-tags me-2"></i>Жанр: триллер, драма, криминал</p>
|
||||
<p class="card-text text-light"><i class="bi bi-calendar3 me-2"></i>Год выпуска: 2007</p>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0">
|
||||
<a href="about.html" class="btn btn-orange w-100"><i class="bi bi-play-circle me-2"></i>Смотреть сейчас</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Секция предстоящих фильмов -->
|
||||
<section>
|
||||
<h2 class="text-orange mb-4">Предстоящие фильмы</h2>
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
|
||||
<div class="col">
|
||||
<div class="card movie-card h-100 bg-dark">
|
||||
<img src="resources/movies/gruz.jpeg" class="card-img-top" alt="Movie Poster">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white"><i class="bi bi-film text-orange me-2"></i>Груз 200</h5>
|
||||
<p class="card-text text-white"><i class="bi bi-person-video3 me-2"></i>Режиссер: Алексей Балабанов</p>
|
||||
<p class="card-text text-light"><i class="bi bi-tags me-2"></i>Жанр: триллер, драма, криминал</p>
|
||||
<p class="card-text text-light"><i class="bi bi-calendar3 me-2"></i>Год выпуска: 2007</p>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0">
|
||||
<a href="about.html" class="btn btn-orange w-100"><i class="bi bi-play-circle me-2"></i>Смотреть сейчас</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Футер -->
|
||||
<footer class="bg-dark-custom text-light py-4">
|
||||
<div class="container">
|
||||
<div class="row gy-4">
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Контактная информация</h5>
|
||||
<p class="mb-1">Телефон: +7 (123) 456-78-90</p>
|
||||
<p class="mb-1">Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Мы в соцсетях</h5>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#" class="text-light"><i class="bi bi-telegram fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-whatsapp fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-vk fs-4"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Время работы</h5>
|
||||
<p class="mb-1">Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col text-center">
|
||||
<p class="mb-0">© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div class="contact-info">
|
||||
<h3>Контактная информация</h3>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<h3>Мы в соцсетях</h3>
|
||||
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
|
||||
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
|
||||
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
|
||||
</div>
|
||||
<div class="working-hours">
|
||||
<h3>Время работы</h3>
|
||||
<p>Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
165
index.html
165
index.html
@@ -1,76 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Page Title</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Online Cinema Theater</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<div class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
<span>Online Cinema Theater</span>
|
||||
<!-- Навигационная панель с использованием Bootstrap -->
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-custom fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo" width="50" height="50" class="me-2">
|
||||
<span>Online Cinema Theater</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="index.html">Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Рецензии</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Что глянуть?
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown">
|
||||
<li><a class="dropdown-item" href="films.html">Фильмы</a></li>
|
||||
<li><a class="dropdown-item" href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navbar">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
<li class="dropdown">
|
||||
<span>Что глянуть? ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="hero">
|
||||
<h1>Добро пожаловать в Online Cinema Theater</h1>
|
||||
<p>Ваш лучший выбор для просмотра фильмов и сериалов онлайн.</p>
|
||||
</section>
|
||||
<section class="featured-content">
|
||||
<h2>Рекомендуемые фильмы</h2>
|
||||
<div class="movie-list">
|
||||
<!-- Example of integrated content from Lab Work №1 -->
|
||||
<div class="movie-card">
|
||||
<img src="resources/movies/gruz.jpeg" alt="Груз 200">
|
||||
<h3>Груз 200</h3>
|
||||
<p>Режиссер: Алексей Балабанов</p>
|
||||
<p>Жанр: триллер, драма, криминал</p>
|
||||
<p>Год выпуска: 2007</p>
|
||||
<a href="about.html" class="watch-now-btn">Смотреть сейчас</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Основное содержимое -->
|
||||
<main class="container py-5 mt-5">
|
||||
<div id="app">
|
||||
<section class="mb-5">
|
||||
<h2 class="text-orange mb-4">Популярные фильмы</h2>
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
|
||||
<div class="col">
|
||||
<div class="card movie-card h-100 bg-dark">
|
||||
<img src="resources/movies/gruz.jpeg" class="card-img-top" alt="Movie Poster">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white"><i class="bi bi-film text-orange me-2"></i>Груз 200</h5>
|
||||
<p class="card-text text-white"><i class="bi bi-person-video3 me-2"></i>Режиссер: Алексей Балабанов</p>
|
||||
<p class="card-text text-light"><i class="bi bi-tags me-2"></i>Жанр: триллер, драма, криминал</p>
|
||||
<p class="card-text text-light"><i class="bi bi-calendar3 me-2"></i>Год выпуска: 2007</p>
|
||||
</div>
|
||||
<!-- Add more movie cards as needed -->
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div class="contact-info">
|
||||
<h3>Контактная информация</h3>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<h3>Мы в соцсетях</h3>
|
||||
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
|
||||
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
|
||||
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
|
||||
</div>
|
||||
<div class="working-hours">
|
||||
<h3>Время работы</h3>
|
||||
<p>Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
<div class="card-footer bg-transparent border-0">
|
||||
<a href="about.html" class="btn btn-orange w-100"><i class="bi bi-play-circle me-2"></i>Смотреть сейчас</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Здесь можно добавить больше карточек фильмов -->
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<!-- Футер -->
|
||||
<footer class="footer-custom py-4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<h5 class="text-white mb-3">Контактная информация</h5>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<h5 class="text-white mb-3">Мы в соцсетях</h5>
|
||||
<!-- ... existing code ... -->
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#" class="text-light"><i class="bi bi-telegram fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-whatsapp fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-vk fs-4"></i></a>
|
||||
</div>
|
||||
<!-- ... existing code ... -->
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<h5 class="text-white mb-3">Время работы</h5>
|
||||
<p>Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2161
package-lock.json
generated
Normal file
2161
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "pibd-24_boiko_m.s._internetprogramming",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .js",
|
||||
"lint:fix": "eslint . --ext .js --fix",
|
||||
"format": "prettier --write \"**/*.{js,html,css,json}\""
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.is.ulstu.ru/LivelyPuer/PIbd-24_Boiko_M.S._InternetProgramming.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"devDependencies": {
|
||||
"eslint": "^9.22.0",
|
||||
"eslint-config-prettier": "^10.1.1",
|
||||
"eslint-plugin-prettier": "^5.2.3",
|
||||
"prettier": "^3.5.3",
|
||||
"vite": "^6.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.3.2",
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
}
|
||||
3
postcss.config.js
Normal file
3
postcss.config.js
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
plugins: []
|
||||
};
|
||||
177
reviews.html
177
reviews.html
@@ -3,71 +3,124 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Page Title</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Рецензии - Online Cinema Theater</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<div class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
<span>Online Cinema Theater</span>
|
||||
<!-- Навигационная панель -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-custom fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo" width="50" height="50" class="me-2">
|
||||
<span>Online Cinema Theater</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="reviews.html">Рецензии</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
Что глянуть?
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="films.html">Фильмы</a></li>
|
||||
<li><a class="dropdown-item" href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navbar">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
<li class="dropdown">
|
||||
<span>Что глянуть? ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="movie-reviews">
|
||||
<h2>Рецензии на фильмы</h2>
|
||||
<div class="reviews-container">
|
||||
<article class="review-card">
|
||||
<h3>Груз 200</h3>
|
||||
<img src="resources/movies/gruz.jpeg" alt="Movie Poster">
|
||||
<p>
|
||||
Рецензия: Груз 200 - это история о двух братьях, которые вместе с другими людьми отправляются в
|
||||
грузовике на поиски золота в Африке.
|
||||
Однако путь к цели оказывается опасным и сложным, и братья сталкиваются с различными препятствиями, в
|
||||
том числе с коррупцией и жестокостью.
|
||||
</p>
|
||||
</article>
|
||||
<!-- Add more review cards as needed -->
|
||||
</nav>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<main class="container py-5 mt-5">
|
||||
<section class="movie-reviews">
|
||||
<h2 class="text-orange mb-4">Рецензии на фильмы</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<article class="card movie-card mb-4 bg-dark">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="resources/movies/gruz.jpeg" class="img-fluid rounded-start" alt="Movie Poster">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white"><i class="bi bi-film text-orange me-2"></i>Груз 200</h5>
|
||||
<p class="card-text text-white"><i class="bi bi-person-video3 me-2"></i>Режиссер: Алексей Балабанов</p>
|
||||
<p class="card-text text-light"><i class="bi bi-tags me-2"></i>Жанр: триллер, драма, криминал</p>
|
||||
<p class="card-text text-light"><i class="bi bi-calendar3 me-2"></i>Год выпуска: 2007</p>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0">
|
||||
<a href="about.html" class="btn btn-orange w-100"><i class="bi bi-play-circle me-2"></i>Смотреть сейчас</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card bg-dark-custom mb-4">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-orange">Популярные рецензии</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3">
|
||||
<a href="#" class="text-decoration-none text-light">Топ-10 фильмов года</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="#" class="text-decoration-none text-light">Лучшие драмы 2024</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="#" class="text-decoration-none text-light">Новинки месяца</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Футер -->
|
||||
<footer class="bg-dark-custom text-light py-4">
|
||||
<div class="container">
|
||||
<div class="row gy-4">
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Контактная информация</h5>
|
||||
<p class="mb-1">Телефон: +7 (123) 456-78-90</p>
|
||||
<p class="mb-1">Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Мы в соцсетях</h5>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#" class="text-light"><i class="bi bi-telegram fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-whatsapp fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-vk fs-4"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Время работы</h5>
|
||||
<p class="mb-1">Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col text-center">
|
||||
<p class="mb-0">© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div class="contact-info">
|
||||
<h3>Контактная информация</h3>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<h3>Мы в соцсетях</h3>
|
||||
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
|
||||
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
|
||||
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
|
||||
</div>
|
||||
<div class="working-hours">
|
||||
<h3>Время работы</h3>
|
||||
<p>Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
178
seriales.html
178
seriales.html
@@ -3,66 +3,132 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Page Title</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Сериалы - Online Cinema Theater</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<div class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
<span>Online Cinema Theater</span>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navbar">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
<li class="dropdown">
|
||||
<span>Что глянуть? ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="featured-movies">
|
||||
<h2>Оновные сериалы</h2>
|
||||
<div class="movie-list">
|
||||
<div class="movie-card">
|
||||
<img src="resources/series/960.webp" alt="Movie Poster">
|
||||
<h3>Сериал: Преступление и наказание</h3>
|
||||
<p>Год выпуска: 2007</p>
|
||||
<a href="about.html" class="watch-now-btn">Смотреть сейчас</a>
|
||||
<!-- Навигационная панель -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-custom fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo" width="50" height="50" class="me-2">
|
||||
<span>Online Cinema Theater</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Главная</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Рецензии</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown">
|
||||
Что глянуть?
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="films.html">Фильмы</a></li>
|
||||
<li><a class="dropdown-item active" href="seriales.html">Сериалы</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div class="contact-info">
|
||||
<h3>Контактная информация</h3>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</nav>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<main class="container py-5 mt-5">
|
||||
<section class="featured-series">
|
||||
<h2 class="text-orange mb-4">Популярные сериалы</h2>
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
|
||||
<div class="col">
|
||||
<div class="card movie-card h-100 bg-dark">
|
||||
<img src="resources/series/960.webp" class="card-img-top" alt="Series Poster">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Преступление и наказание</h5>
|
||||
<p class="card-text text-white">Сезонов: 1</p>
|
||||
<p class="card-text text-white">Серий: 8</p>
|
||||
<p class="card-text text-light">Год выпуска: 2007</p>
|
||||
<div class="progress mb-3" style="height: 5px;">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 80%"></div>
|
||||
</div>
|
||||
<small class="text-light">Рейтинг: 8.0/10</small>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0">
|
||||
<a href="about.html" class="btn btn-orange w-100">Смотреть сейчас</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-5">
|
||||
<h2 class="text-orange mb-4">Новые серии</h2>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Название</th>
|
||||
<th scope="col">Сезон</th>
|
||||
<th scope="col">Серия</th>
|
||||
<th scope="col">Дата выхода</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Преступление и наказание</td>
|
||||
<td>1</td>
|
||||
<td>8</td>
|
||||
<td>01.04.2024</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Футер -->
|
||||
<footer class="bg-dark-custom text-light py-4">
|
||||
<div class="container">
|
||||
<div class="row gy-4">
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Контактная информация</h5>
|
||||
<p class="mb-1">Телефон: +7 (123) 456-78-90</p>
|
||||
<p class="mb-1">Email: info@cinema.com</p>
|
||||
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Мы в соцсетях</h5>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#" class="text-light"><i class="bi bi-telegram fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-whatsapp fs-4"></i></a>
|
||||
<a href="#" class="text-light"><i class="bi bi-vk fs-4"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Время работы</h5>
|
||||
<p class="mb-1">Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col text-center">
|
||||
<p class="mb-0">© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<h3>Мы в соцсетях</h3>
|
||||
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
|
||||
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
|
||||
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
|
||||
</div>
|
||||
<div class="working-hours">
|
||||
<h3>Время работы</h3>
|
||||
<p>Понедельник - Пятница: 10:00 - 22:00</p>
|
||||
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
125
src/main.js
Normal file
125
src/main.js
Normal file
@@ -0,0 +1,125 @@
|
||||
// Импортируем Bootstrap
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
|
||||
|
||||
// Импортируем собственные стили
|
||||
import '../style.css';
|
||||
|
||||
// Инициализация общего функционала сайта
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('Сайт успешно загружен!');
|
||||
|
||||
// Инициализация выпадающего меню, если оно есть на странице
|
||||
const dropdownElements = document.querySelectorAll('.dropdown');
|
||||
if (dropdownElements.length > 0) {
|
||||
dropdownElements.forEach(dropdown => {
|
||||
dropdown.addEventListener('click', () => {
|
||||
dropdown.querySelector('.features-menu')?.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Добавление обработчиков для фильтров в каталоге
|
||||
const genreSelect = document.getElementById('genre-select');
|
||||
if (genreSelect) {
|
||||
genreSelect.addEventListener('change', () => {
|
||||
// Здесь будет логика фильтрации по жанрам
|
||||
console.log('Выбран жанр:', genreSelect.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
const addMovieForm = document.getElementById('addMovieForm');
|
||||
const movieContainer = document.getElementById('movieContainer');
|
||||
|
||||
if (addMovieForm && movieContainer) {
|
||||
addMovieForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form values
|
||||
const title = document.getElementById('movieTitle').value;
|
||||
const director = document.getElementById('movieDirector').value;
|
||||
const genre = document.getElementById('movieGenre').value;
|
||||
const year = document.getElementById('movieYear').value;
|
||||
const poster = document.getElementById('moviePoster').value;
|
||||
|
||||
// Create movie card
|
||||
const movieCard = createMovieCard(title, director, genre, year, poster);
|
||||
|
||||
// Add card to container
|
||||
const colDiv = document.createElement('div');
|
||||
colDiv.className = 'col';
|
||||
colDiv.appendChild(movieCard);
|
||||
movieContainer.prepend(colDiv);
|
||||
|
||||
// Reset form
|
||||
addMovieForm.reset();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Function to create movie card
|
||||
function createMovieCard(title, director, genre, year, poster) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card movie-card h-100 bg-dark';
|
||||
|
||||
card.innerHTML = `
|
||||
<img src="${poster}" class="card-img-top" alt="${title} Poster">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white"><i class="bi bi-film text-orange me-2"></i>${title}</h5>
|
||||
<p class="card-text text-white"><i class="bi bi-person-video3 me-2"></i>Режиссер: ${director}</p>
|
||||
<p class="card-text text-light"><i class="bi bi-tags me-2"></i>Жанр: ${genre}</p>
|
||||
<p class="card-text text-light"><i class="bi bi-calendar3 me-2"></i>Год выпуска: ${year}</p>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0">
|
||||
<a href="about.html" class="btn btn-orange w-100"><i class="bi bi-play-circle me-2"></i>Смотреть сейчас</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// Handle movie form if it exists
|
||||
const addMovieForm = document.getElementById('addMovieForm');
|
||||
const posterPreview = document.getElementById('posterPreview');
|
||||
const previewContainer = document.querySelector('.preview-container');
|
||||
|
||||
if (addMovieForm) {
|
||||
// Handle poster preview
|
||||
const moviePoster = document.getElementById('moviePoster');
|
||||
moviePoster.addEventListener('change', (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
posterPreview.src = e.target.result;
|
||||
previewContainer.classList.remove('d-none');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle form submission
|
||||
addMovieForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = {
|
||||
title: document.getElementById('movieTitle').value,
|
||||
director: document.getElementById('movieDirector').value,
|
||||
genres: Array.from(document.getElementById('movieGenre').selectedOptions).map(option => option.text),
|
||||
year: document.getElementById('movieYear').value,
|
||||
description: document.getElementById('movieDescription').value,
|
||||
poster: posterPreview.src
|
||||
};
|
||||
|
||||
// Here you can add code to save the movie data
|
||||
console.log('Movie data:', formData);
|
||||
|
||||
// Reset form and preview
|
||||
addMovieForm.reset();
|
||||
previewContainer.classList.add('d-none');
|
||||
|
||||
// Show success message
|
||||
alert('Фильм успешно добавлен!');
|
||||
});
|
||||
}
|
||||
304
style.css
304
style.css
@@ -1,293 +1,53 @@
|
||||
/* Reset default browser styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Минимальные настройки внешнего вида */
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #fff;
|
||||
background-color: #121212;
|
||||
background-color: #121212;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #222222;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
/* Кастомные цвета для элементов */
|
||||
.bg-dark-custom {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.text-orange {
|
||||
color: #ff6600 !important;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.btn-orange {
|
||||
background-color: #ff6600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin-right: 20px;
|
||||
position: relative; /* Required for dropdown positioning */
|
||||
}
|
||||
|
||||
nav ul li a, .dropdown > span {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav ul li a:hover, .dropdown > span:hover {
|
||||
background-color: #ff6600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
font-size: 1.2em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Dropdown Menu Styles */
|
||||
.dropdown .features-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #333;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown .features-menu li {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.dropdown .features-menu li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.dropdown .features-menu li a:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.dropdown:hover .features-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 80px 20px 20px; /* Adjust top padding to account for fixed header */
|
||||
}
|
||||
|
||||
.featured-movies,
|
||||
.upcoming-movies {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.featured-movies h2,
|
||||
.upcoming-movies h2 {
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
.movie-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.btn-orange:hover {
|
||||
background-color: #e55c00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Стили для карточек фильмов */
|
||||
.movie-card {
|
||||
width: 300px;
|
||||
margin-bottom: 40px;
|
||||
background-color: #222222;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
background-color: #222222;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.movie-card img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
.movie-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.movie-card h3 {
|
||||
color: #fff;
|
||||
margin: 10px 0;
|
||||
/* Стили для футера */
|
||||
.footer-custom {
|
||||
background-color: #222222;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.movie-card p {
|
||||
color: #999;
|
||||
margin: 5px 0;
|
||||
/* Стили для социальных иконок */
|
||||
.social-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.movie-card a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #ff6600;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.movie-card a:hover {
|
||||
background-color: #fff;
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 20px;
|
||||
background-color: #222222;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.watch-now-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #ff6600;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.watch-now-btn:hover {
|
||||
background-color: #fff;
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
.header-th {
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* Footer Styles */
|
||||
footer {
|
||||
background-color: #222222;
|
||||
color: #999;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 768px) {
|
||||
.header-container, .footer-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.movie-list {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.movie-card {
|
||||
width: 90%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer-container div {
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
max-width: 40px;
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
.movie-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.watch-now-btn {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer-container div {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.footer-container h3 {
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-container p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.social-media a {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.social-media a img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.social-media a:hover {
|
||||
transform: scale(1.1);
|
||||
.social-icon:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
32
vite.config.js
Normal file
32
vite.config.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import { resolve } from 'path';
|
||||
|
||||
// Получаем список HTML-файлов для мультистраничного приложения
|
||||
const pages = [
|
||||
'index.html',
|
||||
'catalog.html',
|
||||
'films.html',
|
||||
'seriales.html',
|
||||
'reviews.html',
|
||||
'about.html',
|
||||
'add-movie.html' // Add this line
|
||||
];
|
||||
|
||||
// Создаем объект с входными точками для каждой страницы
|
||||
const input = {};
|
||||
pages.forEach(page => {
|
||||
input[page.replace('.html', '')] = resolve(__dirname, page);
|
||||
});
|
||||
|
||||
export default defineConfig({
|
||||
root: './',
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
rollupOptions: {
|
||||
input
|
||||
}
|
||||
},
|
||||
server: {
|
||||
open: '/index.html'
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user