Update app.py

app.py

@@ -2054,7 +2054,6 @@ def launch_main_app():
                         text-align: center;
                         width: 100%
                     }
-
                     /* Style for footer text */
                     #footer-text {
                         text-align: center;
@@ -2065,7 +2064,6 @@ def launch_main_app():
                         border-top: 1px solid #ddd;
                         line-height: 1.6
                     }
-
                     /* Custom styling for textarea input (monospace box) */
                     #pretty-box textarea {
                         font-size: 16px;
@@ -2080,80 +2078,46 @@ def launch_main_app():
                         min-width: 300px;
                         max-width: 150%;
                     }
-
-                    /* Sticky footer that stays at bottom of page */
-                    #custom_footer {
-                        position: fixed;
-                        bottom: 0;
-                        left: 0;
-                        right: 0;
-                        padding: 10px 20px;
-                        font-size: 14px;
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                        z-index: 9999; /* Ensure it’s on top of Gradio footer */
-                        box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
-                    }
-
                     /* Label styling inside the pretty-box */
                     #pretty-box label {
                         text-align: center;
                         font-size: 18px;
                     }
-
                     /* Utility box for fitting controls */
                     #fit-box {
                         min-width: 200px;
                         margin: auto;
                     }
-
                     /* Override Gradio block styling to make background transparent */
                     .gr-block.gr-group {
                         background-color: inherit !important;
                         padding: 16px;
                     }
-
-                    /* Left-aligned footer text */
-                    #footer-left {
-                        font-size: 14px;
-                        line-height: 1.4;
-                        color: #555;
-                        padding-left: 10px;
-                        display: flex;
-                        align-items: center;
+                    #custom_footer {
+                        position: absolute;
+                        bottom: 0;
+                        width: 100%;
+                        background-color: #0b0b0b; /* Optional: match Gradio theme */
+                        z-index: 9999;
+                        padding: 10px 20px;
                     }
 
-                    /* Right-aligned footer text */
-                    #footer-right {
+                    #footer-contact, #footer-left, #footer-right {
+                        color: white;
                         font-size: 14px;
-                        line-height: 1.4;
-                        color: #555;
-                        text-align: right;
+                        line-height: 1.5;
                     }
 
-                    /* Link styling inside right footer */
+                    #footer-contact a,
                     #footer-right a {
-                        color: #0077cc;
+                        color: #61dafb;  /* Stylish light-blue link color */
                         text-decoration: none;
                     }
 
-                    /* Hover effect for links */
+                    #footer-contact a:hover,
                     #footer-right a:hover {
                         text-decoration: underline;
                     }
-
-                    /* Footer row container for spacing and border */
-                    #footer-row {
-                        border-top: 1px solid #ccc;
-                        margin-top: 20px;
-                        padding-top: 10px;
-                        padding-bottom: 5px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: space-between;
-                    }
-
                     /* Logout row positioned to the right */
                     #logout-row {
                         display: flex;
@@ -3827,40 +3791,30 @@ with gr.Blocks(title="🧪 Toilet Segmentation & Measurement App") as full_app_i
     # 🔻 FOOTER SECTION
     # ================================
     with gr.Row(elem_id='custom_footer'):
-        with gr.Row():
-            with gr.Column(scale=1, min_width=300):
-                with gr.Row():
-                    gr.Markdown("")  # Empty row (spacer)
-                with gr.Row():
-                    gr.Markdown("")  # Empty row (spacer)
-                with gr.Row():
-                    # Contact information message
-                    gr.Markdown("\nFor any queries, Feel free to contact 📧 core.atsc@gmail.com", elem_id='centered-title')
-                with gr.Row():
-                    # Horizontal rule
-                    gr.Markdown("""---""")
-            
-        with gr.Row():
-            # Left side footer: company name
-            with gr.Column(scale=1, min_width=300):
-                with gr.Row():
+        with gr.Column():
+            # Line 1 - Centered contact info
+            gr.Markdown(
+                "<div style='text-align:center;'>For any queries, feel free to contact 📧 <a href='mailto:core.atsc@gmail.com'>core.atsc@gmail.com</a></div>",
+                elem_id="footer-contact"
+            )
+
+            # Line 2 - Left company info, Right creator info
+            with gr.Row():
+                with gr.Column(scale=1, min_width=300):
                     gr.Markdown(
-                        "© 2025 HapiHygi Innovations Pvt. Ltd. &nbsp; All rights reserved.",
-                        elem_id="footer-left",
+                        "<div style='text-align:left;'>© 2025 HapiHygi Innovations Pvt. Ltd. &nbsp; All rights reserved.</div>",
+                        elem_id="footer-left"
                     )
-
-            # Right side footer: creator info and links
-            with gr.Column(scale=1, min_width=300):
-                with gr.Row():
+                with gr.Column(scale=1, min_width=300):
                     gr.Markdown(
                         """
-                        <div style='text-align:right'>
-                        <a href="mailto:savaliyaheet19@gmail.com">👨‍💻</a>
-                        <a href="https://github.com/heetsavaliya" target="_blank"><i>Created by:</i></a>
-                        <a href="https://www.linkedin.com/in/heet-savaliya-03b863252/" target="_blank"><i>Heet Savaliya, PDEU</i></a>
+                        <div style='text-align:right;'>
+                            <a href="mailto:savaliyaheet19@gmail.com">👨‍💻</a>
+                            <a href="https://github.com/heetsavaliya" target="_blank"><i>Created by:</i></a>
+                            <a href="https://www.linkedin.com/in/heet-savaliya-03b863252/" target="_blank"><i>Heet Savaliya, PDEU</i></a>
                         </div>
                         """,
-                        elem_id="footer-right",
+                        elem_id="footer-right"
                     )
 
 # 🚀 Launch the full app