<!--

                                             :::..::                                                
                                          -::.........::                                            
                                        =--::...........:                                           
                                       *=--:::...........:                                          
                                       *+=--::::.........:                                          
                                      **++==--::::::::::::-                                         
                                       **++===----::::::--=                                         
                                       ****+++====------==                                          
                                        ******+++++====++*                                          
                                         **********+++**                                            
                                           ***********                                              
                                                                                                    
                                                                                                    
                                             ..                                                     
                                           ....:                                                    
                                         -:.....:                                                   
                                       =-:........                                                  
                                     =--::.........:                                                
                                   =--:::...........::                                              
                                 ==--:::::............:-                                            
                              ===----::::::..........:::::                                          
                            +===-----:::::::::::::::::::::::-                                       
                         +++=====-----::::::::::::::::::::::::--                                    
                        +++=====--------::::::::::::::::::::::::--                                  
                      +++=======--------:::::::::::::::::::::::::::--                               
                    *++++=======--------:::::::::::::::::::::::::::::--                             
                   **++++=======--------::::::::::::::::::::::::::::::---                           
                   *+++++=======---------::::::::::::::::::::::::::::::----                         
                 #**+++++========----------:::::::::::::::::::::::::::::----                        
                #***++++++========---------::::::::::::::::::::::::::::::----                       
                #***++++++=========---------::::::::::::::::::::::::::::------                      
                #***+++++++========----------:::::::::::::::::::::::::--------=                     
               #*****++++++=========-----------------:::::::::::::::-----------=                    
              ##*****+++++++========------------------------::-------------=---==                   
              ###****+++++++===========---------.....:=------------------:...---=                   
              ###*****++++++++==========------..-*##*:.:----------------:.+%#---=                   
              *###*****++++++++==========----..%%%%%%%#..---------------.+%%%#:-==                  
              #####******++++++===========--:.+%%%%%%%%#.---------------.#%%%%=-==                  
               #####******++++++==========--.:#%%%%%%%%%=.--------------.#%%%%#:==                  
               ######******++++++==========-..*%%%%%%%%%+.--------------.*%%%%%:-=                  
                #######******++++++========-:.+%%%%%%%%%-.--------------:=%%%%#:=+                  
                #########*****++++++++======-..+%%%%%%%+.:--------------:.*%%%-:=+                  
                 #########*****+++++++++====-:..:#%%%#:.:----------------:.=#=.-=+                  
              -:::=#########******+++++++++===-........:------------===---:...-=++                  
            --:::::-*##########*******+++++++====-:.::----===========+=====--==++                   
          *++=--:....=*############********+++++++========++++%#++++%*++++++++**                    
          +++++=-::....=*##############************++++++++++++%#*##++********#                     
           ++++++=--::...-#####################*****************##******######                      
            ++++++++=--:::::=+*############################################                         
              ++++++++==--::::---=+*##################################                              
                   +++++==-------===-::=+++===++++++++++++++===----                                 
                    ++++=-------==--:::-===-----:::::::::::::::::----                               
                   +++++=------==-::::-====-----:::::::::::::::::::--:--                            
                   ++++++++=+++=-::::-=+====-----::::::::::::::::::---::--                          
                    +++++***+=--::::--++=====-----::::::::::::::::----=::::---                      
                         ++=---:::::-=+++=====-------::::::::::::-----=:::::::::-                   
                       +==--::::::::-+++++======---------------------==-:::::::::::                 
                     ++=--:::::::::::-++++++========----------------==+--::::..:::::                
                    +==--:::::....::::=*++++++===========--------=====+--:::::..::::                
                   *+==--::::......::::+**+++++++===================++=---:::::::::-                
                   *+==---::::.....::::-+****+++++++++===========+++++==----::::::--                
                   **+===---:::::::::::-+*******++++++++++++++++++++*+++==---------=                
                   ***++===----::::::--=+**************++++++++********+++=======++                 
                   *++++++====--------==**************************+++*****+++++++                   
                     ++++++++++=====++=--::-=+***************+=-::...::+++++++*                     
                      *++++++++++++++--:::.....:-+*++++===---:::...........                         
                          *+*++++===--::..........:=+++====--:::............:                       
                           #****++==--::...........:++++++==---::.............                      
                           #*****++==--:............:****+++===--:::..........:                     
                            #******+==--::..........:*********+++===---::::--=                      
                              #*******++=---:::::::-+ ###***********+++++++*                        
                                 #*******+++++++++++                                                
                                                                                                    

--!>

