WIP: Added universal animations (#190)

hoangsonww · May 16, 2024 · f5d5616 · f5d5616
1 parent 48b30db
commit f5d5616
Show file tree

Hide file tree

Showing 29 changed files with 1,467 additions and 280 deletions.
diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
@@ -456,6 +456,14 @@ header h1 {
     color: #ff8623;
 }
 
+.highlight2 {
+    color: orange;
+}
+
+.highlight2:hover {
+    color: #ff8623;
+}
+
 .search:focus {
     outline: none;
     background-color: #22254b;
@@ -777,6 +785,45 @@ header h1 {
     margin-left: 40px;
 }
 
+#my-heading1 {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards 0.5s;
+}
+
 #trivia-btn {
     position: fixed;
     bottom: 60px;
@@ -3579,7 +3626,6 @@ body {
     padding: 10px;
     border-radius: 8px;
     background-color: #7378c5;
-    margin: 0;
     margin-bottom: 2px;
     margin-top: 5px;
     width: 300px;
@@ -3735,7 +3781,6 @@ footer {
         right: 12.5px;
     }
 
-
     .notification-btn {
         right: 12.5px;
     }
@@ -3771,3 +3816,46 @@ footer {
     padding: 20px;
     margin: 20px 0;
 }
+
+@keyframes dropIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: dropIn 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: dropIn 1s ease forwards 1s;
+}
+
+#local-time {
+    cursor: pointer;
+    opacity: 0;
+    animation: dropIn 1s ease forwards 1.5s;
+}
+
+#local-time p,
+#local-time div {
+    opacity: 0;
+    animation: dropIn 1s ease forwards 2s;
+}
diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
@@ -295,7 +295,7 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
 
-        <p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for more than <strong>150,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
+        <p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
 
         <div style="width: 100%">
             <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)">

diff --git a/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Frontend/html/analytics.html
@@ -92,6 +92,36 @@
                 background-position: top center;
             }
         }
+
+        @keyframes fadeInUp {
+            0% {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards;
+        }
+
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards 0.5s;
+        }
     </style>
     <style>
         #translate_control {

diff --git a/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Frontend/html/trivia.html
@@ -82,6 +82,36 @@
             margin-top: 25px;
         }
 
+        @keyframes fadeInUp {
+            0% {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards;
+        }
+
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards 0.5s;
+        }
+
         #form {
             margin-top: 16px;
         }

diff --git a/...eVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css b/...eVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css
@@ -456,6 +456,14 @@ header h1 {
     color: #ff8623;
 }
 
+.highlight2 {
+    color: orange;
+}
+
+.highlight2:hover {
+    color: #ff8623;
+}
+
 .search:focus {
     outline: none;
     background-color: #22254b;
@@ -777,6 +785,45 @@ header h1 {
     margin-left: 40px;
 }
 
+#my-heading1 {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards 0.5s;
+}
+
 #trivia-btn {
     position: fixed;
     bottom: 60px;
@@ -3579,7 +3626,6 @@ body {
     padding: 10px;
     border-radius: 8px;
     background-color: #7378c5;
-    margin: 0;
     margin-bottom: 2px;
     margin-top: 5px;
     width: 300px;
@@ -3735,7 +3781,6 @@ footer {
         right: 12.5px;
     }
 
-
     .notification-btn {
         right: 12.5px;
     }
@@ -3771,3 +3816,46 @@ footer {
     padding: 20px;
     margin: 20px 0;
 }
+
+@keyframes dropIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: dropIn 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: dropIn 1s ease forwards 1s;
+}
+
+#local-time {
+    cursor: pointer;
+    opacity: 0;
+    animation: dropIn 1s ease forwards 1.5s;
+}
+
+#local-time p,
+#local-time div {
+    opacity: 0;
+    animation: dropIn 1s ease forwards 2s;
+}
diff --git a/...erse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html b/...erse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html
@@ -295,7 +295,7 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
 
-        <p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for more than <strong>150,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
+        <p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
 
         <div style="width: 100%">
             <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)">

diff --git a/...-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/analytics.html b/...-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/analytics.html
@@ -92,6 +92,36 @@
                 background-position: top center;
             }
         }
+
+        @keyframes fadeInUp {
+            0% {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards;
+        }
+
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards 0.5s;
+        }
     </style>
     <style>
         #translate_control {