Merge pull request #38 from AdityaSinha2305/feature

Feat: Real pet-name added and updated form, enhancements added to the website

Website/HomePage.css

@@ -262,7 +262,9 @@ body.dark-mode nav {
 }
 
 /* Other existing styles... */
+/* Form styling starts */
 
+/* Form styling */
 #pet-name-form {
   background-color: #ed6d1e;
   border-radius: 25px;
@@ -273,6 +275,7 @@ body.dark-mode nav {
   width: 100%;              /* Responsive width */
 }
 
+/* Input area styling */
 input[type="text"] {
   width: 100%;
   padding: 8px;
@@ -282,6 +285,7 @@ input[type="text"] {
 }
 
 
+/* Button styling */
 button {
   width: 100%;
   font-size: medium;
@@ -298,7 +302,8 @@ button:hover {
 }
 
 #generated-name {
-  background-color: #a51eed;
+  background-color: #efe22f;
+  color: #141111;
   visibility: hidden;
   border-radius: 25px;
   padding: 25px; 
@@ -308,47 +313,56 @@ button:hover {
 }
 
 
-<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;
-  }
+/* Form styling ends */
 
-  /* 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;
-  }
+/* Basic contributor grid styling */
+.contributor-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
 
-  .contributor a:hover {
-    color: #007BFF;
-  }
-</style>
- main
+/* 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;
+}
+
+
+/* Card comment */
+#action {
+  color: #000000;
+  text-align: justify;
+}

Website/HomePage.html → Website/dashboard.html

@@ -114,8 +114,7 @@
       <li class="center"><a href="#contributors">Contributors</a></li>
       <li class="upward"><a href="#kittens">Kittens</a></li>
       <li class="forward"><a href="#puppies">Puppies</a></li>
-      <li class="auth"><a href="./login.html">Login</a></li> <!-- Login Page Working -->
-      <li class="forward"><a href="./nameGenerator.html">Name Your Pet</a></li>
+      <li class="forward"><a href="./pet.html">Name Your Pet</a></li>
 
       <!-- Login buttons (Google and Facebook) -->
       <li id="login-buttons">
@@ -126,10 +125,10 @@
       <li id="user-name" style="float: right; margin-right: 20px;"></li>
     </ul>
 
-    <!-- Dark Mode Toggle -->
+    <!-- Dark Mode Toggle
     <button id="dark-mode-toggle" class="dark-mode-toggle">
       🌙/☀️
-    </button>
+    </button> -->
   </nav>
 
   <!-- Contributors Section -->
@@ -200,7 +199,7 @@ <h2>Cute Puppies</h2>
                       <img src="${avatar_img}" alt="Contributor Avatar">
                       <a href="${contributor.github_url}" target="_blank">${contributor.name}</a>
                       <br>
-                      <p>${contributor.action}</p>
+                      <p id="action">${contributor.action}</p>
                     `;
                   }
                 });