<!--
                                                         @@@@@@@@@@@  @@@@@@@@@@@@@@@                                                                                                                       
                @@                                   @@@@           @@@@              @@@@                                                                                                                  
                @@@                            @@@@@@@           @@@                      @@@                                                                                                               
                 @@@                        @@@  @             @@@                           @@@                                                                                                            
                  @@@                      @@  @@             @@                                @@                                                                                                          
                  @@@@@                  @@@   @              @@                                  @                                                                                                         
                    @@@@@@               @@   @              @                                     @@                                                                                                       
                     @@@@@@@            @@   @@                                                  @@@@@                                                                                                      
                       @@@@@@          @@    @@                               @@                       @@                                                                                                   
                        @@@@@@@@     @@@@                       @@         @@                           @@@                                                                                                 
                         @@@@@@@@@ @@   @                       @        @@                               @@@                                                                                               
                            @@@@@@@@@    @                 @    @       @@  @@                              @@                                                                                              
                             @@@@@@@@@    @                    @@       @@@@                                 @@                                                                                             
                              @@@@@@@@@@@@ @@   @         @    @@@    @@@    @@@@       @@@                   @@                                                                                            
                             @@  @@@@@@@@@@@@@ @ @        @@   @  @@@@           @@@@@@ @@@@@@@                @@                                                                                           
                            @@    @@@@@@@@@@@@@@  @@     @@@@@@                     @@@         @@             @@@                                                                                          
                           @@        @@@@@@@@@@@@@@@@@   @                            @@                         @@                                                                                         
                           @@          @@@@@@@@@@@@@@@@@@                               @@@                      @@                                                                                         
                           @@            @@@@@@@@@@@@@@@@@                                 @@                     @@                                                                                        
                           @                 @@@@@@@@@@@@@                                   @@                    @                                                                                        
                           @                    @@@@@@@@@                                 @    @@                  @                                                                                        
                           @                     @@@@@@@@                             @@    @     @@               @                                                                                        
                           @                        @ @@                    @       @@@  @@@@ @@@   @@@            @@                                                                                       
                           @@                @@@  @@   @                    @@                    @@@@  @@@@       @@                                                                                       
                            @                           @                    @          @              @@    @@    @@                                                                                       
                            @@                          @ @@@@@@@@@@@@@   @@@@@     @   @@                @@     @@@@                                                                                       
                              @    @@                  @@  @@          @@@@@  @      @    @                           @@@                                                                                   
                               @@  @@                 @@   @            @@@   @@      @   @@@@      @                    @@@@@                                                                              
                                 @@  @@              @    @@           @@@    @@      @     @@@     @                         @@                                                                            
                                   @@@@@@         @@@     @@        @@@@@@    @@   @   @    @@@@   @@@@     @                   @@@@                                                                        
                             @@@         @@@@@@@ @@       @     @@@@@@@@@     @@  @    @@     @@@@ @@  @@     @@     @  @@          @@@@                                                                    
                            @ @                 @@       @@@@@@@@@@@@@@@       @@@@     @      @@ @@@@@@@@@     @@     @  @@           @@@                                                                  
                           @@ @@               @@@      @@@@@@@@@@@@@@@        @@       @@     @@          @@     @@@    @   @            @@                                                                
                          @@   @@@          @@@ @@     @@@@@@@@@@@@@         @@@@        @@     @             @@   @  @@@@@@   @@@         @@@                                                              
                          @@     @@@@@@@@@@@   @@@                        @@@@@@         @@     @@               @@@@@       @@@   @@@@@@@   @@                                                             
                           @@                  @@                      @@@@ @@@@          @      @               @@                       @@@@@                                                             
                           @@@            @@@ @@                     @@@     @@@          @@     @@              @                                                                                          
                             @@@@     @@@@    @@                  @@@       @@@           @@     @@             @      @@@@@@@@@@@@@@@ @@@@@@@@@@@@                                                         
                            @@@@@@@          @@                 @@@        @@@            @@      @            @@ @@@@              @@@@           @@@@                                                     
                          @@@               @@@                @@         @@              @@      @@          @@@@                      @@@           @@@@@@@                                               
                       @@@                 @@                @@          @                @       @@         @@                           @@@             @  @@@                                            
                      @@                   @@ @@      @    @          @@                  @        @@       @@                              @@              @  @@                                           
                    @@@                     @@@@@@@@@@  @@@     @@@@@@  @@  @@          @@@        @@      @@                               @@              @   @@@                                         
                  @@@                                @@@          @@@@@@@   @@          @@         @@     @@@                                 @              @   @@                                         
                 @@             @@  @@ @                             @@@    @@        @@@          @@    @@                                                   @   @@                                        
                @@@        @@@@                                      @@    @@         @@           @@    @@                                                   @    @@                                       
                @@     @@@@@                                        @@    @@         @@            @@    @                                    @                    @@@@                                     
                @   @@@                                             @@   @@        @@              @@    @                                    @@                   @ @@@@@                                  
                @@@@                                                 @@ @@        @@               @@    @@                                  @@                   @      @@@                                
              @@@                                                     @@@@       @@                @@    @@                       @@@@@@@@@@@@                   @         @@                               
            @@@                                                       @@@@@     @@                 @@@@    @@@@  @@@           @@@@@       @@@@            @    @           @@@                             
          @@@                                                          @@@@@  @@@                  @@@ @@@@@@@  @   @@     @@@@@              @@@         @                  @@                             
        @@@                                                            @@     @@                     @@         @@@  @@@@@@@                    @@      @@                    @@                            
       @@@                                                 @@@         @@    @@                      @@@        @ @   @    @                     @@   @@                       @@                           
      @@                                                 @@   @       @@@@   @@                        @@@     @@@@      @@@                      @@@@                         @@                           
     @@@                                             @@ @@  @@@       @@@@@   @@                         @@@@@@@@@@    @@@@@@@                    @@@                          @@                           
    @@                                @@@@@@       @    @   @ @@    @@    @@  @@@ @                              @       @     @                    @   @                       @                           
   @@@                               @@    @@@      @@      @  @   @@       @@@@@@@                            @@         @@ @@                     @@ @@                       @                           
  @@@                               @@       @@@@@@@@@@@    @@@  @@                                    @@@@@@          @@  @  @@                     @@@                        @                           
  @@                               @@@    @     @@@@ @       @ @@@                                   @@             @   @@@@   @                    @@ @                        @                           
  @@       @                       @@      @@      @@@@@   @@@@@                                    @               @    @@ @@@@                    @   @@  @ @                @@                           
 @@       @@                       @@                   @@@@                                       @@               @  @  @  @                     @                           @                            
