accueil.py

import streamlit as st

def show():
    # CSS pour le style global
    st.markdown(
        """
        <style>
        /* Style du titre principal */
        .title {
            text-align: center;
            font-size: 42px;
            color: #FF6B6B;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        
        /* Style de la description d'accueil */
        .welcome-text {
            text-align: center;
            font-style: italic;
            font-size: 22px;
            margin-bottom: 30px;
            color: #444444;
        }
        
        /* Style du texte de section */
        .section-title {
            font-size: 28px;
            font-weight: bold;
            color: #1E90FF;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        /* Style du conteneur de bouton */
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            margin-bottom: 20px;
        }
        /* Style du bouton */
        .info-button {
            background-color: #1E90FF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            text-decoration: none;
            display: inline-block;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .info-button:hover {
            background-color: #FF6B6B;
        }
        /* Style du pied de page */
        .footer {
            font-style: italic;
            font-size: 16px;
            text-align: center;
            margin-top: 40px;
            color: #888888;
        }
        </style>
        """,
        unsafe_allow_html=True
    )

    # Titre principal centré et stylisé
    st.markdown('<div class="title">AnemiaScope</div>', unsafe_allow_html=True)

    # Texte de bienvenue
    st.markdown('<div class="welcome-text">Bienvenue sur notre application dédiée à la sensibilisation et à l\'analyse de l\'anémie chez les adolescentes</div>', unsafe_allow_html=True)

    st.write("""
    Cette application vous permet de :
    - Découvrir les fondamentaux de l'anémie.
    - Explorer les données sur la prévalence de l'anémie.
    - Visualiser des dashboards avec des filtres de risque.
    - Prédire le statut anémique d'une adolescente.
    - Générer un rapport téléchargeable.
    """)

    # Section déroulante pour en savoir plus sur l'anémie avec deux colonnes
    with st.expander("👉 En savoir plus sur l'anémie", expanded=False):
        col1, col2 = st.columns(2)

        # Colonne 1 : Définition de l'anémie
        with col1:
            st.markdown('<div class="section-title">Qu\'est-ce que l\'anémie ?</div>', unsafe_allow_html=True)
            st.write("""
            L'anémie se caractérise par un manque de globules rouges sains pour transporter l'oxygène dans le corps. Les symptômes incluent :
            - Fatigue
            - Pâleur
            - Essoufflement
            """)

        # Colonne 2 : Groupes à risque
        with col2:
            st.markdown('<div class="section-title">Groupes à risque</div>', unsafe_allow_html=True)
            st.write("""
            Groupes les plus vulnérables :
            - Enfants de moins de 5 ans
            - Femmes enceintes et allaitantes
            - Femmes en âge de procréer
            - Adolescentes
            """)

        # Causes et prévention
        st.markdown('<div class="section-title">Causes de l\'anémie</div>', unsafe_allow_html=True)
        st.write("""
        Les causes principales sont :
        - **Carence en fer**
        - **Carence en vitamines** (B12, acide folique)
        - **Perte de sang** (menstruations abondantes)
        """)

        st.markdown('<div class="section-title">Prévention</div>', unsafe_allow_html=True)
        st.write("""
        - **Alimentation équilibrée** : riche en fer
        - **Suppléments** : si nécessaire
        - **Suivi médical** : vérifier le taux d'hémoglobine
        """)

    # Bouton pour en savoir plus
    st.markdown(
        """
        <div class="button-container">
            <a class="info-button" href="https://www.who.int/fr/news-room/fact-sheets/detail/anaemia" target="_blank">
            Cliquez ici pour plus d'informations
            </a>
        </div>
        """,
        unsafe_allow_html=True
    )

    # Texte de fin de page
    st.markdown('<div class="footer">Explorez les différentes sections pour débuter votre analyse.</div>', unsafe_allow_html=True)

if __name__ == '__main__':
    show()