Update app.py

app.py

@@ -144,17 +144,17 @@ BREED_INFO = {
     "Ross 308": {
         "description": "Big chest, thick legs, very fast growth. Excellent for meat production.",
         "available_at": "Agrited, Sayed, Valentine",
-        "color": "#16a34a"
+        "color": "#1E4620"
     },
     "Cobb 500": {
         "description": "Good early growth, strong legs, solid feed conversion.",
         "available_at": "Chikun, Zartech",
-        "color": "#2563eb"
+        "color": "#1E4620"
     },
     "Arbor Acres": {
         "description": "Balanced growth, hardy and adaptable. Great survival rate.",
         "available_at": "Supreme, CHI, GS, Vertex, Fidan, Cascada, Orobor, Sunchi, Farm Support, Ajila",
-        "color": "#d97706"
+        "color": "#1E4620"
     }
 }
 
@@ -571,7 +571,7 @@ def get_share_links(app_url="https://howmuchfeed.com"):
 
 
 # ============================================================
-# FEED CALCULATION
+# FEED CALCULATION - WITH PROFESSIONAL COLOR SCHEME
 # ============================================================
 
 def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_code, breed, request: gr.Request):
@@ -645,7 +645,7 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
     # Generate share links
     share_links = get_share_links()
 
-    # Output HTML
+    # Output HTML - WITH PROFESSIONAL COLOR SCHEME
     starter_bags_display = f"{starter_bags:.1f}"
     finisher_bags_display = f"{finisher_bags:.1f}"
 