@@       @@                        @@                                                            @@             @   @  @@@@    @                   @                          @@                            
@@      @@                        @@@@@    @@    @                                               @@            @@  @@ @@ @@@   @                   @@                  @@    @@                             
@@      @@                      @@   @@@   @      @                                             @      @       @@@ @  @     @@@                     @@                 @@  @@                               
@@     @@                      @     @@            @                                           @@     @        @ @@    @     @                        @@             @@  @@                                 
@@     @                     @@  @@@ @@            @@                                         @@     @@    @   @@ @     @@   @                       @@@@@         @@@@@@                                   
@@    @@                     @@@      @@            @@                                       @@    @@@    @@ @@    @@    @                          @@@   @ @@@@@@@         @@@                             
@@@   @@                   @@         @@@           @@@@                                     @@   @@ @   @@@@      @ @@   @                         @@@   @@                 @ @@                           
 @@@  @@                 @@            @@          @@ @@@                                    @  @@   @  @@         @   @@@@                         @@      @@              @@ @@                           
  @@  @@                @               @@         @@  @@@@                        @         @@@     @@@           @    @                           @        @@@          @@@   @@                          
   @@@@@              @          @@      @@        @@@@  @ @@                     @@         @@                   @      @                          @           @@@@@@@@@@@     @@                          
     @@@            @          @         @@        @     @@@@@                    @          @@       @        @  @@     @   @@                    @@                          @@@                          
      @@@          @         @@         @@@@       @@@  @@    @     @@@           @          @       @@     @@@    @@   @@@@  @@                    @          @@@            @@@                           
       @@         @        @@         @@   @@      @@          @        @@@       @         @        @      @@     @@@@@    @@ @                    @              @@@     @@@@                             
        @@      @@        @@        @@     @@      @@           @@        @@@@@@@@@         @       @@       @     @          @@@@                  @@                    @@@@@@                            
        @@@    @@        @@        @@      @@      @@            @@@    @@@@@@@@ @@         @       @        @     @@          @@@@                 @@@                        @@@                          
          @@  @        @@         @@       @@      @@             @@@@@@@       @@@         @       @       @@     @ @@          @@@                @@@                           @@@                       
           @@@        @          @@@      @ @@     @@                           @@         @       @@       @@@   @    @          @@@                @@                             @@@                     
            @        @@        @@  @@ @@@@@@@@     @@@                          @          @       @@      @@@@  @@     @@         @@@                @                              @@@                    
           @        @       @@@            @@@@     @@                         @@          @       @@      @@  @@          @@@       @@@              @@@                              @@@                  
          @@      @@@     @@               @@@@      @                        @@           @       @      @@                  @@@@     @@@             @@@          @ @@  @@             @@                 
           @  @@@   @@@@@                   @@@      @@                       @@           @       @      @@                    @@@      @@@             @@                  @@@@        @@@                
                      @@@@                   @@@     @@@                     @@            @       @     @@                        @@      @@@@            @@@  @               @@@@@     @@                
                          @@@@@@@@@          @@@      @@@@                  @@             @       @@    @@                         @@@       @@@               @ @@@               @@@@   @                
                                   @@        @@@       @@@@@               @@@             @       @@   @                            @@@        @@@              @ @@                   @@@@                
                                     @       @@@       @@  @              @@              @@      @@@@ @@                           @@         @@ @@@             @@                       @@@              
                                     @@      @ @@      @   @@@           @@@            @@@ @    @@   @                             @@        @@@@  @            @@                          @@@            
                                     @@    @@   @     @@    @@          @@@           @@@   @    @@                                @@         @@     @@          @@                            @@@          
                               @@@@@@     @@@   @@   @@     @@          @@          @@@     @@ @@                                 @@        @@@       @          @@                              @@@        
                                 @@     @@@      @  @@     @@@         @@@          @        @@@                                  @        @@@        @          @@                                @@       
                                   @@@@@         @@        @@@        @@@         @@                                            @@        @@          @@        @@@                                 @@      
                                                  @@      @@@         @@        @@@                                           @@        @@@           @@        @@                                   @@     
                                                   @@@   @@@         @@        @@                                           @@@        @@             @@        @@                                    @@    
                                                     @  @@@@        @@        @@                                           @@         @@              @@        @@                                    @@@   
                                                      @@@@          @@        @                                         @@@@        @@                @         @@                                     @@@  
                                                                   @@@ @     @@                                      @@@@@        @@@@               @@         @@                                      @@  
                                                                  @@@   @   @@@                                    @@@@          @@@@@               @@        @@                               @       @@  
                                                                  @@        @@@@                                 @@@           @@@@@                 @@        @@                                @       @@ 
                                                                  @@     @  @@ @@                              @@@@           @@  @@                @@         @@                                @@       @@
                                                                  @@@@  @@      @@@                          @@@@           @@@   @@                @@        @@@                                 @@      @@
                                                                    @@            @@                        @@@            @@@    @@               @@         @@                                   @      @@
                                                                    @@@           @@                       @@             @@       @@     @        @@        @@                                    @@     @@
                                                                     @@@          @                       @@@            @@        @@     @       @@@        @@                                     @     @@
                                                                      @@          @                      @@@           @@@          @@   @       @@@        @@@                                     @@    @@
                                                                      @@@        @@                     @@@        @@@@@            @@@  @      @@@         @@                                      @@   @@@
                                                                       @@       @@                      @@      @@@@  @@              @@ @@    @@@         @@                                       @@  @@@ 
                                                                        @@      @                      @@    @@@@@   @@                @@ @@   @@          @@                                       @@ @@@  
                                                                        @@      @                      @@@@@@@@      @@                 @@@@@ @@          @@                                        @@@@@   
                                                                        @@      @                      @@            @                     @@@@           @                                         @@@     
                                                                        @@      @                      @@           @@                      @@          @@@                                        @@@      
                                                                        @@      @                      @@         @@@                      @@           @@                                         @@       
                                                                         @@     @                     @@@       @@@@                      @@           @@                                          @        
                                                                         @@     @                      @@    @@@@@                      @@@           @@@            @                           @@@        
                                                                         @@     @                      @@  @@@@                         @@         @@@@@           @@                           @@          
                                                                          @     @                      @@@@@@                          @@        @@@ @@@          @                            @@           
                                                                          @@    @                       @@                            @@     @@@@@  @@@@@       @@@                          @@@            
                                                                          @@    @@                                                    @@@@@@@@      @   @       @                          @@@              
                                                                          @@     @@                                                  @@@           @@   @@@    @@                        @@@                
                                                                          @@@     @@@                                                @@           @@@    @@   @@                     @@@                    
                                                                           @@     @@@@@                                              @@          @@@      @@@ @                   @@@@                      
                                                                           @@     @@  @@                                            @@@        @@@@         @@@          @@@@@@@@@                          
                                                                            @@    @@   @@                                           @@@     @@@@@             @        @@                                   
                                                                            @@    @     @                                           @@@    @@@                @       @                                     
                                                                            @@@  @@     @                                            @@@@@@@                  @      @@                                     
                                                                              @@ @      @@                                            @@@@                    @@     @@                                     
                                                                              @@        @@                                                                      @@     @@@@@@                               
                                                                              @@@       @@                                                                       @@@     @@                                 
                                                                               @@      @@                                                                           @@@@@                                   
                                                                                @@@   @@@                                                                                                                   
                                                                                 @@@ @@@                                                                                                                    
                                                                                  @@@@@                                                                                                                    --!>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Little Pony</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            background-color: #f0f0f0;
            height: 100vh;
            margin: 0;
        }

        /* Center the background changer */
        .background-changer {
            display: flex;
            justify-content: center;
            margin: 10px auto;
            width: 100%;
        }

        .background-changer img {
            width: 25px;
            height: 25px;
            margin: 0 5px;
            cursor: pointer;
        }

        .sidebar {
            width: 100px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            margin-right: 20px;
            border-radius: 12px;
        }

