Merge pull request #32 from dhruvabisht/main

Animation added to the main website acts as an enhancement to the pre-existing website pages.
cocomantis · Oct 14, 2024 · 6f5bfc9 · 6f5bfc9
2 parents a322b78 + 3beea05
commit 6f5bfc9
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 21 deletions.
diff --git a/Website/HomePage.css b/Website/HomePage.css
@@ -234,4 +234,49 @@ button:hover {
   margin-left: 530px;
   max-width: 450px; 
   width: 100%;  /* Responsive width */
-}
+}
+
+
+<style>
+  /* Basic contributor grid styling */
+  .contributor-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+
+  /* Contributor profile styling */
+  .contributor {
+    width: 200px;
+    text-align: center;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: relative;
+  }
+
+  /* Animation for hovering over the profile */
+  .contributor:hover {
+    transform: translateY(-15px);  /* Float up effect */
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Increase shadow to enhance floating look */
+  }
+
+  /* Contributor images */
+  .contributor img {
+    width: 100%;
+    border-radius: 50%;
+  }
+
+  .contributor a {
+    text-decoration: none;
+    color: #333;
+    font-weight: bold;
+  }
+
+  .contributor a:hover {
+    color: #007BFF;
+  }
+</style>
diff --git a/Website/HomePage.html b/Website/HomePage.html
@@ -64,6 +64,45 @@
     #login-buttons button:hover {
       background-color: #45a049;
     }
+
+    /* Contributor grid and hover effect */
+    .contributor-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+
+    .contributor {
+      width: 200px;
+      text-align: center;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      background-color: #f9f9f9;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      position: relative;
+    }
+
+    .contributor:hover {
+      transform: translateY(-15px);  /* Float up effect */
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Enhance shadow */
+    }
+
+    .contributor img {
+      width: 100%;
+      border-radius: 50%;
+    }
+
+    .contributor a {
+      text-decoration: none;
+      color: #333;
+      font-weight: bold;
+    }
+
+    .contributor a:hover {
+      color: #007BFF;
+    }
   </style>
 </head>
 <body>
@@ -129,13 +168,11 @@ <h2>Cute Puppies</h2>
     <p> &copy; <span id="year"></span> Hacktoberfest. All rights reserved.</p>
   </footer>
 
-
-
   <!-- Facebook Login Logic -->
   <script>
     window.fbAsyncInit = function() {
       FB.init({
-        appId      : '564187956294759',
+        appId      : 'YOUR_FACEBOOK_APP_ID',
         cookie     : true,
         xfbml      : true,
         version    : 'v16.0'

diff --git a/Website/nameGenerator.html b/Website/nameGenerator.html
@@ -5,6 +5,75 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Name Your Pets</title>
     <link rel="stylesheet" href="./HomePage.css">
+
+    <style>
+        /* Style for the cloud */
+        .cloud {
+            position: absolute;
+            display: none;
+            width: 120px;
+            height: 80px;
+            background-color: #f0f0f0;
+            border-radius: 60px;
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+            opacity: 0.8;
+            z-index: -1;
+            animation: float 4s infinite ease-in-out;
+        }
+
+        /* Additional cloud circles to make it fluffy */
+        .cloud:before, .cloud:after {
+            content: '';
+            position: absolute;
+            background-color: #f0f0f0;
+            z-index: -1;
+        }
+
+        .cloud:before {
+            width: 80px;
+            height: 80px;
+            top: -40px;
+            left: 15px;
+            border-radius: 50%;
+        }
+
+        .cloud:after {
+            width: 60px;
+            height: 60px;
+            top: -30px;
+            right: 15px;
+            border-radius: 50%;
+        }
+
+        /* Animation for the cloud to float up and down */
+        @keyframes float {
+            0% {
+                transform: translateY(0px);
+            }
+            50% {
+                transform: translateY(-15px);
+            }
+            100% {
+                transform: translateY(0px);
+            }
+        }
+
+        /* Style for the Generate Name button */
+        button {
+            position: relative;
+            padding: 10px 20px;
+            font-size: 18px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: #45a049;
+        }
+    </style>
 </head>
 <body>
 
@@ -22,30 +91,30 @@
     <section id="name-your-pet">
         <h2>Generate a Random Pet Name</h2>
         <form id="pet-name-form">
-            <label for="first-name">Your First Name</label>
+            <label for="first-name">Your First Name:</label>
             <input type="text" id="first-name" required>
             <br><br><br>
-            <label for="last-name">Your Last Name</label>
+            <label for="last-name">Your Last Name:</label>
             <input type="text" id="last-name" required>
             <br><br><br>
-            <label for="animal-category">Category of Animal</label>
+            <label for="animal-category">Category of Animal:</label>
             <input type="text" id="animal-category" required>
             <br><br><br>
-            <label for="fur-color">Color of Fur</label>
+            <label for="fur-color">Color of Fur:</label>
             <input type="text" id="fur-color" required>
             <br><br><br>
-            <label for="favorite-fruit">Favorite Food</label>
+            <label for="favorite-fruit">Favorite Food:</label>
             <input type="text" id="favorite-fruit" required>
             <br><br><br>
-            <button type="submit">Generate Name</button>
+
+            <button type="submit" id="generate-btn">Generate Name</button>
+            <div class="cloud" id="cloud"></div> <!-- Cloud element -->
         </form>
 
         <br><br><br>
         <h3 id="generated-name"></h3>
     </section>
 
-
-
     <script>
         document.getElementById('pet-name-form').addEventListener('submit', function(event) {
             event.preventDefault(); // Prevent the form from submitting
@@ -57,10 +126,6 @@ <h3 id="generated-name"></h3>
             const furColor = document.getElementById('fur-color').value;
             const favoriteFruit = document.getElementById('favorite-fruit').value;
 
-            // Generate the pet name
-
-            // const petName = `${animalCategory} ${furColor} ${firstName} ${favoriteFruit} ${lastName}`;
-
             // Array of random pet names
             const petNames = ['Buddy', 'Charlie', 'Max', 'Bella', 'Milo', 'Luna', 'Daisy', 'Rocky', 'Chloe', 'Leo'];
 
@@ -69,20 +134,34 @@ <h3 id="generated-name"></h3>
 
             // Get the name at that random index
             const randomPetName = petNames[randomIndex];
-            
+
             // Display the generated name
             document.getElementById('generated-name').textContent = `Your Pet Name: ${randomPetName}`;
-            document.getElementById('generated-name').style.visibility = "visible";
+        });
+
+        // Handle hovering to show the cloud animation
+        const generateBtn = document.getElementById('generate-btn');
+        const cloud = document.getElementById('cloud');
+
+        generateBtn.addEventListener('mouseenter', function() {
+            // Position the cloud relative to the button
+            const rect = generateBtn.getBoundingClientRect();
+            cloud.style.display = 'block';
+            cloud.style.left = rect.left + 'px';
+            cloud.style.top = (rect.top - 100) + 'px'; // Position above the button
+        });
+
+        generateBtn.addEventListener('mouseleave', function() {
+            // Hide the cloud when not hovering
+            cloud.style.display = 'none';
         });
 
         // Update the footer year
         document.getElementById('year').textContent = new Date().getFullYear();
     </script>
 
-
     <footer>
-        <p style="text-align: center;"> &copy; <span id="year"></span> Hacktoberfest. All rights reserved.</p>
+        <p style="text-align: center;">&copy; <span id="year"></span> Hacktoberfest. All rights reserved.</p>
     </footer>
-
 </body>
 </html>