import streamlit as st

# Función para agregar CSS personalizado
def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

# Función para crear un bloque de modelo con estilo
def modelo_block(titulo, descripcion, color):
    st.markdown(f"""
        <div style="
            border-left: 5px solid {color};
            padding: 10px;
            margin: 10px 0;
            background-color: #f1f1f1;
        ">
            <h4 style="color:{color};">{titulo}</h4>
            <p>{descripcion}</p>
        </div>
        """, unsafe_allow_html=True)

# Agregar CSS local si es necesario (no incluido en este ejemplo)
# local_css("path_to_your_css_file.css")

# Título principal
st.markdown("<h1 style='text-align: center; color: magenta;'>Modelos de Diseño Instruccional (DI)</h1>", unsafe_allow_html=True)

# Modelo ADDIE
modelo_block("Modelo ADDIE", """
- Análisis: Determina necesidades de los estudiantes y objetivos del curso.
- Diseño: Desarrolla los resultados de aprendizaje y selecciona el contenido.
- Desarrollo: Crea y reúne los materiales didácticos.
- Implementación: Ofrece el curso a los estudiantes.
- Evaluación: Evalúa el curso y realiza ajustes basados en el feedback.
""", "#8A2BE2")

# Modelo Dick, Carey y Carey
modelo_block("Modelo Dick, Carey y Carey", """
- Evaluación de Necesidades: Identifica qué necesitan aprender los estudiantes.
- Establecimiento de Metas Instruccionales: Define lo que se espera que los estudiantes logren.
- Diseño Instruccional: Detalla las actividades que ayudarán a los estudiantes a alcanzar esas metas.
- Evaluación: Asegura que los objetivos se cumplan efectivamente.
""", "#5F9EA0")

# Modelo de Morrison, Ross y Kemp
modelo_block("Modelo de Morrison, Ross y Kemp", """
- Plan Curricular: Se enfoca en un ciclo continuo de revisión de actividades interrelacionadas para un aprendizaje integral.
""", "#DC143C")

# Agrega el resto de modelos siguiendo la estructura anterior

# Referencias (agrega tus referencias aquí)
st.markdown("### Referencias")
st.markdown("Tus referencias aquí")

# Ejecuta esto en tu terminal local: streamlit run your_script.py