Update app.py

app.py

@@ -51,26 +51,34 @@ st.markdown("""
     }
     .podium {
         text-align: center;
-        padding: 10px;
+        width: 120px;
         margin: 0 10px;
-        background-color: #d3d3d3;
+        display: flex;
+        flex-direction: column;
+    }
+    .podium-filler {
+        background-color: #1a1a1a; /* 與背景同色 */
+        flex-grow: 0;
+    }
+    .podium-step {
         border: 2px solid #000;
         color: #333;
         font-weight: bold;
         display: flex;
-        flex-direction: column;
-        justify-content: flex-end; /* 內容靠下對齊 */
+        align-items: center;
+        justify-content: center;
+        flex-grow: 0;
     }
-    .podium.first {
-        height: 150px; /* 第一名最高 */
+    .podium-step.first {
+        height: 150px; /* 第一名完整高度 */
         background-color: #ffd700; /* 金色 */
     }
-    .podium.second {
-        height: 120px; /* 第二名次之 */
+    .podium-step.second {
+        height: 120px; /* 第二名高度 */
         background-color: #c0c0c0; /* 銀色 */
     }
-    .podium.third {
-        height: 90px; /* 第三名最低 */
+    .podium-step.third {
+        height: 90px; /* 第三名高度 */
         background-color: #cd7f32; /* 銅色 */
     }
     .podium-label {
@@ -302,41 +310,51 @@ 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 second">{int(second['查詢結果'])}</div>
-                        <div class="podium-label">{second['姓名']}\n{second['幸運號碼']}</div>
-                        '''
-                    else:
-                        podium_html += '<div class="podium second"></div><div class="podium-label"></div>'
+                    with col1:
+                        if len(top_3) >= 2:
+                            second = top_3.iloc[1]
+                            st.markdown(
+                                f'<div class="podium">'
+                                f'<div class="podium-filler" style="height: 30px;"></div>'  # 填充 30px
+                                f'<div class="podium-step second">{int(second["查詢結果"])}</div>'
+                                f'<div class="podium-label">{second["姓名"]}\n{second["幸運號碼"]}</div>'
+                                f'</div>',
+                                unsafe_allow_html=True
+                            )
+                        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)
 
                     # 第一名（如果有）
-                    if len(top_3) >= 1:
-                        first = top_3.iloc[0]
-                        podium_html += f'''
-                        <div class="podium first">{int(first['查詢結果'])}</div>
-                        <div class="podium-label">{first['姓名']}\n{first['幸運號碼']}</div>
-                        '''
-                    else:
-                        podium_html += '<div class="podium first"></div><div class="podium-label"></div>'
+                    with col2:
+                        if len(top_3) >= 1:
+                            first = top_3.iloc[0]
+                            st.markdown(
+                                f'<div class="podium">'
+                                f'<div class="podium-step first">{int(first["查詢結果"])}</div>'
+                                f'<div class="podium-label">{first["姓名"]}\n{first["幸運號碼"]}</div>'
+                                f'</div>',
+                                unsafe_allow_html=True
+                            )
+                        else:
+                            st.markdown('<div class="podium"><div class="podium-step first"></div><div class="podium-label"></div></div>', unsafe_allow_html=True)
 
                     # 第三名（如果有）
-                    if len(top_3) >= 3:
-                        third = top_3.iloc[2]
-                        podium_html += f'''
-                        <div class="podium third">{int(third['查詢結果'])}</div>
-                        <div class="podium-label">{third['姓名']}\n{third['幸運號碼']}</div>
-                        '''
-                    else:
-                        podium_html += '<div class="podium third"></div><div class="podium-label"></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">'
+                                f'<div class="podium-filler" style="height: 60px;"></div>'  # 填充 60px
+                                f'<div class="podium-step third">{int(third["查詢結果"])}</div>'
+                                f'<div class="podium-label">{third["姓名"]}\n{third["幸運號碼"]}</div>'
+                                f'</div>',
+                                unsafe_allow_html=True
+                            )
+                        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)
                 else:
                     st.warning("無有效的查詢結果可供顯示頒獎台。")
             else: