-
-
-
Discover Our Library
-Review And Collect Your Games
-Create a free account or log in to start your journey.
-
- Create a Free Account
- Log In
+
+
+
+
+
+
+ 
+
+
-
+
+
+
- Discover Our Library
+Review And Collect Your Games
+Create a free account or log in to start your journey.
+
- Scroll Down
-
-
-
-
-
+
-
+ Scroll Down
+ +
+ +
-
-
What Is GAMELIB?
-- GAMELIB is the ultimate platform for gamers. Track your game collection, review the games you love, and - add upcoming titles to your library. Join a vibrant community of gaming enthusiasts today! -
-
-
-
-
- 
+ 
+
+
+
Track Your Games
-Keep an organized list of all your favorite games in one place.
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/GameLibrary/wwwroot/css/site.css b/GameLibrary/wwwroot/css/site.css
index 19e4fdd..a48b3d5 100644
--- a/GameLibrary/wwwroot/css/site.css
+++ b/GameLibrary/wwwroot/css/site.css
@@ -20,18 +20,18 @@ h1 {
color: #FFD43B;
}
- .nav-link:hover {
- color: #FFA500;
- }
+.nav-link:hover {
+ color: #FFA500;
+}
.btn {
background-color: #420599;
color: #FFD43B;
}
- .btn:hover {
- background-color: #5935c4;
- }
+.btn:hover {
+ background-color: #5935c4;
+}
.container {
width: 90%;
@@ -69,18 +69,19 @@ h1 {
animation: fadeIn 1.5s ease-in-out;
}
- .hero-text h1 {
- font-size: 4em;
- font-weight: bold;
- text-transform: uppercase;
- }
+.hero-text h1 {
+ font-size: 4em;
+ font-weight: bold;
+ text-transform: uppercase;
+}
- .hero-text h2 {
- margin-top: 0.5em;
- font-size: 1.8em;
- }
+.hero-text h2 {
+ margin-top: 0.5em;
+ font-size: 1.8em;
+}
-.cta-button, .login-button {
+.cta-button,
+.login-button {
margin-top: 20px;
font-size: 1.2em;
display: inline-block;
@@ -93,11 +94,12 @@ h1 {
transition: background-color 0.3s, border-color 0.3s;
}
- .cta-button:hover, .login-button:hover {
- background-color: #FF8C00;
- color: white;
- border-color: #FF8C00;
- }
+.cta-button:hover,
+.login-button:hover {
+ background-color: #FF8C00;
+ color: white;
+ border-color: #FF8C00;
+}
.scroll-indicator {
position: absolute;
@@ -120,11 +122,11 @@ h1 {
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}
- .about-section h2 {
- font-size: 2.5em;
- color: #FFD700;
- margin-bottom: 20px;
- }
+.about-section h2 {
+ font-size: 2.5em;
+ color: #FFD700;
+ margin-bottom: 20px;
+}
.feature-card {
background: #000235;
@@ -134,20 +136,20 @@ h1 {
transition: transform 0.3s, box-shadow 0.3s;
}
- .feature-card:hover {
- transform: translateY(-5px);
- box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
- }
+.feature-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+}
- .feature-card i {
- font-size: 2.5em;
- color: #FFD700;
- margin-bottom: 10px;
- }
+.feature-card i {
+ font-size: 2.5em;
+ color: #FFD700;
+ margin-bottom: 10px;
+}
- .feature-card h5 {
- color: white;
- }
+.feature-card h5 {
+ color: white;
+}
/* Footer */
.footer {
@@ -159,13 +161,13 @@ h1 {
color: white;
}
- .footer a {
- color: #FFD700;
- }
+.footer a {
+ color: #FFD700;
+}
- .footer a:hover {
- color: #FFA500;
- }
+.footer a:hover {
+ color: #FFA500;
+}
/* Keyframes for animations */
@keyframes fadeIn {
@@ -181,7 +183,9 @@ h1 {
}
@keyframes bounce {
- 0%, 100% {
+
+ 0%,
+ 100% {
transform: translateY(0);
}
diff --git a/GameLibrary/wwwroot/images/RRspaceship.webp b/GameLibrary/wwwroot/images/RRspaceship.webp
new file mode 100644
index 0000000..187703b
Binary files /dev/null and b/GameLibrary/wwwroot/images/RRspaceship.webp differ
diff --git a/GameLibrary/wwwroot/images/Ufo-spaceship.webp b/GameLibrary/wwwroot/images/Ufo-spaceship.webp
new file mode 100644
index 0000000..6ebd704
Binary files /dev/null and b/GameLibrary/wwwroot/images/Ufo-spaceship.webp differ
diff --git a/GameLibrary/wwwroot/images/chevron-double-down.webp b/GameLibrary/wwwroot/images/chevron-double-down.webp
new file mode 100644
index 0000000..d2ac1e6
Binary files /dev/null and b/GameLibrary/wwwroot/images/chevron-double-down.webp differ
diff --git a/GameLibrary/wwwroot/js/site.js b/GameLibrary/wwwroot/js/site.js
index d3b693e..d94f18e 100644
--- a/GameLibrary/wwwroot/js/site.js
+++ b/GameLibrary/wwwroot/js/site.js
@@ -1,4 +1,4 @@
-function previewImage(event) {
+function previewImage(event) {
const files = event.target.files;
if (files.length > 0) {
const preview = document.getElementById('imagePreview');
@@ -6,3 +6,105 @@
preview.style.display = 'block';
}
}
+
+// Function to get a random integer between min and max (inclusive)
+function getRandomInt(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// Function to get a random integer between min and max (inclusive)
+function getRandomInt1(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// Flight path configuration for the first spaceship
+const flightPath = {
+ curviness: 1.5,
+ autoRotate: true,
+ values: Array.from({ length: 15 }, (_, i) => ({
+ x: window.innerWidth * (i + 1) * 0.1,
+ y: window.innerHeight * getRandomInt(-10, -1) * 0.1
+ }))
+};
+
+// Flight path configuration for the second spaceship
+const flightPath1 = {
+ curviness: 1.5,
+ autoRotate: false,
+ values: Array.from({ length: 15 }, (_, i) => ({
+ x: window.innerWidth * (i + 1) * -0.1,
+ y: window.innerHeight * getRandomInt1(-10, -1) * 0.1
+ }))
+};
+
+// Create a new timeline for the first spaceship animation
+const tween = new TimelineLite();
+
+// Create a new timeline for the second spaceship animation
+const tween1 = new TimelineLite();
+
+// Add the first spaceship animation to the timeline
+tween.add(
+ TweenLite.to(".RRspaceship", 60, {
+ bezier: flightPath,
+ ease: Power1.easeInOut
+ })
+);
+
+// Add the second spaceship animation to the timeline
+tween1.add(
+ TweenLite.to(".Uspaceship", 60, {
+ bezier: flightPath1,
+ ease: Power1.easeInOut
+ })
+);
+
+// Animate hero section elements on page load
+document.addEventListener("DOMContentLoaded", function () {
+ const heroTitle = document.getElementsByClassName("hero-title")[0];
+ const heroSubtitle = document.getElementsByClassName("hero-subtitle")[0];
+ const heroDescription = document.getElementsByClassName("hero-description")[0];
+ const heroButtons = document.getElementsByClassName("hero-buttons")[0];
+
+ // Set initial opacity to 0 for all hero section elements
+ TweenLite.set([heroTitle, heroSubtitle, heroDescription, heroButtons], { opacity: 0 });
+
+ // Animate opacity to 1 with delays
+ TweenLite.to(heroTitle, 1, { opacity: 1, delay: 1 });
+ TweenLite.to(heroSubtitle, 1, { opacity: 1, delay: 3 });
+ TweenLite.to(heroDescription, 1, { opacity: 1, delay: 5 });
+ TweenLite.to(heroButtons, 1, { opacity: 1, delay: 8 });
+});
+
+// Add hover and touch effects to feature cards
+document.addEventListener('DOMContentLoaded', function () {
+ const featureCards = document.querySelectorAll('.feature-card');
+
+ // Desktop screen size
+ featureCards.forEach(card => {
+ card.addEventListener('mouseover', function () {
+ card.style.transform = 'translateY(-1rem)';
+ card.style.boxShadow = '0px 1rem 3rem rgba(138, 43, 226, 1)';
+ });
+
+ card.addEventListener('mouseout', function () {
+ card.style.transform = 'translateY(0)';
+ card.style.boxShadow = '0 .125rem .25rem rgba(0, 0, 0, .075)';
+ });
+ });
+
+ // Mobile screen size
+ if (window.innerWidth <= 600) {
+ featureCards.forEach(card => {
+ card.addEventListener('touchstart', function () {
+ card.style.transform = 'translateY(-1rem)';
+ card.style.boxShadow = '0px 1rem 3rem rgba(138, 43, 226, 1)';
+ });
+
+ card.addEventListener('touchend', function () {
+ card.style.transform = 'translateY(0)';
+ card.style.boxShadow = '0 .125rem .25rem rgba(0, 0, 0, .075)';
+ });
+ });
+ }
+});
+
-What Is GameLibrary?
++ GameLibrary is the ultimate platform for gamers. Track your game collection, review the games you + love, and + add upcoming titles to your library. Join a vibrant community of gaming enthusiasts today! +
+
+
-
+
-
+
+
Track Your Games
+Keep an organized list of all your favorite games in one place.
+
-
-
-
-
- Review & Share
-Share your reviews and ratings with the gaming community.
+
+
-
+
+
Review & Share
+Share your reviews and ratings with the gaming community.
+
-
-
-
Plan for the Future
-Stay updated with upcoming game releases and add them to your wishlist.
+
+
+
+
Plan for the Future
+Stay updated with upcoming game releases and add them to your wishlist.
+