Update app.py

updated the interface to be more clear and readable

app.py

@@ -669,14 +669,14 @@ def create_ranking_history_chart(keyword_history):
 def generate_serp_html(keyword, serp_results):
     """Generate HTML for SERP results"""
     if not serp_results:
-        return "<div>No SERP results available</div>"
+        return '<div style="color: #e2e8f0; text-align: center; padding: 2rem;">No SERP results available</div>'
     
     html = f"""
-    <div style="font-family: Arial, sans-serif; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
-        <h2 style="margin-top: 0;">SERP Results for "{keyword}"</h2>
+    <div style="font-family: 'Inter', sans-serif; padding: 20px; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border: 1px solid #475569; border-radius: 16px; color: #ffffff;">
+        <h2 style="margin-top: 0; color: #ffffff; background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">SERP Results for "{keyword}"</h2>
         
-        <div style="background-color: #f5f5f5; padding: 10px; border-radius: 4px; margin-bottom: 20px;">
-            <div style="color: #666; font-size: 12px;">This is a simulated SERP. In a real application, this would use the Google API.</div>
+        <div style="background: rgba(6, 182, 212, 0.1); border: 1px solid #06b6d4; padding: 12px; border-radius: 8px; margin-bottom: 20px;">
+            <div style="color: #06b6d4; font-size: 12px; font-weight: 500;">🔍 This is a simulated SERP. In a real application, this would use the Google API.</div>
         </div>
         
         <div class="serp-results" style="display: flex; flex-direction: column; gap: 16px;">
@@ -692,19 +692,25 @@ def generate_serp_html(keyword, serp_results):
         impressions = result["impressions_estimate"]
         
         html += f"""
-        <div class="serp-result" style="padding: 15px; border: 1px solid #e2e8f0; border-radius: 6px; position: relative;">
-            <div style="position: absolute; top: -10px; left: -10px; background-color: #4299e1; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px;">
+        <div class="serp-result" style="padding: 18px; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border: 1px solid #475569; border-radius: 12px; position: relative; transition: all 0.3s ease;">
+            <div style="position: absolute; top: -12px; left: -12px; background: linear-gradient(135deg, #06b6d4, #3b82f6); color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; box-shadow: 0 4px 8px rgba(6, 182, 212, 0.3);">
                 {position}
             </div>
-            <div style="margin-bottom: 5px;">
-                <a href="#" style="font-size: 18px; color: #1a73e8; text-decoration: none; font-weight: 500;">{title}</a>
+            <div style="margin-bottom: 8px;">
+                <a href="#" style="font-size: 18px; color: #06b6d4; text-decoration: none; font-weight: 600; line-height: 1.4;">{title}</a>
             </div>
-            <div style="margin-bottom: 8px; color: #006621; font-size: 14px;">{url}</div>
-            <div style="color: #4d5156; font-size: 14px;">{snippet}</div>
+            <div style="margin-bottom: 10px; color: #14b8a6; font-size: 14px; font-weight: 500;">{url}</div>
+            <div style="color: #e2e8f0; font-size: 14px; line-height: 1.5; margin-bottom: 12px;">{snippet}</div>
             
-            <div style="display: flex; margin-top: 10px; font-size: 12px; color: #666;">
-                <div style="margin-right: 15px;"><span style="font-weight: 500;">CTR:</span> {ctr:.2%}</div>
-                <div><span style="font-weight: 500;">Est. Impressions:</span> {impressions:,}</div>
+            <div style="display: flex; gap: 20px; font-size: 12px; color: #94a3b8; padding-top: 8px; border-top: 1px solid #475569;">
+                <div style="display: flex; align-items: center; gap: 4px;">
+                    <span style="font-weight: 600; color: #06b6d4;">CTR:</span> 
+                    <span>{ctr:.2%}</span>
+                </div>
+                <div style="display: flex; align-items: center; gap: 4px;">
+                    <span style="font-weight: 600; color: #06b6d4;">Est. Impressions:</span> 
+                    <span>{impressions:,}</span>
+                </div>
             </div>
         </div>
         """
@@ -719,18 +725,20 @@ def generate_serp_html(keyword, serp_results):
 def generate_token_visualization_html(token_analysis, full_analysis):
     """Generate HTML for token visualization"""
     html = """
-    <div style="font-family: Arial, sans-serif; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
-        <h2 style="margin-top: 0;">Token Visualization</h2>
+    <div style="font-family: 'Inter', sans-serif; padding: 24px; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border: 1px solid #475569; border-radius: 16px; color: #ffffff;">
+        <h2 style="margin-top: 0; color: #ffffff; background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">🔬 Token Visualization</h2>
         
