Skip to content

Commit a6caf1e

Browse files
authored
Merge pull request #229 from hoangsonww/main-deployment-branch
Enhanced UI/UX
2 parents 7e1a807 + fa9cc9a commit a6caf1e

File tree

118 files changed

+513
-1448
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

118 files changed

+513
-1448
lines changed

.idea/codeStyles/codeStyleConfig.xml

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

MovieVerse-Frontend/css/style.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -1214,7 +1214,7 @@ header h1 {
12141214
.movie-header {
12151215
text-align: center;
12161216
align-self: center;
1217-
font-size: 2.5rem;
1217+
font-size: 2.2rem;
12181218
font-weight: bold;
12191219
color: #ffeb3b;
12201220
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
@@ -1223,7 +1223,7 @@ header h1 {
12231223
.actor-header {
12241224
text-align: center;
12251225
align-self: center;
1226-
font-size: 2.5rem;
1226+
font-size: 2.2rem;
12271227
font-weight: bold;
12281228
color: #ffeb3b;
12291229
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
@@ -1248,7 +1248,7 @@ header h1 {
12481248
.director-header {
12491249
text-align: center;
12501250
align-self: center;
1251-
font-size: 2.5rem;
1251+
font-size: 2.2rem;
12521252
font-weight: bold;
12531253
color: #ffeb3b;
12541254
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
@@ -3707,7 +3707,7 @@ body {
37073707
.company-header {
37083708
text-align: center;
37093709
align-self: center;
3710-
font-size: 2.5rem;
3710+
font-size: 2.2rem;
37113711
font-weight: bold;
37123712
color: #ffeb3b;
37133713
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

MovieVerse-Frontend/html/about.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
279279
</nav>
280280
<main id="main2" style="margin: 0 auto">
281281
<h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
282-
<p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
282+
<p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for nearly <strong>one million</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
283283
<div style="width: 100%">
284284
<img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
285285
</div>

MovieVerse-Frontend/html/actor-details.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -465,7 +465,7 @@ <h2 id="actor-name" class="actor-header"></h2>
465465
document.getElementById('actor-image').addEventListener('click', function() {
466466
const imageUrl = this.src.replace('w1280', 'original')
467467
const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
468-
<img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;">
468+
<img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;">
469469
<span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
470470
</div>`;
471471
document.body.insertAdjacentHTML('beforeend', modalHtml);

MovieVerse-Frontend/html/analytics.html

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<!DOCTYPE html>
22
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
3-
43
<head>
54
<meta charset="UTF-8">
65
<title>Database Analytics - The MovieVerse</title>

MovieVerse-Frontend/html/movie-details.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -883,7 +883,7 @@ <h2 id="movie-rating" class="movie-rating"></h2>
883883
document.getElementById('movie-image').addEventListener('click', function() {
884884
let imageUrl = this.src.replace('w780', 'original');
885885
const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
886-
<img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;" alt="Movie Image" />
886+
<img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;" alt="Movie Image" />
887887
<span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
888888
</div>`;
889889
document.body.insertAdjacentHTML('beforeend', modalHtml);

MovieVerse-Frontend/html/tv-details.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -783,7 +783,7 @@ <h2 id="movie-rating" class="movie-rating"></h2>
783783
document.getElementById('movie-image').addEventListener('click', function() {
784784
let imageUrl = this.src.replace('w780', 'w1280');
785785
const modalHtml = `<div id="image-modal" style="z-index: 10000002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
786-
<img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="TV Series Poster" />
786+
<img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;" alt="TV Series Poster" />
787787
<span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
788788
</div>`;
789789
document.body.insertAdjacentHTML('beforeend', modalHtml);

MovieVerse-Frontend/js/actor-details.js

+5-32
Original file line numberDiff line numberDiff line change
@@ -58,35 +58,6 @@ function handleSearch() {
5858
window.location.href = 'search.html';
5959
}
6060

61-
function calculateMoviesToDisplay() {
62-
const screenWidth = window.innerWidth;
63-
if (screenWidth <= 689.9) return 10;
64-
if (screenWidth <= 1021.24) return 20;
65-
if (screenWidth <= 1353.74) return 21;
66-
if (screenWidth <= 1684.9) return 20;
67-
if (screenWidth <= 2017.49) return 20;
68-
if (screenWidth <= 2349.99) return 18;
69-
if (screenWidth <= 2681.99) return 21;
70-
if (screenWidth <= 3014.49) return 24;
71-
if (screenWidth <= 3345.99) return 27;
72-
if (screenWidth <= 3677.99) return 20;
73-
if (screenWidth <= 4009.99) return 22;
74-
if (screenWidth <= 4340.99) return 24;
75-
if (screenWidth <= 4673.49) return 26;
76-
if (screenWidth <= 5005.99) return 28;
77-
if (screenWidth <= 5337.99) return 30;
78-
if (screenWidth <= 5669.99) return 32;
79-
if (screenWidth <= 6001.99) return 34;
80-
if (screenWidth <= 6333.99) return 36;
81-
if (screenWidth <= 6665.99) return 38;
82-
if (screenWidth <= 6997.99) return 40;
83-
if (screenWidth <= 7329.99) return 42;
84-
if (screenWidth <= 7661.99) return 44;
85-
if (screenWidth <= 7993.99) return 46;
86-
if (screenWidth <= 8325.99) return 48;
87-
return 20;
88-
}
89-
9061
let initialMainContent = '';
9162

9263
document.addEventListener('DOMContentLoaded', () => {
@@ -106,6 +77,7 @@ async function fetchActorDetails(actorId) {
10677
showSpinner();
10778
const actorUrl = `https://${getMovieVerseData()}/3/person/${actorId}?${generateMovieNames()}${getMovieCode()}`;
10879
const creditsUrl = `https://${getMovieVerseData()}/3/person/${actorId}/movie_credits?${generateMovieNames()}${getMovieCode()}`;
80+
10981
try {
11082
const [actorResponse, creditsResponse] = await Promise.all([
11183
fetch(actorUrl),
@@ -216,7 +188,8 @@ async function populateActorDetails(actor, credits) {
216188
if (movie.poster_path) {
217189
movieImage.src = IMGPATH2 + movie.poster_path;
218190
movieImage.alt = `${movie.title} Poster`;
219-
} else {
191+
}
192+
else {
220193
movieImage.alt = 'Image Not Available';
221194
movieImage.src = 'https://movie-verse.com/images/movie-default.jpg';
222195
movieImage.style.filter = 'grayscale(100%)';
@@ -248,7 +221,6 @@ async function populateActorDetails(actor, credits) {
248221
const mediaResponse = await fetch(mediaUrl);
249222
const mediaData = await mediaResponse.json();
250223
const images = mediaData.profiles;
251-
252224
const detailsContainer = document.getElementById('actor-description');
253225

254226
let mediaContainer = document.getElementById('media-container');
@@ -321,7 +293,6 @@ async function populateActorDetails(actor, credits) {
321293

322294
imageElement.addEventListener('click', function () {
323295
const imageUrl = this.src;
324-
325296
const modalHtml = `
326297
<div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
327298
<button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
@@ -450,6 +421,8 @@ async function populateActorDetails(actor, credits) {
450421
navigateMedia(images, imageElement, index - currentIndex);
451422
updateDots(index);
452423
});
424+
dot.addEventListener('mouseover', () => dot.style.backgroundColor = '#6a6a6a');
425+
dot.addEventListener('mouseout', () => dot.style.backgroundColor = index === currentIndex ? '#ff8623' : '#bbb');
453426

454427
currentLine.appendChild(dot);
455428

MovieVerse-Frontend/js/add-to-favorites.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ export async function checkAndUpdateFavoriteButton() {
8383
console.log('Firebase quota exceeded. Checking local storage for favorites.');
8484
const localFavorites = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
8585
updateFavoriteButton(movieId, localFavorites);
86-
} else {
86+
}
87+
else {
8788
console.error('An error occurred:', error);
8889
}
8990
}
@@ -198,8 +199,8 @@ export async function toggleFavorite() {
198199
}
199200

200201
updateMoviesFavorited(movieId);
201-
202-
} catch (error) {
202+
}
203+
catch (error) {
203204
if (error.code === 'resource-exhausted') {
204205
console.log('Firebase quota exceeded. Using localStorage for favorites.');
205206
let favoritesMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
@@ -231,7 +232,6 @@ export async function toggleFavorite() {
231232

232233
updateMoviesFavorited(movieId);
233234
}
234-
235235
window.location.reload();
236236
}
237237

MovieVerse-Frontend/js/add-to-tv-favorites.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,8 @@ export async function checkAndUpdateFavoriteButtonTVSeries() {
136136
const userData = querySnapshot.docs[0].data();
137137
favoritesTVSeries = userData.favoritesTVSeries || [];
138138
}
139-
} else {
139+
}
140+
else {
140141
favoritesTVSeries = JSON.parse(localStorage.getItem('favoritesTVSeries')) || [];
141142
}
142143

MovieVerse-Frontend/js/analytics.js

+2
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,7 @@ async function loadHighlyRatedMoviesOverYearsChart() {
411411
}
412412

413413
function loadAllCharts() {
414+
showSpinner();
414415
loadMoviesByYearChart();
415416
loadGenrePopularityChart();
416417
loadMoviesByCertificationChart();
@@ -423,6 +424,7 @@ function loadAllCharts() {
423424
loadTopRatedMoviesPerYearChart();
424425
loadTotalMovieVotesOverYearsChart();
425426
loadHighlyRatedMoviesOverYearsChart();
427+
hideSpinner();
426428
}
427429

428430
document.addEventListener('DOMContentLoaded', loadAllCharts);

MovieVerse-Frontend/js/chatbot.js

+2-67
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
22

3-
const chatbotInput = document.getElementById("chatbotInput");
43
const chatbotBody = document.getElementById("chatbotBody");
54
const movieee = `https://${getMovieVerseData()}/3`;
65

@@ -31,13 +30,8 @@ document.addEventListener('DOMContentLoaded', function() {
3130
document.getElementById('clear-search-btn').style.display = 'none';
3231
});
3332

34-
const search = document.getElementById("search");
35-
const searchButton = document.getElementById("button-search");
3633
const searchTitle = document.getElementById("search-title");
37-
const otherTitle = document.getElementById("other1");
3834
const SEARCHPATH = `https://${getMovieVerseData()}/3/search/movie?&${generateMovieNames()}${getMovieCode()}&query=`;
39-
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
40-
const main = document.getElementById("main");
4135

4236
async function ensureGenreMapIsAvailable() {
4337
if (!localStorage.getItem('genreMap')) {
@@ -171,24 +165,6 @@ async function rotateUserStats() {
171165
});
172166
}
173167

174-
function updateMovieVisitCount(movieId, movieTitle) {
175-
let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
176-
let uniqueMoviesViewed = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
177-
178-
if (!movieVisits[movieId]) {
179-
movieVisits[movieId] = { count: 0, title: movieTitle };
180-
}
181-
182-
movieVisits[movieId].count += 1;
183-
184-
if (!uniqueMoviesViewed.includes(movieId)) {
185-
uniqueMoviesViewed.push(movieId);
186-
}
187-
188-
localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
189-
localStorage.setItem('uniqueMoviesViewed', JSON.stringify(uniqueMoviesViewed));
190-
}
191-
192168
function getMostVisitedDirector() {
193169
const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
194170
let mostVisitedDirector = '';
@@ -304,9 +280,9 @@ function sendInitialInstructions() {
304280
</span>
305281
</div>
306282
<ul style="text-align: left; margin-bottom: 10px; color: #fff;">
307-
<li>To find details about a movie, type "Show me details about [movie name]".</li>
283+
<li>To quickly find the trailer of a movie, type "Show trailer for [movie name]".</li>
308284
<li>You can also ask about genres, top-rated movies, latest movies, get a recommended movie, and any general questions!</li>
309-
<li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like "Show me details about ...", as they might trigger specific functions instead of a broader search.</li>
285+
<li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like "Show trailer for ...", as they might trigger specific functions instead of a broader search.</li>
310286
</ul>
311287
<div style="text-align: left; color: #fff;">How may I assist you today? 🎬🍿</div>
312288
`;
@@ -476,47 +452,6 @@ function hideSpinner() {
476452
document.getElementById('myModal').classList.remove('modal-visible');
477453
}
478454

479-
async function fetchMovieDetailsFromTMDB(movieName) {
480-
const url = `${movieee}/search/movie?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(movieName)}`;
481-
482-
try {
483-
const response = await fetch(url);
484-
const data = await response.json();
485-
486-
if (data.results.length > 0) {
487-
const movie = data.results[0];
488-
localStorage.setItem('selectedMovieId', movie.id);
489-
490-
let movieOverview = movie.overview;
491-
if (movieOverview.length > 500) {
492-
movieOverview = movieOverview.substring(0, 500) + '...';
493-
}
494-
if (movieOverview === '' || movieOverview === null || !movieOverview) {
495-
movieOverview = 'N/A';
496-
}
497-
498-
let movieReleaseDate = movie.release_date;
499-
if (movieReleaseDate === '' || movieReleaseDate === null || !movieReleaseDate) {
500-
movieReleaseDate = 'N/A';
501-
}
502-
503-
let movieVoteAverage = movie.vote_average.toFixed(1);
504-
if (movieVoteAverage === '' || movieVoteAverage === null || !movieVoteAverage) {
505-
movieVoteAverage = 'N/A';
506-
}
507-
508-
return `The title of the movie is ${movie.title}. Its overview is: ${movieOverview}. Its release date is ${movieReleaseDate}, and rating is ${movieVoteAverage}. You can find more info about it if you wish <a href="../html/movie-details.html" class='movie-details-link' style='color: #ff8623; cursor: pointer; text-decoration: underline;' data-movie-id='${movie.id}'>here</a>.`;
509-
}
510-
else {
511-
return "I couldn't find any movie with that name. Please try another movie name.";
512-
}
513-
}
514-
catch (error) {
515-
console.log('Error fetching movie details:', error);
516-
return "Sorry, I encountered an error while trying to fetch movie details. Please try again later.";
517-
}
518-
}
519-
520455
async function showMovieOfTheDay() {
521456
const year = new Date().getFullYear();
522457
const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;

0 commit comments

Comments
 (0)