Update app.py

app.py

@@ -535,144 +535,148 @@ with gr.Blocks(
     </div>
     """)
     
-    # Enhanced Disclaimer Section with Visual Design
+    # Enhanced Disclaimer Section with Proper Text Visibility
     gr.HTML("""
     <div style="max-width: 900px; margin: 20px auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
         <!-- Main Disclaimer Box -->
-        <div style="background: linear-gradient(135deg, #ff6b6b20, #feca5720); 
-                    border: 2px solid #ff6b6b; 
+        <div style="background: linear-gradient(135deg, #ff6b6b15, #feca5715); 
+                    border: 3px solid #ff6b6b; 
                     border-radius: 15px; 
                     padding: 25px; 
                     margin-bottom: 20px; 
-                    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);">
+                    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);">
             <div style="text-align: center; margin-bottom: 20px;">
-                <h3 style="color: #2c3e50; margin: 0; font-size: 1.8em; font-weight: bold;">
+                <h3 style="color: #000000; margin: 0; font-size: 1.8em; font-weight: bold; text-shadow: none;">
                     ⚠️ IMPORTANT DISCLAIMER ⚠️
                 </h3>
             </div>
             
-            <div style="background: white; 
+            <div style="background: #ffffff; 
                         border-radius: 10px; 
-                        padding: 20px; 
-                        color: #2c3e50; 
+                        padding: 25px; 
+                        color: #000000; 
                         font-size: 16px; 
-                        line-height: 1.6; 
-                        box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);">
-                <p style="margin: 0 0 15px 0; text-align: center; font-weight: bold; font-size: 18px;">
+                        line-height: 1.7; 
+                        border: 2px solid #e0e0e0;
+                        box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
+                <p style="margin: 0 0 20px 0; text-align: center; font-weight: bold; font-size: 18px; color: #000000;">
                     📚 <strong>FOR EDUCATIONAL PURPOSES ONLY</strong> 📚
                 </p>
                 <ul style="list-style: none; padding: 0; margin: 0;">
-                    <li style="margin: 10px 0; padding: 8px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #3498db;">
-                        <strong>🚫 NOT FINANCIAL ADVICE:</strong> This AI tool is for learning and research only
+                    <li style="margin: 12px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 5px solid #3498db; color: #000000;">
+                        <strong style="color: #000000;">🚫 NOT FINANCIAL ADVICE:</strong> This AI tool is for learning and research only
                     </li>
-                    <li style="margin: 10px 0; padding: 8px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #e74c3c;">
-                        <strong>⚡ AI CAN BE WRONG:</strong> Predictions may be inaccurate or completely wrong
+                    <li style="margin: 12px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 5px solid #e74c3c; color: #000000;">
+                        <strong style="color: #000000;">⚡ AI CAN BE WRONG:</strong> Predictions may be inaccurate or completely wrong
                     </li>
-                    <li style="margin: 10px 0; padding: 8px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #f39c12;">
-                        <strong>💼 CONSULT PROFESSIONALS:</strong> Always seek qualified financial advisors
+                    <li style="margin: 12px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 5px solid #f39c12; color: #000000;">
+                        <strong style="color: #000000;">💼 CONSULT PROFESSIONALS:</strong> Always seek qualified financial advisors
                     </li>
-                    <li style="margin: 10px 0; padding: 8px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #9b59b6;">
-                        <strong>💰 INVEST RESPONSIBLY:</strong> Only invest what you can afford to lose
+                    <li style="margin: 12px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 5px solid #9b59b6; color: #000000;">
+                        <strong style="color: #000000;">💰 INVEST RESPONSIBLY:</strong> Only invest what you can afford to lose
                     </li>
                 </ul>
             </div>
         </div>
         
         <!-- Trading Decision Guide for Beginners -->
-        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin: 20px 0;">
+        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin: 25px 0;">
             
             <!-- BUY Signal -->
             <div style="background: linear-gradient(135deg, #27ae60, #2ecc71); 
-                        color: white; 
-                        padding: 20px; 
+                        color: #ffffff; 
+                        padding: 25px; 
                         border-radius: 15px; 
                         text-align: center; 
-                        box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
+                        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
                         border: 3px solid #27ae60;">
-                <div style="font-size: 2.5em; margin-bottom: 10px;">📈</div>
-                <h4 style="margin: 0 0 10px 0; font-size: 1.3em; font-weight: bold;">GREEN = BUY SIGNAL</h4>
-                <p style="margin: 0; font-size: 14px; opacity: 0.9;">
+                <div style="font-size: 3em; margin-bottom: 15px;">📈</div>
+                <h4 style="margin: 0 0 15px 0; font-size: 1.4em; font-weight: bold; color: #ffffff;">GREEN = BUY SIGNAL</h4>
+                <p style="margin: 0; font-size: 15px; color: #ffffff; line-height: 1.4;">
                     AI predicts price increase<br>
-                    <strong>⚠️ Still risky - do research!</strong>
+                    <strong style="color: #ffffff;">⚠️ Still risky - do research!</strong>
                 </p>
             </div>
             
             <!-- HOLD Signal -->
             <div style="background: linear-gradient(135deg, #f39c12, #e67e22); 
-                        color: white; 
-                        padding: 20px; 
+                        color: #ffffff; 
+                        padding: 25px; 
                         border-radius: 15px; 
                         text-align: center; 
-                        box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
+                        box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
                         border: 3px solid #f39c12;">
