Update app.py

app.py

@@ -8,7 +8,7 @@ import qrcode
 from PIL import Image
 import io
 
-# 自訂 CSS 確保標題不換行、調整圖片大小、優化按鈕布局、右下角資訊並添加頒獎台樣式
+# 自訂 CSS 確保標題不換行、調整圖片大小、優化按鈕布局、右下角資訊
 st.markdown("""
     <style>
     .stApp header h1 {
@@ -18,7 +18,6 @@ st.markdown("""
         font-size: 2rem; /* 調整字體大小為 2rem，約 32px */
     }
     .stImage > img {
-        max-width: 95%; /* 圖片寬度幾乎填滿 */
         max-height: 80vh; /* 圖片高度接近視窗高度 */
         object-fit: contain; /* 保持比例 */
     }
@@ -43,50 +42,31 @@ st.markdown("""
         padding: 5px;
     }
     /* 頒獎台樣式 */
-    .podium-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-end;
-        margin-top: 20px;
-        margin-bottom: 20px;
-    }
     .podium {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+        text-align: center;
+        padding: 10px;
         margin: 0 10px;
-    }
-    .podium-step {
-        background-color: #d3d3d3; /* 灰色台子 */
+        background-color: #d3d3d3;
         border: 2px solid #000;
-        text-align: center;
-        font-weight: bold;
         color: #333;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        font-weight: bold;
     }
-    .podium-step.first {
-        width: 120px;
-        height: 150px; /* 第一名台子最高 */
+    .podium.first {
+        height: 150px; /* 第一名最高 */
         background-color: #ffd700; /* 金色 */
     }
-    .podium-step.second {
-        width: 120px;
+    .podium.second {
         height: 120px; /* 第二名次之 */
         background-color: #c0c0c0; /* 銀色 */
     }
-    .podium-step.third {
-        width: 120px;
+    .podium.third {
         height: 90px; /* 第三名最低 */
         background-color: #cd7f32; /* 銅色 */
     }
     .podium-label {
         margin-top: 5px;
         font-size: 1rem;
-        text-align: center;
         color: #333;
-        white-space: pre-line; /* 允許換行 */
     }
     </style>
 """, unsafe_allow_html=True)
@@ -308,47 +288,43 @@ def main():
                 top_3 = valid_df.head(3)
                 
                 if len(top_3) > 0:
-                    # 準備頒獎台 HTML
-                    podium_html = '<div class="podium-container">'
+                    col1, col2, col3 = st.columns(3)  # 創建三列
 
                     # 第二名（如果有）
-                    if len(top_3) >= 2:
-                        second = top_3.iloc[1]
-                        podium_html += f'''
-                        <div class="podium">
-                            <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-step second"></div><div class="podium-label"></div></div>'
+                    with col1:
+                        if len(top_3) >= 2:
+                            second = top_3.iloc[1]
+                            st.markdown(
+                                f'<div class="podium second">{int(second["查詢結果"])}</div>'
+                                f'<div class="podium-label">{second["姓名"]}\n{second["幸運號碼"]}</div>',
+                                unsafe_allow_html=True
+                            )
+                        else:
+                            st.markdown('<div class="podium second"></div><div class="podium-label"></div>', unsafe_allow_html=True)
 
                     # 第一名（如果有）
-                    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>'
+                    with col2:
+                        if len(top_3) >= 1:
+                            first = top_3.iloc[0]
+                            st.markdown(
+                                f'<div class="podium first">{int(first["查詢結果"])}</div>'
+                                f'<div class="podium-label">{first["姓名"]}\n{first["幸運號碼"]}</div>',
+                                unsafe_allow_html=True
+                            )
+                        else:
+                            st.markdown('<div class="podium first"></div><div class="podium-label"></div>', unsafe_allow_html=True)
 
                     # 第三名（如果有）
-                    if len(top_3) >= 3:
-                        third = top_3.iloc[2]
-                        podium_html += f'''
-                        <div class="podium">
-                            <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-step third"></div><div class="podium-label"></div></div>'
-
-                    podium_html += '</div>'
-                    st.markdown(podium_html, unsafe_allow_html=True)
+                    with col3:
+                        if len(top_3) >= 3:
+                            third = top_3.iloc[2]
+                            st.markdown(
+                                f'<div class="podium third">{int(third["查詢結果"])}</div>'
+                                f'<div class="podium-label">{third["姓名"]}\n{third["幸運號碼"]}</div>',
+                                unsafe_allow_html=True
+                            )
+                        else:
+                            st.markdown('<div class="podium third"></div><div class="podium-label"></div>', unsafe_allow_html=True)
                 else:
                     st.warning("無有效的查詢結果可供顯示頒獎台。")
             else: