Update app.py

app.py

@@ -111,105 +111,89 @@ def create_journal_interface():
     # Custom CSS for better styling
     custom_css = """
             /* 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 {
-            padding: 10px;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
         }
         
+        /* Header styles */
         .header {
-            padding: 1rem;
+            text-align: center;
+            margin-bottom: 2rem;
+            background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
+            padding: 2rem;
+            border-radius: 15px;
+            color: white;
+        }
+        
+        /* Input area styles */
+        .input-container {
+            background: white;
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+        }
+        
+        /* Output area styles */
+        .output-container {
+            background: #f8f9fa;
+            border-radius: 15px;
+            padding: 20px;
+            margin-top: 20px;
+        }
+        
+        /* Button styles */
+        .custom-button {
+            background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
+            border: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            color: white;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        
+        .custom-button:hover {
+            transform: translateY(-2px);
+        }
+        
+        /* Card styles */
+        .card {
+            background: white;
+            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;
+            }
         }
-    }
-
     """