<!DOCTYPE html>
<html>
<head><meta charset="us-ascii">
	<title>Clover's Chao Garden</title>
	<style type="text/css">/* Styles for the custom buttons */
        .custom-button {
            background-color: #ABFCF4;
            color: #2CC5AD;
            border: 2px dotted #ffffff;
            border-radius: 5px;
            padding: 2px 2px;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

.popup-container {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 300px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            border: 4px dotted rgba(255, 255, 255, 0.8);
            color: #000;
            z-index: 1;
        }

        .popup-content {
            height: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }

        /* Button hover state */
        .custom-button:hover {
            background-color: #2980b9;
            color: #ffffff;
            /* Replace 'your-hover-image-url.png' with your actual hover image URL */
            background-image: url('your-hover-image-url.png');
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        }

        table {
            width: 403px;
            height: 177px;
            border: 3px dotted #209180;
            table-layout: fixed;
        }


        .table-container {
            height: 140px; /* Fixed height for the center table */
            overflow: hidden; /* Hide any content that exceeds the fixed height */
        }

        td {
            width: 100px;
            padding: 10px;
            text-align: center;
        }

        .bar {
            height: 20px;
            display: inline-block;
        }

        body, td, th {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
            color: #FFFFFF;
        }

        body {
            background-image: url(/.CuteDesktop/BACKGROUNDS/mpcyan_bg.png);
        }

	a:link {
	color: #006666;
}
a:visited {
	color: #006666;
}
a:hover {
	color: #000000;
}
a:active {
	color: #FFCC99;
}

        .style2 {
            height: 20px;
            display: inline-block;
            font-weight: bold;
        }

.shadow-text {
        text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    }

	</style>
	<style type="text/css">/* Button (up and down arrows) */
::-webkit-scrollbar-button {
  background-color: #fcf5a2;
  width: 16px;
  height: 16px;
  border-radius: 8px; 
}


/* Set the color for the entire scrollbar */
::-webkit-scrollbar {
  width: 10px;
  background-color: #fff;
}

/* Set the color for the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-image: linear-gradient(to bottom, #fcb9da, #ddbad9, #c2cde5, #a2dff0, #7beffa);
  border-radius: 8px; /* set border-radius to make it rounded */
}

/* Set the color for the scrollbar track */
::-webkit-scrollbar-track {
  background-color: #fff;
}
	</style>
</head>
<body>
<div align="center">
<table>
	<tbody>
		<tr bgcolor="#42D5BE">
			<td width="118"><strong>HEALTH</strong><br>
			<div class="style2" id="healthBar" style="width: 100px; background-color: green;"></div>
			</td>
			<td width="136"><strong>HUNGER</strong><br>
			<div class="style2" id="hungerBar" style="width: 100px; background-color: green;"></div>
			</td>
			<td bgcolor="#42D5BE" width="129"><strong>HAPPY</strong><br>
			<div class="style2" id="happyBar" style="width: 100px; background-color: green;"></div>
			</td>
		</tr>
		<tr>
			<td colspan="3" style="background-color: rgba(255, 255, 255, 0.5); height: 140px;">
			<div align="center"><img id="creatureImage" src="https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/IDLEchao1small.gif" /></div>
			</td>
		</tr>
		<tr>
			<td bgcolor="#42D5BE"><button class="custom-button" onclick="increaseBar('healthBar', 'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/CHAOmedssmall.gif')">HEAL</button></td>
			<td bgcolor="#42D5BE"><button class="custom-button" onclick="increaseBar('hungerBar', 'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/CHAOEATsmall.gif')">GIVE FOOD</button></td>
			<td bgcolor="#42D5BE"><button class="custom-button" onclick="increaseBar('happyBar', 'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/PLAYINGducksmall.gif')">PLAY</button></td>
		</tr>
	</tbody>
</table>

<p><script>
        let healthTimeout;
        let hungertimeout;
        let happytimeout;
        let isDisabled = false;
        let happyValue = 100; // Initial value of the happy bar

        function decreaseBars() {
            if (isDisabled) return;

            const bars = ['healthBar', 'hungerBar', 'happyBar'];
            bars.forEach(barId => {
                const bar = document.getElementById(barId);
                const currentValue = parseInt(bar.style.width);

                if (currentValue > 0) {
                    const newValue = Math.max(currentValue - 10, 0);
                    updateBar(bar, newValue);

                    if (barId === 'happyBar') {
                        happyValue = newValue; // Update happyValue
                    }

                    checkForImageChange(); // Check for image change for all bars
                }
            });
        }

        function updateBar(bar, value) {
            bar.style.width = value + 'px'; // Always update the width

            // Update the background color based on value
            if (value >= 80) {
                bar.style.backgroundColor = 'green';
            } else if (value >= 50) {
                bar.style.backgroundColor = 'yellow';
            } else if (value >= 20) {
                bar.style.backgroundColor = 'orange';
            } else {
                bar.style.backgroundColor = 'red';
            }
        }

