Update app.py

app.py

@@ -41,7 +41,7 @@ st.markdown("""
         color: #666;
         padding: 5px;
     }
-    /* 頒獎台樣式 */
+    /* 頒獎台樣式（正常顯示） */
     .podium-container {
         display: flex;
         justify-content: center;
@@ -90,6 +90,58 @@ st.markdown("""
         background-color: rgba(0, 0, 0, 0.5); /* 半透明背景，提升可讀性 */
         white-space: pre-line; /* 允許換行 */
     }
+    /* 全螢幕頒獎台樣式 */
+    .podium-fullscreen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+        z-index: 1000;
+        margin: 0;
+        padding: 0;
+    }
+    .podium-fullscreen .podium {
+        width: 30vw; /* 按比例放大 */
+        margin: 0 2vw;
+    }
+    .podium-fullscreen .podium-step.first {
+        height: 40vh; /* 按比例放大高度 */
+    }
+    .podium-fullscreen .podium-step.second {
+        height: 32vh; /* 按比例放大高度 */
+    }
+    .podium-fullscreen .podium-step.third {
+        height: 24vh; /* 按比例放大高度 */
+    }
+    .podium-fullscreen .podium-filler.second {
+        height: 8vh; /* 填充高度按比例調整 (40vh - 32vh) */
+    }
+    .podium-fullscreen .podium-filler.third {
+        height: 16vh; /* 填充高度按比例調整 (40vh - 24vh) */
+    }
+    .podium-fullscreen .podium-step {
+        font-size: 2rem; /* 放大數字字體 */
+    }
+    .podium-fullscreen .podium-label {
+        font-size: 1.5rem; /* 放大標籤字體 */
+        padding: 10px;
+    }
+    .close-button {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        color: #fff;
+        font-size: 1.5rem;
+        cursor: pointer;
+        background-color: #ff4d4d;
+        padding: 5px 10px;
+        border-radius: 5px;
+    }
     </style>
 """, unsafe_allow_html=True)
 
@@ -324,9 +376,9 @@ def main():
                 top_3 = valid_df.head(3)
                 
                 if len(top_3) > 0:
+                    # 正常顯示頒獎台
                     col1, col2, col3 = st.columns(3)  # 創建三列
 
-                    # 第二名（如果有）
                     with col1:
                         if len(top_3) >= 2:
                             second = top_3.iloc[1]
@@ -341,7 +393,6 @@ def main():
                         else:
                             st.markdown('<div class="podium"><div class="podium-filler" style="height: 30px;"></div><div class="podium-step second"></div><div class="podium-label"></div></div>', unsafe_allow_html=True)
 
-                    # 第一名（如果有）
                     with col2:
                         if len(top_3) >= 1:
                             first = top_3.iloc[0]
@@ -355,7 +406,6 @@ def main():
                         else:
                             st.markdown('<div class="podium"><div class="podium-step first"></div><div class="podium-label"></div></div>', unsafe_allow_html=True)
 
-                    # 第三名（如果有）
                     with col3:
                         if len(top_3) >= 3:
                             third = top_3.iloc[2]
@@ -369,6 +419,62 @@ def main():
                             )
                         else:
                             st.markdown('<div class="podium"><div class="podium-filler" style="height: 60px;"></div><div class="podium-step third"></div><div class="podium-label"></div></div>', unsafe_allow_html=True)
+
+                    # 全螢幕顯示按鈕
+                    if st.button("全螢幕顯示頒獎台"):
+                        st.session_state.show_fullscreen = True
+
+                    # 全螢幕頒獎台
+                    if 'show_fullscreen' in st.session_state and st.session_state.show_fullscreen:
+                        podium_html = '<div class="podium-fullscreen">'
+
+                        # 第二名
+                        if len(top_3) >= 2:
+                            second = top_3.iloc[1]
+                            podium_html += f'''
+                            <div class="podium">
+                            <div class="podium-filler second"></div>
+                            <div class="podium-step second">{int(second["查詢結果"])}</div>
+                            <div class="podium-label">{second["姓名"]}\n{second["幸運號碼"]}</div>
+                            </div>
+                            '''
+                        else:
+                            podium_html += '<div class="podium"><div class="podium-filler second"></div><div class="podium-step second"></div><div class="podium-label"></div></div>'
+
+                        # 第一名
+                        if len(top_3) >= 1:
+                            first = top_3.iloc[0]
+                            podium_html += f'''
+                            <div class="podium">
+                            <div class="podium-step first">{int(first["查詢結果"])}</div>
+                            <div class="podium-label">{first["姓名"]}\n{first["幸運號碼"]}</div>
+                            </div>
+                            '''
+                        else:
+                            podium_html += '<div class="podium"><div class="podium-step first"></div><div class="podium-label"></div></div>'
+
+                        # 第三名
+                        if len(top_3) >= 3:
+                            third = top_3.iloc[2]
+                            podium_html += f'''
+                            <div class="podium">
+                            <div class="podium-filler third"></div>
+                            <div class="podium-step third">{int(third["查詢結果"])}</div>
+                            <div class="podium-label">{third["姓名"]}\n{third["幸運號碼"]}</div>
+                            </div>
+                            '''
+                        else:
+                            podium_html += '<div class="podium"><div class="podium-filler third"></div><div class="podium-step third"></div><div class="podium-label"></div></div>'
+
+                        podium_html += '<div class="close-button" onclick="this.parentElement.style.display=\'none\';">關閉</div>'
+                        podium_html += '</div>'
+                        st.markdown(podium_html, unsafe_allow_html=True)
+
+                        # 提供關閉按鈕的替代方式（因為 Streamlit 的 onclick 可能不完全可靠）
+                        if st.button("關閉全螢幕"):
+                            st.session_state.show_fullscreen = False
+                            st.rerun()
+
                 else:
                     st.warning("無有效的查詢結果可供顯示頒獎台。")
             else:
@@ -380,5 +486,4 @@ def main():
 # 添加右下角資訊
 st.markdown('<div class="footer">程式設計：新竹縣立精華國中 藍星宇老師</div>', unsafe_allow_html=True)
 
-if __name__ == "__main__":
-    main()
+if