Quanysh/proekt-filmora-movie-night-r
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add movie posters background + fix i18n in render functions

Browse Source
This commit is contained in:
Quanysh 2026-09-03 12:37:41 +00:00
parent 1b74e5793c
commit 83753b1bae
3 changed files with 107 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
index.html
View File

@ -20,6 +20,62 @@
</div> </div>
<div class="app"> <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 -->
<header class="header"> <header class="header">
<div class="logo">FILMORA</div> <div class="logo">FILMORA</div>

11
script.js
View File

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

48
style.css
View File

@ -23,7 +23,7 @@
--transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
} }
/* Background Effects */ /* Background with Movie Posters Collage */
body::before { body::before {
content: ''; content: '';
position: fixed; position: fixed;
@ -32,9 +32,13 @@ body::before {
right: 0; right: 0;
bottom: 0; bottom: 0;
background: 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; pointer-events: none;
z-index: -2; z-index: -2;
} }
@ -46,11 +50,45 @@ body::after {
left: 0; left: 0;
right: 0; right: 0;
height: 50vh; 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; pointer-events: none;
z-index: -2; 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 */
.particles { .particles {
position: fixed; position: fixed;