Update app.py

app.py

@@ -684,94 +684,126 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
     if days:
         age_text += f" + {days} day{'s' if days != 1 else ''}"
 
-    html = f"""
-    <div style="font-size: 17px; line-height: 1.6;">
-
-    <div style="background: #f0fdf4; padding: 18px 22px; border-radius: 14px; border-left: 6px solid #22c55e; margin-bottom: 20px;">
-        <div style="font-size: 13px; color: #16a34a; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;">Quick Answer</div>
-        <div style="font-size: 22px; font-weight: 800; color: #1f4f2d;">
-            Exact feed needed: <span style="font-size: 26px;">{total_bags:.1f}</span> bags of {bag_size:g} kg feed
-        </div>
-        <div style="font-size: 24px; font-weight: 800; color: #1e40af; margin: 4px 0;">
-            Approximately {rounded_bags} bags
-        </div>
-        <div style="color: #374151; font-size: 16px;">
-            To raise <strong>{birds:,}</strong> broilers from Day Old to <strong>{age_text} ({total_days} days)</strong>
-        </div>
-        <div style="margin-top: 8px; font-size: 13px;">
-            <span style="background: {breed_color}; color: white; padding: 3px 12px; border-radius: 14px; font-weight: 600;">{breed}</span>
-            <span style="background: #6b7280; color: white; padding: 3px 12px; border-radius: 14px; font-weight: 600; margin-left: 8px;">{country_name}</span>
-        </div>
-    </div>
+html = f"""
+<div style="font-size: 17px; line-height: 1.8;">
 
-    <div style="margin-bottom: 16px;">
-        <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Feed Breakdown</div>
-        <table style="width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 15px;">
-            <tr style="border-bottom: 1px solid #e5e7eb;">
-                <td style="padding: 8px 4px;"><strong>Starter</strong></td>
-                <td style="padding: 8px 4px; text-align: right;">{starter_kg:,.1f} kg</td>
-                <td style="padding: 8px 4px; text-align: right; font-weight: 600;">{starter_bags_display} bags</td>
-            </tr>
-            <tr style="border-bottom: 1px solid #e5e7eb;">
-                <td style="padding: 8px 4px;"><strong>Finisher</strong></td>
-                <td style="padding: 8px 4px; text-align: right;">{finisher_kg:,.1f} kg</td>
-                <td style="padding: 8px 4px; text-align: right; font-weight: 600;">{finisher_bags_display} bags</td>
-            </tr>
-            <tr>
-                <td style="padding: 8px 4px; font-weight: 700;">TOTAL</td>
-                <td style="padding: 8px 4px; text-align: right; font-weight: 700;">{total_feed_kg:,.1f} kg</td>
-                <td style="padding: 8px 4px; text-align: right; font-weight: 700;">{total_bags:.1f}</td>
-            </tr>
-        </table>
+<div style="background: #f0fdf4; padding: 18px 22px; border-radius: 14px; border-left: 6px solid #22c55e; margin-bottom: 20px;">
+    <div style="font-size: 13px; color: #16a34a; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;">Quick Answer</div>
+    
+    <!-- EXACT FEED - Boxed -->
+    <div style="font-size: 20px; font-weight: 700; color: #166534;">
+        Exact feed needed:
+        <span style="display: inline-block; background: #166534; color: white; border-radius: 12px; padding: 4px 18px; font-size: 30px; font-weight: 900;">
+            {total_bags:.1f}
+        </span>
+        bags of {bag_size:g} kg feed
     </div>
-
-    <div style="margin-bottom: 16px; background: #eff6ff; padding: 14px 18px; border-radius: 10px; border-left: 4px solid #3b82f6;">
-        <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Feed Cost</div>
-        <div style="font-size: 30px; font-weight: 800; color: #1e40af;">
-            {currency_symbol}{total_cost:,.0f}
-        </div>
-        <div style="color: #6b7280; font-size: 14px;">
-            Approximately {rounded_bags} bags x {currency_symbol}{price_per_bag:,.0f} per bag
-        </div>
+    
+    <!-- APPROXIMATE BAGS - Boxed -->
+    <div style="font-size: 20px; font-weight: 700; color: #1e40af; margin-top: 6px;">
+        Approximately:
+        <span style="display: inline-block; background: #1e40af; color: white; border-radius: 12px; padding: 4px 18px; font-size: 26px; font-weight: 800;">
+            {rounded_bags}
+        </span>
+        bags to purchase (rounded up)
     </div>
-
-    <div style="border-top: 1px solid #e5e7eb; padding-top: 14px;">
-        <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Expected Performance</div>
-        <table style="width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 15px;">
-            <tr style="border-bottom: 1px solid #e5e7eb;">
-                <td style="padding: 6px 4px;">Body weight per bird</td>
-                <td style="padding: 6px 4px; text-align: right; font-weight: 600;">{expected_weight:.3f} kg</td>
-            </tr>
-            <tr>
-                <td style="padding: 6px 4px;">Flock live weight</td>
-                <td style="padding: 6px 4px; text-align: right; font-weight: 600;">{flock_weight:,.1f} kg</td>
-            </tr>
-        </table>
+    
+    <!-- BIRD COUNT - Boxed -->
+    <div style="color: #374151; font-size: 16px; margin-top: 8px;">
+        To raise
+        <span style="display: inline-block; background: #fef3c7; border: 2px solid #f59e0b; border-radius: 10px; padding: 2px 14px; font-size: 18px; font-weight: 700; color: #92400e;">
+            {birds:,}
+        </span>
+        {breed} broilers to
+        <span style="display: inline-block; background: #fce4ec; border: 2px solid #ef4444; border-radius: 10px; padding: 2px 14px; font-size: 18px; font-weight: 700; color: #991b1b;">
+            {age_text} ({total_days} days)
+        </span>
     </div>
