Update app.py

app.py

@@ -84,14 +84,7 @@ def billing_interface(patient_id):
 
 # Gradio Interface
 with gr.Blocks() as app:
-    gr.Markdown("""
-    <div style="display: flex; align-items: center; justify-content: center;">
-        <img src="file/logo.png" alt="Logo" style="height: 50px; margin-right: 15px;">
-        <h1 style="color: #ff9800; font-size: 2.5em; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);">
-            Sathkrutha LIMS
-        </h1>
-    </div>
-    """, elem_id="header")
+    gr.Markdown("<h1 style='text-align: center;'>Sathkrutha LIMS</h1>", elem_id="header")
 
     with gr.Tab("Patient Registration"):
         with gr.Row():
@@ -127,176 +120,77 @@ with gr.Blocks() as app:
         billing_output = gr.Textbox(label="Billing Information")
         fetch_button.click(billing_interface, [patient_id_bill], billing_output)
 
+# Custom CSS styling
 app.css = """
-/* Global styling */
 body {
-    font-family: 'Arial', sans-serif;
-    background: #2b2b2b;
-    color: #f0f0f0;
+    font-family: Arial, sans-serif;
+    background: url('./background.png') no-repeat center center fixed;
+    background-size: cover;
+    color: #ccdb42;
 }
-
-/* Header Styling */
-#header h1 {
-    color: #ffcc00;
-    font-size: 2.8em;
-    font-weight: bold;
-    text-align: center;
-    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
-    padding-bottom: 20px;
-    margin: 0;
+#header {
+    color: #ccdb42;
 }
-
-/* Container Styling */
 .gradio-container {
-    max-width: 900px;
-    margin: 20px auto;
-    padding: 30px;
-    background: #383838;
-    border-radius: 15px;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
-    color: #f0f0f0;
-}
-
-/* Tab Styling with Rounded Rectangle */
-.gradio-container .gr-tab {
-    color: #f0f0f0; /* Set default text color to white */
-    padding: 10px 20px;
-    font-weight: bold;
-    cursor: pointer;
-    position: relative;
-    transition: color 0.3s ease, background-color 0.3s ease;
-    border-radius: 8px;
-}
-
-.gradio-container .gr-tab:hover {
-    color: #ffffff;
-    background-color: #ffcc00; /* Background color for hover effect */
-}
-
-.gradio-container .gr-tab-active {
-    color: #ffffff;
-    background-color: #ffcc00; /* Background color for active tab */
-    border-radius: 8px;
-}
-
-/* Adding spacing between tabs */
-.gradio-container .gr-tab + .gr-tab {
-    margin-left: 5px;
-}
-
-/* Input Field Styling (outer container) */
-#name_field, #father_name_field, #age_field, #phone_field, #pincode_field, textarea {
-    width: 100%;
-    background-color: #383838; /* Dark background for outer container */
-    color: #f0f0f0;
-    border: 1px solid #666;
-    border-radius: 8px;
-    padding: 0;
-    font-size: 1em;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-    margin-top: 10px;
-    box-sizing: border-box;
-}
-
-/* Inner input area styling */
-#name_field input, #father_name_field input, #age_field input, #phone_field input, #pincode_field input, textarea {
-    background-color: #ffffff; /* White background for inner input area */
-    color: #000; /* Black text color for readability */
-    border: none;
-    padding: 12px;
-    border-radius: 8px;
-    font-size: 1em;
-}
-
-/* Focus effect for the outer field container */
-#name_field:focus-within, #father_name_field:focus-within, #age_field:focus-within, #phone_field:focus-within, #pincode_field:focus-within, textarea:focus-within {
-    border-color: #ffcc00;
-    box-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
-    outline: none;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background: rgba(34, 34, 34, 0.9); /* Slight transparency */
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+}
+#name_field, #father_name_field {
+    max-width: 750px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px;
+}
+#age_field {
+    max-width: 300px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px;
+}
+#phone_field {
+    max-width: 1100px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px;
+}
+#pincode_field {
+    max-width: 400px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px;
+}
+textarea {
+    font-size: 14px;
+    color: #edebeb;
 }
-
-/* Button Styling */
 .gr-button {
-    background-color: #ffcc00;
-    color: #ffffff;
+    color: #14d10a;
     border: none;
-    border-radius: 8px;
-    padding: 12px 25px;
+    border-radius: 5px;
+    padding: 10px 20px;
     cursor: pointer;
-    font-size: 1em;
     font-weight: bold;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    margin-top: 15px;
 }
-
 .gr-button:hover {
-    background-color: #e6b800;
-    transform: translateY(-2px);
-}
-
-.gr-button:active {
-    background-color: #cc9900;
-    transform: translateY(0px);
-}
-
-/* Advanced styling for Test Categories and Available Tests checkboxes */
-.gr-checkbox-group label {
-    display: inline-flex;
-    align-items: center;
-    padding: 8px 12px;
-    margin: 5px;
-    font-size: 0.9em;
-    font-weight: bold;
-    color: #f0f0f0;
-    background-color: #454545;
-    border: 1px solid #666;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.gr-checkbox-group label:hover {
-    background-color: #555;
-    border-color: #ffcc00;
-    color: #ffcc00;
+    background-color: #2d32b5;
 }
-
-.gr-checkbox-group input[type="checkbox"]:checked + label {
-    background-color: #ffcc00;
-    border-color: #ffcc00;
-    color: #ffffff;
+.gr-tab {
+    background-color: transparent; /* Fully transparent */
+    border-radius: 8px;
 }
-
-.gr-checkbox-group input[type="checkbox"] {
-    display: none;
+h1, h2, h3, h4, h5, h6 {
+    color: #de14de;
 }
-
-/* Billing Output Styling */
 #billing_output {
-    background-color: #4b4b4b;
+    background-color: #b0c91e;
     padding: 15px;
-    border-radius: 8px;
-    color: #ffcc00;
-    border: 1px solid #ffcc00;
-    font-size: 1em;
-    margin-top: 10px;
+    border-radius: 5px;
+    color: #272dd9;
 }
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    #header h1 {
-        font-size: 2.2em;
-    }
-    .gradio-container {
-        padding: 20px;
-    }
-    .gr-button {
-        padding: 10px 20px;
-        font-size: 0.9em;
-    }
-}
-
 """
 
 app.launch()