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 id="mobile-iframe" src="https://www.google.com"></iframe>
</div>
"""

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

function search(query) {
    var iframe = document.getElementById('mobile-iframe');
    iframe.src = 'https://www.google.com/search?q=' + encodeURIComponent(query);
}
</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)

# Display JavaScript
st.markdown(chrome_app_js, unsafe_allow_html=True)

# Button to open Chrome app
if st.button("Open Chrome App"):
    st.write("Opening Chrome App...")

# Search functionality
search_query = st.text_input("Search", "")
if st.button("Search"):
    st.write(f"Searching for: {search_query}")
    st.markdown(f"""
    <script>
    search("{search_query}");
    </script>
    """, unsafe_allow_html=True)

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