diff --git a/Dachshund.jpg b/Dachshund.jpg new file mode 100644 index 0000000..baef2be Binary files /dev/null and b/Dachshund.jpg differ diff --git a/Pomeranian.jpg b/Pomeranian.jpg new file mode 100644 index 0000000..d33c5a5 Binary files /dev/null and b/Pomeranian.jpg differ diff --git a/Shih Tzu.jpg b/Shih Tzu.jpg new file mode 100644 index 0000000..bf5b742 Binary files /dev/null and b/Shih Tzu.jpg differ diff --git a/Siberian Husky.jpg b/Siberian Husky.jpg new file mode 100644 index 0000000..ee541bf Binary files /dev/null and b/Siberian Husky.jpg differ diff --git a/Website/Contributor_list.json b/Website/Contributor_list.json index 86f1350..1beba4a 100644 --- a/Website/Contributor_list.json +++ b/Website/Contributor_list.json @@ -23,5 +23,11 @@ "name":"Austin Varshney", "action":"Made the Proper Indentation of the Body and Improvements in the Form", "github_url": "https://github.com/AustinVarshney" + }, + { + "name":"Swapnanil Manna", + "action":"Added Dog Breed Section and Reformat This Webpage.", + "github_url": "https://github.com/Swapnanilmanna1701" } + ] diff --git a/Website/HomePage.css b/Website/HomePage.css index 59a3eef..e4808e1 100644 --- a/Website/HomePage.css +++ b/Website/HomePage.css @@ -262,9 +262,7 @@ body.dark-mode nav { } /* Other existing styles... */ -/* Form styling starts */ -/* Form styling */ #pet-name-form { background-color: #ed6d1e; border-radius: 25px; @@ -275,7 +273,6 @@ body.dark-mode nav { width: 100%; /* Responsive width */ } -/* Input area styling */ input[type="text"] { width: 100%; padding: 8px; @@ -285,7 +282,6 @@ input[type="text"] { } -/* Button styling */ button { width: 100%; font-size: medium; @@ -302,8 +298,7 @@ button:hover { } #generated-name { - background-color: #efe22f; - color: #141111; + background-color: #a51eed; visibility: hidden; border-radius: 25px; padding: 25px; @@ -313,56 +308,47 @@ button:hover { } + + main diff --git a/Website/dashboard.html b/Website/HomePage.html similarity index 60% rename from Website/dashboard.html rename to Website/HomePage.html index f653a06..69858fb 100644 --- a/Website/dashboard.html +++ b/Website/HomePage.html @@ -111,10 +111,11 @@ + - -
-

Hacktoberfest Contributors

-
- -
-
+
@@ -154,75 +148,14 @@

Adorable Kittens

- -
-

Cute Puppies

-
-
- Puppy - Meet the Puppies -
-
- Puppy - Puppy Cuteness Overload -
-
-
+ - + + + + \ No newline at end of file diff --git a/Website/dog.html b/Website/dog.html new file mode 100644 index 0000000..09044c6 --- /dev/null +++ b/Website/dog.html @@ -0,0 +1,106 @@ + + + + + + + Dog's Corner + + + + + + + + +
+
+ + + + + + + + + + + +
+
+
+ +
+
+
+

This

+

This

+

This

+

This

+

This

+

This

+

This

+

This

+

This

+

This

+

This

+
+
+

Is German

+

Is Golden

+

Is

+

Is

+

Is Dogo

+

Is

+

Is

+

Is

+

Is

+

Is

+

Is Siberian

+
+
+

-Shepherd

+

-Retriever

+

Beagle

+

Dachshund

+

-Argentino

+

Pitbull

+

Pug

+

Pomeranian

+

Great Dane

+

Rottweiler

+

Husky

+
+ + +
+
+ +
+

