From 8390641d4d1035ff4c25c24523e0ca3fc80e9f23 Mon Sep 17 00:00:00 2001
From: Pragya79645 <pragya220898@gmail.com>
Date: Tue, 15 Oct 2024 16:42:35 +0530
Subject: [PATCH 1/5] petform styled

---
 Website/images.jpeg        | Bin 0 -> 6912 bytes
 Website/nameGenerator.html | 282 ++++++++++++++++---------------------
 2 files changed, 124 insertions(+), 158 deletions(-)
 create mode 100644 Website/images.jpeg

diff --git a/Website/images.jpeg b/Website/images.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..2db8a9aec5d9d2747b534eaf5f0a63cba4042a30
GIT binary patch
literal 6912
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

literal 0
HcmV?d00001

diff --git a/Website/nameGenerator.html b/Website/nameGenerator.html
index b1c5806..e26197f 100644
--- a/Website/nameGenerator.html
+++ b/Website/nameGenerator.html
@@ -1,167 +1,133 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <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>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Pet Name Generator</title>
+  <style>
+    /* Base styles */
+    body {
+      font-family: 'Arial', sans-serif;
+      background-color: #e8f5e9; /* Light green background */
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      background-image: url(../../Hacktoberfest2024/Website/images.jpeg);
+    }
+
+    .container {
+      background-color: white;
+      padding: 40px;
+      border-radius: 15px;
+      box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
+      max-width: 500px;
+      width: 90%;
+      text-align: center;
+    }
+
+    h1 {
+      color: #2e7d32; /* Dark green */
+      font-size: 2.5em;
+      margin-bottom: 20px;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+    }
+
+    input, select {
+      padding: 12px;
+      margin: 10px 0;
+      border: 2px solid #a5d6a7; /* Light green border */
+      border-radius: 8px;
+      font-size: 1.1em;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    button {
+      background-color: #388e3c; /* Medium green */
+      color: white;
+      padding: 14px 20px;
+      font-size: 1.2em;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      margin-top: 20px;
+      transition: background-color 0.3s;
+      width: 100%;
+    }
+
+    button:hover {
+      background-color: #8b3381; /* Darker green on hover */
+    }
+
+    /* Additional styles for generated name */
+    #generatedName {
+      margin-top: 20px;
+      font-size: 1.3em;
+      color: #0c621d; /* Dark green */
+      font-weight: bold;
+    }
+
+    /* Responsive Design */
+    @media (max-width: 600px) {
+      h1 {
+        font-size: 2em;
+      }
+
+      input, select, button {
+        font-size: 1em;
+      }
+    }
+  </style>
 </head>
 <body>
 
-    <!-- Navbar -->
-    <nav>
-        <ul class="nav-links">
-            <li><a href="./HomePage.html">Dashboard</a></li>
-            <li class="center"><a href="./HomePage.html#contributors">Contributors</a></li>
-            <li class="upward"><a href="./HomePage.html#kittens">Kittens</a></li>
-            <li class="forward"><a href="./HomePage.html#puppies">Puppies</a></li>
-            <li class="forward"><a href="nameGenerator.html">Name Your Pet</a></li> <!-- Link to the new page -->
-        </ul>
-    </nav>
-
-    <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>
-            <input type="text" id="first-name" required>
-            <br><br><br>
-            <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>
-            <input type="text" id="animal-category" required>
-            <br><br><br>
-            <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>
-            <input type="text" id="favorite-fruit" required>
-            <br><br><br>
-
-            <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
-
-            // Get user inputs
-            const firstName = document.getElementById('first-name').value;
-            const lastName = document.getElementById('last-name').value;
-            const animalCategory = document.getElementById('animal-category').value;
-            const furColor = document.getElementById('fur-color').value;
-            const favoriteFruit = document.getElementById('favorite-fruit').value;
-
-            // Array of random pet names
-            const petNames = ['Buddy', 'Charlie', 'Max', 'Bella', 'Milo', 'Luna', 'Daisy', 'Rocky', 'Chloe', 'Leo'];
-
-            // Generate a random index based on the length of the array
-            const randomIndex = Math.floor(Math.random() * petNames.length);
-
-            // Get the name at that random index
-            const randomPetName = petNames[randomIndex];
-
-            // Display the generated name
-            document.getElementById('generated-name').textContent = `Your Pet Name: ${randomPetName}`;
-        });
-
-        // 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>
+  <div class="container">
+    <h1>Pet Name Generator</h1>
+    <form id="petNameForm">
+      <input type="text" id="firstName" name="firstName" placeholder="Your First Name" required>
+      <input type="text" id="lastName" name="lastName" placeholder="Your Last Name" required>
+      
+      <select id="animalCategory" name="animalCategory" required>
+        <option value="" disabled selected>Category of Animal</option>
+        <option value="Dog">Dog</option>
+        <option value="Cat">Cat</option>
+        <option value="Bird">Bird</option>
+        <option value="Hamster">Hamster</option>
+      </select>
+      
+      <input type="text" id="furColor" name="furColor" placeholder="Color of Fur" required>
+      <input type="text" id="favoriteFood" name="favoriteFood" placeholder="Favorite Food" required>
+
+      <button type="button" onclick="generatePetName()">Generate Pet Name</button>
+    </form>
+    
+    <p id="generatedName"></p>
+  </div>
+
+  <script>
+    function generatePetName() {
+      const firstName = document.getElementById('firstName').value;
+      const lastName = document.getElementById('lastName').value;
+      const animalCategory = document.getElementById('animalCategory').value;
+      const furColor = document.getElementById('furColor').value;
+      const favoriteFood = document.getElementById('favoriteFood').value;
+
+      if (firstName && lastName && animalCategory && furColor && favoriteFood) {
+        const petName = ${furColor} ${animalCategory} of ${firstName} ${lastName}, Lover of ${favoriteFood};
+        document.getElementById('generatedName').innerText = Your pet name is: ${petName};
+      } else {
+        document.getElementById('generatedName').innerText = 'Please fill in all fields!';
+      }
+    }
+  </script>
 
