Thu Nov 30 18:41:00 CST 2023 inscode

main.py

 import streamlit as st
-from streamlit_option_menu import option_menu
 
-# 设置Streamlit应用程序的标题
-st.set_page_config(page_title="app name", layout="wide")
+st.set_page_config(page_title="Wall-E", page_icon=":robot_face:", layout="wide")
 
-menu1="菜单1"
-menu2="菜单2"
+html = """
+<div style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden;">
+    <div id="pet" style="position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; transform: translate(-50%, -50%);">
+        <div id="body" style="position: absolute; width: 120px; height: 140px; background: #6C706F; left: 40px; top: 30px;">
+            <div id="head" style="position: absolute; width: 100px; height: 100px; border-radius: 50%; background: #F2F3F4; left: 10px; top: 0px;">
+                <div id="eye-left" style="position: absolute; width: 25px; height: 25px; border-radius: 50%; background: #333; left: 10px; top: 30px;">
+                    <div id="pupil-left" style="position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%);">
+                    </div>
+                </div>
+                <div id="eye-right" style="position: absolute; width: 25px; height: 25px; border-radius: 50%; background: #333; left: 65px; top: 30px;">
+                    <div id="pupil-right" style="position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%);">
+                    </div>
+                </div>
+            </div>
+            <div id="hand-left" style="position: absolute; width: 20px; height: 60px; background: #F2F3F4; left: -20px; top: 50px; transform: rotate(45deg); ">
+            </div>
+            <div id="hand-right" style="position: absolute; width: 20px; height: 60px; background: #F2F3F4; left: 100px; top: 50px; transform: rotate(-45deg);">
+            </div>
+            <div id="wheel-left" style="position: absolute; width: 25px; height: 25px; border-radius: 50%; background: #8A8075; left: 20px; top: 100px;">
+            </div>
+            <div id="wheel-right" style="position: absolute; width: 25px; height: 25px; border-radius: 50%; background: #8A8075; left: 75px; top: 100px;">
+            </div>
+        </div>
+    </div>
+</div>
+"""
 
-with st.sidebar:
-    menu = option_menu("菜单", [menu1, menu2], 
-        icons=['house', "list-task"], 
-        menu_icon="cast", default_index=0)
+st.markdown(html, unsafe_allow_html=True)
 
-def main():
+css = """
+#pet:hover #eye-left {
+    transform: scale(1.5);
+}
 
-    if menu == menu1:
-        st.subheader(f"{menu1}")
+#pet:hover #eye-right {
+    transform: scale(1.5);
+}
 
-    if menu == menu2:
-        st.subheader(f"{menu2}")
+#pet:hover #pupil-left {
+    transform: scale(0.5);
+}
 
-if __name__ == '__main__':
-    main()
+#pet:hover #pupil-right {
+    transform: scale(0.5);
+}
+
+@media (max-width: 768px) {
+    #pet {
+        width: 80px;
+        height: 80px;
+    }
+
+    #head {
+        width: 30px;
+        height: 30px;
+    }
+
+    #body {
+        width: 50px;
+        height: 50px;
+    }
+
+    #eye-left, #eye-right {
+        width: 10px;
+        height: 10px;
+    }
+
+    #pupil-left, #pupil-right {
+        width: 4px;
+        height: 4px;
+    }
+}
+"""
+
+st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
+
+js = """
+<script>
+const pet = document.getElementById("pet");
+const eyeLeft = document.getElementById("eye-left");
+const eyeRight = document.getElementById("eye-right");
+
+pet.addEventListener("mousemove", function(e) {
+    const x = e.offsetX;
+    const y = e.offsetY;
+    const eyeLeftX = x >= 100 ? 45 : 30;
+    const eyeRightX = x >= 100 ? 115 : 100;
+    const pupilLeftX = x >= 100 ? 47 : 32;
+    const pupilRightX = x >= 100 ? 117 : 102;
+    const eyeY = y >= 100 ? 45 : 32;
+    const pupilY = y >= 100 ? 47 : 34;
+    eyeLeft.style.left = eyeLeftX + "px";
+    eyeRight.style.left = eyeRightX + "px";
+    eyeLeft.style.top = eyeY + "px";
+    eyeRight.style.top = eyeY + "px";
+    eyeLeft.querySelector("#pupil-left").style.left = pupilLeftX + "px";
+    eyeRight.querySelector("#pupil-right").style.left = pupilRightX + "px";
+    eyeLeft.querySelector("#pupil-left").style.top = pupilY + "px";
+    eyeRight.querySelector("#pupil-right").style.top = pupilY + "px";
+});
+</script>
+"""
+
+st.markdown(js, unsafe_allow_html=True)
\ No newline at end of file