Enhanced SEO & Updated App Stylings

.github/README.md

@@ -59,6 +59,7 @@ There is also a mobile version of The MovieVerse, which is developed using Apach
 **Additional Information:**
 - **Continuous Improvements**: The platform is ever-evolving with regular updates and new features.
 - **Free & No Ads**: The MovieVerse is free to use and ad-free for an uninterrupted experience.
+- **Privacy & Security**: The MovieVerse is committed to protecting your privacy and ensuring a secure platform.
 
 **And So Much More!**
 

MovieVerse-Frontend/html/analytics.html

@@ -98,7 +98,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
     <div>
-        <h1 class="chart-title">The MovieVerse Analytics</h1>
+        <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
         <p class="chart-description">Here are some interesting and interactive insights about our MovieVerse Database!</p>
     </div>
     <div id="myModal" class="modal-overlay">

MovieVerse-Frontend/html/feedback.html

@@ -90,6 +90,7 @@
         .center-text {
             text-align: center;
         }
+
         .center-button {
             display: block;
             margin: 20px auto;
@@ -109,9 +110,11 @@
         #link {
             color: white;
         }
+
         #link:hover {
             color: #ff8623;
         }
+
     </style>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
     <script>
@@ -357,7 +360,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px">
     </header>
 
     <div class="form-container">
-        <h1>Feedback</h1>
+        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Feedback</div>
         <p style="color: black">We'd love to hear from you! Please share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.</p>
         <form action="https://formspree.io/f/xqkrbdqd" method="POST">
             <input type="text" id="name" name="name" placeholder="Your Name" required>

MovieVerse-Frontend/html/support.html

@@ -85,6 +85,7 @@
         .center-text {
             text-align: center;
         }
+
         .center-button {
             display: block;
             margin: 20px auto;
@@ -97,13 +98,16 @@
             margin-top: 40px;
             border-radius: 8px;
         }
+
         .center-button:hover {
             background-color: #ff8623;
             transition: background-color 0.3s;
         }
+
         #link {
             color: white;
         }
+
         #link:hover {
             color: #ff8623;
         }
@@ -357,7 +361,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px">
     </header>
 
     <div class="form-container">
-        <h1>Contact Support</h1>
+        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Contact Support</div>
         <p style="color: black">Have a question or need help? Contact us and we'll take a look at your request as soon as possible.</p>
         <form action="https://formspree.io/f/xdoqzzao" method="POST">
             <input type="text" id="name" name="name" placeholder="Your Name" required>

MovieVerse-Frontend/html/terms-of-service.html

@@ -136,7 +136,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
 
     <main class="content-area">
         <div style="text-align: center; width: 99vw">
-            <h1 id="tos-header" style="color: #ff8623">Terms of Service</h1>
+            <div style="font-weight: bold; font-size: 28px; margin-top: 10px; color: #ff8623" id="tos-header">Terms of Service</div>
         </div>
 
         <div style="text-align: center;  ">

MovieVerse-Mobile/www/.dockerignore

@@ -1,3 +1,4 @@
+# Docker Ignore file for the MovieVerse project
 # General files
 .git
 .gitignore

MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html

@@ -98,7 +98,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
     <div>
-        <h1 class="chart-title">The MovieVerse Analytics</h1>
+        <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
         <p class="chart-description">Here are some interesting and interactive insights about our MovieVerse Database!</p>
     </div>
     <div id="myModal" class="modal-overlay">

MovieVerse-Mobile/www/MovieVerse-Frontend/html/feedback.html

@@ -5,8 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Feedback - The MovieVerse</title>
-    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/offline.html">
+    <meta name="description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html">
     <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
@@ -79,11 +79,18 @@
         #supportBtn:hover {
             background-color: #ff8623;
         }
+
+        @media (min-width: 900px) {
+            #my-heading {
+                margin-top: 15px !important;
+            }
+        }
     </style>
     <style>
         .center-text {
             text-align: center;
         }
+
         .center-button {
             display: block;
             margin: 20px auto;
@@ -103,9 +110,11 @@
         #link {
             color: white;
         }
+
         #link:hover {
             color: #ff8623;
         }
+
     </style>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
     <script>