-        <div style="margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 6px;">
-            <div style="margin-bottom: 8px; font-weight: bold; color: #4a5568;">Human View:</div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+        <div style="margin-bottom: 24px; padding: 20px; background: rgba(6, 182, 212, 0.1); border: 1px solid #06b6d4; border-radius: 12px;">
+            <div style="margin-bottom: 12px; font-weight: 600; color: #06b6d4; display: flex; align-items: center; gap: 8px;">
+                <span>👁️</span> Human View:
+            </div>
+            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
     """
     
     # Add human view tokens
     for token in token_analysis:
         html += f"""
-        <div style="padding: 6px 12px; background-color: white; border: 1px solid #cbd5e0; border-radius: 4px;">
+        <div style="padding: 8px 16px; background: linear-gradient(135deg, #1e293b, #334155); border: 1px solid #475569; border-radius: 8px; color: #e2e8f0; font-weight: 500; transition: all 0.3s ease;">
             {token['text']}
         </div>
         """
@@ -739,22 +747,33 @@ def generate_token_visualization_html(token_analysis, full_analysis):
             </div>
         </div>
         
-        <div style="text-align: center; margin: 15px 0;">
-            <span style="font-size: 20px;">↓</span>
+        <div style="text-align: center; margin: 20px 0;">
+            <span style="font-size: 24px; color: #06b6d4;">↓</span>
         </div>
         
-        <div style="padding: 15px; background-color: #f0fff4; border-radius: 6px;">
-            <div style="margin-bottom: 8px; font-weight: bold; color: #2f855a;">Machine View:</div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+        <div style="padding: 20px; background: rgba(20, 184, 166, 0.1); border: 1px solid #14b8a6; border-radius: 12px;">
+            <div style="margin-bottom: 12px; font-weight: 600; color: #14b8a6; display: flex; align-items: center; gap: 8px;">
+                <span>🤖</span> Machine View:
+            </div>
+            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
     """
     
-    # Add machine view tokens
+    # Add machine view tokens with enhanced styling
+    color_map = {
+        "prefix": "linear-gradient(135deg, #8b5cf6, #a855f7)",
+        "suffix": "linear-gradient(135deg, #10b981, #14b8a6)", 
+        "stem": "linear-gradient(135deg, #3b82f6, #06b6d4)",
+        "compound_first": "linear-gradient(135deg, #f59e0b, #d97706)",
+        "compound_second": "linear-gradient(135deg, #f59e0b, #d97706)",
+        "word": "linear-gradient(135deg, #6b7280, #4b5563)"
+    }
+    
     for token in full_analysis:
-        bg_color = get_token_colors(token["type"])
+        bg_gradient = color_map.get(token["type"], color_map["word"])
         html += f"""
-        <div style="padding: 6px 12px; background-color: {bg_color}; border: 1px solid #a0aec0; border-radius: 4px; font-family: monospace;">
-            {token['token']}
-            <span style="font-size: 10px; opacity: 0.7; display: block;">{token['type']}</span>
+        <div style="padding: 10px 14px; background: {bg_gradient}; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; font-family: 'Fira Code', monospace; color: #ffffff; font-weight: 500; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: all 0.3s ease;">
+            <div style="font-size: 14px;">{token['token']}</div>
+            <div style="font-size: 10px; opacity: 0.8; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px;">{token['type']}</div>
         </div>
         """
     
@@ -762,28 +781,28 @@ def generate_token_visualization_html(token_analysis, full_analysis):
             </div>
         </div>
         
-        <div style="margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center;">
+        <div style="margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
     """
     
-    # Add stats
+    # Add stats with improved styling
     word_count = len(token_analysis)
     token_count = len(full_analysis)
     ratio = round(token_count / max(1, word_count), 2)
     
     html += f"""
-        <div style="background-color: #ebf8ff; padding: 10px; border-radius: 6px;">
-            <div style="font-size: 24px; font-weight: bold; color: #3182ce;">{word_count}</div>
-            <div style="font-size: 14px; color: #4299e1;">Words</div>
+        <div style="background: linear-gradient(135deg, #06b6d4, #0891b2); padding: 20px; border-radius: 12px; text-align: center; color: #ffffff; box-shadow: 0 4px 8px rgba(6, 182, 212, 0.3);">
+            <div style="font-size: 28px; font-weight: 700; margin-bottom: 4px;">{word_count}</div>
+            <div style="font-size: 14px; opacity: 0.9; font-weight: 500;">Words</div>
         </div>
         
