Anne31415 commited on
Commit
8d2f0ba
·
1 Parent(s): 73d7e50

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +73 -30
app.py CHANGED
@@ -1,34 +1,77 @@
1
  import streamlit as st
2
 
3
- def cloud_button(label, key, width):
4
- button_html = f"""
5
- <div style="text-align: center; display: inline-block; width: {width}px;">
6
- <div style="display: inline-flex; position: relative; background-color: #FF6347; border-radius: 50px; padding: 10px;">
7
- <div style="border-radius: 50%; width: 50px; height: 50px; margin: 5px;"></div>
8
- <div style="border-radius: 50%; width: 60px; height: 60px; margin: 5px; position: absolute; left: 20px;"></div>
9
- <div style="border-radius: 50%; width: 70px; height: 70px; margin: 5px; position: absolute; left: 50px;"></div>
10
- <div style="border-radius: 50%; width: 80px; height: 80px; margin: 5px; position: absolute; left: 90px;"></div>
11
- <div style="border-radius: 50%; width: 70px; height: 70px; margin: 5px; position: absolute; left: 140px;"></div>
12
- <div style="border-radius: 50%; width: 60px; height: 60px; margin: 5px; position: absolute; left: 180px;"></div>
13
- <div style="border-radius: 50%; width: 50px; height: 50px; margin: 5px; position: absolute; left: 210px;"></div>
14
- </div>
15
- <div style="margin-top: -40px; color: white; font-weight: bold;">{label}</div>
16
- </div>
17
- """
18
- st.markdown(button_html, unsafe_allow_html=True)
19
- return st.button("", key=key, use_container_width=True)
20
-
21
- width = 300
22
- if cloud_button("Click Me!", "button1", width):
23
- st.success("Button 1 clicked!")
24
-
25
- if cloud_button("Another Button", "button2", width):
26
- st.success("Button 2 clicked!")
27
-
28
- st.markdown(f"""
29
- <div style="background-color: #FF6347; border-radius: 10px; padding: 10px; width: {width}px; color: white; text-align: center;">
30
- This is a text field
31
- </div>
32
- """, unsafe_allow_html=True)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
 
34
 
 
1
  import streamlit as st
2
 
3
+ # Define the HTML and CSS for the cloud-shaped button and text field
4
+ cloud_button_html = """
5
+ <style>
6
+ .cloud-button {
7
+ background-color: #FFCC99;
8
+ border: none;
9
+ color: white;
10
+ padding: 10px 20px;
11
+ text-align: center;
12
+ text-decoration: none;
13
+ display: inline-block;
14
+ font-size: 16px;
15
+ margin: 4px 2px;
16
+ transition-duration: 0.4s;
17
+ cursor: pointer;
18
+ border-radius: 16px;
19
+ box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.24), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
20
+ position: relative;
21
+ }
22
+
23
+ .cloud-button:after {
24
+ content: "";
25
+ position: absolute;
26
+ top: 100%;
27
+ left: 50%;
28
+ border-width: 0 15px 10px 15px;
29
+ border-style: solid;
30
+ border-color: #FFCC99 transparent transparent transparent;
31
+ margin-left: -15px;
32
+ margin-top: -2px;
33
+ }
34
+
35
+ .text-field {
36
+ border: none;
37
+ background: transparent;
38
+ color: #333;
39
+ width: 100%;
40
+ text-align: center;
41
+ }
42
+ </style>
43
+ <div style="text-align: center; margin-top: 20px;">
44
+ <button class="cloud-button" onclick="handleClick()">
45
+ <input type="text" value="this is a text field" class="text-field" readonly />
46
+ </button>
47
+ </div>
48
+ <script>
49
+ function handleClick() {
50
+ const outputDiv = document.getElementById('output');
51
+ if(outputDiv) {
52
+ outputDiv.innerText = 'success';
53
+ }
54
+ }
55
+ </script>
56
+ """
57
+
58
+ # Render the cloud button with Streamlit
59
+ st.markdown(cloud_button_html, unsafe_allow_html=True)
60
+
61
+ # Placeholder for the output text
62
+ output = st.empty()
63
+
64
+ # Update the output text when the button is clicked
65
+ if "button_clicked" not in st.session_state:
66
+ st.session_state["button_clicked"] = False
67
+
68
+ if st.session_state["button_clicked"]:
69
+ output.text("success")
70
+
71
+ # Button click handler
72
+ with st.form(key="my_form"):
73
+ submit_button = st.button("Click me!")
74
+ if submit_button:
75
+ st.session_state["button_clicked"] = True
76
 
77