Final: Enhance app functionalities (#196)

hoangsonww · hoangsonww · commit 068a3121a94b · 2024-09-19T15:19:24.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,4 @@ node_modules
 
 # Ignore the Emscripten SDK
 emsdk/
+/MovieVerse-Mobile/platforms/
diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
@@ -798,6 +798,16 @@ header h1 {
   }
 }
 
+@media print {
+  #mobileGoogleSignInBtn {
+    display: none;
+  }
+
+  #mobileProfileBtn {
+    display: none;
+  }
+}
+
 .back-btn:hover {
   background-color: #ff8623;
   transition: 0.3s ease-in;
@@ -1282,6 +1292,15 @@ header h1 {
   }
 }
 
+@media print {
+  .movie-image {
+    height: auto;
+  }
+  #actor-image {
+    height: auto;
+  }
+}
+
 .movie-header {
   text-align: center;
   align-self: center;
@@ -1456,7 +1475,7 @@ header h1 {
   border-radius: 8px;
 }
 
-@media (max-width: 768px) {
+@media all and (max-width: 768px) {
   .company-item {
     max-width: 125px;
   }
@@ -2335,7 +2354,7 @@ strong {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-@media (max-width: 700px) {
+@media all and (max-width: 700px) {
   #settings-container {
     max-width: calc(100% - 10px);
     margin: 10px 10px;
@@ -2359,7 +2378,7 @@ strong {
   display: none;
 }
 
-@media (min-width: 768px) {
+@media all and (min-width: 768px) {
   #chat-button,
   #settings-btn,
   #movie-of-the-day-btn,
@@ -2394,7 +2413,7 @@ strong {
   transition: transform 0.09s ease-in-out;
 }
 
-@media (max-width: 767px) {
+@media all and (max-width: 767px) {
   .mobile-bottom-bar {
     display: flex;
   }
@@ -2433,7 +2452,7 @@ strong {
   color: #ecf0f1;
 }
 
-@media (max-width: 767px) {
+@media all and (max-width: 767px) {
   .mobile-bottom-bar {
     display: flex;
   }
@@ -2600,7 +2619,7 @@ strong {
   text-align: center;
 }
 
-@media (max-width: 767px) {
+@media all and (max-width: 767px) {
   .genres + main + .pagination {
     text-align: center;
   }
@@ -2951,14 +2970,14 @@ ol li:hover {
   border-radius: 5px;
 }
 
-@media (max-width: 705px) {
+@media all and (max-width: 705px) {
   #search-title,
   #alt-title {
     display: none;
   }
 }
 
-@media (max-height: 930px) {
+@media all and (max-height: 930px) {
   #search-title,
   #alt-title {
     display: none;
@@ -2975,7 +2994,7 @@ ol li:hover {
   align-self: flex-start;
 }
 
-@media (max-width: 767px) {
+@media all and (max-width: 767px) {
   #chatbotContainer {
     top: 56.1%;
   }
@@ -3077,7 +3096,7 @@ ol li:hover {
   color: #ff8623;
 }
 
-@media (max-width: 982px) {
+@media all and (max-width: 982px) {
   #local-time {
     display: none;
   }
@@ -3148,7 +3167,7 @@ canvas {
   cursor: pointer;
 }
 
-@media screen and (max-width: 900px) {
+@media all and (max-width: 900px) {
   .chart-container {
     flex-direction: column;
   }
@@ -3199,7 +3218,7 @@ canvas {
   transition: 0.1s ease-in;
 }
 
-@media (max-width: 1000px) {
+@media all and (max-width: 1000px) {
   #comments-section {
     margin-bottom: 210px;
   }
@@ -3217,7 +3236,7 @@ canvas {
   transition: 0.1s ease-in;
 }
 
-@media (max-width: 800px) {
+@media all and (max-width: 800px) {
   #my-heading {
     margin-left: 0;
   }
@@ -3628,7 +3647,7 @@ canvas {
   background-color: #ff8623;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
+@media all and (-webkit-min-device-pixel-ratio: 0) {
   body {
     background-size: auto;
     background-repeat: repeat;
@@ -3936,7 +3955,7 @@ body {
   color: purple;
 }
 
-@media (max-width: 800px) {
+@media all and (max-width: 800px) {
   .company-details-container {
     display: flex;
     flex-direction: column;
@@ -4207,7 +4226,7 @@ footer {
   color: white;
 }
 
-@media (max-width: 900px) {
+@media all and (max-width: 900px) {
   .notification-modal {
     right: 12.5px;
   }
diff --git a/MovieVerse-Mobile/.gitignore b/MovieVerse-Mobile/.gitignore
@@ -20,4 +20,5 @@
 
 # Generated by package manager
 node_modules/
+platforms/
 .env
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html
@@ -56,6 +56,7 @@
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
@@ -1695,5 +1696,32 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
         searchInput.addEventListener('blur', clearSelection);
       });
     </script>
+    <script>
+      let confettiTriggered = false;
+
+      function launchConfetti() {
+        const confettiInstance = confetti.create(null, { resize: true });
+        confettiInstance({
+          particleCount: 150,
+          spread: 70,
+          origin: { y: 0.6 },
+        });
+
+        const canvas = document.querySelector('canvas');
+
+        if (canvas) {
+          canvas.style.zIndex = '9999999999';
+          canvas.style.position = 'fixed';
+        }
+      }
+
+      document.addEventListener('DOMContentLoaded', function () {
+        if (!confettiTriggered) {
+          launchConfetti();
+
+          confettiTriggered = true;
+        }
+      });
+    </script>
   </body>
 </html>
diff --git a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj
@@ -114,11 +114,10 @@
 				34A1B8E64081AC554A7A24E1 /* Pods-MovieVerse.debug.xcconfig */,
 				DB4882ED1EE64C7487B364BE /* Pods-MovieVerse.release.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};
-		29B97314FDCFA39411CA2CEA = {
+		29B97314FDCFA39411CA2CEA /* CustomTemplate */ = {
 			isa = PBXGroup;
 			children = (
 				EB87FDF41871DAF40020F90C /* config.xml */,
@@ -151,7 +150,6 @@
 				1D3623250D0F684500981E51 /* AppDelegate.m */,
 				29B97316FDCFA39411CA2CEA /* main.m */,
 			);
-			name = MovieVerse;
 			path = MovieVerse;
 			sourceTree = "<group>";
 		};
@@ -238,7 +236,6 @@
 		29B97313FDCFA39411CA2CEA /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				BuildIndependentTargetsInParallel = YES;
 				LastUpgradeCheck = 1130;
 				TargetAttributes = {
 					1D6058900D05DD3D006BFB54 = {
@@ -254,7 +251,7 @@
 				en,
 				Base,
 			);
-			mainGroup = 29B97314FDCFA39411CA2CEA;
+			mainGroup = 29B97314FDCFA39411CA2CEA /* CustomTemplate */;
 			productRefGroup = 19C28FACFE9D520D11CA2CBB /* Products */;
 			projectDirPath = "";
 			projectReferences = (
diff --git a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate
diff --git a/MovieVerse-Mobile/platforms/ios/www/index.html b/MovieVerse-Mobile/platforms/ios/www/index.html
@@ -56,6 +56,7 @@
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
@@ -1695,5 +1696,32 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
         searchInput.addEventListener('blur', clearSelection);
       });
     </script>
+    <script>
+      let confettiTriggered = false;
+
+      function launchConfetti() {
+        const confettiInstance = confetti.create(null, { resize: true });
+        confettiInstance({
+          particleCount: 150,
+          spread: 70,
+          origin: { y: 0.6 },
+        });
+
+        const canvas = document.querySelector('canvas');
+
+        if (canvas) {
+          canvas.style.zIndex = '9999999999';
+          canvas.style.position = 'fixed';
+        }
+      }
+
+      document.addEventListener('DOMContentLoaded', function () {
+        if (!confettiTriggered) {
+          launchConfetti();
+
+          confettiTriggered = true;
+        }
+      });
+    </script>
   </body>
 </html>
diff --git a/MovieVerse-Mobile/www/index.html b/MovieVerse-Mobile/www/index.html
@@ -56,6 +56,7 @@
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
@@ -1695,5 +1696,32 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
         searchInput.addEventListener('blur', clearSelection);
       });
     </script>
+    <script>
+      let confettiTriggered = false;
+
+      function launchConfetti() {
+        const confettiInstance = confetti.create(null, { resize: true });
+        confettiInstance({
+          particleCount: 150,
+          spread: 70,
+          origin: { y: 0.6 },
+        });
+
+        const canvas = document.querySelector('canvas');
+
+        if (canvas) {
+          canvas.style.zIndex = '9999999999';
+          canvas.style.position = 'fixed';
+        }
+      }
+
+      document.addEventListener('DOMContentLoaded', function () {
+        if (!confettiTriggered) {
+          launchConfetti();
+
+          confettiTriggered = true;
+        }
+      });
+    </script>
   </body>
 </html>
diff --git a/index.html b/index.html
@@ -56,6 +56,7 @@
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
@@ -1695,5 +1696,32 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
         searchInput.addEventListener('blur', clearSelection);
       });
     </script>
+    <script>
+      let confettiTriggered = false;
+
+      function launchConfetti() {
+        const confettiInstance = confetti.create(null, { resize: true });
+        confettiInstance({
+          particleCount: 150,
+          spread: 70,
+          origin: { y: 0.6 },
+        });
+
+        const canvas = document.querySelector('canvas');
+
+        if (canvas) {
+          canvas.style.zIndex = '9999999999';
+          canvas.style.position = 'fixed';
+        }
+      }
+
+      document.addEventListener('DOMContentLoaded', function () {
+        if (!confettiTriggered) {
+          launchConfetti();
+
+          confettiTriggered = true;
+        }
+      });
+    </script>
   </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -6,3 +6,4 @@ node_modules`
`6`	`6`
`7`	`7`	`# Ignore the Emscripten SDK`
`8`	`8`	`emsdk/`
	`9`	`+/MovieVerse-Mobile/platforms/`
Original file line number	Diff line number	Diff line change
`@@ -798,6 +798,16 @@ header h1 {`
`798`	`798`	`}`
`799`	`799`	`}`
`800`	`800`
	`801`	`+@media print {`
	`802`	`+ #mobileGoogleSignInBtn {`
	`803`	`+ display: none;`
	`804`	`+ }`
	`805`	`+`
	`806`	`+ #mobileProfileBtn {`
	`807`	`+ display: none;`
	`808`	`+ }`
	`809`	`+}`
	`810`	`+`
`801`	`811`	`.back-btn:hover {`
`802`	`812`	`background-color: #ff8623;`
`803`	`813`	`transition: 0.3s ease-in;`
`@@ -1282,6 +1292,15 @@ header h1 {`
`1282`	`1292`	`}`
`1283`	`1293`	`}`
`1284`	`1294`
	`1295`	`+@media print {`
	`1296`	`+ .movie-image {`
	`1297`	`+ height: auto;`
	`1298`	`+ }`
	`1299`	`+ #actor-image {`
	`1300`	`+ height: auto;`
	`1301`	`+ }`
	`1302`	`+}`
	`1303`	`+`
`1285`	`1304`	`.movie-header {`
`1286`	`1305`	`text-align: center;`
`1287`	`1306`	`align-self: center;`
`@@ -1456,7 +1475,7 @@ header h1 {`
`1456`	`1475`	`border-radius: 8px;`
`1457`	`1476`	`}`
`1458`	`1477`
`1459`		`-@media (max-width: 768px) {`
	`1478`	`+@media all and (max-width: 768px) {`
`1460`	`1479`	`.company-item {`
`1461`	`1480`	`max-width: 125px;`
`1462`	`1481`	`}`
`@@ -2335,7 +2354,7 @@ strong {`
`2335`	`2354`	`box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);`
`2336`	`2355`	`}`
`2337`	`2356`
`2338`		`-@media (max-width: 700px) {`
	`2357`	`+@media all and (max-width: 700px) {`
`2339`	`2358`	`#settings-container {`
`2340`	`2359`	`max-width: calc(100% - 10px);`
`2341`	`2360`	`margin: 10px 10px;`
`@@ -2359,7 +2378,7 @@ strong {`
`2359`	`2378`	`display: none;`
`2360`	`2379`	`}`
`2361`	`2380`
`2362`		`-@media (min-width: 768px) {`
	`2381`	`+@media all and (min-width: 768px) {`
`2363`	`2382`	`#chat-button,`
`2364`	`2383`	`#settings-btn,`
`2365`	`2384`	`#movie-of-the-day-btn,`
`@@ -2394,7 +2413,7 @@ strong {`
`2394`	`2413`	`transition: transform 0.09s ease-in-out;`
`2395`	`2414`	`}`
`2396`	`2415`
`2397`		`-@media (max-width: 767px) {`
	`2416`	`+@media all and (max-width: 767px) {`
`2398`	`2417`	`.mobile-bottom-bar {`
`2399`	`2418`	`display: flex;`
`2400`	`2419`	`}`
`@@ -2433,7 +2452,7 @@ strong {`
`2433`	`2452`	`color: #ecf0f1;`
`2434`	`2453`	`}`
`2435`	`2454`
`2436`		`-@media (max-width: 767px) {`
	`2455`	`+@media all and (max-width: 767px) {`
`2437`	`2456`	`.mobile-bottom-bar {`
`2438`	`2457`	`display: flex;`
`2439`	`2458`	`}`
`@@ -2600,7 +2619,7 @@ strong {`
`2600`	`2619`	`text-align: center;`
`2601`	`2620`	`}`
`2602`	`2621`
`2603`		`-@media (max-width: 767px) {`
	`2622`	`+@media all and (max-width: 767px) {`
`2604`	`2623`	`.genres + main + .pagination {`
`2605`	`2624`	`text-align: center;`
`2606`	`2625`	`}`
`@@ -2951,14 +2970,14 @@ ol li:hover {`
`2951`	`2970`	`border-radius: 5px;`
`2952`	`2971`	`}`
`2953`	`2972`
`2954`		`-@media (max-width: 705px) {`
	`2973`	`+@media all and (max-width: 705px) {`
`2955`	`2974`	`#search-title,`
`2956`	`2975`	`#alt-title {`
`2957`	`2976`	`display: none;`
`2958`	`2977`	`}`
`2959`	`2978`	`}`
`2960`	`2979`
`2961`		`-@media (max-height: 930px) {`
	`2980`	`+@media all and (max-height: 930px) {`
`2962`	`2981`	`#search-title,`
`2963`	`2982`	`#alt-title {`
`2964`	`2983`	`display: none;`
`@@ -2975,7 +2994,7 @@ ol li:hover {`
`2975`	`2994`	`align-self: flex-start;`
`2976`	`2995`	`}`
`2977`	`2996`
`2978`		`-@media (max-width: 767px) {`
	`2997`	`+@media all and (max-width: 767px) {`
`2979`	`2998`	`#chatbotContainer {`
`2980`	`2999`	`top: 56.1%;`
`2981`	`3000`	`}`
`@@ -3077,7 +3096,7 @@ ol li:hover {`
`3077`	`3096`	`color: #ff8623;`
`3078`	`3097`	`}`
`3079`	`3098`
`3080`		`-@media (max-width: 982px) {`
	`3099`	`+@media all and (max-width: 982px) {`
`3081`	`3100`	`#local-time {`
`3082`	`3101`	`display: none;`
`3083`	`3102`	`}`
`@@ -3148,7 +3167,7 @@ canvas {`
`3148`	`3167`	`cursor: pointer;`
`3149`	`3168`	`}`
`3150`	`3169`
`3151`		`-@media screen and (max-width: 900px) {`
	`3170`	`+@media all and (max-width: 900px) {`
`3152`	`3171`	`.chart-container {`
`3153`	`3172`	`flex-direction: column;`
`3154`	`3173`	`}`
`@@ -3199,7 +3218,7 @@ canvas {`
`3199`	`3218`	`transition: 0.1s ease-in;`
`3200`	`3219`	`}`
`3201`	`3220`
`3202`		`-@media (max-width: 1000px) {`
	`3221`	`+@media all and (max-width: 1000px) {`
`3203`	`3222`	`#comments-section {`
`3204`	`3223`	`margin-bottom: 210px;`
`3205`	`3224`	`}`
`@@ -3217,7 +3236,7 @@ canvas {`
`3217`	`3236`	`transition: 0.1s ease-in;`
`3218`	`3237`	`}`
`3219`	`3238`
`3220`		`-@media (max-width: 800px) {`
	`3239`	`+@media all and (max-width: 800px) {`
`3221`	`3240`	`#my-heading {`
`3222`	`3241`	`margin-left: 0;`
`3223`	`3242`	`}`
`@@ -3628,7 +3647,7 @@ canvas {`
`3628`	`3647`	`background-color: #ff8623;`
`3629`	`3648`	`}`
`3630`	`3649`
`3631`		`-@media screen and (-webkit-min-device-pixel-ratio: 0) {`
	`3650`	`+@media all and (-webkit-min-device-pixel-ratio: 0) {`
`3632`	`3651`	`body {`
`3633`	`3652`	`background-size: auto;`
`3634`	`3653`	`background-repeat: repeat;`
`@@ -3936,7 +3955,7 @@ body {`
`3936`	`3955`	`color: purple;`
`3937`	`3956`	`}`
`3938`	`3957`
`3939`		`-@media (max-width: 800px) {`
	`3958`	`+@media all and (max-width: 800px) {`
`3940`	`3959`	`.company-details-container {`
`3941`	`3960`	`display: flex;`
`3942`	`3961`	`flex-direction: column;`
`@@ -4207,7 +4226,7 @@ footer {`
`4207`	`4226`	`color: white;`
`4208`	`4227`	`}`
`4209`	`4228`
`4210`		`-@media (max-width: 900px) {`
	`4229`	`+@media all and (max-width: 900px) {`
`4211`	`4230`	`.notification-modal {`
`4212`	`4231`	`right: 12.5px;`
`4213`	`4232`	`}`