Update app.py

app.py

@@ -3,64 +3,82 @@ import random
 import gradio as gr
 import base64
 
-# ✅ Load JSON data
+# Load JSON data
 with open("gita_techies_18_chapters.json", "r", encoding="utf-8") as f:
     gita_for_techies = json.load(f)
 
-# ✅ Encode bg.png as base64
+# Load and encode bg image
 with open("bg.png", "rb") as img_file:
     b64_bg_img = base64.b64encode(img_file.read()).decode()
 
-# ✅ Wisdom generator
+# Function to fetch one entry
 def get_gita_tech():
     entry = random.choice(gita_for_techies)
     return f"""
     <div class="content">
       <h2>📘 Chapter {entry["chapter_number"]}</h2>
+
       <p><b>🌼 Spiritual Meaning (EN):</b><br>{entry["spiritual_meaning_en"]}</p>
       <p><b>🪔 ఆధ్యాత్మిక అర్థం (TE):</b><br>{entry["spiritual_meaning_te"]}</p>
+
       <p><b>💻 Tech Meaning (EN):</b><br>{entry["tech_meaning_en"]}</p>
       <p><b>🌾 టెక్ అర్థం (TE):</b><br>{entry["tech_meaning_te"]}</p>
+
       <p><b>🧠 Lesson for Techies:</b><br>{entry["lesson_for_techies"]}</p>
       <p><b>⚙️ Tech Stack Analogy:</b><br>{entry["tech_stack_analogy"]}</p>
+
       <p><b>🧘 Daily Reminder (EN):</b><br><i>{entry["daily_reminder_en"]}</i></p>
       <p><b>🧘 రోజువారీ స్మరణ (TE):</b><br><i>{entry["daily_reminder_te"]}</i></p>
+
       <p><b>🧾 Code Snippet:</b></p>
       <pre><code>{entry["code_snippet"]}</code></pre>
+
       <hr style="margin-top: 30px;">
-      <p style="text-align:center;font-size:0.9rem;">🪷 Made with 💜 by <b>Sreelekha Putta</b></p>
+      <p style="text-align:center;font-size:0.9rem;">🌸 Made with 💜 by <b>Sreelekha Putta</b></p>
     </div>
+
     <style>
       .content {{
-        background: rgba(20, 15, 35, 0.9);
-        padding: 25px;
-        border-radius: 16px;
+        background: rgba(20, 15, 35, 0.92);
+        padding: 20px;
+        border-radius: 18px;
         max-width: 800px;
         margin: 0 auto 30px auto;
-        box-shadow: 0 0 25px #ab71f7;
-        color: #f8e8ff;
+        box-shadow: 0 0 20px #ab71f7;
+        color: #ffffff;
         font-family: 'Segoe UI', sans-serif;
         animation: fadeIn 1.5s ease forwards;
+        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
       }}
       pre {{
-        background: #1f2937;
-        color: #a5f3fc;
+        background: #111827;
+        color: #e0f2fe;
         padding: 12px;
-        border-radius: 8px;
+        border-radius: 10px;
         font-size: 0.95rem;
         overflow-x: auto;
-      }}
-      h2 {{
-        color: #d0a8ff;
+        box-shadow: 0 0 10px rgba(255,255,255,0.08);
       }}
       @keyframes fadeIn {{
         from {{ opacity: 0; transform: translateY(20px); }}
         to {{ opacity: 1; transform: translateY(0); }}
       }}
+      @media screen and (max-width: 600px) {{
+        .content {{
+          padding: 16px;
+          font-size: 0.95rem;
+        }}
+        h2 {{
+          font-size: 1.5rem;
+        }}
+        pre {{
+          font-size: 0.85rem;
+        }}
+      }}
     </style>
     """
 
-# ✅ CSS with background image
+# CSS with responsive background
 css = f"""
 body {{
     margin: 0;
@@ -107,7 +125,7 @@ button:hover {{
 }}
 """
 
-# ✅ Build UI
+# Gradio app
 with gr.Blocks(css=css) as app:
     gr.Markdown("<h1>💻 Bhagavad Gita for Techies 💻</h1>")
     output = gr.HTML()