@@ -654,101 +654,229 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
         age_text += f" + {days} day{'s' if days != 1 else ''}"
 
     html = f"""
-    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.5; color: #1a1a1a; background: #ffffff; border-radius: 12px; padding: 12px 14px; border: 1px solid #e5e7eb; width: 100%; box-sizing: border-box;">
-
-    <div style="background: #f0fdf4; border: 2px solid #22c55e; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;">
-        <div style="font-size: 12px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">📊 Your Feed Estimate</div>
+    <div style="
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 15px;
+        line-height: 1.5;
+        color: #212529;
+        background: #ffffff;
+        border-radius: 12px;
+        padding: 12px 14px;
+        border: 1px solid #DEE2E6;
+        width: 100%;
+        box-sizing: border-box;
+    ">
+
+    <!-- RESULTS CARD -->
+    <div style="
+        background: #F8F9FA;
+        border: 2px solid #1E4620;
+        border-radius: 10px;
+        padding: 14px 16px;
+        margin-bottom: 14px;
+    ">
+        <div style="
+            font-size: 12px;
+            font-weight: 700;
+            color: #1E4620;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 4px;
+        ">📊 Your Feed Estimate</div>
         
-        <div style="font-size: 16px; font-weight: 700; color: #166534;">
-            You need
-            <span style="display: inline-block; background: #166534; color: #ffffff; border-radius: 6px; padding: 2px 12px; font-size: 20px; font-weight: 800;">
-                {total_bags:.1f}
-            </span>
-            bags of {bag_size} kg feed
+        <!-- Total Feed - Brown Card -->
+        <div style="
+            background: #F5F0EE;
+            border-radius: 8px;
+            padding: 10px 14px;
+            margin: 4px 0 8px 0;
+        ">
+            <div style="font-size: 13px; color: #6C757D; font-weight: 600;">
+                Total Feed Needed
+            </div>
+            <div style="font-size: 28px; font-weight: 800; color: #8D6E63;">
+                {total_feed_kg:,.1f} kg
+            </div>
+            <div style="font-size: 14px; color: #6C757D;">
+                ({total_bags:.1f} bags of {bag_size} kg)
+            </div>
         </div>
-        <div style="font-size: 14px; color: #374151; margin-top: 4px;">
-            To raise <strong>{birds:,}</strong> {breed} broilers from day-old to <strong>{age_text} ({total_days} days)</strong>
+        
+        <!-- Birds Info -->
+        <div style="font-size: 14px; color: #212529;">
+            For <strong>{birds:,}</strong> {breed} broilers · <strong>{age_text} ({total_days} days)</strong>
         </div>
-        <div style="margin-top: 6px; font-size: 15px; font-weight: 700; color: #1e40af;">
-            Buy
-            <span style="display: inline-block; background: #1e40af; color: #ffffff; border-radius: 6px; padding: 2px 12px; font-size: 18px; font-weight: 800;">
-                {rounded_bags}
-            </span>
-            bags (rounded up for safety)
+        
+        <!-- Buy Recommendation - Gold Accent -->
+        <div style="
+            background: #FFF8E1;
+            border: 2px solid #FFB800;
+            border-radius: 8px;
+            padding: 8px 12px;
+            margin-top: 8px;
+        ">
+            <span style="font-size: 14px; font-weight: 600; color: #212529;">Buy</span>
+            <span style="
+                display: inline-block;
+                background: #FFB800;
+                color: #212529;
+                border-radius: 6px;
+                padding: 2px 12px;
+                font-size: 18px;
+                font-weight: 800;
+            ">{rounded_bags}</span>
+            <span style="font-size: 14px; color: #6C757D;">bags (rounded up for safety)</span>
         </div>
     </div>
 
+    <!-- FEED BREAKDOWN TABLE -->
     <div style="margin-bottom: 12px;">
-        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">🌾 Feed Breakdown</div>
-        <table style="width: 100%; border-collapse: collapse; font-size: 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
+        <div style="font-size: 12px; font-weight: 700; color: #6C757D; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">🌾 Feed Breakdown</div>
+        <table style="
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 14px;
+            background: #ffffff;
+            border: 1px solid #DEE2E6;
+            border-radius: 8px;
+            overflow: hidden;
+        ">
             <thead>
-                <tr style="background: #f8fafc; border-bottom: 2px solid #e5e7eb;">
-                    <th style="padding: 8px 10px; text-align: left; font-weight: 600; color: #1a1a1a;">Stage</th>
-                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #1a1a1a;">Feed (kg)</th>
-                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #1a1a1a;">Bags (25 kg)</th>
+                <tr style="background: #F8F9FA; border-bottom: 2px solid #DEE2E6;">
+                    <th style="padding: 8px 10px; text-align: left; font-weight: 600; color: #212529;">Stage</th>
+                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #212529;">Feed (kg)</th>
+                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #212529;">Bags (25 kg)</th>
                 </tr>
             </thead>
             <tbody>
-                <tr style="border-bottom: 1px solid #e5e7eb;">
-                    <td style="padding: 8px 10px; color: #1a1a1a;"><strong>🌱 Starter</strong></td>
-                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a;">{starter_kg:,.1f}</td>
-                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #1e293b;">{starter_bags_display}</td>
+                <tr style="border-bottom: 1px solid #DEE2E6;">
+                    <td style="padding: 8px 10px; color: #212529;"><strong>🌱 Starter</strong></td>
+                    <td style="padding: 8px 10px; text-align: right; color: #212529;">{starter_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #212529;">{starter_bags_display}</td>
                 </tr>
-                <tr style="border-bottom: 1px solid #e5e7eb;">
-                    <td style="padding: 8px 10px; color: #1a1a1a;"><strong>🌽 Finisher</strong></td>
-                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a;">{finisher_kg:,.1f}</td>
-                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #1e293b;">{finisher_bags_display}</td>
+                <tr style="border-bottom: 1px solid #DEE2E6;">
+                    <td style="padding: 8px 10px; color: #212529;"><strong>🌽 Finisher</strong></td>
+                    <td style="padding: 8px 10px; text-align: right; color: #212529;">{finisher_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #212529;">{finisher_bags_display}</td>
                 </tr>
-                <tr style="background: #f8fafc; font-weight: 700;">
-                    <td style="padding: 8px 10px; color: #1a1a1a;">TOTAL</td>
-                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a;">{total_feed_kg:,.1f}</td>
-                    <td style="padding: 8px 10px; text-align: right; font-weight: 800; font-size: 16px; color: #166534;">{total_bags:.1f}</td>
+                <tr style="background: #F8F9FA; font-weight: 700;">
+                    <td style="padding: 8px 10px; color: #212529;">TOTAL</td>
+                    <td style="padding: 8px 10px; text-align: right; color: #212529;">{total_feed_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 800; font-size: 16px; color: #1E4620;">{total_bags:.1f}</td>
                 </tr>
             </tbody>
         </table>
     </div>
 
-    <div style="background: #eff6ff; border: 2px solid #3b82f6; border-radius: 10px; padding: 12px 16px; margin-bottom: 12px;">
-        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">💰 Feed Cost</div>
+    <!-- FEED COST - RED CARD -->
+    <div style="
+        background: #FFEBEE;
+        border: 2px solid #C62828;
+        border-radius: 10px;
+        padding: 12px 16px;
+        margin-bottom: 12px;
+    ">
+        <div style="font-size: 12px; font-weight: 700; color: #6C757D; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">💰 Feed Cost</div>
         <div style="display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 14px;">
-            <span style="color: #4b5563;">Approximately</span>
-            <span style="display: inline-block; background: #1e40af; color: #ffffff; border-radius: 6px; padding: 2px 12px; font-size: 18px; font-weight: 700;">
-                {rounded_bags}
-            </span>
-            <span style="color: #4b5563;">bags × {currency_symbol}{price_per_bag:,.0f}</span>
+            <span style="color: #212529;">Approximately</span>
+            <span style="
+                display: inline-block;
+                background: #C62828;
+                color: #FFFFFF;
+                border-radius: 6px;
+                padding: 2px 12px;
+                font-size: 18px;
+                font-weight: 700;
+            ">{rounded_bags}</span>
+            <span style="color: #212529;">bags × {currency_symbol}{price_per_bag:,.0f}</span>
         </div>
-        <div style="font-size: 24px; font-weight: 800; color: #1e40af; margin-top: 2px;">
+        <div style="font-size: 26px; font-weight: 800; color: #C62828; margin-top: 2px;">
             {currency_symbol}{total_cost:,.0f}
         </div>
     </div>
 
-    <div style="border-top: 1px solid #e5e7eb; padding-top: 10px; margin-bottom: 12px;">
-        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">📈 Expected Performance</div>
+    <!-- EXPECTED PERFORMANCE -->
+    <div style="
+        border-top: 1px solid #DEE2E6;
+        padding-top: 10px;
+        margin-bottom: 12px;
+    ">
+        <div style="font-size: 12px; font-weight: 700; color: #6C757D; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">📈 Expected Performance</div>
         <div style="display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px;">
-            <div>Body weight: <span style="font-weight: 700; color: #1a1a1a;">{expected_weight:.3f} kg</span></div>
-            <div>Flock weight: <span style="font-weight: 700; color: #1a1a1a;">{flock_weight:,.1f} kg</span></div>
+            <div>
+                Body weight: <span style="font-weight: 700; color: #212529;">{expected_weight:.3f} kg</span>
+            </div>
+            <div>
+                Flock weight: <span style="font-weight: 700; color: #212529;">{flock_weight:,.1f} kg</span>
+            </div>
         </div>
     </div>
 
-    <div style="border-top: 1px solid #e5e7eb; padding-top: 12px;">
-        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">📤 Share Results</div>
+    <!-- SHARE BUTTONS -->
+    <div style="
+        border-top: 1px solid #DEE2E6;
+        padding-top: 12px;
+    ">
+        <div style="font-size: 12px; font-weight: 700; color: #6C757D; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">📤 Share Results</div>
         <div style="display: flex; gap: 8px; flex-wrap: wrap;">
             <a href="{share_links['whatsapp']}" target="_blank" style="text-decoration: none;">
-                <span style="display: inline-block; background: #25D366; color: #ffffff; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;">WhatsApp</span>
+                <span style="
+                    display: inline-block;
+                    background: #25D366;
+                    color: #ffffff;
+                    padding: 6px 14px;
+                    border-radius: 6px;
+                    font-size: 13px;
+                    font-weight: 600;
+                    cursor: pointer;
+                ">WhatsApp</span>
             </a>
             <a href="{share_links['email']}" target="_blank" style="text-decoration: none;">
-                <span style="display: inline-block; background: #ea4335; color: #ffffff; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;">Email</span>
+                <span style="
+                    display: inline-block;
+                    background: #ea4335;
+                    color: #ffffff;
+                    padding: 6px 14px;
+                    border-radius: 6px;
+                    font-size: 13px;
+                    font-weight: 600;
+                    cursor: pointer;
+                ">Email</span>
             </a>
             <a href="{share_links['facebook']}" target="_blank" style="text-decoration: none;">
-                <span style="display: inline-block; background: #1877f2; color: #ffffff; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;">Facebook</span>
+                <span style="
+                    display: inline-block;
+                    background: #1877f2;
+                    color: #ffffff;
+                    padding: 6px 14px;
+                    border-radius: 6px;
+                    font-size: 13px;
+                    font-weight: 600;
+                    cursor: pointer;
+                ">Facebook</span>
             </a>
             <a href="{share_links['twitter']}" target="_blank" style="text-decoration: none;">
-                <span style="display: inline-block; background: #000000; color: #ffffff; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;">Twitter/X</span>
+                <span style="
+                    display: inline-block;
+                    background: #000000;
+                    color: #ffffff;
+                    padding: 6px 14px;
+                    border-radius: 6px;
+                    font-size: 13px;
+                    font-weight: 600;
+                    cursor: pointer;
+                ">Twitter/X</span>
             </a>
         </div>
     </div>
 
-    <div style="margin-top: 10px; font-size: 11px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 8px;">
+    <div style="
+        margin-top: 10px;
+        font-size: 11px;
+        color: #6C757D;
+        border-top: 1px solid #DEE2E6;
+        padding-top: 8px;
+    ">
         ⚠️ Estimate based on {breed} benchmark. Actual results may vary.
     </div>
     </div>
@@ -968,14 +1096,41 @@ def export_calculations_wrapper():
 
 
 # ============================================================
-# CSS
+# CSS - PROFESSIONAL COLOR SCHEME
 # ============================================================
 
 CSS = """
