|
import streamlit as st |
|
|
|
|
|
st.set_page_config( |
|
page_title="Mobile Emulator", |
|
page_icon="π", |
|
layout="centered", |
|
initial_sidebar_state="auto", |
|
) |
|
|
|
|
|
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> |
|
""" |
|
|
|
|
|
mobile_emulator_html = """ |
|
<div class="mobile-emulator"> |
|
<iframe id="mobile-iframe" src="https://www.google.com"></iframe> |
|
</div> |
|
""" |
|
|
|
|
|
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> |
|
""" |
|
|
|
|
|
st.title("Mobile Emulator") |
|
|
|
|
|
st.markdown(mobile_emulator_css, unsafe_allow_html=True) |
|
|
|
|
|
st.markdown(mobile_emulator_html, unsafe_allow_html=True) |
|
|
|
|
|
st.markdown(chrome_app_js, unsafe_allow_html=True) |
|
|
|
|
|
if st.button("Open Chrome App"): |
|
st.write("Opening Chrome App...") |
|
|
|
|
|
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) |
|
|
|
|
|
if __name__ == "__main__": |
|
st.run() |