-
-    <div style="margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 14px;">
-        <div style="font-size: 13px; color: #6b7280; font-weight: 600; margin-bottom: 8px;">Share Results:</div>
-        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
-            <a href="{share_links['whatsapp']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #25D366; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">WhatsApp</button>
-            </a>
-            <a href="{share_links['email']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #ea4335; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Email</button>
-            </a>
-            <a href="{share_links['facebook']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #1877f2; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Facebook</button>
-            </a>
-            <a href="{share_links['twitter']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #000000; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Twitter/X</button>
-            </a>
-        </div>
+    
+    <div style="margin-top: 8px; font-size: 13px;">
+        <span style="background: {breed_color}; color: white; padding: 3px 12px; border-radius: 14px; font-weight: 600;">{breed}</span>
+        <span style="background: #6b7280; color: white; padding: 3px 12px; border-radius: 14px; font-weight: 600; margin-left: 8px;">{country_name}</span>
     </div>
-
-    <div style="margin-top: 14px; font-size: 12px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 10px;">
-        Estimate based on {breed} benchmark. Actual results may vary.
+</div>
+
+<div style="margin-bottom: 16px;">
+    <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Feed Breakdown</div>
+    <table style="width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 16px;">
+        <tr style="border-bottom: 1px solid #e5e7eb;">
+            <td style="padding: 10px 4px;"><strong>Starter</strong></td>
+            <td style="padding: 10px 4px; text-align: right;">{starter_kg:,.1f} kg</td>
+            <td style="padding: 10px 4px; text-align: right; font-weight: 700; font-size: 18px; color: #1e293b;">{starter_bags_display} bags</td>
+        </tr>
+        <tr style="border-bottom: 1px solid #e5e7eb;">
+            <td style="padding: 10px 4px;"><strong>Finisher</strong></td>
+            <td style="padding: 10px 4px; text-align: right;">{finisher_kg:,.1f} kg</td>
+            <td style="padding: 10px 4px; text-align: right; font-weight: 700; font-size: 18px; color: #1e293b;">{finisher_bags_display} bags</td>
+        </tr>
+        <tr>
+            <td style="padding: 10px 4px; font-weight: 700;">TOTAL</td>
+            <td style="padding: 10px 4px; text-align: right; font-weight: 700;">{total_feed_kg:,.1f} kg</td>
+            <td style="padding: 10px 4px; text-align: right; font-weight: 700; font-size: 18px; color: #166534;">{total_bags:.1f}</td>
+        </tr>
+    </table>
+</div>
+
+<div style="margin-bottom: 16px; background: #eff6ff; padding: 14px 18px; border-radius: 10px; border-left: 4px solid #3b82f6;">
+    <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Feed Cost</div>
+    <div style="font-size: 32px; font-weight: 900; color: white;">
+        <span style="display: inline-block; background: #1e40af; color: white; border-radius: 12px; padding: 4px 20px;">
+            {currency_symbol}{total_cost:,.0f}
+        </span>
     </div>
+    <div style="color: #6b7280; font-size: 14px; margin-top: 4px;">
+        Approximately {rounded_bags} bags x {currency_symbol}{price_per_bag:,.0f} per bag
     </div>
-    """
+</div>
+
+<div style="border-top: 1px solid #e5e7eb; padding-top: 14px;">
+    <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Expected Performance</div>
+    <table style="width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 16px;">
+        <tr style="border-bottom: 1px solid #e5e7eb;">
+            <td style="padding: 8px 4px;">Body weight per bird</td>
+            <td style="padding: 8px 4px; text-align: right; font-weight: 700; font-size: 18px;">
+                <span style="display: inline-block; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; padding: 2px 14px;">
+                    {expected_weight:.3f} kg
+                </span>
+            </td>
+        </tr>
+        <tr>
+            <td style="padding: 8px 4px;">Flock live weight</td>
+            <td style="padding: 8px 4px; text-align: right; font-weight: 700; font-size: 18px;">
+                <span style="display: inline-block; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; padding: 2px 14px;">
+                    {flock_weight:,.1f} kg
+                </span>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<div style="margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 14px;">
+    <div style="font-size: 13px; color: #6b7280; font-weight: 600; margin-bottom: 8px;">Share Results:</div>
+    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+        <a href="{share_links['whatsapp']}" target="_blank" style="text-decoration: none;">
+            <button style="background: #25D366; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">WhatsApp</button>
+        </a>
+        <a href="{share_links['email']}" target="_blank" style="text-decoration: none;">
+            <button style="background: #ea4335; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Email</button>
+        </a>
+        <a href="{share_links['facebook']}" target="_blank" style="text-decoration: none;">
+            <button style="background: #1877f2; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Facebook</button>
+        </a>
+        <a href="{share_links['twitter']}" target="_blank" style="text-decoration: none;">
+            <button style="background: #000000; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Twitter/X</button>
+        </a>
+    </div>
+</div>
+
+<div style="margin-top: 14px; font-size: 12px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 10px;">
+    Estimate based on {breed} benchmark. Actual results may vary.
+</div>
+</div>
+"""
 
     return html, f"✅ Calculation saved for {email.strip().lower()}."