Merge pull request #30 from hoangsonww/homepage-enhancements

Overall App Enhancements - Major Overhaul

.github/README.md

@@ -64,27 +64,24 @@ There is also a mobile version of The MovieVerse, which is developed using Apach
 
 ## Project Structure
 
-The MovieVerse is a full-stack application with a robust backend and a user-friendly frontend. The project is divided into the following **3 primary** directories:
+The MovieVerse is a full-stack application with a robust backend and a user-friendly frontend. The project is divided into the following **3 main** directories:
 1. `MovieVerse-Backend`: The backend directory contains the server-side code, including the API, database, and server configuration.
 2. `MovieVerse-Frontend`: The frontend directory contains the client-side code, including the user interface, user experience, and client configuration.
 3. `MovieVerse-Mobile`: The mobile app directory contains the mobile application code, including the mobile user interface, user experience, and mobile client configuration.
 
 ## Technology Stack
 
-| Frontend Technologies                                     | Backend Technologies                                             | Database Technologies                           | Mobile App Development                                            | Additional Technologies                                         |
-|-----------------------------------------------------------|------------------------------------------------------------------|-------------------------------------------------|-------------------------------------------------------------------|-----------------------------------------------------------------|
-| [React](https://reactjs.org/)                             | [Node.js](https://nodejs.org/en/)                                | [MongoDB](https://www.mongodb.com/)             | [Apache Cordova](https://cordova.apache.org/)                     | [Webpack](https://webpack.js.org/)                              |
-| [Vue](https://vuejs.org/)                                 | [Express](https://expressjs.com/)                                | [MySQL](https://www.mysql.com/)                 | [React Native](https://reactnative.dev/)                          | [Babel](https://babeljs.io/)                                    |
-| [HTML5](https://html.com/)                                | [Django](https://www.djangoproject.com/)                         | [Google Firebase](https://firebase.google.com/) | [Swift (for iOS development)](https://developer.apple.com/swift/) | [Docker](https://www.docker.com/)                               |
-| [CSS3](https://www.w3.org/Style/CSS/Overview.en.html)     | [Django REST Framework](https://www.django-rest-framework.org/)  |                                                 |                                                                   | [Emscripten](https://emscripten.org/)                           |
-| [JavaScript (Vanilla JS)](http://vanilla-js.com/)         | [Flask](https://flask.palletsprojects.com/en/1.1.x/)             |                                                 |                                                                   | [WebAssembly](https://webassembly.org/)                         |
-| [TypeScript](https://www.typescriptlang.org/)             | [Flask RESTful](https://flask-restful.readthedocs.io/en/latest/) |                                                 |                                                                   | [C](https://en.wikipedia.org/wiki/C_(programming_language))     |
-| [Bootstrap](https://getbootstrap.com/)                    | [Python](https://www.python.org/)                                |                                                 |                                                                   | [Google Analytics](https://analytics.google.com/analytics/web/) |
-| [React Bootstrap](https://react-bootstrap.github.io/)     | [Java](https://www.java.com/en/)                                 |                                                 |                                                                   | [ESLint](https://eslint.org/)                                   |
-| [React Icons](https://react-icons.github.io/react-icons/) | [GraphQL](https://graphql.org/)                                  |                                                 |                                                                   |                                                                 |
-| [SASS](https://sass-lang.com/)                            | [Ruby on Rails](https://rubyonrails.org/)                        |                                                 |                                                                   |                                                                 |
-| [Single Spa](https://single-spa.js.org/)                  | [C (Emscripten, WebAssembly)](https://emscripten.org/)           |                                                 |                                                                   |                                                                 |
-| [Redux](https://redux.js.org/)                            | [JavaScript](https://www.javascript.com/)                        |                                                 |                                                                   |                                                                 |
+| Frontend Technologies                                           | Backend Technologies                                            | Database Technologies                           | Mobile App Development                                            | Additional Technologies                                         |
+|-----------------------------------------------------------------|-----------------------------------------------------------------|-------------------------------------------------|-------------------------------------------------------------------|-----------------------------------------------------------------|
+| [React](https://reactjs.org/)                                   | [Node.js](https://nodejs.org/en/)                               | [MongoDB](https://www.mongodb.com/)             | [Apache Cordova](https://cordova.apache.org/)                     | [Webpack](https://webpack.js.org/)                              |
+| [Vue](https://vuejs.org/)                                       | [Express](https://expressjs.com/)                               | [MySQL](https://www.mysql.com/)                 | [React Native](https://reactnative.dev/)                          | [Babel](https://babeljs.io/)                                    |
+| [HTML5](https://html.com/)                                      | [Django](https://www.djangoproject.com/)                        | [Google Firebase](https://firebase.google.com/) | [Swift (for iOS development)](https://developer.apple.com/swift/) | [Docker](https://www.docker.com/)                               |
+| [CSS3](https://www.w3.org/Style/CSS/Overview.en.html)           | [Django REST Framework](https://www.django-rest-framework.org/) |                                                 | [Kotlin (for Android)](https://kotlinlang.org/)                   | [Emscripten](https://emscripten.org/)                           |
+| [JavaScript (Vanilla JS)](http://vanilla-js.com/)               | [Flask](https://flask.palletsprojects.com/en/1.1.x/)            |                                                 | [Java (for Android)](https://www.java.com/en/)                    | [WebAssembly](https://webassembly.org/)                         |
+| [TypeScript](https://www.typescriptlang.org/)                   | [Python](https://www.python.org/)                               |                                                 |                                                                   | [Google Analytics](https://analytics.google.com/analytics/web/) |
+| [FontAwesome Icons](https://react-icons.github.io/react-icons/) | [Ruby on Rails](https://rubyonrails.org/)                       |                                                 |                                                                   | [ESLint](https://eslint.org/)                                   |
+| [SASS](https://sass-lang.com/)                                  | [C (Emscripten, WebAssembly)](https://emscripten.org/)          |                                                 |                                                                   | [Git](https://git-scm.com/)                                     |
+| [Single Spa](https://single-spa.js.org/)                        | [JavaScript](https://www.javascript.com/)                       |                                                 |                                                                   |                                                                 |
 
 
 ## Contributing

404.html

@@ -213,7 +213,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
         <button class="about" onclick="window.location.href='MovieVerse-Frontend/html/about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>

MovieVerse-Databases/firebase.json

@@ -0,0 +1,23 @@
+{
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  },
+  "firestore": {
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
+  },
+  "storage": {
+    "rules": "storage.rules"
+  }
+}

MovieVerse-Databases/firestore.indexes.json

@@ -0,0 +1,59 @@
+{
+  "indexes": [
+    {
+      "collectionGroup": "movies",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "genre", "order": "ASCENDING" },
+        { "fieldPath": "releaseYear", "order": "ASCENDING" }
+      ]
+    },
+    {
+      "collectionGroup": "directors",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "name", "order": "ASCENDING" }
+      ],
+      "fieldOverrides": [
+        {
+          "fieldPath": "name",
+          "arrayConfig": "CONTAINS"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "actors",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "name", "order": "ASCENDING" }
+      ],
+      "fieldOverrides": [
+        {
+          "fieldPath": "name",
+          "arrayConfig": "CONTAINS"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "users",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "name", "order": "ASCENDING" }
+      ],
+      "fieldOverrides": [
+        {
+          "fieldPath": "name",
+          "arrayConfig": "CONTAINS"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "reviews",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "rating", "order": "ASCENDING" }
+      ]
+    }
+  ],
+  "fieldOverrides": []
+}

MovieVerse-Databases/firestore.rules

@@ -0,0 +1,8 @@
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /movies/{movie} {
+      allow read: if true;
+      allow write: if request.auth != null;
+    }
+  }
+}

MovieVerse-Databases/storage.rules

@@ -0,0 +1,8 @@
+service firebase.storage {
+  match /b/{bucket}/o {
+    match /moviePosters/{poster} {
+      allow read: if true;
+      allow write: if request.auth != null;
+    }
+  }
+}

MovieVerse-Frontend/css/style.css

@@ -1168,7 +1168,7 @@ p {
 }
 
 .app-btn {
-    background-color: #534caf;
+    background-color: #7378c5;
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 10px 15px;
@@ -1179,6 +1179,7 @@ p {
     display: block;
     width: auto;
     margin: 10px auto;
+    transition: 0.1s ease-in;
 }
 
 .clock {

MovieVerse-Frontend/html/about.html

@@ -43,6 +43,7 @@
 
         gtag('config', 'G-CQKJ67FXZ4');
     </script>
+
     <style>
         #local-time {
             transform: translateX(15%);
@@ -68,7 +69,7 @@ <h1 id="stats-display" class="clock"></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 class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -158,7 +159,7 @@ <h3 id="subheading">Join The Journey:</h3>
         <p style="color: white; text-align: center"><em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a>.</em></p>
 
         <h3 id="subheading">Useful Links:</h3>
-        <p style="color: white">Here are some links that you might find useful. You can explore the analytics page of our database (<strong style="text-decoration: underline">MovieVerse Analytics</strong>), read our <strong style="text-decoration: underline">terms of service</strong>, and review our <strong style="text-decoration: underline">privacy policy</strong>. Feel free to reach out to us if you have any questions or concerns.</p>
+        <p style="color: white">Here are some links that you might find useful. You can explore the analytics page of our database (<a href="analytics.html" style="color: white"><strong style="text-decoration: underline">MovieVerse Analytics</strong></a>), read our <a href="terms-of-service.html" style="color: white"><strong style="text-decoration: underline">terms of service</strong></a>, and review our <a href="privacy-policy.html" style="color: white"><strong style="text-decoration: underline">privacy policy</strong></a>. Feel free to reach out to us if you have any questions or concerns.</p>
 
         <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
         <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
@@ -255,6 +256,7 @@ <h3 id="subheading">Useful Links:</h3>
 
         document.addEventListener("DOMContentLoaded", function() {
             updateSignInButtonState();
+            setBodyClass();
             document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
         });
 
@@ -285,9 +287,6 @@ <h3 id="subheading">Useful Links:</h3>
             }
         });
 
-        /**
-         * Rotates the user stats and movie quotes displayed in the main element.
-         */
         function rotateUserStats() {
             const stats = [
                 {
@@ -463,6 +462,19 @@ <h3 id="subheading">Useful Links:</h3>
             localStorage.setItem('searchQuery', searchQuery);
             window.location.href = 'search.html';
         }
+
+        function setBodyClass() {
+            if (window.innerWidth < 768) {
+                document.body.classList.remove('movie-details-body');
+                document.body.classList.add('movie-details-body4');
+            }
+            else {
+                document.body.classList.remove('movie-details-body4');
+                document.body.classList.add('movie-details-body');
+            }
+        }
+
+        window.addEventListener('resize', setBodyClass);
     </script>
 </body>
 </html>

MovieVerse-Frontend/html/actor-details.html

@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Actor Details</title>
+    <title>Actor Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -54,7 +54,7 @@ <h1 id="stats-display" 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>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>

MovieVerse-Frontend/html/analytics.html

@@ -8,8 +8,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -55,7 +55,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>