techsolut_theme.py

import streamlit as st
from PIL import Image

# TECHSOLUT branding assets
TECHSOLUT_LOGO_PATH = "assets/techsolut_logo.png"


def apply_techsolut_theme():
    # # Hide Streamlit default footer & menu
    # hide_streamlit_style = """
    #     <style>
    #         #MainMenu {visibility: hidden;}
    #         footer {visibility: hidden;}
    #         header {visibility: hidden;}
    #     </style>
    # """
    # st.markdown(hide_streamlit_style, unsafe_allow_html=True)

    # TECHSOLUT theme CSS with animated SVG background
    custom_css = """
        <style>
            html, body, [class*="css"] {
                font-family: 'Segoe UI', sans-serif;
                background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
                color: #E0F2F1;
                overflow-x: hidden;
            }

            body::before {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                width: 70%;
                height: 70%;
                background-image: url('https://www.svgrepo.com/show/353498/ai.svg');
                background-repeat: no-repeat;
                background-position: right bottom;
                background-size: 120px;
                opacity: 0.03;
                z-index: -1;
            }

            .block-container {
                padding-top: 2rem;
                padding-bottom: 2rem;
                animation: fadeIn 1s ease-in-out;
            }

            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }

            h1, h2, h3, h4, h5, h6 {
                color: #34D399;
                transition: color 0.3s ease-in-out;
            }

            .stButton>button {
                background-color: #1E293B;
                color: white;
                border: 1px solid #34D399;
                border-radius: 8px;
                padding: 0.5rem 1.5rem;
                transition: all 0.3s ease-in-out;
            }

            .stButton>button:hover {
                background-color: #34D399;
                color: black;
            }

            .stDownloadButton>button {
                background-color: #0EA5E9;
                color: white;
            }

            .stSidebar {
                background-color: #1E293B;
                animation: slideIn 1s ease-in-out;
            }

            @keyframes slideIn {
                from { transform: translateX(-20px); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }

            .stMarkdown a {
                color: #38BDF8;
            }

            .stMarkdown a:hover {
                text-decoration: underline;
            }

            input, select, textarea {
                border-radius: 5px;
                border: 1px solid #334155;
                padding: 0.4rem;
            }

            .metric-label {
                color: #94A3B8;
                font-size: 0.8rem;
            }

            .metric-value {
                font-size: 1.5rem;
                color: #10B981;
            }

            .icon {
                margin-right: 6px;
            }
        </style>
    """
    st.markdown(custom_css, unsafe_allow_html=True)

    # Add TECHSOLUT logo & title
    col1, col2 = st.columns([1, 8])
    with col1:
        try:
            logo = Image.open(TECHSOLUT_LOGO_PATH)
            st.image(logo, width=80)
        except Exception:
            st.write(":sparkles:")
    with col2:
        st.title("TECHSOLUT Platform - Vision par Ordinateur")

    # Optional banner / call to action widget
    st.markdown("""
     <div style="background-color:#1E3A8A;padding:1rem;border-radius:10px;margin-top:1rem;">
        <h4 style="color:#E0F2F1;">👋 Bienvenue sur la plateforme TECHSOLUT !</h4>
        <p style="color:#CBD5E1;">🎯 <strong>Plateforme de Computer Vision</strong> pour l'analyse d'images et de vidéos en temps réel.</p>
        <p style="color:#CBD5E1;">Effectuez des analyses en temps réel avec YOLO, RT-DETR, SAM2 et plus encore.<br>
        Multi-caméras, détection d'intrusion, export PDF, et enregistrement vidéo intégrés.</p>
        <p style="color:#CBD5E1;">⚙️ Configurez vos préférences via la barre latérale.<br>
        📹 Multi-caméras | 🛡️ Détection d'intrusion | 📄 Export PDF | 🎬 Enregistrement vidéo</p>
    </div>
    """, unsafe_allow_html=True)

    # Sticky footer with widgets and links
    st.markdown("""
    <style>
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #1E293B;
            color: white;
            text-align: center;
            padding: 10px;
            font-size: 14px;
            z-index: 100;
            border-top: 1px solid #334155;
        }
        .footer a {
            color: #34D399;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
    </style>
    <div class="footer">
        <div>© 2025 TECHSOLUT - Développé avec ❤️ par Sylvestre Apetcho | <a href="mailto:contact@techsolut.fr">contact@techsolut.fr</a></div>
        <div style="margin-top:5px;">
            🌐 <a href="https://www.techsolut.fr" target="_blank">Site Web</a> |
            📄 <a href="https://www.techsolut.fr/docs" target="_blank">Documentation</a> |
            ✉️ <a href="mailto:contact@techsolut.fr">Support</a>
        </div>
        <div style="margin-top:4px;color:#9CA3AF;">📦 Version 1.0 - Avril 2025</div>
    </div>
    """, unsafe_allow_html=True)

def techsolut_sidebar_widgets():
    st.sidebar.markdown("---")
    st.sidebar.header("🌐 Liens utiles")
    st.sidebar.markdown("[TECHSOLUT Website](https://www.techsolut.fr)")
    st.sidebar.markdown("[Documentation](https://www.techsolut.fr/docs)")
    st.sidebar.markdown("[Contact Support](mailto:contact@techsolut.fr)")
    st.sidebar.markdown("---")
    st.sidebar.markdown("""
        <small style='color:#9CA3AF;'>📦 Version 1.0 - Avril 2025</small>
    """, unsafe_allow_html=True)

def main():
    st.set_page_config(
        page_title="Plateforme de Vision par Ordinateur - TECHSOLUT",
        layout="wide"
    )

    apply_techsolut_theme()
    techsolut_sidebar_widgets()

    # Exemple de widget dynamique supplémentaire
    st.sidebar.markdown("---")
    st.sidebar.subheader("📊 Indicateurs en direct")
    col1, col2 = st.sidebar.columns(2)
    col1.metric("🎥 Caméras", "3", "+1")
    col2.metric("⚠️ Alertes", "5", "-2")

    st.sidebar.markdown("""
        <hr style='border:1px solid #334155; margin-top: 1rem; margin-bottom: 0.5rem;'>
        <div style='color:#9CA3AF;font-size:12px;'>Plateforme alimentée par Streamlit & YOLO</div>
    """, unsafe_allow_html=True)

if __name__ == "__main__":
    main()