nerd

отчет
lab3
2025-05-27 20:42:01 +04:00 · 2025-05-26 13:01:09 +04:00 · 2025-03-22 11:01:45 +04:00
7 changed files with 242 additions and 117 deletions
--- a/add-movie.html
+++ b/add-movie.html
@@ -77,7 +77,8 @@
                            <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>
+                            <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">
--- a/catalog.html
+++ b/catalog.html
@@ -5,6 +5,21 @@
    <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>
 </head>
 <body>
    <!-- Навигационная панель -->
@@ -85,23 +100,16 @@
                </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>
-                <!-- Здесь можно добавить больше карточек фильмов -->
+            <!-- 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>

            <!-- Пагинация -->
--- a/films.html
+++ b/films.html
@@ -6,6 +6,21 @@
    <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>
 </head>
 <body>
    <!-- Навигационная панель -->
@@ -48,21 +63,17 @@
        <!-- Секция основных фильмов -->
        <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>
+            
+            <!-- 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>
        </section>

--- a/index.html
+++ b/index.html
@@ -5,6 +5,21 @@
  <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>
 </head>
 <body>
  <!-- Навигационная панель с использованием Bootstrap -->
@@ -51,22 +66,22 @@
    <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>
-            <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>
-          <!-- Здесь можно добавить больше карточек фильмов -->
+        
+        <!-- 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>
@@ -84,13 +99,11 @@
        </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>
        <div class="col-md-4 mb-3">
          <h5 class="text-white mb-3">Время работы</h5>
--- a/src/main.js
+++ b/src/main.js
@@ -19,6 +19,14 @@ document.addEventListener('DOMContentLoaded', () => {
    });
  }
  
+  // 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) {
@@ -28,98 +36,182 @@ document.addEventListener('DOMContentLoaded', () => {
    });
  }
  
+  // Load movies from localStorage and display them
+  const movieContainer = document.getElementById('movieContainer');
+  if (movieContainer) {
+    loadMoviesFromStorage();
+  }
+  
  // Form submission handler
  const addMovieForm = document.getElementById('addMovieForm');
-  const movieContainer = document.getElementById('movieContainer');
-
-  if (addMovieForm && movieContainer) {
+  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 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);
+      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`;
+      }
      
-      // Add card to container
-      const colDiv = document.createElement('div');
-      colDiv.className = 'col';
-      colDiv.appendChild(movieCard);
-      movieContainer.prepend(colDiv);
-
-      // Reset form
-      addMovieForm.reset();
+      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(title, director, genre, year, poster) {
+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="${poster}" class="card-img-top" alt="${title} Poster">
+    <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>${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>
+      <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">
-      <a href="about.html" class="btn btn-orange w-100"><i class="bi bi-play-circle me-2"></i>Смотреть сейчас</a>
+    <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;
 }

-// Handle movie form if it exists
-const addMovieForm = document.getElementById('addMovieForm');
-const posterPreview = document.getElementById('posterPreview');
-const previewContainer = document.querySelector('.preview-container');
+// 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);
+}

-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);
-        }
-    });
+// 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()
+  );
+}

-    // Handle form submission
-    addMovieForm.addEventListener('submit', (e) => {
-        e.preventDefault();
+// 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;
+}

-        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
-        };
+// 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));
+}

-        // 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('Фильм успешно добавлен!');
-    });
+// 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);
+  });
 }
--- a/~$Отчет.docx
+++ b/~$Отчет.docx
--- a/Отчет.docx
+++ b/Отчет.docx
Author	SHA1	Message	Date
LivelyPuer	6e2fd85324	nerd	2025-05-27 20:42:01 +04:00
LivelyPuer	d723610f63	отчет	2025-05-26 13:01:09 +04:00
LivelyPuer	ecca78f2e6	lab3	2025-03-22 11:01:45 +04:00