-        <div style="background-color: #f0fff4; padding: 10px; border-radius: 6px;">
-            <div style="font-size: 24px; font-weight: bold; color: #38a169;">{token_count}</div>
-            <div style="font-size: 14px; color: #48bb78;">Tokens</div>
+        <div style="background: linear-gradient(135deg, #14b8a6, #0d9488); padding: 20px; border-radius: 12px; text-align: center; color: #ffffff; box-shadow: 0 4px 8px rgba(20, 184, 166, 0.3);">
+            <div style="font-size: 28px; font-weight: 700; margin-bottom: 4px;">{token_count}</div>
+            <div style="font-size: 14px; opacity: 0.9; font-weight: 500;">Tokens</div>
         </div>
         
-        <div style="background-color: #faf5ff; padding: 10px; border-radius: 6px;">
-            <div style="font-size: 24px; font-weight: bold; color: #805ad5;">{ratio}</div>
-            <div style="font-size: 14px; color: #9f7aea;">Tokens per Word</div>
+        <div style="background: linear-gradient(135deg, #8b5cf6, #7c3aed); padding: 20px; border-radius: 12px; text-align: center; color: #ffffff; box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);">
+            <div style="font-size: 28px; font-weight: 700; margin-bottom: 4px;">{ratio}</div>
+            <div style="font-size: 14px; opacity: 0.9; font-weight: 500;">Tokens/Word</div>
         </div>
     """
     
@@ -797,38 +816,51 @@ def generate_token_visualization_html(token_analysis, full_analysis):
 def generate_full_analysis_html(keyword, token_analysis, intent_analysis, evolution_potential, trends):
     """Generate HTML for full keyword analysis"""
     html = f"""
-    <div style="font-family: Arial, sans-serif; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
-        <h2 style="margin-top: 0;">Keyword DNA Analysis for: {keyword}</h2>
-        
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
-            <div style="padding: 15px; border: 1px solid #e2e8f0; border-radius: 6px;">
-                <h3 style="margin-top: 0; font-size: 16px;">Intent Gene</h3>
-                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
-                    <span>Type:</span>
-                    <span>{intent_analysis['type']}</span>
+    <div style="font-family: 'Inter', sans-serif; padding: 24px; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border: 1px solid #475569; border-radius: 16px; color: #ffffff;">
+        <h2 style="margin-top: 0; margin-bottom: 24px; color: #ffffff; background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">🧬 Keyword DNA Analysis for: {keyword}</h2>
+        
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;">
+            <div style="padding: 20px; background: rgba(6, 182, 212, 0.1); border: 1px solid #06b6d4; border-radius: 12px;">
+                <h3 style="margin-top: 0; font-size: 18px; color: #06b6d4; display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
+                    <span>🎯</span> Intent Gene
+                </h3>
+                <div style="display: flex; justify-content: space-between; margin-bottom: 12px; color: #e2e8f0;">
+                    <span style="font-weight: 500;">Type:</span>
+                    <span style="font-weight: 600; color: #06b6d4;">{intent_analysis['type']}</span>
                 </div>
                 <div style="display: flex; justify-content: space-between; align-items: center;">
-                    <span>Strength:</span>
-                    <div style="width: 120px; height: 8px; background-color: #edf2f7; border-radius: 4px; overflow: hidden;">
-                        <div style="height: 100%; background-color: #48bb78; width: {intent_analysis['strength']}%;"></div>
+                    <span style="font-weight: 500; color: #e2e8f0;">Strength:</span>
+                    <div style="width: 120px; height: 10px; background: rgba(255,255,255,0.1); border-radius: 5px; overflow: hidden; position: relative;">
+                        <div style="height: 100%; background: linear-gradient(90deg, #06b6d4, #14b8a6); width: {intent_analysis['strength']}%; border-radius: 5px; box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);"></div>
+                        <div style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #ffffff; font-weight: 600;">{intent_analysis['strength']}%</div>
                     </div>
                 </div>
             </div>
             
-            <div style="padding: 15px; border: 1px solid #e2e8f0; border-radius: 6px;">
-                <h3 style="margin-top: 0; font-size: 16px;">Evolution Potential</h3>
-                <div style="display: flex; justify-content: center; align-items: center; height: 100px;">
-                    <div style="position: relative; width: 100px; height: 100px;">
+            <div style="padding: 20px; background: rgba(139, 92, 246, 0.1); border: 1px solid #8b5cf6; border-radius: 12px;">
+                <h3 style="margin-top: 0; font-size: 18px; color: #8b5cf6; display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
+                    <span>⚡</span> Evolution Potential
+                </h3>
+                <div style="display: flex; justify-content: center; align-items: center; height: 80px;">
+                    <div style="position: relative; width: 80px; height: 80px;">
                         <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