.sidebar button {
    display: block;
    margin-bottom: 5px;
    padding: 10px;
    background-color: #f7c6c7; /* Light pink color */
    border: 2px dotted #ffb3b5; /* Border color */
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    width: 100%;
    position: relative; /* Necessary for positioning the icon */
    overflow: hidden; /* Hide anything outside the button */
    transition: background-color 0.3s, transform 0.3s, font-weight 0.3s; /* Smooth transitions for background color, transform, and font weight */
}

.sidebar button:hover {
    background-color: #f5a6a7; /* Slightly darker pink color */
    font-weight: bold; /* Make text bold */
    transform: scale(1.05); /* Slightly enlarge the button without changing its size */
}

.sidebar button::before {
    content: '';
    position: absolute;
    left: 0; /* Position icon on the left */
    top: 50%;
    transform: translateY(-50%); /* Center icon vertically */
    width: 20px; /* Width of the icon */
    height: 20px; /* Height of the icon */
    background-image: url('https://sweetcharm.net/.CuteDesktop/SMALLPIXELS/457.gif'); /* Icon URL */
    background-size: contain; /* Adjust size to fit */
    background-repeat: no-repeat; /* Do not repeat the icon */
    background-position: center; /* Center the icon */
    opacity: 0; /* Hide the icon by default */
    transition: opacity 0.3s; /* Smooth transition for showing icon */
    z-index: -10; /* Ensure the icon is behind the text */
}

