<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Bring Me Bitches - Fun Pet Selector App</title>

        <meta name="description" content="Discover your perfect pet with 'Bring Me Bitches', a fun and interactive app that matches you with adorable dogs based on your personality. Choose, save, and share your favorites!">

        <meta name="keywords" content="pets, dogs, pet selector, fun app, dog matching">



        <!-- Libraries -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">



        <script type="text/javascript">

            try {

                let petData = [

                    { name: "Labrador", image: "https://images.unsplash.com/photo-1544372115-2054718c90b1", description: "Friendly, outgoing, trainable." },

                    { name: "Bulldog", image: "https://images.unsplash.com/photo-1534284513281-e9bc5ca5a031", description: "Docile, willful, and friendly." },

                    { name: "Beagle", image: "https://images.unsplash.com/photo-1555685813-ce56ba58a79f", description: "Curious, merry, and friendly." },

                    { name: "Poodle", image: "https://images.unsplash.com/photo-1588002487053-9f3542baf143", description: "Intelligent, active, and alert." },

                    { name: "German Shepherd", image: "https://images.unsplash.com/photo-1568027452506-cbd8702d1c90", description: "Confident, courageous, smart." }

                ];

                let favorites = [];



                document.addEventListener("DOMContentLoaded", function() {

                    displayPets();

                    document.querySelector("#pet-select").addEventListener("click", () => {

                        let randomPet = petData[Math.floor(Math.random() * petData.length)];

                        document.querySelector("#pet-display").innerHTML = `

                            <h3>${randomPet.name}</h3>

                            <img src="${randomPet.image}" class="img-fluid">

                            <p>${randomPet.description}</p>

                            <button class="btn btn-primary" onclick="addToFavorites('${randomPet.name}')">Add to Favorites</button>

                        `;

                    });

                    

                    document.querySelector("#view-favorites").addEventListener("click", viewFavorites);

                });



                function displayPets() {

                    let initialPet = petData[Math.floor(Math.random() * petData.length)];

                    document.querySelector("#pet-display").innerHTML = `

                        <h3>${initialPet.name}</h3>

                        <img src="${initialPet.image}" class="img-fluid">

                        <p>${initialPet.description}</p>

                        <button class="btn btn-primary" onclick="addToFavorites('${initialPet.name}')">Add to Favorites</button>

                    `;

                }



                function addToFavorites(petName) {

                    if (!favorites.includes(petName)) {

                        favorites.push(petName);

                        alert(`${petName} added to favorites!`);

                    } else {

                        alert(`${petName} is already in your favorites.`);

                    }

                }



                function viewFavorites() {

                    if (favorites.length > 0) {

                        alert("Your Favorites: " + favorites.join(", "));

                    } else {

                        alert("You have no favorites yet!");

                    }

                }

            } catch (error) {

                throw error;

            }

        </script>

        

        <style>

            body {

                background: linear-gradient(135deg, #74ebd5, #acb6e5);

                font-family: 'Arial', sans-serif;

            }

            #main-container {

                text-align: center;

                margin-top: 50px;

                padding: 20px;

                border-radius: 10px;

                background-color: white;

                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

            }

            .btn {

                margin-top: 10px;

            }

            img {

                border-radius: 10px;

                margin-top: 10px;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1 class="display-4">Bring Me Bitches!</h1>

            <button id="pet-select" class="btn btn-success">Fetch Me a Pet</button>

            <div id="pet-display" class="mt-4"></div>

            <button id="view-favorites" class="btn btn-info mt-3">View Favorites</button>

        </div>

    </body>

</html>