-                            <span style="font-size: 24px; font-weight: bold;">{evolution_potential}</span>
+                            <span style="font-size: 24px; font-weight: 700; color: #8b5cf6;">{evolution_potential}%</span>
                         </div>
-                        <svg width="100" height="100" viewBox="0 0 36 36">
+                        <svg width="80" height="80" viewBox="0 0 36 36">
                             <path
                               d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                               fill="none"
-                              stroke="#4CAF50"
+                              stroke="rgba(139, 92, 246, 0.3)"
+                              stroke-width="3"
+                            />
+                            <path
+                              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                              fill="none"
+                              stroke="#8b5cf6"
                               stroke-width="3"
                               stroke-dasharray="{evolution_potential}, 100"
+                              stroke-linecap="round"
+                              style="filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.5));"
                             />
                         </svg>
                     </div>
@@ -836,17 +868,19 @@ def generate_full_analysis_html(keyword, token_analysis, intent_analysis, evolut
             </div>
         </div>
         
-        <div style="padding: 15px; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 20px;">
-            <h3 style="margin-top: 0; font-size: 16px;">Future Mutations</h3>
-            <div style="display: flex; flex-direction: column; gap: 8px;">
+        <div style="padding: 20px; background: rgba(20, 184, 166, 0.1); border: 1px solid #14b8a6; border-radius: 12px; margin-bottom: 24px;">
+            <h3 style="margin-top: 0; font-size: 18px; color: #14b8a6; display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
+                <span>🔮</span> Future Mutations
+            </h3>
+            <div style="display: flex; flex-direction: column; gap: 10px;">
     """
     
-    # Add trends
+    # Add trends with enhanced styling
     for trend in trends:
         html += f"""
-        <div style="display: flex; align-items: center; gap: 8px;">
-            <span style="color: #48bb78;">↗</span>
-            <span>{trend}</span>
+        <div style="display: flex; align-items: center; gap: 12px; padding: 8px 0;">
+            <span style="color: #14b8a6; font-size: 16px;">↗</span>
+            <span style="color: #e2e8f0; font-weight: 500;">{trend}</span>
         </div>
         """
     
@@ -854,58 +888,81 @@ def generate_full_analysis_html(keyword, token_analysis, intent_analysis, evolut
             </div>
         </div>
         
-        <h3 style="margin-bottom: 10px;">Token Details & Historical Analysis</h3>
+        <h3 style="margin-bottom: 16px; color: #ffffff; display: flex; align-items: center; gap: 8px;">
+            <span>📊</span> Token Details & Historical Analysis
+        </h3>
     """
     
-    # Add token details
-    for token in token_analysis:
+    # Add token details with enhanced styling
+    for i, token in enumerate(token_analysis):
+        gradient_colors = [
+            "linear-gradient(135deg, #06b6d4, #0891b2)",
+            "linear-gradient(135deg, #14b8a6, #0d9488)", 
+            "linear-gradient(135deg, #8b5cf6, #7c3aed)",
+            "linear-gradient(135deg, #3b82f6, #1e40af)",
+            "linear-gradient(135deg, #f59e0b, #d97706)"
+        ]
+        token_gradient = gradient_colors[i % len(gradient_colors)]
+        
         html += f"""
-        <div style="padding: 15px; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 15px;">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-                <div style="display: flex; align-items: center; gap: 8px;">
-                    <span style="font-size: 18px; font-weight: medium;">{token['token']}</span>
-                    <span style="padding: 2px 8px; background-color: #edf2f7; border-radius: 4px; font-size: 12px;">{token['posTag']}</span>
+        <div style="padding: 20px; background: rgba(30, 41, 59, 0.8); border: 1px solid #475569; border-radius: 12px; margin-bottom: 16px; backdrop-filter: blur(10px);">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <span style="font-size: 20px; font-weight: 600; color: #ffffff; padding: 8px 16px; background: {token_gradient}; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.3);">
+                        {token['token']}
+                    </span>
+                    <span style="padding: 4px 12px; background: rgba(6, 182, 212, 0.2); color: #06b6d4; border: 1px solid #06b6d4; border-radius: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase;">
+                        {token['posTag']}
+                    </span>
         """
         
         if token['entityType']:
             html += f"""
-            <span style="padding: 2px 8px; background-color: #ebf8ff; color: #3182ce; border-radius: 4px; font-size: 12px; display: flex; align-items: center;">
-                ⓘ {token['entityType']}
+            <span style="padding: 4px 12px; background: rgba(139, 92, 246, 0.2); color: #8b5cf6; border: 1px solid #8b5cf6; border-radius: 6px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px;">
+                <span>ⓘ</span> {token['entityType']}
             </span>
             """
         
         html += f"""
                 </div>
-                <div style="display: flex; align-items: center; gap: 4px;">
-                    <span style="font-size: 12px; color: #718096;">Importance:</span>
-                    <div style="width: 64px; height: 8px; background-color: #edf2f7; border-radius: 4px; overflow: hidden;">
-                        <div style="height: 100%; background-color: #4299e1; width: {token['importance']}%;"></div>
+                <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="font-size: 12px; color: #94a3b8; font-weight: 500;">Importance:</span>
+                    <div style="width: 80px; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;">
+                        <div style="height: 100%; background: linear-gradient(90deg, #06b6d4, #14b8a6); width: {token['importance']}%; border-radius: 4px;"></div>
                     </div>
+                    <span style="font-size: 11px; color: #06b6d4; font-weight: 600;">{token['importance']}%</span>
                 </div>
             </div>
             
-            <div style="margin-top: 15px;">
-                <div style="font-size: 12px; color: #718096; margin-bottom: 4px;">Historical Relevance:</div>
-                <div style="border: 1px solid #e2e8f0; border-radius: 4px; padding: 10px; background-color: #f7fafc;">
-                    <div style="font-size: 12px; margin-bottom: 8px;">
-                        <span style="font-weight: 500;">Origin: </span>
-                        <span>{token['origin']['era']}, </span>
-                        <span style="font-style: italic;">{token['origin']['language']}</span>
+            <div style="margin-top: 16px;">
+                <div style="font-size: 14px; color: #94a3b8; margin-bottom: 8px; font-weight: 500;">📚 Historical Relevance:</div>
+                <div style="border: 1px solid #475569; border-radius: 8px; padding: 16px; background: rgba(15, 23, 42, 0.8);">
+                    <div style="font-size: 13px; margin-bottom: 8px; color: #e2e8f0;">
+                        <span style="font-weight: 600; color: #06b6d4;">Origin:</span>
+                        <span style="margin-left: 8px;">{token['origin']['era']}</span>
+                        <span style="margin-left: 4px; color: #94a3b8;">•</span>
+                        <span style="font-style: italic; margin-left: 4px; color: #14b8a6;">{token['origin']['language']}</span>
                     </div>
-                    <div style="font-size: 12px; margin-bottom: 12px;">{token['origin']['note']}</div>
+                    <div style="font-size: 12px; margin-bottom: 16px; color: #94a3b8; line-height: 1.4;">{token['origin']['note']}</div>
                     
-                    <div style="display: flex; align-items: flex-end; height: 50px; gap: 4px; margin-top: 8px;">
+                    <div style="display: flex; align-items: flex-end; height: 60px; gap: 6px; margin-top: 12px; padding: 8px; background: rgba(6, 182, 212, 0.05); border-radius: 6px;">
         """
         
-        # Add historical data bars
+        # Add enhanced historical data bars
         for period, value in token['historicalData']:
-            opacity = 0.3 + (token['historicalData'].index((period, value)) * 0.1)
+            period_index = token['historicalData'].index((period, value))
+            opacity = 0.4 + (period_index * 0.1)
+            bar_height = max(8, (value / 100) * 40)
+            
             html += f"""
-            <div style="display: flex; flex-direction: column; align-items: center; flex: 1;">
-                <div style="width: 100%; background-color: rgba(66, 153, 225, {opacity}); border-radius: 2px 2px 0 0; height: {max(4, value)}%;"></div>
-                <div style="font-size: 9px; margin-top: 4px; color: #718096; transform: rotate(45deg); transform-origin: top left; white-space: nowrap;">
+            <div style="display: flex; flex-direction: column; align-items: center; flex: 1; position: relative;">
+                <div style="width: 100%; background: linear-gradient(to top, rgba(6, 182, 212, {opacity}), rgba(20, 184, 166, {opacity + 0.2})); border-radius: 3px 3px 0 0; height: {bar_height}px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2);"></div>
+                <div style="font-size: 8px; margin-top: 6px; color: #94a3b8; transform: rotate(45deg); transform-origin: top center; white-space: nowrap; font-weight: 500;">
                     {period}
                 </div>
+                <div style="position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 8px; color: #06b6d4; font-weight: 600; opacity: 0; transition: opacity 0.3s ease;">
+                    {int(value)}%
+                </div>
             </div>
             """