Update app.py

app.py

@@ -373,7 +373,7 @@ async def predict(image):
                         </h2>
                         <div class="family-section">
                             <div class="info-item">
-                                <span class="icon">👶</span>
+                                <span class="icon"></span>
                                 <span class="label">Good with Children:</span>
                                 <span class="value">{description['Good with Children']}</span>
                             </div>
@@ -433,7 +433,7 @@ async def predict(image):
         <style>
         .dog-info-card {{ 
             border: 1px solid #e1e4e8; 
-            margin: 32px 0;
+            margin: 40px 0;  /* 增加卡片間距 */
             padding: 0; 
             border-radius: 12px; 
             box-shadow: 0 2px 12px rgba(0,0,0,0.08);
@@ -447,7 +447,7 @@ async def predict(image):
         }}
         
         .dog-info-header {{ 
-            padding: 20px 24px;
+            padding: 24px 28px;  /* 增加內距 */
             margin: 0;
             font-size: 22px;
             font-weight: bold;
@@ -455,7 +455,7 @@ async def predict(image):
         }}
         
         .breed-info {{
-            padding: 24px;
+            padding: 28px;  /* 增加整體內距 */
             line-height: 1.6;
         }}
         
@@ -463,14 +463,27 @@ async def predict(image):
             font-size: 1.2em;
             font-weight: 700;
             color: #2c3e50;
-            margin: 28px 0 16px 0;
-            padding-bottom: 8px;
+            margin: 32px 0 20px 0;
+            padding: 12px 0;  /* 修正padding寫法並增加上下內距 */
             border-bottom: 2px solid #e1e4e8;
             text-transform: uppercase;
             letter-spacing: 0.5px;
             display: flex;
             align-items: center;
             gap: 8px;
+            position: relative;
+        }}
+
+        .section-title::before {{  /* 新增標題左側強調條 */
+            content: '';
+            position: absolute;
+            left: -28px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 4px;
+            height: 70%;
+            background: #2c3e50;
+            border-radius: 2px;
         }}
         
         .icon {{
@@ -484,17 +497,24 @@ async def predict(image):
             display: flex;
             flex-wrap: wrap;
             gap: 16px;
-            margin-bottom: 20px;
+            margin-bottom: 28px;  /* 增加底部間距 */
+            padding: 20px;  /* 增加內距 */
+            background: #f8f9fa;
+            border-radius: 12px;
+            border: 1px solid #e1e4e8;  /* 添加邊框 */
         }}
         
         .info-item {{
-            background: #f8f9fa;
-            padding: 12px 16px;
+            background: white;  /* 改為白色背景 */
+            padding: 14px 18px;  /* 增加內距 */
             border-radius: 8px;
             display: flex;
             align-items: center;
-            gap: 8px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+            gap: 10px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            border: 1px solid #e1e4e8;
+            flex: 1 1 auto;
+            min-width: 200px;
         }}
         
         .label {{
@@ -508,19 +528,21 @@ async def predict(image):
         
         .temperament-section {{
             background: #f8f9fa;
-            padding: 16px;
-            border-radius: 8px;
-            margin-bottom: 20px;
+            padding: 20px;  /* 增加內距 */
+            border-radius: 12px;
+            margin-bottom: 28px;  /* 增加間距 */
             color: #444;
+            border: 1px solid #e1e4e8;  /* 添加邊框 */
         }}
         
         .description-section {{
             background: #f8f9fa;
-            padding: 16px;
-            border-radius: 8px;
-            margin: 20px 0;
+            padding: 24px;  /* 增加內距 */
+            border-radius: 12px;
+            margin: 28px 0;  /* 增加上下間距 */
             line-height: 1.8;
             color: #444;
+            border: 1px solid #e1e4e8;  /* 添加邊框 */
         }}
         
         .action-section {{