Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 37d3944ce7 | |||
| 47e6fe7104 |
20
.eslintrc.js
20
.eslintrc.js
@@ -1,20 +0,0 @@
|
||||
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
26
.gitignore
vendored
@@ -1,26 +0,0 @@
|
||||
# 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?
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"semi": true,
|
||||
"tabWidth": 2,
|
||||
"printWidth": 100,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"bracketSpacing": true
|
||||
}
|
||||
189
about.html
189
about.html
@@ -2,135 +2,72 @@
|
||||
<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">
|
||||
<title>О фильме - Груз 200</title>
|
||||
<link rel="stylesheet" href="style.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>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<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 class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="movie-details">
|
||||
<div class="movie-poster">
|
||||
<img src="resources/movies/gruz.jpeg" alt="Movie Poster">
|
||||
</div>
|
||||
</footer>
|
||||
<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>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
141
add-movie.html
141
add-movie.html
@@ -1,141 +0,0 @@
|
||||
<!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" required>
|
||||
<small class="form-text text-muted">Год должен быть между 1900 и текущим годом</small>
|
||||
</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>
|
||||
197
catalog.html
197
catalog.html
@@ -3,164 +3,51 @@
|
||||
<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">
|
||||
<!-- Add CSS for consistent card sizes -->
|
||||
<style>
|
||||
.movie-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.movie-card .card-body {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.movie-card img.card-img-top {
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
<title>Online Cinema Theater - Catalog</title>
|
||||
<link rel="stylesheet" href="style.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 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>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
<!-- Add Movie Button -->
|
||||
<div class="mb-4 d-flex justify-content-end">
|
||||
<a href="add-movie.html" class="btn btn-success add-movie-btn">
|
||||
<i class="bi bi-plus-circle me-2"></i>Добавить фильм
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Movie Container -->
|
||||
<div id="movieContainer" class="row row-cols-1 row-cols-md-3 g-4">
|
||||
<!-- Movies will be loaded from localStorage -->
|
||||
</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 class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer></body>
|
||||
</html>
|
||||
@@ -16,4 +16,4 @@
|
||||
|
||||
Рецензии
|
||||
Назначение:
|
||||
Страница рецензий предоставляет пользователям возможность ознакомиться с профессиональными и пользовательскими отзывами о фильмах и сериалах. Здесь публикуются обзоры, аналитические Что глянуть? и оценки, которые помогут посетителям сделать выбор перед просмотром. Рецензии могут сопровождаться комментариями, рейтингами и ссылками на детальные обзоры, а также предоставлять возможность сортировки по жанрам, дате публикации или популярности обзора.
|
||||
Страница рецензий предоставляет пользователям возможность ознакомиться с профессиональными и пользовательскими отзывами о фильмах и сериалах. Здесь публикуются обзоры, аналитические статьи и оценки, которые помогут посетителям сделать выбор перед просмотром. Рецензии могут сопровождаться комментариями, рейтингами и ссылками на детальные обзоры, а также предоставлять возможность сортировки по жанрам, дате публикации или популярности обзора.
|
||||
166
films.html
166
films.html
@@ -1,136 +1,58 @@
|
||||
|
||||
<!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">
|
||||
<!-- Add CSS for consistent card sizes -->
|
||||
<style>
|
||||
.movie-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.movie-card .card-body {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.movie-card img.card-img-top {
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
<title>Online Cinema Theater</title>
|
||||
<link rel="stylesheet" href="style.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 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>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<main class="container py-5 mt-5">
|
||||
<!-- Секция основных фильмов -->
|
||||
<section class="mb-5">
|
||||
<h2 class="text-orange mb-4">Основные фильмы</h2>
|
||||
|
||||
<!-- Add Movie Button -->
|
||||
<div class="mb-4 d-flex justify-content-end">
|
||||
<a href="add-movie.html" class="btn btn-success add-movie-btn">
|
||||
<i class="bi bi-plus-circle me-2"></i>Добавить фильм
|
||||
</a>
|
||||
<div class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<!-- Movie Container -->
|
||||
<div id="movieContainer" class="row row-cols-1 row-cols-md-3 g-4">
|
||||
<!-- Movies will be loaded from localStorage -->
|
||||
</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>
|
||||
</section>
|
||||
<section class="upcoming-movies">
|
||||
<h2>Предтоящие фильмы</h2>
|
||||
<div class="movie-list">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
160
index.html
160
index.html
@@ -1,124 +1,58 @@
|
||||
<!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">
|
||||
<!-- Add CSS for consistent card sizes -->
|
||||
<style>
|
||||
.movie-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.movie-card .card-body {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.movie-card img.card-img-top {
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Online Cinema Theater</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Навигационная панель с использованием 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>
|
||||
</div>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Основное содержимое -->
|
||||
<main class="container py-5 mt-5">
|
||||
<div id="app">
|
||||
<section class="mb-5">
|
||||
<h2 class="text-orange mb-4">Популярные фильмы</h2>
|
||||
|
||||
<!-- Add Movie Button -->
|
||||
<div class="mb-4 d-flex justify-content-end">
|
||||
<a href="add-movie.html" class="btn btn-success add-movie-btn">
|
||||
<i class="bi bi-plus-circle me-2"></i>Добавить фильм
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Movie Container -->
|
||||
<div id="movieContainer" class="row row-cols-1 row-cols-md-3 g-4">
|
||||
<!-- Movies will be loaded from localStorage -->
|
||||
</div>
|
||||
|
||||
<!-- See All Button -->
|
||||
<div class="col-12 text-center mt-4">
|
||||
<a href="catalog.html" class="btn btn-primary">Смотреть все фильмы</a>
|
||||
</div>
|
||||
</section>
|
||||
<div class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
<section class="upcoming-movies">
|
||||
<h2>Предтоящие фильмы</h2>
|
||||
<div class="movie-list">
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
2161
package-lock.json
generated
2161
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
32
package.json
32
package.json
@@ -1,32 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default {
|
||||
plugins: []
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg width="210mm" height="210mm" version="1.1" viewBox="0 0 210 210" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="13.229"><g fill="#00ff03"><path d="m106.61 110.23s-42.218-47.933-48.752-62.93c-6.534-14.998-4.4796-30.925 7.3807-35.35 11.86-4.4252 29.058 10.284 32.436 29.134 3.3782 18.85 8.9346 69.146 8.9346 69.146z"/><path d="m104.24 108.08s-3.4772-58.275 0-77.208c3.4772-18.933 21.955-27.771 36.631-23.482 14.676 4.2897 26.361 23.591 15.968 42.267-10.394 18.676-52.599 58.422-52.599 58.422z"/><path d="m104.14 106.37s40.123-44.003 58.085-48.769c17.962-4.7668 29.582-2.6383 34.339 9.6808 4.7576 12.319-7.0663 24.257-24.476 31.234-17.41 6.977-67.948 7.8542-67.948 7.8542z"/><path d="m103.95 105.45s64.011-10.41 80.734-0.91329c16.724 9.4971 17.563 19.84 16.256 31.234s-7.5384 23.693-28.129 23.197-68.862-53.518-68.862-53.518z"/><path d="m103.38 103.59s33.695 33.474 41.812 47.95c8.1173 14.476 5.3388 30.4-1.7262 35.866s-18.627 2.975-30.496-11.508c-11.869-14.483-9.59-72.308-9.59-72.308z"/><path d="m104.47 106.23s9.8769 64.267 0.54797 79.273c-9.329 15.006-22.579 21.054-35.001 17.249s-20.905-12.366-19.065-32.592c1.8397-20.226 53.518-63.93 53.518-63.93z"/></g><path d="m103.44 107.4s-35.939 37.331-51.327 40.732c-15.388 3.4011-23.473 2.9458-28.129-4.9317s-5.067-16.321 7.6716-27.216 71.784-8.5849 71.784-8.5849z" fill="#f5091f"/><path d="m102.01 107.02s-49.266 2.8098-69.592 0-24.215-11.647-23.745-23.745c0.46999-12.098 15.745-27.854 33.426-27.033s59.911 50.779 59.911 50.779z" fill="#00ff03"/><circle cx="103.56" cy="104.51" r="22.852" fill="#f8ee3e"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
145
reviews.html
145
reviews.html
@@ -2,125 +2,40 @@
|
||||
<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">
|
||||
<title>Рецензии</title>
|
||||
<link rel="stylesheet" href="style.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 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>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<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>
|
||||
<main>
|
||||
<section class="movie-reviews">
|
||||
<article>
|
||||
<h2>Груз 200</h2>
|
||||
<img src="resources/movies/gruz.jpeg" alt="Movie Poster">
|
||||
<p>
|
||||
Рецензия: Груз 200 - это история о двух братьях, которые вместе с другими людьми отправляются в грузовике на поиски золота в Африке.
|
||||
Однако путь к цели оказывается опасным и сложным, и братья сталкиваются с различными препятствиями, в том числе с коррупцией и жестокостью.
|
||||
</p>
|
||||
</article>
|
||||
</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>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<footer>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
153
seriales.html
153
seriales.html
@@ -3,132 +3,39 @@
|
||||
<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">
|
||||
<title>Online Cinema Theater</title>
|
||||
<link rel="stylesheet" href="style.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 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>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="films.html">Фильмы</a></li>
|
||||
<li><a href="seriales.html">Сериалы</a></li>
|
||||
<li><a href="reviews.html">Рецензии</a></li>
|
||||
</ul>
|
||||
</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 class="logo">
|
||||
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2022 Online Cinema Theater. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
217
src/main.js
217
src/main.js
@@ -1,217 +0,0 @@
|
||||
// Импортируем 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');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Set max year to current year for the year input
|
||||
const movieYearInput = document.getElementById('movieYear');
|
||||
if (movieYearInput) {
|
||||
const currentYear = new Date().getFullYear();
|
||||
// Only set the min attribute, validation will happen on form submission
|
||||
movieYearInput.min = 1900;
|
||||
}
|
||||
|
||||
// Добавление обработчиков для фильтров в каталоге
|
||||
const genreSelect = document.getElementById('genre-select');
|
||||
if (genreSelect) {
|
||||
genreSelect.addEventListener('change', () => {
|
||||
// Здесь будет логика фильтрации по жанрам
|
||||
console.log('Выбран жанр:', genreSelect.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Load movies from localStorage and display them
|
||||
const movieContainer = document.getElementById('movieContainer');
|
||||
if (movieContainer) {
|
||||
loadMoviesFromStorage();
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
const addMovieForm = document.getElementById('addMovieForm');
|
||||
if (addMovieForm) {
|
||||
// Handle poster preview
|
||||
const moviePoster = document.getElementById('moviePoster');
|
||||
const posterPreview = document.getElementById('posterPreview');
|
||||
const previewContainer = document.querySelector('.preview-container');
|
||||
|
||||
if (moviePoster && posterPreview && previewContainer) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addMovieForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form values
|
||||
const title = document.getElementById('movieTitle').value;
|
||||
const director = document.getElementById('movieDirector').value;
|
||||
const year = parseInt(document.getElementById('movieYear').value);
|
||||
const currentYear = new Date().getFullYear();
|
||||
let errorText = ""
|
||||
// Validate year only on form submission
|
||||
if (year > currentYear) {
|
||||
errorText += `Год выпуска не может быть больше текущего (${currentYear})\n`;
|
||||
}
|
||||
|
||||
if (year < 1900) {
|
||||
errorText += "Год выпуска не может быть меньше 1900\n";
|
||||
}
|
||||
|
||||
// Check if movie already exists
|
||||
if (movieExists(title, director)) {
|
||||
errorText += "Фильм с таким названием и режиссером уже существует!\n";
|
||||
}
|
||||
if (errorText) {
|
||||
alert(errorText)
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
id: Date.now().toString(), // Generate unique ID based on timestamp
|
||||
title: title,
|
||||
director: director,
|
||||
genres: Array.from(document.getElementById('movieGenre').selectedOptions).map(option => option.text),
|
||||
year: year,
|
||||
description: document.getElementById('movieDescription').value,
|
||||
poster: posterPreview?.src || 'resources/movies/placeholder.jpg'
|
||||
};
|
||||
|
||||
// Save to localStorage
|
||||
if (saveMovieToStorage(formData)) {
|
||||
// Reset form and preview
|
||||
addMovieForm.reset();
|
||||
if (previewContainer) {
|
||||
previewContainer.classList.add('d-none');
|
||||
}
|
||||
|
||||
// Show success message
|
||||
alert('Фильм успешно добавлен!');
|
||||
|
||||
// Redirect to catalog page if we're on the add-movie page
|
||||
if (window.location.pathname.includes('add-movie.html')) {
|
||||
window.location.href = 'catalog.html';
|
||||
} else if (movieContainer) {
|
||||
// If we're already on a page with the movie container, add the new card
|
||||
addMovieCard(formData, movieContainer);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Function to create movie card
|
||||
function createMovieCard(movie) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card movie-card h-100 bg-dark';
|
||||
card.dataset.movieId = movie.id;
|
||||
|
||||
card.innerHTML = `
|
||||
<img src="${movie.poster}" class="card-img-top" alt="${movie.title} Poster">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white"><i class="bi bi-film text-orange me-2"></i>${movie.title}</h5>
|
||||
<p class="card-text text-white"><i class="bi bi-person-video3 me-2"></i>Режиссер: ${movie.director}</p>
|
||||
<p class="card-text text-light"><i class="bi bi-tags me-2"></i>Жанр: ${Array.isArray(movie.genres) ? movie.genres.join(', ') : movie.genres}</p>
|
||||
<p class="card-text text-light"><i class="bi bi-calendar3 me-2"></i>Год выпуска: ${movie.year}</p>
|
||||
${movie.description ? `<p class="card-text text-light"><i class="bi bi-text-paragraph me-2"></i>Описание: ${movie.description}</p>` : ''}
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0 d-flex justify-content-between">
|
||||
<a href="about.html" class="btn btn-orange"><i class="bi bi-play-circle me-2"></i>Смотреть</a>
|
||||
<button class="btn btn-danger delete-movie"><i class="bi bi-trash"></i> Удалить</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add event listener for delete button
|
||||
const deleteButton = card.querySelector('.delete-movie');
|
||||
if (deleteButton) {
|
||||
deleteButton.addEventListener('click', () => {
|
||||
if (confirm('Вы уверены, что хотите удалить этот фильм?')) {
|
||||
deleteMovieFromStorage(movie.id);
|
||||
card.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// Function to add a movie card to the container
|
||||
function addMovieCard(movie, container) {
|
||||
const colDiv = document.createElement('div');
|
||||
colDiv.className = 'col';
|
||||
const movieCard = createMovieCard(movie);
|
||||
colDiv.appendChild(movieCard);
|
||||
container.prepend(colDiv);
|
||||
}
|
||||
|
||||
// Function to check if a movie already exists in localStorage
|
||||
function movieExists(title, director) {
|
||||
const movies = JSON.parse(localStorage.getItem('movies')) || [];
|
||||
return movies.some(movie =>
|
||||
movie.title.toLowerCase() === title.toLowerCase() &&
|
||||
movie.director.toLowerCase() === director.toLowerCase()
|
||||
);
|
||||
}
|
||||
|
||||
// Function to save movie to localStorage
|
||||
function saveMovieToStorage(movie) {
|
||||
// Get existing movies from localStorage
|
||||
const movies = JSON.parse(localStorage.getItem('movies')) || [];
|
||||
|
||||
// Add new movie
|
||||
movies.push(movie);
|
||||
|
||||
// Save back to localStorage
|
||||
localStorage.setItem('movies', JSON.stringify(movies));
|
||||
return true;
|
||||
}
|
||||
|
||||
// Function to delete movie from localStorage
|
||||
function deleteMovieFromStorage(movieId) {
|
||||
// Get existing movies from localStorage
|
||||
let movies = JSON.parse(localStorage.getItem('movies')) || [];
|
||||
|
||||
// Filter out the movie to delete
|
||||
movies = movies.filter(movie => movie.id !== movieId);
|
||||
|
||||
// Save back to localStorage
|
||||
localStorage.setItem('movies', JSON.stringify(movies));
|
||||
}
|
||||
|
||||
// Function to load movies from localStorage and display them
|
||||
function loadMoviesFromStorage() {
|
||||
const movieContainer = document.getElementById('movieContainer');
|
||||
if (!movieContainer) return;
|
||||
|
||||
// Get movies from localStorage
|
||||
const movies = JSON.parse(localStorage.getItem('movies')) || [];
|
||||
|
||||
// Display each movie
|
||||
movies.forEach(movie => {
|
||||
addMovieCard(movie, movieContainer);
|
||||
});
|
||||
}
|
||||
153
style.css
153
style.css
@@ -1,53 +1,140 @@
|
||||
/* Минимальные настройки внешнего вида */
|
||||
/* Reset default browser styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: #fff;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #fff;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
/* Кастомные цвета для элементов */
|
||||
.bg-dark-custom {
|
||||
background-color: #222222;
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: #ff6600 !important;
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-orange {
|
||||
background-color: #ff6600;
|
||||
color: #fff;
|
||||
nav ul li {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.btn-orange:hover {
|
||||
background-color: #e55c00;
|
||||
color: #fff;
|
||||
nav ul li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Стили для карточек фильмов */
|
||||
.movie-card {
|
||||
background-color: #222222;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease;
|
||||
width: 300px;
|
||||
margin-bottom: 40px;
|
||||
background-color: #222222;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.movie-card:hover {
|
||||
transform: translateY(-5px);
|
||||
.movie-card img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Стили для футера */
|
||||
.footer-custom {
|
||||
background-color: #222222;
|
||||
color: #999;
|
||||
.movie-card h3 {
|
||||
color: #fff;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* Стили для социальных иконок */
|
||||
.social-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: transform 0.3s ease;
|
||||
.movie-card p {
|
||||
color: #999;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.social-icon:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
<!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">
|
||||
</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="content">
|
||||
<!-- Main content goes here -->
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,32 +0,0 @@
|
||||
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'
|
||||
}
|
||||
});
|
||||
BIN
Отчет.docx
BIN
Отчет.docx
Binary file not shown.
Reference in New Issue
Block a user