import streamlit as st
import pandas as pd
import base64
import json

st.set_page_config(
    page_title="app",
    page_icon="📈",
)
st.markdown("<h1 style='text-align: center; color: black;'> Welcome to DataAI! 👋</h1>", unsafe_allow_html=True)

st.sidebar.success("Select a demo above.")
def get_base64_of_bin_file(png_file):
    with open(png_file, "rb") as f:
        data = f.read()
    return base64.b64encode(data).decode()


def build_markup_for_logo(
    png_file,
    background_position="50% 10%",
    margin_top="10%",
    image_width="60%",
    image_height="",
):
    binary_string = get_base64_of_bin_file(png_file)
    return """
            <style>
                [data-testid="stSidebarNav"] {
                    background-image: url("data:image/png;base64,%s");
                    background-repeat: no-repeat;
                    background-position: %s;
                    margin-top: %s;
                    background-size: %s %s;
                }
            </style>
            """ % (
        binary_string,
        background_position,
        margin_top,
        image_width,
        image_height,
    )


def add_logo(png_file):
    logo_markup = build_markup_for_logo(png_file)
    st.markdown(
        logo_markup,
        unsafe_allow_html=True,
    )

add_logo("logoo.png")
st.markdown("<h2 style='text-align: center; color: black;'>This is the demo for the usecases we've worked on.</h1>", unsafe_allow_html=True)

st.markdown("<h3 style='text-align: center; color: black;'>Select a demo from the sidebar to see some examples of what we can do!!! </h2>", unsafe_allow_html=True)
footer="""<style>
a:link , a:visited{
color: blue;
background-color: transparent;
text-decoration: underline;
}

a:hover,  a:active {
color: red;
background-color: transparent;
text-decoration: underline;
}

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center;
}
</style>
<div class="footer">
<p>Developed with ❤ by DataAi Team. Please contact us at +91 12-32130332</p>
</div>
"""
st.markdown(footer,unsafe_allow_html=True)   

main_bg_ext = "jpg"
main_bg = "vally4.jpg"
        
st.markdown(
 f"""
 <style>
 .stApp {{
     background: url(data:image/{main_bg_ext};base64,{base64.b64encode(open(main_bg, "rb").read()).decode()});
     background-size: cover
 }}
 </style>
 """,
 unsafe_allow_html=True
)