function increaseBar(barId, imageSrc) {
    if (isDisabled) return;

    const bar = document.getElementById(barId);
    const currentValue = parseInt(bar.style.width);

    if (barId === 'hungerBar' && currentValue < 100) {
        // Clear the hungry timeout when the bar is increased
        clearTimeout(hungertimeout);
    }

    if (barId === 'happyBar' && currentValue < 100) {
        // Clear the happy timeout when the bar is increased
        clearTimeout(happytimeout);
    }

    if (currentValue < 100) {
        const newValue = Math.min(currentValue + 10, 100);
        updateBar(bar, newValue);

        if (barId === 'happyBar') {
            happyValue = newValue; // Update happyValue
        }

        // Check if the bar is raised above 30 and reset the image
        if (barId === 'healthBar' && newValue > 30) {
            document.getElementById('creatureImage').src = 'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/IDLEchao1small.gif';
        } else if (barId === 'hungerBar' && newValue > 30) {
            document.getElementById('creatureImage').src = 'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/IDLEchao1small.gif';
        }

        checkForImageChange(); // Check for image change for all bars

        // Change the image for 4 seconds
        if (imageSrc) {
            document.getElementById('creatureImage').src = imageSrc;
            setTimeout(() => {
                document.getElementById('creatureImage').src = 'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/IDLEchao1small.gif';
                enableButtonsAndBars(); // Enable buttons after changing the image
            }, 4000);
        } else {
            enableButtonsAndBars(); // Enable buttons if there's no image change
        }
    }
}

        function checkForImageChange() {
            const healthBarValue = parseInt(document.getElementById('healthBar').style.width);
            const hungerBarValue = parseInt(document.getElementById('hungerBar').style.width);
            const happyBarValue = parseInt(document.getElementById('happyBar').style.width);

            clearTimeout(healthTimeout);
            clearTimeout(hungertimeout);
            clearTimeout(happytimeout);

            if (healthBarValue === 0 && hungerBarValue === 0) {
                const randomImage = getRandomImage();
                document.getElementById('creatureImage').src = randomImage;
                disableButtonsAndBars();
            } else if (healthBarValue === 0) {
                healthTimeout = setTimeout(() => {
                    document.getElementById('creatureImage').src = getRandomImage();
                    disableButtonsAndBars();
                }, 5000);
            } else if (hungerBarValue === 0) {
                hungertimeout = setTimeout(() => {
                    const randomHungryImage = getRandomHungryImage();
                    document.getElementById('creatureImage').src = randomHungryImage;
                    disableButtonsAndBars();
                }, 5000);
            } else if (happyBarValue === 0) {
                happytimeout = setTimeout(() => {
                    const randomHappyImage = getRandomHappyImage();
                    document.getElementById('creatureImage').src = randomHappyImage;
                    disableButtonsAndBars();
                }, 5000); // 5000 milliseconds = 5 seconds
            }

            // Check for happy, health, and hunger bar conditions
            if (happyValue <= 30) {
                document.getElementById('happyBar').style.backgroundColor = 'red'; // Change color when happyValue is low
                if (healthBarValue > 30 && hungerBarValue > 30) {
                    document.getElementById('creatureImage').src = 'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/CHAOboredsmall.gif';
                }
            } else if (happyValue > 30) {
                document.getElementById('happyBar').style.backgroundColor = 'green'; // Reset color when happyValue is above 30
                if (healthBarValue > 30 && hungerBarValue > 30) {
                    document.getElementById('creatureImage').src = 'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/IDLEchao1small.gif';
                }
            }

            if (healthBarValue <= 30) {
                document.getElementById('healthBar').style.backgroundColor = 'red';
                if (hungerBarValue > 30) {
                    document.getElementById('creatureImage').src = 'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/CHAOsicksmall.gif';
                }
            } else if (healthBarValue > 30) {
                document.getElementById('healthBar').style.backgroundColor = 'green';
            }

            if (hungerBarValue <= 30) {
                document.getElementById('hungerBar').style.backgroundColor = 'red';
                if (healthBarValue > 30) {
                    document.getElementById('creatureImage').src = 'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/CHAOhungrysmall.gif';
                }
            } else if (hungerBarValue > 30) {
                document.getElementById('hungerBar').style.backgroundColor = 'green';
            }
        }

        function disableButtonsAndBars() {
            isDisabled = true;
            const buttons = document.querySelectorAll('button');
            buttons.forEach(button => button.setAttribute('disabled', 'true'));

            const bars = document.querySelectorAll('.bar');
            bars.forEach(bar => bar.style.backgroundColor = 'gray');
        }

        function enableButtonsAndBars() {
            isDisabled = false;
            const buttons = document.querySelectorAll('button');
            buttons.forEach(button => button.removeAttribute('disabled'));

            const bars = document.querySelectorAll('.bar');
            bars.forEach(bar => bar.style.backgroundColor = 'green');
        }

        function getRandomImage() {
            const images = [
                'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/ANGELCHAOfinalALT1.gif',
                'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/ANGELCHAOfinalALT2.gif',
                'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/ANGELCHAOfinalsmall.gif'
            ];
            const randomIndex = Math.floor(Math.random() * images.length);
            return images[randomIndex];
        }

        function getRandomHungryImage() {
            const images = [
                'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/DEVILCHAOend.gif',
                'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/DEVILCHAOendALTERNATE.gif',
                'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/DEVILCHAOendALTERNATE2.gif'
            ];
            const randomIndex = Math.floor(Math.random() * images.length);
            return images[randomIndex];
        }

        function getRandomHappyImage() {
            const images = [
                'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/ROBOCHAOfinalALT1.gif',
                'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/ROBOCHAOfinalALT2.gif',
                'https://sweetcharm.net/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/ROBOCHAOfinalsmall.gif'
            ];
            const randomIndex = Math.floor(Math.random() * images.length);
            return images[randomIndex];
        }

        // Decrease the bars every 3 seconds
        setInterval(decreaseBars, 8000);
    </script></p>