-/* Force light theme */
+/* ============================================================
+   PROFESSIONAL COLOR SCHEME - 60-30-10 Design Rule
+   ============================================================ */
+
+/* GLOBAL TOKENS - 60% Dominant Neutrals */
+:root {
+    --color-bg-main: #F8F9FA;
+    --color-bg-surface: #FFFFFF;
+    --color-text-primary: #212529;
+    --color-text-muted: #6C757D;
+    --color-border: #DEE2E6;
+}
+
+/* 30% Structural/Brand Colors */
+:root {
+    --color-brand-primary: #1E4620;
+    --color-brand-secondary: #386F3E;
+}
+
+/* 10% Accent Colors */
+:root {
+    --color-accent-gold: #FFB800;
+    --color-feed-brown: #8D6E63;
+    --color-cost-red: #C62828;
+    --color-yield-green: #2E7D32;
+}
+
+/* Apply to body */
 body, .gradio-container, .gradio-row, .gradio-column, .gradio-group {
-    background-color: #f6f8f4 !important;
-    color: #1a1a1a !important;
+    background-color: var(--color-bg-main) !important;
+    color: var(--color-text-primary) !important;
 }
 
 .gradio-container {
@@ -983,6 +1138,7 @@ body, .gradio-container, .gradio-row, .gradio-column, .gradio-group {
     padding: 6px 8px !important;
 }
 
+/* Main Title */
 .main-title { 
     text-align: center; 
     padding: 8px 4px 4px 4px; 
@@ -990,51 +1146,55 @@ body, .gradio-container, .gradio-row, .gradio-column, .gradio-group {
 .main-title h1 { 
     font-size: 24px; 
     margin-bottom: 2px; 
-    color: #1a1a1a !important;
+    color: var(--color-text-primary) !important;
 }
 .main-title p { 
     font-size: 14px; 
-    color: #555 !important; 
+    color: var(--color-text-muted) !important; 
 }
 
+/* Answer Box - Surface */
 .answer-box { 
-    background: #ffffff !important; 
+    background: var(--color-bg-surface) !important; 
     border-radius: 12px !important; 
     padding: 8px 10px !important; 
-    border: 1px solid #e5e7eb !important; 
+    border: 1px solid var(--color-border) !important; 
 }
 
+/* Email Box */
 .email-box { 
-    border: 2px solid #d9e7d2 !important; 
+    border: 2px solid var(--color-brand-secondary) !important; 
     border-radius: 10px !important; 
     padding: 8px !important; 
-    background: #fbfdf9 !important; 
+    background: #F8F9FA !important; 
 }
 
-button { min-height: 44px !important; }
-
-.admin-login { 
-    border: 2px solid #d97706 !important; 
-    border-radius: 10px !important; 
-    padding: 12px !important; 
-    background: #fffbeb !important; 
+/* Buttons - Brand Primary */
+button {
+    min-height: 44px !important;
+    background-color: var(--color-brand-primary) !important;
+    color: #FFFFFF !important;
+    font-weight: 600 !important;
+    border: none !important;
+    border-radius: 8px !important;
 }
 
-/* Fix all text */
-label, span, p, div, h1, h2, h3, h4 {
-    color: #1a1a1a !important;
+button:hover {
+    background-color: #122D14 !important;
 }
 
-input, select, textarea {
-    background: #ffffff !important;
-    color: #1a1a1a !important;
-    border: 1px solid #d1d5db !important;
+/* Admin Login */
+.admin-login { 
+    border: 2px solid var(--color-accent-gold) !important; 
+    border-radius: 10px !important; 
+    padding: 12px !important; 
+    background: #FFF8E1 !important; 
 }
 
 /* Force dark mode override */
 .dark, .dark * {
-    background-color: #f6f8f4 !important;
-    color: #1a1a1a !important;
+    background-color: var(--color-bg-main) !important;
+    color: var(--color-text-primary) !important;
 }
 
 /* Mobile */
@@ -1144,10 +1304,10 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
             gr.Markdown("## 📊 Quick Answer")
             result = gr.HTML(
                 value="""
-                <div style="font-size: 14px; color: #9ca3af; text-align: center; padding: 30px 10px; background: #ffffff; border-radius: 12px;">
+                <div style="font-size: 14px; color: #6C757D; text-align: center; padding: 30px 10px; background: #FFFFFF; border-radius: 12px; border: 1px solid #DEE2E6;">
                     <div style="font-size: 40px; margin-bottom: 10px;">🐔</div>
                     <div>Enter your details and click <strong>Calculate</strong></div>
-                    <div style="font-size: 13px; margin-top: 6px;">Your feed estimate appears here</div>
+                    <div style="font-size: 13px; margin-top: 6px; color: #6C757D;">Your feed estimate appears here</div>
                 </div>
                 """,
                 elem_classes=["answer-box"],