Added Movie Timeline & Updated Back-End Logic

MovieVerse-Mobile/package.json

@@ -13,13 +13,39 @@
   "author": "Apache Cordova Team",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "babel-loader": "^9.1.3",
     "cordova-android": "^12.0.1",
-    "cordova-ios": "^7.0.1"
+    "cordova-ios": "^7.0.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "nodemon": "^3.0.2",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   },
   "cordova": {
     "platforms": [
       "android",
       "ios"
     ]
+  },
+  "dependencies": {
+    "axios": "^1.6.2",
+    "bcryptjs": "^2.4.3",
+    "body-parser": "^1.20.2",
+    "cors": "^2.8.5",
+    "django": "^1.0.0",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "i18next": "^23.7.11",
+    "jsonwebtoken": "^9.0.2",
+    "mongoose": "^8.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1"
   }
-}
+}

MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>SchemeUserState</key>
+	<dict>
+		<key>MovieVerse.xcscheme_^#shared#^_</key>
+		<dict>
+			<key>orderHint</key>
+			<integer>2</integer>
+		</dict>
+	</dict>
+</dict>
+</plist>

MovieVerse-Mobile/www/style.css

@@ -52,11 +52,11 @@ html {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding-left: 10px; /* Adjust as needed */
+    padding-left: 10px;
 }
 
 #form {
