src/frontend/utils/common_functions.py

import streamlit as st
import base64

PAGE_ICON = 'src/frontend/images/jb_events_logo.jpg'
PAGE_LAYOUT = 'wide'
PAGE_TITLE = 'JB Events'
INITIAL_SIBEBAR_STATE = 'collapsed'

def set_up_page():
    st.set_page_config(page_icon=PAGE_ICON,layout=PAGE_LAYOUT,page_title=PAGE_TITLE,initial_sidebar_state=INITIAL_SIBEBAR_STATE)

def navbar_with_title():
    st.markdown(f"""
        <style>
            .navbar {{
                position: fixed;  /* Fix the navbar at the top */
                top: 1;
                left: 0;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1px 50px;
                background-color: #1F1F1F; /* Dark background */
                border-radius: 0; /* Remove border-radius for full-width navbar */
                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
                z-index: 1000; /* Ensure it stays above other content */
            }}
                
            .left-section {{
                color: white;
                display: flex;
                align-items: center;
                gap: 15px;
            }}
                
            .menu {{
                display: flex;
                gap: 20px;
            }}
            .menu a {{
                color: white;
                text-decoration: none;
                font-weight: bold;
                font-size: 16px;
                transition: color 0.3s, transform 0.2s;
            }}
            .menu a:hover {{
                color: #FFD700; /* Gold hover effect */
                transform: scale(1.1);
            }}
                
            .contact {{
                color: white;
                font-size: 16px;
                font-weight: bold;
            }}
            @media (max-width: 768px) {{
                .navbar {{
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }}
            }}
        </style>

        <div class="navbar">
            <div class="left-section">
                <h1 class="title">JB Consultancy</h1>
            </div>
            <div class="menu">
                <a href="#">HOME</a>
                <a href="#">ABOUT US</a>
                <a href="#">SERVICES</a>
                <a href="#">GALLERY</a>
                <a href="#">CONTACT US</a>
            </div>
            <div class="contact">
                📞 +91-744-888-6668
            </div>
        </div>
    """, unsafe_allow_html=True)

def img_to_base64(image_path):
    """Convert image to base64."""
    try:
        with open(image_path, "rb") as img_file:
            return base64.b64encode(img_file.read()).decode()
    except Exception as e:
        # logger.error(f"Error converting image to base64: {str(e)}")
        return None
    
def set_bg_image(file_path, opacity=0.5):
    """
    Sets a background image for the Streamlit application with optional opacity control.
    This function applies a background image to the entire Streamlit app (`.stApp` container) 
    using CSS with a linear gradient overlay. The overlay enhances text readability by adding 
    a semi-transparent dark layer over the image.
    Args:
        file_path (str): The file path of the background image (supports PNG, JPG, etc.).
        opacity (float, optional): The opacity level of the dark overlay. 
                                   Values range from 0 (fully transparent) to 1 (fully opaque). 
                                   Default is 0.5, providing balanced readability and background visibility.
    Example Usage:
        ```python
        set_bg_image("src/frontend/images/health_care_banner.png", opacity=0.6)
        ```
    Notes:
    - Ensure the provided `file_path` is accessible and the image is properly encoded in base64 format.
    - For optimal results, use high-resolution images with suitable contrast to enhance readability.
    """
    encoded_img = img_to_base64(file_path)
    st.markdown(
        f"""
        <style>
        .stApp {{
            background: linear-gradient(rgba(0, 0, 0, {opacity}), rgba(0, 0, 0, {opacity})),
                        url("data:image/png;base64,{encoded_img}") center/cover fixed no-repeat;
            min-height: 100vh;
        }}
        </style>
        """,
        unsafe_allow_html=True
    )