import streamlit as st
import streamlit.components.v1 as components

st.title("Градиент радуги")

# HTML и CSS для создания градиента
gradient_html = """
<canvas id="rainbowCanvas" width="200" height="600"></canvas>
<script>
    const canvas = document.getElementById('rainbowCanvas');
    const ctx = canvas.getContext('2d');

    // Создаем линейный градиент
    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, 'violet');   // Фиолетовый
    gradient.addColorStop(1/6, 'blue');   // Синий
    gradient.addColorStop(2/6, 'green');  // Зеленый
    gradient.addColorStop(3/6, 'yellow'); // Желтый
    gradient.addColorStop(4/6, 'orange'); // Оранжевый
    gradient.addColorStop(5/6, 'red');    // Красный
    gradient.addColorStop(1, 'violet');   // Возврат к фиолетовому для плавности

    // Заполнение прямоугольника градиентом
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>
"""

# Использование Streamlit для отображения HTML
components.html(gradient_html, height=600)