-    <footer>
-        <p style="text-align: center;">&copy; <span id="year"></span> Hacktoberfest. All rights reserved.</p>
-    </footer>
 </body>
 </html>

From 3ef7d462884d34159e059a0978af7e62d4fea64f Mon Sep 17 00:00:00 2001
From: Pragya79645 <pragya220898@gmail.com>
Date: Tue, 15 Oct 2024 16:48:51 +0530
Subject: [PATCH 2/5] petformmstyled

---
 Website/nameGenerator.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Website/nameGenerator.html b/Website/nameGenerator.html
index e26197f..413911f 100644
--- a/Website/nameGenerator.html
+++ b/Website/nameGenerator.html
@@ -101,6 +101,7 @@ <h1>Pet Name Generator</h1>
         <option value="Cat">Cat</option>
         <option value="Bird">Bird</option>
         <option value="Hamster">Hamster</option>
+        <option value="Parrot">Parrot</option>
       </select>
       
       <input type="text" id="furColor" name="furColor" placeholder="Color of Fur" required>

From a8415c220e2b101a8e412b3f3f23cab8eefaee75 Mon Sep 17 00:00:00 2001
From: Pragya79645 <pragya220898@gmail.com>
Date: Fri, 18 Oct 2024 21:55:29 +0530
Subject: [PATCH 3/5] change

---
 Website/nameGenerator.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Website/nameGenerator.html b/Website/nameGenerator.html
index f9f64ac..7d0da3a 100644
--- a/Website/nameGenerator.html
+++ b/Website/nameGenerator.html
@@ -102,6 +102,7 @@ <h1>Pet Name Generator</h1>
         <option value="Bird">Bird</option>
         <option value="Hamster">Hamster</option>
         <option value="Parrot">Parrot</option>
+        <option value="Rabbit">Rabbit</option>
       </select>
       
       <input type="text" id="furColor" name="furColor" placeholder="Color of Fur" required>

From cd71c4548e0bdcfa38a86935cf535f942f18faa3 Mon Sep 17 00:00:00 2001
From: Pragya79645 <pragya220898@gmail.com>
Date: Sat, 19 Oct 2024 17:54:53 +0530
Subject: [PATCH 4/5] change

---
 Website/nameGenerator.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Website/nameGenerator.html b/Website/nameGenerator.html
index 7d0da3a..7921fa4 100644
--- a/Website/nameGenerator.html
+++ b/Website/nameGenerator.html
@@ -30,7 +30,7 @@
     }
 
     h1 {
-      color: #2e7d32; /* Dark green */
+      color: #37923b; /* Dark green */
       font-size: 2.5em;
       margin-bottom: 20px;
     }

From 462850c2479f37a1763b0fe3ae62e48ed99379e1 Mon Sep 17 00:00:00 2001
From: Pragya79645 <pragya220898@gmail.com>
Date: Sat, 19 Oct 2024 18:02:36 +0530
Subject: [PATCH 5/5] chnge

---
 Website/nameGenerator.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/Website/nameGenerator.html b/Website/nameGenerator.html
index 7921fa4..0c67a85 100644
--- a/Website/nameGenerator.html
+++ b/Website/nameGenerator.html
@@ -5,6 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Pet Name Generator</title>
+  
+</head>
+<body>
   <style>
     /* Base styles */
     body {
@@ -86,8 +89,6 @@
       }
     }
   </style>
-</head>
-<body>
 
   <div class="container">
     <h1>Pet Name Generator</h1>