-    margin-top: 10px; /* Adjust space between title and search form */
+    margin-top: 10px;
 }
 
 header {

README.md

@@ -32,6 +32,7 @@ There is also a mobile version of The MovieVerse, which is developed using Apach
 - **Curated Lists**: Explore collections of new releases, most popular, trending, and genre-specific movies.
 - **Movie Details Page**: Each movie comes with its own detailed page, offering a plethora of information from cast to similar movies.
 - **Community Engagement**: Share your movie experiences and become part of The MovieVerse community.
+- **Movie Timeline**: Explore the evolution of cinema by selecting a specific time period and discovering movies from that era.
 
 ## Getting Started
 
@@ -75,13 +76,6 @@ If you have a suggestion that would make this better, please fork the repo and c
 4. Push to the Branch (`git push origin feature/AmazingFeature`)
 5. Open a Pull Request
 
-## Credits
-
-- **Son Nguyen Hoang (David)** - _Initial Work_ - [@hoangsonww](https://github.com/hoangsonww)
-- **The Movie Database (TMDB)** - _Movie Data API_ - [TMDB](https://www.themoviedb.org/documentation/api)
-
-Special thanks to the contributors who have spent time improving The MovieVerse, and to TMDB for providing an extensive API for movie information.
-
 ## License
 
 Distributed under the MIT License. See [LICENSE](LICENSE) for more information.
@@ -93,3 +87,5 @@ Son Nguyen Hoang - [@hoangsonww](https://github.com/hoangsonww)
 Project Link: [https://github.com/hoangsonww/The-MovieVerse-Database](https://github.com/hoangsonww/The-MovieVerse-Database)
 
 ---
+
+Remember, The MovieVerse is an ever-evolving platform. I am continually enhancing the user experience and adding new features, like the Movie Timeline, to help you navigate the vast sea of cinema with ease and excitement.

about.html

@@ -13,6 +13,8 @@ <h1 class="my-heading" style="margin-top: 40px">The MovieVerse - About Us</h1>
     <button class="back-btn" onclick="window.location.href='index.html'">Home</button>
     <button class="about" onclick="window.location.href='about.html'">About</button>
     <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 140px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 100px">Movie of the Day</button>
     <button id="discussions-btn" onclick="window.location.href='discussions.html'" style="margin-bottom: -39px" title="Engage in movie discussions">MovieVerse Chatbot</button>
     <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="margin-bottom: -40px" title="Test your movie knowledge">Trivia Game</button>
 </header>
@@ -32,7 +34,8 @@ <h3 style="color: white">Core Features:</h3>
         <li><strong>Interactive Discussions and Trivia:</strong> Participate in movie discussions and trivia games, enhancing community engagement and knowledge sharing.</li>
         <li><strong>Personalized User Experience:</strong> Save your favorite movies, write reviews, and get recommendations tailored to your taste.</li>
         <li><strong>Advanced Filtering:</strong> Find your next favorite movie with ease using our advanced filtering options based on year, rating, and more.</li>
-        <li><strong>Real-Time Movie Trends:</strong> Stay updated with real-time trends in the movie industry, featuring trending movies and up-to-date ratings.</li>
+        <li><strong>Real-Time Movie Trends:</strong> Stay updated with real-time trends in the movie industry, featuring trending movies and up-to-date ratings.
+        <li><strong>Movie Timeline:</strong> Journey through cinema history with our Movie Timeline feature. Select a period and explore a curated list of movies from that era, offering a unique way to experience the evolution of film over time.</li>
         <li><strong>High-Quality Movie Trailers:</strong> Watch the latest trailers in high quality, providing a sneak peek into the movies you're interested in.</li>
         <li><strong>Director and Actor Insights:</strong> Delve into the careers of your favorite directors and actors, with dedicated pages detailing their filmography and impact on cinema.</li>
         <li><strong>Interactive Movie Details:</strong> Explore in-depth movie details, including behind-the-scenes facts, making-of stories, and exclusive interviews.</li>

actor-details.html

@@ -13,6 +13,10 @@
         <h1 id="my-heading">
             The Mo<span class="highlight">vieV</span>erse
         </h1>
+        <div id="local-time">
+            <p id="time-label">Current Time:</p>
+            <h1 id="clock" class="clock"></h1>
+        </div>
         <button class="back-btn" onclick="window.location.href='index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
@@ -50,6 +54,8 @@ <h2 id="actor-name" class="actor-header"></h2>
 
     <script src="actor-details.js"></script>
 
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px">Movie Timeline</button>
+
     <button id="movie-of-the-day-btn2" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!">Movie of the Day</button>
 
     <!-- Create a button to go to the Movie Discussions page -->

actor-details.js

@@ -261,4 +261,16 @@ function calculateAge(birthday) {
     const birthDate = new Date(birthday);
     const currentDate = new Date();
     return currentDate.getFullYear() - birthDate.getFullYear();
-}
+}
+
+function updateClock() {
+    var now = new Date();
+    var hours = now.getHours();
+    var minutes = now.getMinutes();
+    minutes = minutes < 10 ? '0' + minutes : minutes;
+    var timeString = hours + ':' + minutes;
+    document.getElementById('clock').innerHTML = timeString;
+}
+
+setInterval(updateClock, 1000);
+window.onload = updateClock;

app.js

@@ -148,3 +148,21 @@ function movieVerseResponse(message) {
         return "Sorry, I didn't catch that. Can you rephrase or ask another question about movies?";
     }
 }
+
+async function showMovieOfTheDay() {
+    const year = new Date().getFullYear();
+    const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+    try {
+        const response = await fetch(url);
+        const data = await response.json();
+        const movies = data.results;
+        const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+
+        localStorage.setItem('selectedMovieId', randomMovie.id);
+        window.location.href = 'movie-details.html';
+    }
+    catch (error) {
+        console.error('Error fetching movie:', error);
+        alert('Failed to fetch the movie of the day. Please try again later.');
+    }
+}

backend/settings.py

@@ -8,3 +8,14 @@
     'django.contrib.messages',
     'django.contrib.staticfile,
 ]
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.mysql',
+        'NAME': 'localhost',
+        'USER': 'localhost',
+        'PASSWORD': '123456789',
+        'HOST': 'localhost',
+        'PORT': '3306',
+    }
+}

director-details.html

@@ -13,6 +13,10 @@
     <h1 id="my-heading">
         The Mo<span class="highlight">vieV</span>erse
     </h1>
+    <div id="local-time">
+        <p id="time-label">Current Time:</p>
+        <h1 id="clock" class="clock"></h1>
+    </div>
     <button class="back-btn" onclick="window.location.href='index.html'">Home</button>
     <button class="about" onclick="window.location.href='about.html'">About</button>
     <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
@@ -50,6 +54,8 @@ <h2 id="director-name" class="director-header"></h2>
 
 <script src="director-details.js"></script>
 
+<button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px">Movie Timeline</button>
+
 <button id="movie-of-the-day-btn2" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!">Movie of the Day</button>
 
 <!-- Create a button to go to the Movie Discussions page -->

director-details.js

@@ -230,3 +230,15 @@ function calculateAge(dob) {
     const ageDate = new Date(ageDifMs);
     return Math.abs(ageDate.getUTCFullYear() - 1970);
 }
+
+function updateClock() {
+    var now = new Date();
+    var hours = now.getHours();
+    var minutes = now.getMinutes();
+    minutes = minutes < 10 ? '0' + minutes : minutes;
+    var timeString = hours + ':' + minutes;
+    document.getElementById('clock').innerHTML = timeString;
+}
+
+setInterval(updateClock, 1000);
+window.onload = updateClock;