.sidebar button:hover::before {
    opacity: 1; /* Show the icon on hover */
}


/* Adjust margin to center the pony images */
.pony-wrapper {
    position: relative;
    width: 309px;
    height: 364px;
    margin-left: auto;  /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    margin-top: 20px;   /* Adjust top margin if needed */
    /* Add additional margin or padding if necessary to fine-tune the positioning */
}


        .pony-part {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .color-picker {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            z-index: 1000;
        }
        
        .background-changer img {
    width: 25px;
    height: 25px;
    margin: 0 5px;
    cursor: pointer;
    padding: 5px;  /* Add padding to make the background visible */
    background-color: #fff;  /* Set background color to white */
    border-radius: 12px;  /* Make corners rounded */
    border: 2px solid #ddd;  /* Add a light border for better visibility */
}


        #pony-body { z-index: 1; }
        #pony-wing { z-index: 2; }
        #pony-mane { z-index: 3; }
        #pony-tail { z-index: 4; }
        #pony-hoof { z-index: 2; }
        #pony-lines { z-index: 6; image-rendering: pixelated; }
        #pony-horn { z-index: 7; }
    </style>
</head>
<body>
    <!-- Background Changer -->
    <div class="background-changer">
        <img src="/.CuteDesktop/NothingToSeeHere/colorpicker/pastelheartstransparent.png" onclick="changeBackground('https://www.sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/pastelheartstransparent.png')" alt="Parfait Transparent">
        <img src="https://www.sweetcharm.net/.CuteDesktop/BACKGROUNDS/parfaitbgLIGHT.png" onclick="changeBackground('https://www.sweetcharm.net/.CuteDesktop/BACKGROUNDS/parfaitbgLIGHT.png')" alt="Parfait Light">
        <img src="https://www.sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/icecreamstransparent.png" onclick="changeBackground('https://www.sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/icecreamstransparent.png')" alt="Tama 4">
        <img src="https://www.sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/crossbgtransparent.png" onclick="changeBackground('https://www.sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/crossbgtransparent.png')" alt="Tama 6">
    </div>

    <!-- Sidebar for color buttons -->
    <div style="display: flex; align-items: flex-start;">
        <div class="sidebar">
            <button onclick="openColorPicker('body')">Body</button>
            <button onclick="openColorPicker('mane')">Mane</button>
            <button onclick="openColorPicker('tail')">Lines</button>
            <button onclick="openColorPicker('hoof')">Hoof</button>
            <button onclick="openColorPicker('wing')">Wing</button>
            <button onclick="openColorPicker('horn')">Horn</button>
            <button onclick="openColorPicker('bg')">Background</button>
            <button onclick="randomizeColors()">Random</button>
        </div>

        <!-- Pony Image Area -->
        
        <div class="pony-wrapper">
            <img id="pony-body" class="pony-part" src="https://sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/bodycolor.gif" alt="Body" style="filter: hue-rotate(0deg);">
            <img id="pony-mane" class="pony-part" src="https://sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/mane.gif" alt="Mane" style="filter: hue-rotate(0deg);">
            <img id="pony-tail" class="pony-part" src="https://sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/lines.gif" alt="Lines" style="filter: hue-rotate(0deg);">
            <img id="pony-hoof" class="pony-part" src="https://sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/hoof.gif" alt="Hoof" style="filter: hue-rotate(0deg);">
            <img id="pony-wing" class="pony-part" src="https://sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/wingcolor.gif" alt="Wing" style="filter: hue-rotate(0deg);">
            <img id="pony-horn" class="pony-part" src="https://sweetcharm.net/.CuteDesktop/NothingToSeeHere/colorpicker/horn.gif" alt="Horn" style="filter: hue-rotate(0deg);">
        </div>
    </div>

    <!-- Color Picker Modal -->
    <div id="color-picker" class="color-picker">
        <h3><img src="https://sweetcharm.net/.CuteDesktop/SMALLPIXELS/118%20(1).gif"> Pick Color <img src="https://sweetcharm.net/.CuteDesktop/SMALLPIXELS/118%20(1).gif"></h3>
        <input type="color" id="color-input" value="#FFFFFF">
        <button onclick="applyColor()">Apply</button>
        <button onclick="closeColorPicker()">Close</button>
    </div>

   <script>
    let selectedPart = '';
    let originalColor = '';
    let originalBgColor = '';  // Add this line to track the original background color

    function openColorPicker(part) {
        selectedPart = part;

        if (part === 'bg') {
            // Store the original background color
            originalBgColor = document.body.style.backgroundColor || '#FFFFFF';  // Default white
        } else {
            originalColor = document.getElementById(`pony-${selectedPart}`)?.style?.filter || '';
        }

        document.getElementById('color-picker').style.display = 'block';
        document.getElementById('color-input').addEventListener('input', liveUpdateColor);
    }

    function liveUpdateColor() {
        const color = document.getElementById('color-input').value;
        const [h, s, l] = hexToHSL(color);

        if (selectedPart === 'bg') {
            document.body.style.backgroundColor = color;
        } else {
            document.getElementById(`pony-${selectedPart}`).style.filter = `hue-rotate(${h}deg) saturate(${s}%) brightness(${l}%)`;
        }
    }

    function applyColor() {
        closeColorPicker(true); // Apply changes
    }

    function closeColorPicker(apply = false) {
        const element = document.getElementById(`pony-${selectedPart}`);
        
        if (!apply) {
            // Revert background color or pony part color if "cancel" is clicked
            if (selectedPart === 'bg') {
                document.body.style.backgroundColor = originalBgColor;  // Revert background color
            } else if (element) {
                element.style.filter = originalColor;  // Revert pony part color
            }
        }
        
        document.getElementById('color-picker').style.display = 'none';
        document.getElementById('color-input').removeEventListener('input', liveUpdateColor);
    }

    function randomizeColors() {
    const parts = ['body', 'mane', 'tail', 'hoof', 'wing', 'horn'];
    parts.forEach(part => {
        const randomColor = getRandomColor();
        const [h, s, l] = hexToHSL(randomColor);
        document.getElementById(`pony-${part}`).style.filter = `hue-rotate(${h}deg) saturate(${s}%) brightness(${l}%)`;
    });

    // Randomize background color
    document.body.style.backgroundColor = getRandomColor();
}


    function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    function hexToHSL(hex) {
        let r = parseInt(hex.substr(1, 2), 16) / 255;
        let g = parseInt(hex.substr(3, 2), 16) / 255;
        let b = parseInt(hex.substr(5, 2), 16) / 255;
        let max = Math.max(r, g, b), min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;

        if (max === min) {
            h = s = 0;
        } else {
            let d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
    }

function changeBackground(url) {
    document.body.style.backgroundImage = `url(${url})`;
    document.body.style.backgroundSize = 'auto';  // Ensure the image tiles naturally
    document.body.style.backgroundRepeat = 'repeat'; // Ensure the image repeats
}
</script>

</body>
</html>