Update app.py

app.py

@@ -343,107 +343,99 @@ for message in st.session_state.chat_history:
 
 # Chat input
 if not st.session_state.chat_active:
-    st.markdown("""
-        <script>
-        document.addEventListener('DOMContentLoaded', (event) => {
-            const svgs = document.querySelectorAll('svg');
-            svgs.forEach(svg => {
-                if (svg.getAttribute('xmlns') === 'http://www.w3.org/2000/svg' && svg.getAttribute('width') === '18' && svg.getAttribute('height') === '18') {
-                    svg.style.display = 'none';
-                }
-            });
+     st.markdown("""
+    <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+        const svgs = document.querySelectorAll('svg');
+        svgs.forEach(svg => {
+            if (svg.getAttribute('xmlns') === 'http://www.w3.org/2000/svg' && svg.getAttribute('width') === '18' && svg.getAttribute('height') === '18') {
+                svg.style.display = 'none';
+            }
         });
-        </script>
+    });
+    </script>
 
-        <style>
-        /* Hide all <a> elements inside elements with block-container and st-emotion-cache-1eo1tir ea3mdgi5 classes */
-        .block-container.st-emotion-cache-1eo1tir.ea3mdgi5 a {
-            display: none !important;
-        }
+    <style>
+    /* Hide all <a> elements inside elements with block-container and st-emotion-cache-1eo1tir ea3mdgi5 classes */
+    .block-container.st-emotion-cache-1eo1tir.ea3mdgi5 a {
+        display: none !important;
+    }
 
-        /* Ensure links in the sidebar are visible and underlined */
-        .stSidebar a {
-            display: inline !important;
-            text-decoration: underline !important;
-            color: inherit !important;
-        }
+    /* Ensure links in the sidebar are visible and underlined */
+    .stSidebar a {
+        display: inline !important;
+        text-decoration: underline !important;
+        color: inherit !important;
+    }
 
-        /* Center content */
-        .content {
-            text-align: center;
-            margin: 0 auto;
-        }
+    /* Additional styles */
+    .section-container {
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+        flex-wrap: wrap;
+        gap: 4px;
+    }
+    
+    .section {
+        flex: 1;
+        min-width: 150px;
+        max-width: 90px;
+        min-height: 150px;
+        border: 1px solid #afafaf;
+        border-radius: 10px;
+        padding: 5px;
+        background-color: transparent;
+        margin: 7px;
+        text-align: center;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        font-size: 12px;
+        transition: background-color 0.3s ease;
+    }
 
-        /* Ensure container is centered */
-        .section-container {
-            display: flex;
-            justify-content: center;
-            align-items: stretch;
-            flex-wrap: wrap;
-            gap: 4px;
-            margin: 0 auto; /* Center container */
-            max-width: 1200px; /* Optional: Adjust based on content width */
-        }
-        
-        .section {
-            flex: 1;
-            min-width: 150px;
-            max-width: 300px; /* Adjusted width */
-            min-height: 150px;
-            border: 1px solid #afafaf;
-            border-radius: 10px;
-            padding: 5px;
-            background-color: transparent;
-            margin: 3px;
-            text-align: center;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            box-sizing: border-box;
-            font-size: 12px;
-            transition: background-color 0.3s ease;
-        }
+    .section h2 {
+        color: #afafaf;
+        font-size: 14px;
+        margin-bottom: 8px;
+        border-bottom: 1px solid #afafaf;
+        padding-bottom: 4px;
+    }
 
-        .section h2 {
-            color: #afafaf;
-            font-size: 14px;
-            margin-bottom: 8px;
-            border-bottom: 1px solid #afafaf;
-            padding-bottom: 4px;
-        }
+    .section p {
+        color: #afafaf;
+        font-size: 11px;
+        margin: 5px 0;
+        line-height: 1.4;
+    }
 
-        .section p {
-            color: #afafaf;
-            font-size: 11px;
-            margin: 5px 0;
-            line-height: 1.4;
+    @media (max-width: 100px) {
+        .section {
+            min-width: 90%;
+            max-width: 90%;
         }
+    }
+    </style>
+    
+    <h1 style='text-align: center; color: #b4b4b4;'>How can I help you today?</h1>
 
-        @media (max-width: 600px) {
-            .section {
-                min-width: 90%;
-                max-width: 90%;
-            }
-        }
-        </style>
-        
-        <div class="content">
-            <h1 style="background: linear-gradient(45deg, #4b25ea, #bd18e6, #fb590e); -webkit-background-clip: text; color: transparent; font-size: 24px;">How can I help you today?</h1>
-
-            <div class="section-container">
-                <div class="section">
-                    <h2>Find</h2>
-                    <p>Discover all your great TrustBuilders®. <br> Example: Find Development Trust Builders® for World Vision</p>
-                </div>
-                <div class="section">
-                    <h2>Create</h2>
-                    <p>Generate trust-optimised solutions : <br>Example: Find World Vision development TrustBuilders®. Then use them to write a 200-word annual report article. Enthusiastic tone.</p>
-                </div>
-                <div class="section">
-                    <h2>Trust-optimise</h2>
-                    <p>Paste your LinkedIn profile, EDM or blog and ask TrustAI® to improve it using specific Trust Buckets® and add your specific TrustBuilders® as examples.</p>
-                </div>
-            </div>
+    <div class="section-container">
+        <div class="section">
+            <h2>Find</h2>
+            <p>Discover all your great TrustBuilders®. <br> Example: Find Development Trust Builders® for World Vision 
+        </div>
+        <div class="section">
+            <h2>Create</h2>
+            <p>Generate trust-optimised solutions: <br>Example: Find World Vision development TrustBuilders®. Then use them to write a 200-word annual report article. Enthusiastic tone.</p>
         </div>
-        """, unsafe_allow_html=True)
+        <div class="section">
+            <h2>Trust-optimise</h2>
+            <p>Paste your LinkedIn profile, EDM or blog and ask TrustAI® to improve it using specific Trust Buckets® and add your specific TrustBuilders® as examples.</p>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+  
 else:
     st.empty()