discussions.css

@@ -18,6 +18,40 @@ body {
     height: 100%;
 }
 
+#movie-timeline-btn {
+    position: fixed;
+    bottom: 180px;
+    right: 30px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#movie-timeline-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-of-the-day-btn {
+    position: fixed;
+    bottom: 140px;
+    right: 30px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#movie-of-the-day-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
 #my-heading {
     color: #ff8623;
     padding: 10px;

discussions.html

@@ -20,7 +20,8 @@
     <button class="back-btn" onclick="window.location.href='index.html'">Home</button>
     <button class="about" onclick="window.location.href='about.html'">About</button>
     <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
-    <button id="discussions-btn" onclick="window.location.href='discussions.html'" style="margin-bottom: -39px">MovieVerse Chatbot</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 100px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 140px">Movie of the Day</button>
     <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="margin-bottom: -40px">Trivia Game</button>
     <h1>Welcome to the MovieVerse Chatbot!</h1>
 

favorites.html

@@ -22,6 +22,9 @@ <h1 id="my-heading">
 
     <main id="favorites-main"></main>
 
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 140px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 100px">Movie of the Day</button>
+
     <!-- Create a button to go to the Movie Discussions page -->
     <button id="discussions-btn" onclick="window.location.href='discussions.html'" style="margin-bottom: -39px" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
 
@@ -36,7 +39,8 @@ <h1 id="my-heading">
             const favoritesMain = document.getElementById('favorites-main');
             if (favorites.length > 0) {
                 favorites.forEach(movieId => fetchMovieDetails(movieId));
-            } else {
+            }
+            else {
                 favoritesMain.innerHTML = '<p>No favorites added yet.</p>';
             }
         });
@@ -75,7 +79,6 @@ <h4>Movie Overview: </h4>
                 favoritesContainer.innerHTML += '<p>Error loading movie details.</p>';
             }
         }
-
     </script>
 
 </body>

index.html

@@ -27,13 +27,13 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             The Mo<span class="highlight">vieV</span>erse
         </h1>
 
-        <div>
-            <p id="time-label">Local Time:</p>
+        <div id="local-time">
+            <p id="time-label">Current Time:</p>
             <h1 id="clock" class="clock"></h1>
         </div>
 
         <!-- Create a button to toggle the side navigation bar -->
-        <button id="nav-toggle" class="nav-toggle" title="Toggle Side Navbar" onclick="toggleNav()">
+        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar (Or you can just hover on the left edge to toggle it!)" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
 
@@ -291,6 +291,9 @@ <h2 id="other">Trending <span class="highlight">CLASSIC</span> Movies: </h2>
 
     </main>
 
+    <!-- Create a button to go to the Movie Timeline page -->
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!">Movie Timeline</button>
+
     <!-- Create a button to go to the Movie of the Day page -->
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!">Movie of the Day</button>
 

movie-details.html

@@ -12,6 +12,10 @@
     <h1 id="my-heading">
         The Mo<span class="highlight">vieV</span>erse
     </h1>
+    <div id="local-time">
+        <p id="time-label">Current Time:</p>
+        <h1 id="clock" class="clock"></h1>
+    </div>
     <button class="back-btn" onclick="window.location.href='index.html'">Home</button>
     <button class="about" onclick="window.location.href='about.html'">About</button>
     <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
@@ -55,6 +59,9 @@ <h2 id="movie-rating" class="movie-rating"></h2>
     </div>
 </div>
 
+<!-- Create a button to go to the Movie Timeline page -->
+<button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px">Movie Timeline</button>
+
 <!-- Create a button to go to the Movie of the Day page -->
 <button id="movie-of-the-day-btn2" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!">Movie of the Day</button>
 

movie-details.js

@@ -378,3 +378,15 @@ async function showMovieOfTheDay(){
         alert('Failed to fetch the movie of the day. Please try again later.');
     }
 }
+
+function updateClock() {
+    var now = new Date();
+    var hours = now.getHours();
+    var minutes = now.getMinutes();
+    minutes = minutes < 10 ? '0' + minutes : minutes;
+    var timeString = hours + ':' + minutes;
+    document.getElementById('clock').innerHTML = timeString;
+}
+
+setInterval(updateClock, 1000);
+window.onload = updateClock;