Update app.py

app.py

@@ -95,156 +95,6 @@ def load_custom_css():
                 background-color: #FDE8E8;
                 color: rgb(255, 255, 255);
             }
-        
-            .bg-white {
-                background-color: white;
-            }
-            
-            .rounded-xl {
-                border-radius: 0.75rem;
-            }
-            
-            .shadow-sm {
-                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-            }
-            
-            .border {
-                border-width: 1px;
-            }
-            
-            .border-gray-200 {
-                border-color: #E5E7EB;
-            }
-            
-            .mb-6 {
-                margin-bottom: 1.5rem;
-            }
-            
-            .space-y-3 > * + * {
-                margin-top: 0.75rem;
-            }
-            
-            .space-y-4 > * + * {
-                margin-top: 1rem;
-            }
-            
-            .space-x-3 > * + * {
-                margin-left: 0.75rem;
-            }
-            
-            .text-blue-500 {
-                color: #3B82F6;
-            }
-            
-            .text-blue-600 {
-                color: #2563EB;
-            }
-            
-            .text-gray-600 {
-                color: #4B5563;
-            }
-            
-            .text-gray-700 {
-                color: #374151;
-            }
-            
-            .text-gray-800 {
-                color: #1F2937;
-            }
-            
-            .bg-green-100 {
-                background-color: #DEF7EC;
-            }
-            
-            .bg-red-100 {
-                background-color: #FDE8E8;
-            }
-            
-            .text-green-800 {
-                color: #03543F;
-            }
-            
-            .text-red-800 {
-                color: #9B1C1C;
-            }
-            
-            .rounded-full {
-                border-radius: 9999px;
-            }
-            
-            .flex {
-                display: flex;
-            }
-            
-            .items-center {
-                align-items: center;
-            }
-            
-            .items-start {
-                align-items: flex-start;
-            }
-            
-            .text-2xl {
-                font-size: 1.5rem;
-                line-height: 2rem;
-            }
-            
-            .text-xl {
-                font-size: 1.25rem;
-                line-height: 1.75rem;
-            }
-            
-            .text-lg {
-                font-size: 1.125rem;
-                line-height: 1.75rem;
-            }
-            
-            .text-sm {
-                font-size: 0.875rem;
-                line-height: 1.25rem;
-            }
-            
-            .font-bold {
-                font-weight: 700;
-            }
-            
-            .font-semibold {
-                font-weight: 600;
-            }
-            
-            .font-medium {
-                font-weight: 500;
-            }
-            
-            .mr-2 {
-                margin-right: 0.5rem;
-            }
-            
-            .mb-4 {
-                margin-bottom: 1rem;
-            }
-            
-            .mb-3 {
-                margin-bottom: 0.75rem;
-            }
-            
-            .p-6 {
-                padding: 1.5rem;
-            }
-            
-            .px-3 {
-                padding-left: 0.75rem;
-                padding-right: 0.75rem;
-            }
-            
-            .py-1 {
-                padding-top: 0.25rem;
-                padding-bottom: 0.25rem;
-            }
-            
-            .inline-flex {
-                display: inline-flex;
-            }
             </style>
     """, unsafe_allow_html=True)
 
@@ -618,96 +468,48 @@ def main():
                 st.rerun()
     
     with info_col:
-        # About System Section
+        # System information
         st.markdown("""
-            <div style="background-color: #1E1E1E; border-radius: 12px; padding: 20px; margin-bottom: 20px;">
-                <!-- Header -->
-                <div style="display: flex; align-items: center; margin-bottom: 16px;">
-                    <span style="color: #60A5FA; font-size: 24px;">ℹ️</span>
-                    <span style="color: #E5E7EB; margin-left: 8px; font-size: 18px;">เกี่ยวกับระบบ</span>
-                </div>
-                
-                <!-- Description -->
-                <p style="color: #60A5FA; margin-bottom: 24px;">
+            <div style="background-color: #F9FAFB; padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem;">
+                <h3 style="color: #1E3A8A;">ℹ️ เกี่ยวกับระบบ</h3>
+                <p style="color: #ff0015;">
                     ระบบนี้ใช้เทคโนโลยี <strong>RAG (Retrieval-Augmented Generation)</strong> 
                     ในการค้นหาและตอบคำถามเกี่ยวกับปฏิทินการศึกษ��
                 </p>
