Skip to content

Commit

Permalink
Final: Enhance app functionalities (#196)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoangsonww
hoangsonww committed Jan 17, 2025
1 parent ea545c6 commit b6cbfc9
Show file tree
Hide file tree
Showing 33 changed files with 252 additions and 855 deletions.
38 changes: 38 additions & 0 deletions ...eVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1058,6 +1058,44 @@ header h1 {
animation: fadeInUp 1s ease forwards 0.5s;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}

#trivia-btn {
position: fixed;
bottom: 60px;
Expand Down
38 changes: 19 additions & 19 deletions ...erse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,25 +364,25 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
</ul>
</nav>
<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">
<h2 id="aboutHeader" style="align-self: center; cursor: pointer; animation: fadeIn 1.5s ease-in-out">About The MovieVerse</h2>
<p style="color: white; text-align: center; animation: fadeIn 1.5s ease-in-out">
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 nearly
<strong>one million</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.
</p>
<div style="width: 100%">
<div style="width: 100%; animation: fadeIn 1.5s ease-in-out">
<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 style="color: white; text-align: center; width: 100%">Thank you for visiting MovieVerse today! 🎬🍿</p>
<h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
<p style="animation: fadeIn 1.5s ease-in-out; color: white; text-align: center; width: 100%">Thank you for visiting MovieVerse today! 🎬🍿</p>
<h3 id="subheading1" style="cursor: pointer; animation: fadeIn 1.5s ease-in-out">Core Features:</h3>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<ul style="align-content: center; color: white">
<ul style="align-content: center; color: white; animation: fadeIn 1.5s ease-in-out">
<li>
<i style="margin-right: 3px" class="fas fa-film"></i>
<strong>Curated Movie Collections:</strong> Explore an array of movies categorized by genre, director, language, and era, including
Expand Down Expand Up @@ -452,14 +452,14 @@ <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.
</li>
</ul>
<h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
<p style="color: white; text-align: center; margin-bottom: 12px">
<h3 id="subheading2" style="animation: fadeIn 1.5s ease-in-out; cursor: pointer">Explore Our Other Apps:</h3>
<p style="color: white; text-align: center; margin-bottom: 12px; animation: fadeIn 1.5s ease-in-out">
Like MovieVerse, our other apps are designed to enhance your daily life and help you stay organized, focused, and informed. Check out our
other apps below, or visit my
<a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww">GitHub profile</a>
for more!
</p>
<ul style="align-content: center; color: white">
<ul style="animation: fadeIn 1.5s ease-in-out; align-content: center; color: white">
<li>
<p style="color: black; text-align: center">
Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by
Expand All @@ -486,32 +486,32 @@ <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
<button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
</li>
</ul>
<h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
<p style="color: white; text-align: center">
<h3 id="subheading" style="animation: fadeIn 1.5s ease-in-out; cursor: pointer">Our Vision:</h3>
<p style="animation: fadeIn 1.5s ease-in-out; color: white; text-align: center">
Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database;
it's a vibrant community and a hub for sharing cinematic experiences and insights.
</p>
<h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
<p style="color: white; text-align: center">
<h3 id="subheading3" style="animation: fadeIn 1.5s ease-in-out; cursor: pointer">Join The Journey:</h3>
<p style="animation: fadeIn 1.5s ease-in-out; color: white; text-align: center">
We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations
and social integration for shared movie experiences.
</p>
<br />
<p style="color: white; text-align: center">
<p style="animation: fadeIn 1.5s ease-in-out; color: white; text-align: center">
Become a part of The MovieVerse community today. Your engagement and feedback are invaluable to us. Together, let's celebrate the wonder of
movies!
</p>
<br />
<p style="color: white; text-align: center">
<p style="animation: fadeIn 1.5s ease-in-out; 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
<strong><a style="color: #ff8623" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a></strong
>.
<i style="margin-left: 3px" class="fab fa-github"></i>
</em>
</p>
<h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
<p style="color: white; text-align: center">
<h3 id="subheading4" style="animation: fadeIn 1.5s ease-in-out; cursor: pointer">Useful Links:</h3>
<p style="animation: fadeIn 1.5s ease-in-out; color: white; text-align: center">
Here are some links that you might find useful: You can explore the
<a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a>
of our database, read our
Expand All @@ -523,15 +523,15 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
if you have any questions or concerns!
</p>
<br />
<p style="color: white; text-align: center">
<p style="animation: fadeIn 1.5s ease-in-out; color: white; text-align: center">
You're also encouraged to
<a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a>
and join our
<a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a>
to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!
</p>
<br />
<p style="color: white; text-align: center">
<p style="animation: fadeIn 1.5s ease-in-out; color: white; text-align: center">
If you are also interested in the website's creator and developer, feel free to visit my
<a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
<button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
Expand Down
52 changes: 4 additions & 48 deletions ...ile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/catch-popcorn.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@
gtag('config', 'G-CQKJ67FXZ4');
</script>
<style>
/* Global Styles */
body {
font-family: 'Poppins', sans-serif;
margin: 0;
Expand All @@ -63,39 +62,31 @@
color: #ffffff;
text-align: center;
overflow-x: hidden;
/* Ensures content spans at least 100vh */
min-height: 100vh;
background-image: url('../../images/universe-1.webp');
background-repeat: repeat-y;
background-size: 100% auto;
}

h2 {
margin: 50px 0;
font-size: 2.2rem;
color: #ff8623;
animation: fadeInDown 1s ease-in-out;
}

/* Container for the cards */
.container {
/* Fixed 3x3 grid */
display: grid !important;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
justify-items: center;
/* Reduced gap for closer cards */
gap: 10px;
padding: 20px;
animation: fadeIn 1.5s ease-in-out;
}

/* Card Styling */
.card {
display: flex; /* <--- NEW */
flex-direction: column; /* <--- NEW */
align-items: center; /* <--- NEW */
justify-content: center; /* <--- NEW */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #2e2e3e;
border-radius: 10px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
Expand All @@ -109,27 +100,20 @@
position: relative;
overflow: hidden;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* Icon Styling */
.card i {
font-size: 3rem;
margin-bottom: 10px;
color: #ff8623;
animation: bounce 2s infinite;
}

/* Card Text */
.card p {
font-size: 1.2rem;
margin: 10px 0;
}

/* Link Styling */
.card a {
display: inline-block;
font-size: 1rem;
Expand All @@ -143,20 +127,16 @@
background-color 0.3s ease,
transform 0.2s;
}

.card a:hover {
background-color: #ff8623;
transform: scale(1.1);
}

h2 {
margin: 50px 0;
font-size: 2.2rem;
color: #ff8623;
animation: fadeInDown 1s ease-in-out;
}

/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
Expand All @@ -167,7 +147,6 @@
transform: translateY(0);
}
}

