Update app.py

app.py

@@ -321,56 +321,39 @@ df = load_data()
 # </div>
 # """, unsafe_allow_html=True)
 # ================= HEADER + DUAL LOGO (KIRI: logo.png | KANAN: btech.png) =================
-st.markdown("""
-<style>
-.header-container {
-    position: relative;
-    text-align: center;
-    padding: 30px 0 20px 0;
-    margin-bottom: 20px;
-}
-.logo-left, .logo-right {
-    position: absolute;
-    top: 10px;
-    z-index: 100;
-    background: white;
-    padding: 6px;
-    border-radius: 10px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    border: 1px solid #e0e0e0;
-}
-.logo-left {
-    left: 20px;
-}
-.logo-right {
-    right: 20px;
-}
-.title-main {
-    font-size: 2.2rem;
-    font-weight: 800;
-    color: #154D9C;
-    margin: 0;
-}
-.sub1, .sub2 {
-    font-size: 12px;
-    color: #7d7d7d;
-    margin: 4px 0 2px 0;
-}
-.sub2 { font-size: 10px; }
-</style>
+# ==== HEADER LAYOUT (Columns) ====
+with st.container():
+    st.markdown('<div class="header-box">', unsafe_allow_html=True)
+    col1, col2, col3 = st.columns([1, 5, 1])  # kiri & kanan kecil, tengah besar
+
+    # LEFT — logo.png (Michelin / calon customer)
+    with col1:
+        try:
+            st.image("logo.png", width=100)
+        except:
+            st.empty()  # tidak tampilkan apa-apa jika error
+
+    # CENTER — TITLE
+    with col2:
+        st.markdown("""
+            <div class="header-title" style="text-align:center;">
+                <h1 style="margin:0; color:#154D9C; font-weight:bold;">
+                    Tyre Pressure Monitoring System (TPMS) Analytics for Mining Equipments
+                </h1>
+                <p style="color:#7d7d7d; font-size:12px; margin:4px 0 2px 0;">
+                    Daily trend insights derived from 13–16 December 2023 data
+                </p>
+            </div>
+        """, unsafe_allow_html=True)
 
-<div class="header-container">
-    <div class="logo-left">
-        <img src="logo.png" width="100" style="display:block;" />
-    </div>
-    <div class="logo-right">
-        <img src="btech.png" width="100" style="display:block;" />
-    </div>
-    <h1 class="title-main">Tyre Pressure Monitoring System (TPMS) Analytics for Mining Equipments</h1>
-    <p class="sub1">Daily trend insights derived from 13–16 December 2023 data</p>
-    <p class="sub2">&copy; 2025 Bukit Technology Digital. All rights reserved.</p>
-</div>
-""", unsafe_allow_html=True)
+    # RIGHT — btech.png (BTech logo)
+    with col3:
+        try:
+            st.image("btech.png", width=100)
+        except:
+            st.empty()  # fallback silent
+
+    st.markdown('</div>', unsafe_allow_html=True)
 
 # # ================= HEADER =================
 # st.markdown("""
@@ -1675,7 +1658,18 @@ st.markdown(f"""
 """, unsafe_allow_html=True)
 
 st.markdown("""
-<div class="footer">
-    Michelin Mining Tyre Analytics
+<div class="footer" style="
+    text-align: center;
+    padding: 12px 0;
+    margin-top: 20px;
+    font-family: Arial, sans-serif;
+    border-top: 1px solid #f0f0f0;
+">
+    <div style="font-weight: bold; color: #154D9C; margin-bottom: 4px;">
+        Michelin Mining Tyre Analytics
+    </div>
+    <div style="font-size: 10px; color: #7d7d7d;">
+        &copy; 2025 Bukit Technology Digital. All rights reserved.
+    </div>
 </div>
 """, unsafe_allow_html=True)