-    
-                <!-- Section Header -->
-                <h4 style="color: #9CA3AF; font-size: 1.1rem; margin-bottom: 1rem;">
-                    สามารถสอบถามข้อมูลเกี่ยวกับ:
-                </h4>
-    
-                <!-- Menu Items -->
-                <div style="margin-bottom: 16px;">
-                    <div style="display: flex; align-items: center; margin-bottom: 12px;">
-                        <span style="color: #3B82F6; margin-right: 12px;">📅</span>
-                        <span style="color: #9CA3AF;">กำหนดการต่างๆ ในปฏิทินการศึกษา</span>
-                    </div>
-                    <div style="display: flex; align-items: center; margin-bottom: 12px;">
-                        <span style="color: #3B82F6; margin-right: 12px;">🎯</span>
-                        <span style="color: #9CA3AF;">วันสำคัญและกิจกรรม</span>
-                    </div>
-                    <div style="display: flex; align-items: center; margin-bottom: 12px;">
-                        <span style="color: #3B82F6; margin-right: 12px;">📝</span>
-                        <span style="color: #9CA3AF;">การลงทะเบียนเรียน</span>
-                    </div>
-                    <div style="display: flex; align-items: center; margin-bottom: 12px;">
-                        <span style="color: #3B82F6; margin-right: 12px;">📚</span>
-                        <span style="color: #9CA3AF;">กำหนดการสอบ</span>
-                    </div>
-                    <div style="display: flex; align-items: center;">
-                        <span style="color: #3B82F6; margin-right: 12px;">🏖️</span>
-                        <span style="color: #9CA3AF;">วันหยุดการศึกษา</span>
-                    </div>
-                </div>
+                <h4 style="color: #1E3A8A; margin-top: 1rem;">สามารถสอบถามข้อมูลเกี่ยวกับ:</h4>
+                <ul style="list-style-type: none; padding-left: 0;">
+                    <li>📅 กำหนดการต่างๆ ในปฏิทินการศึกษา</li>
+                    <li>🎯 วันสำคัญและกิจกรรม</li>
+                    <li>📝 การลงทะเบียนเรียน</li>
+                    <li>📚 กำหนดการสอบ</li>
+                    <li>🏖️ วันหยุดการศึกษา</li>
+                </ul>
             </div>
-    
-            <!-- System Status Section -->
-            <div style="background-color: #1E1E1E; border-radius: 12px; padding: 20px;">
-                <!-- Header -->
-                <div style="display: flex; align-items: center; margin-bottom: 16px;">
-                    <span style="color: #60A5FA; font-size: 24px;">🔄</span>
-                    <span style="color: #E5E7EB; margin-left: 8px; font-size: 18px;">สถานะระบบ</span>
-                </div>
-    
-                <!-- Status Items -->
-                <div style="margin-bottom: 16px;">
-                    <div style="display: flex; align-items: start; margin-bottom: 16px;">
-                        <span style="color: #3B82F6; margin-right: 12px;">⏰</span>
-                        <div>
-                            <p style="color: #9CA3AF; font-weight: 600; margin: 0;">เวลาปัจจุบัน</p>
-                            <p style="color: #6B7280; margin: 4px 0 0 0;">{}</p>
-                        </div>
-                    </div>
-    
-                    <div style="display: flex; align-items: start; margin-bottom: 16px;">
-                        <span style="color: #3B82F6; margin-right: 12px;">📡</span>
-                        <div>
-                            <p style="color: #9CA3AF; font-weight: 600; margin: 0;">สถานะระบบ</p>
-                            <span style="display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; font-size: 14px; color: #E5E7EB; background-color: {};">
-                                {} {}
-                            </span>
-                        </div>
-                    </div>
-    
-                    <div style="display: flex; align-items: start;">
-                        <span style="color: #3B82F6; margin-right: 12px;">💾</span>
-                        <div>
-                            <p style="color: #9CA3AF; font-weight: 600; margin: 0;">สถานะ GitHub Sync</p>
-                            <span style="display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; font-size: 14px; color: #E5E7EB; background-color: {};">
-                                {} {}
-                            </span>
-                        </div>
-                    </div>
+        """, unsafe_allow_html=True)
+        
+        # System status
+        st.markdown("""
+            <div style="background-color: #f9fafb; padding: 1.5rem; border-radius: 12px;">
+                <h3 style="color: #1E3A8A;">🔄 สถานะระบบ</h3>
+                <div style="margin-top: 1rem;">
+                    <p><strong>⏰ เวลาปัจจุบัน:</strong><br>
+                    {}</p>
+                    <p><strong>📡 สถานะระบบ:</strong><br>
+                    <span class="status-indicator {}">
+                        {} {}
+                    </span></p>
+                    <p><strong>💾 สถานะ GitHub Sync:</strong><br>
+                    <span class="status-indicator {}">
+                        {} {}
+                    </span></p>
                 </div>
             </div>
         """.format(
             (datetime.now() + timedelta(hours=7)).strftime('%Y-%m-%d %H:%M:%S'),
-            "#047857" if st.session_state.pipeline else "#991B1B",
+            "status-online" if st.session_state.pipeline else "status-offline",
             "🟢" if st.session_state.pipeline else "🔴",
             "พร้อมใช้งาน" if st.session_state.pipeline else "ไม่พร้อมใช้งาน",
-            "#047857" if st.session_state.github_sync_enabled else "#991B1B",
+            "status-online" if st.session_state.github_sync_enabled else "status-offline",
             "🟢" if st.session_state.github_sync_enabled else "🔴",
             "เชื่อมต่อแล้ว" if st.session_state.github_sync_enabled else "ไม่ได้เชื่อมต่อ"
         ), unsafe_allow_html=True)