Add movie posters background + fix i18n in render functions

index.html

@@ -20,6 +20,62 @@
   </div>
   
   <div class="app">
+    <!-- Movie Posters Background -->
+    <div class="movie-bg">
+      <div class="movie-bg-grid">
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/3bhkrj58Vtu7enYsRolD1fZdja1.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/qJ2tW6WMUDux911r6m7haRef0WH.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/9gk7adHYeDvHkCSEqAvQNLV5Uge.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/gEU2QniL6E8AHtMYfHM159D5xh.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/d5iIlFn5s0ImszYzBPb8JPIfbXD.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/pB8BM7pdSp6B6Ih7QZ4DrQ3PmJK.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/arw2vcBveWOVZr6pxd9XTd1TdQa.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/f89U3ADr1oiB1s9GkdPOEpXUk5H.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/bX2xnavhMYjWDoZp1VM6VnU1xwe.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/rCzpDGLbOoPwLjy3OAm5NUPOTrC.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/2l05cFWJacyIsTpsqSgH0wQXe4V.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/onTSipZ8R3amIkoc8xWrLXl5hV.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/39wmItIWsg5sZMyRUKGnDbALpd1.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/b6ko0IKC8MdYBBPkkA1aBPLe2yz.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/vfrQk5IPloGg1v9Rzbh2Eg3VGyM.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/9xjZS2rlVxm8SFx8kPC3aIGCOYQ.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/gCgt1WARPZaXnq5zeJRYrWwFZ2.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/7IiTTgloJzvGI1TAYymCfbfl3vT.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/udDclJoHjfjb8EkGsdr7ZKRN44.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/or06FN3Dka5tukK1e9sl16pB3iy.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/uDO8zWDhfWu7x6O0k0006Oe2M7.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/d5NXSklXo0qyIYkgV94XAgMIckC.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/wuMc08IPKEatf9rnMNXvIDxqP4W.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/5M0j0B18abtBI5gi2RhfjjurTqb.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/fNOH9f9aA7XRTzl1sAd7k1i0qHc.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/uS9m8OBk1A8eM9I042bx8XXpqAq.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/uqx37cS8cpHg8U35f9U5IBlrCV3.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/velWPhVMQeQKcxggNEU8YmIo51R.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/ty8TGRuvJLPUmAR1H1nRIsgwvim.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/sKCr78MXSLixwmZ8DyJLrpMsd15.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/5MwkWH9tYHv3m89PXxNulFo7Xug.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/nT97ifVT2J1yMQmeq20Qblg61T.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/tRNlZbgNCNOpLpbPEz5L8G8A0JN.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/mFvoEwSfLqbr3N7xzWF8vB5lSj.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/gGEsBPAijhVUFoiNpgZXqRVWJt2.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/7oWY8VDWW7thTzWh3OKYRkWUlD5.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/hBnYqza876OMhRJRXxkFz4jjZPt.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/74hLDKjD5aGYOotO6esUVaeISa2.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/9TGHDvWrqKBzwDxDodHYXEmOE5J.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/6EiRUJpuoeQPghrs3YNktfnqOVh.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/q719jXXEzOoYaps6babgKnONONX.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/323BP0QQpxYZxhI7nwmANpLHR0u.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/8Vt7mXHRo6bEj8nT5sD7bL8pF0.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/pZRhqJj0DBy4ghB7g6pG7MG9xW.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/d4ftZu4dWypDlVE5p3V0p3e3i4.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/k7eYdWvhYQyDYR1p5MjZnJ4n2.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/sF1U4EUQS8YHUYjNl3pTXMYC4mV.jpg');"></div>
+        <div class="movie-bg-item" style="background-image: url('https://image.tmdb.org/t/p/w200/z8onk7LV9Mmw6zKz4hT6pzzvmvl.jpg');"></div>
+      </div>
+    </div>
+    
     <!-- Header -->
     <header class="header">
       <div class="logo">FILMORA</div>

script.js

@@ -57,6 +57,7 @@ const TRANSLATIONS = {
     historyEmpty: "История пуста",
     noHistory: "Ты ещё не смотрел фильмы через FILMORA",
     clearHistory: "Очистить историю",
+    removeFavorite: "Удалить из избранного",
     whereToWatch: "Где смотреть",
     streamingAvailable: "Доступно на платформах"
   },
