Update app.py

app.py

@@ -110,94 +110,109 @@ def create_journal_interface():
     
     # Custom CSS for better styling
     custom_css = """
-        /* Global styles */
+            /* Global styles */
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+    
+    /* Header styles */
+    .header {
+        text-align: center;
+        margin-bottom: 2rem;
+        background: linear-gradient(135deg, #4a90e2 0%, #007aff 100%);
+        padding: 2rem;
+        border-radius: 15px;
+        color: #ffffff;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+    
+    /* Input area styles */
+    .input-container {
+        background: #1e1e1e;
+        border: 1px solid #4a90e2;
+        border-radius: 15px;
+        padding: 20px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        margin-bottom: 20px;
+        color: #ffffff;
+    }
+    
+    /* Textbox input */
+    .journal-input {
+        background: #333333;
+        color: #ffffff;
+        border: 1px solid #4a90e2;
+        border-radius: 10px;
+    }
+    
+    /* Output area styles */
+    .output-container {
+        background: #2a2a2a;
+        border: 1px solid #4a90e2;
+        border-radius: 15px;
+        padding: 20px;
+        margin-top: 20px;
+        color: #ffffff;
+    }
+    
+    /* Button styles */
+    .custom-button {
+        background: linear-gradient(135deg, #4a90e2 0%, #007aff 100%);
+        border: none;
+        padding: 10px 20px;
+        border-radius: 8px;
+        color: #ffffff;
+        font-weight: bold;
+        cursor: pointer;
+        transition: transform 0.2s;
+    }
+    
+    .custom-button:hover {
+        transform: translateY(-2px);
+    }
+    
+    /* Card styles */
+    .card {
+        background: #333333;
+        border-radius: 10px;
+        padding: 15px;
+        margin: 10px 0;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        transition: transform 0.2s;
+        color: #ffffff;
+        border: 1px solid #4a90e2;
+    }
+    
+    .card:hover {
+        transform: translateY(-2px);
+    }
+    
+    /* Animation for results */
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .result-animation {
+        animation: fadeIn 0.5s ease-out;
+    }
+    
+    /* Responsive design */
+    @media (max-width: 768px) {
         .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
+            padding: 10px;
         }
         
-        /* Header styles */
         .header {
-            text-align: center;
-            margin-bottom: 2rem;
-            background: linear-gradient(135deg, #4a90e2 0%, #007aff 100%);
-            padding: 2rem;
-            border-radius: 15px;
-            color: #ffffff;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        }
-        
-        /* Input area styles */
-        .input-container {
-            background: #ffffff;
-            border-radius: 15px;
-            padding: 20px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-        
-        /* Output area styles */
-        .output-container {
-            background: #f3f4f6;
-            border-radius: 15px;
-            padding: 20px;
-            margin-top: 20px;
-            color: #333333;
-        }
-        
-        /* Button styles */
-        .custom-button {
-            background: linear-gradient(135deg, #4a90e2 0%, #007aff 100%);
-            border: none;
-            padding: 10px 20px;
-            border-radius: 8px;
-            color: #ffffff;
-            font-weight: bold;
-            cursor: pointer;
-            transition: transform 0.2s;
-        }
-        
-        .custom-button:hover {
-            transform: translateY(-2px);
-        }
-        
-        /* Card styles */
-        .card {
-            background: #ffffff;
-            border-radius: 10px;
-            padding: 15px;
-            margin: 10px 0;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-            transition: transform 0.2s;
-        }
-        
-        .card:hover {
-            transform: translateY(-2px);
-        }
-        
-        /* Animation for results */
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        
-        .result-animation {
-            animation: fadeIn 0.5s ease-out;
-        }
-        
-        /* Responsive design */
-        @media (max-width: 768px) {
-            .container {
-                padding: 10px;
-            }
-            
-            .header {
-                padding: 1rem;
-            }
+            padding: 1rem;
         }
+    }
+
     """
     
+    
     with gr.Blocks(css=custom_css, title="AI Journal Companion") as interface:
         with gr.Column(elem_classes="container"):
             # Header