<!--
This is from my personal web project. I would like to maybe devlop a color desktop app, or a social media account for sharing color palettes!
-->







<section class="RGB-Slider-Box">
                <p>
                <input id="RGB_Red" type="range" min="0" max="255" value="210" class="slider">
                <br/>
                <input id="RGB_Green" type="range" min="0" max="255" value="245" class="slider">
                <br/>
                <input id="RGB_Blue" type="range" min="0" max="255" value="214" class="slider">
                <br/>
                <span class="difference">R</span>
                <input id="RGB_Red_Text" type="text" value="210" class="RGB-n-input difference">
                <span class="difference">G</span>
                <input id="RGB_Green_Text" type="text" value="245" class="RGB-n-input difference">
                <span class="difference">B</span>
                <input id="RGB_Blue_Text" type="text" value="214" class="RGB-n-input difference">
                <span class="difference">Hex</span>
                <input id="RGB_Hex_Text" type="text" value="#D2F5D6" class="RGB-n-input RGB-hex-input difference">
                </p>
            </section>

body {
/* background-color: #D2F5D6; */
color: white;
font-family: Junegull;
padding: 0px;
margin: 0px;
text-align: center;
font-size: 20px;
}



.RGB-Slider-Box {
    background-color: #8E93EB;
    margin: 0px;
    /* padding: 20px; */

    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

.difference {
  mix-blend-mode: difference;
}

/*
Following css form
https://codepen.io/ibaslogic/pen/KKBLMxy 
*/


  
 
  input[type="range"] {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none; 
    /* creating a custom design */
    /* width: 100%; */
    width: 80vw;
    max-width: 400px;
    cursor: pointer;
    outline: none;
    /*  slider progress trick  */
    overflow: hidden;
    border-radius: 16px;
  }
  
  /* Track: webkit browsers */
  input[type="range"]::-webkit-slider-runnable-track {
    height: 30px;
    background: #ffffff;
    border-radius: 16px;
  }
  
  /* Track: Mozilla Firefox */
  input[type="range"]::-moz-range-track {
    height: 30px;
    background: #ffffff;
    border-radius: 16px;
  }
  
  /* Thumb: webkit */
  input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none; 
    /* creating a custom design */
    height: 30px;
    width: 30px;
    background-color: #300F31;
    border-radius: 50%;
    border: 1px solid #f50;
    /*  slider progress trick  */
    box-shadow: -413px 0 0 400px #f50;
  }
  
  
  /* Thumb: Firefox */
  input[type="range"]::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background-color: #300F31;
    border-radius: 50%;
    border: 1px solid #f50;
    /*  slider progress trick  */
    box-shadow: -413px 0 0 400px #f50;
  }
  
  
  
#RGB_Red::-webkit-slider-thumb {
    border: 1px solid rgba(255, 0, 0, 0.7);
    box-shadow: -413px 0 0 400px rgba(255, 0, 0, 0.7);
}

#RGB_Red::-moz-range-thumb {
    border: 1px solid rgb(255, 0, 0, 0.7);
    box-shadow: -413px 0 0 400px rgb(255, 0, 0, 0.7);
}


#RGB_Green::-webkit-slider-thumb {
    border: 1px solid rgb(0, 255, 0, 0.7);
    box-shadow: -413px 0 0 400px rgb(0, 255, 0, 0.7);
}

#RGB_Green::-moz-range-thumb {
    border: 1px solid rgb(0, 255, 0, 0.7);
    box-shadow: -413px 0 0 400px rgb(0, 255, 0, 0.7);
}

#RGB_Blue::-webkit-slider-thumb {
    border: 1px solid rgb(0, 0, 255, 0.7);
    box-shadow: -413px 0 0 400px rgb(0, 0, 255, 0.7);
}

#RGB_Blue::-moz-range-thumb {
    border: 1px solid rgb(0, 0, 255, 0.7);
    box-shadow: -413px 0 0 400px rgb(0, 0, 255, 0.7);
}





.RGB-n-input {
    font-family: Junegull;
    font-size: 20px;
    border: none;
    outline: none;
    border-radius: 7px;
    text-align: center;
    width: 50px;
    opacity: 0.7;
}
.RGB-hex-input {
    width: 110px;
}
  

const redSlider = document.getElementById("RGB_Red");
const greenSlider = document.getElementById("RGB_Green");
const blueSlider = document.getElementById("RGB_Blue");
const redText = document.getElementById("RGB_Red_Text");
const greenText = document.getElementById("RGB_Green_Text");
const blueText = document.getElementById("RGB_Blue_Text");
const hexText = document.getElementById("RGB_Hex_Text");
const rgbBox = document.querySelector(".RGB-Slider-Box");

function updateColor() {
    const redValue = redSlider.value;
    const greenValue = greenSlider.value;
    const blueValue = blueSlider.value;

    redText.value = redValue;
    greenText.value = greenValue;
    blueText.value = blueValue;

    const hexColor = `#${(1 << 24 | redValue << 16 | greenValue << 8 | blueValue).toString(16).slice(1)}`;
    hexText.value = hexColor;

    rgbBox.style.backgroundColor = `rgb(${redValue}, ${greenValue}, ${blueValue})`;
}

function updateSlidersFromHex() {
    const hexValue = hexText.value;
    const rgbValues = hexToRgb(hexValue);
    if (rgbValues) {
        redSlider.value = rgbValues.r;
        greenSlider.value = rgbValues.g;
        blueSlider.value = rgbValues.b;
        updateColor();
    }
}

function hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result
        ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16),
        }
        : null;
}

redSlider.addEventListener("input", updateColor);
greenSlider.addEventListener("input", updateColor);
blueSlider.addEventListener("input", updateColor);

redText.addEventListener("input", () => {
    redSlider.value = redText.value;
    updateColor();
});
greenText.addEventListener("input", () => {
    greenSlider.value = greenText.value;
    updateColor();
});
blueText.addEventListener("input", () => {
    blueSlider.value = blueText.value;
    updateColor();
});

hexText.addEventListener("input", updateSlidersFromHex);

// Initialize color on page load
updateColor();