-                <div style="font-size: 2.5em; margin-bottom: 10px;">⚪</div>
-                <h4 style="margin: 0 0 10px 0; font-size: 1.3em; font-weight: bold;">YELLOW = HOLD</h4>
-                <p style="margin: 0; font-size: 14px; opacity: 0.9;">
+                <div style="font-size: 3em; margin-bottom: 15px;">⚪</div>
+                <h4 style="margin: 0 0 15px 0; font-size: 1.4em; font-weight: bold; color: #ffffff;">YELLOW = HOLD</h4>
+                <p style="margin: 0; font-size: 15px; color: #ffffff; line-height: 1.4;">
                     AI expects stable prices<br>
-                    <strong>Wait and watch strategy</strong>
+                    <strong style="color: #ffffff;">Wait and watch strategy</strong>
                 </p>
             </div>
             
             <!-- SELL Signal -->
             <div style="background: linear-gradient(135deg, #e74c3c, #c0392b); 
-                        color: white; 
-                        padding: 20px; 
+                        color: #ffffff; 
+                        padding: 25px; 
                         border-radius: 15px; 
                         text-align: center; 
-                        box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
+                        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
                         border: 3px solid #e74c3c;">
-                <div style="font-size: 2.5em; margin-bottom: 10px;">📉</div>
-                <h4 style="margin: 0 0 10px 0; font-size: 1.3em; font-weight: bold;">RED = SELL SIGNAL</h4>
-                <p style="margin: 0; font-size: 14px; opacity: 0.9;">
+                <div style="font-size: 3em; margin-bottom: 15px;">📉</div>
+                <h4 style="margin: 0 0 15px 0; font-size: 1.4em; font-weight: bold; color: #ffffff;">RED = SELL SIGNAL</h4>
+                <p style="margin: 0; font-size: 15px; color: #ffffff; line-height: 1.4;">
                     AI predicts price decrease<br>
-                    <strong>Consider reducing exposure</strong>
+                    <strong style="color: #ffffff;">Consider reducing exposure</strong>
                 </p>
             </div>
         </div>
         
         <!-- Beginner Tips -->
-        <div style="background: linear-gradient(135deg, #3498db20, #9b59b620); 
-                    border: 2px solid #3498db; 
+        <div style="background: linear-gradient(135deg, #ffffff, #f8f9fa); 
+                    border: 3px solid #3498db; 
                     border-radius: 15px; 
-                    padding: 20px; 
-                    margin-top: 20px;">
-            <h4 style="color: #2c3e50; margin: 0 0 15px 0; text-align: center; font-size: 1.4em;">
+                    padding: 25px; 
+                    margin-top: 25px;
+                    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);">
+            <h4 style="color: #000000; margin: 0 0 20px 0; text-align: center; font-size: 1.5em; font-weight: bold;">
                 💡 <strong>BEGINNER TIPS</strong> 💡
             </h4>
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; color: #2c3e50;">
-                <div style="background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
-                    <strong>🎯 Start Small:</strong><br>
-                    Begin with small amounts you can afford to lose completely
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+                <div style="background: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 3px 15px rgba(0,0,0,0.1); border: 2px solid #e0e0e0;">
+                    <strong style="color: #000000; font-size: 16px;">🎯 Start Small:</strong><br>
+                    <span style="color: #000000; font-size: 15px;">Begin with small amounts you can afford to lose completely</span>
                 </div>
-                <div style="background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
-                    <strong>📚 Keep Learning:</strong><br>
-                    Study finance basics before making real investments
+                <div style="background: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 3px 15px rgba(0,0,0,0.1); border: 2px solid #e0e0e0;">
+                    <strong style="color: #000000; font-size: 16px;">📚 Keep Learning:</strong><br>
+                    <span style="color: #000000; font-size: 15px;">Study finance basics before making real investments</span>
                 </div>
-                <div style="background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
-                    <strong>🏦 Use Real Platforms:</strong><br>
-                    Practice with paper trading before using real money
+                <div style="background: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 3px 15px rgba(0,0,0,0.1); border: 2px solid #e0e0e0;">
+                    <strong style="color: #000000; font-size: 16px;">🏦 Use Real Platforms:</strong><br>
+                    <span style="color: #000000; font-size: 15px;">Practice with paper trading before using real money</span>
                 </div>
-                <div style="background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
-                    <strong>⏰ Think Long-term:</strong><br>
-                    Don't panic on daily market fluctuations
+                <div style="background: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 3px 15px rgba(0,0,0,0.1); border: 2px solid #e0e0e0;">
+                    <strong style="color: #000000; font-size: 16px;">⏰ Think Long-term:</strong><br>
+                    <span style="color: #000000; font-size: 15px;">Don't panic on daily market fluctuations</span>
                 </div>
             </div>
         </div>
         
         <!-- Final Warning -->
-        <div style="background: #34495e; 
-                    color: white; 
-                    padding: 15px; 
+        <div style="background: #2c3e50; 
+                    color: #ffffff; 
+                    padding: 20px; 
                     border-radius: 10px; 
                     text-align: center; 
-                    margin-top: 20px; 
-                    border: 2px solid #2c3e50;">
-            <p style="margin: 0; font-weight: bold; font-size: 16px;">
+                    margin-top: 25px; 
+                    border: 3px solid #34495e;
+                    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);">
+            <p style="margin: 0; font-weight: bold; font-size: 17px; color: #ffffff;">
                 🚨 <strong>REMEMBER:</strong> Past performance ≠ Future results | Markets can crash | AI makes mistakes 🚨
             </p>
         </div>
     </div>
     """)
+
     
     with gr.Row():
         with gr.Column(scale=1, min_width=300):