+ + + +
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/Website/dogs.css b/Website/dogs.css new file mode 100644 index 0000000..1e6e024 --- /dev/null +++ b/Website/dogs.css @@ -0,0 +1,311 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; + } + + body { + font-family: 'Arial', sans-serif; + background: linear-gradient(45deg, #ff007f, #ff8c00, #00ffbf, #00f7ff, #9400d3, #ff007f); + background-size: 300% 300%; + animation: gradientMove 10s ease infinite; + color: white; + justify-content: center; + align-items: center; + height: 100vh; + } + + + nav { + justify-content: center; + align-items: center; + width: 100%; + } + + .nav-links { + position: fixed; + width: 100%; + top: 0; + background-color: #007acc; + padding: 10px 0; + z-index: 1000; + } + + .nav-links { + display: flex; + align-items: center; + justify-content: center; + background: #8E44AD; + padding: 20px 15px; + border-radius: 12px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + } + + .nav-links li { + list-style: none; + margin: 0 12px; + } + + .nav-links li a { + position: relative; + color: #FAFAFA; + font-size: 20px; + font-weight: 500; + padding: 6px 0; + text-decoration: none; + } + + .nav-links li a:before { + content: ''; + position: absolute; + bottom: 0; + left: 0; + height: 3px; + width: 0%; + background: linear-gradient(45deg, #ff007f, #ff8c00, #00ffbf, #00f7ff, #9400d3, #ff007f); + background-size: 100% 100%; + animation: gradientMove 1s ease infinite; + border-radius: 12px; + transition: all 0.4s ease; + } + + .nav-links li a:hover:before { + width: 100%; + } + + section { + padding: 80px 0; + text-align: center; + } + + h2 { + font-size: 36px; + color: white; + margin-bottom: 20px; + } + + .contributor-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 20px; + padding: 20px; + max-width: 1000px; + margin: 0 auto; + } + + .contributor { + background-color: #8E44AD; + border-radius: 10px; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + } + + .contributor:hover { + transform: scale(1.05); + } + + .contributor img { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 10px; + } + + .contributor a { + text-decoration: none; + color: white; + font-size: 18px; + font-weight: bold; + margin-top: 10px; + display: block; + } + + #pet-name-form button{ + height: 3rem; + padding: 0 1.5rem; + border-radius: 0.75rem; + border: none; + background-color: #d60bd6; + color: white; + font-size: 1.25rem; + cursor: pointer; + } + + #pet-name-form button:hover{ + background-color: #ef1bef; + outline: 1px solid purple; + } + + #pet-name-form button:active{ + background-color: rgb(240, 115, 240); + } + + #generated-name{ + -webkit-text-stroke-width: 0.5px; + -webkit-text-stroke-color: #c900ff; + color: #f799f7; + font-size: 2rem; + } + + /* Responsive Media Queries */ + @media (max-width: 768px) { + /* Navbar */ + .nav-links { + flex-direction: column; + padding: 10px; + } + + .nav-links li { + margin: 10px 0; + } + + body{ + padding-top: 236px; + } + + + .contributor-grid { + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 15px; + padding: 10px; + } + + + section { + padding: 50px 20px; + } + + + h2 { + font-size: 28px; + } + } + + @media (max-width: 480px) { + /* Navbar */ + .nav-links { + flex-direction: column; + padding: 8px; + } + + .nav-links li { + margin: 8px 0; + } + + + .contributor-grid { + grid-template-columns: 1fr; + gap: 10px; + padding: 5px; + } + + + section { + padding: 40px 15px; + } + + + h2 { + font-size: 24px; + } + + + .contributor img { + height: 150px; + } + + .contributor a { + font-size: 16px; + } + } + + + + main + /* Dark Mode Styles */ + body.dark-mode { + background: linear-gradient(45deg, #2c3e50, #34495e, #16a085, #27ae60, #2980b9); + background-size: 300% 300%; + color: #f0f0f0; + } + + body.dark-mode .contributor { + background-color: #2c3e50; + } + + body.dark-mode nav { + background-color: #34495e; + } + + /* Dark Mode Toggle Button */ + .dark-mode-toggle { + position: fixed; + top: 85px; + z-index:auto; + right: 30px; + padding: 10px 20px; + background-color: #101010; + color: white; + border: none; + border-radius: 25px; + cursor: pointer; + font-size: 18px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: background-color 0.4s ease, transform 0.4s ease; + } + + .dark-mode-toggle:hover { + background-color: #0b0c0c; + transform: scale(1.1); + } + + /* Other existing styles... */ + + #pet-name-form { + background-color: #ed6d1e; + border-radius: 25px; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); + padding: 25px; + margin-left: 530px; + max-width: 450px; + width: 100%; /* Responsive width */ + } + + input[type="text"] { + width: 100%; + padding: 8px; + margin: 10px; + border: 1px solid #ccc; + border-radius: 4px; + } + + + button { + width: 100%; + font-size: medium; + padding: 10px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + } + + button:hover { + background-color: #45a049; + } + + #generated-name { + background-color: #a51eed; + visibility: hidden; + border-radius: 25px; + padding: 25px; + margin-left: 530px; + max-width: 450px; + width: 100%; /* Responsive width */ + } + + + \ No newline at end of file diff --git a/Website/dogs.html b/Website/dogs.html new file mode 100644 index 0000000..1abd85c --- /dev/null +++ b/Website/dogs.html @@ -0,0 +1,45 @@ + + + + + + Document + + + + +
+

Dog's Corner

+
+
+ Puppy + Meet The Breeds +
+
+ Puppy + Puppy Cuteness Overload +
+
+
+ + \ No newline at end of file diff --git a/Website/index.js b/Website/index.js new file mode 100644 index 0000000..485bab0 --- /dev/null +++ b/Website/index.js @@ -0,0 +1,44 @@ +Shery.imageEffect("#back", {style:5, config:{"a":{"value":1.98,"range":[0,30]},"b":{"value":-0.93,"range":[-1,1]},"zindex":{"value":-9996999,"range":[-9999999,9999999]},"aspect":{"value":2.1793214862681745},"gooey":{"value":true},"infiniteGooey":{"value":true},"growSize":{"value":3.78,"range":[1,15]},"durationOut":{"value":0.1,"range":[0.1,5]},"durationIn":{"value":1.52,"range":[0.1,5]},"displaceAmount":{"value":0.5},"masker":{"value":true},"maskVal":{"value":1,"range":[1,5]},"scrollType":{"value":0},"geoVertex":{"range":[1,64],"value":1},"noEffectGooey":{"value":false},"onMouse":{"value":1},"noise_speed":{"value":0.66,"range":[0,10]},"metaball":{"value":0.2,"range":[0,2],"_gsap":{"id":3}},"discard_threshold":{"value":0.49,"range":[0,1]},"antialias_threshold":{"value":0,"range":[0,0.1]},"noise_height":{"value":0.4,"range":[0,2]},"noise_scale":{"value":8.26,"range":[0,100]}},gooey: true}); +// all the javascript code related to shery.js + +var firstnames = document.querySelectorAll(".firstname"); +firstnames.forEach(function(firstname){ + var h1s=firstname.querySelectorAll("h1"); +var index=0; +var animating=false; +document.querySelector("#main") +.addEventListener("click", function(){ + if(!animating){ + animating= true; + gsap.to(h1s[index],{ + top:'-=100%', + duration:0.5, + ease: Expo.easeInOut, + onComplete: function(){ + gsap.set(this._targets[0], {top: '100%'}); + animating=false; +}, + +}); +} +index == h1s.length-1 ? (index=0):index++; + gsap.to(h1s[index],{ + top:'-=100%', + duration:0.5, + ease: Expo.easeInOut, +}); +}); +}); +var typed = new Typed(".text",{ + strings: ["Linkedin" , "Instagram", "Email", "Twitter", "Github"], + typeSpeed: 100, + backSpeed: 100, + backDelay: 1000, + loop: true +}); + + + + + + \ No newline at end of file diff --git a/Website/pet-name-generator.js b/Website/pet-name-generator.js deleted file mode 100644 index f611756..0000000 --- a/Website/pet-name-generator.js +++ /dev/null @@ -1,199 +0,0 @@ -// Object containing real pet names mapped to their traits, color, and type -const petNamesByAttributes = { - dog: { - playful: { - black: ["Shadow", "Zorro", "Ace"], - white: ["Snowy", "Luna", "Blanca"], - brown: ["Coco", "Bruno", "Teddy"] - }, - calm: { - black: ["Milo", "Bear", "Raven"], - white: ["Bella", "Angel", "Fluffy"], - brown: ["Willow", "Oliver", "Rusty"] - }, - energetic: { - black: ["Dash", "Rocket", "Bolt"], - white: ["Max", "Blizzard", "Sparky"], - brown: ["Charlie", "Rusty", "Simba"] - }, - loyal: { - black: ["Knight", "King", "Shadow"], - white: ["Snow", "Pearl", "Faith"], - brown: ["Copper", "Buddy", "Duke"] - }, - curious: { - black: ["Hunter", "Oreo", "Midnight"], - white: ["Casper", "Marble", "Nimbus"], - brown: ["Biscuit", "Hopper", "Mocha"] - } - }, - cat: { - playful: { - black: ["Midnight", "Zippy", "Salem"], - white: ["Whiskers", "Snowball", "Marble"], - brown: ["Simba", "Nala", "Ginger"] - }, - calm: { - black: ["Onyx", "Jet", "Pepper"], - white: ["Pearl", "Casper", "Ivory"], - brown: ["Chloe", "Willow", "Autumn"] - }, - energetic: { - black: ["Luna", "Tigger", "Sable"], - white: ["Frosty", "Misty", "Angel"], - brown: ["Tiger", "Mochi", "Ziggy"] - }, - loyal: { - black: ["Panther", "King", "Boo"], - white: ["Snowflake", "Diamond", "Frost"], - brown: ["Oreo", "Milo", "Biscuit"] - }, - curious: { - black: ["Inky", "Smokey", "Noir"], - white: ["Nimbus", "Cloud", "Frosty"], - brown: ["Patches", "Hopper", "Whiskers"] - } - }, - bird: { - playful: { - black: ["Raven", "Chirpy", "Pepper"], - white: ["Tweety", "Cloud", "Angel"], - brown: ["Feathers", "Sunny", "Cinnamon"] - }, - calm: { - black: ["Noir", "Jet", "Storm"], - white: ["Ivory", "Snow", "Pearl"], - brown: ["Hazel", "Autumn", "Coco"] - }, - energetic: { - black: ["Swoop", "Flap", "Jet"], - white: ["Blizzard", "Frosty", "Nimbus"], - brown: ["Chirpy", "Twig", "Sunny"] - }, - loyal: { - black: ["Sable", "Storm", "Raven"], - white: ["Snowy", "Fluffy", "Frost"], - brown: ["Cinnamon", "Goldie", "Twig"] - }, - curious: { - black: ["Inky", "Smokey", "Noir"], - white: ["Nimbus", "Frosty", "Ivory"], - brown: ["Pip", "Hazel", "Twig"] - } - } - // Add more pet types -}; - -// Function to get the input values -function getInputValues() { - const petType = document.getElementById('petType').value.toLowerCase(); - const traits = document.getElementById('petTrait').value.toLowerCase(); - const color = document.getElementById('petColour').value.toLowerCase(); - - - return { petType, traits, color }; -} - - - - - -// Array of static bird image URLs -const birdImages = [ - "../assets/bird1.jpg", - "../assets/bird2.jpg", - "../assets/bird3.jpg", - "../assets/bird4.jpg", - "../assets/bird5.jpg" -]; - - -// Free API URLs for different pets -const apiUrls = { - dog: 'https://dog.ceo/api/breeds/image/random', - cat: 'https://api.thecatapi.com/v1/images/search', - bird: 'static' // Placeholder for bird image logic -}; - - - -// Function to fetch a random image from the free API based on the pet name -function fetchPetImage(petName) { - if (petName === 'bird') { - // Select a random bird image from the array - const randomBirdIndex = Math.floor(Math.random() * birdImages.length); - return Promise.resolve(birdImages[randomBirdIndex]); - } - - const apiUrl = apiUrls[petName]; - - // Use fetch with promises instead of async/await - return fetch(apiUrl) - .then(response => response.json()) // Parse the response as JSON - .then(data => { - // Handle the different structure of each API's response - if (petName === 'dog') { - return data.message; // Dog API returns 'message' with image URL - } else if (petName === 'cat') { - return data[0].url; // Cat API returns an array with 'url' for the image - } - }) - .catch(error => { - console.error("Error fetching pet image:", error); - return 'https://via.placeholder.com/300'; // Fallback image in case of an error - }); -} - - - -// Function to get a matching pet name based on type, traits, and color -function getMatchingName(petType, traits, color) { - let matchedNames = []; - - // Check if the petType, trait and color exist in the database - if (petNamesByAttributes[petType]) { - if (petNamesByAttributes[petType][traits] && petNamesByAttributes[petType][traits][color]) { - matchedNames = matchedNames.concat(petNamesByAttributes[petType][traits][color]); - } - } - - if (matchedNames.length > 0) { - // Randomly choose one name from the matched names - const randomIndex = Math.floor(Math.random() * matchedNames.length); - petName = petType; - - // Fetch the random pet image based on the pet name (returns a promise) - fetchPetImage(petName) - .then(imageUrl => { - document.getElementById('pet-image').src = imageUrl; - document.getElementById('pet-image').style.visibility = "visible"; - }) - .catch(error => { - console.error("Error displaying pet:", error); - }); - - return matchedNames[randomIndex]; - } else { - return "No matching name found!"; - } -} - -// Form submission handler -document.getElementById('pet-name-form').addEventListener('submit', function(event) { - event.preventDefault(); // Prevent form from reloading page - - // Get selected pet type, traits, and color from the form - const { petType, traits, color } = getInputValues(); - - // Generate a pet name based on the selected inputs - const suggestedName = getMatchingName(petType, traits, color); - - // Display the result - - document.getElementById('generated-name').innerHTML = `Suggested Pet Name: ${suggestedName}`; - document.getElementById('generated-name').style.visibility = "visible"; - }); - - -// Update the footer year -document.getElementById('year').textContent = new Date().getFullYear(); \ No newline at end of file diff --git a/Website/pet.html b/Website/pet.html deleted file mode 100644 index a7717ca..0000000 --- a/Website/pet.html +++ /dev/null @@ -1,145 +0,0 @@ - - - - - - Name Your Pets - - - - - - - - - - -
-

Pet Name Generator

- -
- - - - - -


- - - - - - -


- - - - - -


- - - -
- -


- -


-

-
- - - - - - - - diff --git a/Website/style.css b/Website/style.css new file mode 100644 index 0000000..8c0e75f --- /dev/null +++ b/Website/style.css @@ -0,0 +1,157 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + html, + body { + width: 100%; + height: 100%; + } + #main { + height: 100vh; + width: 100%; + } + #top { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + pointer-events: none; + } + #back { + width: 100%; + height: 100vh; + } + #back img { + width: 100%; + height: 100%; + object-fit: cover; + } + #workingarea { + width: 85%; + max-width: 1920px; + height: 100vh; + margin: 0 auto; + position: relative; + } + #nav { + width: 100%; + padding: 15px 0px; + justify-items: space-between; + align-items: center; + } + #nav img { + height: 80px; + } + #nleft { + display: flex; + align-items: center; + gap: 30px; + } + #nleft a { + text-decoration: none; + color: white; + font-size: 12px; + font-family: "gilroy", Tahoma, Geneva, Verdana, sans-serif; + text-transform: uppercase; + font-weight: 600; + letter-spacing: 0px; + pointer-events: all; + } + #nright a { + text-decoration: none; + color: white; + font-size: 12px; + font-family: "gilroy", Tahoma, Geneva, Verdana, sans-serif; + text-transform: uppercase; + font-weight: 600; + letter-spacing: 0px; + pointer-events: all; + } + #nright { + display: flex; + align-items: center; + gap: 30px; + float: right; + margin-top: -46px; + margin-right: 50px; + } + #hero { + margin-top: 23px; + width: 100%; + display: flex; + justify-content: space-between; + font-family: "gilroy", Tahoma, Geneva, Verdana, sans-serif; + position: absolute; + top: 50%; + left: 0; + transform: translate(0%, -50%); + } + #heroleft { + min-width: 50%; + } + #heroleft .firstname h1 { + font-family: "Kajiro"; + font-weight: 100; + color: white; + font-size: 6vw; + letter-spacing: 0.5px; + line-height: 0.9; + position: absolute; + top: 100%; + left: 0; + } + #heroleft .firstname { + height: 7vw; + overflow: hidden; + position: relative; + } + #heroleft .firstname h1:nth-child(1) { + top: 0; + } + #heroleft button { + margin-top: 10px; + padding: 10px 30px; + border: 1px solid white; + background-color: white; + color: rgb(0, 0, 0); + font-size: 3vw; + font-family: "Anton", Tahoma, Geneva, Verdana, sans-serif; + text-transform: uppercase; + font-weight: 400; + letter-spacing: 0.5px; + cursor: pointer; + pointer-events: all; + } + #heroright { + width: 14%; + display: flex; + flex-direction: column; + align-items: flex-end; + color: rgb(255, 255, 255); + } + #heroright p { + font-size: 10px; + font-family: "gilroy", Tahoma, Geneva, Verdana, sans-serif; + text-transform: uppercase; + font-weight: 400; + letter-spacing: 0px; + margin-bottom: 30px; + text-align: right; + color: rgb(255, 255, 255); + + } + #heroright #image { + width: 100%; + height: 150px; + background-image: url(../pf1/pic/image.GIF); + margin-top: -5px; + margin-bottom: 7px; + background-size: cover; + background-position: center; + } + #heroright p:nth-child(3) { + margin-top: 30px; + } \ No newline at end of file diff --git a/beagle.png b/beagle.png new file mode 100644 index 0000000..9eee9ba Binary files /dev/null and b/beagle.png differ diff --git a/dog.jpg b/dog.jpg new file mode 100644 index 0000000..7587ed5 Binary files /dev/null and b/dog.jpg differ diff --git a/dogo.jpg b/dogo.jpg new file mode 100644 index 0000000..13ebbd3 Binary files /dev/null and b/dogo.jpg differ diff --git a/german shepherd.jpg b/german shepherd.jpg new file mode 100644 index 0000000..a558dab Binary files /dev/null and b/german shepherd.jpg differ diff --git a/golden_retriver.jpg b/golden_retriver.jpg new file mode 100644 index 0000000..2cfd84c Binary files /dev/null and b/golden_retriver.jpg differ diff --git a/great_dane.jpg b/great_dane.jpg new file mode 100644 index 0000000..0914905 Binary files /dev/null and b/great_dane.jpg differ diff --git a/index.html b/index.html index 84d518c..8992a72 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,10 @@ - + Redirecting... -

If you're not redirected, click here.

+

If you're not redirected, click here.

diff --git a/pittbull.jpg b/pittbull.jpg new file mode 100644 index 0000000..051c705 Binary files /dev/null and b/pittbull.jpg differ diff --git a/pug.jpg b/pug.jpg new file mode 100644 index 0000000..f2455f0 Binary files /dev/null and b/pug.jpg differ diff --git a/rott.jpg b/rott.jpg new file mode 100644 index 0000000..66cf364 Binary files /dev/null and b/rott.jpg differ