Update app.py

app.py

@@ -20,13 +20,14 @@ def generate_text(prompt):
 # Custom CSS for the app
 css = """
 body {background-color: #f0f8ff; font-family: 'Arial', sans-serif;}
-.gradio-container {max-width: 700px; margin: 0 auto; border-radius: 15px; padding: 20px; background-color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
-textarea {border-radius: 10px; padding: 10px; font-size: 16px; border: 2px solid #ddd;}
-button {background-color: #4caf50; color: #000000; border-radius: 5px; padding: 10px 20px; font-size: 16px; border: none; cursor: pointer;}
+.gradio-container {max-width: 900px; margin: 0 auto; border-radius: 15px; padding: 30px; background-color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
+textarea {border-radius: 10px; padding: 15px; font-size: 16px; border: 2px solid #ddd; width: 100%;}
+button {background-color: #4caf50; color: white; border-radius: 10px; padding: 10px 15px; font-size: 16px; border: none; cursor: pointer; margin-top: 10px; margin-right: 5px;}
 button:hover {background-color: #45a049;}
-h1 {color: #333; font-size: 32px; text-align: center;}
-footer {text-align: center; padding: 10px;}
-#prompt_box {padding: 10px; background-color: #f9f9f9; border-radius: 10px;}
+h1 {color: #333; font-size: 36px; text-align: center; margin-bottom: 20px;}
+h2 {color: #555; font-size: 24px; margin-bottom: 10px;}
+footer {text-align: center; padding: 20px; font-size: 14px;}
+.grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; justify-items: stretch;}
 """
 
 # Define example entries
@@ -49,19 +50,22 @@ with gr.Blocks(css=css) as journal_app:
     gr.Markdown("# 📝 Productivity Journal")
     gr.Markdown("Welcome to your personalized productivity journal. Click an example below or write your thoughts!")
 
-    # Actual example journal entries as clickable buttons
-    gr.Markdown("### **Click an example to start writing:**")
+    # Example journal entries section
+    gr.Markdown("### **Select an example to start writing:**")
     
+    # Align buttons in grid format for better layout
     with gr.Row():
         prompt_textbox = gr.Textbox(label="Write your thoughts here:", placeholder="Start writing or select an example...", elem_id="prompt_box", lines=5)
-        
-        for i, entry in enumerate(example_entries):
-            gr.Button(f"Example {i+1}").click(fn=lambda e=entry: fill_prompt(e), inputs=None, outputs=prompt_textbox)
 
-    with gr.Row():
         with gr.Column():
-            # Output for generated text
-            output = gr.Textbox(label="Your AI Journal Entry ✨", lines=5)
+            # Arrange example buttons in grid format
+            with gr.Box(elem_classes="grid"):
+                for i, entry in enumerate(example_entries):
+                    gr.Button(f"Example {i+1}").click(fn=lambda e=entry: fill_prompt(e), inputs=None, outputs=prompt_textbox)
+    
+    with gr.Row():
+        # Output for generated text
+        output = gr.Textbox(label="Your AI Journal Entry ✨", lines=6)
     
     # Generate button
     generate_button = gr.Button("Generate Entry ✍️")