@@ -117,6 +118,7 @@ const TRANSLATIONS = {
     historyEmpty: "History is empty",
     noHistory: "You haven't watched any movies through FILMORA yet",
     clearHistory: "Clear history",
+    removeFavorite: "Remove from favorites",
     whereToWatch: "Where to watch",
     streamingAvailable: "Available on"
   },
@@ -177,6 +179,7 @@ const TRANSLATIONS = {
     historyEmpty: "Тарих бос",
     noHistory: "FILMORA арқылы әлі фильм көрмедің",
     clearHistory: "Тарихты тазалау",
+    removeFavorite: "Таңдаулыдан жою",
     whereToWatch: "Қайда көруге",
     streamingAvailable: "Платформаларда қолжетімді"
   }
@@ -1289,6 +1292,7 @@ function renderFavorites() {
   }
   
   empty.style.display = 'none';
+  const t = TRANSLATIONS[currentLang];
   grid.innerHTML = favorites.map(movie => `
     <div class="movie-item" data-id="${movie.id}">
       <img src="${movie.poster}" alt="${movie.title}" class="movie-item-poster">
@@ -1298,7 +1302,7 @@ function renderFavorites() {
           <span>${movie.year}</span>
           <span class="movie-item-rating">⭐ ${movie.rating}</span>
         </div>
-        <button class="remove-btn" data-id="${movie.id}">Удалить из избранного</button>
+        <button class="remove-btn" data-id="${movie.id}">${t.removeFavorite || 'Удалить'}</button>
       </div>
     </div>
   `).join('');
@@ -1343,10 +1347,11 @@ function renderHistory() {
   
   empty.style.display = 'none';
   clearBtn.style.display = 'block';
+  const t = TRANSLATIONS[currentLang];
   grid.innerHTML = history.map((movie, index) => {
-    const date = new Date(movie.date).toLocaleDateString('ru-RU', {
+    const date = new Date(movie.date).toLocaleDateString(currentLang === 'kk' ? 'kk-KZ' : currentLang === 'en' ? 'en-US' : 'ru-RU', {
       day: 'numeric',
-      month: 'long',
+      month: 'short',
       year: 'numeric'
     });
     return `

style.css

@@ -23,7 +23,7 @@
   --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Background Effects */
+/* Background with Movie Posters Collage */
 body::before {
   content: '';
   position: fixed;
@@ -32,9 +32,13 @@ body::before {
   right: 0;
   bottom: 0;
   background: 
-    radial-gradient(circle at 20% 30%, rgba(245, 166, 35, 0.06) 0%, transparent 40%),
+    linear-gradient(180deg, 
-    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.08) 0%, transparent 40%),
+      rgba(5, 5, 7, 0.85) 0%, 
-    radial-gradient(circle at 50% 100%, rgba(231, 76, 60, 0.05) 0%, transparent 40%);
+      rgba(5, 5, 7, 0.92) 40%, 
+      rgba(5, 5, 7, 0.95) 100%
+    ),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='600' viewBox='0 0 400 600'%3E%3Crect fill='%231a1a2e' width='400' height='600'/%3E%3Crect fill='%23f5a623' opacity='0.03' x='50' y='50' width='100' height='150'/%3E%3Crect fill='%238b5cf6' opacity='0.03' x='200' y='100' width='120' height='180'/%3E%3Crect fill='%23e74c3c' opacity='0.03' x='80' y='250' width='110' height='165'/%3E%3Crect fill='%23f5a623' opacity='0.03' x='250' y='320' width='100' height='150'/%3E%3Crect fill='%238b5cf6' opacity='0.03' x='30' y='420' width='130' height='195'/%3E%3C/svg%3E");
+  background-size: cover;
   pointer-events: none;
   z-index: -2;
 }
@@ -46,11 +50,45 @@ body::after {
   left: 0;
   right: 0;
   height: 50vh;
-  background: radial-gradient(ellipse at 50% 0%, rgba(245, 166, 35, 0.08) 0%, transparent 60%);
+  background: radial-gradient(ellipse at 50% 0%, rgba(245, 166, 35, 0.1) 0%, transparent 60%);
   pointer-events: none;
   z-index: -2;
 }
 
+/* Movie Posters Background Grid */
+.movie-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -3;
+  opacity: 0.08;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.movie-bg-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(8, 1fr);
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+}
+
+.movie-bg-item {
+  background-size: cover;
+  background-position: center;
+  border-radius: 4px;
+  transition: opacity 0.5s ease;
+}
+
+.movie-bg-item:hover {
+  opacity: 0.15;
+}
+
 /* Particles */
 .particles {
   position: fixed;