import streamlit as st

# Set page configuration
st.set_page_config(
    page_title="Mobile Emulator",
    page_icon="🌐",
    layout="centered",
    initial_sidebar_state="auto",
)

# CSS for mobile emulator
mobile_emulator_css = """
<style>
.mobile-emulator {
    width: 360px;
    height: 640px;
    border: 16px black solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 36px;
    position: relative;
    margin: auto;
    overflow: hidden;
}
.mobile-emulator::before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 10px;
}
.mobile-emulator::after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -65px;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 50%;
}
.mobile-emulator iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
</style>
"""

# HTML for mobile emulator
mobile_emulator_html = """
<div class="mobile-emulator">
    <iframe src="https://www.google.com"></iframe>
</div>
"""

# JavaScript to open Chrome app
chrome_app_js = """
<script>
function openChromeApp() {
    alert('Opening Chrome App...');
    // You can replace the alert with actual logic to open a Chrome app
}
</script>
"""

# Streamlit App
st.title("Mobile Emulator")

# Display CSS
st.markdown(mobile_emulator_css, unsafe_allow_html=True)

# Display HTML
st.markdown(mobile_emulator_html, unsafe_allow_html=True)

# Button to open Chrome app
st.markdown(chrome_app_js, unsafe_allow_html=True)
st.button("Open Chrome App", on_click=openChromeApp)

# Run the Streamlit app
if __name__ == "__main__":
    st.run()