Final: Enhance app functionalities (#196)

hoangsonww · Jan 17, 2025 · cf8201e · cf8201e
1 parent 4f594ff
commit cf8201e
Show file tree

Hide file tree

Showing 33 changed files with 1,427 additions and 31 deletions.
diff --git a/MovieVerse-Frontend/html/catch-popcorn.html b/MovieVerse-Frontend/html/catch-popcorn.html
@@ -556,6 +556,41 @@ <h2>Catch the Popcorn</h2>
       <span>Back to Games</span>
     </button>
 
+    <div
+      id="ad-container2"
+      style="
+        text-align: center;
+        cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        margin: 20px auto;
+        padding: 10px;
+        border-radius: 8px;
+        width: auto;
+        max-width: calc(100% - 40px);
+        margin-top: 70px;
+      "
+      title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!"
+    >
+      <p style="margin: 0">Advertisement</p>
+      <ins
+        class="adsbygoogle"
+        style="display: block; width: 100%"
+        data-ad-client="ca-pub-6608388491200814"
+        data-ad-slot="4832732030"
+        data-ad-format="auto"
+      ></ins>
+      <p style="margin: 0; font-size: 12px; margin-top: 5px">
+        Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your
+        <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a>
+        if you find the ad inappropriate or irrelevant.
+      </p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+      (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
     <script>
       document.getElementById('how-to-play-btn').addEventListener('click', function () {
         window.location.href = 'how-to-play.html';

diff --git a/MovieVerse-Frontend/html/dinosaur-jump.html b/MovieVerse-Frontend/html/dinosaur-jump.html
@@ -540,6 +540,41 @@ <h2>Dinosaur Jump</h2>
       <span>Back to Games</span>
     </button>
 
+    <div
+      id="ad-container2"
+      style="
+        text-align: center;
+        cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        margin: 20px auto;
+        padding: 10px;
+        border-radius: 8px;
+        width: auto;
+        max-width: calc(100% - 40px);
+        margin-top: 70px;
+      "
+      title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!"
+    >
+      <p style="margin: 0">Advertisement</p>
+      <ins
+        class="adsbygoogle"
+        style="display: block; width: 100%"
+        data-ad-client="ca-pub-6608388491200814"
+        data-ad-slot="4832732030"
+        data-ad-format="auto"
+      ></ins>
+      <p style="margin: 0; font-size: 12px; margin-top: 5px">
+        Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your
+        <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a>
+        if you find the ad inappropriate or irrelevant.
+      </p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+      (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
     <script>
       document.getElementById('how-to-play-btn').addEventListener('click', function () {
         window.location.href = 'how-to-play.html';

diff --git a/MovieVerse-Frontend/html/falling-stars.html b/MovieVerse-Frontend/html/falling-stars.html
@@ -538,6 +538,41 @@ <h2>Falling Star</h2>
       <span>Back to Games</span>
     </button>
 
+    <div
+      id="ad-container2"
+      style="
+        text-align: center;
+        cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        margin: 20px auto;
+        padding: 10px;
+        border-radius: 8px;
+        width: auto;
+        max-width: calc(100% - 40px);
+        margin-top: 70px;
+      "
+      title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!"
+    >
+      <p style="margin: 0">Advertisement</p>
+      <ins
+        class="adsbygoogle"
+        style="display: block; width: 100%"
+        data-ad-client="ca-pub-6608388491200814"
+        data-ad-slot="4832732030"
+        data-ad-format="auto"
+      ></ins>
+      <p style="margin: 0; font-size: 12px; margin-top: 5px">
+        Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your
+        <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a>
+        if you find the ad inappropriate or irrelevant.
+      </p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+      (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
     <script>
       document.getElementById('how-to-play-btn').addEventListener('click', function () {
         window.location.href = 'how-to-play.html';

diff --git a/MovieVerse-Frontend/html/flappy-bird.html b/MovieVerse-Frontend/html/flappy-bird.html
@@ -542,6 +542,41 @@ <h2>Flappy Bird</h2>
       <span>Back to Games</span>
     </button>
 
+    <div
+      id="ad-container2"
+      style="
+        text-align: center;
+        cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        margin: 20px auto;
+        padding: 10px;
+        border-radius: 8px;
+        width: auto;
+        max-width: calc(100% - 40px);
+        margin-top: 70px;
+      "
+      title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!"
+    >
+      <p style="margin: 0">Advertisement</p>
+      <ins
+        class="adsbygoogle"
+        style="display: block; width: 100%"
+        data-ad-client="ca-pub-6608388491200814"
+        data-ad-slot="4832732030"
+        data-ad-format="auto"
+      ></ins>
+      <p style="margin: 0; font-size: 12px; margin-top: 5px">
+        Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your
+        <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a>
+        if you find the ad inappropriate or irrelevant.
+      </p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+      (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
     <script>
       document.getElementById('how-to-play-btn').addEventListener('click', function () {
         window.location.href = 'how-to-play.html';

diff --git a/MovieVerse-Frontend/html/games.html b/MovieVerse-Frontend/html/games.html
@@ -419,7 +419,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
     </header>
 
     <h2 style="margin-top: 50px !important">Mini Games</h2>
-    <p>Explore our collection of fun and interactive mini games!</p>
+    <p>Welcome to The MovieVerse Games! Explore our collection of fun and interactive mini games below:</p>
     <div class="container">
       <!-- Dinosaur Jump -->
       <div class="card">
@@ -459,6 +459,40 @@ <h2 style="margin-top: 50px !important">Mini Games</h2>
       </div>
     </div>
 
+    <div
+      id="ad-container2"
+      style="
+        text-align: center;
+        cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        margin: 20px auto;
+        padding: 10px;
+        border-radius: 8px;
+        width: auto;
+        max-width: calc(100% - 40px);
+      "
+      title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!"
+    >
+      <p style="margin: 0">Advertisement</p>
+      <ins
+        class="adsbygoogle"
+        style="display: block; width: 100%"
+        data-ad-client="ca-pub-6608388491200814"
+        data-ad-slot="4832732030"
+        data-ad-format="auto"
+      ></ins>
+      <p style="margin: 0; font-size: 12px; margin-top: 5px">
+        Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your
+        <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a>
+        if you find the ad inappropriate or irrelevant.
+      </p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+      (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
     <div id="myModal" class="modal-overlay">
       <div class="spinner"></div>
     </div>

diff --git a/MovieVerse-Frontend/html/how-to-play.html b/MovieVerse-Frontend/html/how-to-play.html
@@ -341,6 +341,24 @@
           display: block;
         }
       }
+      .back-btn2 {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        border-radius: 8px;
+        padding: 10px 20px;
+      }
+
+      .back-btn2:hover {
+        background-color: #ff8623;
+        transition: 0.3s ease-in;
+      }
     </style>
   </head>
   <body>
@@ -440,6 +458,18 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
     <!-- Main Content: How to Play Instructions -->
     <h2 style="margin-top: 50px !important">How to Play</h2>
     <div class="instructions-container">
+      <div style="width: 100%; text-align: center">
+        <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)"
+        />
+      </div>
+      <p>
+        Welcome to The MovieVerse Games! Here, you can play a variety of fun and interactive games inspired by classic arcade games and popular mobile
+        games. Below are detailed instructions on how to play each game. Enjoy! 🎮
+      </p>
       <!-- Dinosaur Jump Instructions -->
       <h3>Dinosaur Jump</h3>
       <p>
@@ -524,6 +554,46 @@ <h3>Stack the Blocks</h3>
       </p>
     </div>
 
+    <button class="back-btn2" onclick="window.location.href='games.html'">
+      <i class="fas fa-arrow-left"></i>
+      Back to Games
+    </button>
+
+    <div
+      id="ad-container2"
+      style="
+        text-align: center;
+        cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        margin: 20px auto;
+        padding: 10px;
+        border-radius: 8px;
+        width: auto;
+        max-width: calc(100% - 40px);
+        margin-top: 70px;
+      "
+      title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!"
+    >
+      <p style="margin: 0">Advertisement</p>
+      <ins
+        class="adsbygoogle"
+        style="display: block; width: 100%"
+        data-ad-client="ca-pub-6608388491200814"
+        data-ad-slot="4832732030"
+        data-ad-format="auto"
+      ></ins>
+      <p style="margin: 0; font-size: 12px; margin-top: 5px">
+        Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your
+        <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a>
+        if you find the ad inappropriate or irrelevant.
+      </p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+      (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
     <!-- Modal overlay for spinner (if needed) -->
     <div id="myModal" class="modal-overlay">
       <div class="spinner"></div>
@@ -749,6 +819,31 @@ <h3>Stack the Blocks</h3>
           });
         }
       });
+
+      document.getElementById('logo').addEventListener('click', function () {
+        const imageUrl = this.src;
+        const modalHtml = `<div id="image-modal" style="z-index: 10002; 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;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+        document.getElementById('image-modal').addEventListener('click', function (event) {
+          if (event.target === this) {
+            this.remove();
+          }
+        });
+      });
+
+      document.getElementById('logo').addEventListener('mouseover', function () {
+        this.style.cursor = 'pointer';
+        this.style.transform = 'scale(1.05)';
+        this.style.transition = '0.3s ease-in-out';
+      });
+
+      document.getElementById('logo').addEventListener('mouseout', function () {
+        this.style.transform = 'scale(1)';
+      });
     </script>
 
     <!-- Footer -->

diff --git a/MovieVerse-Frontend/html/space-invaders.html b/MovieVerse-Frontend/html/space-invaders.html
@@ -549,6 +549,41 @@ <h2>Space Invaders</h2>
       <span>Back to Games</span>
     </button>
 
+    <div
+      id="ad-container2"
+      style="
+        text-align: center;
+        cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        margin: 20px auto;
+        margin-top: 70px;
+        padding: 10px;
+        border-radius: 8px;
+        width: auto;
+        max-width: calc(100% - 40px);
+      "
+      title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!"
+    >
+      <p style="margin: 0">Advertisement</p>
+      <ins
+        class="adsbygoogle"
+        style="display: block; width: 100%"
+        data-ad-client="ca-pub-6608388491200814"
+        data-ad-slot="4832732030"
+        data-ad-format="auto"
+      ></ins>
+      <p style="margin: 0; font-size: 12px; margin-top: 5px">
+        Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your
+        <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a>
+        if you find the ad inappropriate or irrelevant.
+      </p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+      (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
     <script>
       document.getElementById('how-to-play-btn').addEventListener('click', function () {
         window.location.href = 'how-to-play.html';