@keyframes fadeInDown {
from {
opacity: 0;
Expand All @@ -178,7 +157,6 @@
transform: translateY(0);
}
}

@keyframes bounce {
0%,
20%,
Expand All @@ -194,21 +172,16 @@
transform: translateY(-5px);
}
}

/* Responsive Design */
@media (max-width: 600px) {
.container {
/* Use auto-fit so cards will reflow properly on smaller screens */
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-template-rows: auto;
}
.card {
/* Keep a consistent look while adapting to narrower widths */
width: 180px;
height: 240px;
}
}

#translate_control {
position: fixed;
left: 10px;
Expand Down Expand Up @@ -316,11 +289,9 @@
margin-top: 25px;
}
}

p {
animation: fadeInDown 1s ease-in-out;
}

#games-button {
background-color: #7378c5;
bottom: 265px;
Expand Down Expand Up @@ -707,21 +678,6 @@ <h2>Catch the Popcorn</h2>
}
});

document.getElementById('actor-image').addEventListener('click', function () {
const imageUrl = this.src.replace('w1280', 'original');
const modalHtml = `<div id="image-modal" style="z-index: 100020000; 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: 95%; max-height: 95%; 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();
}
});
});

window.addEventListener('resize', () => {
if (window.innerWidth < 767) {
const buttonIds = [
Expand Down
Loading

0 comments on commit b6cbfc9

Please sign in to comment.