diff --git a/index.html b/index.html index 1c11ed4..be2abc9 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,62 @@
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js index 5a75127..befea3c 100644 --- a/script.js +++ b/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 => `
${movie.title} @@ -1298,7 +1302,7 @@ function renderFavorites() { ${movie.year} ⭐ ${movie.rating}
- +
`).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 ` diff --git a/style.css b/style.css index aea8532..5c974ea 100644 --- a/style.css +++ b/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%), - radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.08) 0%, transparent 40%), - radial-gradient(circle at 50% 100%, rgba(231, 76, 60, 0.05) 0%, transparent 40%); + linear-gradient(180deg, + rgba(5, 5, 7, 0.85) 0%, + 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;