import streamlit as st

# App Title
st.title("Color color sa box")

# Sliders for RGB values
st.sidebar.header("Adjust Box Color")
r = st.sidebar.slider("Red", 0, 255, 128, step=1)
g = st.sidebar.slider("Green", 0, 255, 128, step=1)
b = st.sidebar.slider("Blue", 0, 255, 128, step=1)

# Slider for darkness/shade
shade = st.sidebar.slider("Shade (0: Dark, 1: Light)", 0.0, 1.0, 0.5, step=0.01)

# Calculate the adjusted RGB values based on shade
adjusted_r = int(r * shade)
adjusted_g = int(g * shade)
adjusted_b = int(b * shade)

# Display the box with adjusted color
box_color = f"rgb({adjusted_r}, {adjusted_g}, {adjusted_b})"
st.markdown(
    f"""
    <div style="
        width: 200px; 
        height: 200px; 
        background-color: {box_color}; 
        border: 1px solid black;">
    </div>
    """,
    unsafe_allow_html=True
)

# Show the current RGB values
st.write("**Adjusted RGB Values:**")
st.write(f"Red: {adjusted_r}, Green: {adjusted_g}, Blue: {adjusted_b}")

st.write("Use the sliders in the sidebar to adjust the color, shade, and darkness of the box.")