@@ -351,7 +360,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px">
     </header>
 
     <div class="form-container">
-        <h1>Feedback</h1>
+        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Feedback</div>
         <p style="color: black">We'd love to hear from you! Please share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.</p>
         <form action="https://formspree.io/f/xqkrbdqd" method="POST">
             <input type="text" id="name" name="name" placeholder="Your Name" required>

MovieVerse-Mobile/www/MovieVerse-Frontend/html/support.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Support - The MovieVerse</title>
-    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <meta name="description" content="Get in touch with The MovieVerse support team for any questions, feedback, or help you need.">
     <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/support.html">
     <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
@@ -85,6 +85,7 @@
         .center-text {
             text-align: center;
         }
+
         .center-button {
             display: block;
             margin: 20px auto;
@@ -97,16 +98,24 @@
             margin-top: 40px;
             border-radius: 8px;
         }
+
         .center-button:hover {
             background-color: #ff8623;
             transition: background-color 0.3s;
         }
+
         #link {
             color: white;
         }
+
         #link:hover {
             color: #ff8623;
         }
+        @media (min-width: 900px) {
+            #my-heading {
+                margin-top: 15px !important;
+            }
+        }
     </style>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
     <script>
@@ -352,7 +361,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px">
     </header>
 
     <div class="form-container">
-        <h1>Contact Support</h1>
+        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Contact Support</div>
         <p style="color: black">Have a question or need help? Contact us and we'll take a look at your request as soon as possible.</p>
         <form action="https://formspree.io/f/xdoqzzao" method="POST">
             <input type="text" id="name" name="name" placeholder="Your Name" required>

MovieVerse-Mobile/www/MovieVerse-Frontend/html/terms-of-service.html

@@ -136,7 +136,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
 
     <main class="content-area">
         <div style="text-align: center; width: 99vw">
-            <h1 id="tos-header" style="color: #ff8623">Terms of Service</h1>
+            <div style="font-weight: bold; font-size: 28px; margin-top: 10px; color: #ff8623" id="tos-header">Terms of Service</div>
         </div>
 
         <div style="text-align: center;  ">

MovieVerse-Mobile/www/config.yml

@@ -0,0 +1,55 @@
+app:
+  name: The MovieVerse
+  description: "Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more."
+  language: en
+  theme_color: "#7378c5"
+  author: Son Nguyen
+
+meta:
+  viewport: "width=device-width, initial-scale=1.0"
+  robots: "index, follow"
+  rating: "General"
+  revisit_after: "3 days"
+  distribution: "global"
+  keywords: "movies, film guide, directors, actors, movie genres, cinema, film reviews"
+
+og:
+  title: "The MovieVerse - Your Ultimate Movie Guide"
+  type: website
+  url: "https://movie-verse.com/"
+  image: "https://movie-verse.com/images/image.png"
+  description: "Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more."
+  locale: en_US
+  site_name: The MovieVerse
+
+twitter:
+  card: "https://movie-verse.com/images/image.png"
+  title: "The MovieVerse - Your Ultimate Movie Guide"
+  description: "Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more."
+  image: "https://movie-verse.com/images/image.png"
+
+analytics:
+  google_tag_manager_id: G-CQKJ67FXZ4
+
+resources:
+  css:
+    - "MovieVerse-Frontend/css/style.css"
+    - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+  js:
+    - "MovieVerse-Frontend/js/settings.js"
+    - "index.js"
+    - "https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"
+  favicon: "images/favicon.ico"
+  manifest: "manifest.json"
+  service_worker: "MovieVerse-Frontend/js/service-worker.js"
+
+paths:
+  about: "./MovieVerse-Frontend/html/about.html"
+  favorites: "./MovieVerse-Frontend/html/favorites.html"
+  user_profile: "./MovieVerse-Frontend/html/user-profile.html"
+  settings: "MovieVerse-Frontend/html/settings.html"
+  movie_match: "MovieVerse-Frontend/html/movie-match.html"
+  movie_timeline: "MovieVerse-Frontend/html/movie-timeline.html"
+  chatbot: "MovieVerse-Frontend/html/chatbot.html"
+  trivia: "./MovieVerse-Frontend/html/trivia.html"
+