<p class="shadow-text"><a href="#" id="openPopup">How to Play / Info</a></p>

<div class="popup-container" id="popup">
<div class="popup-content"><span class="close-button" onclick="closePopup()">&times;</span> <!-- Your text content goes here -->

<strong><span style="font-size:12px;"><span style="color:#16a085;"><p class="shadow-text">Thanks for visiting my mini Chao Garden. I drew all of the pixel animations myself ^^ Right now there are 3 possible endings to find (each with color variations!) depending on how you take care of your Chao.&nbsp;I will try to add more endings later, including unexpected endings and other secret endings....I hope you enjoy!!</span><br />
</span></strong>
<br>
<strong>Status Bars: </strong>The bars will decrease in value every X amount of seconds. To increase the bars value back up, just click the corresponding button (For example, click &quot;give food&quot; to make the &quot;hunger&quot; bar go back to a full/green status. When the bars are full, no animations will play even if you click the corresponding buttons. <br />
<br />
<strong>My Chao changed and none of the buttons work now?:</strong> This means the game is over. Your chao has evolved to his final form. Depending on how you took care of the Chao will change which one you get. Each &quot;ending&quot; has a few color variations, so <span style="color:#ff0066;">feel free to find them all and even &quot;adopt&quot; them onto your page with a credit link back :) &hearts;&hearts;</span><br />
<br />
<strong>Restart</strong>: Just reload/refresh the page to try again! See how long you can keep the Chao alive (this will eventually let you find another &quot;ending&quot;...) <br />
<br /></p>

</div>
</div>
<script>
    document.getElementById('openPopup').addEventListener('click', function () {
        document.getElementById('popup').style.display = 'block';
    });

    window.onclick = function (event) {
        var popup = document.getElementById('popup');
        if (event.target == popup) {
            popup.style.display = 'none';
        }
    };

    function closePopup() {
        document.getElementById('popup').style.display = 'none';
    }
</script>

<p class="shadow-text">&nbsp;{{&nbsp;<a href="http://SweetCharm.net">SweetCharm.net</a>&nbsp;}}</p>

<p><img src="/.CuteDesktop/VisitorYou/FUN/virtualpet/chao/fallcha2.gif" /><br />
<!-- FC2 Counter  Starts here --> <script language="javascript" type="text/javascript" src="//counter1.fc2.com/counter.php?id=89505101"></script><noscript><img src="//counter1.fc2.com/counter_img.php?id=89505101" /></noscript> <!-- FC2 Counter  Ends here --></p>
</div>
</body>
</html>